/* =========================================================
   Sparkysme 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");
    }
}
*/
/* Default: Mobile light */
.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.jpg");
}

/* Desktop light */
@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/Desktop-Website-Background.jpg");
    }
}

/* Mobile dark */
@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/Mobile-Website-Background.jpg");
    }
}

/* Desktop dark */
@media (prefers-color-scheme: dark) and (min-width: 768px) {
    .site-bg {
        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.jpg");
    }
}

/* =========================================================
   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;
}

/* ── Hero Slider (crossfade) ── */
.hero {
    padding: 0;
    margin: 0;
}

.hero__viewport {
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    background: color-mix(in srgb, var(--brand) 8%, #f5f5f5);
}

.hero__track {
    position: relative;
    width: 100%;
}

.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .7s ease-in-out;
    z-index: 0;
}

.hero__slide:first-child {
    position: relative;
}

.hero__slide--active {
    opacity: 1;
    z-index: 1;
}

.hero__slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Arrows ── */
.hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--brand);
    font-size: .7rem;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    transition: all .22s ease;
    opacity: 0;
}

.hero__viewport:hover .hero__arrow {
    opacity: 1;
}

.hero__arrow:hover {
    background: var(--brand);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

.hero__arrow--prev { left: .6rem; }
.hero__arrow--next { right: .6rem; }

html[dir="rtl"] .hero__arrow--prev i { transform: scaleX(-1); }
html[dir="rtl"] .hero__arrow--next i { transform: scaleX(-1); }

/* ── Dots ── */
.hero__dots {
    position: absolute;
    bottom: .65rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: .35rem;
    padding: .3rem .55rem;
    border-radius: 2rem;
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hero__dot {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    cursor: pointer;
    transition: all .35s ease;
    overflow: hidden;
}

.hero__dot--active {
    width: 24px;
    border-radius: 4px;
    background: rgba(255,255,255,.3);
}

.hero__dot-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #fff;
}

.hero__dot--active .hero__dot-fill {
    animation: heroDotFill 4.5s linear forwards;
}

@keyframes heroDotFill {
    from { width: 0; }
    to   { width: 100%; }
}

.hero__dot:hover:not(.hero__dot--active) {
    background: rgba(255,255,255,.7);
    transform: scale(1.15);
}

/* ── Responsive ── */
@media (max-width: 359px) {
    .hero__arrow { width: 28px; height: 28px; font-size: .6rem; }
    .hero__dots { gap: .25rem; padding: .2rem .4rem; bottom: .4rem; }
    .hero__dot { width: 6px; height: 6px; }
    .hero__dot--active { width: 18px; }
}

@media (min-width: 520px) {
    .hero__arrow { width: 38px; height: 38px; font-size: .75rem; opacity: 1; }
    .hero__arrow--prev { left: .75rem; }
    .hero__arrow--next { right: .75rem; }
    .hero__dots { gap: .4rem; padding: .3rem .6rem; }
    .hero__dot--active { width: 26px; }
}

@media (min-width: 768px) {
    .hero__arrow { width: 42px; height: 42px; font-size: .8rem; opacity: 1; }
    .hero__arrow--prev { left: 1rem; }
    .hero__arrow--next { right: 1rem; }
    .hero__dots { bottom: .85rem; gap: .45rem; padding: .35rem .7rem; }
    .hero__dot { width: 9px; height: 9px; }
    .hero__dot--active { width: 28px; border-radius: 5px; }
}

@media (min-width: 1024px) {
    .hero__arrow { width: 46px; height: 46px; font-size: .85rem; }
    .hero__arrow--prev { left: 1.25rem; }
    .hero__arrow--next { right: 1.25rem; }
}

/* 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 Panel Overlay ── */
.account-overlay {
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity .35s ease;
}
.account-overlay.ap-visible { opacity: 1; }

/* ── Drawer Shell ── */
.account-drawer {
    background:
        linear-gradient(160deg,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.88) 100%);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    border-left: 1px solid color-mix(in srgb, var(--brand) 14%, white);
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
    box-shadow:
        -30px 0 80px color-mix(in srgb, var(--brand) 18%, transparent),
        -8px 0 24px rgba(0,0,0,.06);
    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) 14%, white);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    box-shadow:
        30px 0 80px color-mix(in srgb, var(--brand) 18%, transparent),
        8px 0 24px rgba(0,0,0,.06);
}

/* ── Drawer Divider ── */
.account-divider {
    border-color: color-mix(in srgb, var(--brand) 10%, white);
}

/* ── Header ── */
.account-header {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 160% 90% at 50% 0%, color-mix(in srgb, var(--brand) 10%, white) 0%, transparent 70%),
        rgba(255,255,255,.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid color-mix(in srgb, var(--brand) 10%, white);
}

/* Header shimmer sweep */
.account-header::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
        105deg,
        transparent 38%,
        color-mix(in srgb, var(--accent) 14%, transparent) 44%,
        transparent 50%
    );
    background-size: 300% 100%;
    animation: ap-shimmer 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ap-shimmer {
    0%,100% { background-position: 200% 0; }
    50%     { background-position: -100% 0; }
}

/* ── Avatar ── */
.account-avatar {
    border: 3px solid color-mix(in srgb, var(--accent) 50%, transparent);
    background: #fff;
    box-shadow:
        0 8px 28px color-mix(in srgb, var(--brand) 18%, transparent),
        0 0 0 6px color-mix(in srgb, var(--brand) 6%, transparent);
    transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
}
.account-avatar:hover {
    transform: scale(1.06);
    box-shadow:
        0 12px 36px color-mix(in srgb, var(--brand) 24%, transparent),
        0 0 0 8px color-mix(in srgb, var(--brand) 10%, transparent);
}

/* Avatar entrance */
.ap-avatar-enter {
    animation: ap-avatarIn .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ap-avatarIn {
    from { opacity: 0; transform: scale(.7) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── LIVE chip ── */
.account-live {
    background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 75%, var(--accent)));
    color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 35%, transparent);
    animation: ap-livePulse 2s ease-in-out infinite;
}
@keyframes ap-livePulse {
    0%,100% { box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 35%, transparent); }
    50%     { box-shadow: 0 4px 22px color-mix(in srgb, var(--brand) 55%, transparent), 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent); }
}

/* ── Title ── */
.account-title {
    color: var(--brand);
    animation: ap-titleIn .5s ease both .15s;
}
@keyframes ap-titleIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Primary button ── */
.btn-brand {
    background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 80%, black));
    color: var(--text-on-brand, #fff);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--brand) 30%, transparent);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-brand:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 90%, black), var(--brand));
    transform: translateY(-1px);
    box-shadow: 0 6px 22px color-mix(in srgb, var(--brand) 40%, transparent);
}
.btn-brand:active {
    transform: translateY(0) scale(.98);
}

/* ── Secondary outline button ── */
.btn-brand-outline {
    background: rgba(255,255,255,.92);
    color: var(--brand);
    border: 1.5px solid color-mix(in srgb, var(--brand) 22%, transparent);
    transition: all .25s ease;
}
.btn-brand-outline:hover {
    background: color-mix(in srgb, var(--brand) 7%, white);
    border-color: color-mix(in srgb, var(--brand) 35%, transparent);
    transform: translateY(-1px);
}
.btn-brand-outline:active {
    transform: translateY(0) scale(.98);
}

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

/* ── Menu Items ── */
.account-item {
    position: relative;
    overflow: hidden;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 4%, white);
    border: 1px solid color-mix(in srgb, var(--brand) 6%, transparent);
    transition: all .3s ease;
}
.account-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 60%, color-mix(in srgb, var(--accent) 10%, transparent));
    opacity: 0;
    transition: opacity .3s ease;
}
.account-item:hover {
    background: color-mix(in srgb, var(--brand) 8%, white);
    transform: translateX(-3px);
    box-shadow: 4px 0 16px color-mix(in srgb, var(--brand) 10%, transparent);
}
html[dir="rtl"] .account-item:hover {
    transform: translateX(3px);
    box-shadow: -4px 0 16px color-mix(in srgb, var(--brand) 10%, transparent);
}
.account-item:hover::before { opacity: 1; }

.account-item i {
    color: var(--brand);
    opacity: .7;
    transition: transform .3s ease, opacity .3s ease;
}
.account-item:hover i {
    opacity: 1;
    transform: scale(1.15);
}

/* Staggered entrance for items */
.ap-item-enter {
    opacity: 0;
    transform: translateX(20px);
    animation: ap-itemSlide .4s cubic-bezier(.22,1,.36,1) both;
}
html[dir="rtl"] .ap-item-enter {
    transform: translateX(-20px);
}
@keyframes ap-itemSlide {
    to { opacity: 1; transform: translateX(0); }
}

/* ── Footer ── */
.account-footer {
    background:
        linear-gradient(0deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.85) 100%);
    border-top: 1px solid color-mix(in srgb, var(--brand) 10%, white);
}

/* ── Social Icon Pill ── */
.social-pill {
    position: relative;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 6%, white);
    border: 1px solid color-mix(in srgb, var(--brand) 8%, transparent);
    transition: all .3s cubic-bezier(.34,1.56,.64,1);
}
.social-pill:hover {
    background: var(--brand);
    color: #fff;
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--brand) 35%, transparent);
}
.social-pill:active {
    transform: translateY(-1px) scale(1.02);
}

/* Individual social brand colors on hover */
.social-pill--ig:hover  { background: linear-gradient(135deg, #833ab4, #e1306c, #f77737); border-color: transparent; }
.social-pill--fb:hover  { background: #1877f2; border-color: transparent; }
.social-pill--yt:hover  { background: #ff0000; border-color: transparent; }
.social-pill--x:hover   { background: #000000; border-color: transparent; }
.social-pill--tt:hover  { background: #000000; border-color: transparent; }
.social-pill--snap:hover{ background: #fffc00; color: #000; border-color: transparent; }

/* Social entrance stagger */
.ap-social-enter {
    opacity: 0;
    transform: translateY(8px) scale(.8);
    animation: ap-socialPop .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ap-socialPop {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Floating particles inside drawer ── */
.ap-particle {
    position: absolute;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    pointer-events: none;
    animation: ap-float linear infinite;
}
@keyframes ap-float {
    0%   { transform: translateY(0) rotate(0deg);   opacity: .15; }
    50%  { transform: translateY(-30px) rotate(180deg); opacity: .35; }
    100% { transform: translateY(0) rotate(360deg); opacity: .15; }
}

/* ==========================================
   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;
}

/* (Old slider styles removed – now using .hero__* classes) */

/* 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)
   ========================================================= */

/* =========================================================
   ULTRA PREMIUM OFFER CARDS
   ========================================================= */

.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: .75rem;
    padding: 0 .5rem;
    overflow: visible;
}

@media (min-width: 520px) {
    .offers-slider {
        gap: 1rem;
    }
}

@media (min-width: 768px) {
    .offers-slider {
        gap: 1.25rem;
        padding: .75rem 1rem;
        max-width: 820px;
        margin: 0 auto;
    }
    .offers-wrap {
        margin-top: 1.5rem;
        margin-bottom: .75rem;
    }
}

@media (min-width: 1024px) {
    .offers-slider {
        gap: 1.35rem;
        padding: 1rem 1.25rem;
        max-width: 880px;
    }
}

/* ── Card ── */
.offer-card {
    position: relative;
    width: 100%;
    min-width: 0;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid color-mix(in srgb, var(--brand) 12%, rgba(255,255,255,.6));
    border-radius: 1.1rem;
    overflow: hidden;
    box-shadow:
        0 2px 8px rgba(0,0,0,.04),
        0 12px 32px rgba(0,0,0,.10);
    transition: transform .28s cubic-bezier(.22,.8,.3,1),
                box-shadow .28s cubic-bezier(.22,.8,.3,1);
}

    .offer-card:hover {
        transform: translateY(-4px) scale(1.015);
        box-shadow:
            0 4px 12px rgba(0,0,0,.06),
            0 24px 56px rgba(0,0,0,.16);
    }

/* Corner accent glow */
.offer-card__accent {
    position: absolute;
    top: -40%;
    right: -40%;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 12%, transparent) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

html[dir="rtl"] .offer-card__accent {
    right: auto;
    left: -40%;
}

/* ── Media ── */
.offer-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    z-index: 1;
}

    .offer-media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform .35s cubic-bezier(.22,.8,.3,1);
    }

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

/* ── Premium Pricing Block — row: price LEFT | old+save stacked RIGHT ── */
.offer-pricing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .15rem;
    margin-bottom: .25rem;
    line-height: 1;
}

/* Left: Current price — gradient pill */
.offer-pricing__current {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    background: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 75%, #ff6ec7) 100%);
    color: var(--text-on-brand, #fff);
    font-weight: 900;
    font-size: .92rem;
    letter-spacing: .01em;
    padding: .32rem .65rem;
    border-radius: .55rem;
    box-shadow:
        0 2px 8px rgba(132, 26, 120, .22),
        inset 0 1px 0 rgba(255,255,255,.18);
    white-space: nowrap;
    border: 1.5px solid rgba(255,255,255,.15);
    flex-shrink: 0;
}

.offer-pricing__amount {
    font-variant-numeric: tabular-nums;
}

/* SAR icon inside current price */
.sr-icon-price {
    width: .85rem;
    height: .85rem;
    flex-shrink: 0;
}

/* Right: old price on top, save pill below — stacked vertically */
.offer-pricing__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .18rem;
}

/* Was / old price — strikethrough */
.offer-pricing__was {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    color: color-mix(in srgb, var(--brand) 40%, #999);
    font-size: .75rem;
    font-weight: 600;
    text-decoration: line-through;
    text-decoration-color: rgba(200, 50, 50, .55);
    text-decoration-thickness: 1.5px;
    white-space: nowrap;
    opacity: .85;
}

.sr-icon-price-old {
    width: .65rem;
    height: .65rem;
    flex-shrink: 0;
    opacity: .7;
}

/* Save badge — green pill */
.offer-pricing__save {
    display: inline-flex;
    align-items: center;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    padding: .16rem .42rem;
    border-radius: 2rem;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(34,197,94,.3);
    line-height: 1.1;
}

/* ── Pricing responsive ── */
@media (max-width: 359px) {
    .offer-pricing {
        gap: .35rem;
    }

    .offer-pricing__current {
        font-size: .8rem;
        padding: .26rem .5rem;
    }

    .offer-pricing__was {
        font-size: .66rem;
    }

    .offer-pricing__save {
        font-size: .52rem;
        padding: .12rem .3rem;
    }

    .offer-pricing__meta {
        gap: .12rem;
    }
}

@media (min-width: 520px) {
    .offer-pricing__current {
        font-size: .95rem;
        padding: .34rem .72rem;
        border-radius: .6rem;
    }

    .offer-pricing__was {
        font-size: .78rem;
    }

    .offer-pricing__save {
        font-size: .62rem;
    }

    .sr-icon-price {
        width: .9rem;
        height: .9rem;
    }

    .offer-pricing__meta {
        gap: .2rem;
    }
}

@media (min-width: 768px) {
    .offer-pricing__current {
        font-size: 1rem;
        padding: .35rem .8rem;
        gap: .26rem;
    }

    .offer-pricing__was {
        font-size: .82rem;
    }

    .offer-pricing__save {
        font-size: .68rem;
        padding: .18rem .48rem;
    }

    .sr-icon-price {
        width: 1rem;
        height: 1rem;
    }

    .sr-icon-price-old {
        width: .72rem;
        height: .72rem;
    }

    .offer-pricing__meta {
        gap: .25rem;
    }
}

/* ── Body ── */
.offer-body {
    position: relative;
    z-index: 1;
    padding: .75rem .75rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

@media (min-width: 520px) {
    .offer-body {
        padding: .85rem .85rem .95rem;
        gap: .4rem;
    }
}

@media (min-width: 768px) {
    .offer-body {
        padding: .9rem 1rem 1.05rem;
        gap: .45rem;
    }
}

.offer-title {
    font-weight: 900;
    color: var(--brand);
    margin: 0;
    font-size: .85rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

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

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

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

/* ── Buy Button: Full-width, prominent ── */
.btn-offer-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    height: 38px;
    margin-top: .25rem;
    padding: 0 1rem;
    border: none;
    border-radius: .65rem;
    font-weight: 800;
    font-size: .8rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 80%, var(--accent)) 100%);
    color: var(--text-on-brand);
    box-shadow:
        0 2px 6px rgba(0,0,0,.08),
        0 8px 20px color-mix(in srgb, var(--brand) 25%, transparent);
    transition: transform .18s cubic-bezier(.22,.8,.3,1),
                box-shadow .18s cubic-bezier(.22,.8,.3,1),
                filter .18s ease;
}

    .btn-offer-buy:hover {
        transform: translateY(-1px);
        box-shadow:
            0 4px 10px rgba(0,0,0,.10),
            0 14px 32px color-mix(in srgb, var(--brand) 30%, transparent);
        filter: brightness(1.06);
    }

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

    .btn-offer-buy:focus-visible {
        outline: none;
        box-shadow:
            0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent),
            0 8px 20px color-mix(in srgb, var(--brand) 25%, transparent);
    }

.btn-offer-buy__arrow {
    font-size: .7rem;
    opacity: .7;
    transition: transform .2s ease, opacity .2s ease;
}

html[dir="rtl"] .btn-offer-buy__arrow {
    transform: scaleX(-1);
}

.offer-card:hover .btn-offer-buy__arrow {
    transform: translateX(3px);
    opacity: 1;
}

html[dir="rtl"] .offer-card:hover .btn-offer-buy__arrow {
    transform: scaleX(-1) translateX(3px);
}

@media (min-width: 520px) {
    .btn-offer-buy {
        height: 40px;
        font-size: .82rem;
        border-radius: .7rem;
    }
}

@media (min-width: 768px) {
    .btn-offer-buy {
        height: 42px;
        font-size: .86rem;
        border-radius: .7rem;
    }
}

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

/* =========================================================
   Sold Out Card State
   ========================================================= */

/* Greyed-out card */
.offer-card--soldout {
    pointer-events: none;
}

.offer-card--soldout .offer-media img {
    filter: grayscale(.85) brightness(.8);
}

.offer-card--soldout .offer-body {
    opacity: .55;
}

.offer-card--soldout .btn-offer-notify,
.offer-card--soldout .btn-offer-notify--done {
    pointer-events: auto;
    opacity: 1;
}

/* ── Sold Out Stamp (positioned on image area) ── */
.offer-media {
    position: relative;
}

.soldout-stamp {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-18deg);
    z-index: 10;
    padding: .6rem 1.6rem;
    border: 4.5px solid #dc2626;
    border-radius: .6rem;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 4px 20px rgba(220, 38, 38, .25);
}

.soldout-stamp span {
    display: block;
    font-weight: 900;
    font-size: 1.2rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #dc2626;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(220, 38, 38, .15);
}

@media (max-width: 359px) {
    .soldout-stamp {
        padding: .5rem 1rem;
    }
    .soldout-stamp span {
        font-size: .95rem;
    }
}

@media (min-width: 520px) {
    .soldout-stamp {
        padding: .7rem 1.8rem;
        border-width: 4px;
    }
    .soldout-stamp span {
        font-size: 1.35rem;
    }
}

@media (min-width: 768px) {
    .soldout-stamp {
        padding: .7rem 1.8rem;
        border-width: 4.5px;
    }
    .soldout-stamp span {
        font-size: 1.4rem;
        letter-spacing: .15em;
    }
}

/* ── Upcoming / Flash-sale card – GLOWING ── */
.offer-card--upcoming {
    border: 1.5px solid rgba(245,158,11,.3);
    animation: upcomingGlow 1.8s ease-in-out infinite alternate;
    box-shadow:
        0 0 15px rgba(245, 158, 11, .2),
        0 0 40px rgba(168, 85, 247, .12),
        0 4px 24px rgba(0,0,0,.12);
}

@keyframes upcomingGlow {
    0%   { box-shadow: 0 0 12px rgba(245,158,11,.15), 0 0 30px rgba(168,85,247,.08), 0 4px 20px rgba(0,0,0,.10); }
    25%  { box-shadow: 0 0 28px rgba(245,158,11,.4), 0 0 55px rgba(168,85,247,.22), 0 4px 30px rgba(0,0,0,.14); }
    50%  { box-shadow: 0 0 35px rgba(239,68,68,.35), 0 0 65px rgba(245,158,11,.25), 0 4px 35px rgba(0,0,0,.16); }
    75%  { box-shadow: 0 0 22px rgba(168,85,247,.3), 0 0 50px rgba(239,68,68,.2), 0 4px 28px rgba(0,0,0,.13); }
    100% { box-shadow: 0 0 12px rgba(245,158,11,.15), 0 0 30px rgba(168,85,247,.08), 0 4px 20px rgba(0,0,0,.10); }
}

.offer-card--upcoming .offer-media img {
    filter: brightness(.92) saturate(.95);
}

/* ── Countdown Timer (ultra premium – in button area) ── */
.flash-countdown-bar {
    position: relative;
    width: 100%;
    border-radius: .75rem;
    overflow: hidden;
    padding: .5rem .55rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff;
    box-shadow: 0 2px 16px rgba(124,58,237,.35);
    animation: timerZoom 2s ease-in-out infinite;
}

@keyframes timerZoom {
    0%   { transform: scale(1);    box-shadow: 0 2px 16px rgba(124,58,237,.35); }
    50%  { transform: scale(1.045); box-shadow: 0 4px 24px rgba(124,58,237,.5); }
    100% { transform: scale(1);    box-shadow: 0 2px 16px rgba(124,58,237,.35); }
}

/* Top row: icon + label */
.flash-countdown-bar__top {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.flash-countdown-bar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    flex-shrink: 0;
    font-size: .55rem;
    animation: flashPulse 1.2s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(245, 158, 11, .4);
}

.flash-countdown-bar__label {
    font-size: .6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .9;
    white-space: nowrap;
}

/* Bottom row: timer units */
.flash-countdown-bar__units {
    display: flex;
    gap: .3rem;
    align-items: center;
}

.flash-countdown-bar__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 32px;
}

.flash-countdown-bar__num {
    font-size: .95rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    background: rgba(109,40,217,.15);
    border: 1px solid rgba(109,40,217,.18);
    border-radius: .3rem;
    padding: .25rem .4rem;
    text-shadow: none;
    min-width: 28px;
    text-align: center;
}

.flash-countdown-bar__lbl {
    font-size: .45rem;
    font-weight: 600;
    text-transform: uppercase;
    opacity: .65;
    margin-top: 2px;
    letter-spacing: .04em;
}

.flash-countdown-bar__sep {
    font-size: .8rem;
    font-weight: 900;
    opacity: .4;
    align-self: flex-start;
    margin-top: 2px;
}

@keyframes flashPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .7; transform: scale(1.12); }
}

/* ── Mobile: tighten timer so it doesn't clip left/right ── */
@media (max-width: 519px) {
    .flash-countdown-bar { padding: .4rem .3rem; gap: .2rem; }
    .flash-countdown-bar__units { gap: .15rem; }
    .flash-countdown-bar__unit { min-width: 24px; }
    .flash-countdown-bar__num { font-size: .8rem; padding: .2rem .25rem; min-width: 22px; }
    .flash-countdown-bar__sep { font-size: .7rem; }
    .flash-countdown-bar__lbl { font-size: .4rem; }
}

@media (min-width: 520px) {
    .flash-countdown-bar {
        flex-direction: row;
        padding: .55rem .7rem;
        gap: .5rem;
    }
    .flash-countdown-bar__top { gap: .4rem; }
    .flash-countdown-bar__units { margin-left: auto; }
    .flash-countdown-bar__num { font-size: .95rem; }
    .flash-countdown-bar__icon { width: 24px; height: 24px; font-size: .65rem; }
    .flash-countdown-bar__label { font-size: .65rem; }
}

@media (min-width: 768px) {
    .flash-countdown-bar {
        padding: .55rem .8rem;
    }
    .flash-countdown-bar__num { font-size: 1rem; padding: .22rem .42rem; }
    .flash-countdown-bar__unit { min-width: 34px; }
    .flash-countdown-bar__label { font-size: .65rem; }
    .flash-countdown-bar__icon { width: 26px; height: 26px; font-size: .65rem; }
}

/* ── Remaining Stock Badge (ultra premium) ── */
.stock-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .55rem;
    border-radius: 2rem;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .03em;
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgba(0,0,0,.2);
    animation: stockBadgePulse 2s ease-in-out infinite;
}

html[dir="rtl"] .stock-badge {
    right: auto;
    left: 8px;
}

/* Green: plenty of stock (> 20) — color-shifting flash */
.stock-badge--plenty {
    border: 1px solid rgba(255,255,255,.25);
    animation: stockFlashPlenty 3s ease-in-out infinite;
}

@keyframes stockFlashPlenty {
    0%   { background: linear-gradient(135deg, rgba(22,163,74,.92), rgba(16,185,129,.92)); }
    33%  { background: linear-gradient(135deg, rgba(16,185,129,.92), rgba(5,150,105,.92)); }
    66%  { background: linear-gradient(135deg, rgba(4,120,87,.92), rgba(22,163,74,.92)); }
    100% { background: linear-gradient(135deg, rgba(22,163,74,.92), rgba(16,185,129,.92)); }
}

/* Amber: low stock (6-20) — color-shifting flash */
.stock-badge--low {
    border: 1px solid rgba(255,255,255,.3);
    animation: stockFlashLow 2s ease-in-out infinite;
}

@keyframes stockFlashLow {
    0%   { background: linear-gradient(135deg, rgba(217,119,6,.95), rgba(245,158,11,.95)); box-shadow: 0 2px 12px rgba(245,158,11,.3); }
    50%  { background: linear-gradient(135deg, rgba(234,88,12,.95), rgba(251,191,36,.95)); box-shadow: 0 2px 18px rgba(245,158,11,.5); }
    100% { background: linear-gradient(135deg, rgba(217,119,6,.95), rgba(245,158,11,.95)); box-shadow: 0 2px 12px rgba(245,158,11,.3); }
}

/* Red: urgent / last few (1-5) — intense color flash */
.stock-badge--urgent {
    border: 1px solid rgba(255,255,255,.3);
    animation: stockFlashUrgent 1.2s ease-in-out infinite;
}

@keyframes stockFlashUrgent {
    0%   { background: linear-gradient(135deg, rgba(220,38,38,.95), rgba(239,68,68,.95)); box-shadow: 0 0 8px rgba(239,68,68,.4); transform: scale(1); }
    25%  { background: linear-gradient(135deg, rgba(185,28,28,.95), rgba(220,38,38,.95)); box-shadow: 0 0 16px rgba(239,68,68,.6); transform: scale(1.04); }
    50%  { background: linear-gradient(135deg, rgba(239,68,68,.95), rgba(248,113,113,.95)); box-shadow: 0 0 22px rgba(239,68,68,.7); transform: scale(1.07); }
    75%  { background: linear-gradient(135deg, rgba(220,38,38,.95), rgba(185,28,28,.95)); box-shadow: 0 0 14px rgba(239,68,68,.5); transform: scale(1.03); }
    100% { background: linear-gradient(135deg, rgba(220,38,38,.95), rgba(239,68,68,.95)); box-shadow: 0 0 8px rgba(239,68,68,.4); transform: scale(1); }
}

.stock-badge__icon {
    font-size: .6rem;
}

.stock-badge__text {
    white-space: nowrap;
    line-height: 1;
}

@media (min-width: 520px) {
    .stock-badge {
        font-size: .68rem;
        padding: .3rem .6rem;
        gap: .35rem;
        top: 10px;
        right: 10px;
    }
    html[dir="rtl"] .stock-badge { right: auto; left: 10px; }
}

@media (min-width: 768px) {
    .stock-badge {
        font-size: .68rem;
        padding: .32rem .65rem;
        top: 10px;
        right: 10px;
    }
    html[dir="rtl"] .stock-badge { right: auto; left: 10px; }
}

/* ── Notify Me Button ── */
.btn-offer-notify {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    height: 38px;
    margin-top: .25rem;
    padding: 0 1rem;
    border: 2px solid var(--brand);
    border-radius: .65rem;
    font-weight: 800;
    font-size: .8rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: rgba(255,255,255,.92);
    color: var(--brand);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn-offer-notify i {
    font-size: .75rem;
    animation: notifyBell 1.8s ease-in-out infinite;
}

.btn-offer-notify:hover {
    background: var(--brand);
    color: var(--text-on-brand);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 30%, transparent);
}

.btn-offer-notify:hover i {
    color: var(--text-on-brand);
}

/* After clicked state */
.btn-offer-notify--done {
    background: color-mix(in srgb, var(--brand) 8%, white);
    border-color: color-mix(in srgb, var(--brand) 25%, white);
    color: color-mix(in srgb, var(--brand) 65%, #666);
    cursor: default;
}

.btn-offer-notify--done i {
    animation: none;
    color: #22c55e;
}

@keyframes notifyBell {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(14deg); }
    30% { transform: rotate(-12deg); }
    45% { transform: rotate(8deg); }
    60% { transform: rotate(-4deg); }
    75% { transform: rotate(0); }
}

@media (min-width: 520px) {
    .btn-offer-notify {
        height: 40px;
        font-size: .82rem;
        border-radius: .7rem;
    }
}

@media (min-width: 768px) {
    .btn-offer-notify {
        height: 42px;
        font-size: .86rem;
        border-radius: .7rem;
    }
}

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

    /* 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 */
    .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 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,.22) 28%, transparent 55%);
    transform: translateX(-130%);
    transition: transform .6s cubic-bezier(.22,.8,.3,1), opacity .25s ease;
    border-radius: 1.1rem;
    opacity: 0;
    z-index: 2;
}

.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");*/
    background-color : white;
}

.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 styles moved to card-list.css */