/*
 * ================================================================
 *  CHANNIX CLIENT PORTAL — client-portal.css  v1.0.0
 *  All selectors are scoped under the .ccp- namespace.
 *  Zero conflicts with any existing WordPress / Elementor CSS.
 * ================================================================
 */

/* ── Custom Properties (scoped) ── */
#ccp-overlay, #ccp-user-bar {
    --ccp-primary:     #e05a00;
    --ccp-primary-dk:  #b84900;
    --ccp-primary-lt:  #ff8c38;
    --ccp-white:       #ffffff;
    --ccp-bg:          #f9fafb;
    --ccp-border:      #e5e7eb;
    --ccp-text:        #111827;
    --ccp-muted:       #6b7280;
    --ccp-subtle:      #9ca3af;
    --ccp-shadow:      0 24px 64px rgba(0,0,0,0.28);
    --ccp-radius:      18px;
    --ccp-radius-sm:   10px;
    --ccp-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                       'Helvetica Neue', Arial, sans-serif;
    --ccp-transition:  0.2s ease;
}

/* ================================================================
   LOCK BADGE — shown next to locked menu items
   ================================================================ */
.ccp-lock-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    vertical-align: middle;
    color: var(--ccp-primary, #e05a00);
    opacity: 0.85;
    position: relative;
    top: -1px;
    transition: opacity 0.2s;
}

.ccp-lock-badge:hover {
    opacity: 1;
}

/* ================================================================
   OVERLAY
   ================================================================ */
.ccp-overlay {
    display:         none;
    position:        fixed;
    inset:           0;
    background:      rgba(15, 18, 28, 0.72);
    backdrop-filter: blur(8px) saturate(1.4);
    -webkit-backdrop-filter: blur(8px) saturate(1.4);
    z-index:         9999999;
    align-items:     center;
    justify-content: center;
    padding:         20px;
    box-sizing:      border-box;
}

.ccp-overlay[aria-hidden="false"],
.ccp-overlay.ccp-active {
    display:   flex;
    animation: ccpFadeIn 0.22s ease forwards;
}

/* ================================================================
   MODAL CARD
   ================================================================ */
.ccp-modal {
    position:      relative;
    width:         100%;
    max-width:     440px;
    background:    var(--ccp-white);
    border-radius: var(--ccp-radius);
    overflow:      hidden;
    box-shadow:    var(--ccp-shadow);
    font-family:   var(--ccp-font);
    animation:     ccpPopIn 0.32s cubic-bezier(0.34, 1.50, 0.64, 1) forwards;
    /* Hard reset — isolates from theme styles */
    all: initial;
    position: relative;
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.28);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    animation: ccpPopIn 0.32s cubic-bezier(0.34, 1.50, 0.64, 1) forwards;
    box-sizing: border-box;
}

.ccp-modal * {
    box-sizing: border-box;
}

/* ── Close button ── */
.ccp-close {
    all: initial;
    cursor: pointer;
    position: absolute;
    top:   14px;
    right: 14px;
    width:  30px;
    height: 30px;
    background: rgba(255,255,255,0.18);
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 10;
    border: none;
    font-family: inherit;
    line-height: 1;
}

.ccp-close:hover { background: rgba(255,255,255,0.32); }
.ccp-close:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* ================================================================
   MODAL HEADER
   ================================================================ */
.ccp-modal-header {
    background: linear-gradient(145deg, #e05a00 0%, #ff8c38 100%);
    padding:    38px 32px 30px;
    text-align: center;
    color:      #ffffff;
}

.ccp-header-ring {
    width:         70px;
    height:        70px;
    border-radius: 50%;
    background:    rgba(255,255,255,0.14);
    border:        2px solid rgba(255,255,255,0.22);
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin:        0 auto 18px;
    box-shadow:    0 0 0 8px rgba(255,255,255,0.07);
}

.ccp-header-icon { display: flex; align-items: center; justify-content: center; }

.ccp-modal-title {
    all: initial;
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size:   22px;
    font-weight: 700;
    color:       #ffffff;
    margin:      0 0 6px;
    letter-spacing: -0.3px;
}

.ccp-modal-sub {
    all: initial;
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13.5px;
    color:     rgba(255,255,255,0.78);
    margin:    0;
}

/* ================================================================
   MODAL BODY
   ================================================================ */
.ccp-modal-body {
    padding: 28px 32px 20px;
}

/* ── Alert ── */
.ccp-alert {
    display:       none;
    padding:       12px 14px;
    border-radius: var(--ccp-radius-sm, 10px);
    font-size:     13.5px;
    font-weight:   500;
    margin-bottom: 20px;
    line-height:   1.45;
    font-family:   inherit;
}

.ccp-alert-error {
    background: #fef2f2;
    color:      #c81e1e;
    border:     1px solid #fecaca;
}

.ccp-alert-success {
    background: #f0fdf4;
    color:      #15803d;
    border:     1px solid #bbf7d0;
}

/* ── Form field ── */
.ccp-field {
    margin-bottom: 18px;
}

.ccp-label {
    all: initial;
    display: block;
    font-family: inherit;
    font-size:   12.5px;
    font-weight: 600;
    color:       #374151;
    margin-bottom: 8px;
    letter-spacing: 0.25px;
    text-transform: none;
}

.ccp-input-wrap {
    position: relative;
    display:  flex;
    align-items: center;
}

.ccp-fi {
    position:       absolute;
    display:        flex;
    align-items:    center;
    pointer-events: none;
    color:          #9ca3af;
    transition:     color 0.2s;
}

.ccp-fi-left { left: 14px; }

.ccp-input {
    all: initial;
    display:       block;
    width:         100%;
    padding:       12px 44px 12px 42px;
    border:        1.5px solid #e5e7eb;
    border-radius: 12px;
    font-family:   inherit;
    font-size:     14px;
    color:         #111827;
    background:    #f9fafb;
    transition:    border-color 0.2s, box-shadow 0.2s, background 0.2s;
    outline:       none;
    box-sizing:    border-box;
    -webkit-appearance: none;
}

.ccp-input::placeholder { color: #9ca3af; }

.ccp-input:focus {
    border-color: #e05a00;
    background:   #ffffff;
    box-shadow:   0 0 0 3.5px rgba(224, 90, 0, 0.13);
}

.ccp-input:focus + .ccp-fi-left,
.ccp-input-wrap:focus-within .ccp-fi-left {
    color: #e05a00;
}

/* ── Password eye ── */
.ccp-pw-eye {
    all: initial;
    cursor:      pointer;
    position:    absolute;
    right:       13px;
    color:       #9ca3af;
    display:     flex;
    align-items: center;
    transition:  color 0.2s;
    padding:     4px;
    border-radius: 4px;
    font-family: inherit;
}

.ccp-pw-eye:hover { color: #e05a00; }

/* ── Remember me ── */
.ccp-remember-row {
    margin-bottom: 22px;
}

.ccp-check-label {
    display:     flex;
    align-items: center;
    gap:         10px;
    cursor:      pointer;
    user-select: none;
}

.ccp-check-native { display: none; }

.ccp-check-box {
    width:         18px;
    height:        18px;
    flex-shrink:   0;
    border:        2px solid #d1d5db;
    border-radius: 5px;
    background:    #ffffff;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    border-color 0.18s, background 0.18s;
}

.ccp-check-native:checked ~ .ccp-check-box {
    background:   #e05a00;
    border-color: #e05a00;
}

.ccp-check-native:checked ~ .ccp-check-box::after {
    content:       '';
    display:       block;
    width:         5px;
    height:        9px;
    border:        2px solid #fff;
    border-top:    none;
    border-left:   none;
    transform:     rotate(44deg) translateY(-1px);
}

.ccp-check-text {
    font-size:  13px;
    color:      #6b7280;
    font-family: inherit;
}

/* ── Submit button ── */
.ccp-btn-submit {
    all: initial;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    width:           100%;
    padding:         13.5px;
    background:      linear-gradient(135deg, #e05a00 0%, #ff8c38 100%);
    color:           #ffffff;
    border-radius:   12px;
    font-family:     inherit;
    font-size:       15px;
    font-weight:     700;
    letter-spacing:  0.3px;
    cursor:          pointer;
    transition:      opacity 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow:      0 4px 16px rgba(224, 90, 0, 0.32);
    border:          none;
    box-sizing:      border-box;
    -webkit-appearance: none;
}

.ccp-btn-submit:hover:not(:disabled) {
    opacity:    0.9;
    transform:  translateY(-1px);
    box-shadow: 0 6px 22px rgba(224, 90, 0, 0.40);
}

.ccp-btn-submit:active:not(:disabled) {
    transform:  translateY(0);
    box-shadow: 0 2px 8px rgba(224, 90, 0, 0.25);
}

.ccp-btn-submit:disabled {
    opacity: 0.68;
    cursor:  not-allowed;
}

.ccp-btn-submit:focus-visible {
    outline: 3px solid #ff8c38;
    outline-offset: 2px;
}

/* ── Spinner ── */
.ccp-spinning {
    animation: ccpSpin 0.75s linear infinite;
}

/* ================================================================
   MODAL FOOTER
   ================================================================ */
.ccp-modal-foot {
    padding:    14px 32px 22px;
    text-align: center;
    border-top: 1px solid #f3f4f6;
}

.ccp-modal-foot p {
    all: initial;
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 12.5px;
    color:     #9ca3af;
    margin: 0;
}

.ccp-foot-link {
    all: initial;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color:       #e05a00 !important;
    font-weight: 500;
    text-decoration: none;
}

.ccp-foot-link:hover { text-decoration: underline !important; }

/* ================================================================
   USER BAR (bottom-right pill — shown when logged in)
   ================================================================ */
.ccp-user-bar {
    position:      fixed;
    bottom:        24px;
    right:         24px;
    background:    #ffffff;
    border-radius: 50px;
    padding:       9px 16px 9px 10px;
    display:       flex;
    align-items:   center;
    gap:           12px;
    box-shadow:    0 8px 32px rgba(0,0,0,0.14), 0 1px 4px rgba(0,0,0,0.07);
    z-index:       99999;
    font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    border:        1px solid #f0f0f0;
    animation:     ccpSlideUp 0.35s cubic-bezier(0.34, 1.40, 0.64, 1) forwards;
}

.ccp-ub-left {
    display:     flex;
    align-items: center;
    gap:         9px;
}

.ccp-ub-avatar {
    width:           34px;
    height:          34px;
    border-radius:   50%;
    background:      linear-gradient(135deg, #e05a00, #ff8c38);
    color:           #ffffff;
    font-size:       14px;
    font-weight:     700;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    letter-spacing:  0.5px;
}

.ccp-ub-info {
    display:        flex;
    flex-direction: column;
    line-height:    1.3;
}

.ccp-ub-greeting {
    font-size:  10.5px;
    color:      #9ca3af;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ccp-ub-name {
    font-size:   13.5px;
    font-weight: 600;
    color:       #111827;
}

.ccp-ub-logout {
    all: initial;
    cursor:      pointer;
    display:     flex;
    align-items: center;
    gap:         5px;
    font-family: inherit;
    font-size:   12.5px;
    font-weight: 600;
    color:       #e05a00 !important;
    text-decoration: none !important;
    padding-left: 12px;
    border-left:  1.5px solid #f0f0f0;
    transition:   color 0.2s;
    white-space:  nowrap;
}

.ccp-ub-logout:hover { color: #b84900 !important; }

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes ccpFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ccpPopIn {
    from { opacity: 0; transform: scale(0.93) translateY(14px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

@keyframes ccpSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes ccpSpin {
    to { transform: rotate(360deg); }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 480px) {
    .ccp-modal { border-radius: 16px; }
    .ccp-modal-header { padding: 30px 24px 24px; }
    .ccp-modal-body   { padding: 22px 20px 16px; }
    .ccp-modal-foot   { padding: 12px 20px 18px; }

    .ccp-user-bar {
        bottom:          14px;
        right:           12px;
        left:            12px;
        border-radius:   16px;
        justify-content: space-between;
        padding: 10px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ccp-modal,
    .ccp-overlay,
    .ccp-user-bar { animation: none !important; }
}