/* =========================================================
   PlayOcity Theme System (TWO COLORS ONLY)
   Change theme by editing --brand and --accent
   ========================================================= */
:root {
    --brand: #841a78; /* Primary (new) */
    --accent: #E0C5DD; /* Secondary (recommended gold) */

    --text-on-brand: #ffffff;
    --text-on-accent: #2a1a05;
    /* Fallbacks (older browsers) */
    --brand-weak: rgba(132, 26, 120, 0.08);
    --accent-weak: rgba(244, 197, 66, 0.10);
    --brand-border: rgba(132, 26, 120, 0.22);
    --shadow: rgba(0,0,0,0.20);
    /* Modern mixing (auto-derived from the two colors) */
    --brand-weak-mix: color-mix(in srgb, var(--brand) 10%, white);
    --accent-weak-mix: color-mix(in srgb, var(--accent) 12%, white);
    --brand-border-mix: color-mix(in srgb, var(--brand) 20%, white);
}

@supports (color: color-mix(in srgb, black 50%, white)) {
    :root {
        --brand-weak: var(--brand-weak-mix);
        --accent-weak: var(--accent-weak-mix);
        --brand-border: var(--brand-border-mix);
    }
}
/*:root {
    --brand: #103a73;*/ /* Primary */
    /*--accent: #f3b42d;*/ /* Secondary */
    /* Derived tokens (still controlled by the two colors) */
    /*--text-on-brand: #ffffff;
    --text-on-accent: #0b1b2a;*/
    /* Fallbacks first (for older browsers), then color-mix override */
    /*--brand-weak: rgba(16, 58, 115, 0.08);
    --accent-weak: rgba(243, 180, 45, 0.10);
    --brand-border: rgba(16, 58, 115, 0.22);
    --shadow: rgba(0, 0, 0, 0.20);*/
    /* Prefer modern mixing when available */
    /*--brand-weak-mix: color-mix(in srgb, var(--brand) 10%, white);
    --accent-weak-mix: color-mix(in srgb, var(--accent) 12%, white);
    --brand-border-mix: color-mix(in srgb, var(--brand) 20%, white);
}*/

/* If color-mix is supported, use it */
/*@supports (color: color-mix(in srgb, black 50%, white)) {
    :root {
        --brand-weak: var(--brand-weak-mix);
        --accent-weak: var(--accent-weak-mix);
        --brand-border: var(--brand-border-mix);
    }
}*/

/* =========================================================
   Global Layout Fixes
   ========================================================= */

html, body {
    overflow-x: hidden;
}

#app, main, .site-bg {
    overflow-x: hidden;
}

@media (max-width: 768px) {
    body {
        overscroll-behavior-y: none;
    }
}

/* Mobile-only safe area padding */
nav[role="mobile-nav"] {
    padding-bottom: env(safe-area-inset-bottom);
}

/* =========================================================
   Theme Utility Classes (use these in markup instead of hex)
   ========================================================= */

.text-brand {
    color: var(--brand) !important;
}

.text-accent {
    color: var(--accent) !important;
}

.bg-brand {
    background: var(--brand) !important;
}

.bg-accent {
    background: var(--accent) !important;
}

.border-brand {
    border-color: var(--brand) !important;
}

.border-accent {
    border-color: var(--accent) !important;
}

.border-brand-100 {
    border-color: var(--brand-border) !important;
}

.bg-brand-soft {
    background: var(--brand-weak) !important;
}

.bg-accent-soft {
    background: var(--accent-weak) !important;
}

.bg-theme-gradient {
    background-image: linear-gradient(90deg, var(--brand), var(--accent)) !important;
}

.bg-theme-gradient-soft {
    background-image: linear-gradient( 180deg, color-mix(in srgb, var(--brand) 10%, transparent), color-mix(in srgb, var(--accent) 12%, transparent) ) !important;
}

/* =========================================================
   Animations
   ========================================================= */

@keyframes bounce {
    0%, 100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-5px)
    }
}

.bounce {
    animation: bounce 1.2s infinite;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: scale(.95)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.animate-fade-in {
    animation: fade-in .3s ease-out forwards;
}

@keyframes slideUp {
    0% {
        transform: translateY(100%);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

.animate-slide-up {
    animation: slideUp .4s ease-out;
}

@keyframes bounce-slow {
    0%, 100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}

.animate-bounce-slow {
    animation: bounce-slow 1.5s infinite cubic-bezier(.68,-0.55,.27,1.55);
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(.97)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

.animate-fadeInScale {
    animation: fadeInScale .6s cubic-bezier(.68,-0.55,.27,1.55);
}

@keyframes spin-slow {
    100% {
        transform: rotate(360deg)
    }
}

.animate-spin-slow {
    animation: spin-slow 2.4s linear infinite;
}

@keyframes pulse-slow {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 20%, transparent)
    }

    50% {
        box-shadow: 0 0 16px 6px color-mix(in srgb, var(--accent) 25%, transparent)
    }
}

.animate-pulse-slow {
    animation: pulse-slow 2.1s infinite;
}

/* =========================================================
   Background Theme (site-bg)
   ========================================================= */

.site-bg {
    background-color: var(--brand);
    /* Two-color gradient overlay (brand + accent) + image */
    background-image: linear-gradient( 180deg, color-mix(in srgb, var(--brand) 10%, transparent) 0%, color-mix(in srgb, var(--accent) 10%, transparent) 100% ), url("/images/bg/mobile-bg.png");
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-attachment: scroll, scroll;
    min-height: 100svh;
    width: 100%;
}

@supports (background-image: image-set(url("/images/bg/mobile-bg.webp") type("image/webp"))) {
    .site-bg {
        background-image: linear-gradient( 180deg, color-mix(in srgb, var(--brand) 10%, transparent) 0%, color-mix(in srgb, var(--accent) 10%, transparent) 100% ), image-set( url("/images/bg/mobile-bg.webp") type("image/webp"), url("/images/bg/mobile-bg.png") type("image/png") );
    }
}

@media (min-width: 768px) {
    .site-bg {
        background-image: linear-gradient( 180deg, color-mix(in srgb, var(--brand) 10%, transparent) 0%, color-mix(in srgb, var(--accent) 10%, transparent) 100% ), url("/images/bg/Mobile-Website-Background.png");
    }
}

@media (prefers-color-scheme: dark) {
    .site-bg {
        background-color: color-mix(in srgb, var(--brand) 75%, black);
        background-image: linear-gradient( 180deg, color-mix(in srgb, var(--brand) 18%, transparent) 0%, color-mix(in srgb, var(--accent) 14%, transparent) 100% ), url("/images/bg/Desktop-Website-Background.png");
    }
}

/* =========================================================
   Bottom Nav Active State (theme-driven)
   ========================================================= */

.nav-animate {
    transition: all .3s ease;
}

.nav-active {
    background: var(--brand) !important;
    color: var(--text-on-brand) !important;
    transform: translateY(-5px);
    box-shadow: 0 4px 10px var(--shadow);
}

    /* If your nav items have icon + label, make them accent on active */
    .nav-active i,
    .nav-active span.text-xs {
        color: var(--accent) !important;
    }

/* =========================================================
   Slider Styles
   ========================================================= */

.slider-wrapper {
    display: flex;
    overflow: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem;
    scrollbar-width: none;
}

    .slider-wrapper::-webkit-scrollbar {
        display: none;
    }

.slider-item {
    transition: transform .4s ease;
    border-radius: 1rem;
    margin: 0 .5rem;
    min-width: 100%;
    flex-shrink: 0;
    scroll-snap-align: center;
}

.slider-active {
    transform: scale(1.02);
    z-index: 10;
}

.slider-indicator-bar {
    width: 30px;
    height: 4px;
    background: color-mix(in srgb, var(--brand) 10%, white);
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
}

.slider-indicator-progress {
    height: 100%;
    width: 0%;
    background: var(--accent);
    transition: width .3s ease;
}

/* Slider viewport/track layout */
.slider-viewport {
    overflow: hidden;
}

.slider-track {
    display: flex;
    transition: transform 700ms ease-in-out;
    will-change: transform;
}

.slide {
    flex: 0 0 100%;
}

/* Hide scrollbar on offers scroller (mobile) */
#offersSlider::-webkit-scrollbar {
    display: none;
}

/* =========================================================
   Floating Complaint Button (theme-driven)
   ========================================================= */

.fab-complaint {
    background: var(--brand) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

    .fab-complaint:hover {
        background: var(--accent) !important;
        border-color: var(--brand) !important;
        color: var(--text-on-accent) !important;
    }

    .fab-complaint:focus {
        outline: none;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent);
    }

/* =========================================================
   Modal / Cards Theme Helpers
   ========================================================= */

.theme-card {
    border: 1px solid var(--brand-border);
    background: color-mix(in srgb, white 88%, var(--brand) 12%);
}

.theme-pill {
    background: var(--brand);
    color: var(--text-on-brand);
}

.issue-btn {
    background: linear-gradient(135deg, var(--brand-weak), rgba(255,255,255,.75));
    border: 1px solid var(--brand-border);
}

    .issue-btn i {
        color: var(--brand);
    }

    .issue-btn span {
        color: var(--brand);
    }

    .issue-btn:hover {
        transform: scale(1.04);
        border-color: var(--accent);
    }

/* =========================================================
   Loader Theme
   ========================================================= */

.loader-ring {
    border: 4px solid color-mix(in srgb, var(--brand) 20%, white);
    border-top-color: var(--accent);
    border-bottom-color: var(--brand);
    background: rgba(255,255,255,.75);
}

/* =========================================================
   Toast Theme
   ========================================================= */

@keyframes toastIn {
    from {
        transform: translateY(8px);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1
    }
}

@keyframes toastOut {
    to {
        transform: translateY(8px);
        opacity: 0
    }
}

@keyframes progress {
    from {
        width: 0%
    }

    to {
        width: 100%
    }
}

.toast-theme {
    border-color: var(--accent) !important;
    color: var(--brand) !important;
}

    .toast-theme i {
        color: var(--accent) !important;
    }

/* Header dropdown animation */
@keyframes fadeInSoft {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeInSoft 0.18s ease-out;
}

/* Header surface */
.header-surface {
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--brand-border);
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

/* Theme-based focus ring (no hardcoded blue) */
.focus-ring-brand:focus {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* Dropdown menu */
.lang-menu {
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid color-mix(in srgb, var(--brand) 18%, white);
    border-radius: 14px;
    box-shadow: 0 16px 34px rgba(0,0,0,.12);
    overflow: hidden;
    min-width: 9.5rem;
}

/* Dropdown item hover (theme) */
.lang-item {
    width: 100%;
    text-align: left;
    padding: .6rem 1rem;
    font-size: .875rem;
}

html[dir="rtl"] .lang-item {
    text-align: right;
}

.lang-item:hover {
    background: color-mix(in srgb, var(--brand) 8%, white);
}

/* Icon button */
.icon-pill {
    background: rgba(255,255,255,.70);
    border: 1px solid var(--brand-border);
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

/* ===========================
   Bottom Navbar (Theme Driven)
   =========================== */

.bottom-nav {
    background: var(--accent);
    border-top: 1px solid var(--brand-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 -18px 35px rgba(0,0,0,.18);
    height: 4rem; /* 16 */
    padding-bottom: env(safe-area-inset-bottom);
}

    /* Base nav item look */
    .bottom-nav .nav-item {
        color: color-mix(in srgb, var(--brand) 88%, black);
    }

    /* Icon circle */
    .bottom-nav .nav-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 2.5rem; /* 10 */
        width: 2.5rem; /* 10 */
        border-radius: 9999px;
        transition: all .18s ease;
    }

/* On md+ size use slightly larger */
@media (min-width: 768px) {
    .bottom-nav .nav-icon {
        height: 2.75rem; /* 11 */
        width: 2.75rem;
    }
}

/* Hover state (theme) */
.bottom-nav .nav-item:hover .nav-icon {
    background: color-mix(in srgb, var(--brand) 10%, white);
}

.bottom-nav .nav-item:hover i,
.bottom-nav .nav-item:hover .nav-label {
    color: var(--brand);
}

/* Label */
.bottom-nav .nav-label {
    margin-top: .25rem;
    font-size: .75rem;
    transition: color .18s ease;
}

/* Active tab state (your JS toggles .nav-active on .nav-item) */
.bottom-nav .nav-item.nav-active {
    background: var(--brand) !important;
    color: var(--text-on-brand) !important;
    border-radius: .75rem;
    padding: .25rem 1rem; /* matches your JS add px-4 py-1 */
    transform: translateY(-5px);
    box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

    /* When active, icon/label go accent for contrast */
    .bottom-nav .nav-item.nav-active i,
    .bottom-nav .nav-item.nav-active .nav-label {
        color: var(--accent) !important;
    }

    /* When active, icon circle background becomes subtle */
    .bottom-nav .nav-item.nav-active .nav-icon {
        background: color-mix(in srgb, var(--accent) 18%, white);
    }

/* Accessibility: focus ring themed */
.bottom-nav .nav-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent);
    border-radius: .75rem;
}

.cart-badge {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    z-index: 10;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 800;
    line-height: 1;
    border-radius: 9999px;
    /* FLIPPED: Accent badge */
    background: var(--accent);
    color: var(--text-on-accent);
    /* Border to separate from background */
    border: 2px solid color-mix(in srgb, var(--brand) 25%, white);
    box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

html[dir="rtl"] .cart-badge {
    right: auto;
    left: -0.5rem;
}

/* ==========================================
   Account Panel / Drawer (Theme Driven)
   ========================================== */

.account-overlay {
    background: rgba(0,0,0,.60);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Drawer */
.account-drawer {
    background: rgba(255,255,255,.90);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid color-mix(in srgb, var(--brand) 12%, white);
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    box-shadow: 0 25px 60px color-mix(in srgb, var(--brand) 25%, transparent);
    will-change: transform;
}

/* RTL: drawer from LEFT */
html[dir="rtl"] .account-drawer {
    right: auto !important;
    left: 0 !important;
    border-left: none;
    border-right: 1px solid color-mix(in srgb, var(--brand) 12%, white);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

/* Drawer section borders */
.account-divider {
    border-color: color-mix(in srgb, var(--brand) 12%, white);
}

/* Drawer header */
.account-header {
    background: rgba(255,255,255,.80);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid color-mix(in srgb, var(--brand) 12%, white);
}

/* Avatar */
.account-avatar {
    border: 4px solid color-mix(in srgb, var(--accent) 40%, transparent);
    background: #fff;
}

/* LIVE chip */
.account-live {
    background: var(--accent);
    color: var(--text-on-accent, #0b1b2a);
    box-shadow: 0 6px 16px rgba(0,0,0,.16);
}

/* Title */
.account-title {
    color: var(--brand);
}

/* Primary button */
.btn-brand {
    background: var(--brand);
    color: var(--text-on-brand, #fff);
}

    .btn-brand:hover {
        background: color-mix(in srgb, var(--brand) 86%, black);
    }

/* Secondary outline button */
.btn-brand-outline {
    background: rgba(255,255,255,.92);
    color: var(--brand);
    border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
}

    .btn-brand-outline:hover {
        background: color-mix(in srgb, var(--brand) 6%, white);
    }

/* Focus-visible (theme) */
.account-focus:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* List items */
.account-item {
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 5%, white);
}

    .account-item:hover {
        background: color-mix(in srgb, var(--brand) 10%, white);
    }

    /* Item icons */
    .account-item i {
        color: var(--accent);
    }

/* Footer */
.account-footer {
    background: rgba(255,255,255,.85);
    border-top: 1px solid color-mix(in srgb, var(--brand) 12%, white);
}

/* Social icon pill */
.social-pill {
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 5%, white);
}

    .social-pill:hover {
        background: color-mix(in srgb, var(--brand) 10%, white);
    }

/* ==========================================
   OTP Modal (Theme Driven)
   ========================================== */

/* Animations */
@keyframes otpSlideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes otpZoomIn {
    from {
        transform: scale(.96);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.otp-modal-anim {
    animation: otpSlideUp .4s cubic-bezier(.4,2,.2,1);
}

@media (min-width: 768px) {
    .otp-modal-anim {
        animation: otpZoomIn .28s cubic-bezier(.2,.8,.2,1);
    }
}

/* Overlay */
.otp-overlay {
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

@media (min-width: 768px) {
    .otp-overlay {
        background: rgba(0,0,0,.40);
    }
}

/* Card */
.otp-card {
    background: rgba(255,255,255,.95);
    border-top: 4px solid var(--accent);
    box-shadow: 0 20px 45px rgba(0,0,0,.22);
}

@media (min-width: 768px) {
    .otp-card {
        border-top-width: 1px;
        border-color: color-mix(in srgb, var(--accent) 60%, white);
    }
}

/* Label */
.otp-label {
    color: var(--brand);
}

/* Input */
.otp-input-mobile {
    border: 2px solid color-mix(in srgb, var(--brand) 15%, white);
}

    .otp-input-mobile:focus {
        border-color: var(--brand);
        outline: none;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
    }

/* Send/Verify buttons */
.btn-otp-primary {
    background: var(--brand);
    color: var(--text-on-brand, #fff);
}

    .btn-otp-primary:hover {
        background: color-mix(in srgb, var(--brand) 86%, black);
    }

    .btn-otp-primary:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

/* OTP digit boxes */
.otp-digit {
    background: rgba(255,255,255,.70);
    border-bottom: 4px solid var(--accent);
    color: var(--brand);
}

    .otp-digit:focus {
        outline: none;
        border-bottom-color: var(--brand);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
    }

/* Resend link */
.btn-otp-link {
    color: var(--brand);
}

    .btn-otp-link:disabled {
        opacity: .55;
    }

/* Error message */
.otp-error {
    color: #ef4444;
}
/* keep semantic red for errors */

/* (Optional) Close button if you enable it */
.otp-close {
    color: var(--brand);
}

    .otp-close:hover {
        color: #dc2626;
    }

/* ==========================================
   Home Page (Index) Theme Styles
   ========================================== */

/* Saudi Riyal icon using mask (color from --brand) */
.sr-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: var(--brand);
    -webkit-mask: url("/images/Saudi_Riyal_Symbol-2.svg") no-repeat center / contain;
    mask: url("/images/Saudi_Riyal_Symbol-2.svg") no-repeat center / contain;
    vertical-align: -0.1em;
}

/* Slider shell */
.hero-slider {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
    background: color-mix(in srgb, var(--brand) 10%, transparent);
}

/* Slider arrows */
.slider-arrow {
    background: rgba(255,255,255,.82);
    border: 1px solid var(--brand-border);
    border-radius: 9999px;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    transition: transform .18s ease, background .18s ease;
}

    .slider-arrow:hover {
        background: color-mix(in srgb, var(--brand) 8%, white);
        transform: scale(1.03);
    }

    .slider-arrow i {
        color: var(--brand);
    }

/* Slider progress rail + fill */
.slider-progress-rail {
    background: color-mix(in srgb, var(--brand) 10%, white);
}

.slider-progress-fill {
    background-image: linear-gradient(90deg, var(--brand), var(--accent));
}

/* Section title */
.home-title {
    color: transparent;
    background-image: linear-gradient(90deg, #fff, #fff); /* keep white text but via bg-clip */
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 8px 18px rgba(0,0,0,.22);
}

.home-subtitle {
    color: var(--accent);
}

/* Toast (theme-driven) */
.toast-theme-floating {
    background-image: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 65%, black));
    color: var(--text-on-brand);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    box-shadow: 0 14px 34px rgba(0,0,0,.20);
}

/* =========================================================
   OFFERS SECTION (Always 2 Columns, Theme Driven)
   ========================================================= */

.offers-wrap {
    margin-top: 1.5rem;
    position: relative;
    overflow: visible;
}

/* Always 2 columns */
.offers-slider {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 0 .5rem;
    overflow: visible;
}

@media (min-width: 768px) {
    .offers-slider {
        gap: 1.5rem;
        padding: 0;
    }
}

/* Card */
.offer-card {
    width: 100%;
    min-width: 0;
    background: rgba(255,255,255,.84);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--brand-border);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 16px 34px rgba(0,0,0,.14);
    transition: transform .22s ease, box-shadow .22s ease;
}

    .offer-card:hover {
        transform: scale(1.02);
        box-shadow: 0 22px 50px rgba(0,0,0,.18);
    }

/* Media */
.offer-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

    .offer-media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform .28s ease;
    }

.offer-card:hover .offer-media img {
    transform: scale(1.06);
}

/* Sparkle: premium subtle float */
@keyframes sparkleFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: .92;
    }

    50% {
        transform: translateY(-4px) scale(1.04);
        opacity: 1;
    }
}

@keyframes sparkleGlow {
    0%, 100% {
        filter: drop-shadow(0 10px 16px rgba(0,0,0,.14));
    }

    50% {
        filter: drop-shadow(0 14px 22px rgba(0,0,0,.18));
    }
}

.offer-sparkle {
    position: absolute;
    top: .85rem;
    right: .85rem;
    z-index: 3;
    pointer-events: none;
    font-size: 1.05rem;
    color: var(--accent);
    animation: sparkleFloat 1.8s ease-in-out infinite, sparkleGlow 1.8s ease-in-out infinite;
}

html[dir="rtl"] .offer-sparkle {
    right: auto;
    left: .85rem;
}

/* Body */
.offer-body {
    padding: .95rem;
}

@media (min-width: 768px) {
    .offer-body {
        padding: 1.15rem;
    }
}

.offer-title {
    font-weight: 900;
    color: var(--brand);
    margin: 0 0 .35rem 0;
    font-size: .95rem;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .offer-title {
        font-size: 1.05rem;
    }
}

.offer-desc {
    margin: 0 0 .9rem 0;
    font-size: .78rem;
    line-height: 1.35;
    color: color-mix(in srgb, var(--brand) 42%, black);
    opacity: .80;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 768px) {
    .offer-desc {
        font-size: .85rem;
        -webkit-line-clamp: 3;
    }
}

/* =========================================================
   ACTIONS ROW: Force left/right with grid (no stacking)
   ========================================================= */

.offer-actions {
    display: grid;
    grid-template-columns: 1fr auto; /* price gets flexible, button fixed */
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

/* Price pill: content-sized, NOT a long bar */
.offer-price {
    justify-self: start;
    width: fit-content; /* key: stops becoming a long bar */
    max-width: 100%; /* avoid overflow */
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--accent);
    color: var(--text-on-accent);
    font-weight: 900;
    font-size: .78rem;
    padding: .24rem .65rem;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
    box-shadow: 0 10px 22px rgba(0,0,0,.12);
    white-space: nowrap;
}

/* Desktop: cap pill so it never looks too wide */
@media (min-width: 1024px) {
    .offer-price {
        font-size: .80rem;
        padding: .22rem .60rem;
        max-width: 165px; /* HARD CAP for desktop look */
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.sr-icon-sm {
    width: .95rem;
    height: .95rem;
}

/* Buy button */
.btn-offer-buy {
    justify-self: end;
    width: auto;
    white-space: nowrap;
    min-width: 96px;
    height: 36px;
    padding: 0 .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-weight: 900;
    font-size: .78rem;
    line-height: 1;
    background: var(--brand);
    color: var(--text-on-brand);
    box-shadow: 0 12px 26px rgba(0,0,0,.16);
    transition: transform .14s ease, background .18s ease, box-shadow .18s ease;
}

    .btn-offer-buy:hover {
        background: color-mix(in srgb, var(--brand) 86%, black);
        box-shadow: 0 16px 34px rgba(0,0,0,.18);
    }

    .btn-offer-buy:active {
        transform: scale(.98);
    }

    .btn-offer-buy:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 16px 34px rgba(0,0,0,.18);
    }

/* Mobile: keep left/right and protect price visibility */
@media (max-width: 520px) {
    .offer-actions {
        grid-template-columns: minmax(0, 1fr) auto; /* important */
        gap: .45rem;
    }

    /* Allow pill to take the available space (no hard cap) */
    .offer-price {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis; /* only applies if space is truly tight */
        font-size: .72rem;
        padding: .22rem .52rem;
    }

    /* Make button slightly tighter on mobile to free space for price */
    .btn-offer-buy {
        min-width: 82px;
        height: 34px;
        font-size: .74rem;
        padding: 0 .70rem;
    }
}

/* Ultra small phones: if you still see truncation, reduce further */
@media (max-width: 360px) {
    .offer-price {
        font-size: .70rem;
        padding: .20rem .46rem;
    }

    .btn-offer-buy {
        min-width: 78px;
    }
}

/* =========================================================
   Premium Reveal Animation (Offers)
   ========================================================= */

/* Ensure pseudo-element sheen can position correctly */
.offer-card {
    position: relative;
}

    /* Initial hidden state */
    .offer-card.reveal-left,
    .offer-card.reveal-right {
        opacity: 0;
        transform: translateY(10px) translateX(var(--reveal-x, 0)) scale(.99);
        will-change: transform, opacity;
    }

    /* Direction */
    .offer-card.reveal-left {
        --reveal-x: -18px;
    }

    .offer-card.reveal-right {
        --reveal-x: 18px;
    }

    /* When visible (uses animation-delay via CSS variable) */
    .offer-card.reveal-in {
        animation: offerReveal .60s cubic-bezier(.20, .90, .20, 1) forwards;
        animation-delay: var(--reveal-delay, 0ms);
    }

/* Keyframes */
@keyframes offerReveal {
    to {
        opacity: 1;
        transform: translateY(0) translateX(0) scale(1);
    }
}

/* Premium micro-detail: subtle sheen sweep on hover */
.offer-card::after {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,.18) 28%, transparent 55% );
    transform: translateX(-130%);
    transition: transform .55s ease, opacity .25s ease;
    border-radius: 1rem;
    opacity: 0;
}

.offer-card:hover::after {
    transform: translateX(130%);
    opacity: 1;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .offer-card.reveal-left,
    .offer-card.reveal-right {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .offer-card::after {
        display: none !important;
    }
}

/* =========================================================
   Recharge Page UI (No Inline CSS)
   ========================================================= */

/* Gradient text using ONLY root colors */
.text-theme-gradient {
    background-image: linear-gradient(to right, var(--brand), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Saudi Riyal icon: uses currentColor (so you control via text-brand/text-accent) */
.sr-icon {
    display: inline-block;
    background-color: currentColor; /* IMPORTANT: no hardcoded hex */
    -webkit-mask: url("/images/Saudi_Riyal_Symbol-2.svg") no-repeat center / contain;
    mask: url("/images/Saudi_Riyal_Symbol-2.svg") no-repeat center / contain;
}

/* ==== Desktop-friendly scanner area ==== */
#scanner {
    width: 100%;
    display: none; /* shown when scanning starts */
    margin-top: 1rem;
    aspect-ratio: 16 / 9;
    max-height: 60vh;
    min-height: 260px;
    border-radius: .75rem;
    overflow: hidden;
    /* theme-based dark surface (no hex) */
    background: color-mix(in srgb, var(--brand) 35%, black);
}

    #scanner video,
    #scanner canvas {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

/* OTP inputs sizing */
.otp-input {
    width: 3rem;
    height: 3rem;
    text-align: center;
    font-size: 1.25rem;
    border-radius: .5rem;
}

@media (min-width:768px) {
    .otp-input {
        width: 3.25rem;
        height: 3.5rem;
        font-size: 1.35rem;
    }
}

/* Modal animations */
.modal-slide-up {
    animation: slideUp .30s ease-out;
}

.modal-slide-down {
    animation: slideDown .30s ease-in;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* Premium OTP entrance */
@keyframes otpSlideUp {
    0% {
        transform: translateY(120px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-otpSlideUp {
    animation: otpSlideUp .42s cubic-bezier(.68,-0.55,.27,1.55);
}

/* OTP content min-height (replaces inline style) */
.otp-content-min {
    min-height: 370px;
}

/* Desktop-only body tuck + soft fade under header
   Instead of body > main:first-of-type (too global),
   we scope it to .recharge-main which you will add to the first <main>. */
@media (min-width:1024px) {
    .recharge-main {
        margin-top: -12px;
    }
}

/* Header fade shadow overlay (works with your existing .desktop-fade class) */
.desktop-fade {
    position: fixed;
}
    /* already fixed, kept for clarity */
    .desktop-fade::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 24px;
        pointer-events: none;
        background: linear-gradient(to bottom, rgba(255,255,255,.90), rgba(255,255,255,0));
        display: none;
    }

@media (min-width:1024px) {
    .desktop-fade::after {
        display: block;
    }
}


/* =========================================================
   Cart Page (No Inline CSS) - Theme driven (brand/accent)
   ========================================================= */

/* SR icon already defined in your site.css (recommended):
   .sr-icon { background-color: currentColor; mask: ... }
   If you don't have it, keep this version:
*/
.sr-icon {
    display: inline-block;
    background-color: currentColor;
    -webkit-mask: url("/images/Saudi_Riyal_Symbol-2.svg") no-repeat center / contain;
    mask: url("/images/Saudi_Riyal_Symbol-2.svg") no-repeat center / contain;
}

/* ---------- Cart item row backgrounds (replaces inline background-image) ---------- */
.cart-row {
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100% 100%;
    border-radius: 1rem;
}

.cart-row-bg {
    background-image: url("/images/Products/bg.png");
}

.cart-inner-badge {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("/images/Products/innerbg.png");
}

/* ---------- Coupon layout RTL/LTR (replaces inline flex-direction/text-align) ---------- */
.cart-promo-row {
    display: flex;
    gap: 0;
}

html[dir="rtl"] .cart-promo-row {
    flex-direction: row-reverse;
}

.cart-promo-input {
    text-align: left;
}

html[dir="rtl"] .cart-promo-input {
    text-align: right;
}

/* ---------- Coupon & Summary surfaces (theme) ---------- */
.cart-surface-accent {
    background: color-mix(in srgb, var(--accent) 92%, white);
    border: 1px solid color-mix(in srgb, var(--brand) 14%, white);
}

.cart-summary {
    background: color-mix(in srgb, var(--accent) 92%, white);
    border: 1px solid color-mix(in srgb, var(--brand) 14%, white);
}

/* ---------- Price chips (theme) ---------- */
.cart-price-chip {
    background: rgba(255,255,255,.90);
    color: var(--brand);
    border: 1px solid color-mix(in srgb, var(--brand) 18%, white);
}

/* ---------- Desktop proceed button gradient (theme) ---------- */
.btn-theme-gradient {
    background-image: linear-gradient(to right, var(--brand), var(--accent));
    color: var(--text-on-brand, #fff);
}

    .btn-theme-gradient:hover {
        filter: brightness(0.98);
    }

/* ---------- Mobile proceed bar ---------- */
.cart-proceed-bar {
    background: rgba(255,255,255,.95);
    border-top: 1px solid color-mix(in srgb, var(--brand) 12%, white);
    box-shadow: 0 -10px 22px rgba(0,0,0,.10);
}

/* ---------- Coupon toast ---------- */
.coupon-toast {
    background: var(--brand);
    color: var(--text-on-brand, #fff);
}

/* ---------- Empty cart hero gradient text ---------- */
.text-theme-gradient {
    background-image: linear-gradient(to right, var(--brand), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Payment modal sheet (theme) ---------- */
.payment-sheet {
    border: 1px solid color-mix(in srgb, var(--brand) 12%, white);
}

.payment-title {
    color: var(--brand);
}

    .payment-title i {
        color: var(--accent);
    }

/* Radio accent (keeps Tailwind-style behavior without hex) */
.payment-radio {
    accent-color: var(--brand);
}

/* Coming soon pill */
.payment-soon {
    background: var(--accent);
    color: var(--text-on-accent, #0b1b2a);
    border: 1px solid color-mix(in srgb, var(--accent) 65%, white);
}


/* =========================================================
   Spin to Win (NO inline CSS)
   Uses ONLY :root --brand / --accent
   ========================================================= */

/* Pie slice mask */
.clip-pie {
    clip-path: polygon(50% 50%, 100% 0, 100% 100%);
}

/* Pointer bounce – keep X centering inside transform */
@keyframes pointerBounce {
    0%, 100% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, -10px);
    }
}

.animate-pointerBounce {
    animation: pointerBounce 1.3s infinite cubic-bezier(.68,-0.55,.27,1.55);
}

/* Modal pop */
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(.97);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-fadeInScale {
    animation: fadeInScale .6s cubic-bezier(.68,-0.55,.27,1.55);
}

/* Spinner shell glow (two colors only) */
.spinner-shell {
    background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%), radial-gradient(circle at 70% 80%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 60%);
    border: 1px solid color-mix(in srgb, var(--brand) 14%, transparent);
}

/* Pointer triangle color (theme) */
.spin-pointer-tri {
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-top-color: var(--accent) !important;
    filter: drop-shadow(0 10px 10px rgba(0,0,0,.20));
}

/* Wheel frame (theme) */
.spin-wheel {
    border-color: color-mix(in srgb, var(--brand) 35%, transparent) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

/* Center cap (theme) */
.spin-cap {
    border-color: color-mix(in srgb, var(--brand) 35%, transparent);
}

/* Segment colors (4 segments, derived from two colors only) */
.spin-seg-0 {
    background: color-mix(in srgb, var(--accent) 88%, white);
}

.spin-seg-1 {
    background: color-mix(in srgb, var(--brand) 70%, white);
}

.spin-seg-2 {
    background: color-mix(in srgb, var(--brand) 88%, black);
}

.spin-seg-3 {
    background: color-mix(in srgb, var(--accent) 70%, black);
}

/* Segment label colors (readable) */
.spin-label-dark {
    color: var(--brand);
}

.spin-label-light {
    color: #fff;
}

.spin-label-accent {
    color: var(--accent);
}

/* T&C list RTL padding (no inline style) */
.spin-tc-list {
    padding-left: 1.25rem;
}

html[dir="rtl"] .spin-tc-list {
    padding-left: 0;
    padding-right: 1.25rem;
}

/* Result modal styling (theme) */
.spin-result-modal {
    background: rgba(255,255,255,.95);
    color: var(--brand);
    border: 2px solid color-mix(in srgb, var(--accent) 55%, white);
    box-shadow: 0 22px 50px rgba(0,0,0,.22);
}

/* Toast (kept as created dynamically; this is optional if you want class-based) */
/* =========================================================
   Promo Modal (Theme Driven) — no inline CSS
   Uses: --brand, --accent
   ========================================================= */

.promo-modal {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
}

    .promo-modal.hidden {
        display: none;
    }

.promo-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* ===== Card ===== */
.promo-card {
    position: relative;
    width: min(92vw, 760px);
    border-radius: 20px;
    padding: 22px;
    background: radial-gradient(120% 120% at 10% 0%, #ffffff 0%, color-mix(in srgb, var(--accent) 12%, white) 50%, #ffffff 100%);
    border: 2px solid transparent;
    background-clip: padding-box;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.15), 0 0 0 1px color-mix(in srgb, var(--brand) 10%, transparent) inset, 0 0 40px color-mix(in srgb, var(--accent) 28%, transparent);
    animation: promoNeonPulse 2.2s ease-in-out infinite;
}

    /* Animated gradient border ring */
    .promo-card::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 22px;
        background: conic-gradient( from 0deg, color-mix(in srgb, var(--accent) 0%, transparent) 0deg, color-mix(in srgb, var(--accent) 65%, transparent) 90deg, color-mix(in srgb, var(--brand) 65%, transparent) 180deg, color-mix(in srgb, var(--accent) 65%, transparent) 270deg, color-mix(in srgb, var(--accent) 0%, transparent) 360deg );
        filter: blur(8px);
        z-index: -1;
        animation: promoSpinRing 8s linear infinite;
        pointer-events: none;
    }

/* Moving light sweep */
.promo-sweep {
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-12deg);
    filter: blur(2px);
    mix-blend-mode: screen;
    animation: promoSweep 3.5s ease-in-out infinite;
}

/* Close button (if you enable later) */
.promo-close {
    position: absolute;
    top: 10px;
    right: 12px;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background: #ffffffd9;
    color: var(--brand);
    font-size: 24px;
    line-height: 1;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    transition: transform .15s ease, background .2s ease;
}

    .promo-close:hover {
        transform: scale(1.06);
        background: #fff;
    }

/* ===== Body ===== */
.promo-body {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-evenly;
}

.promo-badge {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 26px;
    color: #fff;
    background: var(--brand);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--brand) 22%, transparent), 0 0 0 8px color-mix(in srgb, var(--brand) 10%, transparent);
    position: relative;
}

    .promo-badge::after {
        content: "OFF";
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--accent);
        color: var(--brand);
        font-weight: 900;
        font-size: 11px;
        padding: 2px 8px;
        border-radius: 999px;
        box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 40%, transparent);
    }

.promo-content h3 {
    margin: 0;
    color: var(--brand);
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 900;
    letter-spacing: .2px;
}

    .promo-content h3 span {
        color: var(--accent);
    }

.promo-sub {
    margin: .25rem 0 .6rem;
    color: #334155;
    font-size: 14px;
}

/* Code row */
.promo-code {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

    .promo-code .code {
        padding: .6rem .8rem;
        font-weight: 800;
        letter-spacing: .2em;
        color: var(--brand);
        background: color-mix(in srgb, var(--brand) 6%, white);
    }

    .promo-code .copy-btn {
        padding: .6rem .95rem;
        font-weight: 800;
        cursor: pointer;
        user-select: none;
        border: 0;
        background: var(--brand);
        color: #fff;
        transition: background .2s ease, transform .08s ease, opacity .2s ease;
    }

        .promo-code .copy-btn:hover {
            background: color-mix(in srgb, var(--brand) 88%, black);
        }

        .promo-code .copy-btn:active {
            transform: translateY(1px);
        }

        .promo-code .copy-btn.is-copied {
            background: color-mix(in srgb, var(--accent) 70%, var(--brand));
            color: #1f2937;
        }

.promo-foot {
    margin-top: .5rem;
    color: #64748b;
    font-size: 12px;
}

/* ===== Animations ===== */
@keyframes promoNeonPulse {
    0%, 100% {
        box-shadow: 0 10px 30px rgba(0,0,0,.15), 0 0 0 1px color-mix(in srgb, var(--brand) 10%, transparent) inset, 0 0 28px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 60px color-mix(in srgb, var(--accent) 12%, transparent);
    }

    50% {
        box-shadow: 0 12px 36px rgba(0,0,0,.18), 0 0 0 1px color-mix(in srgb, var(--brand) 12%, transparent) inset, 0 0 42px color-mix(in srgb, var(--accent) 42%, transparent), 0 0 90px color-mix(in srgb, var(--accent) 22%, transparent);
    }
}

@keyframes promoSweep {
    0% {
        left: -45%;
        opacity: 0;
    }

    18% {
        opacity: .85;
    }

    50% {
        left: 105%;
        opacity: .2;
    }

    100% {
        left: 105%;
        opacity: 0;
    }
}

@keyframes promoSpinRing {
    to {
        transform: rotate(360deg);
    }
}

/* Mobile tweaks */
@media (max-width: 640px) {
    .promo-card {
        padding: 18px;
    }

    .promo-badge {
        width: 70px;
        height: 70px;
        border-radius: 14px;
        font-size: 22px;
    }

    .promo-body {
        align-items: flex-start;
    }
}

/* =========================================================
   Welcome Splash (Theme Driven)
   Uses only: --brand and --accent
   ========================================================= */

#welcomeSplash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    color: #fff;
    pointer-events: auto;
    /* Base background (brand-driven) */
    background: radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, var(--accent) 18%, var(--brand) 82%), var(--brand) 55%, color-mix(in srgb, var(--brand) 78%, #000 22%) 100%);
}

@supports not (color: color-mix(in srgb, black 50%, white)) {
    #welcomeSplash {
        background: radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.08), var(--brand) 50%);
    }
}

/* Primary layer: subtle light sweep */
#splashLayerBlue {
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 60% at 10% 10%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%), linear-gradient(120deg, rgba(255,255,255,.08), rgba(255,255,255,0));
    animation: splashBlueSweep 1200ms cubic-bezier(.2,.8,.2,1) both;
}

/* Accent layer: soft accent wave highlight */
#splashLayerGold {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(120% 120% at 80% 120%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 55%), linear-gradient(140deg, color-mix(in srgb, var(--accent) 85%, white) 0%, color-mix(in srgb, var(--accent) 65%, transparent) 40%, transparent 72%);
    mix-blend-mode: screen;
    animation: splashAccentWave 1200ms cubic-bezier(.2,.8,.2,1) 900ms both;
}

/* Logo pop (zoom in), breathe (zoom out slight), then hold */
#splashLogo {
    opacity: 0;
    transform: scale(.8);
    will-change: transform, opacity;
    user-select: none;
    animation: splashLogoIn 650ms cubic-bezier(.25,1,.3,1) 1200ms both, splashLogoBreathe 900ms ease-in-out 1900ms 1 both;
}

#splashTagline {
    position: absolute;
    bottom: 2.5rem;
    font-size: .75rem;
    letter-spacing: .12em;
    opacity: 0;
    animation: splashTaglineIn 600ms ease 1500ms both;
}

/* Fade the whole splash at the end (done via JS class) */
#welcomeSplash.splash-hide {
    animation: splashOut 320ms ease forwards;
}

/* Keyframes */
@keyframes splashBlueSweep {
    from {
        transform: translateX(-12%) skewX(-6deg);
        opacity: .65;
    }

    to {
        transform: translateX(0) skewX(0);
        opacity: 1;
    }
}

@keyframes splashAccentWave {
    from {
        opacity: 0;
        transform: translateX(8%) scale(1.02);
    }

    60% {
        opacity: .95;
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes splashLogoIn {
    from {
        opacity: 0;
        transform: scale(.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes splashLogoBreathe {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }

    100% {
        transform: scale(1.02);
    }
}

@keyframes splashTaglineIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes splashOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    #splashLayerBlue,
    #splashLayerGold,
    #splashLogo,
    #splashTagline {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}


/* =========================================================
   My Cards (Theme Driven)
   Depends on :root --brand and --accent
   ========================================================= */

.cards-shell {
    width: 100%;
    max-width: 72rem; /* ~ max-w-6xl */
    margin: 0 auto 2.5rem;
    border-radius: 1rem;
    background: rgba(255,255,255,.90);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 1.5rem;
    border: 1px solid color-mix(in srgb, var(--brand) 14%, transparent);
    box-shadow: 0 16px 40px rgba(0,0,0,.10);
}

@media (min-width:768px) {
    .cards-shell {
        padding: 2rem;
    }
}

/* Title */
.cards-title {
    margin: 0 0 1.5rem;
    text-align: center;
    font-weight: 900;
    letter-spacing: -.01em;
    font-size: 1.6rem;
    background: linear-gradient(90deg, var(--brand), var(--brand), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (min-width:768px) {
    .cards-title {
        font-size: 2rem;
    }
}

/* Grid */
.mycards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width:768px) {
    .mycards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

/* Card */
.mycard {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    padding: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--brand) 14%, transparent);
    box-shadow: 0 10px 22px rgba(0,0,0,.10);
    transition: transform .18s ease, box-shadow .18s ease;
}

@media (min-width:768px) {
    .mycard {
        padding: 1.5rem;
    }
}

.mycard:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0,0,0,.14);
}

/* Gradient overlay background (3 alternating styles) */
.mycard::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    pointer-events: none;
    opacity: .92;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 12%, white), white 55%, color-mix(in srgb, var(--accent) 12%, white));
}

.mycard:nth-child(3n+2)::before {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, white), white 55%, color-mix(in srgb, var(--brand) 12%, white));
}

.mycard:nth-child(3n)::before {
    background: linear-gradient(135deg, white, color-mix(in srgb, var(--brand) 10%, white), color-mix(in srgb, var(--accent) 10%, white));
}

/* Card content layers */
.mycard .card-z {
    position: relative;
    z-index: 1;
}

/* Top row */
.mycard-top {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
}

.mycard-icon {
    color: var(--accent);
    font-size: 1.25rem;
}

@media (min-width:768px) {
    .mycard-icon {
        font-size: 1.5rem;
    }
}

.mycard-number {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-weight: 800;
    color: var(--brand);
    letter-spacing: .06em;
    font-size: 1.05rem;
    word-break: break-word;
}

@media (min-width:768px) {
    .mycard-number {
        font-size: 1.25rem;
    }
}

/* Pills row */
.mycard-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
}

.my-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .78rem;
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
    border: 1px solid color-mix(in srgb, var(--brand) 12%, transparent);
}

@media (min-width:768px) {
    .my-pill {
        font-size: .9rem;
    }
}

.my-pill i {
    opacity: .9;
}

.my-pill-cash {
    background: color-mix(in srgb, var(--brand) 10%, white);
    color: var(--brand);
}

.my-pill-bonus {
    background: color-mix(in srgb, var(--accent) 12%, white);
    color: color-mix(in srgb, var(--brand) 70%, black);
}

/* Empty state */
.cards-empty {
    padding: 3.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    .cards-empty i {
        font-size: 3rem;
        color: color-mix(in srgb, var(--brand) 18%, transparent);
        margin-bottom: .75rem;
    }

    .cards-empty h3 {
        margin: 0 0 .25rem;
        font-weight: 800;
        color: var(--brand);
        font-size: 1.05rem;
    }

@media (min-width:768px) {
    .cards-empty h3 {
        font-size: 1.25rem;
    }
}

.cards-empty p {
    margin: 0;
    color: #64748b;
    font-size: .9rem;
}