/* ============================================================
   Cyber V Portal — design tokens and components
   Built on Bootstrap 5.3 CSS variables; no build step.
   ============================================================ */

:root,
[data-bs-theme="light"] {
    --cv-blue: #1f6feb;
    --cv-blue-dark: #1557c0;
    --cv-cyan: #00e5ff;
    --cv-bg: #eef1f5;
    --cv-surface: #ffffff;
    --cv-ink: #2b3440;
    --cv-muted: #5b6675;
    --cv-border: rgba(43, 52, 64, .12);

    --bs-primary: var(--cv-blue);
    --bs-primary-rgb: 31, 111, 235;
    --bs-link-color: var(--cv-blue);
    --bs-link-color-rgb: 31, 111, 235;
    --bs-link-hover-color: var(--cv-blue-dark);
    --bs-body-bg: var(--cv-bg);
    --bs-body-color: var(--cv-ink);
    --bs-secondary-color: var(--cv-muted);
    --bs-border-color: var(--cv-border);
    --bs-border-radius: .625rem;
    --bs-border-radius-lg: .875rem;
    --bs-border-radius-xl: 1.125rem;
}

[data-bs-theme="dark"] {
    --cv-bg: #14161a;
    --cv-surface: #1c1f26;
    --cv-ink: #e7eaf0;
    --cv-muted: #9aa5b1;
    --cv-border: rgba(255, 255, 255, .1);

    --bs-body-bg: var(--cv-bg);
    --bs-body-color: var(--cv-ink);
    --bs-secondary-color: var(--cv-muted);
    --bs-border-color: var(--cv-border);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Bootstrap 5.3 sets :root { scroll-behavior: smooth } — every scroll animates,
   and on touch an in-flight scroll dismisses an open native <select> picker
   (the admin country dropdown "kept closing" on every tap because of this).
   Keep scrolling instant; code that wants smoothness asks for it explicitly. */
:root { scroll-behavior: auto; }

:focus-visible {
    outline: 3px solid rgba(var(--bs-primary-rgb), .35);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Brand ---------- */

.cv-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--cv-ink);
    text-decoration: none;
}

.cv-brand:hover { color: var(--cv-blue); }

.cv-brand span { font-size: 1.05rem; }

/* ---------- Theme toggle ---------- */

.cv-theme-sun { display: none; }
[data-bs-theme="dark"] .cv-theme-sun { display: inline-block; }
[data-bs-theme="dark"] .cv-theme-moon { display: none; }

/* ---------- Public site ---------- */

.cv-navbar {
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cv-border);
}

[data-bs-theme="dark"] .cv-navbar { background: rgba(20, 22, 26, .86); }

.cv-navbar .nav-link {
    color: var(--cv-muted);
    font-weight: 500;
}

.cv-navbar .nav-link:hover,
.cv-navbar .nav-link.active { color: var(--cv-blue); }

.cv-hero {
    background: linear-gradient(180deg, rgba(31, 111, 235, .09), rgba(0, 229, 255, .05) 60%, transparent);
}

.cv-section { padding-block: clamp(3rem, 8vw, 5.5rem); }

.cv-price-card { height: 100%; }

.cv-price-card.featured {
    border-color: rgba(var(--bs-primary-rgb), .45);
    box-shadow: 0 12px 32px rgba(var(--bs-primary-rgb), .12);
}

.cv-price {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.cv-price small {
    font-size: .85rem;
    color: var(--cv-muted);
    font-weight: 500;
}

.cv-check {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cv-check li {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    margin-bottom: .45rem;
    font-size: .925rem;
}

.cv-check i { color: var(--cv-blue); margin-top: .15rem; }

.cv-footer { border-top: 1px solid var(--cv-border); background: var(--cv-surface); }

/* ---------- Cards & stats ---------- */

.cv-card {
    background: var(--cv-surface);
    border: 1px solid var(--cv-border);
    border-radius: var(--bs-border-radius-lg);
}

/* The order-page invoice preview — visually the money card. */
.cv-invoice {
    border-color: rgba(var(--bs-primary-rgb), .45);
    box-shadow: 0 12px 32px rgba(var(--bs-primary-rgb), .12);
}

.cv-stat {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.15rem;
}

.cv-stat .cv-stat-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: .75rem;
    display: grid;
    place-items: center;
    background: rgba(var(--bs-primary-rgb), .1);
    color: var(--cv-blue);
    font-size: 1.15rem;
}

.cv-stat .cv-stat-label { font-size: .8rem; color: var(--cv-muted); }

.cv-stat .cv-stat-value {
    font-weight: 700;
    font-size: 1.45rem;
    letter-spacing: -.01em;
    line-height: 1.2;
}

/* ---------- App shell (client + admin) ---------- */

.cv-shell { min-height: 100vh; }

.cv-content {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.cv-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cv-border);
    min-height: 56px;
}

[data-bs-theme="dark"] .cv-topbar { background: rgba(20, 22, 26, .86); }

/* Sticky headers are translucent (blurred backdrop), so page content scrolls
   "under" them — but they must never swallow clicks meant for that content.
   The bar itself ignores pointer events; only its own controls are
   interactive, everything else passes through to the field/button below.
   (The admin country dropdown "could not open when midway on the page"
   because clicks were landing on the frosted bar instead of the select.) */
.cv-navbar,
.cv-topbar { pointer-events: none; }

.cv-navbar a,
.cv-navbar button,
.cv-navbar input,
.cv-topbar a,
.cv-topbar button,
.cv-topbar input,
.cv-topbar .dropdown-menu { pointer-events: auto; }

.cv-sidebar {
    background: var(--cv-surface);
    border-right: 1px solid var(--cv-border);
    padding: 1rem .85rem;
}

@media (min-width: 992px) {
    .cv-shell {
        display: grid;
        grid-template-columns: 264px minmax(0, 1fr);
    }

    .cv-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }

    .cv-content {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

@media (max-width: 991.98px) {
    .cv-content { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

.cv-nav { gap: .125rem; }

.cv-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    border-radius: .625rem;
    padding: .55rem .75rem;
    color: var(--cv-muted);
    font-weight: 500;
}

.cv-nav .nav-link:hover {
    background: rgba(var(--bs-primary-rgb), .07);
    color: var(--cv-blue);
}

.cv-nav .nav-link.active {
    background: rgba(var(--bs-primary-rgb), .1);
    color: var(--cv-blue);
}

.cv-nav .nav-link i { font-size: 1.05rem; }

.cv-nav .nav-section {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cv-muted);
    padding: .9rem .75rem .35rem;
}

/* ---------- Mobile bottom navigation ---------- */

.cv-bottom-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1040;
    display: flex;
    background: var(--cv-surface);
    border-top: 1px solid var(--cv-border);
    padding-bottom: env(safe-area-inset-bottom);
}

.cv-bottom-nav a,
.cv-bottom-nav button {
    flex: 1;
    border: 0;
    background: none;
    text-align: center;
    padding: .55rem .25rem .45rem;
    font-size: .7rem;
    color: var(--cv-muted);
    text-decoration: none;
}

.cv-bottom-nav a.active { color: var(--cv-blue); }

.cv-bottom-nav i {
    display: block;
    font-size: 1.15rem;
    margin-bottom: 2px;
}

@media (min-width: 992px) {
    .cv-bottom-nav { display: none; }
}

/* ---------- Utilities ---------- */

.cv-empty {
    padding: 2.25rem 1rem;
    text-align: center;
    color: var(--cv-muted);
}

.cv-empty i { font-size: 1.6rem; display: block; margin-bottom: .5rem; opacity: .6; }

.cv-quota {
    height: 6px;
    border-radius: 999px;
    background: rgba(var(--bs-primary-rgb), .12);
    overflow: hidden;
}

.cv-quota > span {
    display: block;
    height: 100%;
    background: var(--cv-blue);
    border-radius: 999px;
}

/* ---------- Order wizard ---------- */

.cv-steps {
    display: flex;
    gap: .4rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
}

.cv-step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    color: var(--cv-muted);
    font-size: .85rem;
}

.cv-step-dot {
    flex: none;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cv-border);
    background: var(--cv-surface);
    font-size: .8rem;
    font-weight: 600;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.cv-step-label {
    display: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 576px) {
    .cv-step-label { display: inline; }
}

.cv-step.is-active { color: var(--cv-ink); font-weight: 600; }

.cv-step.is-active .cv-step-dot {
    background: var(--cv-blue);
    border-color: var(--cv-blue);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .15);
}

.cv-step.is-done { color: var(--cv-blue); }

.cv-step.is-done .cv-step-dot {
    background: rgba(var(--bs-primary-rgb), .12);
    border-color: var(--cv-blue);
    color: var(--cv-blue);
}

/* Without JS every panel stays visible — JS adds .is-wizard to collapse them. */
[data-order-wizard].is-wizard .cv-step-panel { display: none; }

[data-order-wizard].is-wizard .cv-step-panel.is-active {
    display: block;
    animation: cvStepIn .22s ease both;
}

@keyframes cvStepIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.cv-step-actions {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.75rem;
}

.cv-step-actions > :only-child { margin-left: auto; }

.cv-step-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .85rem 1rem;
    border: 1px solid var(--cv-border);
    border-radius: var(--bs-border-radius);
    background: rgba(var(--bs-primary-rgb), .04);
}

.cv-review-list dt {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cv-muted);
    font-weight: 600;
}

.cv-review-list dd { word-break: break-word; }

@media (min-width: 992px) {
    .cv-order-summary { position: sticky; top: 5.25rem; }
}

.cv-order-bar { display: none; }

@media (max-width: 991.98px) {
    html.cv-wizard-active body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

    html.cv-wizard-active .cv-order-bar {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 1035;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
        background: var(--cv-surface);
        border-top: 1px solid var(--cv-border);
        box-shadow: 0 -6px 20px rgba(20, 22, 26, .08);
    }
}

.cv-order-bar-info { display: flex; flex-direction: column; line-height: 1.15; }
.cv-order-bar-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cv-muted); }
.cv-order-bar-total { font-size: 1.05rem; font-weight: 700; }
.cv-order-bar-actions { display: flex; gap: .5rem; }

/* ---------- Country picker (in-page select replacement for admin forms) ---------- */
.cv-country-picker { position: relative; }

.cv-country-picker-button { width: 100%; }

.cv-country-picker-menu {
    display: none;
    position: absolute;
    inset: 100% auto auto 0;
    z-index: 1036; /* above the sticky topbar (1030), below the bottom nav (1040) */
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
}

.cv-country-picker-menu.show { display: block; }

.cv-country-picker.drop-up .cv-country-picker-menu {
    inset: auto auto 100% 0;
    margin-top: 0;
    margin-bottom: .125rem;
}