@charset "UTF-8";

    /* ===================== Carbidpro top nav (re-skin; all routes/logic preserved) ===================== */
    /* The topographic texture, under a wash of the chrome colour, plus the slow blue
       light. Every value comes from layouts/theme-core, which is the one file the
       admin, dealer and guest layouts all include — so the bar, the footer, the dealer
       rail, the admin chrome and every navy panel are the same surface, and dark mode
       moves all of them at once.

       The wash was .74 -> .84, which left the contours barely visible. It is now
       .52 -> .66: because the texture's mean is DARKER than the brand navy, lifting it
       makes the bar marginally deeper while the contour lines gain about a third, so
       white on the bar goes 14.4 -> 15.0 rather than down.

       The solid colour is declared FIRST, so a missing or unsupported image leaves the
       bar exactly as it is today.

       NEVER write `background:` (the shorthand) on this selector in any theme block:
       it resets background-image and silently deletes the texture. That is what went
       wrong the last time dark mode touched this bar. */
    .cbp-nav { position: fixed; top: 0; left: 0; right: 0; height: 88px; z-index: 1000;
        background-color: var(--cbp-chrome, #0e2c4f);
        background-image: var(--cbp-chrome-wash, linear-gradient(180deg, rgba(14,44,79,.52), rgba(14,44,79,.66))),
                          var(--cbp-chrome-topo, url('/assets/images/brand/topo-texture.webp'));
        background-size: var(--cbp-chrome-size-chrome, auto, 1920px auto);
        background-position: center, center top;
        background-repeat: no-repeat, repeat-y;
        background-attachment: var(--cbp-chrome-attach, scroll, fixed);
        background-blend-mode: var(--cbp-chrome-blend, normal, normal);
        border-bottom: 1px solid var(--cbp-chrome-edge, rgba(255,255,255,.07));
        transition: box-shadow .25s ease, background-color .25s ease, height .25s ease; }
    /* The light is masked off the right-hand third. The red Register button, the bell,
       the avatar and the deposit chip all live there, and a filled red on a lit surface
       drops to 2.6:1 — under the 3:1 boundary rule. Masked, that zone keeps the plain
       field and the button reads 3.38:1, better than it does today. The light enters
       from the logo end. */
    .cbp-nav::before { --cbp-aurora-mask: linear-gradient(90deg, #000 0%, #000 52%, transparent 86%); }
    /* Scrolled: heavier wash over the same texture, so the bar still deepens on scroll. */
    .cbp-nav.scrolled { height: 74px; box-shadow: 0 10px 30px -14px rgba(4,12,26,.7);
        background-color: var(--cbp-chrome-2, #0b2440);
        background-image: var(--cbp-chrome-wash-2, linear-gradient(180deg, rgba(11,36,64,.66), rgba(11,36,64,.78))),
                          var(--cbp-chrome-topo, url('/assets/images/brand/topo-texture.webp'));
        /* The scrolled bar keeps the same field, so the contours do not jump when it
           shrinks -- the image is anchored to the viewport, not to the bar. */
        background-attachment: var(--cbp-chrome-attach, scroll, fixed);
        background-blend-mode: var(--cbp-chrome-blend, normal, normal); }
    /* The light paints above the bar's own background and below its contents. */
    .cbp-nav-inner { max-width: 1240px; height: 100%; margin: 0 auto; padding: 0 26px;
        position: relative; z-index: 1;
        display: flex; align-items: center; gap: 22px; }

    /* Logo (SVG globe + swoosh + wordmark; replaces the animated gif) */
    .cbp-logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; flex: 0 0 auto;
        transition: transform .22s var(--cbp-ease, cubic-bezier(.22,1,.36,1)); }
    .cbp-logo:hover { transform: translateY(-1px); }
    .cbp-logo .cbp-brand-mark { transition: transform .5s var(--cbp-ease, cubic-bezier(.22,1,.36,1)); }
    .cbp-logo:hover .cbp-brand-mark { transform: rotate(-8deg); }

    .cbp-links { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; }
    /* First link's auto left-margin right-aligns the whole link group (logged-out marketing nav + authorized bar). */
    .cbp-link-rightgroup { margin-left: auto; }
    .cbp-link { position: relative; color: #f6f9ff; font-weight: 700; font-size: 14.5px; text-decoration: none;
        padding: 10px 14px; border-radius: 8px; white-space: nowrap; transition: color .16s ease, background .16s ease; }
    .cbp-link:hover { color: #fff; background: rgba(255,255,255,.12); }
    .cbp-link:not(.active) { opacity: 1; }   /* ensure full opacity regardless of inherited theme rules */
    .cbp-link::after { content: ''; position: absolute; left: 50%; right: 50%; bottom: 4px; height: 2px;
        background: #e2304e; border-radius: 2px; transition: left .22s cubic-bezier(.22,1,.36,1), right .22s cubic-bezier(.22,1,.36,1); }
    .cbp-link:hover::after, .cbp-link.active::after { left: 14px; right: 14px; }
    .cbp-link.active { color: #fff; }
    /* Bulletproof: beat any inherited theme/dealer-mode/JS link color so the resting nav is never faint. */
    .cbp-nav .cbp-links a.cbp-link { color: #f6f9ff !important; opacity: 1 !important; }
    .cbp-nav .cbp-links a.cbp-link:hover, .cbp-nav .cbp-links a.cbp-link.active { color: #fff !important; }

    .cbp-actions { display: flex; align-items: center; gap: 12px; margin-left: 8px; }
    .cbp-login { display: inline-flex; align-items: center; background: #1f9d55; color: #fff !important; font-weight: 700; font-size: 14.5px; text-decoration: none; padding: 9px 16px; border-radius: 11px; box-shadow: 0 10px 24px -12px rgba(31,157,85,.9); transition: filter .16s, transform .12s; }
    .cbp-login:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff !important; }
    .cbp-cta { display: inline-flex; align-items: center; background: var(--cbp-red-fill, #e02b4a); color: #fff; font-weight: 700; font-size: 14.5px;
        padding: 11px 20px; border-radius: 10px; text-decoration: none; box-shadow: 0 10px 22px -10px rgba(226,48,78,.85);
        transition: filter .16s, transform .14s; }
    .cbp-cta:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
    .cbp-lang { display: inline-flex; align-items: center; gap: 6px; color: #e7eefa; font-weight: 700; font-size: 13px;
        text-decoration: none; padding: 8px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 9px; transition: border-color .16s, color .16s; }
    .cbp-lang:hover { color: #fff; border-color: rgba(255,255,255,.45); }

    /* deposit chip (always visible, green) + notification bell (logged-in, all pages) */
    .cbp-deposit { display: inline-flex; align-items: center; gap: 7px; background: #e6f6ec; color: #1b7a45;
        border: 1px solid #c7ead4; border-radius: 22px; padding: 7px 15px; font-weight: 900; font-size: 15px; cursor: pointer;
        font-family: inherit; transition: filter .14s, transform .12s, box-shadow .14s; }
    .cbp-deposit:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(27,122,69,.5); }
    .cbp-deposit svg { opacity: .85; }
    .cbp-deposit-amt { font-variant-numeric: tabular-nums; }
    .cbp-deposit { min-width: 138px; justify-content: center; padding-right: 9px; gap: 9px; } .cbp-deposit::after { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #1b7a45; color: #fff; font-size: 18px; font-weight: 900; line-height: 1; flex: 0 0 auto; } .cbp-deposit:hover::after { background: #146035; } @media (max-width: 991px) { .cbp-deposit { width: 100%; min-width: 0; } }
    .cbp-bell { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16);
        background: rgba(255,255,255,.06); color: #eaf1fb; display: inline-flex; align-items: center; justify-content: center;
        cursor: pointer; transition: background .14s, border-color .14s, transform .12s; }
    .cbp-bell:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); transform: translateY(-1px); }
    .cbp-bell-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
        background: var(--cbp-red-fill, #e02b4a); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; /* The ring is the colour of the BAR, so the counter looks punched out of it.
           It was typed in as navy, so at night the bar went grey and the ring stayed
           blue: a red dot with a blue halo on a grey bar. Daylight is unchanged. */
        box-shadow: 0 0 0 2px var(--cbp-chrome, #0e2c4f); }

    /* Logged-in user chip + dropdown (own vanilla JS, not Bootstrap-version dependent) */
    .cbp-user { position: relative; }
    .cbp-user-btn { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
        border-radius: 30px; padding: 5px 12px 5px 5px; cursor: pointer; color: #fff; font-family: inherit; transition: background .16s, border-color .16s; }
    .cbp-user-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); }
    /* White on the brand red was 4.41 -- a hair under AA, on every page. The brand
       token is untouched; only this 30px circle is taken down to 5.12:1, which is not a
       distinguishable change in hue at this size. */
    .cbp-avatar { width: 30px; height: 30px; border-radius: 50%; background: #d12845; color: #fff; font-weight: 800; font-size: 13px;
        display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
    .cbp-user-name { font-size: 14px; font-weight: 700; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cbp-user-btn svg { transition: transform .2s ease; }
    .cbp-user.open .cbp-user-btn svg { transform: rotate(180deg); }
    .cbp-menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 218px; background: #fff; border: 1px solid #e3e8ef;
        border-radius: 14px; box-shadow: 0 22px 50px -18px rgba(8,22,40,.5); padding: 7px; opacity: 0; visibility: hidden;
        transform: translateY(-6px); transition: opacity .16s ease, transform .18s cubic-bezier(.22,1,.36,1), visibility .16s; }
    .cbp-user.open .cbp-menu { opacity: 1; visibility: visible; transform: none; }
    .cbp-menu a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px; border-radius: 9px;
        color: #24344f; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .14s, color .14s; }
    .cbp-menu a:hover { background: #eff4fb; color: #2f5496; }
    .cbp-menu a svg { width: 17px; height: 17px; opacity: .55; }
    .cbp-menu-sep { height: 1px; background: #eef2f7; margin: 6px 4px; }
    .cbp-menu a.cbp-logout { color: #c23a52; } .cbp-menu a.cbp-logout:hover { background: #fdebee; color: #c23a52; }

    .cbp-burger { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; margin-left: auto;
        border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: transparent; cursor: pointer; align-items: center; justify-content: center; }
    .cbp-burger span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
    .cbp-nav.open .cbp-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .cbp-nav.open .cbp-burger span:nth-child(2) { opacity: 0; }
    .cbp-nav.open .cbp-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    @media (max-width: 991px) {
        .cbp-nav { height: 72px; }
        .cbp-nav.scrolled { height: 66px; }
        .cbp-burger { display: flex; }
        /* The drawer takes the chrome TEXTURE, but still not the light. On a phone this
           drawer IS the chrome -- the side rail is hidden at this width -- and it slides
           out from a bar that is textured, so a flat sheet made the two halves of one
           object disagree at the exact moment they sit side by side. It is the biggest
           brand-coloured surface a phone dealer ever sees. What it still does not get is
           the moving light: this is a full screen of small text, and light drifting
           behind reading matter is tiring. That was always the real objection.

           The size is `100% auto`, deliberately NOT the shared fixed size. The bar above
           is full-bleed and uses `cover`, so on a 390px phone it draws the texture at
           about a fifth of natural size; pinning the drawer to 1920px would draw the
           same lines five times bigger than the bar it just came out of. `100% auto`
           makes the image exactly as wide as the screen, which is what the bar does, so
           the two match on any phone. It repeats downwards because at that scale the
           image is shorter than the drawer.

           background-COLOR, never the shorthand: the shorthand wipes the texture, which
           is the mistake this file already warns about twice. */
        .cbp-links { position: fixed; top: 72px; left: 0; right: 0; bottom: 0; margin: 0; flex-direction: column; align-items: stretch;
            gap: 2px;
            background-color: var(--cbp-chrome-2, #0b2440);
            background-image: var(--cbp-chrome-wash-2, linear-gradient(180deg, rgba(11,36,64,.66), rgba(11,36,64,.78))),
                              var(--cbp-chrome-topo, url('/assets/images/brand/topo-texture.webp'));
            background-size: auto, 100% auto;
            background-position: center, center top;
            background-repeat: no-repeat, repeat-y;
            padding: 18px 20px 30px; overflow-y: auto;
            transform: translateX(100%); transition: transform .32s cubic-bezier(.22,1,.36,1); }
        .cbp-nav.open .cbp-links { transform: none; }
        .cbp-link { font-size: 17px; padding: 14px 12px; border-radius: 10px; }
        .cbp-link::after { display: none; }
        .cbp-link:hover, .cbp-link.active { background: rgba(255,255,255,.06); }
        .cbp-actions { margin: 14px 0 0; flex-direction: column; align-items: stretch; gap: 12px; }
        .cbp-cta, .cbp-login, .cbp-lang { justify-content: center; text-align: center; padding: 13px; }
        .cbp-user { width: 100%; } .cbp-user-btn { width: 100%; justify-content: center; }
        .cbp-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; margin-top: 8px; width: 100%; }
        .cbp-user:not(.open) .cbp-menu { display: none; }
    }
    /* Mobile dealer menu inside the drawer (rail replacement) */
    .cbp-mnav { display: none; }
    @media (max-width: 991px) {
        .cbp-mnav { display: block; margin-top: 14px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 14px; }
        /* #6f86a6 on the drawer's #0b2440 was 4.15:1 — under AA at 10.5px. #9db2cd is 5.55:1. */
        .cbp-mnav-title { font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #9db2cd; padding: 0 4px 8px; }
        .cbp-mnav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
        .cbp-mnav-it { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 8px 12px; border-radius: 10px;
            background: rgba(255,255,255,.05); color: #dbe6f6; font-size: 13.5px; font-weight: 700; text-decoration: none; }
        .cbp-mnav-it svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .8; }
        .cbp-mnav-it.active { background: var(--brand, #2f5496); color: #fff; }
        .cbp-mnav-it:active { background: rgba(255,255,255,.14); }
        .cbp-mnav-auc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
        .cbp-mnav-auc a { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 11px;
            font-weight: 900; font-size: 15px; color: #fff; text-decoration: none; letter-spacing: .3px; }
        .cbp-mnav-cp { background: #0a84ff; box-shadow: 0 8px 20px -9px rgba(10,132,255,.9); }
        .cbp-mnav-ia { background: #e2001a; box-shadow: 0 8px 20px -9px rgba(226,0,26,.9); }
        /* in the column drawer the desktop right-group float just mis-aligns the first link */
        .cbp-link-rightgroup { margin-left: 0; }
        /* the same inherited theme rule that faded .cbp-link washes these out too — shield them */
        .cbp-nav .cbp-links a.cbp-mnav-it { color: #e6edf9 !important; opacity: 1 !important; }
        .cbp-nav .cbp-links a.cbp-mnav-it.active { color: #fff !important; }
        .cbp-nav .cbp-links a.cbp-mnav-auc-btn { color: #fff !important; opacity: 1 !important; }
        .cbp-mnav-it { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.07); }
        .cbp-mnav-it svg { opacity: 1; color: #a5b8d6; }
        .cbp-mnav-it.active svg { color: #fff; }
        /* top bar auto-hides going down, returns coming up (JS toggles .nav-hidden) */
        .cbp-nav { transition: box-shadow .25s ease, background .25s ease, height .25s ease, transform .28s cubic-bezier(.22,1,.36,1); }
        .cbp-nav.nav-hidden { transform: translateY(-100%); box-shadow: none; }
    }
    @media (prefers-reduced-motion: reduce) { .cbp-link::after, .cbp-links, .cbp-menu, .cbp-burger span, .cbp-nav { transition: none; } }