/* =========================================================
   BRAVO CRM — PREMIUM HEADER v2
   Floating panel · Premium nav pills · Unified controls · Status bar
   ========================================================= */


/* ═══════════════════════════════════════════════════════════
   §1  FLOATING SHELL
   header.header → transparent fixed wrapper (adds top padding)
   header__desk  → the visible floating panel
   ═══════════════════════════════════════════════════════════ */

header.header {
    background: transparent !important;
    border:     none !important;
    box-shadow: none !important;
    padding:    20px 40px 0 !important;
    overflow:   visible !important;
}

/* The actual visual panel */
header.header .header__desk {
    background:
        radial-gradient(ellipse 55% 90% at 96% 22%, rgba(255,184,0,.12), transparent 56%),
        linear-gradient(135deg, #ffffff 0%, #f8fbff 58%, #fff8ed 100%) !important;
    border:        1px solid rgba(214,222,235,.88) !important;
    border-radius: 24px !important;
    box-shadow:
        0 18px 45px rgba(15,23,42,.08),
        0 2px 8px   rgba(15,23,42,.04) !important;
    backdrop-filter:         blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    /* strip Bootstrap container horizontal padding */
    padding-left:  0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
}

/* Inner flex row — fixed height + horizontal inset */
header.header .header__wrapper {
    height:  88px !important;
    padding: 0 28px !important;
    display:     flex !important;
    align-items: center !important;
}

/* header__row fills wrapper fully */
header.header .header__desk .header__row {
    height: 100% !important;
    width:  100% !important;
    padding: 0 !important;
}
/* Override the 80px / 100px fixed heights from header.css */
@media (min-width: 0) {
    header.header .header__desk .header__row:first-child { height: 100% !important; }
}
@media (min-width: 1200px) {
    header.header .header__desk .header__row:first-child { height: 100% !important; }
    header.header .nav--desk    .nav__item {
        height: auto !important;
        width:  fit-content !important;
    }
}

/* Content wrapper — floating header is 20px gap + 88px panel = 108px;
   add 22px breathing room = 130px total */
.content-wrapper {
    padding-top: 130px !important;
}


/* ═══════════════════════════════════════════════════════════
   §2  LOGO AREA + VERTICAL DIVIDER
   ═══════════════════════════════════════════════════════════ */

.bravo-logo-link {
    position: relative;
}

/* Subtle gold glow on hover */
.bravo-logo-link::before {
    content: '';
    position: absolute;
    inset: -8px -12px;
    border-radius: 12px;
    background: radial-gradient(ellipse at center, rgba(237,192,22,.10) 0%, transparent 72%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.bravo-logo-link:hover::before { opacity: 1; }

/* Thin gradient divider between logo group and nav — desktop only */
@media (min-width: 1200px) {
    header.header .header__desk .header__row > .header__group:first-child {
        padding-right: 22px;
        position: relative;
    }
    header.header .header__desk .header__row > .header__group:first-child::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 34px;
        background: linear-gradient(to bottom,
            transparent 0%,
            rgba(148,163,184,.28) 40%,
            rgba(148,163,184,.28) 60%,
            transparent 100%);
        pointer-events: none;
    }
}


/* ═══════════════════════════════════════════════════════════
   §3  NAV LINKS — Premium pill style
   ═══════════════════════════════════════════════════════════ */

.nav--desk .link--header {
    height:        40px   !important;
    padding:       0 16px !important;
    border-radius: 14px   !important;
    display:       inline-flex !important;
    align-items:   center      !important;
    position:      relative    !important;
    font-size:     14px        !important;
    font-weight:   500         !important;
    color:         #475569     !important;
    background:    transparent !important;
    border:        1px solid transparent !important;
    transition:
        background   .18s ease,
        color        .18s ease,
        border-color .18s ease,
        box-shadow   .18s ease !important;
}

/* Hover: soft glass pill */
.nav--desk .link--header:hover {
    background:   rgba(255,255,255,.65) !important;
    border-color: rgba(214,222,235,.72) !important;
    box-shadow:   0 4px 10px rgba(15,23,42,.05) !important;
    color:        #0f172a !important;
}

/* Active: premium capsule */
.nav--desk .link--header.active {
    background:  rgba(255,255,255,.85) !important;
    border:      1px solid rgba(226,232,240,.95) !important;
    box-shadow:
        0 8px 20px rgba(15,23,42,.07),
        inset 0 1px 0 rgba(255,255,255,.90) !important;
    color:       #0f172a !important;
    font-weight: 600    !important;
}

/* Active indicator: animated brand-gold dot below pill */
.nav--desk .link--header.active::after {
    content:    ""      !important;
    position:   absolute !important;
    bottom:    -10px    !important;
    left:       50%     !important;
    right:      auto    !important;
    width:      6px     !important;
    height:     6px     !important;
    transform:  translateX(-50%) !important;
    border-radius: 999px !important;
    background: #f5b400 !important;
    box-shadow: 0 0 10px rgba(245,180,0,.60) !important;
    transition: none !important;
}

/* Disable the slide-underline ::before from previous version */
.nav--desk .link--header::before {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════
   §4  RIGHT CONTROLS — unified glass-button style
   ═══════════════════════════════════════════════════════════ */

/* ── Search trigger ── */
.search-trigger {
    height:        40px   !important;
    min-width:     178px  !important;
    border-radius: 14px   !important;
    background:    rgba(255,255,255,.72)       !important;
    border:        1px solid rgba(203,213,225,.80) !important;
    box-shadow:
        0 4px 10px rgba(15,23,42,.05),
        inset 0 1px 0 rgba(255,255,255,.90) !important;
    padding:    0 12px !important;
    font-size:  13px   !important;
    color:      #94a3b8 !important;
    gap:        7px    !important;
    transition: border-color .18s, background .18s, box-shadow .18s !important;
}
.search-trigger:hover {
    background:   rgba(255,255,255,.96) !important;
    border-color: rgba(245,180,0,.45) !important;
    box-shadow:
        0 6px 14px rgba(15,23,42,.07),
        inset 0 1px 0 rgba(255,255,255,1) !important;
    color: #64748b !important;
}
.search-trigger__kbd {
    padding:       3px 7px !important;
    border-radius: 7px     !important;
    background:    rgba(248,250,252,.90) !important;
    border:        1px solid rgba(203,213,225,.70) !important;
    font-size:     11px !important;
}

/* ── Theme toggle ── */
.theme-toggle {
    width:         40px !important;
    height:        40px !important;
    border-radius: 14px !important;
    background:    rgba(255,255,255,.76) !important;
    border:        1px solid rgba(203,213,225,.78) !important;
    box-shadow:
        0 6px 14px rgba(15,23,42,.06),
        inset 0 1px 0 rgba(255,255,255,.90) !important;
    transition: background .18s, border-color .18s, transform .18s, box-shadow .18s !important;
}
.theme-toggle:hover {
    background:   rgba(255,255,255,.96) !important;
    border-color: rgba(245,180,0,.45) !important;
    transform:    translateY(-1px) !important;
    box-shadow:
        0 8px 18px rgba(15,23,42,.09),
        inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* ── Language selector ── */
.lang-compact__btn {
    height:        40px !important;
    border-radius: 14px !important;
    background:    rgba(255,255,255,.76) !important;
    border:        1px solid rgba(203,213,225,.78) !important;
    box-shadow:
        0 6px 14px rgba(15,23,42,.06),
        inset 0 1px 0 rgba(255,255,255,.90) !important;
    padding:    0 12px !important;
    gap:        5px    !important;
    color:      #475569 !important;
    transition: background .18s, border-color .18s, transform .18s !important;
}
.lang-compact__btn:hover {
    background:   rgba(255,255,255,.96) !important;
    border-color: rgba(245,180,0,.45) !important;
    transform:    translateY(-1px) !important;
    color:        #0f172a !important;
}

/* ── User chip: subtle pill-wrap on hover ── */
.user-chip__btn {
    height:        40px !important;
    padding:       0 4px !important;
    border-radius: 14px  !important;
    background:    transparent !important;
    border:        1px solid transparent !important;
    transition: background .18s, border-color .18s !important;
}
.user-chip__btn:hover {
    background:   rgba(255,255,255,.65) !important;
    border-color: rgba(214,222,235,.72) !important;
}

/* ── BUY CRYPTO — main CTA ── */
.nav-btn--buy {
    height:        40px  !important;
    padding:       0 22px !important;
    border-radius: 14px  !important;
    background:    linear-gradient(135deg, #ffc400 0%, #ff9900 100%) !important;
    color:         #111827 !important;
    font-weight:   700     !important;
    font-size:     13px    !important;
    border:        1px solid rgba(245,158,11,.55) !important;
    box-shadow:
        0 10px 24px rgba(245,158,11,.28),
        inset 0 1px 0 rgba(255,255,255,.45) !important;
    position: relative !important;
    overflow: hidden  !important;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
.nav-btn--buy:hover {
    color:     #111827 !important;
    filter:    brightness(1.04) !important;
    transform: translateY(-1px) !important;
    box-shadow:
        0 14px 30px rgba(245,158,11,.38),
        inset 0 1px 0 rgba(255,255,255,.50) !important;
}
/* Shimmer */
.nav-btn--buy::before {
    content:  '' !important;
    display:  block !important;
    position: absolute !important;
    top:  0   !important;
    left: -75% !important;
    width:  50%  !important;
    height: 100% !important;
    background: linear-gradient(100deg,
        transparent 20%,
        rgba(255,255,255,.38) 50%,
        transparent 80%) !important;
    transform:  skewX(-20deg) !important;
    transition: left .55s cubic-bezier(.22,.61,.36,1) !important;
    pointer-events: none !important;
}
.nav-btn--buy:hover::before { left: 130% !important; }

/* Separator */
.header-sep {
    background: rgba(148,163,184,.28);
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════
   §5  KYC / VERIFICATION BANNER → Premium status bar
   ═══════════════════════════════════════════════════════════ */

.kyc-banner {
    display:     flex       !important;
    align-items: center     !important;
    gap:         16px       !important;
    min-height:  68px       !important;
    padding:     0 28px     !important;
    margin:      0 0 28px   !important;
    border-radius: 22px     !important;
    border-left:   1px solid transparent !important;
    border:        1px solid #93c5fd !important;
    background:    linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%) !important;
    box-shadow:
        0 14px 34px rgba(37,99,235,.10),
        0 2px 8px   rgba(15,23,42,.06) !important;
    animation: kycBannerIn .4s cubic-bezier(.22,.61,.36,1) both !important;
    transform: none !important;
}
.kyc-banner:hover {
    transform:  none !important;
    box-shadow:
        0 14px 34px rgba(37,99,235,.14),
        0 2px 8px   rgba(15,23,42,.07) !important;
}

/* Variants */
.kyc-banner--pending {
    background:   linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%) !important;
    border-color: #fbbf24 !important;
    box-shadow:
        0 14px 34px rgba(245,158,11,.12),
        0 2px 8px   rgba(15,23,42,.05) !important;
}
.kyc-banner--rejected {
    background:   linear-gradient(135deg, #fee2e2 0%, #fff1f2 100%) !important;
    border-color: #f87171 !important;
    box-shadow:
        0 14px 34px rgba(239,68,68,.10),
        0 2px 8px   rgba(15,23,42,.05) !important;
}
.kyc-banner--partly {
    background:   linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%) !important;
    border-color: #93c5fd !important;
}

/* Icon circle — refined */
.kyc-banner__icon {
    width:     44px !important;
    height:    44px !important;
    min-width: 44px !important;
    border-radius: 999px !important;
    flex-shrink: 0 !important;
    display:     flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color:      #ffffff !important;
    box-shadow:
        0 6px 14px rgba(37,99,235,.28),
        inset 0 1px 0 rgba(255,255,255,.30) !important;
}
.kyc-banner--pending  .kyc-banner__icon {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color:      #ffffff !important;
    box-shadow:
        0 6px 14px rgba(245,158,11,.30),
        inset 0 1px 0 rgba(255,255,255,.30) !important;
}
/* partly = in-review */
.kyc-banner--partly .kyc-banner__icon {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color:      #ffffff !important;
    box-shadow:
        0 6px 14px rgba(37,99,235,.32),
        inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.kyc-banner--rejected .kyc-banner__icon {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color:      #ffffff !important;
    box-shadow:
        0 6px 14px rgba(239,68,68,.28),
        inset 0 1px 0 rgba(255,255,255,.30) !important;
}

/* Text */
.kyc-banner__title {
    font-size:   14px    !important;
    font-weight: 700     !important;
    color:       #1e3a5f !important;
    line-height: 1.3     !important;
    margin:      0       !important;
}
.kyc-banner--pending .kyc-banner__title {
    color: #78350f !important;
}
.kyc-banner--rejected .kyc-banner__title {
    color: #7f1d1d !important;
}
.kyc-banner__sub {
    font-size:   13px    !important;
    color:       #1e40af !important;
    margin-top:  3px     !important;
    line-height: 1.4     !important;
    font-weight: 500     !important;
}
.kyc-banner--pending .kyc-banner__sub {
    color: #92400e !important;
}
.kyc-banner--rejected .kyc-banner__sub {
    color: #991b1b !important;
}

/* CTA button — outlined style instead of solid */
.kyc-banner__btn {
    display:     inline-flex !important;
    align-items: center      !important;
    gap:         6px         !important;
    padding:     8px 18px    !important;
    border-radius: 12px      !important;
    font-size:   13px        !important;
    font-weight: 600         !important;
    white-space: nowrap      !important;
    flex-shrink: 0           !important;
    text-decoration: none    !important;
    color:       #fff        !important;
    background:  #2563eb    !important;
    border:      1px solid #1d4ed8 !important;
    box-shadow:  0 4px 12px rgba(37,99,235,.30) !important;
    transition:  background .18s, border-color .18s, transform .18s, box-shadow .18s !important;
}
.kyc-banner__btn:hover {
    background:   rgba(37,99,235,.14) !important;
    border-color: rgba(37,99,235,.38) !important;
    transform:    translateY(-1px) !important;
    box-shadow:   0 6px 14px rgba(37,99,235,.16) !important;
    color:        #2563eb !important;
}
.kyc-banner--pending  .kyc-banner__btn {
    color:        #fff       !important;
    background:   #d97706   !important;
    border-color: #b45309   !important;
    box-shadow:   0 4px 12px rgba(180,83,9,.30) !important;
}
.kyc-banner--pending .kyc-banner__btn:hover {
    background:   #b45309   !important;
    border-color: #92400e   !important;
    color:        #fff       !important;
    box-shadow:   0 6px 16px rgba(180,83,9,.40) !important;
}
.kyc-banner--rejected .kyc-banner__btn {
    color:        #fff       !important;
    background:   #dc2626   !important;
    border-color: #b91c1c   !important;
    box-shadow:   0 4px 12px rgba(185,28,28,.28) !important;
}
.kyc-banner--rejected .kyc-banner__btn:hover {
    background:   #b91c1c   !important;
    border-color: #991b1b   !important;
    color:        #fff       !important;
    box-shadow:   0 6px 16px rgba(185,28,28,.38) !important;
}


/* ═══════════════════════════════════════════════════════════
   §6  SCROLLED STATE (class added by header-scroll.js)
   ═══════════════════════════════════════════════════════════ */

.header--scrolled header.header .header__desk {
    box-shadow:
        0 22px 55px rgba(15,23,42,.11),
        0 4px 12px  rgba(15,23,42,.06) !important;
}


/* ═══════════════════════════════════════════════════════════
   §7  DARK THEME
   ═══════════════════════════════════════════════════════════ */

:root.theme-dark header.header .header__desk {
    background:
        radial-gradient(ellipse 55% 90% at 96% 22%, rgba(240,185,11,.10), transparent 56%),
        linear-gradient(135deg, #1b2026 0%, #161c24 58%, #1c1a10 100%) !important;
    border-color: rgba(255,255,255,.08) !important;
    box-shadow:
        0 18px 45px rgba(0,0,0,.40),
        0 2px 8px   rgba(0,0,0,.25) !important;
}

:root.theme-dark .nav--desk .link--header        { color: rgba(234,236,239,.60) !important; }
:root.theme-dark .nav--desk .link--header:hover  {
    background:   rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.12) !important;
    color:        rgba(234,236,239,.90) !important;
}
:root.theme-dark .nav--desk .link--header.active {
    background:  rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.14) !important;
    box-shadow:
        0 8px 20px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
    color: #eaecef !important;
}
:root.theme-dark .nav--desk .link--header.active::after {
    background: #f0b90b !important;
    box-shadow: 0 0 10px rgba(240,185,11,.70) !important;
}

:root.theme-dark .search-trigger {
    background:   rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.10) !important;
    color:        rgba(234,236,239,.45) !important;
}
:root.theme-dark .search-trigger:hover {
    background:   rgba(255,255,255,.10) !important;
    border-color: rgba(240,185,11,.35)  !important;
    color:        rgba(234,236,239,.75) !important;
}
:root.theme-dark .search-trigger__kbd {
    background:   rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.10) !important;
    color:        rgba(234,236,239,.35) !important;
}
:root.theme-dark .theme-toggle {
    background:   rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.12) !important;
    color:        #f0b90b !important;
}
:root.theme-dark .theme-toggle:hover {
    background:   rgba(255,255,255,.13) !important;
    border-color: rgba(240,185,11,.35)  !important;
}
:root.theme-dark .lang-compact__btn {
    background:   rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.12) !important;
    color:        #94a3b8 !important;
}
:root.theme-dark .lang-compact__btn:hover {
    background:   rgba(255,255,255,.13) !important;
    border-color: rgba(240,185,11,.35)  !important;
    color:        #e2e8f0 !important;
}
:root.theme-dark .user-chip__btn:hover {
    background:   rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.12) !important;
}

/* divider in dark */
:root.theme-dark header.header .header__desk .header__row > .header__group:first-child::after {
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(255,255,255,.10) 40%,
        rgba(255,255,255,.10) 60%,
        transparent 100%);
}

/* KYC banner — dark */
:root.theme-dark .kyc-banner {
    background:   linear-gradient(135deg, rgba(30,41,59,.95), rgba(27,32,38,.94)) !important;
    border-color: rgba(59,130,246,.25) !important;
    box-shadow:
        0 14px 34px rgba(0,0,0,.30),
        0 2px 8px   rgba(0,0,0,.20) !important;
}
:root.theme-dark .kyc-banner--pending {
    border-color: rgba(245,158,11,.25) !important;
}
:root.theme-dark .kyc-banner--rejected {
    border-color: rgba(239,68,68,.25) !important;
}
:root.theme-dark .kyc-banner__icon {
    background: linear-gradient(135deg, rgba(30,58,138,.60), rgba(30,64,175,.40)) !important;
    color:      #93c5fd !important;
}
/* partly в dark: тоже насыщенный синий чтобы white icon был виден */
:root.theme-dark .kyc-banner--partly .kyc-banner__icon {
    background: linear-gradient(135deg, rgba(37,99,235,.70), rgba(29,78,216,.55)) !important;
    color:      #ffffff !important;
    box-shadow:
        0 6px 14px rgba(37,99,235,.30),
        inset 0 1px 0 rgba(255,255,255,.15) !important;
}
:root.theme-dark .kyc-banner--pending  .kyc-banner__icon {
    background: linear-gradient(135deg, rgba(120,53,15,.50), rgba(146,64,14,.35)) !important;
    color:      #fcd34d !important;
}
:root.theme-dark .kyc-banner--rejected .kyc-banner__icon {
    background: linear-gradient(135deg, rgba(127,29,29,.50), rgba(153,27,27,.35)) !important;
    color:      #fca5a5 !important;
}
:root.theme-dark .kyc-banner__title { color: #f1f5f9 !important; }
:root.theme-dark .kyc-banner__sub   { color: #94a3b8 !important; }
:root.theme-dark .kyc-banner__btn {
    color:        #60a5fa !important;
    background:   rgba(96,165,250,.10) !important;
    border-color: rgba(96,165,250,.22) !important;
}
:root.theme-dark .kyc-banner__btn:hover {
    background:   rgba(96,165,250,.18) !important;
    border-color: rgba(96,165,250,.38) !important;
    color:        #93c5fd !important;
}

:root.theme-dark .header--scrolled header.header .header__desk {
    box-shadow:
        0 22px 55px rgba(0,0,0,.55),
        0 4px 12px  rgba(0,0,0,.30) !important;
}


/* ═══════════════════════════════════════════════════════════
   §8  RESPONSIVE
   mobile.css handles deeper mobile breakpoints;
   here we handle tablet / laptop transitions.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1199px) {
    header.header {
        padding: 12px 16px 0 !important;
    }
    header.header .header__desk {
        border-radius: 20px !important;
    }
    header.header .header__wrapper {
        height:  80px !important;
        padding: 0 20px !important;
    }
    .content-wrapper {
        padding-top: 110px !important;
    }
}

@media (max-width: 768px) {
    header.header {
        padding: 10px 12px 0 !important;
    }
    header.header .header__desk {
        border-radius: 18px !important;
    }
    header.header .header__wrapper {
        height:  72px !important;
        padding: 0 16px !important;
    }
    .content-wrapper {
        padding-top: 97px !important;
    }
    .kyc-banner {
        padding:       0 16px   !important;
        min-height:    60px     !important;
        border-radius: 16px     !important;
    }
}

@media (max-width: 480px) {
    header.header {
        padding: 8px 10px 0 !important;
    }
    header.header .header__desk {
        border-radius: 16px !important;
    }
    header.header .header__wrapper {
        height:  64px !important;
        padding: 0 14px !important;
    }
    .content-wrapper {
        padding-top: 85px !important;
    }
    .kyc-banner {
        padding:       12px 14px !important;
        min-height:    auto      !important;
        gap:           10px      !important;
        border-radius: 14px     !important;
        flex-wrap:     wrap      !important;
    }
    .kyc-banner__btn {
        width:          100% !important;
        justify-content: center !important;
    }
}