/* =============================================================================
   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(79,70,229,.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;
}

/* Live chat support card (replaces the WhatsApp green) */
html body .footer-support-icon { background: var(--ct-grad) !important; color: #fff !important; }

/* =============================================================================
   Premium v2 polish (2026-10-16) — CSS only, appended on top of the theme above.
   Aurora backdrop, gradient-edge cards, shine on hover, refined headings,
   floating glass dock, glowing package selection. Remove this block to revert.
   ============================================================================= */
:root {
    --ct-edge: linear-gradient(160deg, color-mix(in srgb, var(--ct-primary) 34%, #fff) 0%, #ECEEF7 38%, #ECEEF7 62%, color-mix(in srgb, var(--ct-violet) 30%, #fff) 100%);
    --ct-edge-hot: linear-gradient(160deg, var(--ct-primary) 0%, #6366F1 50%, var(--ct-violet) 100%);
    --ct-shadow-glow: 0 18px 40px -18px color-mix(in srgb, var(--ct-primary) 55%, transparent), 0 6px 14px -6px rgba(11,18,51,.12);
}

/* Aurora backdrop + faint dot grid */
html body .body-bg {
    background:
        radial-gradient(900px 480px at 8% -140px, color-mix(in srgb, var(--ct-primary) 14%, transparent), transparent 70%),
        radial-gradient(760px 420px at 100% 60px, color-mix(in srgb, var(--ct-violet) 12%, transparent), transparent 70%),
        radial-gradient(640px 380px at 50% 900px, color-mix(in srgb, #06B6D4 7%, transparent), transparent 72%),
        radial-gradient(circle at 1px 1px, rgba(11,18,51,.045) 1px, transparent 0) 0 0 / 22px 22px,
        var(--ct-bg) !important;
}

/* Header: crisper glass, slimmer logo shadow, shine on the login pill */
html body .header { background: rgba(255,255,255,.72) !important; }
html body .hdr-login-btn { position: relative; overflow: hidden; }
html body .hdr-login-btn::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 70%);
    transform: translateX(-120%); animation: ct-sheen 5.5s var(--ct-ease) 1.2s infinite;
}
@keyframes ct-sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* Notice: gradient edge instead of a flat border */
html body .premium-notice-card {
    border: 1px solid transparent !important;
    background: linear-gradient(#fff, #fff) padding-box, var(--ct-edge) border-box !important;
}

/* Slider: soft glow under the banner */
html body .premium-slider { box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, var(--ct-shadow-glow), var(--ct-shadow-2) !important; }

/* Category titles: gradient glyph chip + gradient ink */
html body .premium-category-title-v2 h3 { letter-spacing: .06em !important; }
html body .premium-category-title-v2 h3::before {
    width: 26px !important; height: 26px !important; border-radius: 9px !important;
    background: var(--ct-grad) !important;
    -webkit-mask: none; mask: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px -6px color-mix(in srgb, var(--ct-primary) 80%, transparent);
    content: "\f005" !important; font-family: "Font Awesome 6 Free"; font-weight: 900;
    font-size: .7rem; color: #fff; display: inline-flex; align-items: center; justify-content: center;
}
html body .premium-category-title-v2 h3 span {
    background: linear-gradient(90deg, var(--ct-ink) 0%, #312E81 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
html body .premium-category-title-v2 h3::after { height: 2px !important; border-radius: 2px; background: linear-gradient(90deg, var(--ct-primary-200), transparent 80%) !important; }

/* Product cards: gradient edge, glow lift, light sweep, inner image ring */
html body .product-card-link {
    position: relative; overflow: hidden;
    border: 1px solid transparent !important;
    background: linear-gradient(180deg, #fff 0%, #FBFBFF 100%) padding-box, var(--ct-edge) border-box !important;
    box-shadow: 0 1px 2px rgba(11,18,51,.04), 0 10px 22px -16px rgba(11,18,51,.28) !important;
}
html body .product-card-link::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none; z-index: 3;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-18deg); opacity: 0;
}
html body .product-card-link:hover {
    transform: translateY(-4px) !important;
    background: linear-gradient(180deg, #fff 0%, #FBFBFF 100%) padding-box, var(--ct-edge-hot) border-box !important;
    box-shadow: var(--ct-shadow-glow) !important;
}
html body .product-card-link:hover::after { opacity: 1; left: 120%; transition: left .9s var(--ct-ease), opacity .2s; }
html body .product-card-link:active { transform: scale(.97) !important; }
html body .single-game-product { position: relative; }
html body .single-game-product::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(11,18,51,.06), inset 0 1px 0 rgba(255,255,255,.25);
}
html body .product-card-title p { letter-spacing: .005em; }
html body .product-card-link:hover .product-card-title p { color: var(--ct-primary) !important; }

/* Social / orders / reviews cards share the gradient edge */
html body .social-links-wrapper,
html body .latest-orders-wrapper,
html body .review-main-card {
    border: 1px solid transparent !important;
    background: linear-gradient(#fff, #fff) padding-box, var(--ct-edge) border-box !important;
}
html body .latest-order-badge { box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }

/* "Latest Orders" heading (inline-styled h3) gets a live dot */
html body section > div > h3[style*="1.25rem"] {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--ct-font-display) !important; font-weight: 800 !important; color: var(--ct-ink) !important; letter-spacing: .01em;
}
html body section > div > h3[style*="1.25rem"]::before {
    content: ""; width: 9px; height: 9px; border-radius: 50%; background: #22C55E;
    box-shadow: 0 0 0 0 rgba(34,197,94,.55); animation: ct-live 1.8s ease-out infinite;
}
@keyframes ct-live { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 100% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } }

/* Mobile dock: gradient hairline + gradient active bubble */
html body .sticky-footer-container { border-top: 0 !important; }
html body .sticky-footer-container::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ct-primary) 45%, transparent), color-mix(in srgb, var(--ct-violet) 45%, transparent), transparent);
}
html body .sticky-footer-item a.active span:first-child {
    background: var(--ct-grad) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 14px -6px color-mix(in srgb, var(--ct-primary) 85%, transparent);
}
html body .sticky-footer-item a.active span:first-child i,
html body .sticky-footer-item a.active span:first-child svg { color: #fff !important; }

/* Checkout: hero sheen edge, glowing package selection, gradient price */
html body .co-hero { position: relative; overflow: hidden; }
html body .co-hero::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.07) 50%, transparent 60%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
html body .co-card {
    border: 1px solid transparent !important;
    background: linear-gradient(#fff, #fff) padding-box, var(--ct-edge) border-box !important;
}
html body .co-var-btn { background: #fff !important; border: 1.5px solid var(--ct-line) !important; }
html body .co-var-btn:hover:not([disabled]) { border-color: var(--ct-primary-200) !important; box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--ct-primary) 70%, transparent) !important; }
html body .co-var-btn.sel {
    border: 1.5px solid transparent !important;
    background: linear-gradient(180deg, #fff, var(--ct-primary-50)) padding-box, var(--ct-edge-hot) border-box !important;
    box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--ct-primary) 75%, transparent) !important;
}
html body .co-var-btn.sel .co-var-dot { background: var(--ct-grad) !important; border-color: transparent !important; }
html body .co-var-price {
    background: var(--ct-grad); -webkit-background-clip: text; background-clip: text;
    color: transparent !important; -webkit-text-fill-color: transparent;
}
html body .co-hot { background: linear-gradient(135deg, #F59E0B, #EF4444) !important; box-shadow: 0 4px 10px -4px rgba(239,68,68,.6); }
html body .co-pm-card.co-pm-sel { box-shadow: 0 0 0 3px var(--ct-primary-100), 0 10px 20px -14px color-mix(in srgb, var(--ct-primary) 80%, transparent) !important; }
html body .co-btn-p { position: relative; overflow: hidden; }
html body .co-btn-p::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    transform: translateX(-120%); animation: ct-sheen 4.5s var(--ct-ease) 1s infinite;
}

/* Footer: soft brand wash behind the white sheet */
html body footer.footer-bg {
    background:
        radial-gradient(600px 220px at 50% 0, color-mix(in srgb, var(--ct-primary) 6%, transparent), transparent 70%),
        #fff !important;
}

@media (hover: none) {
    html body .product-card-link:hover { transform: none !important; }
    html body .product-card-link:hover::after { opacity: 0; }
}