/* Blade-specific styles for vanilla JS cart drawer, toast, and spinner.
   These elements are NOT in the SPA (which uses React components), so they need
   their own styling. All shared elements (body, headers, cards, etc.) rely solely
   on Tailwind CSS to match the SPA exactly. */

/* Cart drawer (slide-in from right for RTL) */
#cart-drawer {
    transition: transform .3s ease-out;
    transform: translateX(-100%);
}
#cart-drawer.open {
    transform: translateX(0);
}

/* Cart backdrop */
#cart-backdrop {
    transition: opacity .3s;
    opacity: 0;
    pointer-events: none;
}
#cart-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

/* Loading spinner */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: #FF6600;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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


/* === Custom classes for rebuilt pages (FAQ, About, etc.) === */

/* FAQ chevron rotation when details is open */
details.faq-item[open] .faq-chevron {
    transform: rotate(180deg);
}
.faq-chevron {
    transition: transform 0.2s ease;
}

/* Custom list styles (since list-disc/list-inside aren't in compiled Tailwind) */
.custom-list-disc {
    list-style-type: disc;
    padding-right: 1.5rem;
}
.custom-list-disc > li {
    margin-bottom: 0.25rem;
}
.custom-list-inside {
    list-style-position: inside;
}

/* === Missing Tailwind utility classes used in Blade views ===
   The Next.js-compiled Tailwind CSS only includes classes that appear in the
   React/SPA source code. Blade-only classes (e.g. lg:col-span-3/5) are missing
   and must be added here so that server-rendered pages (products, cart, etc.)
   render correctly. */

/* Grid column spans (responsive: lg breakpoint = 1024px+) */
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-7 { grid-column: span 7 / span 7; }
.col-span-8 { grid-column: span 8 / span 8; }
.col-span-9 { grid-column: span 9 / span 9; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-11 { grid-column: span 11 / span 11; }
.col-span-12 { grid-column: span 12 / span 12; }

@media (min-width: 1024px) {
    .lg\:col-span-1 { grid-column: span 1 / span 1; }
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
    .lg\:col-span-3 { grid-column: span 3 / span 3; }
    .lg\:col-span-4 { grid-column: span 4 / span 4; }
    .lg\:col-span-5 { grid-column: span 5 / span 5; }
    .lg\:col-span-6 { grid-column: span 6 / span 6; }
    .lg\:col-span-7 { grid-column: span 7 / span 7; }
    .lg\:col-span-8 { grid-column: span 8 / span 8; }
    .lg\:col-span-9 { grid-column: span 9 / span 9; }
    .lg\:col-span-10 { grid-column: span 10 / span 10; }
    .lg\:col-span-11 { grid-column: span 11 / span 11; }
    .lg\:col-span-12 { grid-column: span 12 / span 12; }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lg\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .lg\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .lg\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .lg\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .lg\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
}

/* Row spans (rarely used but safe to include) */
.row-span-2 { grid-row: span 2 / span 2; }
.row-span-3 { grid-row: span 3 / span 3; }
@media (min-width: 1024px) {
    .lg\:row-span-2 { grid-row: span 2 / span 2; }
    .lg\:row-span-3 { grid-row: span 3 / span 3; }
}

/* Order utilities (some are missing from compiled CSS) */
.order-10 { order: 10; }
.order-11 { order: 11; }
.order-12 { order: 12; }
@media (min-width: 1024px) {
    .lg\:order-4 { order: 4; }
    .lg\:order-11 { order: 11; }
    .lg\:order-12 { order: 12; }
}


/* ===== Product page lightbox (zoom) — smaller image ===== */
.lightbox-img-sm {
    max-width: 60%;
    max-height: 80%;
    border-radius: 0.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9);
    object-fit: contain;
}
@media (max-width: 768px) {
    .lightbox-img-sm {
        max-width: 92%;
        max-height: 75%;
    }
}

/* ===== Lightbox thumbnail strip ===== */
.lightbox-thumbs {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(26, 26, 26, 0.85);
    border: 1px solid #2a2a2a;
    border-radius: 0.75rem;
max-width: 80%;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #FF6600 #1a1a1a;
}
.lightbox-thumbs::-webkit-scrollbar { height: 6px; }
.lightbox-thumbs::-webkit-scrollbar-track { background: transparent; }
.lightbox-thumbs::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }

.lightbox-thumb {
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px solid #333;
    background: #161616;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    opacity: 0.6;
}
.lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lightbox-thumb:hover {
    border-color: #FF6600;
    opacity: 1;
    transform: translateY(-2px);
}
.lightbox-thumb.active {
    border-color: #FF6600;
    opacity: 1;
    box-shadow: 0 0 0 1px rgba(255, 102, 0, 0.4), 0 6px 16px -4px rgba(255, 102, 0, 0.45);
    transform: translateY(-2px);
}

/* On small screens, shrink thumbs */
@media (max-width: 768px) {
    .lightbox-thumbs {
        bottom: 0.75rem;
        max-width: 92%;
        padding: 0.4rem 0.5rem;
        gap: 0.35rem;
    }
    .lightbox-thumb {
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* ===== Track-order page (پیگیری سفارش) — RTL polish ===== */

/* Input wrapper: the search input needs guaranteed right padding for the
   leading magnifier icon. Tailwind's pr-10 is purged from the compiled CSS,
   so we enforce it here. Left padding is small — there's no chip inside
   the input anymore (the hint was moved below the form). */
.track-input {
    padding-right: 2.75rem  !important;  /* 44px — room for magnifier icon */
    padding-left: 1rem      !important;  /* 16px default */
}

/* Input placeholder: render Persian text properly with RTL direction */
.track-input::placeholder {
    color: #777;
    opacity: 1;
    text-align: right;       /* RTL natural alignment */
    direction: rtl;
    font-size: 0.875rem;
    letter-spacing: 0;
}
/* Hide IE/Edge default placeholder styles */
.track-input:-ms-input-placeholder { text-align: right; direction: rtl; }

/* Remove default disclosure triangle on <summary> */
.track-summary { list-style: none; }
.track-summary::-webkit-details-marker { display: none; }
.track-summary::marker { display: none; content: ''; }

/* When user types an LTR order number into the RTL input,
   bidi-isolate it so it renders correctly without flipping
   the surrounding RTL context. */
.track-input:focus { text-align: right; }

/* ===== Missing Tailwind padding utilities (purged from compiled CSS) =====
   The Next.js-compiled Tailwind only emits classes used in the React source.
   Many Blade-only padding utilities are missing. Add the most common ones
   here so server-rendered pages render correctly. */

/* padding-right (pr-N) */
.pr-1  { padding-right: 0.25rem; }
.pr-2  { padding-right: 0.5rem;  }
.pr-3  { padding-right: 0.75rem; }
.pr-4  { padding-right: 1rem;    }
.pr-5  { padding-right: 1.25rem; }
.pr-6  { padding-right: 1.5rem;  }
.pr-7  { padding-right: 1.75rem; }
.pr-8  { padding-right: 2rem;    }
.pr-9  { padding-right: 2.25rem; }
.pr-10 { padding-right: 2.5rem;  }
.pr-11 { padding-right: 2.75rem; }
.pr-12 { padding-right: 3rem;    }
.pr-14 { padding-right: 3.5rem;  }
.pr-16 { padding-right: 4rem;    }

/* padding-left (pl-N) */
.pl-1  { padding-left: 0.25rem; }
.pl-2  { padding-left: 0.5rem;  }
.pl-3  { padding-left: 0.75rem; }
.pl-4  { padding-left: 1rem;    }
.pl-5  { padding-left: 1.25rem; }
.pl-6  { padding-left: 1.5rem;  }
.pl-7  { padding-left: 1.75rem; }
.pl-8  { padding-left: 2rem;    }
.pl-9  { padding-left: 2.25rem; }
.pl-10 { padding-left: 2.5rem;  }
.pl-11 { padding-left: 2.75rem; }
.pl-12 { padding-left: 3rem;    }
.pl-14 { padding-left: 3.5rem;  }
.pl-16 { padding-left: 4rem;    }

/* padding-top (pt-N) */
.pt-1  { padding-top: 0.25rem; }
.pt-2  { padding-top: 0.5rem;  }
.pt-3  { padding-top: 0.75rem; }
.pt-4  { padding-top: 1rem;    }
.pt-5  { padding-top: 1.25rem; }
.pt-6  { padding-top: 1.5rem;  }
.pt-7  { padding-top: 1.75rem; }
.pt-8  { padding-top: 2rem;    }
.pt-10 { padding-top: 2.5rem;  }
.pt-12 { padding-top: 3rem;    }
.pt-14 { padding-top: 3.5rem;  }
.pt-16 { padding-top: 4rem;    }

/* padding-bottom (pb-N) */
.pb-1  { padding-bottom: 0.25rem; }
.pb-2  { padding-bottom: 0.5rem;  }
.pb-3  { padding-bottom: 0.75rem; }
.pb-4  { padding-bottom: 1rem;    }
.pb-5  { padding-bottom: 1.25rem; }
.pb-6  { padding-bottom: 1.5rem;  }
.pb-8  { padding-bottom: 2rem;    }
.pb-10 { padding-bottom: 2.5rem;  }
.pb-12 { padding-bottom: 3rem;    }
.pb-14 { padding-bottom: 3.5rem;  }
.pb-16 { padding-bottom: 4rem;    }

/* padding-y (py-N) */
.py-1  { padding-top: 0.25rem;    padding-bottom: 0.25rem;    }
.py-2  { padding-top: 0.5rem;     padding-bottom: 0.5rem;     }
.py-3  { padding-top: 0.75rem;    padding-bottom: 0.75rem;    }
.py-4  { padding-top: 1rem;       padding-bottom: 1rem;       }
.py-5  { padding-top: 1.25rem;    padding-bottom: 1.25rem;    }
.py-6  { padding-top: 1.5rem;     padding-bottom: 1.5rem;     }
.py-8  { padding-top: 2rem;       padding-bottom: 2rem;       }
.py-10 { padding-top: 2.5rem;     padding-bottom: 2.5rem;     }
.py-12 { padding-top: 3rem;       padding-bottom: 3rem;       }
.py-14 { padding-top: 3.5rem;     padding-bottom: 3.5rem;     }
.py-16 { padding-top: 4rem;       padding-bottom: 4rem;       }
.py-20 { padding-top: 5rem;       padding-bottom: 5rem;       }

/* padding-x (px-N) */
.px-1  { padding-left: 0.25rem;   padding-right: 0.25rem;   }
.px-2  { padding-left: 0.5rem;    padding-right: 0.5rem;    }
.px-3  { padding-left: 0.75rem;   padding-right: 0.75rem;   }
.px-4  { padding-left: 1rem;      padding-right: 1rem;      }
.px-5  { padding-left: 1.25rem;   padding-right: 1.25rem;   }
.px-6  { padding-left: 1.5rem;    padding-right: 1.5rem;    }
.px-8  { padding-left: 2rem;      padding-right: 2rem;      }
.px-10 { padding-left: 2.5rem;    padding-right: 2.5rem;    }
.px-12 { padding-left: 3rem;      padding-right: 3rem;      }


/* ===== Wishlist page ===== */
#wishlist-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
@media (min-width: 640px) { #wishlist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { #wishlist-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { #wishlist-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.wishlist-card button[data-action="remove"] {
    opacity: 0.85;
    transition: opacity .2s, background-color .2s, transform .2s;
}
.wishlist-card:hover button[data-action="remove"] { opacity: 1; }

/* ===== Account page ===== */

/* Auth tabs (login/register) */
.auth-tab-btn {
    color: #888;
    background: transparent;
    border: 1px solid transparent;
}
.auth-tab-btn:hover { color: #ccc; }
.auth-tab-btn.active {
    color: #ffffff;
    background: #FF6600;
}

/* ========================================================
   CREATIVE ACCOUNT PAGE — STYLES (v2)
   /store.maniasanat.ir/frontend/css/blade-extras.css
   (append-only additions — keep existing rules above)
   ======================================================== */

/* ---------- Decorative orbs in hero ---------- */
@keyframes acct-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -20px) scale(1.08); }
}

/* Subtle grid background */

/* ---------- Avatar with rotating tier ring ---------- */
@keyframes acct-spin {
    to { transform: rotate(360deg); }
}
@keyframes acct-spin-reverse {
    to { transform: rotate(-360deg); }
}

/* ---------- Loyalty mini-card ---------- */

/* ---------- Stat tiles ---------- */


/* ---------- Quick action cards ---------- */

/* ---------- Sidebar ---------- */
/* On md+ viewports, sidebar becomes sticky and acts as a true sidebar */
/* NOTE: empty @media blocks removed — they were unclosed and caused
   .cart-count-badge (and other rules) to be wrapped inside @media (min-width: 768px),
   which broke the cart badge on mobile. */

/* Sidebar nav layout — horizontal scrollable on mobile, vertical on md+ */
@media (max-width: 767px) {
    /* Hide the divider on mobile (2-col grid) */
}

/* ---------- Sidebar nav buttons (richer design) ---------- */

/* ---------- Tab panels ---------- */

/* ---------- Form fields ---------- */

/* ---------- Primary button ---------- */

/* ---------- Guest: brand showcase card ---------- */

/* ---------- Guest: mini stats ---------- */

/* ---------- Guest: auth tab switcher with sliding indicator ---------- */

/* ---------- Guest: auth panel ---------- */

/* ---------- Social login buttons ---------- */

/* ---------- Order list item animation ---------- */
#orders-list > a {
    animation: acct-fade-in 0.3s ease-out;
    animation-fill-mode: both;
}
#orders-list > a:nth-child(1) { animation-delay: 0.02s; }
#orders-list > a:nth-child(2) { animation-delay: 0.06s; }
#orders-list > a:nth-child(3) { animation-delay: 0.10s; }
#orders-list > a:nth-child(4) { animation-delay: 0.14s; }
#orders-list > a:nth-child(5) { animation-delay: 0.18s; }
#orders-list > a:nth-child(6) { animation-delay: 0.22s; }
@keyframes acct-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========================================================
   COMPACT HEADER SUMMARY (v2.1)
   4 stat chips + 4 action chips in the account hero header
   ======================================================== */


/* --- Stat chips row --- */
@media (max-width: 640px) {
}

/* --- Individual stat chip --- */


/* Color variants */
/* --- Divider between stats and actions --- */

/* --- Action chips row --- */
@media (max-width: 640px) {
}

/* --- Individual action chip --- */

/* Action color variants */
/* --- On very small screens (<=400px), make chips more compact --- */
@media (max-width: 400px) {
}

/* ========================================================
   HEADER CART BADGE FIX — icon wrapper + count badge
   (Tailwind's -top-1/-right-1 utilities were purged from
   the Next.js build, so we provide explicit CSS here.)
   ======================================================== */

/* Wrapper around the cart SVG icon — gives the badge a stable
   positioning context that doesn't depend on the link's padding. */
.cart-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.cart-icon-wrap-lg {
    /* Mobile variant uses a 20px icon, give a slightly larger box */
    padding: 0;
}

/* The orange count badge itself.
   Positioned at the top-LEFT corner of the icon (in RTL Persian
   sites the visual "front" of the cart icon is its left side,
   so the badge sits there — this is also the Digikala convention). */
.cart-count-badge {
    position: absolute;
    top: -7px;
    left: -7px;
    background: #FF6600;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9999px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: none;          /* JS flips to flex when count > 0 */
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 2px #1a1a1a;  /* ring so badge stands off the icon */
    z-index: 2;
    white-space: nowrap;
    letter-spacing: -0.02em;
}

/* When JS sets display:flex (cart has items) the badge becomes visible.
   We don't override display here — the inline style wins. But make sure
   that when visible, the badge uses flex centering. */
.cart-count-badge[style*="display: flex"],
.cart-count-badge[style*="display:flex"] {
    display: flex !important;
}

/* Also add the missing negative-position utilities globally so any
   other element in the layout that uses -top-1 / -right-1 also works. */
.-top-1 { top: -0.25rem !important; }
.-right-1 { right: -0.25rem !important; }
.-left-1 { left: -0.25rem !important; }
.-bottom-1 { bottom: -0.25rem !important; }
.-top-2 { top: -0.5rem !important; }
.-right-2 { right: -0.5rem !important; }
.-left-2 { left: -0.5rem !important; }

/* ========================================================
   ACCOUNT v3: New components (addresses, reviews, notifications, settings, reorder)
   ======================================================== */

/* Ghost button (secondary action) */

/* Toggle switch (iOS-style) */

/* Toggle row (label + description + toggle) */

/* Notification dot (small red/orange dot in sidebar) */
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 102, 0, 0.6); }
    50% { box-shadow: 0 0 0 5px rgba(255, 102, 0, 0); }
}

/* Address card hover effect */
#addr-list > div {
    transition: all 0.2s;
}
#addr-list > div:hover {
    transform: translateY(-1px);
}

/* Reviews star row */
#reviews-list .flex.items-center.gap-1\.5 svg {
    transition: transform 0.15s;
}
#reviews-list .flex.items-center.gap-1\.5:hover svg {
    transform: scale(1.1);
}

/* Notification item hover */
#notif-list > div {
    transition: all 0.15s;
}
#notif-list > div:hover {
    transform: translateX(-2px);
    border-color: #FF6600;
}

/* Settings section header */
#tab-settings h3 {
    margin-bottom: 0.75rem;
}

/* Mobile adjustments for new tabs */
@media (max-width: 767px) {
    /* Make new tab panels full width on mobile */
    #addr-form-wrap form {
        gap: 0.5rem !important;
    }
    /* Smaller reorder button on mobile */
    #orders-list button[onclick*="__reorder"] {
        padding: 0.2rem 0.4rem;
    }
}

/* Sidebar nav: keep scrollable if too many items */
@media (min-width: 768px) {
}

/* ===== Mobile footer accordion ===== */
/* Hide default <details> marker in Safari/Chrome */
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }
/* Smooth open/close animation */
details > *:not(summary) {
    animation: footer-fade-in 0.25s ease-out;
}
@keyframes footer-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Make summary tap target comfortable on mobile */
@media (max-width: 1023px) {
    details > summary {
        min-height: 44px;
        -webkit-tap-highlight-color: transparent;
    }
}

/* ===== Login / Register Modal ===== */
.login-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.login-modal-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.login-modal-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #0d0d0d;
    border: 1px solid #1f1f1f;
    border-radius: 20px;
    box-shadow: 0 25px 60px -10px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,102,0,0.08);
    padding: 28px 24px 20px;
    transform: translateY(20px) scale(0.96);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.login-modal-backdrop.open .login-modal-card {
    transform: translateY(0) scale(1);
}
@media (max-width: 480px) {
    .login-modal-card {
        padding: 22px 18px 16px;
        border-radius: 16px;
    }
    .login-modal-backdrop {
        padding: 0;
        align-items: flex-end;
    }
    .login-modal-card {
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
    }
    .login-modal-backdrop.open .login-modal-card {
        transform: translateY(0);
    }
}

.login-modal-close {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #888;
    transition: all 0.2s;
    cursor: pointer;
    z-index: 2;
}
.login-modal-close:hover {
    background: #252525;
    color: #fff;
    border-color: #333;
}

.login-modal-head {
    text-align: center;
    margin-bottom: 22px;
    padding-top: 4px;
}
.login-modal-logo {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #2a2a2a;
    background: #1a1a1a;
}
.login-modal-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.login-modal-title {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 6px;
}
.login-modal-subtitle {
    color: #888;
    font-size: 11px;
    line-height: 1.6;
    margin: 0;
    padding: 0 8px;
}

.login-modal-tabs {
    position: relative;
    display: flex;
    background: #141414;
    border: 1px solid #1f1f1f;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 20px;
    overflow: hidden;
}
.login-modal-tab {
    position: relative;
    z-index: 2;
    flex: 1;
    padding: 10px 12px;
    background: transparent;
    border: none;
    color: #888;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.2s;
    font-family: inherit;
}
.login-modal-tab.active {
    color: #fff;
}
.login-modal-tab:not(.active):hover {
    color: #ccc;
}
.login-modal-tab-slider {
    position: absolute;
    z-index: 1;
    top: 4px;
    bottom: 4px;
    right: 4px;
    width: calc(50% - 6px);
    background: linear-gradient(135deg, #FF6600, #e55b00);
    border-radius: 8px;
    box-shadow: 0 4px 12px -2px rgba(255, 102, 0, 0.4);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateX(0%);
}
.login-modal-tab-slider:has(~ .login-modal-tab.active ~ *) {
    /* fallback handled by JS inline style */
}

.login-modal-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.login-modal-form.hidden {
    display: none;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.login-field-label {
    color: #ccc;
    font-size: 11px;
    font-weight: 600;
    padding-right: 2px;
}
.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.login-input-icon {
    position: absolute;
    right: 12px;
    color: #666;
    pointer-events: none;
    flex-shrink: 0;
}
.login-input {
    width: 100%;
    background: #141414;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
    padding: 11px 38px 11px 12px;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    font-family: inherit;
}
.login-input::placeholder {
    color: #555;
}
.login-input:focus {
    border-color: #FF6600;
    background: #1a1a1a;
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.12);
}
.login-input-pwd {
    padding-left: 40px;
}
.login-pwd-toggle {
    position: absolute;
    left: 8px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}
.login-pwd-toggle:hover {
    color: #FF6600;
    background: rgba(255, 102, 0, 0.08);
}
.login-pwd-toggle.active {
    color: #FF6600;
}

.login-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 11px;
}
.login-remember {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #888;
    cursor: pointer;
    user-select: none;
}
.login-forgot {
    color: #FF6600;
    text-decoration: none;
    white-space: nowrap;
}
.login-forgot:hover {
    text-decoration: underline;
}

.login-terms {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #888;
    font-size: 11px;
    line-height: 1.6;
    cursor: pointer;
    user-select: none;
}
.login-terms input {
    margin-top: 2px;
    flex-shrink: 0;
}

.login-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    font-size: 11px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    display: none;
    line-height: 1.6;
}
.login-error.show {
    display: block;
}

.login-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #FF6600, #e55b00);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 6px 16px -4px rgba(255, 102, 0, 0.5);
    font-family: inherit;
}
.login-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -4px rgba(255, 102, 0, 0.6);
}
.login-submit:active:not(:disabled) {
    transform: translateY(0);
}
.login-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.login-submit svg.animate-spin {
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.login-modal-trust {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #1f1f1f;
}
.login-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #666;
    font-size: 10px;
    text-align: center;
}
.login-trust-item svg {
    color: #FF6600;
}
@media (max-width: 480px) {
    .login-trust-item {
        font-size: 9px;
    }
}


/* ============================================================ */
/* ===== Order Success Modal (popup) ===== */
/* ============================================================ */
.order-success-backdrop {
    position: fixed;
    inset: 0;
    z-index: 320;
    background: rgba(0, 0, 0, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    visibility: hidden; opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    overflow-y: auto;
}
.order-success-backdrop.open {
    visibility: visible; opacity: 1;
    pointer-events: auto;
}

.order-success-card {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: linear-gradient(180deg, #0d0d0d 0%, #0a0a0a 100%);
    border: 1px solid #1f1f1f;
    border-radius: 22px;
    box-shadow: 0 30px 70px -12px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,102,0,0.10), 0 0 60px -20px rgba(255,102,0,0.25);
    padding: 40px 28px 24px;
    transform: translateY(20px) scale(0.94);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: center;
    direction: rtl;
}
.order-success-backdrop.open .order-success-card {
    transform: translateY(0) scale(1);
}
@media (max-width: 480px) {
    .order-success-card {
        padding: 36px 20px 18px;
        border-radius: 18px;
    }
    .order-success-backdrop {
        padding: 0;
        align-items: flex-end;
    }
    .order-success-card {
        max-height: 94vh;
        border-radius: 22px 22px 0 0;
        transform: translateY(100%);
    }
    .order-success-backdrop.open .order-success-card {
        transform: translateY(0);
    }
}

/* Confetti dots */
.order-success-confetti {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    pointer-events: none;
    overflow: hidden;
    border-radius: 22px 22px 0 0;
}
.order-success-confetti span {
    position: absolute;
    top: -10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0;
}
.order-success-backdrop.open .order-success-confetti span {
    animation: os-confetti-fall 1.4s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
.order-success-confetti span:nth-child(1)  { left: 8%;  background: #FF6600; animation-delay: 0.10s; }
.order-success-confetti span:nth-child(2)  { left: 18%; background: #10b981; animation-delay: 0.18s; }
.order-success-confetti span:nth-child(3)  { left: 28%; background: #f59e0b; animation-delay: 0.05s; }
.order-success-confetti span:nth-child(4)  { left: 38%; background: #FF6600; animation-delay: 0.22s; }
.order-success-confetti span:nth-child(5)  { left: 48%; background: #10b981; animation-delay: 0.12s; }
.order-success-confetti span:nth-child(6)  { left: 58%; background: #f59e0b; animation-delay: 0.28s; }
.order-success-confetti span:nth-child(7)  { left: 68%; background: #FF6600; animation-delay: 0.08s; }
.order-success-confetti span:nth-child(8)  { left: 78%; background: #10b981; animation-delay: 0.18s; }
.order-success-confetti span:nth-child(9)  { left: 88%; background: #f59e0b; animation-delay: 0.25s; }
.order-success-confetti span:nth-child(10) { left: 95%; background: #FF6600; animation-delay: 0.14s; }

@keyframes os-confetti-fall {
    0%   { opacity: 0; transform: translateY(0) rotate(0deg); }
    15%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(80px) rotate(360deg); }
}

/* Animated checkmark */
.order-success-check {
    width: 88px;
    height: 88px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px -6px rgba(16, 185, 129, 0.55), 0 0 0 8px rgba(16, 185, 129, 0.12);
    position: relative;
    z-index: 1;
}
.order-success-check.animate {
    animation: os-check-pop 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes os-check-pop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.order-success-check svg {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
}
.order-success-check.animate svg {
    animation: os-check-draw 0.4s 0.25s ease-out forwards;
}
@keyframes os-check-draw {
    to { stroke-dashoffset: 0; }
}

.order-success-title {
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    margin: 0 0 8px;
    line-height: 1.3;
}
.order-success-subtitle {
    color: #999;
    font-size: 13px;
    line-height: 1.7;
    margin: 0 0 22px;
    padding: 0 8px;
}

/* Receipt box */
.order-success-receipt {
    background: #121212;
    border: 1px solid #1f1f1f;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
    text-align: right;
}
.order-success-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px dashed #1f1f1f;
    font-size: 13px;
}
.order-success-row:last-child {
    border-bottom: 0;
}
.order-success-label {
    color: #888;
    font-weight: 500;
    flex-shrink: 0;
}
.order-success-value {
    color: #ddd;
    font-weight: 600;
    text-align: left;
    word-break: break-word;
}
.order-success-value-strong {
    color: #fff;
    font-weight: 800;
    font-size: 14px;
}
.order-success-value-orange {
    color: #FF6600;
}

/* Notice box */
.order-success-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(255, 102, 0, 0.08);
    border: 1px solid rgba(255, 102, 0, 0.20);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 18px;
    color: #c5c5c5;
    font-size: 11.5px;
    line-height: 1.7;
    text-align: right;
}
.order-success-notice svg {
    color: #FF6600;
    flex-shrink: 0;
    margin-top: 2px;
}
.order-success-link {
    color: #FF6600;
    text-decoration: none;
    font-weight: 700;
    border-bottom: 1px dashed rgba(255, 102, 0, 0.5);
    transition: border-color 0.15s, color 0.15s;
}
.order-success-link:hover {
    color: #ff8533;
    border-bottom-color: #ff8533;
}

/* Actions */
.order-success-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.order-success-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
    font-family: inherit;
    text-decoration: none;
    border: 1px solid transparent;
}
.order-success-btn-primary {
    background: linear-gradient(135deg, #FF6600 0%, #ff8533 100%);
    color: #fff;
    box-shadow: 0 8px 18px -4px rgba(255, 102, 0, 0.55);
}
.order-success-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px -4px rgba(255, 102, 0, 0.65);
}
.order-success-btn-primary:active {
    transform: translateY(0);
}
.order-success-btn-secondary {
    background: #1a1a1a;
    color: #ddd;
    border: 1px solid #2a2a2a;
}
.order-success-btn-secondary:hover {
    background: #222;
    color: #fff;
    border-color: #383838;
}

/* Support footer */
.order-success-support {
    padding-top: 14px;
    border-top: 1px solid #1f1f1f;
    color: #666;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}