/* --- FORCE DARK THEME OVERRIDES --- */
button,
a,
[onclick],
[role="button"],
.drawer-item,
.nav-item,
.service-card,
.profile-icon-btn,
.fab-cart,
.btn-order-now,
.btn-add-red,
.btn-send-otp,
.drawer-login-btn,
.btn-contact,
.btn-action-tile,
.btn-add-address,
.btn-confirm-order,
.btn-back,
.btn-search-trigger,
.filter-chip,
.cat-chip,
.coins-enroll-btn,
.login-skip-btn,
.social-btn,
.view-cart-btn,
.btn-install,
.btn-close-pwa,
.map-gps-btn,
.card-customise-overlay,
.profile-section-card,
.address-item,
.save-as-chip,
.place-order-btn {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

/* Fixes persistent Purple Gradient on Coming Soon pages */
.coming-soon-container {
    background: var(--dark-bg) !important;
    background-image: none !important;
    color: var(--text-light) !important;
}

/* Removes the white radial gradient animation */
.coming-soon-container::before {
    display: none !important;
}

/* Fixes Bottom Navigation Background */
.bottom-nav {
    background: var(--dark-card) !important;
    border-top: 1px solid #333 !important;
}

/* Fixes 3D Button Contrast */
.btn-3d {
    background: var(--primary) !important;
    color: black !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    text-transform: uppercase;
    font-weight: 800;
}

/* Fixes Cart Header Background */
.cart-header {
    background: var(--dark-card) !important;
    border-bottom: 1px solid #333 !important;
}

/* Fixes Cart View Background */
.cart-view {
    background: var(--dark-bg) !important;
}

/* Fixes Full Screen Login Modal Background */
.login-modal-full {
    background: var(--dark-bg) !important;
}

/* Fixes Sidebar Drawer Background */
.side-drawer {
    background: var(--dark-card) !important;
}

.drawer-header {
    background: var(--dark-card) !important;
    border-bottom: 1px solid #333 !important;
}

/* Fixes Dialogs */
.contact-dialog,
.custom-dialog {
    background: var(--dark-card) !important;
    color: var(--text-light) !important;
}

/* --- HIGH CONTRAST TEXT OVERRIDES --- */

/* Sidebar / Drawer Logic */
.drawer-item {
    color: var(--text-light) !important;
    border-bottom: 1px solid #333 !important;
}

.drawer-user-title {
    color: var(--primary) !important;
}

.drawer-user-sub {
    color: #ccc !important;
}

.drawer-profile-icon {
    background: #333 !important;
    color: var(--primary) !important;
}

.drawer-item-icon {
    color: var(--primary) !important;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-light) !important;
}

/* Cart & Order Items */
.cart-item-name,
.order-item-name {
    color: var(--text-light) !important;
}

.cart-item-price,
.order-item-price {
    color: var(--accent) !important;
}

.cart-item-variants {
    color: #ccc !important;
}

/* Summary Card */
.cart-summary-card h3,
.cart-delivery-card h3 {
    color: var(--text-muted) !important;
}

.summary-line {
    color: var(--text-light) !important;
}

.summary-line.total {
    color: var(--primary) !important;
}

.checkout-price .total-val {
    color: var(--primary) !important;
}

/* Form Inputs */
input,
textarea,
select {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease-in-out !important;
    outline: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(255, 140, 26, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

::placeholder {
    color: #94a3b8 !important;
}

.text-muted {
    color: #475569 !important;
}

/* --- SESSION 5 VISUAL FIXES --- */

/* 1. Fix Coming Soon Center Alignment */
.coming-soon-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    position: fixed !important;
    /* Pin to viewport */
    top: 60px !important;
    /* Below Header */
    bottom: 70px !important;
    /* Above Nav */
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    /* Allow it to fill space without overflow */
    margin: 0 !important;
    padding: 20px !important;
    /* Add internal spacing */
    height: auto !important;
    background: var(--dark-bg) !important;
    z-index: 999 !important;
    /* Below Header (1000) */
    box-sizing: border-box !important;
}

/* Ensure the inner wrapper is also centered and restricted */
.coming-soon-content {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.coming-soon-title,
.coming-soon-text {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    word-wrap: break-word !important;
    /* wrap long words like MOUTHWATERING */
    overflow-wrap: break-word !important;
}

.coming-soon-title {
    font-size: clamp(24px, 6vw, 36px) !important;
    /* Responsive font size */
    line-height: 1.2 !important;
}

/* 2. Fix Nav Bar Text Visibility */
.nav-item {
    color: #999 !important;
    /* Lighter gray for inactive state */
}

.nav-item.active {
    color: var(--primary) !important;
    /* Orange for active state */
}

.nav-label {
    font-size: 10px !important;
    margin-top: 2px !important;
}

/* 3. Green Cart Icon & Bold Black Image */
.fab-cart {
    background: var(--dominos-green) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4) !important;
}

.fab-icon {
    font-size: 24px !important;
    color: black !important;
    filter: brightness(0) !important;
    /* Forces emoji to be black silhouette */
    font-weight: 900 !important;
}

.fab-badge {
    background: white !important;
    color: var(--dominos-green) !important;
}

/* Ensure dialogs appear OVER high z-index elements like modern-light cart */
.dialog-overlay {
    z-index: 20000 !important;
}

/* --- SESSION 5 PART 2: MENU VIEW THEMING --- */

/* 1. Menu Header */
.menu-header-bar {
    background: var(--dark-card) !important;
    color: var(--text-light) !important;
    border-bottom: 1px solid #333 !important;
}

.menu-title-text {
    color: var(--text-light) !important;
}

.btn-back,
.btn-search-trigger {
    color: var(--text-light) !important;
}

/* 2. Filter Bar & Chips */
.filters-bar {
    background: var(--dark-bg) !important;
    border-bottom: 1px solid #333 !important;
    align-items: center !important;
}

.filter-chip {
    background: var(--dark-card) !important;
    border: 1px solid #444 !important;
    color: var(--text-muted) !important;
}

.filter-chip.active {
    background: rgba(251, 197, 49, 0.2) !important;
    /* Gold tint */
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* 3. Category Chips Stick Bar */
.menu-cat-chips {
    background: var(--dark-bg) !important;
    border-bottom: 1px solid #333 !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18) !important;
}

.menu-search-chip {
    margin-left: auto !important;
    min-width: 42px !important;
    justify-content: center !important;
}

.cat-chip {
    color: var(--text-muted) !important;
}

:root {
    --dominos-green: #0c831f;
    /* Zepto/Blinkit Green */
    --dominos-blue: #006491;
    --primary: #ff8c1a;
    /* Brand Orange */
    --accent-pink: #f43f5e;
    /* Premium Rose Pink */
    --light-bg: #f8fafc;
    /* Sleek slate off-white */
    --card-bg: #ffffff;
    --text-main: #0f172a;
    --text-sub: #475569;
    --success-bg: #ecfdf5;
    --success-text: #059669;
    --font-main: 'Outfit', sans-serif;
    --shadow-premium: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 10px 25px -5px rgba(0, 0, 0, 0.04);
}

/* Base Light Mode for Cart */
.cart-view.modern-light {
    background: var(--light-bg) !important;
    color: var(--text-main) !important;
    font-family: var(--font-main) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    position: fixed !important;
    inset: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 10001;
    display: flex !important;
    flex-direction: column !important;
}

.modern-light .cart-header {
    background: #fff !important;
    color: var(--text-main) !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 0 !important;
    gap: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    min-height: 70px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.modern-light .cart-header .back-box {
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #f0f0f0;
    cursor: pointer;
    font-size: 20px;
}

.modern-light .cart-header .service-selector-box {
    width: 28%;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid #f0f0f0;
    cursor: pointer;
    background: #fafafa;
}

.modern-light .cart-header .address-selector-box {
    flex: 1;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.modern-light .cart-header .header-label {
    font-size: 10px;
    font-weight: 800;
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.modern-light .cart-header .service-value,
.modern-light .cart-header .address-value {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
}

.modern-light .cart-header .service-value i,
.modern-light .cart-header .address-value i {
    font-size: 10px;
    color: var(--text-sub);
}

.modern-light .cart-header .address-sub-value {
    font-size: 12px;
    color: var(--text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.modern-light .cart-header .address-value.directions-link {
    color: var(--accent-pink);
    text-decoration: none;
    cursor: pointer;
}

/* Add Address CTA Chip */
.add-address-cta {
    background: var(--accent-pink) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    text-transform: uppercase;
    margin-left: 8px;
    box-shadow: 0 2px 6px rgba(240, 78, 124, 0.2);
    cursor: pointer;
    vertical-align: middle;
}

.add-address-cta:active {
    transform: scale(0.92);
}

.modern-light .cart-scroll-content {
    background: var(--light-bg) !important;
    padding-bottom: 40px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
}

/* Card Styles - Ultra Premium */
.modern-light .cart-item,
.modern-light .cart-delivery-card,
.modern-light .bill-details,
.modern-light .cart-summary-card,
.modern-light .order-options-card,
.modern-light .cutlery-toggle-card,
.modern-light .tip-card,
.modern-light .upsell-card {
    background: var(--card-bg) !important;
    border: none !important;
    box-shadow: var(--shadow-premium) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 12px 14px !important;
    color: var(--text-main) !important;
    width: calc(100% - 28px) !important;
    box-sizing: border-box !important;
}

.cart-active {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

.cart-active .container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

.cart-active #app,
.cart-active #cartViewContainer {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.cart-active .cart-view {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: fixed !important;
    inset: 0 !important;
    height: 100dvh !important;
    z-index: 10001 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Section Headings - Force Pure Black */
.upsell-section h3,
.tip-card h3,
.modern-light h3 {
    color: #000000 !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}

.bottom-bar {
    flex-shrink: 0 !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    width: 100% !important;
    background: #ffffff !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom)) 16px !important;
    /* Matches card margins (14px) exactly, plus safe area for iPhones */
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08) !important;
    z-index: 10001 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    max-width: none !important;
    flex-shrink: 0 !important;
}

.amount-section {
    display: flex !important;
    flex-direction: column !important;
}

.to-pay-label {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000 !important;
    line-height: 1.2 !important;
}

.to-pay-amount {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #000 !important;
}

.place-order-btn {
    height: 46px !important;
    padding: 0 20px !important;
    white-space: nowrap !important;
    background: #FF4E7C !important;
    /* Direct Pink value for consistency */
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
    /* Extra Bold like the ADD button */
    font-size: 14px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(255, 78, 124, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: uppercase !important;
}

/* Accent Buttons - Pill Shaped */
.modern-light .btn-pink {
    background: var(--accent-pink) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none !important;
    box-shadow: 0 4px 12px rgba(240, 78, 124, 0.2) !important;
}

.modern-light .btn-pink:active {
    transform: scale(0.95);
    box-shadow: 0 2px 6px rgba(240, 78, 124, 0.2) !important;
}

/* Savings Banner - Full Width Solid */
.savings-banner {
    background: var(--success-bg) !important;
    color: var(--success-text) !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: center;
    border-bottom: 1px solid rgba(12, 131, 31, 0.1) !important;
}

/* Item Styling */
.modern-light .cart-item {
    display: flex;
    gap: 16px;
    padding: 14px !important;
}

.modern-light .cart-item-name {
    font-weight: 700 !important;
    font-size: 15px !important;
    color: var(--text-main) !important;
}

.modern-light .cart-item-img {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    background: #f8f8f8;
}

/* Bill Summary Polish */
.modern-light .bill-header {
    font-size: 16px !important;
    margin-bottom: 16px !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px !important;
    color: var(--text-main) !important;
    text-transform: uppercase !important;
}

.modern-light .bill-row {
    font-size: 14px !important;
    color: var(--text-sub) !important;
    margin-bottom: 10px !important;
    font-weight: 500 !important;
}

.modern-light .bill-row span:last-child {
    color: var(--text-main) !important;
    font-weight: 600 !important;
}

.modern-light .to-pay-row {
    border-top: 1px dashed #e0e0e0 !important;
    margin-top: 14px !important;
    padding-top: 14px !important;
    color: var(--text-main) !important;
    font-weight: 800 !important;
    font-size: 17px !important;
}

/* Bottom Bar - Native Feel */
.modern-light .cart-checkout-footer {
    background: #fff !important;
    border-top: 1px solid #f0f0f0 !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.04) !important;
    padding: 12px 20px 20px 20px !important;
}

.modern-light .btn-confirm-order {
    background: var(--accent-pink) !important;
    height: 52px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    padding: 0 40px !important;
}

/* Upsell Card Enhancements */
.modern-light .upsell-card {
    border-radius: 14px !important;
    padding: 10px !important;
}

.modern-light .upsell-card img {
    height: 100px !important;
    border-radius: 10px !important;
}

.modern-light .btn-confirm-order {
    background: var(--accent-pink) !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: none !important;
}

/* Scrollbar styling for horizontal lists */
.upsell-list::-webkit-scrollbar {
    height: 0px;
}

.tip-btn.active {
    background: #FF4E7C !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(255, 78, 124, 0.3) !important;
    border: none !important;
}

.modern-light .stepper button {
    background: transparent !important;
    color: var(--accent-pink) !important;
    font-weight: 800 !important;
    border: none !important;
    font-size: 18px !important;
    width: 32px !important;
}

.modern-light .stepper .qty {
    color: var(--text-main) !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    min-width: 20px;
    text-align: center;
}

.cat-chip.active {
    color: var(--primary) !important;
    /* Gold/Orange */
    border-bottom-color: var(--primary) !important;
}

/* --- SESSION 6: CUSTOM ALERTS --- */
.custom-alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.45) !important;
    /* Darker backdrop */
    z-index: 26000 !important;
    /* Highest priority */
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
}

/* Keep custom alerts above profile/drawer overlays in all flows */
#customAlertModal.custom-alert-overlay {
    z-index: 35000 !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: auto !important;
}

.custom-alert-box {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    padding: 24px;
    border-radius: 16px;
    width: 85%;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18) !important;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#customAlertModal .custom-alert-box {
    z-index: 35001 !important;
}

.custom-alert-content p {
    color: #111827 !important;
    font-size: 16px;
    margin-bottom: 20px;
    line-height: 1.5;
}

.custom-alert-btn {
    width: 100%;
    height: 40px !important;
    border-radius: 10px !important;
    border: 1px solid #0f766e !important;
    background: #0f766e !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

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

/* --- SESSION 9: PROFILE VIEW THEMING --- */
.profile-view-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: var(--dark-bg) !important;
    color: var(--text-light) !important;
    z-index: 10002 !important;
    /* Above cart overlay (10001) */
    display: none;
    /* Controlled by JS but enforced here for safety */
    flex-direction: column;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
}

.profile-section-card {
    background: var(--dark-card) !important;
    border: 1px solid #333 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: 15px;
    border-radius: 12px;
}

.profile-section-title {
    color: var(--primary) !important;
    font-weight: 800;
    margin-bottom: 10px;
}

.btn-action-tile {
    color: var(--text-light) !important;
    background: transparent !important;
    /* Ensure no white bg */
}

/* Ensure saved cards/wallet text is visible */
.btn-action-tile span {
    color: var(--text-light);
}

.profile-header-title {
    color: var(--text-light) !important;
}

.btn-back {
    color: var(--text-light) !important;
}

.profile-header-bar {
    background: var(--dark-bg) !important;
    border-bottom: 1px solid #333 !important;
    color: var(--text-light) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* --- SESSION 7: PWA BANNER THEMING --- */
#pwa-install-banner {
    background: var(--dark-card) !important;
    border-top: 1px solid var(--primary) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5) !important;
    color: var(--text-light) !important;
}

#pwa-install-banner h4 {
    color: var(--primary) !important;
    /* Gold/Orange */
    margin-bottom: 4px !important;
}

#pwa-install-banner p {
    color: var(--text-muted) !important;
}

#closePwaBtn {
    color: var(--text-muted) !important;
    font-size: 24px !important;
    opacity: 0.8;
}

#installBtn {
    background: var(--dominos-green) !important;
    color: white !important;
    border: none !important;
    font-weight: bold;
    text-transform: uppercase;
}

/* Force dark theme for PWA banner with new class */
:root {
    /* Soft Dark Palette Overrides */
    --dark-bg: #161616 !important;
    --dark-card: #222222 !important;
    --dark-input: #2a2a2a !important;
    --text-light: #e8e8e8 !important;
    --text-muted: #b8b8b8 !important;
}

.dark-theme-banner {
    background: var(--dark-card) !important;
    color: var(--text-light) !important;
    border-top: 1px solid var(--primary) !important;
}

/* --- EYE COMFORT & VISIBILITY POLISH --- */
.card,
.section-card,
.side-drawer,
.cart-summary-card,
.dashboard-card,
.profile-section-card {
    border: 1px solid #3a3a3a !important;
    /* Soft border to define boundaries */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Softer inputs for less eye strain */
input,
textarea,
select {
    background: #1e1e1e !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

input:focus {
    border-color: var(--primary) !important;
}

/* Ensure headings are clear but not "glowing" */
h1,
h2,
h3 {
    letter-spacing: 0.5px;
    font-weight: 700;
}

/* --- CART VISIBILITY FIXES --- */
.cart-view {
    background: var(--dark-bg) !important;
}

.cart-item,
.cart-delivery-card,
.bill-details,
.cart-summary-card,
.section-card {
    background: #222222 !important;
    /* Force hardcoded Soft Dark */
    border: 1px solid #3a3a3a !important;
    color: #e8e8e8 !important;
    /* Force hardcoded Off-White */
    padding: 10px !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Ensure inputs inside these cards are also themed */
.cart-delivery-card input,
.cart-delivery-card textarea {
    background: #1e1e1e !important;
    border: 1px solid #444 !important;
    color: #e8e8e8 !important;
}


.cart-item-name {
    color: var(--text-light) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    margin-bottom: 4px !important;
}

.cart-item-price {
    color: var(--primary) !important;
    /* Gold for price visibility */
    font-weight: 600 !important;
    font-size: 13px !important;
    opacity: 1 !important;
}

.bill-header {
    color: var(--text-light) !important;
    font-weight: 800 !important;
    border-bottom: 1px solid #444 !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
}

.bill-row {
    color: var(--text-light) !important;
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: 4px !important;
    font-size: 13px !important;
}

.bill-row span:last-child {
    font-weight: 700 !important;
}

.to-pay-row {
    color: var(--primary) !important;
    border-top: 1px dashed #444 !important;
    padding-top: 8px !important;
    margin-top: 8px !important;
}

/* Fix for light background in Cart Header */
.cart-header {
    background: var(--dark-bg) !important;
    color: var(--text-light) !important;
    border-bottom: 1px solid #333 !important;
}

.cart-header h2 {
    color: var(--text-light) !important;
}

/* Softer Savings Line for Dark Theme */
.savings-line {
    background: rgba(46, 204, 113, 0.1) !important;
    border: 1px dashed var(--dominos-green) !important;
    color: var(--dominos-green) !important;
}

/* Pill Cart CTA (replaces circular FAB) */
.fab-cart {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    bottom: 86px !important;
    width: min(31vw, 128px) !important;
    min-height: 33px !important;
    border-radius: 999px !important;
    display: none;
    align-items: center !important;
    gap: 3px !important;
    padding: 0 4px !important;
    background: linear-gradient(135deg, #ff0f87 0%, #ff006d 100%) !important;
    box-shadow: 0 10px 24px rgba(255, 0, 109, 0.42), 0 0 14px rgba(255, 0, 109, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    z-index: 1900 !important;
}

/* Order status pill compact + same height as cart pill */
.order-status-bubble {
    min-height: 33px !important;
    height: 33px !important;
    width: min(31vw, 128px) !important;
    border-radius: 999px !important;
    padding: 0 4px 0 1px !important;
    gap: 2px !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid #dbe2ea !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14) !important;
    z-index: 1900 !important;
    box-sizing: border-box !important;
    position: fixed !important;
}

@media (max-width: 768px) {
    .order-status-bubble {
        width: min(32vw, 126px) !important;
    }
}

.status-icon-anim {
    width: 7px !important;
    height: 7px !important;
    flex-shrink: 0;
    position: absolute !important;
    left: 2px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

.order-bubble-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0.92 !important;
    gap: 0 !important;
    min-width: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.order-bubble-title,
.order-bubble-sub,
.order-bubble-time {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0.92 !important;
}

.order-bubble-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #111827 !important;
}

.order-bubble-sub {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #374151 !important;
}

.order-bubble-time {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
}

.fab-cart-icon-wrap {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fab-icon {
    font-size: 18px !important;
    color: #fff !important;
    filter: none !important;
}

.fab-cart-copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    line-height: 0.82;
    flex: 1;
    min-width: 0;
    align-items: flex-start;
    text-align: left;
    margin-left: 4px;
    gap: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.fab-cart-title {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 0.82;
    font-size: 14px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.fab-badge {
    position: static !important;
    min-width: 0 !important;
    height: auto !important;
    border: none !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.96) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    padding: 0 !important;
    line-height: 0.82 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.fab-cart-arrow {
    display: block !important;
    color: #fff;
    font-size: 16px;
    line-height: 0.85;
    margin-right: 4px;
    opacity: 0.98;
}

@media (max-width: 768px) {
    .fab-cart {
        width: min(32vw, 126px) !important;
    }
}

/* Home Screen Bright Theme */
#homeView {
    background: #f4f6fb !important;
    color: #1a1c1e !important;
    padding-bottom: 18px;
}

#homeView .brand-home-banner {
    background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
    border: 1px solid #e8edf5;
    border-radius: 14px;
    margin: 14px 14px 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

#homeView .hero-offer-section {
    background: transparent !important;
    padding-top: 8px !important;
}

#homeView .coins-card {
    background: #ffffff !important;
    border: 1px solid #e8edf5 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

/* Force light chrome (top + bottom) and readable text/icons */
body,
.container,
#mainContent,
#homeView {
    background: #f4f6fb !important;
    color: #1a1c1e !important;
}

.header {
    background: #ffffff !important;
    border-bottom: 1px solid #e7edf6 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

.header .header-location-value,
.header .header-location-area {
    color: #111827 !important;
}

.header .header-location-city,
.header .header-location-label {
    color: #6b7280 !important;
}

.tpp-wallet-pill {
    background: #ffffff !important;
    border: 1px solid #dbe5f2 !important;
}

.tpp-wallet-pill .wallet-amount {
    color: #111827 !important;
}

.profile-icon-btn {
    background: #ffffff !important;
    border: 1px solid #dbe5f2 !important;
}

.profile-img-mock {
    filter: invert(1) brightness(0.2);
}

.bottom-nav {
    background: #ffffff !important;
    border-top: 1px solid #e7edf6 !important;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.06) !important;
}

.nav-item {
    color: #475467 !important;
}

.nav-item.active {
    color: #f04e7c !important;
}

.nav-icon,
.nav-label {
    color: inherit !important;
}

#homeView h1,
#homeView h2,
#homeView h3,
#homeView h4,
#homeView h5,
#homeView h6,
#homeView p,
#homeView span,
#homeView div {
    color: #111827;
}

#homeView .offer-title,
#homeView .offer-subtitle {
    color: #ffffff !important;
}

#homeView .offer-title span {
    color: #fbc531 !important;
}

/* Strong light-theme enforcement for Home shell/chrome */
body,
html,
.container,
#mainContent,
#homeView,
#homeView .brand-home-banner,
#homeView .hero-offer-section {
    background-color: #f4f6fb !important;
    background-image: none !important;
    color: #111827 !important;
}

.header,
.header-left,
.header-actions {
    background: #ffffff !important;
    background-image: none !important;
    border-bottom: 1px solid #e7edf6 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

.header .header-location-value,
.header .header-location-area,
.header .header-location-city,
.header .header-location-label {
    color: #111827 !important;
}

.tpp-wallet-pill {
    background: #ffffff !important;
    border: 1px solid #dbe5f2 !important;
}

.tpp-wallet-pill .wallet-amount {
    color: #111827 !important;
}

.profile-icon-btn {
    background: #ffffff !important;
    border: 1px solid #dbe5f2 !important;
}

.profile-img-mock {
    filter: invert(0) brightness(0.2) !important;
}

.bottom-nav {
    background: #ffffff !important;
    background-image: none !important;
    border-top: 1px solid #e7edf6 !important;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.06) !important;
}

.nav-item,
.nav-item .nav-label,
.nav-item .nav-icon {
    color: #4b5563 !important;
    opacity: 1 !important;
}

.nav-item.active,
.nav-item.active .nav-label,
.nav-item.active .nav-icon {
    color: #f04e7c !important;
}

#homeView h1,
#homeView h2,
#homeView h3,
#homeView h4,
#homeView h5,
#homeView h6,
#homeView p,
#homeView span,
#homeView div,
#homeView .section-title,
#homeView .mission-title,
#homeView .mission-quote,
#homeView .mission-text,
#homeView .coins-info h4,
#homeView .coins-info p {
    color: #111827 !important;
}

/* Bright PWA install banner (keep logo/icon unchanged) */
#pwa-install-banner,
.dark-theme-banner {
    background: #ffffff !important;
    background-image: none !important;
    color: #111827 !important;
    border-top: 1px solid #e7edf6 !important;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08) !important;
}

#pwa-install-banner .pwa-text h4 {
    color: #111827 !important;
}

#pwa-install-banner .pwa-text p {
    color: #4b5563 !important;
}

#installBtn {
    background: #16a34a !important;
    color: #ffffff !important;
    border: none !important;
}

#closePwaBtn {
    color: #374151 !important;
    opacity: 1 !important;
}

/* Bright side drawer theme */
.side-drawer {
    background: #ffffff !important;
    color: #111827 !important;
    border-right: 1px solid #e5e7eb !important;
    box-shadow: 8px 0 24px rgba(17, 24, 39, 0.14) !important;
}

.drawer-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.drawer-profile-icon {
    background: #f3f4f6 !important;
    color: #111827 !important;
}

.drawer-profile-icon svg path {
    fill: #111827 !important;
}

.drawer-user-title {
    color: #111827 !important;
}

.drawer-user-sub,
.cycle-text {
    color: #4b5563 !important;
}

.drawer-item {
    color: #111827 !important;
    border-bottom: 1px solid #eef2f7 !important;
}

.drawer-item-icon {
    color: #374151 !important;
    filter: none !important;
}

.drawer-item-label {
    color: #111827 !important;
}

.drawer-login-btn {
    color: #ffffff !important;
}

.drawer-footer {
    color: #6b7280 !important;
    border-top: 1px solid #e5e7eb !important;
    background: #ffffff !important;
}

/* Bright auth modal with dark readable text */
.login-modal-full {
    background: #f8fafc !important;
    color: #111827 !important;
}

.login-header-top,
.login-brand-promise,
.login-slider-container,
.login-action-area {
    background: #ffffff !important;
    color: #111827 !important;
}

.login-brand-promise h2,
.slider-text h3,
.login-benefits-title {
    color: #111827 !important;
}

.slider-text p,
.login-footer-terms,
#forgot-pass-view p {
    color: #4b5563 !important;
}

.slider-image-box {
    background: #f8fafc !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
}

.auth-toggle {
    background: #f3f4f6 !important;
}

.auth-toggle-btn {
    color: #4b5563 !important;
}

.auth-toggle-btn.active {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb !important;
}

.auth-input {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
}

.auth-input::placeholder {
    color: #9ca3af !important;
}

.forgot-password-link,
.login-footer-terms a {
    color: #0f766e !important;
}

.social-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    border: 1px solid #d1d5db !important;
    background: #ffffff !important;
    color: #111827 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    margin-top: 10px !important;
    cursor: pointer !important;
}

.social-btn.phone-auth-btn {
    background: #f8fafc !important;
}

/* Premium light profile screen */
#profileView.profile-view-container,
.profile-view-container {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    color: #111827 !important;
}

#profileView .profile-header-bar,
.profile-view-container .profile-header-bar {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
}

#profileView .profile-header-title,
#profileView .btn-back {
    color: #111827 !important;
}

#profileView .profile-section-card,
.profile-view-container .profile-section-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
    border-radius: 14px !important;
}

#profileView .profile-section-title {
    color: #0f172a !important;
    font-weight: 800 !important;
}

#profileView .wallet-card-visual {
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 55%, #1d4ed8 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 8px 20px rgba(37, 99, 235, 0.24) !important;
}

#profileView .wallet-bal-label {
    color: rgba(255, 255, 255, 0.9) !important;
}

#profileView .wallet-bal-val {
    color: #ffffff !important;
}

#profileView .btn-action-tile {
    color: #111827 !important;
    border-bottom: 1px solid #eef2f7 !important;
}

#profileView .btn-action-tile span,
#profileView .address-text,
#profileView .empty-state-text,
#profileView .order-date,
#profileView .order-items-summary {
    color: #4b5563 !important;
}

#profileView .address-item {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

#profileView .address-item.selected {
    border-color: #22c55e !important;
    background: #f0fdf4 !important;
}

#profileView .address-type-tag {
    background: #eef2ff !important;
    color: #3730a3 !important;
    border: 1px solid #c7d2fe !important;
}

#profileView .btn-add-address {
    background: #f8fafc !important;
    border: 1px dashed #94a3b8 !important;
    color: #0f766e !important;
}

#profileView .order-total,
#profileView .order-top {
    color: #0f172a !important;
}

#profileView .profile-order-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
}

/* Profile overlays must appear above profile screen */
#dialog-layer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 28000 !important;
    pointer-events: none !important;
}

#dialog-layer .dialog-overlay {
    z-index: 28001 !important;
    pointer-events: auto !important;
}

#addAddressView.map-view-container,
.map-view-container {
    z-index: 30020 !important;
}

/* Keep map and form in separate non-overlapping blocks */
#addAddressView.map-view-container {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #ffffff !important;
    z-index: 40000 !important;
    pointer-events: auto !important;
    isolation: isolate !important;
    transform: none !important;
}

#addAddressView #map {
    height: 100% !important;
    width: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.btn-load-more-orders {
    width: 100%;
    margin-top: 8px;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

/* Bright add-address/map editor theme */
#addAddressView .address-form-container,
#addAddressView .current-location-display,
#addAddressView .map-pin-label {
    background: #ffffff !important;
    color: #111827 !important;
}

#addAddressView .map-pin-label {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08) !important;
}

#addAddressView .address-input-label,
#addAddressView #map-address-text {
    color: #374151 !important;
}

#addAddressView .address-input-field,
#addAddressView .address-input-field:focus {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
}

#addAddressView .address-input-field::placeholder {
    color: #9ca3af !important;
}

#addAddressView .save-as-chip {
    background: #ffffff !important;
    color: #475467 !important;
    border: 1px solid #d1d5db !important;
}

#addAddressView .save-as-chip.selected {
    background: #ecfeff !important;
    color: #0f766e !important;
    border-color: #5eead4 !important;
}

/* Compact address form to reveal more map area */
#addAddressView .address-form-container {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    max-height: 62dvh !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 10px 14px calc(16px + env(safe-area-inset-bottom)) !important;
    margin-top: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    border-top: 1px solid #e5e7eb !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    z-index: 1300 !important;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.14) !important;
}

#addAddressView .address-save-btn {
    width: 100% !important;
    margin-top: 10px !important;
    display: block !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
}

#addAddressView .current-location-display {
    margin-bottom: 8px !important;
}

#addAddressView .address-input-group {
    margin-bottom: 6px !important;
}

#addAddressView .address-input-label {
    margin-bottom: 4px !important;
    font-size: 11px !important;
}

#addAddressView .address-input-field {
    padding: 9px 10px !important;
    font-size: 13px !important;
}

#addAddressView .save-as-chips {
    gap: 6px !important;
    margin-top: 4px !important;
    margin-bottom: 12px !important;
}

.map-view-container {
    height: 100vh !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
}

#addAddressView .save-as-chip {
    padding: 7px 12px !important;
    font-size: 12px !important;
}

.map-gps-btn-preserve {
    position: absolute !important;
    bottom: 64vh !important;
    right: 16px !important;
    width: 46px !important;
    height: 46px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1005 !important;
    cursor: pointer !important;
    border: 1px solid #e2e8f0 !important;
}

/* Guaranteed-visible map center pin */
#addAddressView .map-pin-overlay {
    z-index: 1301 !important;
    top: 22vh !important;
    transform: translate(-50%, -100%) !important;
}

#addAddressView .map-pin-icon {
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25)) !important;
}

.map-premium-back {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    border: 1px solid #1f2937 !important;
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%) !important;
    color: #f9fafb !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.28) !important;
}

.map-premium-back:active {
    transform: translateY(1px);
}

/* Match profile dialogs with Saved Cards light popup theme */
#dialog-layer .custom-dialog {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18) !important;
}

#dialog-layer .custom-dialog h3 {
    color: #0f172a !important;
    font-weight: 800 !important;
}

#dialog-layer .custom-dialog p {
    color: #4b5563 !important;
}

#dialog-layer .dialog-btn-row {
    gap: 10px !important;
}

#dialog-layer .dialog-btn {
    min-width: 112px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    font-weight: 700;
    font-size: 13px;
}

#dialog-layer .btn-cancel {
    background: #ffffff !important;
    color: #374151 !important;
}

#dialog-layer .btn-confirm {
    background: #0f766e !important;
    color: #ffffff !important;
    border-color: #0f766e !important;
}

/* Menu view -> bright mode like cart */
#menuView {
    background: #f4f6fb !important;
    color: #111827 !important;
}

#menuView .menu-header-bar {
    background: #ffffff !important;
    color: #111827 !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding-top: calc(4px + var(--sat)) !important;
    padding-bottom: 4px !important;
    top: 0 !important;
}

#menuView .menu-title-text,
#menuView .btn-back,
#menuView .btn-search-trigger {
    color: #111827 !important;
}

#menuView .filters-bar {
    background: #ffffff !important;
    border-bottom: 1px solid #eef2f7 !important;
    min-height: 38px !important;
    align-items: center !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    box-sizing: border-box !important;
    top: calc(42px + var(--sat)) !important;
}

#menuView .filter-chip {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
}

#menuView .filter-chip.active {
    background: #ecfeff !important;
    border-color: #67e8f9 !important;
    color: #0f766e !important;
}

#menuView .menu-cat-chips {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    min-height: 34px !important;
    align-items: center !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    box-sizing: border-box !important;
    top: calc(78px + var(--sat)) !important;
}

#menuView .cat-chip {
    color: #6b7280 !important;
}

#menuView .cat-chip.active {
    color: #111827 !important;
    border-bottom-color: #f04e7c !important;
}

#menuView.menu-cat-fixed .menu-chrome-rail {
    position: fixed !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(100%, 600px) !important;
    max-width: 100% !important;
    z-index: 1002 !important;
    background: #ffffff !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}

#menuView.menu-cat-fixed .menu-header-bar,
#menuView.menu-cat-fixed .filters-bar,
#menuView.menu-cat-fixed .menu-cat-chips {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

#menuView.menu-cat-fixed .menu-cat-chips {
    position: fixed !important;
    top: calc(78px + var(--sat)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(100%, 600px) !important;
    max-width: 100% !important;
    z-index: 1000 !important;
}

#menuView.menu-cat-fixed.search-active .menu-cat-chips {
    top: calc(138px + var(--sat)) !important;
}

#menuView.menu-cat-fixed #categoriesContainer {
    padding-top: 156px !important;
}

#menuView.menu-cat-fixed.search-active #categoriesContainer {
    padding-top: 214px !important;
}

#menuView.menu-cat-fixed .menu-cat-chips {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    z-index: auto !important;
}

#searchContainer {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    top: calc(54px + var(--sat)) !important;
    z-index: 1004 !important;
}

#menuSearchInput {
    background: transparent !important;
    color: #111827 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border-radius: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

#menuSearchInput::placeholder {
    color: #9ca3af !important;
}

#homeCategorySearchWrapper {
    background: #ffffff !important;
}

#homeCategorySearchInput {
    background: transparent !important;
    color: #111827 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border-radius: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-text-fill-color: #111827 !important;
    font-size: 15px !important;
    line-height: 20px !important;
}

#homeCategorySearchInput::placeholder {
    color: #9ca3af !important;
}

#homeCategorySearchInput::-webkit-search-decoration,
#homeCategorySearchInput::-webkit-search-cancel-button,
#homeCategorySearchInput::-webkit-search-results-button,
#homeCategorySearchInput::-webkit-search-results-decoration {
    -webkit-appearance: none !important;
}

#homeCategorySearchInput:-webkit-autofill,
#homeCategorySearchInput:-webkit-autofill:hover,
#homeCategorySearchInput:-webkit-autofill:focus,
#homeCategorySearchInput:-webkit-autofill:active {
    -webkit-text-fill-color: #111827 !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    transition: background-color 9999s ease-in-out 0s;
}

#menuView .premium-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden !important;
}

#menuView .card-footer {
    background: rgba(17, 24, 39, 0.82) !important;
    color: #ffffff !important;
    border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(6px);
    margin-top: -1px !important;
}

#menuView .card-image-box {
    line-height: 0 !important;
    background: transparent !important;
}

#menuView .card-img-main {
    display: block !important;
}

#menuView .item-price-val {
    color: #ffffff !important;
}

#menuView .card-variant-selection {
    color: rgba(255, 255, 255, 0.78) !important;
}

#menuView .btn-add-red {
    background: #f04e7c !important;
    color: #ffffff !important;
}

/* Ensure auth/login always overlays cart and floating pills */
#accountViewContainer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 26010 !important;
    pointer-events: auto !important;
}

#accountViewContainer>.side-drawer-overlay,
#accountViewContainer>.side-drawer,
#accountViewContainer>.profile-view-container,
#accountViewContainer>.login-modal-full {
    pointer-events: auto !important;
}

#accountViewContainer:empty {
    pointer-events: none !important;
}

.login-modal-full {
    z-index: 26011 !important;
}
/* Capacitor Safe Area Fixes */
:root {
  --sat: env(safe-area-inset-top);
}
body {
  padding-top: 0 !important;
}
.cart-view, .side-drawer-overlay, .login-modal-full, .order-success, .profile-view-container, .modal-overlay, .dialog-overlay, .out-of-stock-overlay, .custom-alert-overlay {
  padding-top: var(--sat) !important;
}
.cart-header, .drawer-header, .order-success-header, .profile-header {
  top: var(--sat) !important;
}

#customAlertModal.loading {
    pointer-events: auto !important;
}

#customAlertModal.loading .custom-alert-box {
    position: relative;
    padding-top: 56px;
}

#customAlertModal.loading .custom-alert-box::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 50%;
    width: 26px;
    height: 26px;
    margin-left: -13px;
    border-radius: 50%;
    border: 3px solid rgba(15, 118, 110, 0.18);
    border-top-color: #0f766e;
    animation: tppLoaderSpin 0.85s linear infinite;
}

    top: calc(54px + var(--sat)) !important;
    z-index: 1004 !important;
}

#menuSearchInput {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
}

#menuSearchInput::placeholder {
    color: #9ca3af !important;
}

#menuView .premium-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden !important;
}

#menuView .card-footer {
    background: rgba(17, 24, 39, 0.82) !important;
    color: #ffffff !important;
    border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(6px);
    margin-top: -1px !important;
}

#menuView .card-image-box {
    line-height: 0 !important;
    background: transparent !important;
}

#menuView .card-img-main {
    display: block !important;
}

#menuView .item-price-val {
    color: #ffffff !important;
}

#menuView .card-variant-selection {
    color: rgba(255, 255, 255, 0.78) !important;
}

#menuView .btn-add-red {
    background: #f04e7c !important;
    color: #ffffff !important;
}

/* Ensure auth/login always overlays cart and floating pills */
#accountViewContainer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 26010 !important;
    pointer-events: auto !important;
}

#accountViewContainer>.side-drawer-overlay,
#accountViewContainer>.side-drawer,
#accountViewContainer>.profile-view-container,
#accountViewContainer>.login-modal-full {
    pointer-events: auto !important;
}

#accountViewContainer:empty {
    pointer-events: none !important;
}

.login-modal-full {
    z-index: 26011 !important;
}
/* Capacitor Safe Area Fixes */
:root {
  --sat: env(safe-area-inset-top);
}
body {
  padding-top: 0 !important;
}
.cart-view, .side-drawer-overlay, .login-modal-full, .order-success, .profile-view-container, .modal-overlay, .dialog-overlay, .out-of-stock-overlay, .custom-alert-overlay {
  padding-top: var(--sat) !important;
}
.cart-header, .drawer-header, .order-success-header, .profile-header {
  top: var(--sat) !important;
}

#customAlertModal.loading {
    pointer-events: auto !important;
}

#customAlertModal.loading .custom-alert-box {
    position: relative;
    padding-top: 56px;
}

#customAlertModal.loading .custom-alert-box::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 50%;
    width: 26px;
    height: 26px;
    margin-left: -13px;
    border-radius: 50%;
    border: 3px solid rgba(15, 118, 110, 0.18);
    border-top-color: #0f766e;
    animation: tppLoaderSpin 0.85s linear infinite;
}

#customAlertModal.loading .custom-alert-content p {
    margin-bottom: 0;
    font-weight: 600;
}


@keyframes tppLoaderSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Premium Light Home View Theme Overrides */
.home-view-premium-light {
    background-color: #f8f9fa !important;
    color: #111827 !important;
    min-height: 100vh;
    padding-bottom: 90px;
}

.home-view-premium-light .brand-home-banner {
    background: #ffffff !important;
    border-bottom: 1px solid #f1f3f5 !important;
}

.home-view-premium-light .brand-home-banner div {
    color: #111827 !important;
}

/* Header Premium Light */
.header-premium-light {
    background: #ffffff !important;
    border-bottom: 1px solid #f1f3f5 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
    height: 64px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* TPP Wallet Pill Premium Light */
.tpp-wallet-pill-light {
    background: #ffffff !important;
    border: 1.5px solid #ffd780 !important;
    border-radius: 999px !important;
    padding: 4px 10px 4px 6px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: 0 2px 6px rgba(255, 215, 128, 0.15) !important;
    transition: all 0.2s ease !important;
}

.tpp-wallet-pill-light:active {
    transform: scale(0.96) !important;
}

.wallet-item-light {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.wallet-tpp-logo-circle {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #fff9e6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.wallet-tpp-logo-img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
}

.wallet-text-column {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.1 !important;
    text-align: left !important;
}

.wallet-amount-light {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #b25900 !important;
}

.wallet-label-light {
    font-size: 8px !important;
    font-weight: 700 !important;
    color: #8c92a0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

/* Profile Icon Button Light */
.profile-icon-btn-light {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 1.5px solid #e9ecef !important;
    background: #f8f9fa !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
}

.profile-icon-btn-light:active {
    transform: scale(0.94) !important;
}

.profile-img-mock-light {
    font-size: 18px !important;
    color: #495057 !important;
}

/* Bottom Navigation Bar Light */
.bottom-nav-light {
    background: #ffffff !important;
    border-top: 1px solid #f1f3f5 !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 66px !important;
    z-index: 9999 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
}

.nav-item-light {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    height: 100% !important;
    cursor: pointer !important;
    color: #8a90a2 !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
}

.nav-item-light.active {
    color: #ff9933 !important;
}

.nav-label-light {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
}

/* Navigation Icons SVGs */
.nav-icon-svg {
    width: 22px !important;
    height: 22px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: transform 0.2s ease !important;
}

.nav-item-light:active .nav-icon-svg {
    transform: scale(0.88) !important;
}

.home-icon-svg {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238a90a2" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>') !important;
}

.nav-item-light.active .home-icon-svg {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ff9933" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>') !important;
}

.menu-icon-svg {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238a90a2" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>') !important;
}

.nav-item-light.active .menu-icon-svg {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ff9933" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>') !important;
}

.spin-icon-svg {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238a90a2" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path><path d="M2 12h20"></path></svg>') !important;
}

.nav-item-light.active .spin-icon-svg {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ff9933" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path><path d="M2 12h20"></path></svg>') !important;
}