/* ── Swiggy-Inspired Premium Typography System ────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --font-primary: 'Plus Jakarta Sans', 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-alt: 'Manrope', 'Inter', sans-serif;

  /* Typography Colors */
  --text-primary: #1D1D1F;
  --text-secondary: #6B7280;
  --text-accent: #FC8019;
  --text-success: #16A34A;
  --text-white: #FFFFFF;

  /* Letter Spacing */
  --ls-heading: -0.3px;
  --ls-body: 0px;

  /* Line Height */
  --lh-heading: 120%;
  --lh-body: 145%;
}

/* Global Reset & Base Typography */
html, body, button, input, select, textarea, optgroup {
  font-family: var(--font-primary) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  color: var(--text-primary);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

/* 1. Hero Title: 30px, Bold (700), Letter Spacing: -0.3px, Line Height: 120% */
h1, .h1, .page-title, .hero-title, .hero-heading {
  font-family: var(--font-primary) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: var(--ls-heading) !important;
  line-height: var(--lh-heading) !important;
  color: var(--text-primary);
}

/* 2. Section Heading: 24px, Bold (700), Letter Spacing: -0.3px, Line Height: 120% */
h2, .h2, .section-title, .section-heading, .mobile-section-title, .sec-title {
  font-family: var(--font-primary) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: var(--ls-heading) !important;
  line-height: var(--lh-heading) !important;
  color: var(--text-primary);
}

/* 3. Card Title: 18px, SemiBold (600), Letter Spacing: -0.3px, Line Height: 120% */
h3, .h3, .card-title, .rest-name, .restaurant-name, .store-name {
  font-family: var(--font-primary) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: var(--ls-heading) !important;
  line-height: var(--lh-heading) !important;
  color: var(--text-primary);
}

/* 4. Product Name: 16px, SemiBold (600), Letter Spacing: -0.3px, Line Height: 120% */
h4, .h4, .product-name, .item-name, .menu-item-name, .dish-name, .menu-label {
  font-family: var(--font-primary) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: var(--ls-heading) !important;
  line-height: var(--lh-heading) !important;
  color: var(--text-primary);
}

/* 5. Price: 16px, Bold (700), Green (#16A34A), Letter Spacing: 0px, Line Height: 145% */
.price, .item-price, .product-price, .rest-price, .price-tag, .cart-price, .total-price, .disc-price, .item-price-val {
  font-family: var(--font-primary) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text-success) !important;
  line-height: var(--lh-body) !important;
  letter-spacing: var(--ls-body) !important;
}

/* 6. Description: 13px, Regular (400), Gray (#6B7280), Letter Spacing: 0px, Line Height: 145% */
p, .description, .item-desc, .menu-sub, .rest-cuisine, .subtitle, .text-muted, .text-gray-500, .desc-text, .meta-text, .search-sub, .order-meta, .stat-lbl, .field-label {
  font-family: var(--font-primary) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--text-secondary);
  line-height: var(--lh-body) !important;
  letter-spacing: var(--ls-body) !important;
}

/* 7. Category: 14px, Medium (500), Letter Spacing: 0px, Line Height: 145% */
.category, .category-name, .cat-title, .cat-name, .cuisine-tag, .cat-lbl, .filter-chip {
  font-family: var(--font-primary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: var(--lh-body) !important;
  letter-spacing: var(--ls-body) !important;
}

/* 8. Button Text: 15px, SemiBold (600), Letter Spacing: 0px, Line Height: 145% */
button, .btn, .action-btn, .btn-primary, .btn-secondary, .btn-explore, .add-btn, .checkout-btn, .cta-btn {
  font-family: var(--font-primary) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: var(--lh-body) !important;
  letter-spacing: var(--ls-body) !important;
}

/* 9. Navigation Label: 12px, Medium (500), Letter Spacing: 0px, Line Height: 145% */
.nav-label, .bnav-label, .bottom-nav span, .nav-item span {
  font-family: var(--font-primary) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: var(--lh-body) !important;
  letter-spacing: var(--ls-body) !important;
}

/* 10. Badge Text: 11px, Bold (700), Letter Spacing: -0.3px, Line Height: 120% */
.badge, .badge-text, .tag-badge, .status-badge, .offer-badge, .discount-tag, .rating-badge, .veg-badge, .nonveg-badge, .b-badge {
  font-family: var(--font-primary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: var(--lh-heading) !important;
  letter-spacing: var(--ls-heading) !important;
}

/* ── Dark Mode - Global ────────────────────────────────────────────── */

/* Root element — must be first */
html.dark {
  background: #0f172a;
  color-scheme: dark;
}

html.dark body {
  background: #0f172a !important;
  color: #f8fafc !important;
  /* Prevent white flash between sections */
  min-height: 100vh;
}

html.dark a {
  color: #f8fafc;
}

/* Base layouts and containers */
html.dark .stats-strip,
html.dark .section,
html.dark .form-card,
html.dark .rest-card,
html.dark .mini-card,
html.dark #app-header,
html.dark .page-header,
html.dark .bottom-nav,
html.dark .modal-content,
html.dark .bg-white {
  background: #1e293b !important;
  border-color: #334155 !important;
}

/* Borders */
html.dark .stat-item,
html.dark .menu-item,
html.dark .sep,
html.dark .border-b,
html.dark .border,
html.dark .rest-meta,
html.dark #filter-bar {
  border-color: #334155 !important;
}
html.dark .sep {
  background: #334155 !important;
}

/* Typography Colors */
html.dark .stat-val,
html.dark .mc-val,
html.dark .section-title,
html.dark .menu-label,
html.dark .rest-name,
html.dark .page-title,
html.dark .text-gray-900,
html.dark .text-slate-900,
html.dark .text-black,
html.dark .loc-addr,
html.dark .meta-item,
html.dark .pwa-title,
html.dark .empty-title,
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 {
  color: #f8fafc !important;
}

html.dark .mc-label,
html.dark .field-label,
html.dark .menu-sub,
html.dark .rest-cuisine,
html.dark .text-gray-500,
html.dark .text-slate-500,
html.dark .cat-name,
html.dark .pwa-sub,
html.dark .empty-sub,
html.dark p {
  color: #94a3b8 !important;
}

html.dark .menu-right i,
html.dark .text-gray-400 {
  color: #475569 !important;
}

/* ── HEADER ──────────────────────────────────────────────── */
html.dark #app-header {
  background: rgba(15, 23, 42, 0.92) !important;
  border-bottom-color: #334155 !important;
}

html.dark .notif-btn {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

html.dark .notif-btn:hover {
  color: #f97316 !important;
}

html.dark .loc-icon {
  background: rgba(249, 115, 22, 0.15) !important;
}

html.dark .loc-dot {
  border-color: #0f172a !important;
}

/* ── SEARCH BAR ──────────────────────────────────────────── */
html.dark .search-input {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html.dark .search-input::placeholder {
  color: #475569 !important;
}

html.dark .search-input:focus {
  background: #1e293b !important;
  border-color: #f97316 !important;
}

html.dark .search-wrap i {
  color: #64748b !important;
}

/* ── FILTER BAR ──────────────────────────────────────────── */
html.dark #filter-bar {
  background: rgba(15, 23, 42, 0.97) !important;
}

html.dark .filter-chip {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html.dark .filter-chip.active {
  background: #f97316 !important;
  color: white !important;
  border-color: #f97316 !important;
}

html.dark .filter-chip.active-veg {
  background: rgba(22, 163, 74, 0.15) !important;
  color: #4ade80 !important;
  border-color: #16a34a !important;
}

/* ── BANNER DOTS ──────────────────────────────────────────── */
html.dark .banner-dot {
  background: #334155 !important;
}

html.dark .banner-dot.active {
  background: #f97316 !important;
}

/* ── CATEGORIES ──────────────────────────────────────────── */
html.dark .cat-icon {
  background: #334155 !important;
  border-color: #475569 !important;
}

html.dark .cat-item.is-active .cat-icon {
  background: rgba(249, 115, 22, 0.15) !important;
  border-color: #f97316 !important;
}

html.dark .cat-item.is-active .cat-name {
  color: #f97316 !important;
}

/* ── BUDGET STORE / OFFER SECTIONS (inline style overrides) ── */
/* These use inline styles so we target the parent container */
html.dark .section > div[style*="background: linear-gradient(180deg, #f0f9ff"],
html.dark .section > div[style*="background: linear-gradient(180deg, #ecfdf5"] {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Offer Section wrapper - target by class pattern */
html.dark .offer-section-wrap {
  background: #1e293b !important;
  border-color: #334155 !important;
}

/* Text overrides inside offer sections */
html.dark .offer-item-name {
  color: #f8fafc !important;
}

html.dark .offer-rest-name {
  color: #94a3b8 !important;
}

/* ── OFFER STRIP (Coupon ticket) ──────────────────────────── */
html.dark .offer-strip {
  background: linear-gradient(90deg, #1c1500, #2a1e00) !important;
  border-top-color: #854d0e !important;
}

html.dark .offer-strip::before,
html.dark .offer-strip::after {
  background: #0f172a !important;
}

html.dark .offer-text {
  color: #fbbf24 !important;
}

/* ── RESTAURANT CARDS ────────────────────────────────────── */
html.dark .rest-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark .rest-cover {
  background: #0f172a !important;
}

html.dark .rest-meta {
  background: #1e293b !important;
  border-bottom-color: #334155 !important;
}

html.dark .meta-item {
  color: #f8fafc !important;
}

html.dark .meta-item .lbl {
  color: #94a3b8 !important;
}

html.dark .meta-sep {
  background: #475569 !important;
}

/* Distance badge in dark mode */
html.dark .badge-dist {
  background: rgba(51, 65, 85, 0.95) !important;
  color: #f8fafc !important;
}

/* ── EMPTY STATE ─────────────────────────────────────────── */
html.dark .empty-icon {
  background: linear-gradient(135deg, #1e293b, #334155) !important;
  color: #475569 !important;
}

html.dark .empty-title {
  color: #f8fafc !important;
}

html.dark .empty-sub {
  color: #94a3b8 !important;
}

/* ── ACTIVE / HOVER states ──────────────────────────────── */
html.dark .menu-item:active,
html.dark .address-item:active,
html.dark .order-card:active {
  background: #334155 !important;
}

html.dark .logout-row:active {
  background: #451a23 !important;
}

/* ── INPUTS AND FORMS ────────────────────────────────────── */
html.dark .field-input,
html.dark input,
html.dark select,
html.dark textarea {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html.dark .field-input:focus,
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  background: #1e293b !important;
  border-color: #f97316 !important;
}

/* ── POPUP / MODAL ───────────────────────────────────────── */
html.dark .popup-box {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
}

html.dark .popup-box h2,
html.dark .popup-box h3,
html.dark .popup-box p {
  color: #f8fafc !important;
}

/* ── PWA BANNER ──────────────────────────────────────────── */
html.dark .pwa-inner {
  background: rgba(30, 41, 59, 0.97) !important;
  border-color: #334155 !important;
}

html.dark .pwa-dismiss {
  background: #334155 !important;
  color: #94a3b8 !important;
}

/* ── SKELETON ────────────────────────────────────────────── */
html.dark .skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%) !important;
  background-size: 200% 100% !important;
}

/* ── TOASTS ──────────────────────────────────────────────── */
html.dark .toast-success {
  background: #064e3b !important;
  border-color: #065f46 !important;
  color: #a7f3d0 !important;
}

html.dark .toast-error {
  background: #7f1d1d !important;
  border-color: #991b1b !important;
  color: #fecaca !important;
}

/* ── MISC COMPONENTS ─────────────────────────────────────── */
html.dark .mc-deco {
  opacity: 0.1 !important;
}

html.dark .danger-zone {
  background: #451a23 !important;
  border-color: #9f1239 !important;
}

html.dark .danger-title {
  color: #fda4af !important;
}

html.dark .danger-sub {
  color: #fecdd3 !important;
}

html.dark .danger-btn {
  border-color: #f43f5e !important;
  color: #fda4af !important;
}

html.dark .danger-btn:hover {
  background: #9f1239 !important;
}

/* ── TOGGLES ─────────────────────────────────────────────── */
html.dark .toggle-label {
  background: #475569 !important;
}

html.dark .toggle-input:checked + .toggle-label {
  background: #f97316 !important;
}

/* ── BOTTOM NAV ──────────────────────────────────────────── */
html.dark .bottom-nav {
  background: rgba(15, 23, 42, 0.98) !important;
  border-top-color: #334155 !important;
}

html.dark .nav-item {
  color: #94a3b8 !important;
}

html.dark .nav-item.active {
  color: #f97316 !important;
}

/* ── BACK BUTTON ─────────────────────────────────────────── */
html.dark .back-btn {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

/* ── ORDERS PAGE ─────────────────────────────────────────── */
html.dark .stat-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark .order-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark .order-card.is-active {
  border-color: rgba(249, 115, 22, 0.3) !important;
}

html.dark .items-block {
  background: rgba(15, 23, 42, 0.4) !important;
  border-color: #334155 !important;
}

html.dark .price-row {
  border-color: #334155 !important;
}

html.dark .order-total {
  color: #f8fafc !important;
}

html.dark .progress-bar {
  background: #334155 !important;
}

/* ── OUT-OF-ZONE BANNER ──────────────────────────────────── */
html.dark .out-of-zone-banner {
  background: linear-gradient(135deg, #1c0a00, #1a1200) !important;
  border-color: #7c2d12 !important;
}

/* ── INLINE STYLE OVERRIDES via CSS variables injection ──── */
/* Force dark backgrounds on hardcoded inline-styled divs in offer sections */
html.dark .section [style*="background: linear-gradient(180deg, #f0f9ff"] {
  background: linear-gradient(180deg, #0c1a2e 0%, #1e293b 100%) !important;
  border-color: #334155 !important;
}

html.dark .section [style*="background: linear-gradient(180deg, #ecfdf5"] {
  background: linear-gradient(180deg, #061a12 0%, #1e293b 100%) !important;
  border-color: #334155 !important;
}

/* Fix hardcoded dark text inside offer item cards */
html.dark [style*="color: #1e293b"],
html.dark [style*="color:#1e293b"] {
  color: #f8fafc !important;
}

html.dark [style*="color: #065f46"],
html.dark [style*="color:#065f46"] {
  color: #6ee7b7 !important;
}

html.dark [style*="color: #047857"],
html.dark [style*="color:#047857"] {
  color: #34d399 !important;
}

html.dark [style*="color: #92400e"],
html.dark [style*="color:#92400e"] {
  color: #fbbf24 !important;
}

html.dark [style*="color: #0284c7"],
html.dark [style*="color:#0284c7"] {
  color: #38bdf8 !important;
}

/* Add to cart "+" button in offer items */
html.dark [style*="background: white"][style*="border-radius: 6px"] {
  background: #334155 !important;
  color: #4ade80 !important;
}

/* Price badge in offer cards - ₹99 style */
html.dark [style*="background: #fbbf24"] {
  background: #92400e !important;
  color: #fbbf24 !important;
}

/* Rating badge in offer cards */
html.dark [style*="background: #d1fae5"][style*="color: #10b981"] {
  background: #064e3b !important;
  color: #34d399 !important;
}

html.dark [style*="background: #d1fae5"][style*="color: #047857"] {
  background: #064e3b !important;
  color: #34d399 !important;
}

/* ══ RESTAURANT PAGE ══════════════════════════════════════════════ */
html.dark .meta-strip {
  background: #1e293b !important;
  border-bottom-color: #334155 !important;
}

html.dark .meta-cell + .meta-cell {
  border-left-color: #334155 !important;
}

html.dark .meta-val {
  color: #f8fafc !important;
}

html.dark .meta-lbl {
  color: #64748b !important;
}

html.dark .controls-wrap {
  background: rgba(15, 23, 42, 0.97) !important;
  border-bottom-color: #334155 !important;
}

html.dark .sort-pill {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

html.dark .sort-pill.active {
  background: #f97316 !important;
  border-color: #f97316 !important;
  color: white !important;
}

html.dark .cat-tab {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

html.dark .cat-tab.active {
  background: #f97316 !important;
  border-color: #f97316 !important;
  color: white !important;
}

html.dark .food-toggle {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

html.dark .cat-name {
  color: #f8fafc !important;
}

html.dark .cat-count {
  color: #64748b !important;
}

html.dark .menu-item-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark .item-name {
  color: #f8fafc !important;
}

html.dark .item-desc {
  color: #64748b !important;
}

html.dark .item-price {
  color: #0f172a !important;
  background: #fef08a !important;
}

html.dark .item-img {
  background: #0f172a !important;
  border-bottom-color: #334155 !important;
}

html.dark .item-img-ph {
  background: #1e293b !important;
  color: #475569 !important;
}

html.dark .add-btn {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #4ade80 !important;
}

html.dark .item-rating {
  background: rgba(22, 163, 74, 0.1) !important;
  border-color: rgba(22, 163, 74, 0.3) !important;
}

/* ══ PROFILE PAGE ══════════════════════════════════════════════════ */
html.dark .stats-strip {
  background: #1e293b !important;
  border-bottom-color: #334155 !important;
}

html.dark .stat-item {
  border-right-color: #334155 !important;
}

html.dark .stat-val {
  color: #f8fafc !important;
}

html.dark .mini-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark .mc-val {
  color: #f8fafc !important;
}

html.dark .mc-label {
  color: #64748b !important;
}

html.dark .menu-item {
  color: #f8fafc !important;
}

html.dark .menu-item:active,
html.dark .menu-item:hover {
  background: #334155 !important;
}

html.dark .menu-label {
  color: #f8fafc !important;
}

html.dark .menu-sub {
  color: #64748b !important;
}

html.dark .about-content {
  background: #1e293b !important;
}

html.dark .about-handle {
  background: #334155 !important;
}

html.dark .about-title {
  color: #f8fafc !important;
}

html.dark .about-desc {
  color: #94a3b8 !important;
}

html.dark .about-features {
  background: #0f172a !important;
}

html.dark .feat-icon {
  background: #1e293b !important;
}

html.dark .feat-text {
  color: #cbd5e1 !important;
}

html.dark .about-footer {
  color: #64748b !important;
}

html.dark .about-close-btn {
  background: #334155 !important;
}

/* ══ WALLET PAGE ═══════════════════════════════════════════════════ */
html.dark .wallet-hero,
html.dark .wallet-card,
html.dark .txn-item,
html.dark .txn-card,
html.dark .wallet-section {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark .wallet-balance,
html.dark .wallet-amount,
html.dark .txn-title,
html.dark .txn-amount {
  color: #f8fafc !important;
}

html.dark .txn-date,
html.dark .txn-sub {
  color: #64748b !important;
}

/* ══ ALL RESTAURANTS / ALL CATEGORIES PAGES ════════════════════════ */
html.dark .page-wrap,
html.dark .page-header-bar {
  background: #0f172a !important;
}

html.dark .rest-card-wrap {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark .rest-card-name,
html.dark .page-heading {
  color: #f8fafc !important;
}

html.dark .rest-card-cuisine,
html.dark .rest-card-meta {
  color: #94a3b8 !important;
}

/* ══ GENERAL UTILITY ═══════════════════════════════════════════════ */
/* Fix any white backgrounds that may have leaked through */
html.dark [style*="background:#f8fafc"],
html.dark [style*="background: #f8fafc"],
html.dark [style*="background:#f1f5f9"],
html.dark [style*="background: #f1f5f9"] {
  background: #1e293b !important;
}

/* Hardcoded dark text to light */
html.dark [style*="color:#0f172a"],
html.dark [style*="color: #0f172a"] {
  color: #f8fafc !important;
}

/* Fix gray text */
html.dark [style*="color:#94a3b8"],
html.dark [style*="color: #94a3b8"] {
  color: #64748b !important;
}

/* ══ CART PAGE — Tailwind overrides ═══════════════════════════════ */
/* Cart uses TailwindCSS so we override common classes */
html.dark .bg-white {
  background: #1e293b !important;
}

html.dark .bg-gray-50 {
  background: #0f172a !important;
}

html.dark .bg-gray-100 {
  background: #1e293b !important;
}

html.dark .text-gray-900 {
  color: #f8fafc !important;
}

html.dark .text-gray-700 {
  color: #cbd5e1 !important;
}

html.dark .text-gray-600 {
  color: #94a3b8 !important;
}

html.dark .text-gray-500 {
  color: #64748b !important;
}

html.dark .text-gray-400 {
  color: #475569 !important;
}

html.dark .border-gray-100 {
  border-color: #334155 !important;
}

html.dark .border-gray-200 {
  border-color: #334155 !important;
}

html.dark #main-header {
  background: #1e293b !important;
  box-shadow: 0 1px 0 #334155 !important;
}

html.dark #cart-footer > div > div {
  /* Cart footer gradient in dark - already dark bg so just ensure bg matches */
  background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,1) 12%) !important;
}

html.dark .coupon-ticket {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark .coupon-ticket::before,
html.dark .coupon-ticket::after {
  background: #0f172a !important;
  border-color: #334155 !important;
}

html.dark .coupon-punch-line {
  border-top-color: #334155 !important;
}

html.dark .coupon-ticket.applied {
  background: #1c1107 !important;
  border-color: #f97316 !important;
}

/* Payment Modal */
html.dark #payment-modal-card,
html.dark #alert-modal > div:last-child,
html.dark #confirm-modal-box,
html.dark #msg-modal-box {
  background: #1e293b !important;
}

html.dark .payment-option {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

/* Coupon Modal bottom sheet */
html.dark .absolute.bottom-0.bg-\\[\\#f8fafc\\] {
  background: #0f172a !important;
}

/* Processing overlay */
html.dark #processing-backdrop {
  background: #0f172a !important;
}

html.dark #processing-center-icon {
  background: #1e293b !important;
}

html.dark #processing-title {
  color: #f8fafc !important;
}

/* Fix wallet alert bg-gray-50 inside modal */
html.dark .bg-gray-50.rounded-2xl {
  background: #0f172a !important;
  border-color: #334155 !important;
}

/* Fix bg-[#f8fafc] coupon modal */
html.dark [class*="bg-\\[\\#f8fafc\\]"] {
  background: #0f172a !important;
}

/* Bottom Navigation Bar Dark Mode Overrides */
html.dark #bottom-nav {
  background: rgba(15, 23, 42, 0.95) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
}

html.dark .bnav-item {
  color: #94a3b8 !important;
}

html.dark .bnav-item.is-active {
  color: #f97316 !important;
}

html.dark .bnav-item.is-active .bnav-pill {
  background: rgba(249, 115, 22, 0.2) !important;
  box-shadow: 0 4px 10px rgba(249, 115, 22, 0.3) !important;
}

html.dark .bnav-pill i {
  color: inherit;
}

html.dark .cart-badge {
  border-color: #0f172a !important;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   GOBOTAD PREMIUM DESIGN SYSTEM — v2.0
   Complete premium visual upgrade for ALL client pages
   ═══════════════════════════════════════════════════════════════════════ */

/* ── PREMIUM ROOT TOKENS ─────────────────────────────────────────── */
:root {
  --p-orange:       #f97316;
  --p-orange-d:     #ea580c;
  --p-orange-light: #fff7ed;
  --p-orange-glow:  rgba(249, 115, 22, 0.18);
  --p-navy:         #0f172a;
  --p-navy-2:       #1e293b;
  --p-slate:        #64748b;
  --p-slate-light:  #94a3b8;
  --p-shadow-card:  0 2px 8px rgba(15,23,42,0.07), 0 8px 24px rgba(15,23,42,0.05);
  --p-shadow-sm:    0 4px 12px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.04);
  --p-shadow-md:    0 10px 30px rgba(15,23,42,0.10), 0 4px 12px rgba(15,23,42,0.06);
  --p-shadow-glow:  0 8px 30px rgba(249,115,22,0.25);
  --p-t-fast:       0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --p-t-normal:     0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── PREMIUM ANIMATIONS ──────────────────────────────────────────── */
@keyframes p-fadeUp {
  from { opacity:0; transform:translateY(22px) scale(0.98); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}
@keyframes p-scaleIn {
  from { opacity:0; transform:scale(0.93); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes p-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes p-float {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-7px); }
}
@keyframes p-bounce-in {
  0%  { transform:scale(0.3); opacity:0; }
  50% { transform:scale(1.06); }
  70% { transform:scale(0.94); }
  100%{ transform:scale(1);   opacity:1; }
}
@keyframes p-live-dot {
  0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(34,197,94,.6); }
  50%      { transform:scale(1.15); box-shadow:0 0 0 5px rgba(34,197,94,0); }
}

.p-fade-up { animation:p-fadeUp .55s cubic-bezier(.16,1,.3,1) both; }
.p-delay-1 { animation-delay:.06s; }
.p-delay-2 { animation-delay:.12s; }
.p-delay-3 { animation-delay:.18s; }
.p-delay-4 { animation-delay:.24s; }

/* ── MOBILE HEADER PREMIUM ───────────────────────────────────────── */
#app-header-mobile {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  border-bottom: 1px solid rgba(226,232,240,0.7) !important;
  box-shadow: 0 2px 20px rgba(15,23,42,0.06) !important;
}

.loc-icon {
  background: linear-gradient(135deg,#fff7ed,#ffedd5) !important;
  box-shadow: 0 4px 14px rgba(249,115,22,.18) !important;
  border: 1.5px solid rgba(249,115,22,.15) !important;
}

.loc-dot {
  animation: p-live-dot 2s ease-in-out infinite !important;
}

.avatar-btn {
  background: linear-gradient(135deg,var(--p-orange),#ef4444) !important;
  box-shadow: 0 4px 16px rgba(249,115,22,.35) !important;
  border: 2.5px solid rgba(255,255,255,.9) !important;
  transition: all var(--p-t-fast) !important;
}

.avatar-btn:hover { transform:scale(1.08) !important; }

.notif-btn {
  background: white !important;
  border: 1.5px solid rgba(226,232,240,.9) !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.06) !important;
  transition: all var(--p-t-fast) !important;
}

.notif-btn:hover {
  border-color: var(--p-orange) !important;
  color: var(--p-orange) !important;
  box-shadow: 0 4px 14px rgba(249,115,22,.15) !important;
  transform: translateY(-1px) !important;
}

/* Premium Search Input */
.search-input {
  background: #f1f5f9 !important;
  border: 1.5px solid transparent !important;
  border-radius: 16px !important;
  height: 46px !important;
  font-family: 'Plus Jakarta Sans','Manrope','Inter',sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  transition: all var(--p-t-fast) !important;
}

.search-input:focus {
  background: white !important;
  border-color: var(--p-orange) !important;
  box-shadow: 0 0 0 4px rgba(249,115,22,.1), 0 4px 12px rgba(15,23,42,.08) !important;
}

/* Premium Filter Chips */
.filter-chip {
  height: 34px !important;
  padding: 0 16px !important;
  border-radius: 24px !important;
  border: 1.5px solid rgba(226,232,240,.8) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  background: white !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.06) !important;
  transition: all var(--p-t-fast) !important;
  color: #64748b !important;
}

.filter-chip:hover {
  border-color: var(--p-orange) !important;
  color: var(--p-orange) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(249,115,22,.12) !important;
}

.filter-chip.active {
  background: #0f172a !important;
  color: white !important;
  border-color: #0f172a !important;
  box-shadow: 0 4px 16px rgba(15,23,42,.2) !important;
}

.filter-chip.active-veg {
  background: linear-gradient(135deg,#f0fdf4,#dcfce7) !important;
  color: #15803d !important;
  border-color: #86efac !important;
}

/* ── RESTAURANT CARDS PREMIUM ────────────────────────────────────── */
.rest-card {
  background: #fff !important;
  border-radius: 22px !important;
  border: 1px solid rgba(226,232,240,.55) !important;
  box-shadow: var(--p-shadow-card) !important;
  transition: all var(--p-t-normal) !important;
  animation: p-fadeUp .5s cubic-bezier(.16,1,.3,1) both !important;
}

.rest-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 40px rgba(15,23,42,.12), 0 4px 16px rgba(249,115,22,.1) !important;
  border-color: rgba(249,115,22,.2) !important;
}

.rest-card:active { transform:scale(.98) translateY(-2px) !important; }

.rest-cover { height:140px !important; }

.rest-cover img {
  transition: transform .8s cubic-bezier(.16,1,.3,1) !important;
}

.rest-card:hover .rest-cover img { transform:scale(1.08) !important; }

.rest-gradient {
  background: linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.3) 55%,transparent 100%) !important;
}

.badge {
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .6px !important;
  padding: 4px 9px !important;
  border-radius: 10px !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.15) !important;
}

.badge-dist {
  background: rgba(255,255,255,.97) !important;
  color: #0f172a !important;
}

.fav-btn {
  width: 32px !important;
  height: 32px !important;
  background: rgba(255,255,255,.25) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  transition: all var(--p-t-fast) !important;
}

.fav-btn:hover { background:rgba(255,255,255,.45) !important; transform:scale(1.12) !important; }
.fav-btn:active { transform:scale(.88) !important; }

.fav-btn.active {
  background: rgba(239,68,68,.9) !important;
  border-color: rgba(239,68,68,.6) !important;
  animation: p-bounce-in .4s cubic-bezier(.16,1,.3,1) !important;
}

.rest-name {
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: -.4px !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.5) !important;
}

.offer-strip {
  background: linear-gradient(90deg,#fffbeb,#fef3c7) !important;
  border-top: 1px dashed #fcd34d !important;
}

/* ── BANNER CAROUSEL PREMIUM ─────────────────────────────────────── */
.mobile-banner-card {
  border-radius: 24px !important;
  box-shadow: 0 8px 32px rgba(15,23,42,.15) !important;
  transition: all var(--p-t-normal) !important;
}

.mobile-banner-card:hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: 0 16px 48px rgba(15,23,42,.2) !important;
}

.mobile-banner-overlay {
  background: linear-gradient(145deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.1) 100%) !important;
}

.mobile-banner-title {
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: -.4px !important;
}

.mobile-banner-btn {
  background: white !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  padding: 7px 18px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.15) !important;
}

.mobile-banner-dot.active {
  width: 22px !important;
  background: linear-gradient(90deg,var(--p-orange),var(--p-orange-d)) !important;
}

/* ── CATEGORIES PREMIUM ──────────────────────────────────────────── */
.mobile-cat-item { transition:all var(--p-t-fast) !important; }
.mobile-cat-item:hover { transform:translateY(-3px) !important; }
.mobile-cat-item:active { transform:scale(.93) !important; }

.mobile-cat-icon {
  width: 62px !important;
  height: 62px !important;
  border-radius: 22px !important;
  border: 2px solid rgba(226,232,240,.5) !important;
  box-shadow: 0 2px 10px rgba(15,23,42,.07) !important;
  transition: all var(--p-t-fast) !important;
  overflow: hidden !important;
}

.mobile-cat-item.is-active .mobile-cat-icon,
.mobile-cat-item:hover .mobile-cat-icon {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(249,115,22,.2) !important;
  border-color: rgba(249,115,22,.3) !important;
}

.mobile-section-title {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  letter-spacing: -.5px !important;
}

.see-all {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--p-orange) !important;
  padding: 5px 12px !important;
  border-radius: 10px !important;
  background: rgba(249,115,22,.09) !important;
  border: 1px solid rgba(249,115,22,.15) !important;
  transition: all var(--p-t-fast) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

.see-all:hover {
  background: var(--p-orange) !important;
  color: white !important;
}

/* ── BOTTOM NAV PREMIUM ──────────────────────────────────────────── */
#bottom-nav, .bottom-nav {
  background: rgba(255,255,255,.97) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border-top: 1px solid rgba(226,232,240,.7) !important;
  box-shadow: 0 -4px 24px rgba(15,23,42,.07) !important;
  border-radius: 28px 28px 0 0 !important;
}

.bnav-item { transition:all var(--p-t-fast) !important; }
.bnav-item:active { transform:scale(.92) !important; }

.bnav-item.is-active .bnav-pill {
  background: rgba(249,115,22,.12) !important;
  box-shadow: 0 4px 14px rgba(249,115,22,.25) !important;
}

.cart-badge {
  background: linear-gradient(135deg,var(--p-orange),#ef4444) !important;
  border: 2px solid white !important;
  box-shadow: 0 2px 8px rgba(249,115,22,.4) !important;
  font-weight: 900 !important;
  min-width: 16px !important;
  height: 16px !important;
  font-size: 9px !important;
  border-radius: 8px !important;
}

/* ── DESKTOP NAVBAR PREMIUM ──────────────────────────────────────── */
.desktop-navbar {
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  border-bottom: 1px solid rgba(226,232,240,.7) !important;
  box-shadow: 0 2px 24px rgba(15,23,42,.06) !important;
}

.desktop-nav-link {
  font-weight: 700 !important;
  color: #64748b !important;
  border-radius: 14px !important;
  transition: all var(--p-t-fast) !important;
}

.desktop-nav-link:hover {
  color: var(--p-orange) !important;
  background: rgba(249,115,22,.08) !important;
  transform: translateY(-1px) !important;
}

.desktop-cart-btn {
  background: linear-gradient(135deg,var(--p-orange),var(--p-orange-d)) !important;
  color: white !important;
  box-shadow: var(--p-shadow-glow) !important;
  border-radius: 14px !important;
}

.desktop-cart-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 36px rgba(249,115,22,.35) !important;
}

.desktop-loc-btn {
  background: #f8fafc !important;
  border: 1.5px solid rgba(226,232,240,.9) !important;
  border-radius: 14px !important;
  transition: all var(--p-t-fast) !important;
}

.desktop-loc-btn:hover {
  border-color: var(--p-orange) !important;
  background: white !important;
  box-shadow: 0 4px 16px rgba(249,115,22,.1) !important;
  transform: translateY(-1px) !important;
}

/* ── SIDEBAR FILTERS PREMIUM ─────────────────────────────────────── */
.sidebar-card {
  background: white !important;
  border-radius: 22px !important;
  border: 1px solid rgba(226,232,240,.6) !important;
  box-shadow: var(--p-shadow-card) !important;
  padding: 20px !important;
  transition: box-shadow var(--p-t-fast) !important;
}

.sidebar-card:hover { box-shadow: var(--p-shadow-md) !important; }

.cuisine-filter-item {
  border-radius: 10px !important;
  transition: all var(--p-t-fast) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

.cuisine-filter-item:hover {
  background: rgba(249,115,22,.07) !important;
  color: var(--p-orange) !important;
  padding-left: 14px !important;
}

.cuisine-filter-item.active {
  background: rgba(249,115,22,.1) !important;
  color: var(--p-orange) !important;
  font-weight: 900 !important;
}

.checkmark {
  border-radius: 6px !important;
  border: 2px solid rgba(226,232,240,.9) !important;
  transition: all var(--p-t-fast) !important;
}

.checkbox-container input:checked ~ .checkmark {
  background: linear-gradient(135deg,var(--p-orange),var(--p-orange-d)) !important;
  border-color: var(--p-orange) !important;
  box-shadow: 0 2px 8px rgba(249,115,22,.3) !important;
}

/* ── MINI CARDS / FOOD ITEMS ─────────────────────────────────────── */
.mini-card {
  background: white !important;
  border-radius: 20px !important;
  border: 1px solid rgba(226,232,240,.55) !important;
  box-shadow: var(--p-shadow-card) !important;
  transition: all var(--p-t-normal) !important;
  overflow: hidden !important;
}

.mini-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 14px 40px rgba(15,23,42,.1), 0 4px 14px rgba(249,115,22,.08) !important;
  border-color: rgba(249,115,22,.18) !important;
}

/* ── ORDERS PAGE PREMIUM ─────────────────────────────────────────── */
.orders-hero {
  background: linear-gradient(160deg,#1a2744 0%,#0f172a 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

.orders-hero::before {
  content: '' !important;
  position: absolute !important;
  top: -80px !important;
  right: -60px !important;
  width: 260px !important;
  height: 260px !important;
  background: radial-gradient(circle,rgba(249,115,22,.25),transparent 70%) !important;
  pointer-events: none !important;
}

.orders-hero::after {
  content: '' !important;
  position: absolute !important;
  bottom: -80px !important;
  left: -40px !important;
  width: 200px !important;
  height: 200px !important;
  background: radial-gradient(circle,rgba(99,102,241,.15),transparent 70%) !important;
  pointer-events: none !important;
}

.stat-card {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(12px) !important;
  transition: all var(--p-t-fast) !important;
}

.stat-card:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(249,115,22,.3) !important;
  transform: translateY(-2px) !important;
}

.stat-val { font-weight:900 !important; letter-spacing:-1px !important; }

.order-card {
  background: white !important;
  border-radius: 24px !important;
  border: 1px solid rgba(226,232,240,.6) !important;
  box-shadow: var(--p-shadow-card) !important;
  transition: all var(--p-t-normal) !important;
  overflow: hidden !important;
}

.order-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--p-shadow-md) !important;
  border-color: rgba(249,115,22,.18) !important;
}

.order-card:active { transform:scale(.985) !important; }

.order-card.is-active {
  border-color: #fed7aa !important;
  box-shadow: 0 6px 28px rgba(249,115,22,.12) !important;
}

.tab-btn {
  border-radius: 14px !important;
  font-weight: 800 !important;
  transition: all var(--p-t-fast) !important;
  font-family: 'Plus Jakarta Sans','Manrope','Inter',sans-serif !important;
}

.tab-btn.active {
  background: linear-gradient(135deg,var(--p-orange),var(--p-orange-d)) !important;
  box-shadow: 0 4px 16px rgba(249,115,22,.35) !important;
  color: white !important;
}

.tab-btn:hover:not(.active) {
  background: rgba(249,115,22,.07) !important;
  color: var(--p-orange) !important;
}

.search-box {
  border: 1.5px solid rgba(226,232,240,.9) !important;
  border-radius: 18px !important;
  font-family: 'Plus Jakarta Sans','Manrope','Inter',sans-serif !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.07) !important;
  transition: all var(--p-t-fast) !important;
  color: #0f172a !important;
}

.search-box:focus {
  border-color: var(--p-orange) !important;
  box-shadow: 0 4px 24px rgba(249,115,22,.14) !important;
}

.back-btn {
  background: rgba(255,255,255,.12) !important;
  border: 1.5px solid rgba(255,255,255,.2) !important;
  backdrop-filter: blur(10px) !important;
  transition: all var(--p-t-fast) !important;
}

.back-btn:hover {
  background: rgba(255,255,255,.22) !important;
  transform: scale(1.06) !important;
}

.back-btn:active { transform:scale(.92) !important; }

/* ── PROFILE PAGE PREMIUM ────────────────────────────────────────── */
.profile-hero {
  background: linear-gradient(160deg,#1a2744 0%,#0f172a 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

.profile-hero::before {
  content: '' !important;
  position: absolute !important;
  top: -80px !important;
  right: -80px !important;
  width: 280px !important;
  height: 280px !important;
  background: radial-gradient(circle,rgba(249,115,22,.22),transparent 70%) !important;
  pointer-events: none !important;
}

.avatar-ph {
  background: linear-gradient(135deg,var(--p-orange),#ef4444) !important;
  box-shadow: 0 8px 28px rgba(249,115,22,.4) !important;
}

.avatar-img, .avatar-ph {
  border: 3px solid rgba(249,115,22,.5) !important;
  border-radius: 24px !important;
}

.avatar-edit {
  background: linear-gradient(135deg,var(--p-orange),var(--p-orange-d)) !important;
  box-shadow: 0 4px 12px rgba(249,115,22,.4) !important;
}

.edit-btn {
  background: rgba(249,115,22,.15) !important;
  border: 1px solid rgba(249,115,22,.35) !important;
  color: #fb923c !important;
  border-radius: 24px !important;
  font-weight: 800 !important;
  transition: all var(--p-t-fast) !important;
  font-family: 'Plus Jakarta Sans','Manrope','Inter',sans-serif !important;
}

.edit-btn:hover {
  background: var(--p-orange) !important;
  color: white !important;
  border-color: var(--p-orange) !important;
}

.menu-item {
  background: white !important;
  border-radius: 18px !important;
  border: 1px solid rgba(226,232,240,.6) !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.05) !important;
  transition: all var(--p-t-fast) !important;
  text-decoration: none !important;
}

.menu-item:hover {
  transform: translateX(4px) !important;
  border-color: rgba(249,115,22,.2) !important;
  box-shadow: var(--p-shadow-sm) !important;
}

.menu-item:active { transform:scale(.98) !important; }

.menu-icon {
  background: linear-gradient(135deg,#fff7ed,#ffedd5) !important;
  border-radius: 14px !important;
  color: var(--p-orange) !important;
  box-shadow: 0 3px 10px rgba(249,115,22,.12) !important;
}

/* ── CART PAGE PREMIUM ───────────────────────────────────────────── */
.qty-btn, .q-btn {
  background: white !important;
  border: 1.5px solid rgba(226,232,240,.9) !important;
  border-radius: 50% !important;
  transition: all var(--p-t-fast) !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  font-family: 'Plus Jakarta Sans','Manrope','Inter',sans-serif !important;
  cursor: pointer !important;
}

.qty-btn:hover, .q-btn:hover {
  background: var(--p-orange) !important;
  color: white !important;
  border-color: var(--p-orange) !important;
  transform: scale(1.1) !important;
  box-shadow: 0 4px 12px rgba(249,115,22,.25) !important;
}

.qty-btn:active { transform:scale(.9) !important; }

.btn-primary, .place-order-btn, .checkout-btn, .btn-orange {
  background: linear-gradient(135deg,var(--p-orange) 0%,var(--p-orange-d) 100%) !important;
  color: white !important;
  border: none !important;
  border-radius: 18px !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  box-shadow: var(--p-shadow-glow) !important;
  transition: all var(--p-t-fast) !important;
  font-family: 'Plus Jakarta Sans','Manrope','Inter',sans-serif !important;
  letter-spacing: -.3px !important;
}

.btn-primary:hover, .place-order-btn:hover, .checkout-btn:hover, .btn-orange:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 40px rgba(249,115,22,.4) !important;
}

.btn-primary:active, .place-order-btn:active {
  transform: translateY(0) scale(.98) !important;
}

/* ── FORM ELEMENTS PREMIUM ───────────────────────────────────────── */
.form-card, .card-box {
  background: white !important;
  border-radius: 22px !important;
  border: 1px solid rgba(226,232,240,.6) !important;
  box-shadow: var(--p-shadow-card) !important;
}

/* ── MODAL PREMIUM ───────────────────────────────────────────────── */
.modal-content, .modal-box, .modal-panel {
  border-radius: 28px !important;
  box-shadow: 0 30px 80px rgba(15,23,42,.2) !important;
  animation: p-scaleIn .35s cubic-bezier(.16,1,.3,1) !important;
}

.modal-handle {
  width: 40px !important;
  height: 4px !important;
  background: rgba(226,232,240,.8) !important;
  border-radius: 4px !important;
  margin: 10px auto !important;
}

/* ── PAGE HERO HEADERS PREMIUM ───────────────────────────────────── */
.page-header {
  background: linear-gradient(160deg,#1a2744,#0f172a) !important;
  color: white !important;
  position: relative !important;
  overflow: hidden !important;
}

.page-header::before {
  content: '' !important;
  position: absolute !important;
  top: -100px !important;
  right: -80px !important;
  width: 300px !important;
  height: 300px !important;
  background: radial-gradient(circle,rgba(249,115,22,.2),transparent 70%) !important;
  pointer-events: none !important;
}

.page-title {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: white !important;
  letter-spacing: -.5px !important;
}

/* ── SKELETON PREMIUM ────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,#f1f5f9 25%,#e8edf4 50%,#f1f5f9 75%) !important;
  background-size: 200% 100% !important;
  animation: p-shimmer 1.6s infinite linear !important;
  border-radius: 12px !important;
}

/* ── EMPTY STATES PREMIUM ────────────────────────────────────────── */
.empty-state, .empty-wrap {
  padding: 48px 24px !important;
  text-align: center !important;
  animation: p-fadeUp .6s cubic-bezier(.16,1,.3,1) !important;
}

.empty-icon {
  width: 80px !important;
  height: 80px !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg,#fff7ed,#ffedd5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 20px !important;
  font-size: 2.2rem !important;
  box-shadow: 0 8px 24px rgba(249,115,22,.15) !important;
  animation: p-float 3s ease-in-out infinite !important;
}

.empty-title {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  letter-spacing: -.4px !important;
  margin-bottom: 8px !important;
}

/* ── PROGRESS BARS PREMIUM ───────────────────────────────────────── */
.progress-fill {
  background: linear-gradient(90deg,var(--p-orange),#fbbf24) !important;
  box-shadow: 0 2px 8px rgba(249,115,22,.35) !important;
  border-radius: 8px !important;
}

/* ── DESKTOP BANNER PREMIUM ──────────────────────────────────────── */
.desktop-banner-card {
  border-radius: 24px !important;
  box-shadow: 0 8px 32px rgba(15,23,42,.12) !important;
  transition: all var(--p-t-normal) !important;
}

.desktop-banner-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: 0 20px 60px rgba(15,23,42,.18) !important;
}

.desktop-hero-section {
  background: linear-gradient(180deg,#fff7ed 0%,#f8fafc 100%) !important;
}

/* ── SUGGESTION DROPDOWN PREMIUM ─────────────────────────────────── */
#searchSuggestionsMobile, #searchSuggestionsDesktop {
  border-radius: 18px !important;
  border: 1.5px solid rgba(226,232,240,.8) !important;
  box-shadow: 0 16px 48px rgba(15,23,42,.12) !important;
  animation: p-fadeUp .2s cubic-bezier(.16,1,.3,1) !important;
}

.suggest-item { transition: all var(--p-t-fast) !important; }
.suggest-item:hover { background:rgba(249,115,22,.05) !important; }

.suggest-icon {
  background: rgba(249,115,22,.1) !important;
  color: var(--p-orange) !important;
  border-radius: 10px !important;
}

/* ── SCROLLBARS PREMIUM ──────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(100,116,139,.3); border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:rgba(249,115,22,.5); }

/* ── DESKTOP FOOTER PREMIUM ──────────────────────────────────────── */
.desktop-footer { background:var(--p-navy) !important; }

.app-download-btn {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
  transition: all var(--p-t-fast) !important;
}

.app-download-btn:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: var(--p-orange) !important;
  transform: translateY(-2px) !important;
}

.desktop-socials a { transition:all var(--p-t-fast) !important; }
.desktop-socials a:hover {
  color: var(--p-orange) !important;
  transform: scale(1.15) translateY(-2px) !important;
}

/* ── ADDRESS / LOCATION PAGES ────────────────────────────────────── */
.address-card, .loc-card {
  background: white !important;
  border-radius: 20px !important;
  border: 1.5px solid rgba(226,232,240,.7) !important;
  box-shadow: var(--p-shadow-card) !important;
  transition: all var(--p-t-fast) !important;
}

.address-card:hover, .loc-card:hover {
  border-color: var(--p-orange) !important;
  box-shadow: 0 8px 28px rgba(249,115,22,.1) !important;
  transform: translateY(-2px) !important;
}

/* ── DARK MODE ADDITIONS FOR PREMIUM ─────────────────────────────── */
html.dark .rest-card,
html.dark .order-card,
html.dark .mini-card,
html.dark .cart-item,
html.dark .form-card,
html.dark .card-box,
html.dark .sidebar-card,
html.dark .address-card,
html.dark .loc-card {
  background: #1e293b !important;
  border-color: rgba(51,65,85,.7) !important;
}

html.dark .rest-card:hover,
html.dark .order-card:hover,
html.dark .mini-card:hover {
  border-color: rgba(249,115,22,.3) !important;
}

html.dark .search-input,
html.dark .search-box {
  background: #1e293b !important;
  border-color: rgba(51,65,85,.8) !important;
  color: #e2e8f0 !important;
}

html.dark .search-input:focus,
html.dark .search-box:focus {
  background: #263449 !important;
  border-color: var(--p-orange) !important;
}

html.dark .filter-chip {
  background: #1e293b !important;
  border-color: rgba(51,65,85,.8) !important;
  color: #94a3b8 !important;
}

html.dark .filter-chip:hover {
  background: rgba(249,115,22,.1) !important;
  border-color: rgba(249,115,22,.35) !important;
  color: var(--p-orange) !important;
}

html.dark .filter-chip.active {
  background: #334155 !important;
  color: white !important;
  border-color: #475569 !important;
}

html.dark #app-header-mobile {
  background: rgba(15,23,42,.96) !important;
  border-bottom-color: rgba(51,65,85,.8) !important;
}

html.dark #bottom-nav, html.dark .bottom-nav {
  background: rgba(15,23,42,.97) !important;
  border-top-color: rgba(51,65,85,.7) !important;
}

html.dark .notif-btn {
  background: #1e293b !important;
  border-color: rgba(51,65,85,.8) !important;
  color: #64748b !important;
}

html.dark .tabs {
  background: #1e293b !important;
  border-color: rgba(51,65,85,.7) !important;
}

html.dark .tab-btn:not(.active) { color:#64748b !important; }
html.dark .tab-btn:not(.active):hover {
  background: rgba(249,115,22,.08) !important;
  color: var(--p-orange) !important;
}

html.dark .modal-content, html.dark .modal-box {
  background: #1e293b !important;
  border-color: rgba(51,65,85,.7) !important;
}

html.dark #searchSuggestionsMobile,
html.dark #searchSuggestionsDesktop {
  background: #1e293b !important;
  border-color: rgba(51,65,85,.8) !important;
}

html.dark .suggest-item {
  color: #cbd5e1 !important;
  border-bottom-color: rgba(51,65,85,.5) !important;
}

html.dark .suggest-item:hover { background:rgba(249,115,22,.06) !important; }

html.dark .desktop-navbar {
  background: rgba(15,23,42,.97) !important;
  border-bottom-color: rgba(51,65,85,.7) !important;
}

html.dark .desktop-nav-link { color:#64748b !important; }
html.dark .desktop-nav-link:hover {
  color: var(--p-orange) !important;
  background: rgba(249,115,22,.08) !important;
}

html.dark .desktop-loc-btn {
  background: #1e293b !important;
  border-color: rgba(51,65,85,.8) !important;
}

html.dark .skeleton {
  background: linear-gradient(90deg,#1e293b 25%,#263449 50%,#1e293b 75%) !important;
  background-size: 200% 100% !important;
}

html.dark .menu-item {
  background: #1e293b !important;
  border-color: rgba(51,65,85,.7) !important;
}

html.dark .menu-item:hover { border-color:rgba(249,115,22,.3) !important; }

html.dark .menu-icon { background:rgba(249,115,22,.1) !important; }

html.dark .sidebar-card {
  background: #1e293b !important;
  border-color: rgba(51,65,85,.7) !important;
}

html.dark .see-all {
  color: var(--p-orange) !important;
  background: rgba(249,115,22,.1) !important;
  border-color: rgba(249,115,22,.2) !important;
}

html.dark .qty-btn, html.dark .q-btn {
  background: #263449 !important;
  border-color: rgba(51,65,85,.8) !important;
  color: #e2e8f0 !important;
}

html.dark .address-card, html.dark .loc-card {
  background: #1e293b !important;
  border-color: rgba(51,65,85,.7) !important;
}

html.dark .app-download-btn { background:rgba(255,255,255,.05) !important; }

/* ── DESKTOP RESPONSIVE TWEAKS ───────────────────────────────────── */
@media (min-width: 769px) {
  .rest-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 60px rgba(15,23,42,.14), 0 8px 24px rgba(249,115,22,.1) !important;
  }
  .desktop-banner-card:hover {
    transform: translateY(-8px) !important;
  }
}

@media (max-width: 640px) {
  .rest-card { border-radius:20px !important; }
  .mobile-banner-card { border-radius:20px !important; }
  .mobile-cat-icon { width:58px !important; height:58px !important; border-radius:20px !important; }
}

/* ==========================================================================
   MOBILE VIEW UI/UX ENHANCEMENTS — CLIENT PANEL SYSTEM STYLES
   ========================================================================== */

@media (max-width: 768px) {
  /* Smooth Touch Response & Body Pad */
  body {
    padding-bottom: calc(75px + env(safe-area-inset-bottom)) !important;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Mobile Header Blur Glass */
  #app-header-mobile, .mobile-header-bar, .sticky-mobile-header {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  html.dark #app-header-mobile, 
  html.dark .mobile-header-bar, 
  html.dark .sticky-mobile-header {
    background: rgba(15, 23, 42, 0.92) !important;
    border-bottom-color: rgba(51, 65, 85, 0.7) !important;
  }

  /* Floating Cart Snackbar Bar */
  .floating-cart-bar, #floatingCart {
    position: fixed;
    bottom: calc(70px + env(safe-area-inset-bottom));
    left: 12px;
    right: 12px;
    z-index: 1400;
    background: linear-gradient(135deg, #ff5200 0%, #f97316 100%);
    color: #ffffff;
    border-radius: 16px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(249, 115, 22, 0.4), 0 2px 10px rgba(0, 0, 0, 0.1);
    animation: slideUpFloat 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

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

  .floating-cart-info {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .floating-cart-count {
    background: rgba(255, 255, 255, 0.25);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.3px;
  }

  .floating-cart-total {
    font-size: 15px;
    font-weight: 800;
  }

  .floating-cart-btn {
    background: #ffffff;
    color: #f97316;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
  }

  .floating-cart-btn:active {
    transform: scale(0.94);
  }

  /* Filter Horizontal Chips */
  #filter-bar-mobile, .mobile-filter-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #filter-bar-mobile::-webkit-scrollbar, 
  .mobile-filter-chips::-webkit-scrollbar {
    display: none;
  }

  .filter-chip {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
  }

  html.dark .filter-chip {
    background: #1e293b;
    color: #94a3b8;
    border-color: #334155;
  }

  .filter-chip.active {
    background: #fff7ed;
    color: #ea580c;
    border-color: #fdba74;
  }

  html.dark .filter-chip.active {
    background: rgba(249, 115, 22, 0.18);
    color: #fb923c;
    border-color: rgba(249, 115, 22, 0.4);
  }

  .filter-chip.active-veg {
    background: #f0fdf4;
    color: #15803d;
    border-color: #86efac;
  }

  html.dark .filter-chip.active-veg {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.3);
  }

  /* Food Cards on Mobile */
  .dish-card-mobile, .mobile-food-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #e2e8f0;
    display: flex;
    gap: 12px;
    position: relative;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  }

  html.dark .dish-card-mobile, 
  html.dark .mobile-food-card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: none;
  }

  .dish-img-wrap {
    width: 96px;
    height: 96px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    background: #f8fafc;
  }

  .dish-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .add-btn-mobile {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    color: #16a34a;
    border: 1.5px solid #22c55e;
    font-weight: 800;
    font-size: 12px;
    padding: 4px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }

  html.dark .add-btn-mobile {
    background: #0f172a;
    color: #4ade80;
    border-color: #22c55e;
  }

  /* Mobile Stepper for Order Tracking */
  .mobile-stepper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    padding-left: 28px;
    margin: 16px 0;
  }

  .mobile-stepper::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    background: #e2e8f0;
    border-radius: 2px;
  }

  html.dark .mobile-stepper::before {
    background: #334155;
  }

  .step-item {
    position: relative;
  }

  .step-dot {
    position: absolute;
    left: -28px;
    top: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    z-index: 2;
  }

  .step-item.completed .step-dot {
    background: #22c55e;
    border-color: #16a34a;
    color: #ffffff;
  }

  .step-item.active .step-dot {
    background: #f97316;
    border-color: #ea580c;
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.2);
    animation: pulseDot 1.5s infinite;
  }

  @keyframes pulseDot {
    0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); }
    70% { box-shadow: 0 0 0 8px rgba(249, 115, 22, 0); }
    100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
  }

  /* Profile Dashboard Mobile Cards */
  .profile-menu-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    margin-bottom: 16px;
  }

  html.dark .profile-menu-card {
    background: #1e293b;
    border-color: #334155;
  }

  .profile-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    color: #1e293b;
    text-decoration: none;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
    font-weight: 600;
  }

  html.dark .profile-menu-item {
    color: #f8fafc;
    border-bottom-color: #334155;
  }

  .profile-menu-item:last-child {
    border-bottom: none;
  }

  .profile-menu-item:active {
    background: #f8fafc;
  }

  html.dark .profile-menu-item:active {
    background: #0f172a;
  }
}