/*
 * Foody - Custom Styles
 * =====================
 * Only styles that cannot be achieved with Tailwind
 */

/* ==================== BASE ==================== */
* {
    font-family: 'Vazirmatn', system-ui, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
}

body {
    overscroll-behavior: none;
    background-color: var(--rm-bg, #F9FAFB);
}

/* Restaurant Menu dark palette.
   Brand colors remain branch-configurable through --color-primary-* while
   these tokens keep neutral surfaces and text consistent across the UI. */
html.dark,
body.dark-mode {
    --rm-dark-canvas: var(--rm-dark-canvas-custom, #0B1220);
    --rm-dark-surface: #111827;
    --rm-dark-surface-raised: #182230;
    --rm-dark-surface-interactive: #223044;
    --rm-dark-border: #334155;
    --rm-dark-border-soft: rgba(148, 163, 184, 0.14);
    --rm-dark-text: #F8FAFC;
    --rm-dark-text-secondary: #CBD5E1;
    --rm-dark-text-muted: #94A3B8;
    --rm-dark-text-disabled: #64748B;
    --rm-dark-glass: rgba(17, 24, 39, 0.86);
    --rm-dark-shadow: rgba(0, 0, 0, 0.46);
    background-color: var(--rm-dark-canvas) !important;
}

body.dark-mode {
    color: var(--rm-dark-text);
}

/* ==================== SCROLLBAR ==================== */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ==================== SNAP SCROLL ==================== */
.snap-x {
    scroll-snap-type: x mandatory;
}

.snap-start {
    scroll-snap-align: start;
}

/* ==================== LINE CLAMP ==================== */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==================== PATTERNS ==================== */
.hero-pattern {
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

.restaurant-pattern {
    background-image: radial-gradient(circle, color-mix(in srgb, var(--color-primary-600) 8%, transparent) 2px, transparent 2px);
    background-size: 24px 24px;
}

/* ==================== ANIMATIONS ==================== */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

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

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    0% { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes pulseSoft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

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

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

.animate-scale-in {
    animation: scaleIn 0.3s ease-out forwards;
}

.animate-pulse-soft {
    animation: pulseSoft 2s ease-in-out infinite;
}

/* ==================== BOTTOM NAVIGATION — iOS Floating Tab Bar ==================== */
.bnav-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    display: flex;
    justify-content: center;
    pointer-events: none;
    padding: 0 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
}

.bnav-capsule {
    pointer-events: auto;
    display: flex;
    align-items: stretch;
    gap: 0;
    background: rgba(255,255,255,0.72);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
    border-radius: 26px;
    padding: 6px 6px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06), inset 0 0 0 0.5px rgba(255,255,255,0.5);
    max-width: 360px;
    width: 100%;
}

.bnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 0;
    border: none;
    background: none;
    cursor: pointer;
    text-decoration: none;
    border-radius: 14px;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease;
}
.bnav-item:active {
    transform: scale(0.9);
}

/* Icon wrapper */
.bnav-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 26px;
    color: #9ca3af;
    transition: color 0.2s ease, transform 0.2s ease;
}
.bnav-icon svg {
    transition: stroke-width 0.2s ease;
}

/* Label — iOS: همیشه دیده می‌شود، ریز و زیر آیکن */
.bnav-label {
    font-size: 0.625rem;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #9ca3af;
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* Badge */
.bnav-badge {
    position: absolute;
    top: -5px;
    left: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--color-primary-600, #FF5722);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    line-height: 1;
}

/* وقتی JS کلاس hidden را اضافه می‌کند (سبد/علاقه‌مندیِ خالی) باید واقعاً مخفی شود.
   چون display:flex بالا با .hidden تیلویند هم‌وزن است، این قانون دو-کلاسه برنده می‌شود. */
.bnav-badge.hidden {
    display: none;
}

/* ---------- Active state (iOS: فقط رنگِ اکسنت، بدون کادر/پیل) ---------- */
.bnav-item.active .bnav-icon {
    color: var(--color-primary-500, #f97316);
}
.bnav-item.active .bnav-icon svg {
    stroke-width: 2.4;
}
.bnav-item.active .bnav-label {
    color: var(--color-primary-500, #f97316);
    font-weight: 600;
}

/* ---------- Note mode: آیکن دفترچه در bottom nav ---------- */
.bnav-item--note .bnav-icon {
    color: #6b7280;
}
.bnav-item--note.active .bnav-icon,
.bnav-item--note.active .bnav-label {
    color: #4b5563;
}

/* ==================== FOOD CARD ==================== */
.food-card {
    opacity: 0;
    animation: fadeIn 0.4s ease-out forwards;
}

.food-card:nth-child(1) { animation-delay: 0ms; }
.food-card:nth-child(2) { animation-delay: 50ms; }
.food-card:nth-child(3) { animation-delay: 100ms; }
.food-card:nth-child(4) { animation-delay: 150ms; }
.food-card:nth-child(5) { animation-delay: 200ms; }
.food-card:nth-child(6) { animation-delay: 250ms; }
.food-card:nth-child(7) { animation-delay: 300ms; }
.food-card:nth-child(8) { animation-delay: 350ms; }
.food-card:nth-child(9) { animation-delay: 400ms; }
.food-card:nth-child(10) { animation-delay: 450ms; }
.food-card:nth-child(11) { animation-delay: 500ms; }
.food-card:nth-child(12) { animation-delay: 550ms; }

/* ==================== OUT OF STOCK ==================== */
/* وضعیت ناموجود: کارت محو/خاکستری می‌شود و امکان افزودن گرفته می‌شود.
   به‌روزرسانی از طریق fetch اولیه (/Home/GetAllOutOfStock) و SignalR (/productHub). */
.food-card.out-of-stock {
    filter: grayscale(0.85);
    opacity: 0.72;
}
.food-card.out-of-stock .card-image {
    position: relative;
}
.food-card.out-of-stock .add-to-cart-btn,
.food-card.out-of-stock .quantity-control {
    pointer-events: none;
    opacity: 0.45;
    cursor: not-allowed;
}
/* ردیف‌های ناموجود در کارت گروهی */
.card-group-row.out-of-stock {
    filter: grayscale(0.85);
    opacity: 0.6;
}
.card-group-row.out-of-stock .add-to-cart-btn,
.card-group-row.out-of-stock .quantity-control {
    pointer-events: none;
    opacity: 0.45;
    cursor: not-allowed;
}

/* بَج «ناموجود» روی تصویر محصول */
.rm-out-of-stock-badge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, 0.45);
    z-index: 5;
    pointer-events: none;
}
.rm-out-of-stock-badge span {
    background: #DC2626;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Variant/additive sub-text under a cart line's product name. */
.rm-cart-item__options {
    line-height: 1.4;
}
.rm-sidebar-cart-item__info .rm-cart-item__options {
    font-size: 0.7rem;
    color: #9CA3AF;
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==================== CATEGORY ITEM ==================== */
.category-item {
    transition: all 0.2s ease;
}

.category-item .category-img-wrapper {
    border: 2px solid transparent;
}

.category-item.active .category-img-wrapper {
    border-color: var(--color-primary-600);
    background-color: color-mix(in srgb, var(--color-primary-600) 8%, #f3f4f6);
}

.category-item.active .category-label {
    color: var(--color-primary-600);
    font-weight: 600;
}

.category-item:hover .category-img-wrapper {
    background-color: #e5e7eb;
}

/* ==================== BOTTOM-SHEET MODALS — unified app-like motion ====================
   همهٔ مودال‌های کشویی (سبد/علاقه‌مندی/اطلاعات/تنظیمات/پروفایل) با یک easing نرمِ iOS-مانند
   از پایین به بالا باز/بسته می‌شوند. id-selector بر کلاس‌های Tailwind (ease-out) غالب است. */
#cartContent,
#favoritesContent,
#infoContent,
#settingsContent,
#profileContent {
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}

#cartOverlay,
#favoritesOverlay,
#infoOverlay,
#settingsOverlay,
#profileOverlay {
    transition: opacity 300ms ease;
}

/* ==================== TOAST ==================== */
#toast.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* ==================== QUANTITY CONTROL ==================== */
.quantity-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--color-button-light);
    border-radius: 0.75rem;
    padding: 0.25rem;
}

.quantity-control.hidden {
    display: none !important;
}

.quantity-btn {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-weight: 700;
    transition: all 0.2s ease;
}

.quantity-btn:active {
    transform: scale(0.95);
}

.quantity-btn--minus {
    background-color: white !important;
    color: var(--color-button);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    border: 1px solid #e5e7eb;
}

.quantity-btn--plus {
    background-color: var(--color-button);
    color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.quantity-btn--plus:hover {
    background-color: var(--color-button-hover);
}

/* ==================== FAVORITE BUTTON ==================== */
.favorite-btn {
    transition: transform 0.2s ease;
}

.favorite-btn:active {
    transform: scale(1.2);
}

.favorite-btn.active svg {
    fill: #F44336;
    color: #F44336;
}

/* ==================== ADD TO CART BUTTON ==================== */
.add-to-cart-btn {
    transition: all 0.2s ease;
    background-color: var(--color-button) !important;
    box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--color-button) 30%, transparent) !important;
    border-radius: var(--button-radius, 9999px) !important;
}

.add-to-cart-btn.hidden {
    display: none !important;
}

.add-to-cart-btn:active {
    transform: scale(0.95);
}

/* Button Animations */
.btn-anim-scale .add-to-cart-btn:hover {
    transform: scale(1.1);
}

.btn-anim-pulse .add-to-cart-btn:hover {
    animation: btnPulse 0.5s ease-in-out;
}

.btn-anim-bounce .add-to-cart-btn:hover {
    animation: btnBounce 0.5s ease;
}

.btn-anim-shake .add-to-cart-btn:hover {
    animation: btnShake 0.5s ease;
}

.btn-anim-glow .add-to-cart-btn:hover {
    box-shadow: 0 0 20px color-mix(in srgb, var(--color-button) 60%, transparent),
                0 0 40px color-mix(in srgb, var(--color-button) 40%, transparent) !important;
}

@keyframes btnPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

@keyframes btnBounce {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-8px); }
    50% { transform: translateY(-4px); }
    70% { transform: translateY(-6px); }
}

@keyframes btnShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* Button Shape Variables */
:root {
    --button-radius: 9999px;
}

/* Apply button radius to other buttons */
.quantity-btn {
    border-radius: calc(var(--button-radius, 9999px) / 3) !important;
}

.category-item .category-img-wrapper {
    border-radius: calc(var(--button-radius, 9999px) / 4) !important;
}

/* ==================== SEARCH INPUT ==================== */
.search-input:focus {
    border-color: var(--color-primary-600);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-600) 10%, transparent);
}

/* ==================== LOADING SKELETON ==================== */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

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

/* ==================== HEADER SHADOW ON SCROLL ==================== */
#header.scrolled {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* ==================== HEADER GRADIENT ==================== */
#header.header-gradient {
    border-bottom: none;
}

#header.header-gradient .text-gray-700,
#header.header-gradient .text-gray-800 {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

#header.header-gradient .text-gray-400,
#header.header-gradient .text-gray-500 {
    color: rgba(255,255,255,0.8) !important;
}

#header.header-gradient svg {
    color: white !important;
}

#header.header-gradient .bg-gray-100 {
    background-color: rgba(255,255,255,0.2) !important;
}

#header.header-gradient .bg-gray-100:hover {
    background-color: rgba(255,255,255,0.3) !important;
}

/* ==================== OFFER CARD ==================== */
.offer-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.offer-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}

.offer-card:active {
    transform: scale(0.98);
}

/* ==================== SETTINGS MODAL ==================== */
#settingsModal.open #settingsOverlay {
    opacity: 1;
}

#settingsModal.open #settingsContent {
    transform: translateY(0);
}

/* ==================== TOGGLE SWITCHES ==================== */
.theme-toggle,
.notif-toggle {
    cursor: pointer;
}

.theme-toggle .toggle-dot {
    transition: transform 0.3s ease;
}

.theme-toggle.active {
    background-color: var(--color-primary-600, #FF5722);
}

.theme-toggle.active .toggle-dot {
    transform: translateX(-1.5rem);
}

.notif-toggle .toggle-dot {
    transition: transform 0.3s ease;
}

.notif-toggle:not(.active) {
    background-color: #D1D5DB;
}

.notif-toggle:not(.active) .toggle-dot {
    transform: translateX(1.5rem);
}

.notif-toggle.active {
    background-color: var(--color-primary-500, #FF9800);
}

/* ==================== COLOR SCHEME VARIABLES ==================== */
:root {
    /* Primary Color */
    --color-primary-50: #FFF3E0;
    --color-primary-100: #FFE0B2;
    --color-primary-200: #FFCC80;
    --color-primary-300: #FFB74D;
    --color-primary-400: #FFA726;
    --color-primary-500: #FF9800;
    --color-primary-600: #FF5722;
    --color-primary-700: #E64A19;
    --color-primary-800: #D84315;
    --color-primary-900: #BF360C;

    /* Accent Color */
    --color-accent: #FFC107;
    --color-accent-light: #FFE082;
    --color-accent-dark: #FFA000;

    /* Button Color (defaults to primary) */
    --color-button: #FF5722;
    --color-button-hover: #E64A19;
    --color-button-light: #FFF3E0;
}

/* ==================== COMPLETE TAILWIND OVERRIDES ==================== */

/* Background colors */
.bg-primary-50 { background-color: var(--color-primary-50) !important; }
.bg-primary-100 { background-color: var(--color-primary-100) !important; }
.bg-primary-200 { background-color: var(--color-primary-200) !important; }
.bg-primary-300 { background-color: var(--color-primary-300) !important; }
.bg-primary-400 { background-color: var(--color-primary-400) !important; }
.bg-primary-500 { background-color: var(--color-primary-500) !important; }
.bg-primary-600 { background-color: var(--color-primary-600) !important; }
.bg-primary-700 { background-color: var(--color-primary-700) !important; }
.bg-primary-800 { background-color: var(--color-primary-800) !important; }
.bg-primary-900 { background-color: var(--color-primary-900) !important; }

/* Text colors */
.text-primary-50 { color: var(--color-primary-50) !important; }
.text-primary-100 { color: var(--color-primary-100) !important; }
.text-primary-200 { color: var(--color-primary-200) !important; }
.text-primary-300 { color: var(--color-primary-300) !important; }
.text-primary-400 { color: var(--color-primary-400) !important; }
.text-primary-500 { color: var(--color-primary-500) !important; }
.text-primary-600 { color: var(--color-primary-600) !important; }
.text-primary-700 { color: var(--color-primary-700) !important; }
.text-primary-800 { color: var(--color-primary-800) !important; }
.text-primary-900 { color: var(--color-primary-900) !important; }

/* Border colors */
.border-primary-50 { border-color: var(--color-primary-50) !important; }
.border-primary-100 { border-color: var(--color-primary-100) !important; }
.border-primary-200 { border-color: var(--color-primary-200) !important; }
.border-primary-300 { border-color: var(--color-primary-300) !important; }
.border-primary-400 { border-color: var(--color-primary-400) !important; }
.border-primary-500 { border-color: var(--color-primary-500) !important; }
.border-primary-600 { border-color: var(--color-primary-600) !important; }
.border-primary-700 { border-color: var(--color-primary-700) !important; }

/* Gradient colors */
.from-primary-500 { --tw-gradient-from: var(--color-primary-500) !important; --tw-gradient-to: transparent !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-primary-600 { --tw-gradient-from: var(--color-primary-600) !important; --tw-gradient-to: transparent !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-primary-600 { --tw-gradient-to: var(--color-primary-600) !important; }
.to-primary-700 { --tw-gradient-to: var(--color-primary-700) !important; }

/* Shadow colors */
.shadow-primary-500\/30 { --tw-shadow-color: var(--color-primary-500) !important; --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color) !important; }
.shadow-primary-500\/50 { --tw-shadow-color: var(--color-primary-500) !important; --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color) !important; }
.shadow-primary-600\/30 { --tw-shadow-color: var(--color-primary-600) !important; --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color) !important; }

/* Hover states */
.hover\:bg-primary-50:hover { background-color: var(--color-primary-50) !important; }
.hover\:bg-primary-100:hover { background-color: var(--color-primary-100) !important; }
.hover\:bg-primary-600:hover { background-color: var(--color-primary-600) !important; }
.hover\:bg-primary-700:hover { background-color: var(--color-primary-700) !important; }
.hover\:text-primary-600:hover { color: var(--color-primary-600) !important; }
.hover\:text-primary-700:hover { color: var(--color-primary-700) !important; }
.hover\:border-primary-500:hover { border-color: var(--color-primary-500) !important; }

/* Focus states */
.focus\:border-primary-500:focus { border-color: var(--color-primary-500) !important; }
.focus\:ring-primary-500:focus { --tw-ring-color: var(--color-primary-500) !important; }

/* Accent color overrides */
.bg-accent { background-color: var(--color-accent) !important; }
.text-accent { color: var(--color-accent) !important; }
.border-accent { border-color: var(--color-accent) !important; }

/* Ring colors */
.ring-primary-500 { --tw-ring-color: var(--color-primary-500) !important; }

/* ==================== DARK MODE ==================== */
.dark-mode {
    color-scheme: dark;
}

.dark-mode #header,
.dark-mode #rmHeader {
    background-color: var(--rm-dark-glass);
    border-color: var(--rm-dark-border-soft);
    box-shadow: 0 10px 32px -22px var(--rm-dark-shadow);
}

.dark-mode #header .text-gray-700,
.dark-mode #header .text-gray-800,
.dark-mode #rmHeader .text-gray-700,
.dark-mode #rmHeader .text-gray-800 {
    color: var(--rm-dark-text);
}

.dark-mode #header .text-gray-400,
.dark-mode #rmHeader .text-gray-400 {
    color: var(--rm-dark-text-muted);
}

.dark-mode #header .bg-gray-100,
.dark-mode #rmHeader .bg-gray-100 {
    background-color: var(--rm-dark-surface-interactive);
}

.dark-mode #header .bg-gray-100:hover,
.dark-mode #rmHeader .bg-gray-100:hover {
    background-color: color-mix(in srgb, var(--rm-dark-surface-interactive) 78%, white);
}

.dark-mode #header svg.text-gray-600,
.dark-mode #rmHeader svg.text-gray-600 {
    color: var(--rm-dark-text-secondary);
}

.dark-mode .bg-white {
    background-color: var(--rm-dark-surface-raised) !important;
}

.dark-mode .food-card {
    background-color: var(--rm-dark-surface-raised) !important;
    border-color: var(--rm-dark-border-soft) !important;
    box-shadow: 0 8px 22px -16px var(--rm-dark-shadow);
}

.dark-mode .text-gray-800 {
    color: var(--rm-dark-text) !important;
}

.dark-mode .text-gray-600 {
    color: var(--rm-dark-text-secondary) !important;
}

.dark-mode .text-gray-500 {
    color: var(--rm-dark-text-muted) !important;
}

.dark-mode .text-gray-400 {
    color: var(--rm-dark-text-disabled) !important;
}

.dark-mode .border-gray-100 {
    border-color: var(--rm-dark-border-soft) !important;
}

.dark-mode .border-gray-200 {
    border-color: var(--rm-dark-border) !important;
}

.dark-mode .bg-gray-50 {
    background-color: var(--rm-dark-canvas) !important;
}

.dark-mode .bg-gray-100 {
    background-color: var(--rm-dark-surface) !important;
}

.dark-mode .quantity-control {
    background-color: var(--rm-dark-surface-interactive);
    border-color: var(--rm-dark-border-soft);
}

.dark-mode .quantity-btn--minus {
    background-color: var(--rm-dark-surface-raised);
    color: var(--color-button);
}

.dark-mode .category-item .category-img-wrapper {
    background-color: var(--rm-dark-surface-raised);
    border-color: var(--rm-dark-border-soft);
}

.dark-mode .category-item .category-img-wrapper > div:first-child {
    background-color: var(--rm-dark-surface-interactive);
}

.dark-mode .category-item .category-label {
    color: var(--rm-dark-text-secondary);
}

.dark-mode .category-item.active .category-img-wrapper {
    background-color: color-mix(in srgb, var(--color-primary-600) 18%, var(--rm-dark-surface-raised));
    border-color: var(--color-primary-600);
}

.dark-mode .category-item.active .category-label {
    color: var(--color-primary-400, var(--color-primary-600));
}

.dark-mode .search-input {
    background-color: var(--rm-dark-surface);
    border-color: var(--rm-dark-border);
    color: var(--rm-dark-text);
}

.dark-mode .search-input::placeholder {
    color: var(--rm-dark-text-disabled);
}

.dark-mode .bnav-capsule {
    background: var(--rm-dark-glass);
    border: 1px solid var(--rm-dark-border-soft);
    box-shadow: 0 12px 34px var(--rm-dark-shadow), inset 0 1px 0 rgba(255,255,255,0.04);
}

.dark-mode .bnav-icon,
.dark-mode .bnav-label {
    color: var(--rm-dark-text-muted);
}

.dark-mode .bnav-item.active .bnav-icon,
.dark-mode .bnav-item.active .bnav-label {
    color: var(--color-primary-400, #fb923c);
}

.dark-mode .bnav-badge {
    border-color: var(--rm-dark-surface);
}

.dark-mode #cartContent,
.dark-mode #settingsContent {
    background-color: var(--rm-dark-surface-raised);
}

.dark-mode #toast {
    background-color: var(--rm-dark-surface-raised);
    border-color: var(--rm-dark-border);
}

.dark-mode .shadow-sm,
.dark-mode .shadow-lg {
    --tw-shadow-color: var(--rm-dark-shadow);
}

/* Settings modal dark mode */
.dark-mode .settings-section .bg-gray-50 {
    background-color: var(--rm-dark-surface-interactive) !important;
}

.dark-mode .font-size-option {
    background-color: var(--rm-dark-surface-interactive) !important;
    border-color: var(--rm-dark-border-soft) !important;
}

/* Smooth transitions for theme changes */
body,
#header,
.food-card,
.category-item,
.search-input,
.bnav-capsule,
#cartContent,
#settingsContent,
#toast {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Note: Navigation and category active colors are defined above using CSS variables */

/* ==================== PROFILE MODAL ==================== */
#profileModal.open #profileOverlay {
    opacity: 1;
}

#profileModal.open #profileContent {
    transform: translateY(0);
}

/* Profile Tabs */
.profile-tab {
    background-color: #F3F4F6;
    color: #6B7280;
}

.profile-tab.active {
    background-color: var(--color-primary-600);
    color: white;
}

.dark-mode .profile-tab {
    background-color: #374151;
    color: #9CA3AF;
}

.dark-mode .profile-tab.active {
    background-color: var(--color-primary-600);
    color: white;
}

/* ==================== FILTER MODAL ==================== */
#filterModal.open #filterOverlay {
    opacity: 1;
}

#filterModal.open #filterContent {
    transform: translateY(0);
}

/* Sort & Rating Options */
.sort-option,
.rating-option {
    background-color: #F3F4F6;
    color: #6B7280;
    border: 2px solid transparent;
}

.sort-option.active,
.rating-option.active {
    background-color: var(--color-primary-50);
    color: var(--color-primary-600);
    border-color: var(--color-primary-500);
}

.dark-mode .sort-option,
.dark-mode .rating-option {
    background-color: #374151;
    color: #9CA3AF;
}

.dark-mode .sort-option.active,
.dark-mode .rating-option.active {
    background-color: rgba(255, 87, 34, 0.2);
    color: var(--color-primary-500);
    border-color: var(--color-primary-500);
}

/* Range Slider */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 4px;
    background: #E5E7EB;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary-600);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary-600);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.dark-mode input[type="range"] {
    background: #4B5563;
}

/* Custom Checkbox */
input[type="checkbox"] {
    accent-color: var(--color-primary-600);
}

/* Smooth modal transitions */
#profileContent,
#filterContent {
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.dark-mode #profileContent,
.dark-mode #filterContent {
    background-color: #1F2937;
}

/* ==================== IMAGE OPTIMIZATION ==================== */
/* Skeleton loading animation */
.img-skeleton {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

.dark-mode .img-skeleton {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
}

/* LQIP + Blur-up effect */
.img-container {
    position: relative;
    overflow: hidden;
    background-color: #f3f4f6;
}

.dark-mode .img-container {
    background-color: #374151;
}

.img-container img {
    opacity: 0;
    transition: opacity 0.5s ease-out, filter 0.5s ease-out;
    filter: blur(10px);
}

.img-container img.loaded {
    opacity: 1;
    filter: blur(0);
}

/* Aspect ratios - prevent CLS */
.aspect-video { aspect-ratio: 16/9; }
.aspect-square { aspect-ratio: 1/1; }
.aspect-4-3 { aspect-ratio: 4/3; }
.aspect-3-2 { aspect-ratio: 3/2; }

/* Image fill container */
.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==================== VIEW MODE TOGGLE ==================== */
.view-btn {
    color: #6B7280;
    background-color: transparent;
}

.view-btn:hover {
    color: #374151;
    background-color: rgba(0, 0, 0, 0.05);
}

.view-btn.active {
    color: var(--color-primary-600);
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dark-mode .view-btn {
    color: #9CA3AF;
}

.dark-mode .view-btn:hover {
    color: #D1D5DB;
    background-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .view-btn.active {
    color: var(--color-primary-500);
    background-color: #374151;
}

/* ==================== FOODS GRID VIEW MODES ==================== */

/* Grid View (Default) — موبایل: دو ستون فشرده */
.foods-grid[data-view="grid"] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
}

@media (min-width: 640px) {
    .foods-grid[data-view="grid"] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (min-width: 768px) {
    .foods-grid[data-view="grid"] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .foods-grid[data-view="grid"] {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}

.foods-grid[data-view="grid"] .food-card {
    display: flex;
    flex-direction: column;
}

.foods-grid[data-view="grid"] .food-card > div:first-child {
    aspect-ratio: 1/1;
}

/* ==================== فشرده‌سازی گرید در موبایل (دو ستون) ====================
   فقط < 640px اعمال می‌شود تا کارت‌های mini/vertical/group دوتایی و جمع‌وجور
   شوند و تصویر ارتفاع کمتری بگیرد. کارت‌های full-bleed (featured/solo/duo) که
   grid-column:1/-1 دارند دست‌نخورده می‌مانند. */
@media (max-width: 639px) {
    /* تصویر کوتاه‌تر: مربع → 4/3 */
    .foods-grid[data-view="grid"] .food-card > div:first-child {
        aspect-ratio: 4/3;
    }
    /* کانتنت فشرده‌تر */
    .foods-grid[data-view="grid"] .food-card .card-content {
        padding: 0.5rem;
    }
    .foods-grid[data-view="grid"] .food-card .card-content h3 {
        font-size: 0.8125rem;
    }
    .foods-grid[data-view="grid"] .food-card .card-ingredients {
        font-size: 0.6875rem;
        margin-bottom: 0.25rem;
    }
    .foods-grid[data-view="grid"] .food-card .card-footer {
        margin-top: 0.25rem;
    }
    .foods-grid[data-view="grid"] .food-card .card-price {
        font-size: 0.8125rem;
    }
    /* دکمهٔ افزودن کوچک‌تر تا در نیم‌عرض جا شود */
    .foods-grid[data-view="grid"] .food-card .add-to-cart-btn {
        width: 2rem;
        height: 2rem;
    }
    .foods-grid[data-view="grid"] .food-card .add-to-cart-btn svg {
        width: 1.1rem;
        height: 1.1rem;
    }

    /* --- گروه‌کارت (mini/vertical با زیرمحصول) در حالت دو ستونه --- */
    .foods-grid[data-view="grid"] .food-card--group:not([data-overlay="1"]) .card-image {
        aspect-ratio: 16/11;
    }
    /* ردیف‌های واریانت فشرده‌تر */
    .foods-grid[data-view="grid"] .food-card--group:not([data-overlay="1"]) .card-group-row {
        padding: 0.4rem 0.5rem;
    }
    .foods-grid[data-view="grid"] .food-card--group:not([data-overlay="1"]) .card-group-row h3 {
        font-size: 0.75rem;
    }
    .foods-grid[data-view="grid"] .food-card--group:not([data-overlay="1"]) .card-group-row .card-price {
        font-size: 0.75rem;
    }
    .foods-grid[data-view="grid"] .food-card--group:not([data-overlay="1"]) .card-group-row .add-to-cart-btn {
        width: 1.85rem;
        height: 1.85rem;
    }
}

/* Grid view card footer - button left, price right */
.foods-grid[data-view="grid"] .food-card .card-footer {
    flex-direction: row-reverse;
}

.foods-grid[data-view="grid"] .food-card .card-footer > div:first-child {
    text-align: right;
    flex: 1;
}

/* Add to cart button and quantity control positioning */
.foods-grid[data-view="grid"] .food-card .card-footer .flex-shrink-0 {
    order: -1;
    margin-left: 0;
    margin-right: 0;
}

/* Ensure quantity control stays horizontal in grid view */
.foods-grid[data-view="grid"] .food-card .quantity-control {
    flex-direction: row !important;
}

/* ==================== FEATURED CARD - Grid View ==================== */

.foods-grid[data-view="grid"] .food-card--featured {
    position: relative;
    grid-column: 1 / -1;
}

/* Full-width banner aspect ratio */
.foods-grid[data-view="grid"] .food-card--featured > div:first-child {
    aspect-ratio: 16/9 !important;
}

/* Gradient overlay - bottom gradient */
.foods-grid[data-view="grid"] .food-card--featured > div:first-child::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.8) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Keep badges above gradient */
.foods-grid[data-view="grid"] .food-card--featured > div:first-child .card-badges,
.foods-grid[data-view="grid"] .food-card--featured > div:first-child .card-badges > * {
    z-index: 2;
}

.foods-grid[data-view="grid"] .food-card--featured > div:first-child .favorite-btn {
    z-index: 2;
}

/* Content overlays at bottom of image */
.foods-grid[data-view="grid"] .food-card--featured > div:last-child {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 0.75rem;
}

/* White text */
.foods-grid[data-view="grid"] .food-card--featured > div:last-child h3 {
    color: #fff;
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.foods-grid[data-view="grid"] .food-card--featured .card-ingredients {
    color: rgba(255,255,255,0.85);
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Rating in white */
.foods-grid[data-view="grid"] .food-card--featured .card-rating span {
    color: rgba(255,255,255,0.9);
}

/* Price in white */
.foods-grid[data-view="grid"] .food-card--featured .card-price {
    color: #fff !important;
}

/* Hide old price */
.foods-grid[data-view="grid"] .food-card--featured .card-old-price,
.foods-grid[data-view="grid"] .food-card--featured .line-through {
    display: none;
}

/* Dark mode */
.dark-mode .foods-grid[data-view="grid"] .food-card--featured > div:last-child h3 {
    color: #fff;
}

/* List View */
.foods-grid[data-view="list"] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.foods-grid[data-view="list"] .food-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border-radius: 1rem;
    min-height: 110px;
}

.foods-grid[data-view="list"] .food-card > div:first-child {
    width: 110px;
    min-width: 110px;
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

@media (min-width: 640px) {
    .foods-grid[data-view="list"] .food-card > div:first-child {
        width: 130px;
        min-width: 130px;
    }
    .foods-grid[data-view="list"] .food-card {
        min-height: 130px;
    }
}

.foods-grid[data-view="list"] .food-card > div:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.75rem 1rem;
    position: relative;
}

.foods-grid[data-view="list"] .food-card > div:last-child h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.125rem;
    color: #1f2937;
}

.foods-grid[data-view="list"] .food-card .card-ingredients {
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 0.375rem;
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

.foods-grid[data-view="list"] .food-card .card-rating {
    margin-bottom: 0.25rem;
}

.foods-grid[data-view="list"] .food-card .card-footer {
    margin-top: auto;
}

/* Favorite button in list view - on image */
.foods-grid[data-view="list"] .food-card .favorite-btn {
    top: 0.5rem;
    left: 0.5rem;
    right: auto;
    bottom: auto;
}

/* In list view, footer should be row layout */
.foods-grid[data-view="list"] .food-card .card-footer {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

/* Price styling in list view */
.foods-grid[data-view="list"] .food-card .card-price {
    font-size: 0.875rem;
}

/* Dark mode support for list view */
.dark-mode .foods-grid[data-view="list"] .food-card > div:last-child h3 {
    color: #f3f4f6;
}

.dark-mode .foods-grid[data-view="list"] .food-card .card-ingredients {
    color: #9ca3af;
}

/* ==================== FEATURED FOOD CARD (List View) ==================== */

/* Featured card container */
.foods-grid[data-view="list"] .food-card--featured {
    position: relative;
    min-height: 140px;
    border: none;
    background: #1a1a1a;
}

@media (min-width: 640px) {
    .foods-grid[data-view="list"] .food-card--featured {
        min-height: 160px;
    }
}

/* Image covers full card background */
.foods-grid[data-view="list"] .food-card--featured > div:first-child {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    border-radius: 0;
}

/* Dark gradient overlay for text readability (RTL: darker on right where text is) */
.foods-grid[data-view="list"] .food-card--featured > div:first-child::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 35%, rgba(0,0,0,0.75) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Keep badges and favorite above gradient */
.foods-grid[data-view="list"] .food-card--featured > div:first-child .card-badges,
.foods-grid[data-view="list"] .food-card--featured > div:first-child .card-badges > * {
    z-index: 2;
}

.foods-grid[data-view="list"] .food-card--featured > div:first-child .favorite-btn {
    z-index: 2;
}

/* Content overlay - full width on top of image */
.foods-grid[data-view="list"] .food-card--featured > div:last-child {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 2.25rem 1.25rem 0.75rem;
    justify-content: flex-start;
}

/* White typography for overlay */
.foods-grid[data-view="list"] .food-card--featured > div:last-child h3 {
    color: #fff !important;
    font-size: 1.1rem;
    font-weight: 800;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.foods-grid[data-view="list"] .food-card--featured .card-ingredients {
    color: rgba(255,255,255,0.85) !important;
}

/* Hide rating in featured card */
.foods-grid[data-view="list"] .food-card--featured .card-rating {
    display: none;
}

/* Price styling */
.foods-grid[data-view="list"] .food-card--featured .card-price {
    color: #fff !important;
    font-size: 0.95rem;
    font-weight: 700;
}

/* Hide old price in featured card */
.foods-grid[data-view="list"] .food-card--featured .card-old-price,
.foods-grid[data-view="list"] .food-card--featured .line-through {
    display: none;
}

/* Dark mode - featured card needs no special overrides (already dark) */
.dark-mode .foods-grid[data-view="list"] .food-card--featured {
    border: none;
    background: #111;
}

.dark-mode .foods-grid[data-view="list"] .food-card--featured > div:last-child h3 {
    color: #fff !important;
}

.dark-mode .foods-grid[data-view="list"] .food-card--featured .card-ingredients {
    color: rgba(255,255,255,0.85) !important;
}

/* ==================== MINI FOOD CARD (List View) ==================== */

/* Mini card container */
.foods-grid[data-view="list"] .food-card--mini {
    min-height: auto;
    border-radius: 0.75rem;
    align-items: center;
}

/* Circular small image */
.foods-grid[data-view="list"] .food-card--mini > div:first-child {
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    margin: 0.5rem;
    flex-shrink: 0;
}

/* Hide badges and favorite */
.foods-grid[data-view="list"] .food-card--mini > div:first-child .card-badges,
.foods-grid[data-view="list"] .food-card--mini > div:first-child .favorite-btn {
    display: none;
}

/* Content area - compact */
.foods-grid[data-view="list"] .food-card--mini > div:last-child {
    padding: 0.5rem 0.75rem 0.5rem 0.5rem;
    flex: 1;
    min-width: 0;
}

.foods-grid[data-view="list"] .food-card--mini > div:last-child h3 {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0;
}

.foods-grid[data-view="list"] .food-card--mini .card-ingredients {
    font-size: 0.7rem;
    margin-bottom: 0;
    opacity: 0.7;
}

/* Hide rating */
.foods-grid[data-view="list"] .food-card--mini .card-rating {
    display: none;
}

/* Footer - inline with less space */
.foods-grid[data-view="list"] .food-card--mini .card-footer {
    margin-top: 0.125rem;
}

.foods-grid[data-view="list"] .food-card--mini .card-price {
    font-size: 0.8rem;
}

/* Hide old price */
.foods-grid[data-view="list"] .food-card--mini .card-old-price,
.foods-grid[data-view="list"] .food-card--mini .line-through {
    display: none;
}

/* Smaller add-to-cart button */
.foods-grid[data-view="list"] .food-card--mini .add-to-cart-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.foods-grid[data-view="list"] .food-card--mini .add-to-cart-btn svg {
    width: 1rem;
    height: 1rem;
}

/* ==================== DUO FOOD CARDS ==================== */

/* Default: wrapper is transparent for compact view */
.food-duo-row {
    display: contents;
}

/* Grid view: stacked on mobile, side by side on desktop */
.foods-grid[data-view="grid"] .food-duo-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    grid-column: 1 / -1;
}

@media (min-width: 1024px) {
    .foods-grid[data-view="grid"] .food-duo-row {
        flex-direction: row;
    }
}

.foods-grid[data-view="grid"] .food-card--duo {
    flex: 1;
    min-width: 0;
    position: relative;
}

/* Image covers full card */
.foods-grid[data-view="grid"] .food-card--duo > div:first-child {
    aspect-ratio: 4/3 !important;
}

/* Bottom gradient overlay */
.foods-grid[data-view="grid"] .food-card--duo > div:first-child::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0.92) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Badges above gradient */
.foods-grid[data-view="grid"] .food-card--duo > div:first-child .card-badges,
.foods-grid[data-view="grid"] .food-card--duo > div:first-child .card-badges > *,
.foods-grid[data-view="grid"] .food-card--duo > div:first-child > span {
    z-index: 2;
}

.foods-grid[data-view="grid"] .food-card--duo > div:first-child .favorite-btn {
    z-index: 2;
}

/* Content at bottom over image */
.foods-grid[data-view="grid"] .food-card--duo > div:last-child {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 0.75rem;
}

/* White text */
.foods-grid[data-view="grid"] .food-card--duo > div:last-child h3 {
    color: #fff;
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.foods-grid[data-view="grid"] .food-card--duo .card-ingredients {
    color: rgba(255,255,255,0.85);
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.foods-grid[data-view="grid"] .food-card--duo .card-rating span {
    color: rgba(255,255,255,0.9);
}

.foods-grid[data-view="grid"] .food-card--duo .card-price {
    color: #fff !important;
}

.foods-grid[data-view="grid"] .food-card--duo .card-old-price,
.foods-grid[data-view="grid"] .food-card--duo .line-through {
    color: rgba(255,255,255,0.5) !important;
}

/* ==================== SOLO CARD - Grid View ==================== */

.foods-grid[data-view="grid"] .food-card--solo {
    position: relative;
    grid-column: 1 / -1;
}

/* Wide banner aspect ratio */
.foods-grid[data-view="grid"] .food-card--solo > div:first-child {
    aspect-ratio: 21/9 !important;
}

/* Gradient overlay */
.foods-grid[data-view="grid"] .food-card--solo > div:first-child::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
    z-index: 1;
}

/* Keep badges above gradient */
.foods-grid[data-view="grid"] .food-card--solo > div:first-child .card-badges,
.foods-grid[data-view="grid"] .food-card--solo > div:first-child .card-badges > * {
    z-index: 2;
}

.foods-grid[data-view="grid"] .food-card--solo > div:first-child .favorite-btn {
    z-index: 2;
}

/* Content overlays at bottom of image */
.foods-grid[data-view="grid"] .food-card--solo > div:last-child {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 1rem;
}

/* White text */
.foods-grid[data-view="grid"] .food-card--solo > div:last-child h3 {
    color: #fff;
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.foods-grid[data-view="grid"] .food-card--solo .card-ingredients {
    color: rgba(255,255,255,0.85);
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Rating in white */
.foods-grid[data-view="grid"] .food-card--solo .card-rating span {
    color: rgba(255,255,255,0.9);
}

/* Price in white */
.foods-grid[data-view="grid"] .food-card--solo .card-price {
    color: #fff !important;
}

/* Hide old price */
.foods-grid[data-view="grid"] .food-card--solo .card-old-price,
.foods-grid[data-view="grid"] .food-card--solo .line-through {
    display: none;
}

/* Dark mode */
.dark-mode .foods-grid[data-view="grid"] .food-card--solo > div:last-child h3 {
    color: #fff;
}

/* List view: stacked on mobile, side by side on desktop */
.foods-grid[data-view="list"] .food-duo-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .foods-grid[data-view="list"] .food-duo-row {
        flex-direction: row;
    }
}

/* Each duo card takes half */
.foods-grid[data-view="list"] .food-card--duo {
    flex: 1;
    min-width: 0;
    position: relative;
    min-height: 200px;
    border: none;
    flex-direction: column !important;
}

@media (min-width: 640px) {
    .foods-grid[data-view="list"] .food-card--duo {
        min-height: 220px;
    }
}

/* Full background image */
.foods-grid[data-view="list"] .food-card--duo > div:first-child {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    border-radius: 0;
}

/* Bottom gradient overlay */
.foods-grid[data-view="list"] .food-card--duo > div:first-child::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0.92) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Badges above gradient */
.foods-grid[data-view="list"] .food-card--duo > div:first-child .card-badges,
.foods-grid[data-view="list"] .food-card--duo > div:first-child .card-badges > *,
.foods-grid[data-view="list"] .food-card--duo > div:first-child > span {
    z-index: 2;
}

.foods-grid[data-view="list"] .food-card--duo .favorite-btn {
    z-index: 2;
}

/* Content at bottom of card */
.foods-grid[data-view="list"] .food-card--duo > div:last-child {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 0.75rem;
}

/* White text */
.foods-grid[data-view="list"] .food-card--duo > div:last-child h3 {
    color: #fff !important;
    font-size: 1rem;
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.foods-grid[data-view="list"] .food-card--duo .card-ingredients {
    color: rgba(255,255,255,0.85) !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.foods-grid[data-view="list"] .food-card--duo .card-rating span {
    color: rgba(255,255,255,0.9);
}

.foods-grid[data-view="list"] .food-card--duo .card-price {
    color: #fff !important;
}

.foods-grid[data-view="list"] .food-card--duo .card-old-price,
.foods-grid[data-view="list"] .food-card--duo .line-through {
    color: rgba(255,255,255,0.5) !important;
}

/* Dark mode */
.dark-mode .foods-grid[data-view="list"] .food-card--duo {
    border: none;
}

/* ==================== SOLO FOOD CARD (List View) ==================== */

/* Solo card - same visual style as duo but always full width */
.foods-grid[data-view="list"] .food-card--solo {
    position: relative;
    min-height: 200px;
    border: none;
    flex-direction: column !important;
}

@media (min-width: 640px) {
    .foods-grid[data-view="list"] .food-card--solo {
        min-height: 220px;
    }
}

/* Full background image */
.foods-grid[data-view="list"] .food-card--solo > div:first-child {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    border-radius: 0;
}

/* Bottom gradient overlay */
.foods-grid[data-view="list"] .food-card--solo > div:first-child::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0.92) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Badges above gradient */
.foods-grid[data-view="list"] .food-card--solo > div:first-child .card-badges,
.foods-grid[data-view="list"] .food-card--solo > div:first-child .card-badges > *,
.foods-grid[data-view="list"] .food-card--solo > div:first-child > span {
    z-index: 2;
}

.foods-grid[data-view="list"] .food-card--solo .favorite-btn {
    z-index: 2;
}

/* Content at bottom */
.foods-grid[data-view="list"] .food-card--solo > div:last-child {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 0.75rem;
}

/* White text */
.foods-grid[data-view="list"] .food-card--solo > div:last-child h3 {
    color: #fff !important;
    font-size: 1rem;
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.foods-grid[data-view="list"] .food-card--solo .card-ingredients {
    color: rgba(255,255,255,0.85) !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.foods-grid[data-view="list"] .food-card--solo .card-rating span {
    color: rgba(255,255,255,0.9);
}

.foods-grid[data-view="list"] .food-card--solo .card-price {
    color: #fff !important;
}

.foods-grid[data-view="list"] .food-card--solo .card-old-price,
.foods-grid[data-view="list"] .food-card--solo .line-through {
    color: rgba(255,255,255,0.5) !important;
}

.dark-mode .foods-grid[data-view="list"] .food-card--solo {
    border: none;
}

/* Compact View */
.foods-grid[data-view="compact"] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .foods-grid[data-view="compact"] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 768px) {
    .foods-grid[data-view="compact"] {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 1024px) {
    .foods-grid[data-view="compact"] {
        grid-template-columns: repeat(6, 1fr);
        gap: 0.75rem;
    }
}

.foods-grid[data-view="compact"] .food-card {
    display: flex;
    flex-direction: column;
    border-radius: 0.75rem;
}

.foods-grid[data-view="compact"] .food-card > div:first-child {
    aspect-ratio: 1/1;
    border-radius: 0.75rem 0.75rem 0 0;
}

.foods-grid[data-view="compact"] .food-card > div:last-child {
    padding: 0.375rem;
}

.foods-grid[data-view="compact"] .food-card > div:last-child h3 {
    font-size: 0.7rem;
    line-height: 1.2;
    margin-bottom: 0.125rem;
}

/* Hide rating in compact view */
.foods-grid[data-view="compact"] .food-card .card-rating {
    display: none;
}

/* Hide ingredients in compact view */
.foods-grid[data-view="compact"] .food-card .card-ingredients {
    display: none;
}

/* Hide old price in compact view */
.foods-grid[data-view="compact"] .food-card .line-through {
    display: none;
}

/* Smaller price in compact view */
.foods-grid[data-view="compact"] .food-card .text-primary-600.font-bold {
    font-size: 0.65rem;
}

/* Smaller badge in compact view */
.foods-grid[data-view="compact"] .food-card > div:first-child span {
    font-size: 0.55rem;
    padding: 0.125rem 0.25rem;
}

/* Smaller favorite button in compact view */
.foods-grid[data-view="compact"] .food-card .favorite-btn {
    width: 1.25rem;
    height: 1.25rem;
}

.foods-grid[data-view="compact"] .food-card .favorite-btn svg {
    width: 0.75rem;
    height: 0.75rem;
}

/* Smaller add to cart button in compact view */
.foods-grid[data-view="compact"] .food-card .add-to-cart-btn {
    width: 1.5rem;
    height: 1.5rem;
}

.foods-grid[data-view="compact"] .food-card .add-to-cart-btn svg {
    width: 0.875rem;
    height: 0.875rem;
}

.foods-grid[data-view="compact"] .food-card .quantity-control {
    transform: scale(0.75);
    transform-origin: left center;
}

/* View transition animation */
.foods-grid {
    transition: gap 0.3s ease;
}

.foods-grid .food-card {
    transition: all 0.3s ease;
}

/* ==================== FOOD DETAIL MODAL ==================== */
#foodDetailModal.open #foodDetailOverlay {
    opacity: 1;
}

#foodDetailModal.open #foodDetailContent {
    transform: translateY(0);
}

/* Food Detail Content Transitions */
#foodDetailContent {
    transition: transform 0.3s ease, background-color 0.3s ease;
}

#foodDetailOverlay {
    transition: opacity 0.3s ease;
}

.dark-mode #foodDetailContent {
    background-color: #1F2937;
}

/* Food card clickable area */
.food-card {
    cursor: pointer;
}

.food-card .card-image {
    cursor: pointer;
}

/* Prevent card click when clicking buttons */
.food-card .add-to-cart-btn,
.food-card .favorite-btn,
.food-card .quantity-control {
    position: relative;
    z-index: 10;
}

/* Gallery image transition */
#foodDetailImage {
    transition: opacity 0.3s ease;
}

/* Thumbnail active state */
.thumbnail-btn.active {
    border-color: var(--color-primary-500);
    opacity: 1;
}

/* Size option hover */
.size-option:hover {
    border-color: var(--color-primary-300);
}

/* Variant option hover */
.variant-option:hover {
    border-color: var(--color-primary-300);
}

/* Addon item hover */
.addon-item:hover {
    background-color: #f3f4f6;
}

.dark-mode .addon-item:hover {
    background-color: #374151;
}

/* Review item styling */
.review-item {
    transition: transform 0.2s ease;
}

.review-item:hover {
    transform: translateX(-4px);
}

/* Rating stars animation */
.rating-star {
    transition: transform 0.15s ease, color 0.15s ease;
}

.rating-star:hover {
    transform: scale(1.2);
}

/* Food detail scroll shadow */
#foodDetailScroll {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

#foodDetailScroll::-webkit-scrollbar {
    width: 4px;
}

#foodDetailScroll::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 2px;
}

.dark-mode #foodDetailScroll::-webkit-scrollbar-thumb {
    background-color: #4b5563;
}

/* Gallery dots animation */
.gallery-dot {
    transition: all 0.3s ease;
}

/* Food detail quantity buttons */
#foodDetailContent .quantity-control button:active {
    transform: scale(0.95);
}

/* Add to cart button in detail */
#foodDetailAddBtn {
    transition: all 0.2s ease;
}

#foodDetailAddBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 20px -5px rgba(255, 87, 34, 0.4);
}

#foodDetailAddBtn:active {
    transform: translateY(0);
}

/* ==================== LTR MODE ==================== */
/* Direction overrides when language is set to English (LTR) */

[dir="ltr"] {
    text-align: left;
}

[dir="ltr"] .text-right {
    text-align: left;
}

/* Toggle switch dot position fix for LTR */
[dir="ltr"] .theme-toggle .toggle-dot,
[dir="ltr"] .notif-toggle .toggle-dot {
    right: auto;
    left: 1px;
}

[dir="ltr"] .theme-toggle.bg-primary-500 .toggle-dot,
[dir="ltr"] .notif-toggle.bg-primary-500 .toggle-dot {
    transform: translateX(24px);
}

/* Notification badge position for LTR */
[dir="ltr"] #notificationBadge {
    right: auto;
    left: -4px;
}

/* Bottom nav adjustments for LTR */
[dir="ltr"] .bottom-nav-item {
    direction: ltr;
}

/* Settings modal handle - centered, no change needed */

/* Food card text alignment for LTR */
[dir="ltr"] .food-card {
    text-align: left;
}

/* Search input for LTR */
[dir="ltr"] input[type="search"],
[dir="ltr"] input[type="text"] {
    text-align: left;
}

/* Language toggle button in header */
.lang-toggle-btn {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 0.75rem;
    transition: all 0.3s ease;
}

.lang-toggle-btn:hover {
    transform: scale(1.05);
}

.lang-toggle-btn:active {
    transform: scale(0.95);
}

/* Category scroll direction for LTR */
[dir="ltr"] .category-scroll {
    direction: ltr;
}

/* Filter modal text for LTR */
[dir="ltr"] .min-order-option {
    text-align: left;
}

/* List view card layout for LTR */
[dir="ltr"] .food-card-list {
    direction: ltr;
}

/* ==================== CHECKOUT DRAWER ==================== */
#checkoutDrawer.open #checkoutOverlay {
    opacity: 1;
}

#checkoutDrawer.open #checkoutContent {
    transform: translateY(0);
}

#checkoutContent {
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1), background-color 0.3s ease;
    will-change: transform;
}

.dark-mode #checkoutContent {
    background-color: #1F2937;
}

/* ==================== SAFE AREA BOTTOM PADDING ==================== */
.pb-safe-area {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
}

/* ==================== SERVICE TYPE TABS ==================== */
.service-type-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    border: 2px solid #E5E7EB;
    background-color: #F9FAFB;
    color: #6B7280;
    transition: all 0.2s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.service-type-btn:hover {
    border-color: var(--color-primary-300);
    background-color: var(--color-primary-50);
}

.service-type-btn.active {
    border-color: var(--color-primary-500);
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
}

.service-type-btn .service-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.dark-mode .service-type-btn {
    border-color: #4B5563;
    background-color: #374151;
    color: #9CA3AF;
}

.dark-mode .service-type-btn.active {
    border-color: var(--color-primary-500);
    background-color: rgba(255, 87, 34, 0.15);
    color: var(--color-primary-400);
}

/* ==================== CHECKOUT RADIO ITEMS ==================== */
.checkout-radio-item {
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkout-radio-item.selected {
    border-color: var(--color-primary-500);
    background-color: var(--color-primary-50);
}

.checkout-radio-item.selected .radio-circle {
    border-color: var(--color-primary-600);
}

.checkout-radio-item.selected .radio-dot {
    transform: scale(1);
}

.dark-mode .checkout-radio-item.selected {
    border-color: var(--color-primary-500);
    background-color: rgba(255, 87, 34, 0.15);
}

/* ==================== TABLE SELECTION GRID ==================== */
.table-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

.table-btn {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    border: 2px solid #E5E7EB;
    background-color: #F9FAFB;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.table-btn:hover {
    border-color: var(--color-primary-300);
    transform: scale(1.05);
}

/* ===== Zone badge on address map ===== */
.rm-zone-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: background-color 0.25s, color 0.25s;
}
.rm-zone-badge--ok {
    background-color: rgba(22, 163, 74, 0.9);
    color: #ffffff;
}
.rm-zone-badge--out {
    background-color: rgba(220, 38, 38, 0.9);
    color: #ffffff;
}

/* Zone name label rendered on the polygon */
.rm-zone-label {
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: 0.7rem;
    font-weight: 700;
    color: #c2410c;
    white-space: nowrap;
}
.rm-zone-label::before { display: none; }

.table-btn.selected {
    border-color: var(--color-primary-500);
    background-color: var(--color-primary-600);
    color: white;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary-600) 40%, transparent);
}

.table-btn.occupied {
    border-color: #E5E7EB;
    background-color: #F3F4F6;
    color: #D1D5DB;
    cursor: not-allowed;
}

/* QR-locked checkout: every table except the scanned one is disabled. */
.table-btn.disabled,
.table-btn:disabled {
    border-color: #E5E7EB;
    background-color: #F3F4F6;
    color: #D1D5DB;
    cursor: not-allowed;
    opacity: .55;
    pointer-events: none;
}
.table-btn.disabled:hover,
.table-btn:disabled:hover {
    border-color: #E5E7EB;
    transform: none;
}

.dark-mode .table-btn {
    border-color: #4B5563;
    background-color: #374151;
    color: #D1D5DB;
}

.dark-mode .table-btn.selected {
    border-color: var(--color-primary-500);
    background-color: var(--color-primary-600);
    color: white;
}

/* ==================== TIME SLOTS ==================== */
.time-day-tab {
    background-color: #F3F4F6;
    color: #6B7280;
    border: 2px solid transparent;
}

.time-day-tab.active {
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
    border-color: var(--color-primary-500);
}

.dark-mode .time-day-tab {
    background-color: #374151;
    color: #9CA3AF;
}

.dark-mode .time-day-tab.active {
    background-color: rgba(255, 87, 34, 0.15);
    color: var(--color-primary-400);
    border-color: var(--color-primary-500);
}

.time-slot-btn {
    padding: 0.5rem;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    border: 2px solid #E5E7EB;
    background-color: #F9FAFB;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.time-slot-btn:hover:not(.disabled) {
    border-color: var(--color-primary-300);
}

.time-slot-btn.selected {
    border-color: var(--color-primary-500);
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
}

.time-slot-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.dark-mode .time-slot-btn {
    border-color: #4B5563;
    background-color: #374151;
    color: #D1D5DB;
}

.dark-mode .time-slot-btn.selected {
    border-color: var(--color-primary-500);
    background-color: rgba(255, 87, 34, 0.15);
    color: var(--color-primary-400);
}

/* ==================== SERVICE TOGGLE ==================== */
.service-toggle {
    cursor: pointer;
}

.service-toggle .toggle-dot {
    transition: transform 0.3s ease;
}

.service-toggle:not(.active) {
    background-color: #D1D5DB;
}

.service-toggle:not(.active) .toggle-dot {
    transform: translateX(1.5rem);
}

.service-toggle.active {
    background-color: var(--color-primary-500);
}

/* ==================== WALLET TOGGLE ==================== */
#walletToggle:checked ~ div .wallet-toggle-dot {
    transform: translateX(-1.25rem);
}

[dir="ltr"] #walletToggle:checked ~ div .wallet-toggle-dot {
    transform: translateX(1.25rem);
}

/* ==================== ADDRESS LIST PANEL ==================== */
#addressListPanel.open #addressListOverlay {
    opacity: 1;
}

#addressListPanel.open #addressListContent {
    transform: translateY(0);
}

/* ==================== DISCOUNT CODE SHEET ==================== */
#discountSheet.open #discountSheetOverlay {
    opacity: 1;
}

#discountSheet.open #discountSheetContent {
    transform: translateY(0);
}

.address-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 2px solid #E5E7EB;
    cursor: pointer;
    transition: all 0.2s ease;
}

.address-item.selected {
    border-color: var(--color-primary-500);
    background-color: var(--color-primary-50);
}

.dark-mode .address-item {
    border-color: #4B5563;
}

.dark-mode .address-item.selected {
    border-color: var(--color-primary-500);
    background-color: rgba(255, 87, 34, 0.15);
}

/* ==================== MAP STYLES ==================== */
#newAddressMap .leaflet-container,
#addressFormMiniMap .leaflet-container {
    z-index: 1;
}

#newAddressMap {
    z-index: 1;
}

/* ==================== SUGGESTED PRODUCT CARD ==================== */
.suggested-product-card {
    flex-shrink: 0;
    width: 120px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.suggested-product-card:hover {
    transform: translateY(-2px);
}

.suggested-product-card img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 0.75rem;
    margin: 0 auto 0.5rem;
}

.suggested-product-card .add-suggest-btn {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--color-primary-600);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
}

.suggested-product-card .add-suggest-btn:hover {
    transform: translateX(-50%) scale(1.1);
}

/* ==================== RESTAURANT MAP CARD ==================== */
.restaurant-map-container {
    height: 180px;
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
}

.restaurant-map-container .leaflet-container {
    height: 100%;
    width: 100%;
    border-radius: 0.75rem;
}

/* ==================== CHECKOUT ANIMATIONS ==================== */
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.animate-slide-in-right {
    animation: slideInRight 0.3s ease-out forwards;
}

/* ==================== LTR CHECKOUT ==================== */
[dir="ltr"] #checkoutContent {
    text-align: left;
}

[dir="ltr"] .service-type-btn {
    flex-direction: row-reverse;
}

[dir="ltr"] .checkout-radio-item {
    flex-direction: row-reverse;
}

[dir="ltr"] .table-grid {
    direction: ltr;
}

/* ==================== PIZZA BUILDER ==================== */

/* --- Pizza Canvas (Visual Preview) --- */
.pizza-canvas {
    width: 260px;
    height: 260px;
    border-radius: 50%;
   /* background: #d4a76a;
    box-shadow:
        0 0 0 8px #c49454,
        0 0 0 12px rgba(196, 148, 84, 0.3),
        0 20px 40px rgba(0, 0, 0, 0.15);*/
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

@media (min-width: 640px) {
    .pizza-canvas {
        width: 320px;
        height: 320px;
    }
}

.pizza-canvas:hover {
    transform: scale(1.02);
}

/* Pizza Layers */
.pizza-layer {
    position: absolute;
    border-radius: 50%;
    transition: opacity 0.4s ease, transform 0.3s ease;
}

.pizza-layer--dough {
    inset: 0;
    background:
        radial-gradient(circle at 30% 40%, rgba(255,255,255,0.1) 0%, transparent 40%),
        radial-gradient(circle at 70% 60%, rgba(0,0,0,0.05) 0%, transparent 30%),
        linear-gradient(135deg, #d4a76a 0%, #c49454 100%);
}

.pizza-layer--sauce {
    inset: 12px;
    opacity: 0;
    background: radial-gradient(circle, #c0392b 0%, #e74c3c 50%, #c0392b 100%);
}

.pizza-layer--sauce[data-sauce="tomato"] { opacity: 1; background: radial-gradient(circle, #c0392b 0%, #e74c3c 50%, #c0392b 100%); }
.pizza-layer--sauce[data-sauce="bbq"] { opacity: 1; background: radial-gradient(circle, #5D3A1A 0%, #8B4513 50%, #5D3A1A 100%); }
.pizza-layer--sauce[data-sauce="alfredo"] { opacity: 1; background: radial-gradient(circle, #F5F5DC 0%, #FAEBD7 50%, #F5F5DC 100%); }
.pizza-layer--sauce[data-sauce="pesto"] { opacity: 1; background: radial-gradient(circle, #2E7D32 0%, #4CAF50 50%, #2E7D32 100%); }
.pizza-layer--sauce[data-sauce="spicy"] { opacity: 1; background: radial-gradient(circle, #D32F2F 0%, #FF5722 50%, #D32F2F 100%); }
.pizza-layer--sauce[data-sauce="none"] { opacity: 0; }

.pizza-layer--cheese {
    inset: 16px;
    opacity: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(255,255,255,0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 50%, rgba(255,255,255,0.3) 0%, transparent 40%),
        radial-gradient(ellipse at 40% 70%, rgba(255,255,255,0.35) 0%, transparent 45%),
        linear-gradient(135deg, #FFF8DC 0%, #FFE4B5 50%, #FFF8DC 100%);
}

.pizza-layer--cheese[data-cheese="mozzarella"] { opacity: 0.85; }
.pizza-layer--cheese[data-cheese="cheddar"] {
    opacity: 0.85;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(255,200,0,0.4) 0%, transparent 50%),
        linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FFD700 100%);
}
.pizza-layer--cheese[data-cheese="parmesan"] {
    opacity: 0.7;
    background:
        radial-gradient(circle at 30% 40%, rgba(255,255,255,0.5) 2px, transparent 3px),
        radial-gradient(circle at 60% 30%, rgba(255,255,255,0.4) 1px, transparent 2px),
        radial-gradient(circle at 45% 65%, rgba(255,255,255,0.5) 2px, transparent 3px),
        linear-gradient(135deg, #FFEFD5 0%, #FFE4B5 100%);
    background-size: 20px 20px, 15px 15px, 18px 18px, 100% 100%;
}
.pizza-layer--cheese[data-cheese="mixed"] {
    opacity: 0.85;
    background:
        radial-gradient(ellipse at 25% 35%, #FFF8DC 0%, transparent 40%),
        radial-gradient(ellipse at 65% 55%, #FFD700 0%, transparent 35%),
        radial-gradient(ellipse at 45% 75%, #FFEFD5 0%, transparent 40%),
        linear-gradient(135deg, #FFF8DC 0%, #FFD700 50%, #FFEFD5 100%);
}
.pizza-layer--cheese[data-cheese="none"] { opacity: 0; }

/* Toppings container */
.pizza-toppings {
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    overflow: hidden;
}

.pizza-topping-item {
    position: absolute;
    font-size: 1.25rem;
    transition: all 0.3s ease;
    animation: toppingDrop 0.4s ease-out forwards;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
}

@media (min-width: 640px) {
    .pizza-topping-item {
        font-size: 1.5rem;
    }
}

@keyframes toppingDrop {
    0% { opacity: 0; transform: scale(0.3) translateY(-20px); }
    60% { transform: scale(1.1) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes toppingRemove {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0) translateY(-10px); }
}

.pizza-topping-item.removing {
    animation: toppingRemove 0.3s ease-in forwards;
}

/* Half divider */
.pizza-half-divider {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

.pizza-half-divider::before {
    content: '';
    position: absolute;
    top: 5%;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(0,0,0,0.2);
}

.pizza-half-label {
    position: absolute;
    top: 8px;
    font-size: 0.6rem;
    font-weight: 800;
    color: white;
    background: rgba(0,0,0,0.4);
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.pizza-half-label--right {
    right: 15%;
}

.pizza-half-label--left {
    left: 15%;
}

/* Size badge */
.pizza-size-badge {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 4px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #374151;
    white-space: nowrap;
    z-index: 5;
}

/* Canvas size variants */
.pizza-canvas[data-size="small"] { width: 200px; height: 200px; }
.pizza-canvas[data-size="large"] { width: 300px; height: 300px; }
.pizza-canvas[data-size="family"] { width: 340px; height: 340px; }

@media (min-width: 640px) {
    .pizza-canvas[data-size="small"] { width: 240px; height: 240px; }
    .pizza-canvas[data-size="large"] { width: 360px; height: 360px; }
    .pizza-canvas[data-size="family"] { width: 400px; height: 400px; }
}

/* Dark mode */
.dark-mode .pizza-size-badge {
    background: #374151;
    color: #F3F4F6;
}

/* Real image base for pizza */
.pizza-canvas-img {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
}

.pizza-canvas-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Topping as real image circle */
.pizza-topping-item img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

@media (min-width: 640px) {
    .pizza-topping-item img {
        width: 50px;
        height: 50px;
    }
}

/* --- Half Toggle Buttons --- */
.pizza-half-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #6B7280;
    background: #F3F4F6;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}

.pizza-half-btn.active {
    color: var(--color-primary-700);
    background: var(--color-primary-50);
    border-color: var(--color-primary-500);
}

.dark-mode .pizza-half-btn {
    background: #374151;
    color: #9CA3AF;
}

.dark-mode .pizza-half-btn.active {
    background: rgba(255, 87, 34, 0.15);
    color: var(--color-primary-400);
    border-color: var(--color-primary-500);
}

/* --- Wizard Steps --- */
.wizard-step {
    display: none;
}

.wizard-step--active {
    display: block;
    animation: wizardStepIn 0.35s ease-out;
}

@keyframes wizardStepIn {
    0% { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Wizard Progress Bar */
.wizard-progress-bar {
    height: 100%;
    background: var(--color-primary-600);
    border-radius: 9999px;
    transition: width 0.4s ease;
}

/* Wizard Navigation Buttons */
.wizard-nav-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    transition: all 0.2s ease;
    cursor: pointer;
}

.wizard-nav-btn--prev {
    background: #F3F4F6;
    color: #6B7280;
}

.wizard-nav-btn--prev:hover {
    background: #E5E7EB;
}

.wizard-nav-btn--next {
    background: var(--color-primary-600);
    color: white;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary-600) 30%, transparent);
}

.wizard-nav-btn--next:hover {
    background: var(--color-primary-700);
    transform: translateY(-1px);
}

.wizard-nav-btn:active {
    transform: scale(0.97);
}

.dark-mode .wizard-nav-btn--prev {
    background: #374151;
    color: #9CA3AF;
}

.dark-mode .wizard-nav-btn--prev:hover {
    background: #4B5563;
}

/* --- Builder Option Cards --- */
.builder-option-card {
    position: relative;
    display: block;
}

.builder-option-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0.5rem;
    border-radius: 1rem;
    border: 2px solid #E5E7EB;
    background: #F9FAFB;
    transition: all 0.2s ease;
}

.builder-option-card input:checked + .builder-option-inner,
.builder-option-card--check input:checked + .builder-option-inner {
    border-color: var(--color-primary-500);
    background: var(--color-primary-50);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 15%, transparent);
}

.builder-option-inner:hover {
    border-color: var(--color-primary-300);
    transform: translateY(-2px);
}

.builder-option-inner:active {
    transform: scale(0.97);
}

/* Builder Option Image */
.builder-option-img {
    width: 100%;
    margin-bottom: 0.5rem;
}

.builder-option-img img {
    transition: transform 0.3s ease;
}

.builder-option-card input:checked + .builder-option-inner .builder-option-img img,
.builder-option-card--check input:checked + .builder-option-inner .builder-option-img img {
    transform: scale(1.05);
}

/* Checkbox check indicator */
.builder-check-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #D1D5DB;
    background: white;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

[dir="ltr"] .builder-check-indicator {
    right: auto;
    left: 8px;
}

.builder-option-card--check input:checked ~ .builder-check-indicator {
    border-color: var(--color-primary-600);
    background: var(--color-primary-600);
}

.builder-option-card--check input:checked ~ .builder-check-indicator::after {
    content: '';
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}

/* Dark mode for builder cards */
.dark-mode .builder-option-inner {
    background: #374151;
    border-color: #4B5563;
}

.dark-mode .builder-option-inner .text-gray-800 {
    color: #F3F4F6;
}

.dark-mode .builder-option-card input:checked + .builder-option-inner,
.dark-mode .builder-option-card--check input:checked + .builder-option-inner {
    border-color: var(--color-primary-500);
    background: rgba(255, 87, 34, 0.15);
}

.dark-mode .builder-check-indicator {
    background: #4B5563;
    border-color: #6B7280;
}

/* --- 3-State Topping Cards (off → light → heavy → off) --- */
.builder-option-card--topping {
    position: relative;
    display: block;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.builder-option-card--topping .builder-option-inner {
    position: relative;
}

/* Light state (first click) */
.builder-option-card--topping.topping-state-light .builder-option-inner {
    border-color: var(--color-primary-400);
    background: var(--color-primary-50);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary-400) 15%, transparent);
}
.builder-option-card--topping.topping-state-light .builder-option-img img {
    transform: scale(1.05);
}

/* Heavy state (second click) */
.builder-option-card--topping.topping-state-heavy .builder-option-inner {
    border-color: var(--color-primary-600);
    background: var(--color-primary-50);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 25%, transparent);
}
.builder-option-card--topping.topping-state-heavy .builder-option-img img {
    transform: scale(1.1);
}

/* Dark mode for 3-state */
.dark-mode .builder-option-card--topping.topping-state-light .builder-option-inner {
    border-color: var(--color-primary-500);
    background: rgba(255, 87, 34, 0.1);
}
.dark-mode .builder-option-card--topping.topping-state-heavy .builder-option-inner {
    border-color: var(--color-primary-500);
    background: rgba(255, 87, 34, 0.2);
}

/* Amount badge (top-left corner of card) */
.topping-amount-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    font-size: 0.625rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: 1;
    z-index: 2;
    transition: all 0.2s ease;
    pointer-events: none;
}
[dir="ltr"] .topping-amount-badge {
    right: auto;
    left: 6px;
}
.topping-amount-badge--light {
    background: var(--color-primary-500);
    color: white;
}
.topping-amount-badge--heavy {
    background: var(--color-primary-700);
    color: white;
    box-shadow: 0 0 0 2px white;
}
.dark-mode .topping-amount-badge--heavy {
    box-shadow: 0 0 0 2px #374151;
}

/* Pulse animation on state change */
@keyframes toppingPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.06); }
    100% { transform: scale(1); }
}
.builder-option-card--topping.topping-pulse .builder-option-inner {
    animation: toppingPulse 0.25s ease;
}

/* --- Pizza Name Modal --- */
.pizza-name-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem;
}
.pizza-name-modal.hidden { display: none; }

.pizza-name-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
}
.pizza-name-modal-content {
    position: relative;
    width: 100%;
    max-width: 24rem;
    background: white;
    border-radius: 1.5rem 1.5rem 1rem 1rem;
    padding: 1.5rem;
    box-shadow: 0 -4px 30px rgba(0,0,0,0.15);
    animation: modalSlideUp 0.3s ease-out;
}
.dark-mode .pizza-name-modal-content {
    background: #1F2937;
}
@keyframes modalSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.pizza-name-modal-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 2px solid #E5E7EB;
    font-size: 0.938rem;
    font-weight: 600;
    text-align: center;
    transition: border-color 0.2s;
    background: #F9FAFB;
}
.pizza-name-modal-input:focus {
    outline: none;
    border-color: var(--color-primary-500);
    background: white;
}
.dark-mode .pizza-name-modal-input {
    background: #374151;
    border-color: #4B5563;
    color: #F3F4F6;
}
.dark-mode .pizza-name-modal-input:focus {
    border-color: var(--color-primary-500);
    background: #1F2937;
}

@keyframes modalFadeIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

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

@media (min-width: 640px) {
    .pizza-name-modal {
        align-items: center;
    }

    .pizza-name-modal-content {
        border-radius: 1.5rem;
        animation-name: modalFadeIn;
    }
}

/* --- Flavor Profile --- */
.dark-mode #toppingSummary,
.dark-mode .bg-white {
    background-color: #1F2937;
}

/* --- Price Bar --- */
#pizzaPriceBar .bg-white {
    backdrop-filter: blur(10px);
}

.dark-mode #pizzaPriceBar .bg-white {
    background-color: #1F2937;
    border-color: #374151;
}

/* --- Topping Summary Tags --- */
.topping-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    border: 1px solid var(--color-primary-200);
    animation: fadeIn 0.3s ease-out;
}

.dark-mode .topping-tag {
    background: rgba(255, 87, 34, 0.15);
    color: var(--color-primary-400);
    border-color: rgba(255, 87, 34, 0.3);
}

/* --- Saved Recipe Card --- */
.saved-recipe-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background: #F9FAFB;
    border-radius: 0.75rem;
    border: 1px solid #E5E7EB;
    transition: all 0.2s ease;
}

.saved-recipe-card:hover {
    border-color: var(--color-primary-300);
}

.dark-mode .saved-recipe-card {
    background: #374151;
    border-color: #4B5563;
}

.recipe-thumb {
    width: 48px;
    height: 48px;
    border-radius: 0.75rem;
    object-fit: cover;
    flex-shrink: 0;
}

/* --- LTR Support --- */
[dir="ltr"] .wizard-nav-btn--next svg {
    transform: scaleX(-1);
}

[dir="ltr"] .wizard-nav-btn--prev svg {
    transform: scaleX(-1);
}

[dir="ltr"] .pizza-half-label--right {
    right: auto;
    left: 15%;
}

[dir="ltr"] .pizza-half-label--left {
    left: auto;
    right: 15%;
}

/* --- Baking animation --- */
@keyframes pizzaBake {
    0% { transform: scale(1); filter: brightness(1); }
    25% { transform: scale(1.05); filter: brightness(1.1) saturate(1.2); }
    50% { transform: scale(1.02); filter: brightness(1.05); }
    75% { transform: scale(1.04); filter: brightness(1.08) saturate(1.1); }
    100% { transform: scale(1); filter: brightness(1); }
}

.pizza-canvas.baking {
    animation: pizzaBake 1.5s ease-in-out;
}

/* Steam animation after baking */
@keyframes steamRise {
    0% { opacity: 0.8; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-40px) scale(1.5); }
}

.pizza-steam {
    position: absolute;
    top: -5px;
    font-size: 1.5rem;
    opacity: 0;
    pointer-events: none;
}

.pizza-steam.active {
    animation: steamRise 1.5s ease-out forwards;
}

/* --- PNG Layer Stacking --- */
.pizza-png-layer {
    position: absolute;
    inset: 5%;
    width: 90%;
    height: 90%;
    object-fit: contain;
    transition: opacity 0.5s ease, transform 0.5s ease;
    z-index: 1;
    pointer-events: none;
}

.pizza-png-layer--hidden {
    opacity: 0;
    transform: scale(0.92);
}

#layerDough { z-index: 2; }
#layerSauce { z-index: 3; }
#layerCheese { z-index: 4; }

.pizza-topping-layers {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.pizza-topping-layers img {
    position: absolute;
    inset: 8%;
    width: 84%;
    height: 84%;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.pizza-topping-layers img.pizza-png-layer--visible {
    opacity: 1;
    transform: scale(1);
}

/* Half-and-Half Mode */
.pizza-divider {
    display: none;
    position: absolute;
    top: 5%;
    left: 50%;
    width: 2px;
    height: 90%;
    background: rgba(255,255,255,0.6);
    z-index: 10;
    transform: translateX(-50%);
    pointer-events: none;
    box-shadow: 0 0 6px rgba(0,0,0,0.3);
    border-radius: 1px;
    transition: opacity 0.4s ease;
}
.pizza-canvas--half .pizza-divider {
    display: block;
}
.pizza-topping-half-left {
    clip-path: inset(0 50% 0 0) !important;
}
.pizza-topping-half-right {
    clip-path: inset(0 0 0 50%) !important;
}
#halfToggleBtn.half-active {
    border-color: var(--color-primary-500, #f97316);
    background-color: var(--color-primary-50, #fff7ed);
    color: var(--color-primary-700, #c2410c);
}
:is(.dark #halfToggleBtn.half-active) {
    background-color: color-mix(in srgb, var(--color-primary-500) 15%, transparent);
    color: var(--color-primary-300, #fdba74);
    border-color: var(--color-primary-600, #ea580c);
}

/* ==================== PIZZA BUILDER SPLIT LAYOUT ==================== */

/* Base layout: column (mobile-first) */
.builder-layout {
    display: flex;
    flex-direction: column;
}

/* Sidebar: sticky preview on mobile (offset by header height ~4rem) */
.builder-col-sidebar {
    position: sticky;
    top: 4rem;
    z-index: 20;
    background: #F9FAFB;
    padding: 0.75rem 1rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.dark-mode .builder-col-sidebar,
.dark .builder-col-sidebar {
    background: #111827;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Main content column */
.builder-col-main {
    flex: 1;
    min-width: 0;
}

/* Desktop: two-column side-by-side layout */
@media (min-width: 1024px) {
    .builder-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.5rem;
        max-width: 80rem;
        margin: 0 auto;
        padding: 1rem;
    }

    .builder-col-main {
        flex: 1;
        order: 1;
        min-width: 0;
    }

    .builder-col-sidebar {
        width: 400px;
        flex-shrink: 0;
        order: 2;
        position: sticky;
        top: 5rem;
        padding: 1rem;
        background: transparent;
        box-shadow: none;
        border-radius: 1rem;
    }

    .dark-mode .builder-col-sidebar,
    .dark .builder-col-sidebar {
        background: transparent;
        box-shadow: none;
    }

    /* Larger pizza canvas on desktop sidebar */
    .builder-col-sidebar .pizza-canvas {
        width: 360px;
        height: 360px;
    }
}

/* ==================== RESTAURANT MENU PAGE ==================== */

/* Category tab navigation */
.rm-tab {
    color: #6B7280;
    background-color: transparent;
    border: 1px solid #E5E7EB;
}

.rm-tab:hover {
    color: #374151;
    background-color: #F3F4F6;
}

.rm-tab.active {
    color: white;
    background-color: var(--color-primary-600, #EA580C);
    border-color: var(--color-primary-600, #EA580C);
    font-weight: 600;
}

.dark-mode .rm-tab {
    color: #9CA3AF;
    border-color: #374151;
}

.dark-mode .rm-tab:hover {
    color: #D1D5DB;
    background-color: #374151;
}

.dark-mode .rm-tab.active {
    color: white;
    background-color: var(--color-primary-600, #EA580C);
    border-color: var(--color-primary-600, #EA580C);
}

/* Fade-in animation for sections */
.rm-section {
    opacity: 0;
    animation: rmFadeIn 0.4s ease-out forwards;
}

.rm-section:nth-child(1) { animation-delay: 0ms; }
.rm-section:nth-child(2) { animation-delay: 60ms; }
.rm-section:nth-child(3) { animation-delay: 120ms; }
.rm-section:nth-child(4) { animation-delay: 180ms; }
.rm-section:nth-child(5) { animation-delay: 240ms; }
.rm-section:nth-child(6) { animation-delay: 300ms; }
.rm-section:nth-child(7) { animation-delay: 360ms; }
.rm-section:nth-child(8) { animation-delay: 420ms; }

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

/* ---------- Section Header (centered title with accent lines) ---------- */
.rm-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
}
.rm-section-header::before,
.rm-section-header::after {
    content: '';
    flex: 1;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(to var(--line-dir, left), var(--color-primary-400, #fb923c), transparent);
    opacity: 0.5;
}
.rm-section-header::before { --line-dir: left; }
.rm-section-header::after  { --line-dir: right; }

.rm-section-header h2 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #374151;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* Dark mode */
.dark-mode .rm-section-header::before,
.dark-mode .rm-section-header::after {
    background: linear-gradient(to var(--line-dir, left), var(--color-primary-500, #f97316), transparent);
    opacity: 0.35;
}
.dark-mode .rm-section-header h2 {
    color: #e5e7eb;
}

/* ==================== Restaurant Menu — Creative Features ==================== */

/* ---- Meta info row (calories, spicy, prep time) ---- */
.food-meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.food-calorie {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.625rem;
    color: #B45309;
    background: #FEF3C7;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
    font-weight: 600;
}

.food-spicy {
    font-size: 0.625rem;
    letter-spacing: -2px;
    line-height: 1;
}

.food-prep-time {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.625rem;
    color: #6B7280;
    white-space: nowrap;
}

/* ---- Sold out state ---- */
.food-card--sold-out {
    position: relative;
    pointer-events: none;
    user-select: none;
}

.food-card--sold-out > * {
    opacity: 0.4;
    filter: grayscale(50%);
}

.food-card--sold-out .add-to-cart-btn,
.food-card--sold-out .quantity-control,
.food-card--sold-out .favorite-btn {
    display: none !important;
}

.food-card--sold-out::before {
    content: "اتمام موجودی";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    z-index: 10;
    background: rgba(220, 38, 38, 0.92);
    color: white;
    font-weight: 800;
    font-size: 0.8rem;
    padding: 0.375rem 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.3);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* ---- Time-locked state ---- */
.food-card--time-locked {
    position: relative;
}

.food-card--time-locked .add-to-cart-btn,
.food-card--time-locked .quantity-control {
    display: none !important;
}

.food-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6rem;
    color: #92400E;
    background: #FEF3C7;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
    border: 1px solid #FDE68A;
    font-weight: 600;
}

.food-time-message {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.65rem;
    color: #92400E;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    white-space: nowrap;
}

/* ---- White text for overlay cards (featured/duo/solo in grid & list) ---- */
.foods-grid[data-view="grid"] .food-card--featured .food-calorie,
.foods-grid[data-view="grid"] .food-card--duo .food-calorie,
.foods-grid[data-view="grid"] .food-card--solo .food-calorie,
.foods-grid[data-view="list"] .food-card--featured .food-calorie,
.foods-grid[data-view="list"] .food-card--duo .food-calorie,
.foods-grid[data-view="list"] .food-card--solo .food-calorie {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

.foods-grid[data-view="grid"] .food-card--featured .food-prep-time,
.foods-grid[data-view="grid"] .food-card--duo .food-prep-time,
.foods-grid[data-view="grid"] .food-card--solo .food-prep-time,
.foods-grid[data-view="list"] .food-card--featured .food-prep-time,
.foods-grid[data-view="list"] .food-card--duo .food-prep-time,
.foods-grid[data-view="list"] .food-card--solo .food-prep-time {
    color: rgba(255, 255, 255, 0.8);
}

/* ---- Dark mode ---- */
.dark-mode .food-calorie {
    background: #78350F;
    color: #FDE68A;
}

.dark-mode .food-prep-time {
    color: #9CA3AF;
}

.dark-mode .food-time-badge,
.dark-mode .food-time-message {
    background: #78350F;
    color: #FDE68A;
    border-color: #92400E;
}

/* ================================================================
   HIERARCHICAL CATEGORY NAV (Card Style)
   ================================================================ */

/* Sticky nav wrapper — transparent shell, card inside has the glass */
.rm-category-nav {
    position: sticky;
    top: var(--rm-header-height, 60px);
    z-index: 30;
    background: transparent;
    transition: none;
}
.rm-category-nav.shadow-md {
    box-shadow: none;
}
/* Keep horizontal margin on desktop too */
.rm-category-nav > div {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

/* Nav card container — frosted glass card */
.rm-nav-card {
    background: rgba(243, 244, 246, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    border-radius: 0.875rem;
    border: 1px solid rgba(0,0,0,0.07);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    padding: 0 0.75rem;
    overflow: hidden;
}

/* ---------- Main row: tabs + drawer button ---------- */
.rm-main-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.rm-main-tabs {
    flex: 1;
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding: 0.5rem 0 0;
}
.rm-main-tabs::-webkit-scrollbar { display: none; }
.rm-main-tabs { scrollbar-width: none; }

.rm-main-tab {
    flex-shrink: 0;
    padding: 0.4rem 0.75rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #9ca3af;
    background: transparent;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(.4,0,.2,1);
    cursor: pointer;
    text-decoration: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    position: relative;
}
.rm-main-tab:hover {
    color: #6b7280;
}
.rm-main-tab.active {
    color: var(--color-primary-600, #ea580c);
    font-weight: 700;
    border-bottom-color: var(--color-primary-500, #f97316);
}

/* Drawer button */
.rm-cat-drawer-btn {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    background: transparent;
    border: 1.5px solid rgba(0,0,0,0.08);
    cursor: pointer;
    transition: all 0.2s;
}
.rm-cat-drawer-btn:hover {
    background: rgba(255,255,255,0.5);
    color: #6b7280;
    border-color: rgba(0,0,0,0.12);
}
.rm-cat-drawer-btn:active {
    transform: scale(0.93);
}
/* ---------- Flat row: وقتی گروه‌ها زیرگروه ندارند — دکمه ⊞ + جداکننده + چیپ‌ها در یک خط ---------- */
.rm-flat-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.rm-flat-row .rm-sub-tabs {
    flex: 1;
    min-width: 0;
}
.rm-nav-divider {
    flex-shrink: 0;
    width: 1px;
    height: 1.375rem;
    background: rgba(0,0,0,0.12);
    border-radius: 1px;
}

/* ---------- Sub-category tabs with icons ---------- */
.rm-sub-tabs-wrapper {
    overflow: hidden;
    max-height: 0;
    background: transparent;
    transition: max-height 0.3s ease;
    border-top: 1px solid rgba(0,0,0,0.05);
}
.rm-sub-tabs-wrapper.open {
    max-height: 56px;
}

/* grid تخت در drawer وقتی فقط سایر دارد */
.rm-flat-grid {
    padding: 0.5rem 0;
}

.rm-sub-tabs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.5rem 0;
}
.rm-sub-tabs::-webkit-scrollbar { display: none; }
.rm-sub-tabs { scrollbar-width: none; }

/* محو لبه‌های نوارهای اسکرول افقی — JS کلاس‌های rm-fade-start/rm-fade-end را بر اساس موقعیت اسکرول ست می‌کند.
   gradient از راست (شروع RTL) محاسبه می‌شود: --rm-fade-r لبهٔ راست، --rm-fade-l لبهٔ چپ */
.rm-main-tabs, .rm-sub-tabs {
    --rm-fade-l: 0px;
    --rm-fade-r: 0px;
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--rm-fade-r), #000 calc(100% - var(--rm-fade-l)), transparent 100%);
    mask-image: linear-gradient(to left, transparent 0, #000 var(--rm-fade-r), #000 calc(100% - var(--rm-fade-l)), transparent 100%);
}
.rm-main-tabs.rm-fade-start, .rm-sub-tabs.rm-fade-start { --rm-fade-r: 32px; }
.rm-main-tabs.rm-fade-end,   .rm-sub-tabs.rm-fade-end   { --rm-fade-l: 32px; }

.rm-sub-tab {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.75rem 0.3rem 0.625rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    background: rgba(255,255,255,0.55);
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(.4,0,.2,1), transform 0.35s cubic-bezier(.34,1.56,.64,1);
    cursor: pointer;
    text-decoration: none;
    border: 1.5px solid rgba(0,0,0,0.06);
}

.rm-sub-tab__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.7);
    font-size: 0.8rem;
    line-height: 1;
    transition: all 0.25s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    flex-shrink: 0;
    overflow: hidden;
}
/* Image icon support */
img.rm-sub-tab__icon {
    object-fit: cover;
    background: none;
}
/* آیکن تصویری واقعی در تب‌ها (وقتی ShowCategoryIconInNav فعال است) */
.rm-sub-tab__img {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    transition: border-radius 0.25s, box-shadow 0.25s;
}
/* آیکن تصویری در آیتم‌های drawer */
.rm-acc__img {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.rm-sub-tab__label {
    transition: color 0.25s;
}

.rm-sub-tab:hover {
    border-color: rgba(0,0,0,0.1);
    background: rgba(255,255,255,0.75);
    transform: translateY(-1px);
}

.rm-sub-tab.active {
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary-500, #f97316), var(--color-primary-600, #ea580c));
    border-color: transparent;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(234,88,12,0.3);
    transform: scale(1.06);
}
.rm-sub-tab.active .rm-sub-tab__icon {
    background: rgba(255,255,255,0.25);
    box-shadow: none;
}
/* آیکن چیپ فعال داخل دایرهٔ سفید — مثل pill مرجع */
.rm-sub-tab.active .rm-sub-tab__img {
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 1px 4px rgba(0,0,0,0.18);
}
.rm-sub-tab.active .rm-sub-tab__label {
    color: #fff;
}

/* فاصلهٔ ثابت نوار دسته‌بندی از هدر (override روی py-2 تیلویند) */
.rm-category-nav > div {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* ================================================================
   STICKY BOTTOM CART BAR
   ================================================================ */

.rm-cart-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}

.rm-cart-bar.visible {
    transform: translateY(0);
}

.rm-cart-bar__info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.rm-cart-bar__icon {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    background: #fff7ed;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rm-cart-bar__icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-primary-600, #ea580c);
}

.rm-cart-bar__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 1.25rem;
    height: 1.25rem;
    background: var(--color-primary-600, #ea580c);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.25rem;
    border: 2px solid #fff;
}

.rm-cart-bar__details {
    flex: 1;
    min-width: 0;
}

.rm-cart-bar__total {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1f2937;
    direction: rtl;
}

.rm-cart-bar__count {
    font-size: 0.7rem;
    color: #9ca3af;
}

.rm-cart-bar__btn {
    flex-shrink: 0;
    padding: 0.625rem 1.5rem;
    background: var(--color-primary-600, #ea580c);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.rm-cart-bar__btn:hover {
    background: var(--color-primary-700, #c2410c);
}

/* When cart bar is visible, add bottom padding to body */
.rm-menu-body.has-cart {
    padding-bottom: 5rem;
}

/* ================================================================
   BILINGUAL FOOD NAME
   ================================================================ */

.food-name-en {
    font-size: 0.65rem;
    color: #9ca3af;
    font-weight: 400;
    margin-right: 0.25rem;
}

/* In overlay cards (featured/duo/solo in grid), lighter english name */
.foods-grid[data-view="grid"] .food-card--featured .food-name-en,
.foods-grid[data-view="grid"] .food-card--solo .food-name-en,
.foods-grid[data-view="list"] .food-card--featured .food-name-en,
.foods-grid[data-view="list"] .food-card--duo .food-name-en,
.foods-grid[data-view="list"] .food-card--solo .food-name-en {
    color: rgba(255,255,255,0.6);
}

/* ================================================================
   IMAGE PLACEHOLDER / FALLBACK
   ================================================================ */

.img-container.img-error {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
}

.img-container.img-error img {
    display: none;
}

.img-container.img-error::after {
    content: '';
    width: 3rem;
    height: 3rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
}

.dark-mode .img-container.img-error {
    background: #374151;
}

/* Dark mode for cart bar */
.dark-mode .rm-cart-bar {
    background: #1f2937;
    border-top-color: #374151;
}

.dark-mode .rm-cart-bar__total {
    color: #f3f4f6;
}

.dark-mode .rm-cart-bar__icon {
    background: #374151;
}

/* Dark mode for nav wrapper + card */
.dark-mode .rm-category-nav {
    background: transparent;
}
.dark-mode .rm-nav-card {
    background: rgba(31, 41, 55, 0.72);
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.dark-mode .rm-main-tab {
    color: #6b7280;
}
.dark-mode .rm-main-tab:hover {
    color: #9ca3af;
}
.dark-mode .rm-main-tab.active {
    color: var(--color-primary-400, #fb923c);
    border-bottom-color: var(--color-primary-400, #fb923c);
}
.dark-mode .rm-cat-drawer-btn {
    background: transparent;
    border-color: #4b5563;
    color: #6b7280;
}
.dark-mode .rm-cat-drawer-btn:hover {
    background: #374151;
    color: #9ca3af;
}
.dark-mode .rm-sub-tabs-wrapper {
    border-top-color: #374151;
}
.dark-mode .rm-nav-divider {
    background: rgba(255,255,255,0.14);
}
.dark-mode .rm-sub-tab {
    color: #9ca3af;
    background: rgba(55,65,81,0.5);
    border-color: rgba(255,255,255,0.08);
}
.dark-mode .rm-sub-tab__icon {
    background: rgba(31,41,55,0.7);
}
.dark-mode .rm-sub-tab:hover {
    background: rgba(75,85,99,0.6);
    border-color: rgba(255,255,255,0.12);
}
.dark-mode .rm-sub-tab.active {
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary-500, #f97316), var(--color-primary-600, #ea580c));
    border-color: transparent;
}
.dark-mode .rm-sub-tab.active .rm-sub-tab__icon {
    background: rgba(255,255,255,0.2);
}

/* ================================================================
   CATEGORY DRAWER (Accordion Style)
   ================================================================ */

.rm-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0,0,0,0);
    backdrop-filter: blur(0);
    visibility: hidden;
    transition: background 0.35s, backdrop-filter 0.35s, visibility 0s 0.35s;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.rm-drawer-overlay.open {
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    visibility: visible;
    transition: background 0.35s, backdrop-filter 0.35s, visibility 0s;
}

.rm-drawer {
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    background: #fff;
    border-radius: 1.5rem 1.5rem 0 0;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.15);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.rm-drawer-overlay.open .rm-drawer {
    transform: translateY(0);
}

/* Drawer top handle bar */
.rm-drawer::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 0.75rem auto 0;
}

.rm-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem 0.5rem;
}
.rm-drawer__title {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
}
.rm-drawer__close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    background: #f3f4f6;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}
.rm-drawer__close:hover {
    background: #e5e7eb;
    color: #374151;
}

.rm-drawer__body {
    padding: 0.25rem 1rem 1.25rem;
}

/* ---------- Accordion group ---------- */
.rm-acc {
    border-radius: 0.875rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    transition: all 0.25s;
}
.rm-acc.open {
    background: #fff;
    border-color: #e5e7eb;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.rm-acc__head {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}
.rm-acc__head:active {
    opacity: 0.7;
}

.rm-acc__emoji {
    font-size: 1.25rem;
    line-height: 1;
}
.rm-acc__title {
    flex: 1;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 700;
    color: #374151;
}
.rm-acc__arrow {
    color: #9ca3af;
    transition: transform 0.3s cubic-bezier(.4,0,.2,1);
    flex-shrink: 0;
}
.rm-acc.open .rm-acc__arrow {
    transform: rotate(180deg);
    color: var(--color-primary-500, #f97316);
}

/* Accordion panel (collapsible) */
.rm-acc__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(.4,0,.2,1);
}
.rm-acc.open .rm-acc__panel {
    max-height: 300px;
}

/* Accordion sub-item grid */
.rm-acc__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0 0.75rem 0.875rem;
}

.rm-acc__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 0.25rem;
    border-radius: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    background: #f9fafb;
    border: 1.5px solid transparent;
}
.rm-acc__item:hover {
    background: #fff7ed;
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(234,88,12,0.08);
}
.rm-acc__item:active {
    transform: scale(0.96);
}

.rm-acc__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff7ed, #ffedd5);
    font-size: 1.35rem;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(234,88,12,0.1);
    transition: all 0.25s;
}
.rm-acc__item:hover .rm-acc__icon {
    box-shadow: 0 4px 12px rgba(234,88,12,0.2);
    transform: scale(1.06);
}

.rm-acc__label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #4b5563;
    text-align: center;
    line-height: 1.3;
}
.rm-acc__count {
    font-size: 0.6rem;
    color: #9ca3af;
    font-weight: 400;
}
.rm-acc__count:empty { display: none; }

/* Active item (current section) */
.rm-acc__item.active {
    background: #fff7ed;
    border-color: rgba(234,88,12,0.2);
}
.rm-acc__item.active .rm-acc__icon {
    background: linear-gradient(145deg, var(--color-primary-500, #f97316), var(--color-primary-600, #ea580c));
    box-shadow: 0 4px 14px rgba(234,88,12,0.35);
}
.rm-acc__item.active .rm-acc__label {
    color: var(--color-primary-700, #c2410c);
    font-weight: 700;
}
.rm-acc__item.active .rm-acc__count {
    color: var(--color-primary-500, #f97316);
}

/* Desktop: centered modal */
@media (min-width: 640px) {
    .rm-drawer-overlay {
        align-items: center;
    }
    .rm-drawer {
        border-radius: 1.5rem;
        max-width: 440px;
        transform: translateY(30px);
        opacity: 0;
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.35s;
    }
    .rm-drawer-overlay.open .rm-drawer {
        transform: translateY(0);
        opacity: 1;
    }
    .rm-drawer::before {
        display: none;
    }
}

/* Dark mode drawer */
.dark-mode .rm-drawer {
    background: #1f2937;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.4);
}
.dark-mode .rm-drawer::before {
    background: #4b5563;
}
.dark-mode .rm-drawer__title {
    color: #f3f4f6;
}
.dark-mode .rm-drawer__close {
    background: #374151;
    color: #9ca3af;
}
.dark-mode .rm-drawer__close:hover {
    background: #4b5563;
    color: #d1d5db;
}

/* Dark mode accordion */
.dark-mode .rm-acc {
    background: #374151;
    border-color: #4b5563;
}
.dark-mode .rm-acc.open {
    background: #1f2937;
    border-color: #4b5563;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.dark-mode .rm-acc__title {
    color: #e5e7eb;
}
.dark-mode .rm-acc__arrow {
    color: #6b7280;
}
.dark-mode .rm-acc.open .rm-acc__arrow {
    color: var(--color-primary-400, #fb923c);
}
.dark-mode .rm-acc__item {
    background: #374151;
}
.dark-mode .rm-acc__item:hover {
    background: rgba(234,88,12,0.08);
}
.dark-mode .rm-acc__icon {
    background: linear-gradient(145deg, rgba(234,88,12,0.15), rgba(234,88,12,0.08));
}
.dark-mode .rm-acc__label {
    color: #d1d5db;
}
.dark-mode .rm-acc__count {
    color: #6b7280;
}
.dark-mode .rm-acc__item.active {
    background: rgba(234,88,12,0.1);
    border-color: rgba(234,88,12,0.25);
}
.dark-mode .rm-acc__item.active .rm-acc__label {
    color: var(--color-primary-400, #fb923c);
}

/* ================================================================
   DESKTOP SIDEBAR LAYOUT
   ================================================================ */

/* Layout wrapper - default: single column */
.rm-desktop-layout {
    display: block;
}

/* Sidebar hidden by default */
.rm-sidebar-categories {
    display: none;
}

/* Main content fills available space */
.rm-main-content {
    flex: 1;
    min-width: 0;
}

/* ---- Activate sidebar on desktop when body has the class ---- */
@media (min-width: 1024px) {
    /* Widen page container & header when a sidebar is active (single: 1400px) */
    .desktop-sidebar-categories > main,
    .desktop-sidebar-cart > main,
    .desktop-sidebar-categories > #header > div,
    .desktop-sidebar-cart > #header > div {
        max-width: 1400px;
    }
    /* Both sidebars active: 1700px */
    .desktop-sidebar-categories.desktop-sidebar-cart > main,
    .desktop-sidebar-categories.desktop-sidebar-cart > #header > div {
        max-width: 1700px;
    }

    .desktop-sidebar-categories .rm-desktop-layout {
        display: flex;
        gap: 1.5rem;
        margin: 0 auto;
        padding: 0 1.5rem;
    }

    .desktop-sidebar-categories .rm-sidebar-categories {
        display: block;
        width: 260px;
        flex-shrink: 0;
        position: sticky;
        top: 72px;
        height: fit-content;
        max-height: calc(100vh - 88px);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--color-primary-200, #fed7aa) transparent;
    }

    .desktop-sidebar-categories .rm-sidebar-categories::-webkit-scrollbar {
        width: 4px;
    }
    .desktop-sidebar-categories .rm-sidebar-categories::-webkit-scrollbar-track {
        background: transparent;
    }
    .desktop-sidebar-categories .rm-sidebar-categories::-webkit-scrollbar-thumb {
        background: var(--color-primary-200, #fed7aa);
        border-radius: 4px;
    }

    /* Hide top category nav when sidebar is active */
    .desktop-sidebar-categories .rm-category-nav {
        display: none;
    }
}

/* Hide top category nav via settings toggle */
.hide-top-category-nav .rm-category-nav {
    display: none;
}

/* ---- Sidebar inner styles ---- */
.rm-sidebar-inner {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03);
    padding: 1rem 0.75rem;
}

.rm-sidebar-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #374151;
    padding: 0 0.5rem 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 0.5rem;
}

/* ---- Sidebar group (accordion - card style) ---- */
.rm-sidebar-group {
    border-radius: 0.75rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    transition: all 0.25s ease;
}
.rm-sidebar-group.open {
    background: #fff;
    border-color: var(--color-primary-100, #ffedd5);
    box-shadow: 0 1px 6px color-mix(in srgb, var(--color-primary-500) 8%, transparent);
}

.rm-sidebar-group__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 0.75rem;
}
.rm-sidebar-group__head:hover {
    background: rgba(0, 0, 0, 0.03);
}

.rm-sidebar-group__emoji {
    font-size: 1.1rem;
    width: 28px;
    height: 28px;
    text-align: center;
    flex-shrink: 0;
    border-radius: 0.5rem;
    overflow: hidden;
}
/* Image support for group icon */
img.rm-sidebar-group__emoji {
    object-fit: cover;
}

.rm-sidebar-group__title {
    flex: 1;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4b5563;
    text-align: right;
}

.rm-sidebar-group__arrow {
    color: #9ca3af;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
.rm-sidebar-group.open .rm-sidebar-group__arrow {
    transform: rotate(180deg);
    color: var(--color-primary-500, #f97316);
}

/* Panel (sub-items) */
.rm-sidebar-group__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 0.25rem;
}
.rm-sidebar-group.open .rm-sidebar-group__panel {
    max-height: 300px;
}

/* ---- Sidebar item ---- */
.rm-sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.5rem 0.45rem 0.75rem;
    border-radius: 0.625rem;
    text-decoration: none;
    transition: all 0.2s;
    margin-bottom: 2px;
}
.rm-sidebar-item:hover {
    background: color-mix(in srgb, var(--color-primary-500) 6%, transparent);
}

.rm-sidebar-item__icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--color-primary-500) 8%, transparent), color-mix(in srgb, var(--color-primary-500) 3%, transparent));
    flex-shrink: 0;
    overflow: hidden;
}
/* Image icon support */
img.rm-sidebar-item__icon {
    object-fit: cover;
    background: none;
}

.rm-sidebar-item__label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #6b7280;
}

/* Active sidebar item */
.rm-sidebar-item.active {
    background: var(--color-primary-50, #fff7ed);
    border-right: 3px solid var(--color-primary-500, #f97316);
}
.rm-sidebar-item.active .rm-sidebar-item__icon {
    background: linear-gradient(145deg, color-mix(in srgb, var(--color-primary-500) 15%, transparent), color-mix(in srgb, var(--color-primary-500) 8%, transparent));
}
.rm-sidebar-item.active .rm-sidebar-item__label {
    color: var(--color-primary-600, #ea580c);
    font-weight: 600;
}

/* Active group head */
.rm-sidebar-group.open .rm-sidebar-group__head {
    background: color-mix(in srgb, var(--color-primary-500) 4%, transparent);
}
.rm-sidebar-group.open .rm-sidebar-group__title {
    color: var(--color-primary-600, #ea580c);
    font-weight: 700;
}

/* ---- Dark mode sidebar ---- */
.dark-mode .rm-sidebar-inner {
    background: #1f2937;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.05);
}
.dark-mode .rm-sidebar-title {
    color: #e5e7eb;
    border-bottom-color: #374151;
}
.dark-mode .rm-sidebar-group {
    background: #374151;
    border-color: #4b5563;
}
.dark-mode .rm-sidebar-group.open {
    background: #1f2937;
    border-color: color-mix(in srgb, var(--color-primary-500) 20%, transparent);
    box-shadow: 0 1px 6px color-mix(in srgb, var(--color-primary-500) 10%, transparent);
}
.dark-mode .rm-sidebar-group__head:hover {
    background: rgba(255,255,255,0.04);
}
.dark-mode .rm-sidebar-group__title {
    color: #d1d5db;
}
.dark-mode .rm-sidebar-group.open .rm-sidebar-group__head {
    background: color-mix(in srgb, var(--color-primary-500) 8%, transparent);
}
.dark-mode .rm-sidebar-group.open .rm-sidebar-group__title {
    color: var(--color-primary-400, #fb923c);
}
.dark-mode .rm-sidebar-item:hover {
    background: color-mix(in srgb, var(--color-primary-500) 8%, transparent);
}
.dark-mode .rm-sidebar-item__icon {
    background: linear-gradient(145deg, color-mix(in srgb, var(--color-primary-500) 15%, transparent), color-mix(in srgb, var(--color-primary-500) 8%, transparent));
}
.dark-mode .rm-sidebar-item__label {
    color: #9ca3af;
}
.dark-mode .rm-sidebar-item.active {
    background: color-mix(in srgb, var(--color-primary-500) 10%, transparent);
    border-right-color: var(--color-primary-400, #fb923c);
}
.dark-mode .rm-sidebar-item.active .rm-sidebar-item__label {
    color: var(--color-primary-400, #fb923c);
}

/* ================================================================
   DESKTOP SIDEBAR CART
   ================================================================ */

/* Hidden by default */
.rm-sidebar-cart {
    display: none;
}

/* ---- Activate sidebar cart on desktop ---- */
@media (min-width: 1024px) {
    .desktop-sidebar-cart .rm-desktop-layout {
        display: flex;
        gap: 1.5rem;
        margin: 0 auto;
        padding: 0 1.5rem;
    }

    .desktop-sidebar-cart .rm-sidebar-cart {
        display: block;
        width: 300px;
        flex-shrink: 0;
        position: sticky;
        top: 72px;
        height: fit-content;
        max-height: calc(100vh - 88px);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--color-primary-200, #fed7aa) transparent;
    }

    .desktop-sidebar-cart .rm-sidebar-cart::-webkit-scrollbar {
        width: 4px;
    }
    .desktop-sidebar-cart .rm-sidebar-cart::-webkit-scrollbar-track {
        background: transparent;
    }
    .desktop-sidebar-cart .rm-sidebar-cart::-webkit-scrollbar-thumb {
        background: var(--color-primary-200, #fed7aa);
        border-radius: 4px;
    }

    /* Hide floating cart & cart bar on desktop when sidebar cart is active */
    .desktop-sidebar-cart #floatingCart,
    .desktop-sidebar-cart #floatingMinOrder {
        display: none !important;
    }
    .desktop-sidebar-cart .rm-cart-bar {
        display: none !important;
    }
}

/* ---- Sidebar cart inner styles ---- */
.rm-sidebar-cart-inner {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03);
    overflow: hidden;
}

.rm-sidebar-cart-header {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #f3f4f6;
}

.rm-sidebar-cart-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #374151;
}

.rm-sidebar-cart-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--color-primary-500, #f97316);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    margin-right: auto;
}
.rm-sidebar-cart-badge:empty {
    display: none;
}

/* ---- Cart items list ---- */
.rm-sidebar-cart-items {
    padding: 0 0.75rem;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary-200, #fed7aa) transparent;
}
.rm-sidebar-cart-items::-webkit-scrollbar {
    width: 3px;
}
.rm-sidebar-cart-items::-webkit-scrollbar-thumb {
    background: var(--color-primary-200, #fed7aa);
    border-radius: 3px;
}

/* Single cart item in sidebar */
.rm-sidebar-cart-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.25rem;
    border-bottom: 1px solid #f3f4f6;
}
.rm-sidebar-cart-item:last-child {
    border-bottom: none;
}

.rm-sidebar-cart-item__img {
    width: 44px;
    height: 44px;
    border-radius: 0.625rem;
    object-fit: cover;
    flex-shrink: 0;
}

.rm-sidebar-cart-item__info {
    flex: 1;
    min-width: 0;
}

.rm-sidebar-cart-item__name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rm-sidebar-cart-item__price {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-primary-600, #ea580c);
    margin-top: 2px;
}

/* Quantity controls in sidebar */
.rm-sidebar-cart-item__qty {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.rm-sidebar-cart-qty-btn {
    width: 26px;
    height: 26px;
    border-radius: 0.5rem;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    color: #6b7280;
    transition: all 0.15s;
}
.rm-sidebar-cart-qty-btn:hover {
    border-color: var(--color-primary-300, #fdba74);
    color: var(--color-primary-600, #ea580c);
    background: var(--color-primary-50, #fff7ed);
}
.rm-sidebar-cart-qty-btn--delete {
    border-color: #fca5a5;
    color: #ef4444;
}
.rm-sidebar-cart-qty-btn--delete:hover {
    background: #fef2f2;
    border-color: #ef4444;
}

.rm-sidebar-cart-qty-num {
    width: 22px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-primary-600, #ea580c);
}

/* ---- Empty state ---- */
.rm-sidebar-cart-empty {
    padding: 2rem 1rem;
    text-align: center;
}
.rm-sidebar-cart-empty p {
    font-size: 0.82rem;
    font-weight: 600;
    color: #6b7280;
}
.rm-sidebar-cart-empty__sub {
    font-size: 0.72rem !important;
    font-weight: 400 !important;
    color: #9ca3af !important;
    margin-top: 4px;
}

/* ---- Summary ---- */
.rm-sidebar-cart-summary {
    padding: 0.75rem 1rem;
    border-top: 1px solid #f3f4f6;
    background: #fafafa;
}

.rm-sidebar-cart-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0;
    font-size: 0.78rem;
    color: #6b7280;
}

.rm-sidebar-cart-row--total {
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: 1px dashed #e5e7eb;
    font-weight: 700;
    color: #1f2937;
    font-size: 0.88rem;
}

.rm-sidebar-cart-row--discount,
.rm-sidebar-cart-row--discount span {
    color: #16a34a;
}

.rm-sidebar-cart-total-amount {
    color: var(--color-primary-600, #ea580c);
    font-size: 1rem;
    font-weight: 800;
}

.rm-sidebar-cart-checkout {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.8rem;
    border: none;
    border-radius: 0.75rem;
    background: var(--color-primary-600, #ea580c);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary-600) 25%, transparent);
}
.rm-sidebar-cart-checkout:hover {
    background: var(--color-primary-700, #c2410c);
}

/* ---- Cart / checkout financial hierarchy ---- */
.rm-cart-financial-card {
    padding: 0.75rem 0.875rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    background: #f8fafc;
}

.rm-cart-financial-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0;
    color: #6b7280;
    font-size: 0.78rem;
}

.rm-cart-financial-row__amount {
    color: #374151;
    font-weight: 650;
    white-space: nowrap;
}

.rm-cart-financial-row--discount,
.rm-cart-financial-row--discount .rm-cart-financial-row__amount {
    color: #16a34a;
    font-weight: 700;
}

.rm-cart-financial-row--payable {
    align-items: flex-end;
    margin-top: 0.45rem;
    padding-top: 0.7rem;
    border-top: 1px dashed #d1d5db;
    color: #1f2937;
}

.rm-cart-financial-row--payable > span:first-child {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.rm-cart-financial-row--payable strong {
    font-size: 0.9rem;
}

.rm-cart-financial-row--payable small {
    color: #9ca3af;
    font-size: 0.68rem;
}

.rm-cart-payable-amount {
    color: var(--color-primary-600, #ea580c);
    font-size: 1.12rem;
    font-weight: 850;
    line-height: 1.3;
    white-space: nowrap;
}

.rm-cart-primary-action {
    display: flex;
    width: 100%;
    min-height: 3.1rem;
    align-items: center;
    justify-content: center;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: 0.9rem;
    background: var(--color-primary-600, #ea580c);
    color: #fff;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary-600) 24%, transparent);
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 800;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.rm-cart-primary-action:hover {
    background: var(--color-primary-700, #c2410c);
}

.rm-cart-primary-action:active {
    transform: scale(0.985);
}

.rm-checkout-bottom-bar {
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
}

.rm-checkout-bottom-bar__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 42%);
    align-items: center;
    gap: 0.875rem;
}

.rm-checkout-bottom-total {
    min-width: 0;
}

.rm-checkout-bottom-total p:first-child {
    margin: 0 0 0.15rem;
    color: #6b7280;
    font-size: 0.72rem;
}

.rm-checkout-bottom-total p:last-child {
    margin: 0;
    color: var(--color-primary-600, #ea580c);
    font-size: 1.05rem;
    font-weight: 850;
    line-height: 1.3;
}

.rm-cart-primary-action--checkout {
    margin-top: 0;
}

.dark-mode .rm-cart-financial-card {
    border-color: #374151;
    background: #111827;
}

.dark-mode .rm-cart-financial-row {
    color: #9ca3af;
}

.dark-mode .rm-cart-financial-row__amount,
.dark-mode .rm-cart-financial-row--payable {
    color: #e5e7eb;
}

.dark-mode .rm-cart-financial-row--discount,
.dark-mode .rm-cart-financial-row--discount .rm-cart-financial-row__amount {
    color: #4ade80;
}

.dark-mode .rm-cart-financial-row--payable {
    border-top-color: #4b5563;
}

.dark-mode .rm-cart-payable-amount,
.dark-mode .rm-checkout-bottom-total p:last-child,
.dark-mode .rm-sidebar-cart-total-amount {
    color: var(--color-primary-400, #fb923c);
}

.dark-mode .rm-checkout-bottom-bar {
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.24);
}

.dark-mode .rm-checkout-bottom-total p:first-child {
    color: #9ca3af;
}

/* ---- Dark mode sidebar cart ---- */
.dark-mode .rm-sidebar-cart-inner {
    background: #1f2937;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.05);
}
.dark-mode .rm-sidebar-cart-header {
    border-bottom-color: #374151;
}
.dark-mode .rm-sidebar-cart-title {
    color: #e5e7eb;
}
.dark-mode .rm-sidebar-cart-item {
    border-bottom-color: #374151;
}
.dark-mode .rm-sidebar-cart-item__name {
    color: #e5e7eb;
}
.dark-mode .rm-sidebar-cart-item__price {
    color: var(--color-primary-400, #fb923c);
}
.dark-mode .rm-sidebar-cart-qty-btn {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}
.dark-mode .rm-sidebar-cart-qty-btn:hover {
    background: color-mix(in srgb, var(--color-primary-500) 10%, transparent);
    border-color: var(--color-primary-400, #fb923c);
    color: var(--color-primary-400, #fb923c);
}
.dark-mode .rm-sidebar-cart-qty-btn--delete {
    border-color: #7f1d1d;
    color: #f87171;
}
.dark-mode .rm-sidebar-cart-qty-btn--delete:hover {
    background: rgba(239,68,68,0.1);
    border-color: #f87171;
}
.dark-mode .rm-sidebar-cart-qty-num {
    color: var(--color-primary-400, #fb923c);
}
.dark-mode .rm-sidebar-cart-empty p {
    color: #9ca3af;
}
.dark-mode .rm-sidebar-cart-summary {
    border-top-color: #374151;
    background: #111827;
}
.dark-mode .rm-sidebar-cart-row {
    color: #9ca3af;
}
.dark-mode .rm-sidebar-cart-row--total {
    color: #e5e7eb;
    border-top-color: #4b5563;
}

/* ================================================================
   GRID ADJUSTMENT WHEN SIDEBARS ARE ACTIVE
   ================================================================ */
@media (min-width: 1024px) {
    /* When any sidebar is active, use auto-fill grid instead of fixed columns */
    .desktop-sidebar-categories .foods-grid[data-view="grid"],
    .desktop-sidebar-cart .foods-grid[data-view="grid"] {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }

    /* Compact view also adapts */
    .desktop-sidebar-categories .foods-grid[data-view="compact"],
    .desktop-sidebar-cart .foods-grid[data-view="compact"] {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }

    /* When BOTH sidebars active, duo cards stack vertically */
    .desktop-sidebar-categories.desktop-sidebar-cart .foods-grid[data-view="grid"] .food-duo-row {
        flex-direction: column;
    }
}


/* ============================================
   Orphan HalfWidth (no pair) — span full row in grid
   When a single .food-card--duo is a DIRECT child of .foods-grid
   (i.e. not wrapped in .food-duo-row), it has no partner and
   should fall back to full-width display like Solo.
   ============================================ */
.foods-grid[data-view="grid"] > .food-card--duo {
    grid-column: 1 / -1;
}

/* ============================================
   food-card--square — ProductStyle.FullImageSquare
   تصویر مربعی غالب با اطلاعات زیر تصویر
   تک در ردیف (تمام عرض، شریک نمی‌گیرد)
   ============================================ */
.foods-grid[data-view="grid"] .food-card--square {
    grid-column: 1 / -1;
    max-width: 320px;
    margin-inline: auto;
}

.foods-grid[data-view="grid"] .food-card--square > div:first-child {
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
}

.foods-grid[data-view="grid"] .food-card--square > div:first-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.foods-grid[data-view="grid"] .food-card--square > div:last-child {
    padding: 0.875rem;
}

.foods-grid[data-view="grid"] .food-card--square h3 {
    font-size: 0.95rem;
    line-height: 1.4;
}


/* ============================================
   Price unit — stacked "هزار / تومان" or "میلیون / تومان"
   Two lines, same size, tight gap, sits inline next to the number.
   ============================================ */
.rm-unit {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 0.7em;
    font-weight: 500;
    margin-inline-start: 0.25em;
    vertical-align: middle;
    color: inherit;
    opacity: 0.85;
}
.rm-unit > span {
    display: block;
    white-space: nowrap;
}
.rm-unit > span + span {
    margin-top: 1px;
}
.rm-amount {
    display: inline-block;
    vertical-align: middle;
}

/* ==================== قیمتِ قبل از تخفیف (old price) ====================
   چون .rm-amount = inline-block و .rm-unit = inline-flex هستند، خط‌خوردگیِ
   کلاسِ line-throughِ والد روی آن‌ها کشیده نمی‌شود؛ پس صریحاً خط می‌زنیم.
   ضمناً واحد پولی «تومان» روی قیمتِ خط‌خورده تکراری است (قیمتِ نهایی آن را دارد)
   → فقط یک‌بار کافی است، پس «تومان» در قیمتِ قبل از تخفیف حذف می‌شود. */
.card-old-price .rm-amount,
.card-old-price .rm-unit {
    text-decoration: line-through;
}
.card-old-price .rm-unit > span:last-child {
    display: none;
}

/* ==================== Grouped Product Card (parent + children rows) ====================
   When a parent product has sub-products, the card renders a single shared
   image at the top and a stacked list of rows below — one per parent/child.

   The group card inherits the *parent's* ProductStyle so it visually
   matches its solo siblings. Two layout families exist:

   - Below-image rows (default / mini / square): white-background rows
     listed under the image, dark text. The "natural" layout.
   - Overlay rows (featured / duo / solo): rows sit OVER the bottom of
     the image with white text and a darker gradient. Image fills the
     card, rows float on top.
   ============================================================== */

/* --- Common: rows list reset --- */
.food-card--group {
    display: flex;
    flex-direction: column;
}
.food-card--group .card-group-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}
.food-card--group .card-group-row {
    list-style: none;
}
.food-card--group .card-group-row .add-to-cart-btn {
    transition: transform 0.15s ease;
}
.food-card--group .card-group-row:hover .add-to-cart-btn {
    transform: scale(1.06);
}

/* --- Below-image variants (default / mini / square): rows under image --- */
.food-card--group:not([data-overlay="1"]) .card-image {
    aspect-ratio: 16 / 10;
}
.food-card--group:not([data-overlay="1"]) .card-group-row + .card-group-row {
    border-top: 1px solid #f3f4f6;
}
/* Grid mode: let group cards grow vertically with their row count;
   the fixed-height rule for solo cards must not clamp the group. */
.foods-grid[data-view="grid"] .food-card--group:not([data-overlay="1"]) {
    height: auto;
}
.foods-grid[data-view="grid"] .food-card--group:not([data-overlay="1"]) > div:first-child {
    height: auto;
}
/* ===========================================================
   List view group layout — TWO different behaviors:

   • Non-overlay variants (default / mini / square):
       Keep the regular list card shape — image on the side (110-130px),
       content panel on the other side. The group's <ul> simply replaces
       the single card's content <div>, so the parent's row reads exactly
       like a normal list card and children stack beneath it inside the
       same content panel.

   • Overlay variants (featured / duo / solo):
       Image fills the card (full-width with its variant aspect ratio),
       rows overlay across the bottom — same column layout we use in
       Grid view, since image-on-side doesn't compose with white-text-
       on-image rows.

   Specificity note: [data-group="1"] is on every grouped article. Adding
   it to selectors bumps specificity to (0,0,5,0)/(0,0,6,0) which beats
   the per-variant list rules at (0,0,4,1) — without that bump, the
   overlay variants' "> div:first-child { position:absolute !important }"
   would override our image rules and collapse the card to zero height.
   =========================================================== */

/* --- Non-overlay groups in List view: image-on-side layout --- */
/* The base .food-card list rules already set flex-row + side-image
   width (110-130px). We only need to neutralize the aspect-ratio our
   group base rules apply to .card-image, and make the <ul> behave like
   the single card's content panel (flex:1, takes the right side). */
.foods-grid[data-view="list"] .food-card--group[data-group="1"]:not([data-overlay="1"]) {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
}
.foods-grid[data-view="list"] .food-card--group[data-group="1"]:not([data-overlay="1"]) > .card-image {
    aspect-ratio: auto !important;
    width: 110px !important;
    min-width: 110px !important;
    height: auto !important;
    border-radius: 0 !important;
    flex-shrink: 0;
}
@media (min-width: 640px) {
    .foods-grid[data-view="list"] .food-card--group[data-group="1"]:not([data-overlay="1"]) > .card-image {
        width: 130px !important;
        min-width: 130px !important;
    }
}
.foods-grid[data-view="list"] .food-card--group[data-group="1"]:not([data-overlay="1"]) > ul.card-group-rows {
    flex: 1;
    min-width: 0;
    align-self: stretch;
}

/* --- Overlay groups in List view: full-bleed image, rows over bottom --- */
.foods-grid[data-view="list"] .food-card--group[data-group="1"][data-overlay="1"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    /* Let row count drive height; the per-variant min-height (140-220px)
       would collapse since both image and ul are positioned absolute. */
    min-height: 0;
    background: #fff;
}
.dark-mode .foods-grid[data-view="list"] .food-card--group[data-group="1"][data-overlay="1"] {
    background: #1f2937;
}
.foods-grid[data-view="list"] .food-card--group[data-group="1"][data-overlay="1"] > .card-image {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    flex-shrink: 0;
}
.foods-grid[data-view="list"] .food-card--group[data-group="1"].food-card--featured > .card-image,
.foods-grid[data-view="list"] .food-card--group[data-group="1"].food-card--solo > .card-image {
    aspect-ratio: 16 / 9 !important;
}
.foods-grid[data-view="list"] .food-card--group[data-group="1"].food-card--duo > .card-image {
    aspect-ratio: 4 / 3 !important;
}
.foods-grid[data-view="list"] .food-card--group[data-group="1"][data-overlay="1"] > ul.card-group-rows {
    width: 100%;
    flex: 1;
}

/* --- Overlay variants (featured / duo / solo): rows on top of image ---
   The image keeps its variant aspect-ratio (set by the existing
   .food-card--featured/--duo/--solo rules). Rows float over the bottom
   of the image with a stronger gradient backdrop. */
.food-card--group[data-overlay="1"] {
    position: relative;
}

/* Make the rows panel absolute at the bottom of the card.
   Existing CSS targets > div:last-child for overlay positioning, but our
   last child is <ul>, so we add the equivalent for ul.card-group-rows. */
.food-card--group[data-overlay="1"] > ul.card-group-rows {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 0.4rem 0.75rem;
}

/* Beef up the dark gradient so multi-row overlay stays readable. */
.food-card--group[data-overlay="1"] > .card-image::after {
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.35) 35%,
        rgba(0,0,0,0.85) 100%
    ) !important;
}

/* Each row: transparent bg + compact spacing + white-on-dark text. */
.food-card--group[data-overlay="1"] .card-group-row {
    background: transparent !important;
    padding: 0.3rem 0;
}
.food-card--group[data-overlay="1"] .card-group-row:hover {
    background: rgba(255,255,255,0.08) !important;
}
.food-card--group[data-overlay="1"] .card-group-row + .card-group-row {
    border-top: 1px solid rgba(255,255,255,0.18);
}
.food-card--group[data-overlay="1"] .card-group-row h3 {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.food-card--group[data-overlay="1"] .card-group-row .card-ingredients {
    color: rgba(255,255,255,0.8) !important;
}
.food-card--group[data-overlay="1"] .card-group-row .card-price {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.food-card--group[data-overlay="1"] .card-group-row .line-through {
    color: rgba(255,255,255,0.55) !important;
}
.food-card--group[data-overlay="1"] .card-group-row .food-name-en {
    color: rgba(255,255,255,0.55) !important;
}
.food-card--group[data-overlay="1"] .card-group-row .add-to-cart-btn {
    width: 2rem;
    height: 2rem;
}
.food-card--group[data-overlay="1"] .card-group-row .add-to-cart-btn svg {
    width: 1.05rem;
    height: 1.05rem;
}

/* Tailwind divide-y on the <ul> wins specificity unless we kill it:
   for overlay variants we use a brighter, semi-transparent divider. */
.food-card--group[data-overlay="1"] > ul.card-group-rows.divide-y > * + * {
    border-top-color: rgba(255,255,255,0.18) !important;
}

/* ==================== BUSY STATE (Phase 5 — server round-trip) ====================
   Apply .rm-busy to any cart button to show a spinner overlay and lock
   it down while a fetch is in flight. Works on icon-sized buttons
   (.add-to-cart-btn, .quantity-btn) and on the modal's wide CTA. */
.rm-busy {
    position: relative;
    pointer-events: none;
    color: transparent !important;
    cursor: wait;
}
.rm-busy > * {
    visibility: hidden;
}
.rm-busy::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 1rem;
    margin-top: -0.5rem;
    margin-left: -0.5rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    visibility: visible;
    color: #fff;
    animation: rmSpin 0.7s linear infinite;
}
/* Larger spinner for the modal CTA so it visually balances the button height. */
#foodDetailAddBtn.rm-busy::after {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: -0.625rem;
    margin-left: -0.625rem;
    border-width: 2.5px;
}
@keyframes rmSpin {
    to { transform: rotate(360deg); }
}

/* While the page is doing a global cart sync, dim the whole cart UI
   subtly so users see something is happening. Cheap & non-blocking. */
.rm-cart-syncing .quantity-control,
.rm-cart-syncing .add-to-cart-btn {
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

/* ==================== UNIFIED COUNTER (Phase 5.1) ====================
   The same .quantity-control / .quantity-btn markup is now used by every
   card variant and by every grouped-card row, so the user sees one
   recognizable +/- chip everywhere. The base style lives at the top of
   this file; the override below boosts contrast for overlay variants
   (Modern / HalfWidth / FullWidth) where the chip sits on top of the
   food image — both for solo cards and grouped-card rows. */
.food-card[data-overlay="1"] .quantity-control,
.food-card--group[data-overlay="1"] .quantity-control {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ==================== HERO BANNER (HeroStyle: gradient-banner / image-banner) ==================== */
.rm-hero-banner {
    position: relative;
    width: 100%;
    /* min-height کل ارتفاع بنر است؛ padding-top (مقدار header) از JS ست می‌شود */
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.rm-hero-banner--image {
    min-height: 340px;
}

/* لایه‌های تصویر بنر — فقط در موبایل استفاده می‌شوند؛ روی دسکتاپ مخفی و
   خود section با background cover نمایش می‌دهد (دست‌نخورده). */
.rm-hero-banner__backdrop,
.rm-hero-banner__img {
    display: none;
}

.rm-hero-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 100%);
    z-index: 1;
}

/* ==================== بنر تصویری در موبایل: تصویر کامل + پس‌زمینهٔ بلور ====================
   مشکل: روی موبایل عرض کم است و background-size:cover تصویر پهن را برش می‌زند.
   راه‌حل: کل تصویر با contain نمایش داده می‌شود؛ پشتش همان تصویر بلور+تیره (cover)
   فضای خالی را پر می‌کند. هر دو لایه URL را از background-image خود section ارث می‌برند. */
@media (max-width: 639px) {
    /* تصویرِ cropِ خود section پشت لایه‌ها پنهان می‌شود؛ ارتفاع کمی بیشتر برای جا دادن تصویر کامل */
    .rm-hero-banner--image {
        min-height: 360px;
        background-color: #1a1512;
    }
    .rm-hero-banner--image .rm-hero-banner__backdrop,
    .rm-hero-banner--image .rm-hero-banner__img {
        display: block;
        position: absolute;
        inset: 0;
        background-image: inherit;       /* همان url خود section */
        background-repeat: no-repeat;
    }
    /* پس‌زمینهٔ بلور و تیره — کل قاب را پر می‌کند */
    .rm-hero-banner--image .rm-hero-banner__backdrop {
        background-size: cover;
        background-position: center;
        filter: blur(22px) brightness(0.5) saturate(1.1);
        transform: scale(1.18);          /* جلوگیری از لبهٔ شفافِ بلور */
        z-index: 0;
    }
    /* تصویر کامل و واضح — بدون برش، چسبیده به بالا تا متن پایین رویش نیفتد */
    .rm-hero-banner--image .rm-hero-banner__img {
        background-size: contain;
        background-position: center top;
        z-index: 0;                      /* به‌خاطر ترتیب DOM روی backdrop می‌نشیند */
    }
    /* overlay فقط پایین را تیره کند تا تصویر بالا واضح بماند و متن خوانا شود */
    .rm-hero-banner--image .rm-hero-banner__overlay {
        background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0.75) 100%);
    }
}

.rm-hero-banner__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 1rem 2.5rem;
    width: 100%;
}

.rm-hero-banner__logo {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,0.85);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.15);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity  0.35s ease;
}

.rm-hero-banner__logo-letter {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.rm-hero-banner__name {
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,0.35);
    margin: 0 0 0.25rem;
    line-height: 1.3;
}

.rm-hero-banner__tagline {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.85);
    margin: 0 0 0.75rem;
}

.rm-hero-banner__stats {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255,255,255,0.18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 999px;
    padding: 0.4rem 1.1rem;
}

.rm-hero-banner__stat {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
}

.rm-hero-banner__stat-icon {
    width: 14px;
    height: 14px;
    color: #FDE68A;
    flex-shrink: 0;
}

.rm-hero-banner__stat-label {
    font-size: 0.7rem;
    font-weight: 400;
    color: rgba(255,255,255,0.75);
}

.rm-hero-banner__stat-divider {
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,0.35);
}

/* وضعیت باز/بسته بودن در آمار بنر */
.rm-hero-banner__status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
}

.rm-hero-banner__status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: rmStatusBlink 1.4s ease-in-out infinite;
}

.rm-hero-banner__status.is-open .rm-hero-banner__status-dot {
    background: #22C55E;
    --rm-status-glow: 34,197,94;
}

.rm-hero-banner__status.is-closed .rm-hero-banner__status-dot {
    background: #EF4444;
    --rm-status-glow: 239,68,68;
}

@keyframes rmStatusBlink {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(var(--rm-status-glow), 0.55);
    }
    50% {
        opacity: 0.55;
        box-shadow: 0 0 0 5px rgba(var(--rm-status-glow), 0);
    }
}

.rm-hero-banner__status.is-open { color: #BBF7D0; }
.rm-hero-banner__status.is-closed { color: #FECACA; }

/* ===== بلوک مشترک «وضعیت + ساعت کاری» هدر (partial _RmHeroStatus) =====
   کلاس‌های عمومی rm-hero-status__* در هر سه حالت هدر استفاده می‌شوند.
   رنگ‌های پیش‌فرض برای پس‌زمینهٔ روشنِ «کارت ساده»؛ کانتکست بنر پایین‌تر override می‌شود.
   انیمیشن چشمک‌زن از keyframe مشترک rmStatusBlink می‌آید. */
.rm-hero-card__stats {            /* کانتینر کارت ساده */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;          /* به‌جای بیرون‌زدن، اجازهٔ کوچک‌شدن */
    max-width: 50%;        /* سقف سهم بلوک وضعیت از عرض کارت تا فضای کافی برای نام رستوران بماند */
}
/* متن طولانیِ ساعت کاری (چند شیفت) داخل کارت بپیچد، نه اینکه از کادر بیرون بزند */
.rm-hero-card__stats .rm-hero-status__hours { min-width: 0; }
.rm-hero-card__stats .rm-hero-status__hours-text {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
}
.rm-hero-card__stats .rm-hero-status__badge { white-space: nowrap; }
.rm-hero-status__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 700;
}
.rm-hero-status__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: rmStatusBlink 1.4s ease-in-out infinite;
}
.rm-hero-status__badge.is-open { color: #16A34A; }
.rm-hero-status__badge.is-open .rm-hero-status__dot {
    background: #22C55E;
    --rm-status-glow: 34,197,94;
}
.rm-hero-status__badge.is-closed { color: #DC2626; }
.rm-hero-status__badge.is-closed .rm-hero-status__dot {
    background: #EF4444;
    --rm-status-glow: 239,68,68;
}
.rm-hero-status__divider {
    width: 1px;
    height: 18px;
    background: #E5E7EB;
}
.rm-hero-status__hours {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: #6B7280;
}
.rm-hero-status__hours-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* کانتکست بنر (حالت ۲/۳): متن روشن روی پس‌زمینهٔ تیره/گرادیانت */
.rm-hero-banner__stats .rm-hero-status__badge { color: #fff; }
.rm-hero-banner__stats .rm-hero-status__badge.is-open { color: #BBF7D0; }
.rm-hero-banner__stats .rm-hero-status__badge.is-closed { color: #FECACA; }
.rm-hero-banner__stats .rm-hero-status__divider { background: rgba(255,255,255,0.35); }
.rm-hero-banner__stats .rm-hero-status__hours { color: rgba(255,255,255,0.85); }

@media (max-width: 380px) {
    .rm-hero-status__hours { font-size: 0.66rem; }
    .rm-hero-card__stats .rm-hero-status__divider { display: none; }
}

/* فید سفید پایین بنر */
.rm-hero-banner__fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--rm-bg, #F9FAFB));
    z-index: 3;
    pointer-events: none;
}

.dark-mode .rm-hero-banner__fade {
    background: linear-gradient(to bottom, transparent, var(--rm-dark-canvas));
}

/* ==================== NAVBAR در حالت بنر (transparent → white) ==================== */
#rmHeader.rm-header--over-banner {
    background: transparent !important;
    box-shadow: none !important;
}

/* فقط دکمه‌های آیکون (rm-icon-btn) — نه دکمه پروفایل که گرادیان دارد */
#rmHeader.rm-header--over-banner .rm-icon-btn {
    background: rgba(255,255,255,0.25) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.35);
}

#rmHeader.rm-header--over-banner .rm-icon-btn svg,
#rmHeader.rm-header--over-banner .lang-btn-text {
    color: #fff !important;
}

/* سایه پروفایل روی بنر حذف می‌شود */
#rmHeader.rm-header--over-banner #rmProfileBtn {
    box-shadow: none !important;
}

/* location button در حالت بنر */
#rmHeader.rm-header--over-banner #locationBtn {
    color: #fff;
}
#rmHeader.rm-header--over-banner #locationBtn p,
#rmHeader.rm-header--over-banner #locationBtn span {
    color: rgba(255,255,255,0.9) !important;
}
#rmHeader.rm-header--over-banner #locationBtn .bg-primary-100 {
    background: rgba(255,255,255,0.2) !important;
}
#rmHeader.rm-header--over-banner #locationBtn svg {
    color: #fff !important;
}

/* branch selector button در حالت بنر (مثل locationBtn) — نام شعبه روی تصویرِ روشن خوانا شود */
#rmHeader.rm-header--over-banner #rmBranchBtn {
    color: #fff;
}
#rmHeader.rm-header--over-banner #rmBranchBtn p,
#rmHeader.rm-header--over-banner #rmBranchBtn span {
    color: rgba(255,255,255,0.95) !important;
}
#rmHeader.rm-header--over-banner #rmBranchBtn .bg-primary-100 {
    background: rgba(255,255,255,0.2) !important;
}
#rmHeader.rm-header--over-banner #rmBranchBtn svg {
    color: #fff !important;
}

#rmHeader.rm-header--over-banner #notificationBadge {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
}

/* ==================== LOGO MORPH در navbar ==================== */
/* پیش‌فرض: پهنا صفر — فضا نمی‌گیرد و نامرئی است */
.rm-header-logo {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.75);
    pointer-events: none;
    transition: max-width 0.4s cubic-bezier(0.34,1.56,0.64,1),
                opacity    0.3s ease,
                transform  0.35s cubic-bezier(0.34,1.56,0.64,1);
}

/* وقتی بنر از دید خارج شد */
.rm-header-logo.is-visible {
    max-width: 220px;
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

#rmHeaderLogoImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* ================================================================
   حالت‌های فروش: rm--no-cart و rm--note-mode
   ================================================================ */

/* --- حالت بدون فروش آنلاین (نه آنلاین، نه یادداشت) --- */
.rm--no-cart .add-to-cart-btn,
.rm--no-cart .quantity-control {
    display: none !important;
}
/* کارت باید فاصله پایین را حفظ کند وقتی دکمه نیست */
.rm--no-cart .card-footer {
    padding-bottom: 0;
}
/* مخفی کردن کل cart bar و sidebar cart در حالت بدون فروش */
.rm--no-cart #cartBar,
.rm--no-cart .rm-sidebar-cart {
    display: none !important;
}

/* --- حالت یادداشت سفارش --- */
/* دکمه‌های + و - باید باشند (کاربر می‌تواند یادداشت کند) */
/* فقط رنگ دکمه‌ها کمی متفاوت‌تر می‌شود تا نشان دهد حالت خرید نیست */
.rm--note-mode .add-to-cart-btn {
    background: #6b7280;
    box-shadow: 0 4px 12px rgba(107,114,128,0.3);
}
.rm--note-mode .add-to-cart-btn:hover {
    background: #4b5563;
}
.rm--note-mode .quantity-btn {
    color: #6b7280;
    border-color: rgba(107,114,128,0.2);
}
.rm--note-mode .quantity-btn:hover {
    background: rgba(107,114,128,0.1);
}
/* نوار سبد در حالت یادداشت — رنگ خاکستری به جای نارنجی */
.rm--note-mode .rm-cart-bar {
    background: linear-gradient(135deg, #4b5563, #374151);
}
.rm--note-mode .rm-cart-bar__btn {
    background: #6b7280;
}
.rm--note-mode .rm-cart-bar__btn:hover {
    background: #4b5563;
}
.rm--note-mode .rm-sidebar-cart-checkout {
    background: #6b7280;
}
.rm--note-mode .rm-sidebar-cart-checkout:hover {
    background: #4b5563;
}

/* ==================== FONT SIZE PRESETS ====================
   Applied as body class from RestaurantMenuTheme.FontSize
   ================================================================ */
body.rm-font--small main { font-size: 14px; }
body.rm-font--large main  { font-size: 18px; }
/* medium = 16px is browser default — no override needed */

/* Adjust card text in small mode */
body.rm-font--small .food-name  { font-size: 0.82rem !important; }
body.rm-font--small .food-price { font-size: 0.78rem !important; }
body.rm-font--small .food-desc  { font-size: 0.72rem !important; }
body.rm-font--small .rm-sub-tab__label { font-size: 0.72rem !important; }
body.rm-font--small .rm-main-tab       { font-size: 0.8rem  !important; }

/* Adjust card text in large mode */
body.rm-font--large .food-name  { font-size: 1.05rem !important; }
body.rm-font--large .food-price { font-size: 1rem    !important; }
body.rm-font--large .food-desc  { font-size: 0.9rem  !important; }
body.rm-font--large .rm-sub-tab__label { font-size: 0.9rem  !important; }
body.rm-font--large .rm-main-tab       { font-size: 1rem    !important; }

/* ==================== BACKGROUND COLOR ====================
   --rm-bg is injected as a CSS variable from RestaurantMenuTheme.BackgroundColor
   Override body background (higher specificity than Tailwind bg-gray-50)
   ================================================================ */
body.rm-font--small,
body.rm-font--medium,
body.rm-font--large {
    background-color: var(--rm-bg, #F9FAFB) !important;
}

body.dark-mode.rm-font--small,
body.dark-mode.rm-font--medium,
body.dark-mode.rm-font--large {
    background-color: var(--rm-dark-canvas) !important;
}

/* ==================== FAVORITES ====================
   دکمه قلب روی کارت محصول
   ================================================================ */
.rm-fav-card-btn svg {
    transition: fill 0.2s ease, color 0.2s ease;
}
.rm-fav-card-btn.rm-fav-active svg {
    fill: currentColor;
    color: #ef4444; /* red-500 */
    stroke: #ef4444;
}


/* ==================== FOOTER ====================
   فوتر منوی رستوران + نمادهای اعتماد الکترونیک
   ================================================================ */
.rm-footer {
    margin-top: 2rem;
    padding: 1.75rem 1rem 1.5rem;
    background: #fff;
    border-top: 1px solid #f0f0f0;
}

.rm-footer__inner {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

/* پرداخت امن */
.rm-footer__pay {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

.rm-footer__pay-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.rm-footer__pay-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
}

.rm-footer__divider {
    width: 100%;
    height: 1px;
    background: #f0f0f0;
}

/* نمادها */
.rm-footer__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.rm-footer__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    min-height: 90px;
    padding: 0.25rem;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.rm-footer__badge:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}

/* اسنیپت‌های نماد (img/a/iframe تزریق‌شده از دیتابیس) را مهار می‌کنیم */
.rm-footer__badge img,
.rm-footer__badge iframe {
    max-width: 100%;
    max-height: 84px;
    height: auto;
    border: 0;
}

.rm-footer__badge a {
    display: inline-flex;
    line-height: 0;
}

.rm-footer__copy {
    font-size: 0.72rem;
    color: #9ca3af;
    text-align: center;
    line-height: 1.7;
}

.rm-footer__owner {
    color: var(--color-primary-600, #E85A2A);
    font-weight: 600;
    text-decoration: none;
}
.rm-footer__owner:hover {
    text-decoration: underline;
}

/* حالت تیره */
.dark-mode .rm-footer {
    background: #1f2937;
    border-top-color: rgba(255,255,255,0.08);
}
.dark-mode .rm-footer__divider { background: rgba(255,255,255,0.08); }
.dark-mode .rm-footer__badge {
    background: #111827;
    border-color: rgba(255,255,255,0.08);
}
.dark-mode .rm-footer__pay-text { color: #d1d5db; }

/* دکمه‌ی اطلاعات مجموعه در فوتر */
.rm-footer__info-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: var(--color-primary-50, #FFF3E0);
    color: var(--color-primary-600, #E85A2A);
    border: 1px solid var(--color-primary-100, #FFE0B2);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}
.rm-footer__info-btn:hover { transform: translateY(-1px); }
.rm-footer__info-btn:active { transform: translateY(0); }
.rm-footer__info-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.dark-mode .rm-footer__info-btn {
    background: rgba(232,90,42,0.12);
    border-color: rgba(232,90,42,0.25);
}


/* ==================== INFO MODAL ====================
   مودال اطلاعات مجموعه (آدرس/تماس/ساعت/شبکه‌ها)
   ================================================================ */

/* برند */
.rm-info-brand {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.25rem 0 1.1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #f1f1f1;
}
.dark-mode .rm-info-brand { border-bottom-color: rgba(255,255,255,0.08); }

.rm-info-brand__logo {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-600, #E85A2A);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
}
.rm-info-brand__logo img { width: 100%; height: 100%; object-fit: cover; }

.rm-info-brand__name {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1f2937;
    margin: 0 0 0.35rem;
}
.dark-mode .rm-info-brand__name { color: #fff; }

/* وضعیت باز/بسته */
.rm-info-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
}
.rm-info-status__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: rmStatusBlink 1.4s ease-in-out infinite;
}
.rm-info-status.is-open { color: #16a34a; }
.rm-info-status.is-closed { color: #dc2626; }
.rm-info-status.is-open .rm-info-status__dot {
    background: #22C55E; --rm-status-glow: 34,197,94;
}
.rm-info-status.is-closed .rm-info-status__dot {
    background: #EF4444; --rm-status-glow: 239,68,68;
}

/* ردیف‌های اطلاعات */
.rm-info-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
}
.rm-info-row {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.85rem;
    background: #fafafa;
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
}
.rm-info-row--link { transition: background 0.2s ease; }
.rm-info-row--link:active { background: #f0f0f0; }
.dark-mode .rm-info-row { background: #111827; }

.rm-info-row__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-50, #FFF3E0);
    color: var(--color-primary-600, #E85A2A);
}
.rm-info-row__icon svg { width: 20px; height: 20px; }
.dark-mode .rm-info-row__icon { background: rgba(232,90,42,0.15); }

.rm-info-row__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}
.rm-info-row__label {
    font-size: 0.72rem;
    color: #9ca3af;
    font-weight: 600;
}
.rm-info-row__value {
    font-size: 0.92rem;
    color: #374151;
    font-weight: 600;
    line-height: 1.6;
    word-break: break-word;
}
.dark-mode .rm-info-row__value { color: #e5e7eb; }

.rm-info-row__action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    margin-top: 0.45rem;
    padding: 0.4rem 0.85rem;
    background: var(--color-primary-600, #E85A2A);
    color: #fff;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}
.rm-info-row__action svg { width: 15px; height: 15px; }

/* درباره */
.rm-info-about { margin: 1.25rem 0; }
.rm-info-about__title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #1f2937;
    margin: 0 0 0.5rem;
}
.dark-mode .rm-info-about__title { color: #fff; }
.rm-info-about__text {
    font-size: 0.88rem;
    color: #6b7280;
    line-height: 1.9;
    margin: 0;
}
.dark-mode .rm-info-about__text { color: #9ca3af; }

/* شبکه‌های اجتماعی */
.rm-info-social { margin-top: 1.25rem; }
.rm-info-social__title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #1f2937;
    margin: 0 0 0.75rem;
}
.dark-mode .rm-info-social__title { color: #fff; }
.rm-info-social__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}
.rm-social-chip {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rm-social-chip:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}
.rm-social-chip svg { width: 24px; height: 24px; }
.rm-social-chip--instagram { background: linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888); }
.rm-social-chip--telegram  { background: #0088cc; }
.rm-social-chip--whatsapp  { background: #25D366; }
.rm-social-chip--facebook  { background: #1877F2; }
.rm-social-chip--twitter   { background: #000; }
.rm-social-chip--linkedin  { background: #0077B5; }
.rm-social-chip--youtube   { background: #FF0000; }
.rm-social-chip--aparat    { background: #ED145B; }



/* ==================== Organizational Discount (checkout drawer) ==================== */
/* tailwind.min.css این تم prebuilt است و disabled: variant ندارد — حالت غیرفعال دکمه اینجاست. */
#orgDiscountBtn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
/* حالت «اعمال‌شده» — دکمه نقش حذف می‌گیرد (outline قرمز ملایم) */
#orgDiscountBtn.rm-org-applied {
    background: #fff;
    color: #dc2626;
    border: 1.5px solid #fca5a5;
}
.dark #orgDiscountBtn.rm-org-applied {
    background: transparent;
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.45);
}

/* سهمیهٔ تخفیف سازمانی به تفکیک تاریخِ رزرو (#orgDiscountPerDate) */
.rm-org-date-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.6rem;
    font-size: 0.72rem;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}
.dark .rm-org-date-row {
    background: rgba(120, 53, 15, 0.18);
    border-color: rgba(180, 83, 9, 0.4);
}
.rm-org-date-label {
    font-weight: 700;
    color: #92400e;
}
.dark .rm-org-date-label { color: #fcd34d; }
.rm-org-date-quota {
    flex-shrink: 0;
    color: #b45309;
}
.dark .rm-org-date-quota { color: #fbbf24; }
/* تاریخی که سهمیه‌اش تمام شده — کم‌رنگ و خاکستری */
.rm-org-date-row.rm-org-date-empty {
    background: #f9fafb;
    border-color: #e5e7eb;
    opacity: 0.7;
}
.dark .rm-org-date-row.rm-org-date-empty {
    background: rgba(31, 41, 55, 0.5);
    border-color: rgba(75, 85, 99, 0.5);
}
.rm-org-date-row.rm-org-date-empty .rm-org-date-label,
.rm-org-date-row.rm-org-date-empty .rm-org-date-quota {
    color: #9ca3af;
}

/* خط تخفیف‌خوردهٔ سبد: badge درصد + قیمت اصلی خط‌خورده + قیمت بعد از تخفیف
   (renderCartLinePriceHtml در restaurant-menu.js — drawer، سایدبار و لیست آیتم‌های checkout) */
.rm-line-discount-badge {
    display: inline-block;
    background: #dcfce7;
    color: #16a34a;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
    border-radius: 9999px;
    padding: 1px 7px;
    margin-inline-end: 6px;
    vertical-align: middle;
    white-space: nowrap;
}
.dark .rm-line-discount-badge {
    background: rgba(22, 163, 74, 0.18);
    color: #4ade80;
}
.rm-line-price-old {
    text-decoration: line-through;
    color: #9ca3af;
    font-weight: 500;
    font-size: 0.85em;
    margin-inline-end: 6px;
}
.dark .rm-line-price-old {
    color: #6b7280;
}
.rm-line-price-new {
    color: #16a34a;
    font-weight: 700;
}
.dark .rm-line-price-new {
    color: #4ade80;
}

/* ==================== اعلان شعبه — پاپ‌آپ ورود (#rmBranchAlert) ==================== */
/* [hidden] باید صریحاً override شود — وگرنه display:flex برنده می‌شود و overlay نامرئیِ کلیک‌خور می‌ماند */
.rm-alert-overlay[hidden] { display: none; }
.rm-alert-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}
.rm-alert-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.rm-alert-overlay.is-open .rm-alert-backdrop { opacity: 1; }
.rm-alert-card {
    position: relative;
    width: 100%;
    max-width: 24rem;
    background: #fff;
    color: #1F2937;
    border-radius: 28px;
    padding: 2.75rem 1.5rem 1.5rem;
    text-align: center;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(28px) scale(0.92);
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.18, 1.25, 0.4, 1);
}
.rm-alert-overlay.is-open .rm-alert-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.rm-alert-icon {
    position: absolute;
    top: -34px;
    right: 50%;
    transform: translateX(50%);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #E85A2A, #FF8C5A);
    color: #fff;
    box-shadow: 0 10px 24px -6px rgba(232, 90, 42, 0.55), 0 0 0 6px rgba(255, 255, 255, 0.92);
}
.rm-alert-icon svg { width: 32px; height: 32px; }
.rm-alert-title {
    font-size: 1.125rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}
.rm-alert-message {
    font-size: 0.9rem;
    line-height: 1.9;
    color: #4B5563;
    white-space: pre-line;
    max-height: 50vh;
    overflow-y: auto;
    margin-bottom: 1.25rem;
}
.rm-alert-btn {
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #E85A2A, #FF8C5A);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 8px 18px -8px rgba(232, 90, 42, 0.6);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rm-alert-btn:active { transform: scale(0.97); }
.dark .rm-alert-card {
    background: #1F2937;
    color: #F9FAFB;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.7);
}
.dark .rm-alert-message { color: #D1D5DB; }
.dark .rm-alert-icon {
    box-shadow: 0 10px 24px -6px rgba(232, 90, 42, 0.55), 0 0 0 6px rgba(31, 41, 55, 0.92);
}

/* ==================== PWA install banner (rm-pwa.js) ====================
   کارت پایین‌چین بالای bottom-nav که با کلاس .is-visible از پایین بالا می‌آید.
   ساختار DOM در rm-pwa.js ساخته می‌شود. */
.rm-pwa-banner {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px)); /* بالای bottom-nav */
    z-index: 60;
    max-width: 440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    background: rgba(255,255,255,0.86);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 20px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.18), inset 0 0 0 0.5px rgba(255,255,255,0.5);
    transform: translateY(140%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(.34,1.4,.64,1), opacity 0.3s ease;
}
.rm-pwa-banner.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.rm-pwa-banner__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.rm-pwa-banner__icon--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: var(--color-primary-50, #FFF1EC);
}

.rm-pwa-banner__text {
    flex: 1;
    min-width: 0;
}
.rm-pwa-banner__title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.3;
}
.rm-pwa-banner__sub {
    font-size: 0.6875rem;
    color: #6b7280;
    line-height: 1.5;
    margin-top: 1px;
}
.rm-pwa-share {
    vertical-align: -2px;
    color: var(--color-primary-600, #ea580c);
}

.rm-pwa-banner__actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}
.rm-pwa-banner__install {
    border: none;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary-500, #f97316), var(--color-primary-600, #ea580c));
    box-shadow: 0 4px 12px rgba(234,88,12,0.35);
    transition: transform 0.15s ease;
    white-space: nowrap;
}
.rm-pwa-banner__install:active { transform: scale(0.94); }

.rm-pwa-banner__close {
    border: none;
    background: transparent;
    cursor: pointer;
    color: #9ca3af;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}
.rm-pwa-banner__close:hover { background: rgba(0,0,0,0.05); color: #4b5563; }

/* Dark mode */
.dark-mode .rm-pwa-banner {
    background: rgba(31,41,55,0.9);
    border-color: rgba(255,255,255,0.08);
}
.dark-mode .rm-pwa-banner__title { color: #f3f4f6; }
.dark-mode .rm-pwa-banner__sub { color: #9ca3af; }
.dark-mode .rm-pwa-banner__close:hover { background: rgba(255,255,255,0.08); color: #d1d5db; }

/* ===================================================================
   رزرو غذا (RmReservation) — صفحهٔ /rm/reservation
   کلاس‌های کارت/گرید/قیمت از همان تم reuse می‌شوند؛ این‌ها فقط هدر رزرو،
   نوار تاریخ و حالت‌های ناموجود/بارگذاری را اضافه می‌کنند.
   =================================================================== */

/* هدر رزرو */
.rm-resv-hero__card {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-700));
    color: #fff;
    border-radius: 1.25rem;
    padding: 1rem 1.125rem;
    box-shadow: 0 8px 24px -10px var(--color-primary-700);
}
.rm-resv-hero__icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rm-resv-hero__icon svg { width: 1.6rem; height: 1.6rem; }
.rm-resv-hero__title { font-size: 1.125rem; font-weight: 800; line-height: 1.3; }
.rm-resv-hero__sub { font-size: 0.75rem; opacity: 0.9; margin-top: 0.15rem; }

/* نوار تاریخ افقی */
.rm-resv-datebar { background: transparent; }
.rm-resv-datebar__inner {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.25rem 0.125rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.rm-resv-datebar__inner::-webkit-scrollbar { display: none; }

.rm-resv-date-chip {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    min-width: 4.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: 1rem;
    background: #fff;
    border: 1.5px solid #f0f0f0;
    color: #6b7280;
    box-shadow: 0 2px 8px -4px rgba(0,0,0,0.12);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.rm-resv-date-chip:active { transform: scale(0.96); }
.rm-resv-date-chip__day { font-size: 0.7rem; font-weight: 600; }
.rm-resv-date-chip__date { font-size: 0.8rem; font-weight: 800; white-space: nowrap; }
.rm-resv-date-chip.active {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: #fff;
    box-shadow: 0 6px 16px -6px var(--color-primary-600);
}

/* بدنه + حالت بارگذاری */
.rm-resv-body { min-height: 40vh; transition: opacity 0.2s ease; }
.rm-resv-body.rm-resv-loading { opacity: 0.45; pointer-events: none; }
.rm-resv-section { scroll-margin-top: 140px; }

/* badge ناموجود روی کارت رزرو */
.rm-resv-oos-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17,24,39,0.62);
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
    z-index: 3;
}
.rm-resv-oos-badge[hidden] { display: none; }
.rm-resv-card--oos .add-to-cart-btn { opacity: 0.45; pointer-events: none; }
.rm-resv-card--oos .card-image img { filter: grayscale(0.7); }

/* dark mode */
.dark-mode .rm-resv-date-chip { background: #1f2937; border-color: #374151; color: #9ca3af; }
.dark-mode .rm-resv-date-chip.active { background: var(--color-primary-600); border-color: var(--color-primary-600); color: #fff; }

/* بنر رزرو در صفحهٔ منو + ردیف رزرو در پروفایل */
.rm-resv-promo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 0.875rem;
    border-radius: 1.125rem;
    background: linear-gradient(135deg, var(--color-primary-50), #fff);
    border: 1.5px solid var(--color-primary-100);
    box-shadow: 0 4px 14px -8px var(--color-primary-300);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rm-resv-promo:active { transform: scale(0.99); }
.rm-resv-promo__icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.875rem;
    background: var(--color-primary-600);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rm-resv-promo__icon svg { width: 1.4rem; height: 1.4rem; }
.rm-resv-promo__text { flex: 1; min-width: 0; }
.rm-resv-promo__title { display: block; font-weight: 800; font-size: 0.9rem; color: #1f2937; }
.rm-resv-promo__sub { display: block; font-size: 0.72rem; color: #6b7280; margin-top: 0.1rem; }
.rm-resv-promo__arrow { width: 1.1rem; height: 1.1rem; color: var(--color-primary-600); flex-shrink: 0; }

.dark-mode .rm-resv-promo {
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border-color: rgba(255,255,255,0.08);
}
.dark-mode .rm-resv-promo__title { color: #f3f4f6; }
.dark-mode .rm-resv-promo__sub { color: #9ca3af; }

/* ==================== پیش‌بینی نتایج جام جهانی ==================== */
.rm-wc-card {
    border-radius: 1.125rem;
    background: linear-gradient(135deg, var(--color-primary-50), #fff);
    border: 1.5px solid var(--color-primary-100);
    box-shadow: 0 4px 14px -8px var(--color-primary-300);
    padding: 0.875rem;
}
.rm-wc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.rm-wc-head__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 800;
    font-size: 0.95rem;
    color: #1f2937;
}
.rm-wc-head__icon { font-size: 1.15rem; }
.rm-wc-leaderboard-btn {
    flex-shrink: 0;
    border: none;
    border-radius: 0.75rem;
    padding: 0.4rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--color-primary-600);
    color: #fff;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.rm-wc-leaderboard-btn:active { transform: scale(0.96); }

.rm-wc-list { display: flex; flex-direction: column; gap: 0.625rem; }
.rm-wc-empty { text-align: center; color: #6b7280; font-size: 0.85rem; padding: 1rem 0; }

.rm-wc-match {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 0.875rem;
    padding: 0.75rem;
    box-shadow: 0 2px 8px -6px rgba(0,0,0,0.15);
}
.rm-wc-match__stage {
    font-size: 0.7rem;
    color: var(--color-primary-600);
    font-weight: 700;
    margin-bottom: 0.4rem;
    text-align: center;
}
.rm-wc-match__teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
}
.rm-wc-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
}
.rm-wc-flag { font-size: 1.6rem; line-height: 1; }
.rm-wc-flag--img { width: 2rem; height: 1.4rem; object-fit: cover; border-radius: 3px; }
.rm-wc-flag--ph { opacity: 0.4; }
.rm-wc-team__name {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1f2937;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.rm-wc-mid { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-width: 64px; }
.rm-wc-vs { font-weight: 800; color: #9ca3af; font-size: 0.85rem; }
.rm-wc-mid__time { font-size: 0.65rem; color: #6b7280; text-align: center; }
.rm-wc-mid__label { font-size: 0.62rem; color: #6b7280; }
.rm-wc-final-score { font-weight: 800; font-size: 1.05rem; color: var(--color-primary-700, #c2410c); }

.rm-wc-match__action { margin-top: 0.7rem; }
.rm-wc-predict { display: flex; align-items: center; justify-content: center; gap: 0.4rem; }
.rm-wc-in {
    width: 3rem;
    height: 2.2rem;
    text-align: center;
    border: 1.5px solid var(--color-primary-100);
    border-radius: 0.6rem;
    font-weight: 700;
    font-size: 0.95rem;
    background: #fff;
    color: #1f2937;
}
.rm-wc-in:focus { outline: none; border-color: var(--color-primary-500, var(--color-primary-600)); }
.rm-wc-dash { font-weight: 800; color: #9ca3af; }
.rm-wc-submit {
    border: none;
    border-radius: 0.7rem;
    padding: 0.45rem 0.9rem;
    font-weight: 700;
    font-size: 0.8rem;
    background: var(--color-primary-600);
    color: #fff;
    cursor: pointer;
    margin-inline-start: 0.3rem;
}
.rm-wc-submit:disabled { opacity: 0.6; cursor: default; }
.rm-wc-login {
    display: block;
    text-align: center;
    padding: 0.5rem;
    border-radius: 0.7rem;
    background: var(--color-primary-50);
    color: var(--color-primary-700, var(--color-primary-600));
    font-weight: 700;
    font-size: 0.82rem;
    text-decoration: none;
    border: 1px dashed var(--color-primary-300);
}
.rm-wc-note { text-align: center; font-size: 0.75rem; color: #6b7280; }
.rm-wc-note--ok { color: #16a34a; margin-top: 0.4rem; }
.rm-wc-result-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.rm-wc-yourpred { font-size: 0.78rem; color: #4b5563; }
.rm-wc-points { font-size: 0.8rem; font-weight: 800; padding: 0.25rem 0.5rem; border-radius: 0.5rem; }
.rm-wc-points--win { background: #dcfce7; color: #15803d; }
.rm-wc-points--zero { background: #f3f4f6; color: #6b7280; }

/* bottom-sheet رده‌بندی */
.rm-wc-sheet { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; justify-content: center; }
.rm-wc-sheet[hidden] { display: none; }
.rm-wc-sheet__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.rm-wc-sheet__panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    background: #fff;
    border-radius: 1.25rem 1.25rem 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: rmWcSheetUp 0.25s ease;
}
@keyframes rmWcSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.rm-wc-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #f0f0f0;
}
.rm-wc-sheet__header h3 { font-size: 1rem; font-weight: 800; color: #1f2937; margin: 0; }
.rm-wc-sheet__close { border: none; background: transparent; font-size: 1.1rem; color: #6b7280; cursor: pointer; }
.rm-wc-sheet__body { overflow-y: auto; padding: 0.5rem 0.75rem 1.25rem; }
.rm-wc-lb { list-style: none; margin: 0; padding: 0; }
.rm-wc-lb__row { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.5rem; border-bottom: 1px solid #f5f5f5; }
.rm-wc-lb__row--me { background: var(--color-primary-50); border-radius: 0.6rem; }
.rm-wc-lb__rank { width: 1.8rem; text-align: center; font-weight: 800; color: var(--color-primary-600); }
.rm-wc-lb__name { flex: 1; min-width: 0; font-size: 0.85rem; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-wc-lb__pts { font-size: 0.82rem; font-weight: 800; color: #15803d; }
body.rm-wc-sheet-open { overflow: hidden; }

/* dark-mode */
.dark-mode .rm-wc-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border-color: rgba(255,255,255,0.08);
}
.dark-mode .rm-wc-head__title { color: #f3f4f6; }
.dark-mode .rm-wc-match { background: #1f2937; border-color: rgba(255,255,255,0.06); }
.dark-mode .rm-wc-team__name { color: #f3f4f6; }
.dark-mode .rm-wc-in { background: #111827; color: #f3f4f6; border-color: rgba(255,255,255,0.12); }
.dark-mode .rm-wc-sheet__panel { background: #1f2937; }
.dark-mode .rm-wc-sheet__header { border-color: rgba(255,255,255,0.08); }
.dark-mode .rm-wc-sheet__header h3 { color: #f3f4f6; }
.dark-mode .rm-wc-lb__name { color: #f3f4f6; }
.dark-mode .rm-wc-lb__row { border-color: rgba(255,255,255,0.05); }