/* =============================================================================
   ct-premium.css — CHOR TOPUP premium light theme (2026-09-28)
   Visual layer only: every id / class / JS hook of the existing markup is kept.
   Brand colour = Admin → Settings → theme_color (var(--theme-color)), with an
   indigo→violet brand gradient that matches the logo and banners.
   Loaded last in layouts/app.blade.php. Selectors are prefixed with `html body`
   where they must beat page-level inline <style> blocks.
   ============================================================================= */

:root {
    --ct-primary: var(--theme-color, #0052FF);
    --ct-primary-600: color-mix(in srgb, var(--ct-primary) 84%, #000);
    --ct-primary-50: color-mix(in srgb, var(--ct-primary) 6%, #fff);
    --ct-primary-100: color-mix(in srgb, var(--ct-primary) 12%, #fff);
    --ct-primary-200: color-mix(in srgb, var(--ct-primary) 24%, #fff);
    --ct-lime: var(--ct-primary);
    --ct-lime-600: var(--ct-primary-600);
    --ct-on-lime: #fff;

    --ct-violet: #7C3AED;  --ct-violet-50: #F5F1FF;
    --ct-blue: #2563EB;    --ct-blue-50: #EEF4FF;
    --ct-emerald: #059669; --ct-emerald-50: #ECFDF5;
    --ct-amber: #D97706;   --ct-amber-50: #FFF8EB;
    --ct-rose: #E11D48;    --ct-rose-50: #FFF1F3;
    --ct-teal: #0D9488;    --ct-teal-50: #EDFBF9;
    --ct-gold: #C8952B;    --ct-gold-50: #FDF8EC;

    --ct-bg: #F4F5FB;
    --ct-surface: #FFFFFF;
    --ct-surface-2: #F7F8FD;
    --ct-ink: #0B1233;
    --ct-text: #262F4D;
    --ct-muted: #5F6886;
    --ct-subtle: #8D94AE;
    --ct-line: #E7E9F3;
    --ct-line-strong: #D5D9E8;

    --ct-success: #15803D; --ct-success-50: #EEFBF3;
    --ct-warning: #B45309; --ct-warning-50: #FFF8EB;
    --ct-danger: #DC2626;  --ct-danger-50: #FEF3F2;

    --ct-grad: linear-gradient(135deg, var(--ct-primary) 0%, #4F46E5 55%, var(--ct-violet) 100%);
    --ct-grad-soft: linear-gradient(135deg, var(--ct-primary-100) 0%, var(--ct-violet-50) 100%);
    --ct-grad-line: linear-gradient(90deg, var(--ct-primary), #4F46E5 45%, var(--ct-violet) 75%, #F59E0B);
    --ct-btn-grad: var(--ct-grad);
    --ct-btn-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(11,18,51,.16), 0 8px 20px -8px color-mix(in srgb, var(--ct-primary) 70%, transparent);

    --ct-glass: rgba(255,255,255,.78);
    --ct-glass-blur: saturate(180%) blur(18px);

    --ct-r-sm: 10px;
    --ct-r: 14px;
    --ct-r-lg: 18px;
    --ct-r-xl: 22px;
    --ct-pill: 999px;

    --ct-shadow-1: 0 1px 2px rgba(11,18,51,.04), 0 1px 3px rgba(11,18,51,.04);
    --ct-shadow-2: 0 2px 6px rgba(11,18,51,.04), 0 12px 28px -10px rgba(11,18,51,.14);
    --ct-shadow-3: 0 8px 18px rgba(11,18,51,.08), 0 28px 56px -16px rgba(11,18,51,.24);

    --ct-font: 'Plus Jakarta Sans', 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ct-font-display: 'Plus Jakarta Sans', 'Hind Siliguri', system-ui, sans-serif;

    --ct-ease: cubic-bezier(.2, 0, 0, 1);
    --ct-fast: 160ms;
    --ct-med: 260ms;
    --ct-safe-b: env(safe-area-inset-bottom, 0px);
    --ct-dock-h: 64px;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
html body {
    font-family: var(--ct-font) !important;
    color: var(--ct-text);
    background: var(--ct-bg) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
html body .body-bg {
    background:
        radial-gradient(1200px 420px at 50% -120px, color-mix(in srgb, var(--ct-primary) 9%, transparent), transparent 70%),
        radial-gradient(700px 360px at 100% 0, color-mix(in srgb, var(--ct-violet) 7%, transparent), transparent 70%),
        var(--ct-bg) !important;
    background-attachment: scroll !important;
}
html body ::selection { background: var(--ct-primary-200); color: var(--ct-ink); }
html body :focus-visible { outline: 2px solid color-mix(in srgb, var(--ct-primary) 60%, transparent); outline-offset: 2px; }

/* ── Header: white glass + brand hairline ─────────────────────────────── */
html body .header {
    background: var(--ct-glass) !important;
    -webkit-backdrop-filter: var(--ct-glass-blur);
    backdrop-filter: var(--ct-glass-blur);
    border-bottom: 1px solid rgba(213,217,232,.7) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 24px -18px rgba(11,18,51,.35) !important;
}
html body .header::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: var(--ct-grad-line); opacity: .9;
}
html body .header .logo-img { filter: drop-shadow(0 1px 0 rgba(255,255,255,.6)); }

html body .hdr-login-btn {
    background: var(--ct-btn-grad) !important;
    border-radius: var(--ct-pill) !important;
    padding: 9px 22px !important;
    box-shadow: var(--ct-btn-shadow) !important;
    letter-spacing: .01em;
}
html body .hdr-register-btn {
    border-radius: var(--ct-pill) !important;
    border: 1px solid var(--ct-line-strong) !important;
    background: #fff !important;
    color: var(--ct-ink) !important;
    box-shadow: var(--ct-shadow-1);
}
html body .hdr-register-btn:hover { border-color: var(--ct-primary) !important; color: var(--ct-primary) !important; }

html body .hdr-wallet-pill {
    border: 1px solid var(--ct-line) !important;
    background: linear-gradient(180deg, #fff, var(--ct-surface-2)) !important;
    box-shadow: var(--ct-shadow-1), inset 0 1px 0 #fff !important;
    padding: 5px 14px 5px 5px !important;
}
html body .hdr-wallet-icon {
    background: linear-gradient(135deg, #FDE68A, #F59E0B) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 6px -2px rgba(217,119,6,.6);
}
html body .hdr-wallet-balance { color: var(--ct-ink) !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; }
html body .hdr-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ct-primary-200), 0 4px 10px -4px rgba(11,18,51,.4) !important; border: 0 !important; }

/* ── Side drawer ──────────────────────────────────────────────────────── */
html body .sidebar-premium {
    background: #fff !important;
    border-left: 1px solid var(--ct-line);
    box-shadow: var(--ct-shadow-3) !important;
}
html body .menu-header-premium {
    background: var(--ct-grad-soft) !important;
    border-bottom: 1px solid var(--ct-line) !important;
}
html body .menu-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ct-primary-200); }
html body .menu-user-name { color: var(--ct-ink) !important; font-weight: 800 !important; }
html body .menu-user-email { color: var(--ct-muted) !important; }
html body .premium-menu-group-label { color: var(--ct-subtle) !important; letter-spacing: .12em !important; font-size: .66rem !important; font-weight: 800 !important; }
html body .premium-menu-item { border-radius: 12px !important; color: var(--ct-text) !important; transition: background var(--ct-fast) var(--ct-ease), color var(--ct-fast); }
html body .premium-menu-item:hover { background: var(--ct-surface-2) !important; color: var(--ct-primary) !important; }
html body .premium-menu-item-active { background: var(--ct-primary-50) !important; color: var(--ct-primary) !important; box-shadow: inset 3px 0 0 var(--ct-primary); }
html body .logout-premium { border-radius: 12px !important; }
html body .sidebar-support-btn { border-radius: var(--ct-pill) !important; box-shadow: 0 8px 18px -10px rgba(22,163,74,.8) !important; }

/* ── Home: notice ─────────────────────────────────────────────────────── */
html body .premium-notice-card {
    position: relative;
    background: #fff !important;
    color: var(--ct-text) !important;
    border: 1px solid var(--ct-line) !important;
    border-radius: var(--ct-r-lg) !important;
    box-shadow: var(--ct-shadow-2) !important;
    padding: 14px 14px 14px 20px !important;
    overflow: hidden;
}
html body .premium-notice-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ct-grad);
}
html body .premium-notice-card::after { display: none !important; }
html body .premium-notice-card .notice-heading {
    color: var(--ct-ink) !important; font-weight: 800 !important; font-size: .95rem !important;
    display: flex; align-items: center; gap: 8px;
}
html body .premium-notice-card .notice-heading::before {
    content: "\f0a1"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .72rem;
    width: 24px; height: 24px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--ct-primary-100); color: var(--ct-primary);
}
html body .premium-notice-card .notice-text { color: var(--ct-muted) !important; font-size: .84rem !important; line-height: 1.6 !important; }
html body .notice-close-btn {
    background: var(--ct-surface-2) !important; color: var(--ct-muted) !important;
    border: 1px solid var(--ct-line) !important; box-shadow: none !important;
}

/* ── Home: slider ─────────────────────────────────────────────────────── */
html body .premium-slider {
    border-radius: var(--ct-r-xl) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, var(--ct-shadow-3) !important;
    border: 1px solid rgba(255,255,255,.7);
    overflow: hidden;
}
html body .premium-prev, html body .premium-next {
    background: rgba(255,255,255,.82) !important; color: var(--ct-ink) !important;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.9) !important;
    box-shadow: var(--ct-shadow-2) !important;
}
html body .premium-dot { background: rgba(255,255,255,.55) !important; }
html body .premium-dot.active { background: #fff !important; width: 22px !important; border-radius: 99px !important; }

/* ── Home: flash sale (warm light card) ───────────────────────────────── */
html body .flash-sale-wrapper {
    background:
        radial-gradient(520px 200px at 0 0, rgba(251,146,60,.16), transparent 70%),
        radial-gradient(520px 220px at 100% 100%, rgba(225,29,72,.10), transparent 70%),
        linear-gradient(180deg, #FFFBF5, #FFFFFF) !important;
    border: 1px solid #FBE3CF !important;
    border-radius: var(--ct-r-xl) !important;
    box-shadow: var(--ct-shadow-2) !important;
}
html body .flash-sale-wrapper::before { display: none !important; }
html body .flash-sale-header { border-bottom: 1px dashed #F6D6BE !important; }
html body .flash-flame-icon { background: linear-gradient(135deg, #FB923C, #E11D48) !important; border-radius: 14px !important; animation: none !important; box-shadow: 0 8px 18px -8px rgba(225,29,72,.7) !important; }
html body .flash-title { color: var(--ct-ink) !important; letter-spacing: .02em !important; }
html body .flash-badge { background: linear-gradient(135deg, #F43F5E, #E11D48) !important; border-radius: 99px !important; }
html body .flash-subtitle { color: #B4532A !important; }
html body .flash-timer-label { color: var(--ct-muted) !important; }
html body .flash-timer-box {
    background: #fff !important; border: 1px solid #F3D9C6 !important;
    box-shadow: 0 1px 2px rgba(11,18,51,.05);
}
html body .flash-timer-box span { color: var(--ct-ink) !important; font-variant-numeric: tabular-nums; }
html body .flash-timer-box small { color: var(--ct-subtle) !important; }
html body .flash-timer-box.highlight { background: linear-gradient(135deg, #F43F5E, #E11D48) !important; border-color: transparent !important; }
html body .flash-timer-box.highlight span, html body .flash-timer-box.highlight small { color: #fff !important; }
html body .timer-colon { color: #F43F5E !important; }
html body .flash-slider-btn {
    background: #fff !important; color: var(--ct-ink) !important;
    border: 1px solid var(--ct-line) !important; box-shadow: var(--ct-shadow-2) !important;
}
html body .flash-card {
    background: #fff !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 1px solid var(--ct-line) !important;
    box-shadow: var(--ct-shadow-1) !important;
    border-radius: 16px !important;
}
html body .flash-card:hover { background: #fff !important; box-shadow: var(--ct-shadow-2) !important; border-color: #F6CDB4 !important; }
html body .flash-img-wrap { background: var(--ct-surface-2) !important; border-radius: 12px !important; }
html body .flash-prod-title { color: var(--ct-ink) !important; text-shadow: none !important; }
html body .flash-offer-price { color: #E11D48 !important; }
html body .flash-orig-price { color: var(--ct-subtle) !important; }
html body .flash-progress-wrap { background: #FCE7DA !important; }
html body .flash-progress-bar { background: linear-gradient(90deg, #FB923C, #E11D48) !important; }
html body .flash-sold-txt { color: var(--ct-muted) !important; }
html body .flash-buy-btn {
    background: linear-gradient(135deg, #FB923C, #E11D48) !important; color: #fff !important;
    border: 0 !important; border-radius: 10px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px -8px rgba(225,29,72,.8) !important;
}

/* ── Home: category titles ────────────────────────────────────────────── */
html body .premium-category-title-v2 { margin-bottom: 14px !important; }
html body .premium-category-title-v2 h3 {
    display: flex !important; align-items: center; gap: 10px;
    font-family: var(--ct-font-display) !important;
    font-size: 1.08rem !important; font-weight: 800 !important;
    color: var(--ct-ink) !important;
    letter-spacing: .04em !important; text-transform: uppercase;
}
html body .premium-category-title-v2 h3::before {
    content: ""; width: 6px; height: 20px; border-radius: 99px; background: var(--ct-grad); flex-shrink: 0;
}
html body .premium-category-title-v2 h3::after {
    content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--ct-line-strong), transparent);
    position: static !important; width: auto !important; transform: none !important;
}
html body .premium-category-title-v2 h3 span::before,
html body .premium-category-title-v2 h3 span::after { display: none !important; }

/* ── Home: product cards ──────────────────────────────────────────────── */
html body .product-card-wrapper { height: 100%; }
html body .product-card-link {
    display: flex !important; flex-direction: column; height: 100%;
    background: #fff;
    border: 1px solid var(--ct-line);
    border-radius: 18px;
    padding: 7px 7px 0;
    box-shadow: var(--ct-shadow-1);
    text-decoration: none !important;
    transition: transform var(--ct-med) var(--ct-ease), box-shadow var(--ct-med) var(--ct-ease), border-color var(--ct-med);
}
html body .product-card-link:hover {
    transform: translateY(-3px);
    border-color: var(--ct-primary-200);
    box-shadow: var(--ct-shadow-2), 0 0 0 3px var(--ct-primary-50);
}
html body .single-game-product {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    padding: 0 !important; border-radius: 13px !important; overflow: hidden;
}
html body .product-img-wrapper { position: relative; border-radius: 13px !important; overflow: hidden; background: var(--ct-surface-2) !important; }
html body .game-product-img { border-radius: 13px !important; transition: transform .5s var(--ct-ease); }
html body .product-card-link:hover .game-product-img { transform: scale(1.04); }
html body .product-card-title { padding: 8px 4px 10px !important; flex: 1; display: flex; align-items: center; justify-content: center; }
html body .product-card-title p {
    color: var(--ct-ink) !important; font-weight: 700 !important; font-size: .8rem !important;
    line-height: 1.3 !important; margin: 0 !important; text-align: center;
}

/* Lottery tile + badge on the product card */
.ct-lottery-tile {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    background:
        radial-gradient(circle at 25% 20%, rgba(244,114,182,.55), transparent 45%),
        radial-gradient(circle at 80% 85%, rgba(96,165,250,.6), transparent 50%),
        linear-gradient(160deg, #7C3AED, #1E1B4B);
    color: #fff;
    padding-bottom: 18px;
}
.product-img-wrapper:has(.ct-lottery-tile) { aspect-ratio: 1 / 1; }
.ct-lottery-tile i { font-size: 1.9rem; }
.ct-lottery-name { font-family: var(--ct-font-display); font-size: 1.05rem; font-weight: 800; }
.ct-lottery-sub { font-size: .56rem; font-weight: 800; letter-spacing: .22em; color: #FCD34D; }
.ct-lottery-badge {
    position: absolute; left: 6px; bottom: 6px; z-index: 2;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px; border-radius: 7px;
    background: #FCD34D; color: #422006;
    font-size: .62rem; font-weight: 800;
    box-shadow: 0 4px 10px -4px rgba(0,0,0,.45);
}

/* ── Home: social links ───────────────────────────────────────────────── */
html body .social-links-wrapper {
    background: #fff !important; border: 1px solid var(--ct-line) !important;
    border-radius: var(--ct-r-xl) !important; box-shadow: var(--ct-shadow-2) !important;
}
html body .social-links-title { color: var(--ct-ink) !important; font-weight: 800 !important; }
html body .social-links-sub { color: var(--ct-muted) !important; }
html body .social-card {
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 20px -14px rgba(11,18,51,.6) !important;
    transition: transform var(--ct-fast) var(--ct-ease), box-shadow var(--ct-fast);
}
html body .social-card:hover { transform: translateY(-2px); }

/* ── Home: latest orders ──────────────────────────────────────────────── */
html body .latest-orders-wrapper {
    background: #fff !important; border: 1px solid var(--ct-line) !important;
    border-radius: var(--ct-r-xl) !important; box-shadow: var(--ct-shadow-2) !important;
    padding: 8px !important;
}
html body .latest-order-card {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    border-radius: 14px !important; margin: 0 !important; padding: 10px 10px !important;
    transition: background var(--ct-fast);
}
html body .latest-order-card + .latest-order-card { border-top: 1px solid var(--ct-line) !important; border-radius: 0 !important; }
html body .latest-order-card:hover { background: var(--ct-surface-2) !important; }
html body .latest-order-name { color: var(--ct-ink) !important; font-weight: 700 !important; }
html body .latest-order-time { color: var(--ct-subtle) !important; }
html body .latest-order-subtitle { color: var(--ct-muted) !important; }
html body .latest-order-amount { color: var(--ct-ink) !important; font-weight: 800 !important; }
html body .latest-order-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ct-line) !important; }
html body .latest-order-badge { border-radius: 99px !important; font-weight: 700 !important; letter-spacing: .01em; }
html body #latest-orders-list { }
html body section > div > h3[style*="Latest Orders"], html body .main-page-wrapper h3 { font-family: var(--ct-font-display) !important; }

/* ── Home: reviews ────────────────────────────────────────────────────── */
html body .review-main-card {
    background: #fff !important; border: 1px solid var(--ct-line) !important;
    border-radius: var(--ct-r-xl) !important; box-shadow: var(--ct-shadow-2) !important;
}
html body .single-review-card {
    background: var(--ct-surface-2) !important; border: 1px solid var(--ct-line) !important;
    box-shadow: none !important; border-radius: 16px !important;
}
html body .review-nav-btn { background: #fff !important; border: 1px solid var(--ct-line) !important; box-shadow: var(--ct-shadow-2) !important; }
html body .review-heading { color: var(--ct-ink) !important; }

/* ── Footer: light ────────────────────────────────────────────────────── */
html body footer.footer-bg {
    position: relative;
    background: #fff !important;
    color: var(--ct-text) !important;
    border-top: 1px solid var(--ct-line) !important;
    border-radius: 28px 28px 0 0 !important;
    box-shadow: 0 -16px 40px -30px rgba(11,18,51,.35) !important;
    overflow: hidden;
}
html body footer.footer-bg::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ct-grad-line);
}
html body .footer-section-title {
    color: var(--ct-primary) !important; letter-spacing: .16em !important; font-weight: 800 !important;
}
html body .footer-description, html body footer.footer-bg p { color: var(--ct-muted) !important; }
html body .footer-social-icon {
    background: var(--ct-surface-2) !important; color: var(--ct-ink) !important;
    border: 1px solid var(--ct-line) !important; box-shadow: var(--ct-shadow-1) !important;
}
html body .footer-social-icon:hover { background: var(--ct-primary) !important; color: #fff !important; border-color: transparent !important; }
html body .footer-support-card {
    background: linear-gradient(135deg, #fff, var(--ct-surface-2)) !important;
    border: 1px solid var(--ct-line) !important; border-radius: 16px !important; box-shadow: var(--ct-shadow-1) !important;
}
html body .footer-support-label { color: var(--ct-muted) !important; }
html body .footer-support-number { color: var(--ct-ink) !important; }
html body .footer-bottom-bar { border-top: 1px solid var(--ct-line) !important; background: var(--ct-surface-2) !important; }
html body .footer-bottom-text { color: var(--ct-muted) !important; }
html body .footer-bottom-brand {
    background: var(--ct-grad); -webkit-background-clip: text; background-clip: text;
    color: transparent !important; -webkit-text-fill-color: transparent;
}

/* ── Mobile bottom nav: attached white glass dock ─────────────────────── */
html body .sticky-footer-container {
    background: rgba(255,255,255,.9) !important;
    -webkit-backdrop-filter: var(--ct-glass-blur); backdrop-filter: var(--ct-glass-blur);
    border-top: 1px solid rgba(213,217,232,.8) !important;
    box-shadow: 0 -10px 30px -22px rgba(11,18,51,.45) !important;
}
html body .sticky-footer-item a { color: var(--ct-subtle) !important; transition: color var(--ct-fast); }
html body .sticky-footer-item a span:first-child { transition: transform var(--ct-fast) var(--ct-ease), background var(--ct-fast); }
html body .sticky-footer-item a.active { color: var(--ct-primary) !important; font-weight: 800 !important; }
html body .sticky-footer-item a.active span:first-child {
    width: 54px !important; height: 30px !important;
    background: var(--ct-primary-100); border-radius: 99px;
}
html body .sticky-footer-item a.active span:first-child i,
html body .sticky-footer-item a.active span:first-child svg { color: var(--ct-primary) !important; stroke: currentColor; }

/* ── Global: buttons, inputs, cards, modals, toastr, pagination ──────── */
html body .btn-primary, html body .bg-primary-custom {
    background: var(--ct-btn-grad) !important; border: 0 !important; box-shadow: var(--ct-btn-shadow) !important;
}
html body .form-control:focus, html body .form-select:focus {
    border-color: var(--ct-primary) !important;
    box-shadow: 0 0 0 3px var(--ct-primary-100) !important;
}
html body .modal-content { border-radius: var(--ct-r-xl) !important; border: 1px solid var(--ct-line) !important; box-shadow: var(--ct-shadow-3) !important; overflow: hidden; }
html body #toast-container > div { border-radius: 14px !important; box-shadow: var(--ct-shadow-3) !important; opacity: 1 !important; }
html body .pagination .page-link { border-radius: 10px !important; margin: 0 2px; border-color: var(--ct-line) !important; color: var(--ct-text); }
html body .pagination .page-item.active .page-link { background: var(--ct-grad) !important; border-color: transparent !important; color: #fff !important; }

/* ── Product / checkout page (topup/checkout.blade.php, inline v3 CSS) ─ */
html body .co-page { font-family: var(--ct-font) !important; }
html body .co-hero {
    background:
        radial-gradient(420px 180px at 100% 0, rgba(139,92,246,.35), transparent 70%),
        radial-gradient(360px 200px at 0 100%, color-mix(in srgb, var(--ct-primary) 40%, transparent), transparent 70%),
        linear-gradient(135deg, #0B1233 0%, #1E1B5A 60%, #2A1B6B 100%) !important;
    border-radius: var(--ct-r-xl) !important;
    box-shadow: var(--ct-shadow-3) !important;
    border: 1px solid rgba(255,255,255,.08);
}
html body .co-hero-img { border-radius: 16px !important; box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 10px 22px rgba(0,0,0,.35) !important; }
html body .co-card { border-radius: var(--ct-r-xl) !important; border-color: var(--ct-line) !important; box-shadow: var(--ct-shadow-2) !important; }
html body .co-card-head { border-bottom-color: var(--ct-line) !important; }
html body .co-card-title { color: var(--ct-ink) !important; font-weight: 800 !important; }
html body .co-step { background: var(--ct-grad) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 10px -4px color-mix(in srgb, var(--ct-primary) 80%, transparent) !important; }
html body .co-var-btn { border-radius: 12px !important; border-color: var(--ct-line) !important; background: var(--ct-surface-2) !important; }
html body .co-var-btn.sel { background: var(--ct-primary-50) !important; }
html body .co-var-name { color: var(--ct-ink) !important; }
html body .co-input { border-radius: 12px !important; border-color: var(--ct-line) !important; background: var(--ct-surface-2) !important; }
html body .co-input:focus { background: #fff !important; border-color: var(--ct-primary) !important; box-shadow: 0 0 0 3px var(--ct-primary-100) !important; }
html body .co-uid-btn, html body .co-qty-btn { background: var(--ct-btn-grad) !important; }
html body .co-pm-card { border-radius: 14px !important; border-color: var(--ct-line) !important; background: var(--ct-surface-2) !important; }
html body .co-pm-card.co-pm-sel { background: var(--ct-primary-50) !important; border-color: var(--ct-primary) !important; }
html body .co-cost { border-radius: 14px !important; background: var(--ct-grad-soft) !important; border-color: var(--ct-primary-100) !important; }
html body .co-cost-val { color: var(--ct-ink) !important; font-size: 1.15rem !important; }
html body .co-btn { border-radius: 14px !important; }
html body .co-btn-p { background: var(--ct-btn-grad) !important; box-shadow: var(--ct-btn-shadow) !important; }
html body .co-dialog { border-radius: 26px 26px 0 0 !important; }
html body .co-rel-card {
    background: #fff !important; border: 1px solid var(--ct-line) !important; box-shadow: var(--ct-shadow-1) !important;
    border-radius: 16px !important;
}
html body .co-rel-name { color: var(--ct-ink) !important; }
html body .co-rel-ttl { color: var(--ct-ink) !important; }

/* ── Motion preference ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html body * { transition: none !important; animation-duration: .01ms !important; }
}

/* Muted (icon) step badges on the checkout / lottery cards */
html body .co-step.co-step-muted {
    background: var(--ct-primary-50) !important; color: var(--ct-primary) !important;
    box-shadow: inset 0 0 0 1px var(--ct-primary-100) !important;
}