/**
 * LUXURY-F — OVERRIDES.CSS
 * Final-priority overrides. Loaded LAST so it always wins.
 * Cleans up duplicate/conflicting rules from style.css append history.
 */

/* ================================================================
   DESKTOP NAVIGATION — Elevated styling & spacing
   ================================================================ */
.main-nav {
    background: rgba(245, 243, 238, 0.95) !important;
    border-top: 1px solid rgba(13, 13, 26, 0.06) !important;
    border-bottom: 1px solid rgba(13, 13, 26, 0.06) !important;
    padding: 0 !important;
}

.main-nav .nav-list {
    display: flex !important;
    justify-content: center !important; /* Center the links */
    gap: 1.5rem !important;            /* Elegant spacing between links */
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.main-nav .nav-list li > a {
    display: flex !important;
    align-items: center !important;
    padding: 1rem 1.5rem !important;    /* Spacious clickable area */
    font-size: 0.82rem !important;      /* Elegant, slightly smaller uppercase font */
    font-weight: 700 !important;        /* Semi-bold/bold */
    letter-spacing: 0.06em !important;  /* Elegant tracking */
    color: var(--navy) !important;      /* Deep navy color */
    opacity: 0.8 !important;            /* Refined look */
    text-transform: uppercase !important;
    position: relative !important;
    transition: all 0.25s ease !important;
}

.main-nav .nav-list li > a:hover,
.main-nav .nav-list li > a.active {
    color: var(--gold) !important;      /* Turn gold on hover/active */
    opacity: 1 !important;
}

/* Elegant gold line under the active/hover desktop nav item */
.main-nav .nav-list li > a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 1.5rem !important;
    right: 1.5rem !important;
    height: 2px !important;
    background: var(--gold) !important;
    transform: scaleX(0) !important;
    transform-origin: center !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.main-nav .nav-list li > a:hover::after,
.main-nav .nav-list li > a.active::after {
    transform: scaleX(1) !important;
}

/* Hide navigation link icons on desktop for a cleaner luxury look */
.main-nav .nav-list li > a i {
    display: none !important;
}

/* ================================================================
   FLOATING BUTTONS — STACKED VERTICALLY (right side)
   Layout (bottom to top):
     Position 1 (bottom):  Chat toggle button
     Position 2 (above):   Back-to-top button
   ================================================================ */

/* --- Shared base --- */
#back-to-top,
.chat-toggle {
    position: fixed !important;
    right: 1.5rem !important;
    z-index: 9000 !important;
    border: none;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity 0.3s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1), background 0.2s, box-shadow 0.2s !important;
}

/* --- Chat toggle: Position 1 (BOTTOM) --- */
.chat-widget {
    position: fixed !important;
    bottom: 1.5rem !important;
    right: 1.5rem !important;
    z-index: 9000 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0 !important;
}

.chat-toggle {
    position: relative !important;  /* inside .chat-widget flow */
    right: auto !important;
    bottom: auto !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #c9a227 0%, #e4bb3a 100%) !important;
    color: #0d0d1a !important;
    font-size: 1.3rem !important;
    box-shadow: 0 6px 24px rgba(201,162,39,0.4), 0 2px 8px rgba(0,0,0,0.2) !important;
}
.chat-toggle:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 8px 32px rgba(201,162,39,0.55) !important;
}

/* --- Back-to-top: Position 2 (ABOVE chat) --- */
#back-to-top {
    bottom: calc(1.5rem + 56px + 0.75rem) !important; /* above chat button */
    right: 1.5rem !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    background: #0d0d1a !important;
    color: #c9a227 !important;
    border: 2px solid #c9a227 !important;
    font-size: 0.9rem !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;
    /* Hidden by default */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;
}
#back-to-top.visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
#back-to-top:hover {
    background: #c9a227 !important;
    color: #0d0d1a !important;
    transform: translateY(-3px) !important;
}

/* Chat panel — anchored above the toggle */
.chat-panel {
    position: absolute !important;
    bottom: calc(56px + 0.75rem) !important;
    right: 0 !important;
    width: 360px !important;
    max-height: 520px !important;
}

/* ================================================================
   MOBILE — Adjusted positions above bottom nav (60px)
   ================================================================ */
@media (max-width: 768px) {
    .chat-widget {
        bottom: 72px !important;
        right: 1rem !important;
    }
    .chat-toggle {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.15rem !important;
    }
    #back-to-top {
        bottom: calc(72px + 50px + 0.6rem) !important;
        right: 1rem !important;
        width: 42px !important;
        height: 42px !important;
    }
    .chat-panel {
        width: calc(100vw - 2rem) !important;
        max-height: 60vh !important;
        right: 0 !important;
        bottom: calc(50px + 0.75rem) !important;
    }
}/* Hide mobile drawer components on desktop screens */
.nav-drawer-header,
.drawer-user-section,
.nav-drawer-footer {
    display: none !important;
}

/* Stacking Context & Containing Block Fix when off-canvas drawer is active */
body.nav-open #site-header {
    z-index: 10005 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ================================================================
   MOBILE NAV — Off-canvas definitive rules
   ================================================================ */
@media (max-width: 768px) {
    /* Prevent body width shift */
    html { overflow-x: hidden !important; }
    body { max-width: 100vw !important; overflow-x: hidden !important; }

    /* Off-canvas panel drawer layout */
    .main-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(320px, 88vw) !important;
        background: #0b0b15 !important;
        z-index: 10000 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: hidden !important;
        padding: 0 !important;
        box-shadow: none !important;
        border-right: 1px solid rgba(255,255,255,0.06) !important;
    }
    .main-nav.open {
        transform: translateX(0) !important;
        box-shadow: 20px 0 60px rgba(0,0,0,0.65) !important;
    }

    /* Drawer Header */
    .nav-drawer-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 1.25rem 1.5rem !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
        background: #0d0d1a !important;
        flex-shrink: 0 !important;
    }
    .drawer-logo {
        display: flex !important;
        align-items: center !important;
        gap: 0.6rem !important;
        text-decoration: none !important;
    }
    .drawer-logo .logo-mark {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
        background: linear-gradient(135deg, #c9a227 0%, #a8831a 100%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #0d0d1a !important;
        font-weight: 800 !important;
        font-size: 0.8rem !important;
    }
    .drawer-logo .logo-text {
        font-weight: 800 !important;
        font-size: 0.95rem !important;
        color: var(--white) !important;
        letter-spacing: -0.01em !important;
    }
    .main-nav .nav-close-btn {
        position: static !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,0.06) !important;
        border: none !important;
        color: rgba(255,255,255,0.6) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
    }
    .main-nav .nav-close-btn:hover {
        background: rgba(255,255,255,0.12) !important;
        color: var(--white) !important;
    }

    /* Drawer User Profile Section */
    .drawer-user-section {
        display: block !important;
        padding: 1.25rem 1.5rem !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
        background: rgba(255,255,255,0.01) !important;
        flex-shrink: 0 !important;
    }
    .drawer-user-logged {
        display: flex !important;
        align-items: center !important;
        gap: 0.85rem !important;
        margin-bottom: 0.85rem !important;
    }
    .drawer-avatar {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background: var(--gold) !important;
        color: #0d0d1a !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: 800 !important;
        font-size: 1.05rem !important;
        box-shadow: 0 4px 12px rgba(201,162,39,0.3) !important;
    }
    .drawer-user-info {
        display: flex !important;
        flex-direction: column !important;
    }
    .drawer-user-greeting {
        font-size: 0.72rem !important;
        color: rgba(255,255,255,0.45) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
    }
    .drawer-user-name {
        font-size: 0.9rem !important;
        color: var(--white) !important;
        font-weight: 700 !important;
    }
    .drawer-user-actions {
        display: flex !important;
        gap: 0.75rem !important;
    }
    .drawer-action-link {
        font-size: 0.78rem !important;
        color: rgba(255,255,255,0.6) !important;
        text-decoration: none !important;
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        transition: color 0.15s !important;
    }
    .drawer-action-link:hover {
        color: var(--gold) !important;
    }
    .drawer-action-link.logout:hover {
        color: #ef4444 !important;
    }
    .drawer-user-guest {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    .drawer-user-guest p {
        margin: 0 !important;
        font-size: 0.78rem !important;
        color: rgba(255,255,255,0.45) !important;
        line-height: 1.5 !important;
    }

    /* Navigation list container */
    .drawer-nav-container {
        flex: 1 !important;
        overflow-y: auto !important;
    }
    .main-nav .nav-list {
        flex-direction: column !important;
        gap: 0.15rem !important;
        padding: 0.85rem 0 !important;
    }
    .main-nav .nav-list li {
        width: 100% !important;
    }
    .main-nav .nav-list li > a {
        display: flex !important;
        align-items: center !important;
        gap: 0.9rem !important;
        padding: 0.85rem 1.5rem !important;
        color: rgba(255,255,255,0.75) !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        border: none !important;
        text-decoration: none !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative !important;
    }
    .main-nav .nav-list li > a i {
        font-size: 0.95rem !important;
        width: 18px !important;
        text-align: center !important;
        opacity: 0.55 !important;
        transition: opacity 0.2s !important;
        display: inline-block !important; /* Force display in mobile drawer */
    }
    .main-nav .nav-list li > a::before {
        content: '' !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 3px !important;
        background: var(--gold) !important;
        transform: scaleY(0) !important;
        transition: transform 0.2s ease !important;
    }
    .main-nav .nav-list li > a:hover,
    .main-nav .nav-list li > a.active {
        color: var(--gold) !important;
        background: rgba(201,162,39,0.06) !important;
        padding-left: 1.75rem !important;
    }
    .main-nav .nav-list li > a:hover i,
    .main-nav .nav-list li > a.active i {
        opacity: 0.95 !important;
        color: var(--gold) !important;
    }
    .main-nav .nav-list li > a.active::before {
        transform: scaleY(1) !important;
    }

    /* Drawer Footer Section */
    .nav-drawer-footer {
        padding: 1.25rem 1.5rem !important;
        border-top: 1px solid rgba(255,255,255,0.06) !important;
        background: #0d0d1a !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.85rem !important;
        margin-top: auto !important;
        flex-shrink: 0 !important;
    }
    .drawer-contact-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.45rem !important;
    }
    .drawer-contact-info a {
        font-size: 0.75rem !important;
        color: rgba(255,255,255,0.45) !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        transition: color 0.15s !important;
    }
    .drawer-contact-info a:hover {
        color: var(--gold) !important;
    }
    .drawer-contact-info a i {
        color: var(--gold) !important;
        font-size: 0.75rem !important;
    }
    .drawer-socials {
        display: flex !important;
        gap: 0.75rem !important;
    }
    .drawer-socials a {
        width: 30px !important;
        height: 30px !important;
        border-radius: 6px !important;
        background: rgba(255,255,255,0.05) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: rgba(255,255,255,0.6) !important;
        font-size: 0.85rem !important;
        transition: all 0.2s !important;
        text-decoration: none !important;
    }
    .drawer-socials a:hover {
        background: var(--gold) !important;
        color: #0d0d1a !important;
        transform: translateY(-2px) !important;
    }

    /* Header desktop elements — hide completely */
    .header-search { display: none !important; }
    .nav-list li > a::after { display: none !important; }

    /* Mobile actions row styling & spacing */
    .header-actions {
        gap: 0.5rem !important;
    }
    .header-action-btn {
        width: 38px !important;
        height: 38px !important;
        font-size: 0.95rem !important;
    }

    /* Hide desktop-oriented account elements on mobile header bar */
    .btn-login-header,
    .user-dropdown {
        display: none !important;
    }

    /* Mobile Search Toggle Visibility */
    .mobile-search-toggle {
        color: var(--navy) !important;
    }
    .mobile-search-toggle:hover,
    .mobile-search-toggle[aria-expanded="true"] {
        color: var(--gold) !important;
    }

    /* Mobile Menu Hamburger Visibility */
    .mobile-menu-btn span {
        background: var(--navy) !important;
    }
    .mobile-menu-btn:hover span,
    .mobile-menu-btn.open span {
        background: var(--gold) !important;
    }

    /* Mobile search bar — slide down */
    .mobile-search-bar {
        display: block !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: #1a1a2e !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease, padding 0.3s ease !important;
        z-index: 200 !important;
        padding: 0 !important;
        border-top: 1px solid rgba(255,255,255,0.06) !important;
    }
    .mobile-search-bar.open {
        max-height: 80px !important;
        padding: 0.65rem 1rem !important;
    }
    .mobile-search-bar form {
        display: flex !important;
        gap: 0.5rem !important;
    }
    .mobile-search-bar input {
        flex: 1 !important;
        padding: 0.6rem 0.9rem !important;
        border: 1.5px solid rgba(255,255,255,0.12) !important;
        border-radius: 10px !important;
        background: rgba(255,255,255,0.07) !important;
        color: white !important;
        font-size: 0.875rem !important;
        font-family: inherit !important;
        outline: none !important;
    }
    .mobile-search-bar input:focus { border-color: #c9a227 !important; }
    .mobile-search-bar button {
        width: 38px !important;
        height: 38px !important;
        background: #c9a227 !important;
        color: #0d0d1a !important;
        border: none !important;
        border-radius: 10px !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    /* Overlay backdrop */
    body.nav-open::after {
        content: '' !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0,0,0,0.55) !important;
        z-index: 9999 !important;
        pointer-events: none !important;
    }
}

/* ================================================================
   PRODUCT DUPLICATE QUERY FIX IN PRODUCT.PHP
   (hide the 2nd query result block if PHP error causes double render)
   ================================================================ */

/* ================================================================
   TOAST NOTIFICATIONS
   ================================================================ */
.toast {
    position: fixed !important;
    top: auto !important;           /* cancel style.css top:1.5rem that causes full-height stretch */
    bottom: 1.75rem !important;
    right: 1.5rem !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 260px !important;
    max-width: 340px !important;
    background: #0d0d1a !important;
    color: white !important;
    padding: 0.85rem 1.1rem !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important;
    z-index: 99999 !important;
    animation: toastIn 0.3s ease forwards !important;
    border-left: 3px solid #c9a227 !important;
    pointer-events: none !important;
}
.toast-success { border-left-color: #22c55e !important; }
.toast-error   { border-left-color: #ef4444 !important; }
.toast-info    { border-left-color: #3b82f6 !important; }
.toast.out     { animation: toastOut 0.35s ease forwards !important; }

@keyframes toastIn  { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes toastOut { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(12px); } }

@media (max-width: 768px) {
    .toast {
        left: 1rem !important;
        right: 1rem !important;
        bottom: 80px !important;   /* above mobile bottom nav */
        max-width: none !important;
        width: calc(100% - 2rem) !important;
    }
}


/* ================================================================
   PRODUCT CARDS — MOBILE TOUCH IMPROVEMENTS
   ================================================================ */
@media (max-width: 768px) {
    .product-card { border-radius: 12px !important; overflow: hidden !important; }
    .product-image-wrap { height: 180px !important; }
    .product-actions-overlay { opacity: 1 !important; background: rgba(0,0,0,0.35) !important; }
    .btn-add-cart { font-size: 0.78rem !important; padding: 0.5rem 0.75rem !important; }
    .product-info { padding: 0.75rem !important; }
    .product-name { font-size: 0.82rem !important; -webkit-line-clamp: 2 !important; }
    .price-current { font-size: 0.9rem !important; }
    .price-original { font-size: 0.75rem !important; }
}

/* ================================================================
   HERO — MOBILE POLISH
   ================================================================ */
@media (max-width: 768px) {
    .hero {
        min-height: auto !important;
        padding: 3.5rem 0 3rem !important;
    }
    .hero h1 {
        font-size: clamp(1.75rem, 7.5vw, 2.5rem) !important;
        line-height: 1.15 !important;
    }
    .hero-actions {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.75rem !important;
    }
    .hero-actions .btn {
        width: 100% !important;
        max-width: 280px !important;
        justify-content: center !important;
    }
    .hero-stats {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 1rem 2.5rem !important;
    }
}

/* ================================================================
   FOOTER MOBILE
   ================================================================ */
@media (max-width: 768px) {
    .footer-body {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 2rem 1rem !important;
    }
    .footer-bottom-inner {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.75rem !important;
    }
    .payment-icons { justify-content: center !important; }
}

/* ================================================================
   ACCOUNT PAGES — SIDEBAR MOBILE
   ================================================================ */
@media (max-width: 768px) {
    #account-grid {
        grid-template-columns: 1fr !important;
    }
    #account-grid aside {
        position: static !important;
    }
}

/* ================================================================
   SECTION SPACING — MOBILE
   ================================================================ */
@media (max-width: 768px) {
    section { padding: 2.5rem 0 !important; }
    .container { padding-left: 1rem !important; padding-right: 1rem !important; }
    h1 { font-size: clamp(1.75rem, 6vw, 2.5rem) !important; }
    h2 { font-size: clamp(1.4rem, 5vw, 2rem) !important; }
}

/* ================================================================
   MALAGASY BRANDING & TIMED CHECKOUT SYSTEM
   ================================================================ */

:root {
    --mg-red: #D22630;
    --mg-green: #007A33;
    --mg-white: #ffffff;
}

/* Elegant Malagasy flag ribbon at the top of the announcement bar */
.announcement-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, var(--mg-white) 0%, var(--mg-white) 33.33%, var(--mg-red) 33.33%, var(--mg-red) 66.66%, var(--mg-green) 66.66%, var(--mg-green) 100%);
    z-index: 205;
}

/* Polished search form */
.search-form {
    border-radius: var(--radius-md) !important;
    background: var(--cream-dark) !important;
    border: 1px solid var(--border-strong) !important;
    transition: all 0.2s ease !important;
}
.search-form:focus-within {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(201,162,39,0.12) !important;
    background: var(--white) !important;
}
.search-form input::placeholder {
    color: var(--text-muted) !important;
    font-size: 0.82rem !important;
}

/* Payment Countdown Screen UI */
.payment-countdown-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    padding: 2.25rem;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.countdown-timer-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--navy);
    border-radius: var(--radius-lg);
    color: var(--white);
    position: relative;
    border: 1.5px solid var(--gold);
}

.countdown-timer-circle {
    font-size: 3.25rem;
    font-weight: 800;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.05em;
    color: var(--gold);
    text-shadow: 0 0 15px rgba(201,162,39,0.45);
    margin-bottom: 0.15rem;
    line-height: 1;
}

.countdown-timer-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
}

.ussd-box {
    background: var(--cream);
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin: 1.5rem 0;
    position: relative;
    text-align: center;
}

.ussd-code-display {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: 0.05em;
    text-align: center;
    margin: 0.75rem 0;
    padding: 0.5rem;
    background: var(--white);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    user-select: all;
    display: block;
    word-break: break-all;
}

.btn-copy-ussd {
    background: var(--navy);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.45rem 1rem;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.btn-copy-ussd:hover {
    background: var(--gold);
    color: var(--navy);
}

.payment-timeout-overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 13, 26, 0.98);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--white);
    padding: 2rem;
    text-align: center;
    z-index: 10;
    animation: fadeIn 0.4s ease forwards;
}

.payment-timeout-overlay i {
    font-size: 4.5rem;
    color: var(--mg-red);
    margin-bottom: 1.5rem;
    text-shadow: 0 0 15px rgba(210,38,48,0.4);
}

.payment-details-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.payment-details-table td {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
}

.payment-details-table tr:last-child td {
    border-bottom: none;
}

.payment-details-table td:first-child {
    color: var(--text-muted);
}

.payment-details-table td:last-child {
    font-weight: 700;
    color: var(--navy);
    text-align: right;
}

.operator-badge-mvola {
    border-left: 4px solid var(--mg-red);
    padding-left: 0.75rem;
}

.operator-badge-orange {
    border-left: 4px solid #FF6600;
    padding-left: 0.75rem;
}

.operator-badge-airtel {
    border-left: 4px solid #E4002B;
    padding-left: 0.75rem;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Styled capsule tags for product stock status (Mora Market alignment) */
.product-stock-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 0.25rem 0.65rem !important;
    border-radius: var(--radius-full) !important;
    margin-bottom: 0.4rem !important;
}

.product-stock-tag i {
    font-size: 0.75rem !important;
}

.stock-ok {
    background: rgba(26, 122, 74, 0.08) !important;
    color: var(--success) !important;
    border: 1px solid rgba(26, 122, 74, 0.15) !important;
}

.stock-low {
    background: rgba(194, 122, 14, 0.08) !important;
    color: var(--warning) !important;
    border: 1px solid rgba(194, 122, 14, 0.15) !important;
}

.stock-none {
    background: rgba(192, 57, 43, 0.08) !important;
    color: var(--danger) !important;
    border: 1px solid rgba(192, 57, 43, 0.15) !important;
}

/* ================================================================
   MOBILE LAYOUT OVERRIDES (PRODUCT DETAIL & CART PAGES)
   ================================================================ */
@media (max-width: 768px) {
    /* Product Detail Layout */
    .product-layout {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        margin-bottom: 2.5rem !important;
    }

    /* Cart Layout Grid Stack */
    .cart-layout {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Stack Cart Item Rows as Vertical Cards */
    [data-cart-item] {
        flex-direction: column !important;
        align-items: stretch !important;
        position: relative !important;
        padding: 1.5rem 1.25rem 1.25rem !important;
        gap: 1rem !important;
        text-align: center !important;
    }

    /* Center Image wrapper */
    [data-cart-item] > div:nth-of-type(1) {
        margin: 0 auto !important;
    }

    /* Info Block details alignment */
    [data-cart-item] > div:nth-of-type(2) {
        text-align: center !important;
        padding: 0 !important;
    }

    [data-cart-item] > div:nth-of-type(2) a {
        white-space: normal !important;
        font-size: 0.95rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Quantity controls centering */
    [data-cart-item] > div:nth-of-type(3) {
        margin: 0 auto !important;
        width: max-content !important;
    }

    /* Subtotal centering and styling */
    [data-cart-item] > div:nth-of-type(4) {
        text-align: center !important;
        min-width: auto !important;
        margin-top: 0.25rem !important;
    }

    [data-cart-item] > div:nth-of-type(4) .item-total {
        font-size: 1.1rem !important;
    }

    /* Absolutely position trash remove button */
    [data-cart-item] > form {
        position: absolute !important;
        top: 0.85rem !important;
        right: 0.85rem !important;
        margin: 0 !important;
        z-index: 5 !important;
    }
}

/* ================================================================
   BRANDING LOGO MARK IMAGE ALIGNMENTS
   ================================================================ */
.logo-mark img, .auth-logo-mark img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
}

.logo-mark, .auth-logo-mark {
    overflow: hidden !important;
    background: transparent !important;
}