/*
 * Channix Client Portal v4 — portal.css
 * All selectors: #ccp-* / .ccp-*  (zero conflicts)
 */

/* ── Lock badges (JS injected) ── */
.ccp-lock {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin-left: 5px !important;
    position: relative !important;
    top: -1px !important;
    pointer-events: none !important;
    flex-shrink: 0 !important;
}
.ccp-lock svg { width:13px !important; height:15px !important; display:block !important; }
.ccp-lock-closed { color:#111 !important; }
.ccp-lock-open   { color:#16a34a !important; }

/* ── Overlay ── */
#ccp-overlay {
    display: none;
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    z-index: 2147483647 !important;
    background: rgba(8,10,18,.78) !important;
    backdrop-filter: blur(9px) !important;
    -webkit-backdrop-filter: blur(9px) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}
#ccp-overlay.ccp-visible {
    display: flex !important;
    animation: ccp-bg-in .2s ease !important;
}

/* ── Card ── */
.ccp-card {
    position: relative !important;
    width: 100% !important;
    max-width: 400px !important;
    background: #fff !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 28px 80px rgba(0,0,0,.42), 0 0 0 1px rgba(0,0,0,.06) !important;
    animation: ccp-card-in .32s cubic-bezier(.34,1.4,.64,1) !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
}
.ccp-card * { box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; }

/* ── Close ── */
#ccp-x {
    position: absolute !important;
    top: 12px !important; right: 12px !important;
    z-index: 5 !important;
    width: 28px !important; height: 28px !important;
    background: rgba(255,255,255,.2) !important;
    border: none !important; border-radius: 50% !important;
    color: #fff !important; cursor: pointer !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: background .15s !important;
    font-size: 0 !important; line-height: 1 !important;
}
#ccp-x:hover { background: rgba(255,255,255,.38) !important; }
#ccp-x svg   { width:11px !important; height:11px !important; display:block !important; }

/* ── Header ── */
.ccp-head {
    padding: 34px 28px 26px !important;
    background: linear-gradient(150deg,#1a1a2e,#0f3460) !important;
    text-align: center !important;
    position: relative !important;
}
.ccp-head::after {
    content:''; position:absolute; bottom:0; left:0; right:0;
    height:3px; background:linear-gradient(90deg,#e05a00,#ff8c38,#e05a00) !important;
}
.ccp-head-ring {
    width:60px !important; height:60px !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.12) !important;
    border:1.5px solid rgba(255,255,255,.22) !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    margin:0 auto 14px !important;
    box-shadow:0 0 0 10px rgba(255,255,255,.05) !important;
}
.ccp-head-ring svg { width:28px !important; height:28px !important; display:block !important; }
.ccp-head h2 {
    font-family:inherit !important; font-size:20px !important; font-weight:700 !important;
    color:#fff !important; margin-bottom:6px !important; display:block !important;
    letter-spacing:-.2px !important; line-height:1.3 !important;
}
.ccp-head p {
    font-family:inherit !important; font-size:13px !important;
    color:rgba(255,255,255,.65) !important; display:block !important; line-height:1.4 !important;
}

/* ── Body ── */
.ccp-body { padding:24px 26px 18px !important; }

/* Alert */
.ccp-msg {
    padding:11px 14px !important; border-radius:10px !important;
    font-size:13px !important; font-weight:500 !important;
    margin-bottom:16px !important; line-height:1.45 !important;
    font-family:inherit !important; display:none !important;
}
.ccp-msg.err { display:block !important; background:#fff1f0 !important; color:#b91c1c !important; border:1px solid #fecaca !important; }
.ccp-msg.ok  { display:block !important; background:#f0fdf4 !important; color:#15803d !important; border:1px solid #bbf7d0 !important; }

/* Field */
.ccp-field { margin-bottom:15px !important; }
.ccp-lbl {
    display:block !important; font-family:inherit !important;
    font-size:11px !important; font-weight:700 !important;
    color:#4b5563 !important; text-transform:uppercase !important;
    letter-spacing:.7px !important; margin-bottom:7px !important;
}
.ccp-iw { position:relative !important; display:flex !important; align-items:center !important; }
.ccp-ico {
    position:absolute !important; left:13px !important;
    width:16px !important; height:16px !important;
    color:#9ca3af !important; pointer-events:none !important;
    transition:color .18s !important; flex-shrink:0 !important;
}
.ccp-in {
    display:block !important; width:100% !important;
    padding:12px 44px 12px 42px !important;
    border:1.5px solid #e5e7eb !important; border-radius:11px !important;
    font-family:inherit !important; font-size:14px !important;
    color:#111827 !important; background:#f9fafb !important;
    outline:none !important; transition:border-color .18s,box-shadow .18s,background .18s !important;
    -webkit-appearance:none !important; line-height:1.5 !important;
}
.ccp-in::placeholder { color:#9ca3af !important; }
.ccp-in:focus {
    border-color:#e05a00 !important; background:#fff !important;
    box-shadow:0 0 0 3.5px rgba(224,90,0,.14) !important;
}
.ccp-iw:focus-within .ccp-ico { color:#e05a00 !important; }

/* Eye */
.ccp-eye {
    position:absolute !important; right:11px !important;
    background:none !important; border:none !important;
    cursor:pointer !important; color:#9ca3af !important;
    display:flex !important; align-items:center !important;
    padding:4px !important; outline:none !important; transition:color .18s !important;
}
.ccp-eye svg { width:16px !important; height:16px !important; }
.ccp-eye:hover { color:#e05a00 !important; }

/* Remember */
.ccp-row-mem { margin-bottom:18px !important; }
.ccp-mem {
    display:flex !important; align-items:center !important;
    gap:9px !important; cursor:pointer !important; user-select:none !important;
    font-family:inherit !important;
}
.ccp-chk-real { display:none !important; }
.ccp-chk-box {
    width:17px !important; height:17px !important; flex-shrink:0 !important;
    border:2px solid #d1d5db !important; border-radius:5px !important;
    background:#fff !important; display:flex !important;
    align-items:center !important; justify-content:center !important;
    transition:all .18s !important;
}
.ccp-chk-real:checked + .ccp-chk-box { background:#e05a00 !important; border-color:#e05a00 !important; }
.ccp-chk-real:checked + .ccp-chk-box::after {
    content:'' !important; display:block !important;
    width:4.5px !important; height:8.5px !important;
    border:2px solid #fff !important; border-top:none !important; border-left:none !important;
    transform:rotate(44deg) translateY(-1px) !important;
}
.ccp-chk-txt { font-size:13px !important; color:#6b7280 !important; font-family:inherit !important; }

/* Submit */
.ccp-btn {
    display:flex !important; align-items:center !important; justify-content:center !important;
    gap:8px !important; width:100% !important; padding:13px !important;
    background:linear-gradient(135deg,#e05a00,#ff8c38) !important;
    color:#fff !important; border:none !important; border-radius:11px !important;
    font-family:inherit !important; font-size:15px !important; font-weight:700 !important;
    cursor:pointer !important; letter-spacing:.3px !important; outline:none !important;
    transition:transform .15s,box-shadow .2s,opacity .18s !important;
    box-shadow:0 4px 18px rgba(224,90,0,.4) !important;
    -webkit-appearance:none !important; line-height:1 !important;
}
.ccp-btn:hover:not(:disabled) { transform:translateY(-1.5px) !important; box-shadow:0 7px 24px rgba(224,90,0,.5) !important; }
.ccp-btn:disabled { opacity:.6 !important; cursor:not-allowed !important; }
.ccp-btn-spin { width:18px !important; height:18px !important; animation:ccp-spin .7s linear infinite !important; }

/* Footer */
.ccp-foot {
    padding:12px 26px 18px !important; border-top:1px solid #f3f4f6 !important;
    text-align:center !important; font-size:12.5px !important;
    color:#9ca3af !important; font-family:inherit !important;
    display:block !important; line-height:1.5 !important;
}
.ccp-foot a {
    color:#e05a00 !important; font-weight:600 !important;
    text-decoration:none !important; font-family:inherit !important;
}
.ccp-foot a:hover { text-decoration:underline !important; }

/* ── Logout Pill (right side) ── */
#ccp-pill {
    position:fixed !important;
    right:0 !important; top:50% !important;
    transform:translateY(-50%) !important;
    z-index:999998 !important;
    display:flex !important; flex-direction:column !important; align-items:flex-end !important;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif !important;
    animation:ccp-slide-r .4s .3s cubic-bezier(.34,1.3,.64,1) both !important;
}
.ccp-pill-user {
    display:flex !important; align-items:center !important;
    background:#1e293b !important; border-radius:12px 0 0 0 !important;
    padding:10px 12px !important;
    border-bottom:1px solid rgba(255,255,255,.07) !important;
    max-width:48px !important; overflow:hidden !important;
    transition:max-width .3s ease !important; white-space:nowrap !important;
    box-shadow:2px 2px 10px rgba(0,0,0,.2) !important;
}
#ccp-pill:hover .ccp-pill-user, #ccp-pill:focus-within .ccp-pill-user { max-width:240px !important; }
.ccp-pill-av {
    width:34px !important; height:34px !important; border-radius:50% !important;
    background:linear-gradient(135deg,#e05a00,#ff8c38) !important;
    color:#fff !important; font-size:15px !important; font-weight:700 !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    flex-shrink:0 !important; letter-spacing:.5px !important;
}
.ccp-pill-info {
    display:flex !important; flex-direction:column !important;
    padding-left:10px !important; overflow:hidden !important;
}
.ccp-pill-hello { font-size:10px !important; color:#94a3b8 !important; font-weight:600 !important; text-transform:uppercase !important; letter-spacing:.5px !important; line-height:1 !important; margin-bottom:3px !important; font-family:inherit !important; }
.ccp-pill-name  { font-size:13px !important; font-weight:700 !important; color:#f1f5f9 !important; overflow:hidden !important; text-overflow:ellipsis !important; max-width:140px !important; font-family:inherit !important; line-height:1.2 !important; }

.ccp-pill-logout {
    display:flex !important; align-items:center !important;
    background:#e05a00 !important; color:#fff !important;
    text-decoration:none !important; border-radius:0 0 0 12px !important;
    padding:9px 13px !important; max-width:48px !important;
    overflow:hidden !important; white-space:nowrap !important;
    transition:max-width .3s ease,background .18s !important;
    box-shadow:-2px 3px 12px rgba(0,0,0,.2) !important;
    font-family:inherit !important;
}
.ccp-pill-logout svg { width:18px !important; height:18px !important; flex-shrink:0 !important; }
.ccp-pill-logout span { max-width:0 !important; overflow:hidden !important; transition:max-width .25s ease !important; font-size:13px !important; font-weight:700 !important; display:inline-block !important; }
#ccp-pill:hover .ccp-pill-logout, #ccp-pill:focus-within .ccp-pill-logout { max-width:160px !important; background:#b84800 !important; }
#ccp-pill:hover .ccp-pill-logout span, #ccp-pill:focus-within .ccp-pill-logout span { max-width:80px !important; padding-left:8px !important; }

/* ── Keyframes ── */
@keyframes ccp-bg-in   { from{opacity:0} to{opacity:1} }
@keyframes ccp-card-in { from{opacity:0;transform:scale(.9) translateY(14px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes ccp-spin    { to{transform:rotate(360deg)} }
@keyframes ccp-slide-r { from{transform:translateY(-50%) translateX(100%)} to{transform:translateY(-50%) translateX(0)} }

/* ── Mobile ── */
@media (max-width:520px) {
    .ccp-card { border-radius:18px !important; }
    .ccp-head { padding:26px 20px 22px !important; }
    .ccp-body { padding:20px 18px 14px !important; }
    #ccp-pill  { top:auto !important; bottom:70px !important; transform:none !important; animation:ccp-slide-r-mob .4s .3s cubic-bezier(.34,1.3,.64,1) both !important; }
    .ccp-pill-user   { max-width:180px !important; }
    .ccp-pill-logout { max-width:160px !important; }
    .ccp-pill-logout span { max-width:70px !important; padding-left:8px !important; }
}
@keyframes ccp-slide-r-mob { from{transform:translateX(100%)} to{transform:translateX(0)} }
@media (prefers-reduced-motion:reduce) {
    .ccp-card, #ccp-overlay, #ccp-pill { animation:none !important; }
    .ccp-pill-user,.ccp-pill-logout,.ccp-pill-logout span { transition:none !important; }
}