/*
 * JoDeals - Mobile Optimization Stylesheet
 * Covers: Responsive layouts, touch targets, animations, typography, 
 *         skeleton loading, bottom nav, smooth transitions, and RTL support.
 */

@media (max-width: 768px) {

/* ============================================================
   PREMIUM MOBILE DESIGN TOKENS
   ============================================================ */

:root {
  --mob-radius-card: 20px;
  --mob-radius-btn: 14px;
  --mob-radius-pill: 999px;
  --mob-shadow-card: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
  --mob-shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
  --mob-shadow-search: 0 8px 32px rgba(255, 59, 48, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  --mob-spacing-section: 1.25rem;
  --mob-spacing-section-sm: 0.85rem;
  --mob-transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --mob-transition-med: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --mob-brand-red: #ff3b30;
  --mob-brand-amber: #ff9f0a;
  --mob-brand-gradient: linear-gradient(135deg, #ff3b30 0%, #ff9f0a 100%);
  --mob-header-height: 60px;
  --mob-bottom-nav-height: 72px;
}

/* ============================================================
   SECTION 1: GLOBAL MOBILE RESETS & FOUNDATIONS
   ============================================================ */

/* Prevent horizontal scroll, disable bounce/pull-to-refresh on all mobile devices */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Contain scroll to this element — stops rubber-band overscroll propagating
     to the browser chrome on iOS and prevents the page from bouncing when
     inner scroll containers are at their boundary */
  overscroll-behavior-x: none;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Scoped resets for tap highlights and iOS callouts on interactive elements and images */
body, a, img, button, [role="button"] {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
}

/* Disable text selection on content elements to feel like a native app (mobile & tablet only) */
@media (max-width: 1024px) {
  body, p, h1, h2, h3, h4, h5, h6, span, a, img, button, [role="button"] {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
  }
}

/* Ensure inputs, textareas, and select elements allow text input and selection */
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}

/* Disable image dragging to prevent browser-like interaction */
img {
  -webkit-user-drag: none !important;
  /* user-drag is non-standard; -webkit-user-drag is used for WebKit browsers */
}

/* Smooth scrolling enhancement */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Better touch action on interactive elements */
a, button, [role="button"], input[type="submit"], input[type="button"] {
  touch-action: manipulation;
  cursor: pointer;
}

/* ============================================================
   SECTION 1b: SCROLL & TOUCH PERFORMANCE BOOSTERS
   GPU-composited layers + overscroll containment for a native
   app-like feel on all mobile browsers.
   ============================================================ */

/* Every horizontally-scrollable container gets its own composited layer
   so the GPU can scroll them without repainting the rest of the page.
   Also contain scroll so that reaching the boundary doesn't bubble up
   to the page (eliminates the "stuck scroll" feeling on iOS). */
.slider-container,
.subcategory-scroll-container,
.subcategory-pills-scroll-container,
.partner-logo-container,
.category-slider-container,
.hero-city-chips,
.mobile-categories-bar {
  -webkit-overflow-scrolling: touch; /* legacy iOS — still helps on older devices */
  overscroll-behavior-x: contain;   /* stop horizontal over-scroll escaping to page */
  will-change: scroll-position;     /* promote to compositor thread */
  /* Snap-scroll jank reduction: use 'proximity' on containers with many small items */
}

/* Vertical-only scrolling containers */
#mobile-menu .flex-1.overflow-y-auto,
#favorites-list-container,
.mega-menu-categories-pane,
.mega-menu-subcategories-pane,
.search-suggestions-dropdown,
#mobile-search-overlay {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain; /* don't let inner scroll trigger page pull-to-refresh */
  will-change: scroll-position;
}

/* Deal cards: GPU-composited layer so scroll & tap feedback are instantaneous */
.deal-card,
.category-card,
.subcategory-bubble-card,
.parent-category-card {
  transform: translateZ(0);         /* create composite layer */
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;      /* prevent flicker during 3D transforms */
  -webkit-backface-visibility: hidden;
}

/* Reduce paint area on animated elements */
#main-header,
#mobile-bottom-nav,
#scroll-progress-bar,
#mobile-menu,
#mobile-menu-overlay {
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Images: block display + aspect-ratio prevents layout reflow while loading,
   eliminating the page-jump that makes scroll feel laggy on slow connections */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Prevent layout reflow on deal card images (aspect-ratio already set elsewhere,
   but width:100% ensures the placeholder box reserves correct space) */
.deal-card .zoom-image-container img,
.mobile-hero-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scroll snap: use 'proximity' for subcategory bubbles (many small items)
   vs 'mandatory' for card sliders (fewer, larger items) */
.subcategory-scroll-container,
.subcategory-pills-scroll-container {
  scroll-snap-type: x proximity;
}

/* ── Fast-tap: eliminate the 300 ms click delay on all touch devices ──
   `touch-action: manipulation` disables double-tap-to-zoom which is the
   root cause of the 300ms delay. Applied globally to avoid per-element fixes. */
html {
  touch-action: auto;
}
/* Allow default vertical scrolling everywhere */
body {
  touch-action: auto;
}

/* Minimum touch target size (WCAG AA - mobile & tablet only) */
@media (max-width: 1024px) {
  button,
  a,
  input[type="checkbox"],
  input[type="radio"],
  select,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Exception for inline links that should not enforce min-height */
p a, li a, span a, .text-link, #main-header button, #main-header a {
  min-height: unset;
  min-width: unset;
}

/* ============================================================
   SECTION 2: TYPOGRAPHY — MOBILE SCALE
   ============================================================ */
@media (max-width: 640px) {
  body {
    font-size: 15px;
    line-height: 1.5;
  }

  h1 { font-size: 1.5rem;  line-height: 1.2; }
  h2 { font-size: 1.125rem; line-height: 1.35; }
  h3 { font-size: 0.9375rem; line-height: 1.3; }
  h4 { font-size: 0.875rem; line-height: 1.35; }

  /* Prevent iOS auto-zoom on input focus (must be ≥ 16px) */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Better paragraph spacing */
  p {
    line-height: 1.65;
  }
}

/* ============================================================
   SECTION 3: FIXED HEADER — ALWAYS VISIBLE
   ============================================================ */

/* Override Tailwind's sticky — use fixed so header is always on screen
   regardless of parent overflow context or scroll direction */
#main-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 40;
  transition: box-shadow 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease;
  will-change: box-shadow;
}

/* Compensate for the fixed header height so content isn't hidden underneath */
#app-content-wrapper {
  padding-top: var(--mob-header-height, 64px);
}

/* Desktop header is taller (2 rows: topbar 64px + nav strip ~44px = ~108px) */
@media (min-width: 768px) {
  #app-content-wrapper {
    padding-top: 108px;
  }
}

/* ── Mobile Header Row ─────────────────────────────────────── */
@media (max-width: 767px) {
  #main-header {
    border-bottom: 1px solid rgba(226, 232, 240, 0.55) !important;
    min-height: var(--mob-header-height);
  }
  .dark #main-header {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  }

  /* Row itself: full-width flex container, nice horizontal padding */
  .mob-header-row {
    padding-left: 0.625rem; /* 10px */
    padding-right: 0.625rem;
  }

  /* ── Logo ── */
  .mob-logo {
    height: 28px !important;
    width: auto !important;
  }

  /* ── City Pill ── */
  .mob-city-pill {
    height: 32px !important;
    min-height: 32px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 11px !important;
    border-radius: 12px !important;
    gap: 5px !important;
    max-width: 130px !important;
    /* Subtle inner glow on active */
    -webkit-tap-highlight-color: transparent;
  }

  /* ── Action buttons: consistent 36×36 touch target ── */
  .mob-action-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 12px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Smooth spring tap feedback */
    transition:
      background 0.15s ease,
      border-color 0.15s ease,
      color 0.15s ease,
      transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    -webkit-tap-highlight-color: transparent;
    will-change: transform;
  }

  .mob-action-btn:active {
    transform: scale(0.87) !important;
  }

  /* Badge: use border-2 for crisp separation on any bg */
  .mob-badge {
    border: 2px solid #ffffff !important;
    border-radius: 9999px !important;
    line-height: 1 !important;
  }
  .dark .mob-badge {
    border-color: #0a0f1e !important;
  }
}

/* ── Scrolled state (applies on mobile AND desktop) ── */
#main-header.header-scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
  background-color: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.dark #main-header.header-scrolled {
  background-color: rgba(10, 16, 30, 0.98) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* ── Mobile search overlay: Escape key / swipe-down dismiss ── */
@media (max-width: 767px) {
  #mobile-search-overlay {
    /* Safe-area padding so input isn't behind notch */
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* Close button bigger touch target */
  #mobile-search-overlay > div:first-child button {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    flex-shrink: 0;
  }

  /* Search input pill inside overlay */
  #mobile-overlay-search-input {
    border-radius: 14px !important;
    font-size: 16px !important; /* prevent iOS zoom */
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

/* ============================================================
   SECTION 4: MOBILE SIDE DRAWER — PREMIUM REDESIGN
   ============================================================ */

/* ── Overlay ── */
#mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9990;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  visibility: hidden;
  opacity: 0;
}

#mobile-menu-overlay.active {
  visibility: visible;
  opacity: 1;
}

/* ── Panel shell ── */
#mobile-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 310px;
  max-width: 88vw;
  height: 100dvh;
  z-index: 9995;
  background: #ffffff;
  box-shadow: 0 32px 80px -8px rgba(0, 0, 0, 0.35),
              0 8px 24px rgba(0, 0, 0, 0.15);
  display: flex !important;
  flex-direction: column;
  visibility: hidden;
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.38s;
  will-change: transform;
  overflow: hidden;
}

html[dir="ltr"] #mobile-menu {
  left: 0; right: auto;
  transform: translate3d(-100%, 0, 0);
  border-radius: 0 28px 28px 0;
}

html[dir="rtl"] #mobile-menu {
  right: 0; left: auto;
  transform: translate3d(100%, 0, 0);
  border-radius: 28px 0 0 28px;
}

#mobile-menu.menu-open {
  transform: translate3d(0, 0, 0) !important;
  visibility: visible;
}

.dark #mobile-menu {
  background: #080d1a;
  box-shadow: 0 32px 80px -8px rgba(0, 0, 0, 0.7),
              0 8px 24px rgba(0, 0, 0, 0.4);
}

#mobile-menu.swiping { transition: none !important; }

/* ── Drawer header — brand red, no orange drift ── */
.drawer-header {
  background: linear-gradient(155deg, #ff3b30 0%, #e0241b 60%, #c71e15 100%);
  flex-shrink: 0;
}

.drawer-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
  opacity: 0.25;
}

.drawer-orb-1 {
  width: 160px; height: 160px;
  background: rgba(255, 255, 255, 0.6);
  top: -50px; right: -30px;
}

.drawer-orb-2 {
  width: 100px; height: 100px;
  background: rgba(255, 100, 80, 0.5);
  bottom: -20px; left: 10px;
}

/* ── Close button ── */
.drawer-close-btn {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.drawer-close-btn:active {
  transform: scale(0.88);
  background: rgba(255, 255, 255, 0.3);
}

/* ── User card (logged in) ── */
.drawer-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  padding: 10px 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.drawer-avatar {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.28);
  border: 2px solid rgba(255, 255, 255, 0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  font-weight: 900;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  letter-spacing: -0.02em;
}

.drawer-greeting {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1;
  margin-bottom: 2px;
  font-weight: 600;
}

.drawer-username {
  font-size: 13px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}

.drawer-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.03em;
}

.drawer-profile-arrow {
  width: 28px; height: 28px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
  transition: background 0.15s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.drawer-profile-arrow:active { transform: scale(0.9); }

/* ── Guest card ── */
.drawer-guest-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.drawer-guest-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.drawer-btn-login {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  background: #ffffff;
  color: #e53e3e;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transition: background 0.15s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.drawer-btn-login:active { transform: scale(0.96); }

.drawer-btn-register {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 900;
  transition: background 0.15s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.drawer-btn-register:active {
  transform: scale(0.96);
  background: rgba(0, 0, 0, 0.32);
}

/* ── Body ── */
.drawer-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 0 24px;
  background: #f8fafc;
}

.dark .drawer-body {
  background: #080d1a;
}

/* ── Section labels ── */
.drawer-section-label {
  padding: 14px 20px 5px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
}

.dark .drawer-section-label { color: #475569; }

/* ── Nav groups ── */
.drawer-nav-group {
  margin: 0 12px 4px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.dark .drawer-nav-group {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* ── Nav items ── */
.drawer-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  min-height: 52px;
  color: #334155;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.12s ease;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.drawer-nav-item + .drawer-nav-item {
  border-top: 1px solid rgba(226, 232, 240, 0.6);
}

.dark .drawer-nav-item {
  color: #cbd5e1;
}

.dark .drawer-nav-item + .drawer-nav-item {
  border-top-color: rgba(255, 255, 255, 0.05);
}

.drawer-nav-item:active {
  background: rgba(255, 59, 48, 0.05) !important;
}

/* Active state */
.drawer-nav-item--active {
  background: rgba(255, 59, 48, 0.05);
  color: #ff3b30;
}

.dark .drawer-nav-item--active {
  background: rgba(255, 59, 48, 0.1);
  color: #ff6b6b;
}

/* Danger (logout) */
.drawer-nav-item--danger {
  color: #ef4444;
}

.drawer-nav-item--danger:active {
  background: rgba(239, 68, 68, 0.08) !important;
}

/* ── Nav icons ── */
.drawer-nav-icon {
  width: 36px; height: 36px;
  border-radius: 11px;
  background: #f1f5f9;
  border: 1px solid rgba(226, 232, 240, 0.7);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: #64748b;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}

.dark .drawer-nav-icon {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.07);
  color: #94a3b8;
}

.drawer-nav-item--active .drawer-nav-icon,
.drawer-nav-icon--active {
  background: #ff3b30;
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(255, 59, 48, 0.35);
}

.drawer-nav-icon--fire {
  background: #ff3b30;
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(255, 59, 48, 0.3);
}

.drawer-nav-icon--ai {
  background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
}

.drawer-nav-icon--partner {
  background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(14, 165, 233, 0.25);
}

.drawer-nav-icon--location {
  background: linear-gradient(135deg, #ff4d4d 0%, #e63535 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(255, 59, 48, 0.25);
}

.drawer-nav-icon--theme {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.1);
  color: #f59e0b;
}

.dark .drawer-nav-icon--theme {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.drawer-nav-icon--lang {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25);
}

.drawer-nav-icon--danger {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* ── Nav label ── */
.drawer-nav-label {
  flex: 1;
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Nav arrow ── */
.drawer-nav-arrow {
  font-size: 9px;
  color: #94a3b8;
  flex-shrink: 0;
  opacity: 0.5;
}

/* ── Active dot ── */
.drawer-nav-active-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.15);
  flex-shrink: 0;
}

/* ── Badges ── */
.drawer-nav-badge {
  padding: 2px 7px;
  background: #ff3b30;
  color: #ffffff;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.drawer-nav-badge--ai {
  background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
}

/* ── Language pill ── */
.drawer-lang-pill {
  padding: 3px 8px;
  background: #f1f5f9;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 900;
  color: #475569;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.dark .drawer-lang-pill {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

/* ── Dark mode toggle switch ── */
.drawer-toggle-switch {
  width: 44px; height: 26px;
  border-radius: 999px;
  background: #e2e8f0;
  border: none;
  position: relative;
  flex-shrink: 0;
  transition: background 0.25s ease;
  cursor: pointer;
}

.drawer-toggle-switch.is-on {
  background: #ff3b30;
}

.dark .drawer-toggle-switch {
  background: #ff3b30;
}

.drawer-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

/* JS adds .is-on to the switch when dark mode is active */
.drawer-toggle-switch.is-on .drawer-toggle-thumb {
  transform: translateX(18px);
}

.dark .drawer-toggle-thumb {
  transform: translateX(18px);
}

/* ── Drawer footer ── */
.drawer-footer {
  margin: 4px 12px 0;
  padding: 16px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.dark .drawer-footer {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.06);
}

.drawer-social-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}

.drawer-social-btn {
  width: 36px; height: 36px;
  border-radius: 11px;
  background: #f1f5f9;
  border: 1px solid rgba(226, 232, 240, 0.8);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  color: #64748b;
  transition: background 0.15s, color 0.15s, transform 0.12s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.dark .drawer-social-btn {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.07);
  color: #94a3b8;
}

.drawer-social-btn:active {
  transform: scale(0.88);
  background: #ff3b30;
  color: #ffffff;
  border-color: #ff3b30;
}

.drawer-policy-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 6px;
  margin-bottom: 10px;
}

.drawer-policy-links a {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.dark .drawer-policy-links a { color: #475569; }

.drawer-policy-links a:active { color: #ff4d4d; }

.drawer-policy-links span {
  color: #cbd5e1;
  font-size: 10px;
}

.dark .drawer-policy-links span { color: #334155; }

.drawer-copyright {
  text-align: center;
  font-size: 10px;
  color: #cbd5e1;
  line-height: 1.5;
}

.dark .drawer-copyright { color: #334155; }

/* ── Scroll lock ── */
body.menu-open-lock {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ── Hide on desktop ── */
@media (min-width: 768px) {
  #mobile-menu,
  #mobile-menu-overlay {
    display: none !important;
  }
}

/* ── Touch targets inside drawer ── */
@media (max-width: 767px) {
  #mobile-menu a,
  #mobile-menu button {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ── Rich drawer header gradient — brand red ── */
#mobile-menu > div:first-child {
  background: linear-gradient(155deg, #ff3b30 0%, #e0241b 60%, #c71e15 100%) !important;
}

/* Hamburger icon smooth rotation */
#mobile-menu-icon {
  transition: transform 0.3s ease;
}

/* ── Scrollbar hide ── */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Suggestions dropdown inside drawer ── */
#mobile-menu .search-suggestions-dropdown {
  position: relative;
  top: 0;
  margin-top: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  width: 100%;
}

#mobile-menu .search-suggestions-dropdown.active { transform: none; }

/* ============================================================
   SECTION 5: HERO BANNER — MOBILE HEIGHTS & TYPOGRAPHY
   ============================================================ */

@media (max-width: 640px) {
  /* Hero banner height on small phones */
  .hero-banner-container {
    height: 200px !important;
  }

  /* Text scaling inside slides */
  .hero-slide-heading {
    font-size: clamp(20px, 5.5vw, 24px) !important;
    line-height: clamp(28px, 7.5vw, 32px) !important;
    font-weight: 700 !important;
  }

  .hero-slide-sub {
    font-size: clamp(13px, 3.5vw, 15px) !important;
    line-height: 20px !important;
    font-weight: 500 !important;
  }

  .hero-slide-cta {
    padding: 0.5rem 1rem !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  /* Slider dots — larger touch targets */
  #hero-slider-dots span {
    width: 10px !important;
    height: 10px !important;
    cursor: pointer;
    transition: transform 0.2s ease;
  }

  #hero-slider-dots span:active {
    transform: scale(1.3);
  }

  /* Hero merchant banner image overlay on small screens */
  .hero-slide-img-overlay {
    opacity: 0.25 !important;
  }

  /* Reduce hero section side margin */
  section.hero-section {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  /* Tablets */
  .hero-banner-container {
    height: 260px !important;
  }
}

/* ============================================================
   SECTION 6: HERO SEARCH BAR — MOBILE LAYOUT FIXES
   ============================================================ */

@media (max-width: 640px) {
  /* Full-width search bar wrapper */
  .hero-search-bar {
    padding: 0 0.25rem;
  }

  /* Inner pill: wrap into two rows */
  .hero-search-inner {
    flex-wrap: wrap !important;
    padding: 10px !important;
    gap: 8px !important;
    border-radius: 18px !important;
  }

  /* Search text input: full-width top row */
  .hero-search-input {
    width: 100% !important;
    flex: 1 1 100% !important;
    font-size: 16px !important; /* prevent iOS zoom */
    padding: 10px 0 !important;
  }

  /* Right controls: full-width second row */
  .hero-search-right {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Category select: grow to fill available space */
  .hero-search-select {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 14px !important;
    height: 40px !important;
    padding: 0 8px !important;
  }

  /* Location button: proper touch target, fixed width, no shrink */
  .hero-search-location-btn {
    flex: 0 0 auto !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
  }

  /* Submit button: grow to fill remaining space */
  .hero-search-submit-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 40px !important;
    font-size: 0.85rem !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
  }

  /* City chips: allow wrapping */
  .hero-city-chips {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }

  /* Reduce hero section side margin */
  section.hero-section {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* ── Legacy floating search form (kept for backward compat) ── */
  .hero-search-float {
    margin-top: 0.5rem !important;
    border-radius: 1.5rem !important;
    padding: 1rem !important;
  }

  .hero-search-float form {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .hero-search-float input,
  .hero-search-float select,
  .hero-search-float button {
    width: 100% !important;
    flex: none !important;
    min-width: unset !important;
    max-width: 100% !important;
  }

  /* Geolocation button — compact square icon button inside .hero-search-right flex row.
     Previously this was full-width, but it now lives inside the search bar row.
     The ID selector must explicitly constrain the button to prevent the higher
     specificity from overriding the class-level 40×40px sizing rules. */
  #near-me-btn {
    flex: 0 0 auto !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    border-radius: 12px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1;
  }
}

/* ============================================================
   SECTION 7: DEAL CARDS — MOBILE UX
   ============================================================ */

@media (max-width: 640px) {
  /* Single column grid enforced */
  .dining-deals-slider-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* Deal card image: slightly taller on mobile for visual impact */
  .deal-card .zoom-image-container {
    aspect-ratio: 16 / 10 !important;
    max-height: 240px;
  }

  /* Larger, more tappable CTA button */
  .deal-card a.block,
  .deal-card .cta-row a {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
    padding: 0.85rem 1.25rem !important;
    border-radius: 14px !important;
  }

  /* Bigger discount badge on mobile */
  .deal-card .floating-discount {
    font-size: 0.75rem !important;
    padding: 0.45rem 0.85rem !important;
    border-radius: 10px !important;
  }

  /* Larger fav button for touch */
  .deal-card .floating-fav-btn {
    width: 2.75rem !important;
    height: 2.75rem !important;
    border-radius: 12px !important;
  }

  /* Card body padding */
  .deal-card > div:not(.zoom-image-container) {
    padding: 1.15rem 1.15rem !important;
    gap: 0.6rem !important;
  }

  /* Deal title: standardized to 15px / 600 / 20px (new typography spec) */
  .deal-card h3 {
    font-size: 15px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
  }
}

/* Tap active state for deal cards (only active when not swiping) */
.deal-card:not(.swiping):not(.swiped-right):not(.swiped-left):active {
  transform: scale(0.985) !important;
  transition: transform 0.15s ease !important;
}

/* ============================================================
   SECTION 8: CATEGORIES GRID — MOBILE IMPROVEMENTS
   ============================================================ */

/* Visual category cards: 2 columns on very small phones */
@media (max-width: 374px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.65rem !important;
  }

  .category-card {
    padding: 0.85rem 0.5rem 0.75rem !important;
    border-radius: 14px !important;
  }

  .category-card-icon-box {
    width: 2.85rem !important;
    height: 2.85rem !important;
    font-size: 1.15rem !important;
  }

  .category-card-label {
    font-size: 0.65rem !important;
  }
}

/* Normal phone: 3 columns */
@media (min-width: 375px) and (max-width: 479px) {
  .category-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.75rem !important;
  }

  .category-card {
    padding: 1rem 0.5rem 0.85rem !important;
    border-radius: 16px !important;
  }

  .category-card-icon-box {
    width: 3.1rem !important;
    height: 3.1rem !important;
    font-size: 1.25rem !important;
  }
}

/* Section spacing: reduce excessive top padding on mobile */
@media (max-width: 640px) {
  #categories-section,
  #trending-deals-section,
  #today-deals-section,
  #ending-soon-section,
  #ending-soon-deals-section,
  #big-discounts-section,
  #featured-deals-section,
  #featured-restaurants-section,
  #all-dining-deals-section,
  #partners-section,
  #merchant-cta-section,
  #stats-counter-section,
  #newsletter-section {
    padding-top: var(--mob-spacing-section) !important;
  }

  /* Section header icons — standardized size */
  #categories-section .w-10,
  #trending-deals-section .w-10,
  #today-deals-section .w-10,
  #ending-soon-deals-section .w-10,
  #big-discounts-section .w-10,
  #featured-restaurants-section .w-10 {
    width: 2.25rem !important;
    height: 2.25rem !important;
    font-size: 0.9rem !important;
    border-radius: 12px !important;
  }

  /* Section heading — standardized to 18px / 700 / 24px (new typography spec) */
  #categories-section h2,
  #trending-deals-section h2,
  #today-deals-section h2,
  #ending-soon-deals-section h2,
  #big-discounts-section h2,
  #featured-restaurants-section h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    color: #222222 !important;
    letter-spacing: -0.01em !important;
  }

  /* Section header margin — tighter on mobile */
  #categories-section .flex.items-center.mb-8,
  #trending-deals-section .flex.items-center.mb-8,
  #today-deals-section .flex.items-center.mb-8,
  #ending-soon-deals-section .flex.items-center.mb-8,
  #big-discounts-section .flex.items-center.mb-8,
  #featured-restaurants-section .flex.items-center.mb-6 {
    margin-bottom: 1rem !important;
  }

  /* Deal grid gap — tighter on mobile */
  #trending-deals-section .grid,
  #today-deals-section .grid,
  #ending-soon-deals-section .grid,
  #big-discounts-section .grid {
    gap: 1rem !important;
  }

  /* Back button in category grid */
  #cat-back-btn {
    font-size: 0.7rem !important;
    padding: 0.4rem 0.75rem !important;
  }

  /* Default homepage sections spacing — denser on mobile */
  #default-homepage-sections {
    padding-top: 0 !important;
    padding-bottom: 0.5rem !important;
    row-gap: 0 !important;
    gap: 0 !important;
  }

  /* All child sections: reduce massive desktop padding */
  #default-homepage-sections > section {
    padding-top: 2rem !important;     /* Was pt-16 (64px), now 32px */
    padding-left: 0.5rem !important;  /* Override px-4 (16px), now 8px */
    padding-right: 0.5rem !important;
    margin-bottom: 0 !important;
    border-top-width: 1px !important;
    border-top-color: rgba(226, 232, 240, 0.4) !important;
  }

  .dark #default-homepage-sections > section {
    border-top-color: rgba(255, 255, 255, 0.04) !important;
  }

  /* Section header divs: reduce bottom margin */
  #default-homepage-sections > section > div:first-child {
    margin-bottom: 1rem !important;   /* Was mb-8 (32px), now 16px */
  }

  /* Section titles: smaller on mobile */
  #default-homepage-sections h2 {
    font-size: 1.25rem !important;    /* Was text-2xl/3xl, now ~20px */
    line-height: 1.4 !important;
  }

  /* Section subtitle text: smaller */
  #default-homepage-sections h2 + p {
    font-size: 0.65rem !important;    /* Tiny subtitle */
    margin-top: 0.25rem !important;
  }

  /* Icon boxes: smaller */
  #default-homepage-sections .w-10.h-10 {
    width: 2rem !important;           /* Was 40px, now 32px */
    height: 2rem !important;
    font-size: 0.875rem !important;   /* Smaller icon */
  }
}

/* ============================================================
   SECTION 9: BOTTOM NAVIGATION BAR (MOBILE ONLY) — REDESIGNED
   Clean pill-style floating nav with glassmorphism, brand gradients,
   and a prominent floating center Deals button (FAB).
   ============================================================ */

/* ── Wrapper / Container ── */
.mobile-bottom-nav-container,
#mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9900;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: 8px;
  padding-right: 8px;
  /* Premium Frosted Glass Dock */
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(226, 232, 240, 0.7);
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.06);
  /* Overflow visible to prevent floating action button clipping */
  overflow: visible !important;
  transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Dark mode dock */
.dark .mobile-bottom-nav-container,
.dark #mobile-bottom-nav {
  background: rgba(15, 23, 42, 0.88);
  border-color: rgba(51, 65, 85, 0.6);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

@media (min-width: 769px) {
  .mobile-bottom-nav-container,
  #mobile-bottom-nav {
    display: none !important;
  }
}

/* ── Base Nav Item ── */
.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 3px;
  height: 100%;
  padding: 4px 2px;
  text-decoration: none;
  color: #94a3b8;
  font-weight: 700;
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
  min-width: 44px;
  box-sizing: border-box;
}

.dark .bottom-nav-item {
  color: #64748b;
}

/* Icon layout */
.bottom-nav-item i {
  font-size: 19px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
  position: relative;
  z-index: 2;
}

/* Label layout */
.bottom-nav-item span {
  position: relative;
  z-index: 2;
  transition: color 0.3s ease, font-weight 0.3s ease;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 72px;
  text-align: center;
  font-size: 9px;
  color: #64748b;
}

.dark .bottom-nav-item span {
  color: #94a3b8;
}

/* Spring tap animation */
.bottom-nav-item:active {
  transform: scale(0.95);
}

/* Active Class Styling (Red/Orange Brand Gradient) */
.bottom-nav-item.active i {
  background: linear-gradient(135deg, #ff3b30, #ff7300);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: translateY(-2px) scale(1.15);
}

.bottom-nav-item.active span {
  background: linear-gradient(135deg, #ff3b30, #ff7300);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* ── Center "Deals" FAB (Floating Action Button) ── */
.bottom-nav-item.bnav-deals-cta {
  flex: 0 0 54px;
  height: 54px;
  max-width: 54px;
  margin-top: -24px; /* Protrudes out of the top of the bar */
  border-radius: 50%;
  background: linear-gradient(135deg, #ff3b30, #ff7300);
  border: 4px solid #ffffff;
  box-shadow: 0 8px 20px rgba(255, 59, 48, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  z-index: 10;
  align-self: flex-start;
}

.dark .bottom-nav-item.bnav-deals-cta {
  border-color: #0f172a;
  box-shadow: 0 8px 20px rgba(255, 59, 48, 0.5);
}

.bottom-nav-item.bnav-deals-cta:active,
.bottom-nav-item.bnav-deals-cta.active {
  transform: scale(1.1) translateY(-4px);
  box-shadow: 0 10px 25px rgba(255, 59, 48, 0.5);
}

.bottom-nav-item.bnav-deals-cta i {
  color: #ffffff !important;
  font-size: 20px;
  margin-bottom: 0;
  transform: none !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}

.bottom-nav-item.bnav-deals-cta span {
  color: #ffffff !important;
  font-size: 9px;
  font-weight: 800;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  margin-top: 2px;
}

/* ── Notification/Favorites badge ── */
.bottom-nav-fav-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 1.15rem);
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  background: #ff4d4d;
  color: #ffffff;
  font-size: 0.5rem;
  font-weight: 900;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #ffffff;
  box-shadow: 0 2px 6px rgba(255, 77, 77, 0.4);
  z-index: 10;
}

.dark .bottom-nav-fav-badge {
  border-color: rgba(8, 13, 25, 0.96);
}

/* ── Body padding so content isn't hidden behind nav ── */
@media (max-width: 767px) {
  body.has-bottom-nav {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── Prevent label overflow on small mobile screens ── */
@media (max-width: 360px) {
  .bottom-nav-item span {
    font-size: 0.52rem !important;
  }
}

/* ── Hide on desktop ── */
@media (min-width: 768px) {
  #mobile-bottom-nav {
    display: none !important;
  }
}

/* ============================================================
   SECTION 10: SKELETON LOADING ANIMATION
   ============================================================ */

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

.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    #f1f5f9 25%,
    #e2e8f0 50%,
    #f1f5f9 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s infinite ease-in-out;
  border-radius: 8px;
}

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

/* Skeleton deal card */
.skeleton-deal-card {
  background: white;
  border-radius: 20px;
  border: 1px solid #f1f5f9;
  overflow: hidden;
  box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.03);
}

.dark .skeleton-deal-card {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.04);
}

.skeleton-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 140px;
}

.skeleton-line {
  height: 12px;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.skeleton-line.wide  { width: 90%; }
.skeleton-line.mid   { width: 65%; }
.skeleton-line.short { width: 40%; }

.skeleton-btn {
  height: 40px;
  border-radius: 12px;
  width: 100%;
  margin-top: 0.75rem;
}

/* ============================================================
   SECTION 11: PAGE TRANSITION (FADE)
   ============================================================ */

body {
  opacity: 1;
  transition: opacity 0.2s ease;
}

body.page-exit {
  opacity: 0;
}

/* ============================================================
   SECTION 12: SMOOTH SCROLL PROGRESS BAR
   ============================================================ */

#scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #ff4d4d 0%, #ff9f0a 100%);
  z-index: 9999;
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(255, 77, 77, 0.4);
}

html[dir="rtl"] #scroll-progress-bar {
  transform-origin: right;
}

/* ============================================================
   SECTION 13: FOOTER — MOBILE IMPROVEMENTS
   ============================================================ */

@media (max-width: 640px) {
  footer {
    padding-top: 2.5rem !important;
    padding-bottom: 2rem !important;
  }

  /* Footer grid: single column on mobile */
  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
    padding-bottom: 2rem !important;
  }

  /* Social icons: ensure 44×44 touch targets */
  footer .flex a[aria-label] {
    width: 44px !important;
    height: 44px !important;
  }

  /* Footer links: 44px min height */
  footer ul li a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.25rem 0;
  }

  /* Bottom bar stack */
  footer > div > div:last-child {
    flex-direction: column !important;
    text-align: center;
    gap: 0.75rem !important;
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  /* Tablet: 2-column footer */
  footer .grid.lg\\:grid-cols-6 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   SECTION 14: FORMS — MOBILE OPTIMIZATION
   ============================================================ */

@media (max-width: 640px) {
  /* Input sizing */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="search"],
  textarea,
  select {
    width: 100%;
    border-radius: 0.875rem !important;
    padding: 0.875rem 1rem;
    min-height: 48px;
  }

  /* Select appearance fix for mobile */
  select {
    -webkit-appearance: none;
    appearance: none;
  }

  /* Form validation error messages */
  .form-error {
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    margin-top: 0.35rem;
  }

  /* Contact / support forms */
  .contact-form .form-group {
    margin-bottom: 1rem;
  }

  .contact-form button[type="submit"] {
    width: 100%;
    min-height: 52px;
    font-size: 1rem;
    border-radius: 1rem;
  }
}

/* ============================================================
   SECTION 15: BUTTONS — TOUCH OPTIMIZATION
   ============================================================ */

/* Active tap animation on all buttons */
button:active,
a.btn:active,
[role="button"]:active {
  transform: scale(0.96);
  transition: transform 0.1s ease;
}

/* Floating action buttons (FAB) — better mobile sizing */
@media (max-width: 640px) {
  .floating-discount,
  .floating-fav-btn,
  .floating-countdown {
    /* slightly larger on phones for readability */
    font-size: 0.7rem !important;
  }

  /* Mega menu drawer full-width on phones */
  .mega-menu-drawer {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ============================================================
   SECTION 16: CARD HOVER → TOUCH ACTIVE STATE
   ============================================================ */

/* On touch devices, transform hover to active (press) state */
@media (hover: none) {
  .deal-card:active {
    transform: translateY(-2px) scale(0.99) !important;
    box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.15s ease !important;
  }

  .cat-circle-card:active .icon-box {
    background: #ff4d4d;
    color: white;
    transform: scale(1.06);
  }

  .subcategory-bubble-card:active .icon-box {
    background: #f8fafc;
    color: #ff4d4d;
    border-color: rgba(255, 77, 77, 0.25);
    transform: scale(1.04);
  }

  /* Disable hover-only slider arrows on touch */
  .slider-btn,
  .sub-nav-btn,
  .cat-slider-btn {
    display: none !important;
  }
}

/* ============================================================
   SECTION 17: SCROLLBAR — MOBILE CLEAN
   ============================================================ */

/* Hide scrollbars on mobile for sliders */
@media (max-width: 767px) {
  .slider-container,
  .subcategory-scroll-container,
  .partner-logo-container,
  .category-slider-container {
    scrollbar-width: none !important;
    -ms-overflow-style: none;
  }

  .slider-container::-webkit-scrollbar,
  .subcategory-scroll-container::-webkit-scrollbar,
  .partner-logo-container::-webkit-scrollbar,
  .category-slider-container::-webkit-scrollbar {
    display: none !important;
  }
}

/* Global thin scrollbar on mobile */
@media (max-width: 767px) {
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
}

/* ============================================================
   SECTION 18: MODAL & DRAWER IMPROVEMENTS (MOBILE)
   ============================================================ */

/* Favorites drawer full-screen on mobile */
@media (max-width: 640px) {
  #favorites-drawer > div {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Drawer backdrop on mobile - darker for better focus */
@media (max-width: 767px) {
  #favorites-drawer-overlay,
  #mega-menu-overlay {
    background: rgba(0, 0, 0, 0.55) !important;
  }
}

/* ============================================================
   SECTION 19: CARDS IN SLIDER — MOBILE
   ============================================================ */

@media (max-width: 640px) {
  /* Slider cards: full width on mobile — no fixed min-width to avoid overflow */
  .slider-card {
    flex: 0 0 calc(100% - 1rem) !important;
    min-width: 0; /* Fix: removed 260px fixed min-width that overflowed narrow screens */
    max-width: 100%;
  }

  /* Trending section: 1 visible card + peek */
  .slider-card.deal-card {
    flex: 0 0 85vw !important;
    min-width: 0 !important; /* Fix: was 260px — can overflow below 306px viewport */
    max-width: 340px !important;
  }
}

@media (min-width: 641px) and (max-width: 767px) {
  /* Large phones: 2 cards visible */
  .slider-card {
    flex: 0 0 calc(50% - 0.75rem);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablets: 3 cards visible (matches desktop) */
  .slider-card {
    flex: 0 0 calc(33.333% - 1rem);
  }
}

/* ============================================================
   SECTION 20: STATISTICS / COUNTER SECTION
   ============================================================ */

@media (max-width: 640px) {
  /* Counter cards: 2 per row on mobile */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  .stat-counter {
    font-size: 1.5rem !important;
  }
}

/* ============================================================
   SECTION 21: CITY CARDS — MOBILE
   ============================================================ */

@media (max-width: 640px) {
  .city-card-bg {
    height: 130px !important;
    border-radius: 16px !important;
  }
}

/* ============================================================
   SECTION 22: PARTNER LOGOS SECTION
   ============================================================ */

@media (max-width: 640px) {
  .partner-logo-card {
    flex: 0 0 110px !important;
    height: 58px !important;
  }
}

/* ============================================================
   SECTION 23: BECOME A PARTNER PAGE — MOBILE
   ============================================================ */

@media (max-width: 640px) {
  .partner-plans-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }

  .partner-hero-section {
    padding: 2rem 1rem !important;
    text-align: center;
  }
}

/* ============================================================
   SECTION 24: SEARCH PAGE — MOBILE
   ============================================================ */

@media (max-width: 640px) {
  .search-filters-panel {
    position: sticky;
    top: 64px;
    z-index: 20;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    /* Fix: negative margin was pushing element outside parent; use width instead */
    width: 100%;
    box-sizing: border-box;
  }
  .dark .search-filters-panel {
    background: rgba(11, 16, 30, 0.97);
    border-bottom-color: rgba(255, 255, 255, 0.06);
  }
}

/* ============================================================
   SECTION 25: DEAL DETAIL PAGE — MOBILE
   ============================================================ */

@media (max-width: 640px) {
  .deal-detail-hero {
    height: 240px !important;
    border-radius: 0 !important;
  }

  .deal-detail-content {
    padding: 1rem !important;
  }

  .deal-cta-sticky {
    position: sticky;
    bottom: 0;
    background: #ffffff;
    padding: 0.75rem 1rem;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    z-index: 30;
    /* Fix: removed negative margin + calc-width that caused child to exceed parent width */
    width: 100%;
    box-sizing: border-box;
  }
  .dark .deal-cta-sticky {
    background: #0b101e;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
}

/* ============================================================
   SECTION 26: CATEGORIES PAGE — MOBILE
   ============================================================ */

@media (max-width: 640px) {
  /* Sticky categories sub-navbar: offset for bottom nav */
  .sticky-categories-bar {
    top: 60px !important;
  }

  /* Category pill: larger touch targets */
  .subcategory-pill {
    padding: 0.6rem 1rem !important;
    font-size: 0.8rem !important;
    min-height: 40px;
  }

  /* Parent category cards slider on categories page */
  .parent-category-card {
    height: 110px !important;
    padding: 1rem !important;
  }

  .parent-category-card .card-icon-wrapper {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.1rem !important;
  }
}

/* ============================================================
   SECTION 27: RTL (ARABIC) MOBILE FIXES
   ============================================================ */



html[dir="rtl"] .bottom-nav-item.active::after {
  /* Pill indicator stays centered in RTL too */
  left: 50%;
  right: auto;
  transform: translate(-50%, -55%);
}

html[dir="rtl"] .bottom-nav-item.active::before {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

html[dir="rtl"] .bottom-nav-fav-badge {
  right: auto;
  left: calc(50% - 1.1rem);
}

/* Arabic text: tighter leading for display headings */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 {
  letter-spacing: 0 !important;
  word-spacing: 0.05em;
}

/* RTL mobile menu alignment */
html[dir="rtl"] #mobile-menu .grid a {
  flex-direction: row-reverse;
}

/* ============================================================
   SECTION 28: SAFE AREA INSETS (iPhone X+ / Notch)
   ============================================================ */

/* Respect safe areas */
header {
  padding-top: env(safe-area-inset-top, 0);
}

/* Ensure hero section doesn't overlap notch area */
@supports (padding-top: env(safe-area-inset-top)) {
  header {
    padding-top: env(safe-area-inset-top);
  }

  /* Only apply safe-area overrides on mobile — prevents fighting the desktop display:none rule */
  @media (max-width: 767px) {
    #mobile-bottom-nav {
      bottom: 0;
      height: calc(72px + env(safe-area-inset-bottom, 0px));
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    body.has-bottom-nav {
      padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ============================================================
   SECTION 29: LOADING STATES
   ============================================================ */

/* Full-page loading overlay */
#page-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  transition: opacity 0.3s ease;
}
.dark #page-loading-overlay {
  background: rgba(2, 6, 23, 0.92);
}

#page-loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.loading-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255, 77, 77, 0.15);
  border-top-color: #ff4d4d;
  border-radius: 50%;
  animation: spin-smooth 0.8s linear infinite;
}

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

/* ============================================================
   SECTION 30: CROSS-BROWSER COMPATIBILITY FIXES
   ============================================================ */

/* Samsung Internet: flex gap fix */
@supports not (gap: 1rem) {
  .slider-container > * + * {
    margin-left: 1.5rem;
  }

  .subcategory-scroll-container > * + * {
    margin-left: 1.5rem;
  }

  html[dir="rtl"] .slider-container > * + * {
    margin-left: 0;
    margin-right: 1.5rem;
  }
}

/* Firefox mobile: scrollbar width */
@-moz-document url-prefix() {
  .slider-container,
  .subcategory-scroll-container {
    scrollbar-width: none;
  }
}

/* iOS Safari: button appearance reset */
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* iOS Safari: input appearance reset */
input, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* iOS momentum scrolling */
.overflow-x-auto,
.overflow-y-auto,
[class*="overflow-"] {
  -webkit-overflow-scrolling: touch;
}

/* Prevent text size adjustment on orientation change */
body {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ============================================================
   SECTION 31: NEW HERO SECTION — MOBILE OVERRIDES
   ============================================================ */

/* ── Hero headline: prevent overflow on tiny screens ── */
@media (max-width: 480px) {
  .hero-headline {
    font-size: clamp(1.75rem, 8.5vw, 2.4rem) !important;
    letter-spacing: -0.01em !important;
  }

  /* Reduce vertical padding so hero doesn't take the whole screen */
  #hero-section {
    padding-top: 3rem !important;
    padding-bottom: 2rem !important;
  }

  /* Eyebrow badge: smaller on tiny phones */
  .hero-eyebrow-badge {
    font-size: 0.7rem !important;
    padding: 4px 12px !important;
    margin-bottom: 1rem !important;
  }

  /* Subtitle pills: slightly smaller */
  .hero-cat-pill {
    font-size: 0.72rem !important;
    padding: 4px 8px !important;
    gap: 3px !important;
  }
  .hero-cat-sep {
    display: none;
  }
}

/* ── Hero search bar: two-row layout on mobile ── */
@media (max-width: 640px) {
  .hero-search-bar {
    padding: 0 0.5rem;
  }

  .hero-search-inner {
    flex-wrap: wrap !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    border-radius: 14px !important;
  }

  /* Search icon + input take full width on first row */
  .hero-search-icon {
    flex-shrink: 0;
  }

  .hero-search-input {
    flex: 1 1 140px !important;
    min-width: 0;
    font-size: 16px !important; /* prevent iOS zoom */
    padding: 6px 0 !important;
  }

  /* Right controls: full-width second row */
  .hero-search-right {
    width: 100% !important;
    flex-shrink: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 8px;
    gap: 6px !important;
  }
  .dark .hero-search-right {
    border-top-color: rgba(255, 255, 255, 0.07);
  }

  .hero-search-select {
    flex: 1 !important;
    max-width: none !important;
    font-size: 14px !important;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px !important;
    min-height: 40px;
    color: #334155;
  }
  .dark .hero-search-select {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
  }

  .hero-search-location-btn {
    flex-shrink: 0;
    min-height: 40px;
    min-width: 40px;
  }

  .hero-search-submit-btn {
    flex: 1 !important;
    min-height: 40px;
    border-radius: 10px !important;
    font-size: 0.8rem !important;
  }
}

/* ── City chips: single horizontal scroll row ── */
@media (max-width: 640px) {
  .hero-city-chips {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    justify-content: flex-start !important;
    padding-bottom: 4px;
    gap: 5px !important;
  }

  .hero-city-chips::-webkit-scrollbar {
    display: none !important;
  }

  .hero-city-chip-label {
    flex-shrink: 0;
  }

  .hero-city-chip {
    flex-shrink: 0;
    font-size: 0.72rem !important;
    padding: 4px 10px !important;
  }
}

/* ── Stats bar: 2×2 grid on mobile ── */
@media (max-width: 640px) {
  .hero-stats-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    padding: 14px 10px !important;
    border-radius: 14px !important;
    max-width: 100% !important;
  }

  /* Hide the vertical dividers — replace with border on grid cells */
  .hero-stat-divider {
    display: none !important;
  }

  .hero-stat-item {
    padding: 10px 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  /* Bottom row items: no bottom border */
  .hero-stat-item:nth-child(5),
  .hero-stat-item:nth-child(7) {
    border-bottom: none !important;
  }

  /* Right column items: left border separator */
  .hero-stat-item:nth-child(3),
  .hero-stat-item:nth-child(7) {
    border-left: 1px solid rgba(255, 255, 255, 0.06);
  }

  html[dir="rtl"] .hero-stat-item:nth-child(3),
  html[dir="rtl"] .hero-stat-item:nth-child(7) {
    border-left: none;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
  }

  .hero-stat-num {
    font-size: 1.4rem !important;
  }

  .hero-stat-label {
    font-size: 0.6rem !important;
    white-space: normal !important;
  }
}

/* ── CTA buttons: tap press feedback ── */
.hero-cta-primary:active {
  transform: translateY(1px) scale(0.97) !important;
  box-shadow: 0 4px 14px rgba(255, 77, 77, 0.25) !important;
}

.hero-cta-secondary:active {
  transform: translateY(1px) scale(0.97) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ── Hero pill + chip touch feedback ── */
.hero-cat-pill:active {
  transform: scale(0.95) !important;
  transition: transform 0.1s ease !important;
}

.hero-city-chip:active {
  transform: scale(0.92) !important;
  transition: transform 0.1s ease !important;
}


/* ============================================================
   SECTION 32: LOGIN & REGISTER PAGES — MOBILE
   ============================================================ */

@media (max-width: 640px) {
  /* ── Main page: less vertical padding so form isn't cramped ── */
  main.auth-page {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* ── Card: always rounded on mobile (remove sm: prefix limitation) ── */
  .auth-card {
    border-radius: 1.25rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    padding: 1.5rem 1.25rem !important;
    margin-top: 1rem;
  }

  /* ── Form inputs: bigger touch targets ── */
  .auth-card input[type="text"],
  .auth-card input[type="email"],
  .auth-card input[type="password"],
  .auth-card input[type="tel"] {
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
    font-size: 16px !important;
    min-height: 52px !important;
    border-radius: 0.875rem !important;
  }

  /* ── Submit button: larger, more tappable ── */
  .auth-card button[type="submit"] {
    min-height: 52px !important;
    font-size: 1rem !important;
    border-radius: 0.875rem !important;
  }

  /* ── Social buttons: stack to single column on very small phones ── */
  .auth-social-grid {
    grid-template-columns: 1fr !important;
    gap: 0.625rem !important;
  }

  .auth-social-grid a {
    min-height: 48px !important;
    justify-content: center !important;
    font-size: 0.875rem !important;
    border-radius: 0.875rem !important;
  }

  /* ── Header section: compact on mobile ── */
  .auth-header h2 {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
  }

  .auth-header p {
    font-size: 0.8rem !important;
    margin-top: 0.35rem !important;
  }
}

/* Active press feedback for auth form inputs */
@media (hover: none) {
  .auth-card input:focus {
    transform: none !important; /* prevent jump on iOS */
  }
}


/* ============================================================
   SECTION 33: TABLET BREAKPOINTS (768–1023px)
   ============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {

  /* ── Deal cards: 3-column grid on tablets (matches desktop) ── */
  .dining-deals-slider-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem !important;
  }

  /* ── Category grid: 4-column on tablets ── */
  .category-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* ── Hero headline: medium size between mobile and desktop ── */
  .hero-headline {
    font-size: clamp(2.4rem, 4.5vw, 3.5rem) !important;
  }

  /* ── Hero stats bar: keep as 1 row but reduce gap ── */
  .hero-stats-bar {
    max-width: 90% !important;
    padding: 16px 20px !important;
  }

  .hero-stat-num {
    font-size: 1.5rem !important;
  }

  /* ── Hero CTAs: side by side (no full-width stacking) ── */
  .hero-cta-group {
    flex-direction: row !important;
  }

  .hero-cta-primary,
  .hero-cta-secondary {
    width: auto !important;
    padding: 13px 24px !important;
  }

  /* ── Slider cards on tablet: 3 visible (matches desktop) ── */
  .slider-card.deal-card {
    flex: 0 0 calc(33.333% - 1rem) !important;
    max-width: none !important;
  }

  /* ── Section headings ── */
  #trending-deals-section h2,
  #categories-section h2,
  #today-deals-section h2 {
    font-size: 1.5rem !important;
  }

  /* ── Footer: 3-column layout on tablets ── */
  footer .grid.lg\:grid-cols-6 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
  }

  /* ── Mobile menu: hidden on tablets (they get the desktop nav) ── */
  #mobile-bottom-nav {
    display: none !important;
  }
}


/* ============================================================
   SECTION 34: FOOTER — MOBILE ACCORDION
   ============================================================ */

@media (max-width: 640px) {
  /* Remove default top padding on mobile footer for a tighter layout */
  #main-footer {
    padding-top: 1.75rem !important;
    padding-bottom: 5rem !important; /* extra bottom padding for bottom nav */
  }

  /* Brand column always stays visible */
  #footer-brand-col {
    margin-bottom: 0.5rem;
  }

  /* Link columns: collapsed by default on mobile */
  .footer-link-col {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* Column header button styling */
  .footer-col-toggle {
    display: flex !important;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 0;
    cursor: pointer;
    background: none;
    border: none;
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
  }

  .footer-col-toggle i.toggle-chevron {
    transition: transform 0.3s ease;
    font-size: 0.65rem;
    opacity: 0.6;
  }

  .footer-col-toggle.open i.toggle-chevron {
    transform: rotate(180deg);
  }

  /* Collapsed link list */
  .footer-col-links {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease,
                padding 0.3s ease;
    opacity: 0;
    padding-bottom: 0;
  }

  .footer-col-links.open {
    max-height: 300px;
    opacity: 1;
    padding-bottom: 0.875rem;
  }

  /* Social icons: larger touch targets on mobile */
  #main-footer .flex a[aria-label] {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }

  /* Bottom bar: simplified */
  #main-footer > div > div:last-child {
    padding-top: 1rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    text-align: center !important;
  }
}


/* ============================================================
   SECTION 35: ADMIN DASHBOARD — MOBILE TABLE FIXES
   ============================================================ */

/* Responsive table wrapper — applied via JS on dashboard */
.table-mobile-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0 0 12px 12px;
}

/* Stats grid: 2-column on mobile */
@media (max-width: 640px) {
  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  .admin-stat-card {
    padding: 0.875rem 1rem !important;
  }

  .admin-stat-card .stat-value {
    font-size: 1.5rem !important;
  }

  /* Dashboard tabs: horizontal scroll */
  .admin-tabs-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .admin-tabs-bar::-webkit-scrollbar {
    display: none;
  }

  .admin-tab-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 0.7rem !important;
    padding: 0.5rem 0.875rem !important;
  }

  /* Action buttons in tables: icon-only on mobile */
  .admin-action-btn span.btn-label {
    display: none !important;
  }

  .admin-action-btn {
    padding: 0.375rem 0.625rem !important;
    min-width: 36px;
    min-height: 36px;
  }

  /* Form sections in dashboard: full width */
  .admin-form-grid {
    grid-template-columns: 1fr !important;
  }

  /* Modal dialogs: full screen on mobile */
  .admin-modal-box {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 1rem 1rem 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
  }
}


/* Adjust body padding for sticky CTA on deal detail page */
@media (max-width: 767px) {
  body.deal-detail-page {
    /* Extra padding = bottom-nav (72px) + cta-pill (~76px) + some gap */
    padding-bottom: calc(160px + env(safe-area-inset-bottom)) !important;
  }

  /* Place mobile sticky CTA bar ABOVE the bottom nav (72px tall) */
  .mobile-sticky-cta-bar {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: 0 !important;
    height: auto !important;
  }
  
  /* Prevent scroll hijacking by Google Map embed on mobile viewports */
  .group\/map iframe {
    pointer-events: none;
  }
}

/* Premium micro-animated copy feedback */
@keyframes pop-once {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.animate-pop-once {
  animation: pop-once 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ============================================================
   SECTION 33: UNIVERSAL MOBILE FULL-SCREEN SEARCH OVERLAY
   ============================================================ */
@media (max-width: 767px) {
  #mobile-search-overlay {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    background-color: #ffffff;
    box-sizing: border-box;
  }
  
  .dark #mobile-search-overlay {
    background-color: #0b101e;
  }

  /* Autocomplete suggestions dropdown overrides for the full-screen mobile search */
  #mobile-search-overlay .search-suggestions-dropdown {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    border: none !important;
    max-height: none !important;
    overflow-y: visible !important;
    width: 100% !important;
    background: transparent !important;
    padding: 0 !important;
  }

  /* Visual suggestion item tweaks for mobile screen */
  #mobile-search-overlay .suggestion-group {
    padding: 12px 0 !important;
  }

  #mobile-search-overlay .suggestion-item {
    padding: 12px 4px !important;
    border-radius: 12px;
  }

  #mobile-search-overlay .suggestion-group-header {
    padding: 6px 4px !important;
  }
}

/* Hide default scrollbars on mobile viewports to look more like a native app */
@media (max-width: 768px) {
  ::-webkit-scrollbar {
    display: none !important;
  }
  html, body {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE 10+ */
  }
}

/* ============================================================
   SECTION 38: SCROLL & TOUCH PERFORMANCE (MOBILE)
   Ensures compositor-thread-only scrolling on all containers
   and eliminates 300ms tap delay, scroll jank, and over-scroll
   on every page. Pair with Section 1b for full coverage.
   ============================================================ */

@media (max-width: 1024px) {
  /* ── GPU-promote all card elements ── */
  .deal-card,
  .category-card,
  .subcategory-bubble-card,
  .parent-category-card,
  .city-card-bg,
  .cat-circle-card,
  .partner-logo-card {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* ── Smooth & snappy horizontal sliders ──
     'proximity' snap is less aggressive than 'mandatory' and feels
     more natural when the user is scrolling fast through many cards */
  .subcategory-scroll-container,
  .subcategory-pills-scroll-container,
  .hero-city-chips {
    scroll-snap-type: x proximity;
  }

  /* ── Main deal sliders: keep mandatory snap for consistency ──
     'mandatory' ensures each swipe lands on a full card */
  .slider-container {
    scroll-snap-type: x mandatory;
    scroll-padding: 0 0.5rem; /* account for container padding */
  }

  /* ── Snap alignment on individual cards ── */
  .slider-card {
    scroll-snap-align: start;
  }

  /* ── Overscroll containment: horizontal containers ──
     Stops the browser from propagating an over-scroll event to the page
     which would make the entire page stutter when the slider reaches its edge */
  .slider-container,
  .subcategory-scroll-container,
  .subcategory-pills-scroll-container,
  .partner-logo-container,
  .category-slider-container {
    overscroll-behavior-x: contain;
  }

  /* ── Vertical scroll containers inside modals & drawers ──
     Prevents pull-to-refresh and page-scroll bleed when reaching top/bottom */
  #mobile-menu .flex-1,
  #favorites-list-container,
  .mega-menu-categories-pane,
  .mega-menu-subcategories-pane,
  .search-suggestions-dropdown {
    overscroll-behavior-y: contain;
  }

  /* ── Interaction: all tappable elements are instant, no 300ms wait ──
     This complements the html { touch-action: manipulation } rule above */
  .bottom-nav-item,
  .deal-card,
  .category-card,
  .hero-cta-primary,
  .hero-cta-secondary,
  .hero-city-chip,
  .subcategory-bubble-card,
  .subcategory-pill-btn,
  .hero-cat-pill {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* ── Slider containers themselves only scroll horizontally ──
     This prevents vertical swipe on a slider from cancelling the page scroll */
  .slider-container,
  .subcategory-scroll-container,
  .subcategory-pills-scroll-container,
  .partner-logo-container,
  .category-slider-container,
  .hero-city-chips {
    touch-action: pan-x pan-y;
  }
}

/* ============================================================
   SECTION 14: APP-LIKE REDESIGNED MOBILE COMPONENTS
   ============================================================ */

@media (max-width: 767px) {
  /* Redesigned Mobile Hero Slider Carousel */
  .mobile-hero-slider {
    position: relative;
    width: calc(100% - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
    border-radius: 20px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    background-color: #f8fafc;
  }
  .dark .mobile-hero-slider {
    background-color: #0b101e;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.04);
  }

  .slides-container {
    display: flex;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
    width: 100%;
  }

  /* Slide contents */
  .slides-container > * {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
  }

  /* ── Premium Pill Dots ── */
  .slider-dots {
    gap: 5px !important;
    align-items: center;
    padding: 6px 8px;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 999px;
    width: fit-content;
    margin: 0 auto;
  }

  .slider-dots .slider-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.50);
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.3s ease,
                opacity 0.3s ease;
    cursor: pointer;
    /* Larger invisible touch target */
    padding: 6px;
    box-sizing: content-box;
    margin: -6px 0;
  }

  .slider-dots .slider-dot.bg-white {
    background: linear-gradient(90deg, #ff4d4d 0%, #ff9f0a 100%) !important;
    width: 22px !important;
    opacity: 1;
    box-shadow: 0 0 8px rgba(255, 77, 77, 0.55);
  }

  /* Horizontal Category Navigation Bar */
  .mobile-categories-bar {
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
  }
  
  .mobile-categories-bar::-webkit-scrollbar {
    display: none !important;
  }

  .category-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }
  .category-pill:active {
    transform: scale(0.94);
  }

  .category-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .dark .category-icon-circle {
    background-color: #1e293b;
    color: #94a3b8;
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }

  /* Highlight state for active category pill matching the JS bg-brand-500 class addition */
  .category-pill.bg-brand-500 {
    background-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
  }
  
  .category-pill.bg-brand-500 .category-icon-circle {
    background: linear-gradient(135deg, #FF4D4D 0%, #FF9F0A 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 20px rgba(255, 77, 77, 0.35);
    transform: translateY(-2px) scale(1.04);
  }

  .category-pill.bg-brand-500 span {
    color: #FF4D4D !important;
    font-weight: 800 !important;
  }
  .dark .category-pill.bg-brand-500 span {
    color: #FF6666 !important;
  }

  /* Redesigned Location Pill Button inside Mobile Header */
  .mobile-city-selector-btn {
    min-height: 32px !important;
    min-width: unset !important;
  }

  /* Mobile City Bottom Sheet Modal */
  #mobile-city-sheet-overlay {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity 0.3s ease;
  }

  #mobile-city-sheet {
    will-change: transform;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Deal Card Feed adjustments for extreme mobile premium look */
  .deal-card {
    border-radius: 20px !important;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.6) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.02) !important;
    background: #ffffff;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
  }
  .dark .deal-card {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
  }

  .deal-card:active {
    transform: scale(0.985) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  }

  /* Zoom image aspect ratio */
  .deal-card .zoom-image-container {
    aspect-ratio: 16/9.5 !important;
  }

  /* Card details row height */
  .deal-card > div:not(.zoom-image-container) {
    padding: 1rem !important;
    gap: 0.5rem !important;
  }

  /* Rating label */
  .deal-card .flex-shrink-0 i.fa-star {
    margin-bottom: 1px;
  }
}

/* ============================================================
   SECTION 36: PREMIUM MOBILE HOMEPAGE — ENHANCED COMPONENTS
   ============================================================ */

/* ── Enhanced Mobile Hero Slider ── */
@media (max-width: 767px) {
  /* Taller banner for more visual impact */
  .mobile-hero-slider {
    border-radius: 22px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden;
  }

  /* Slide content overlay — bigger headlines and CTA */
  .mobile-hero-slide-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 55%, transparent 100%);
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem 1.125rem 1.375rem;
    pointer-events: none;
  }

  .mobile-hero-slide-eyebrow {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 5px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 6px;
    width: fit-content;
    text-transform: uppercase;
  }

  .mobile-hero-slide-title {
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
  }

  .mobile-hero-slide-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ff4d4d;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 8px 16px;
    border-radius: 12px;
    width: fit-content;
    box-shadow: 0 4px 14px rgba(255, 77, 77, 0.45);
    pointer-events: auto;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
  }

  .mobile-hero-slide-cta:active {
    transform: scale(0.95);
    box-shadow: 0 2px 6px rgba(255, 77, 77, 0.3);
  }

  /* ── Premium Pill Dots (override) ── */
  .slider-dots {
    gap: 4px !important;
    display: flex !important;
    align-items: center !important;
    padding: 5px 7px !important;
    background: rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 999px !important;
    width: fit-content !important;
    margin: 0 auto !important;
  }

  .slider-dots .slider-dot {
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.45) !important;
    transition: width 0.38s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.3s ease,
                box-shadow 0.3s ease !important;
    cursor: pointer;
    padding: 5px !important;
    box-sizing: content-box !important;
    margin: -5px 0 !important;
  }

  .slider-dots .slider-dot.bg-white,
  .slider-dots .slider-dot.scale-125 {
    background: linear-gradient(90deg, #ff4d4d 0%, #ff9f0a 100%) !important;
    width: 22px !important;
    transform: none !important;
    box-shadow: 0 0 10px rgba(255, 77, 77, 0.6) !important;
  }
}

/* ── Enhanced Mobile Search Trigger Bar ── */
@media (max-width: 767px) {
  .mobile-search-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: #ffffff;
    border: 1.5px solid rgba(226, 232, 240, 0.9);
    border-radius: 22px;
    box-shadow: 0 8px 28px -4px rgba(15, 23, 42, 0.07), 0 2px 8px rgba(0, 0, 0, 0.03);
    cursor: pointer;
    transition: all var(--mob-transition-fast);
    -webkit-tap-highlight-color: transparent;
  }

  .dark .mobile-search-trigger {
    background: rgba(15, 23, 42, 0.95);
    border-color: rgba(255, 255, 255, 0.07);
    box-shadow: 0 8px 28px -4px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);
  }

  .mobile-search-trigger:active {
    transform: scale(0.97);
    box-shadow: 0 4px 16px rgba(255, 77, 77, 0.12);
    border-color: rgba(255, 77, 77, 0.3);
  }

  .mobile-search-trigger .search-icon-wrap {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: linear-gradient(135deg, #ff4d4d 0%, #ff9f0a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(255, 77, 77, 0.3);
  }

  .mobile-search-trigger .search-icon-wrap i {
    color: #ffffff;
    font-size: 0.8rem;
  }

  .mobile-search-trigger .search-placeholder-text {
    flex: 1;
    font-size: 0.87rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dark .mobile-search-trigger .search-placeholder-text {
    color: #94a3b8;
  }

  .mobile-search-trigger .search-mic-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 1.5px solid rgba(226, 232, 240, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 0.75rem;
    background: rgba(248, 250, 252, 0.8);
    transition: all 0.2s ease;
  }

  .mobile-search-trigger .search-mic-icon.active {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
  }

  .dark .mobile-search-trigger .search-mic-icon {
    border-color: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    background: rgba(30, 41, 59, 0.8);
  }

  .dark .mobile-search-trigger .search-mic-icon.active {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
  }
}

/* ── Enhanced Mobile Categories Bar ── */
@media (max-width: 767px) {
  .mobile-categories-bar {
    margin-top: 1rem !important;
    margin-bottom: 0.25rem !important;
    position: relative;
    width: 100% !important;
    overflow: hidden !important;
    display: block !important;
  }

  .mobile-categories-bar > div {
    display: grid !important;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: 80px !important;
    gap: 12px 16px !important;
    overflow-x: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 0.75rem !important;
    padding-top: 4px !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Fade-out edge effect on right (LTR) */
  html[dir="ltr"] .mobile-categories-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 36px;
    background: linear-gradient(to right, transparent, rgba(248, 250, 252, 0.95));
    pointer-events: none;
    z-index: 1;
  }
  /* Fix: .dark is on <html>, so combine with [dir] — not nested child selector */
  html[dir="ltr"].dark .mobile-categories-bar::after {
    background: linear-gradient(to right, transparent, rgba(2, 6, 23, 0.95));
  }

  /* Fade-out edge effect on left (RTL) */
  html[dir="rtl"] .mobile-categories-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 36px;
    background: linear-gradient(to left, transparent, rgba(248, 250, 252, 0.95));
    pointer-events: none;
    z-index: 1;
  }
  html[dir="rtl"].dark .mobile-categories-bar::after {
    background: linear-gradient(to left, transparent, rgba(2, 6, 23, 0.95));
  }

  .mobile-categories-bar .category-pill {
    padding: 0 !important;
    gap: 7px !important;
    flex-shrink: 0;
    width: 100% !important;
    min-width: 0 !important;
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .mobile-categories-bar .category-icon-circle {
    width: 58px !important;
    height: 58px !important;
    border-radius: 18px !important;
    border: 1.5px solid rgba(226, 232, 240, 0.65) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .dark .mobile-categories-bar .category-icon-circle {
    border-color: rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.25) !important;
  }

  .mobile-categories-bar .category-icon-circle i,
  .mobile-categories-bar .category-icon-circle .material-symbols-outlined {
    font-size: 1.35rem !important;
    transition: color 0.18s ease;
  }

  .material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
  }

  /* Press feedback on category pill */
  .mobile-categories-bar .category-pill:active {
    transform: scale(0.9);
  }

  .mobile-categories-bar .category-pill:active .category-icon-circle {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  }

  /* Category label */
  .mobile-categories-bar .category-pill > span {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    line-height: 1.2;
    text-align: center;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: block;
    width: 100%;
    padding: 0 2px;
  }

  .dark .mobile-categories-bar .category-pill > span {
    color: #94a3b8 !important;
  }

  /* Active category pill — gradient glow */
  .mobile-categories-bar .category-pill.active .category-icon-circle,
  .mobile-categories-bar .category-pill.bg-brand-500 .category-icon-circle {
    background: linear-gradient(135deg, #ff4d4d 0%, #ff9f0a 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 8px 24px rgba(255, 77, 77, 0.45), 0 2px 8px rgba(255, 77, 77, 0.2) !important;
    transform: translateY(-3px) scale(1.06);
  }

  .mobile-categories-bar .category-pill.active > span,
  .mobile-categories-bar .category-pill.bg-brand-500 > span {
    color: #ff4d4d !important;
    font-weight: 800 !important;
  }

  .dark .mobile-categories-bar .category-pill.active > span,
  .dark .mobile-categories-bar .category-pill.bg-brand-500 > span {
    color: #ff7a7a !important;
  }
}

/* ── Section Reveal Animation ── */
@media (max-width: 767px) {
  .section-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .section-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Mobile Hero Slide Fallback Content Layout ── */
@media (max-width: 767px) {
  /* Fallback gradient slides: improved layout */
  .mobile-hero-fallback-slide {
    position: relative;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem 1.125rem 1.375rem;
    overflow: hidden;
  }

  .mobile-hero-fallback-slide .slide-bg-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,1) 1px, transparent 1px);
    background-size: 14px 14px;
    opacity: 0.12;
    pointer-events: none;
  }

  .mobile-hero-fallback-slide .slide-content {
    position: relative;
    z-index: 1;
  }

  .mobile-hero-fallback-slide .slide-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
    width: fit-content;
    text-transform: uppercase;
  }

  .mobile-hero-fallback-slide .slide-title {
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.25;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
  }

  .mobile-hero-fallback-slide .slide-sub {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.4;
    margin-bottom: 12px;
    font-weight: 500;
  }

  .mobile-hero-fallback-slide .slide-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.95);
    color: #ff4d4d;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 8px 14px;
    border-radius: 12px;
    width: fit-content;
    text-decoration: none;
    transition: all 0.15s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  }

  .mobile-hero-fallback-slide .slide-cta:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.85);
  }
}

/* ── Mobile Header Action Buttons ── */
@media (max-width: 767px) {
  #main-header .flex-1.flex.justify-end > button,
  #main-header .flex-1.flex.justify-end > a {
    min-height: unset !important;
    min-width: unset !important;
  }

  /* City label truncation */
  #mobile-city-selector-label {
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
  }
}

/* ── Premium Card Grid on Mobile ── */
@media (max-width: 640px) {
  /* All section grids: show 1 column by default, but  
     allow 2 columns for specific sections if content fits */
  #trending-deals-section .grid.grid-cols-1,
  #today-deals-section .grid.grid-cols-1,
  #ending-soon-deals-section .grid.grid-cols-1,
  #big-discounts-section .grid.grid-cols-1 {
    grid-template-columns: 1fr !important;
  }

  /* Fix: all slider card sizes on mobile */
  #today-slider .deal-card.slider-card,
  #featured-slider .deal-card.slider-card,
  #ending-soon-slider .deal-card.slider-card,
  #big-discounts-slider .deal-card.slider-card,
  #trending-slider .deal-card.slider-card {
    flex: 0 0 82vw !important;
    max-width: 320px !important;
  }
}

/* Hide desktop categories grid on mobile to resolve excessive vertical space */
@media (max-width: 767px) {
  #categories-section {
    display: none !important;
  }
}

/* ── 2-card-wide Sliders on Mobile ── */
@media (max-width: 767px) {
  #today-slider,
  #featured-slider,
  #ending-soon-slider,
  #big-discounts-slider,
  #trending-slider {
    gap: 0.5rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-bottom: 0.75rem !important;
    /* Re-enable snap so each swipe advances exactly 2 cards */
    scroll-snap-type: x mandatory !important;
    /* Allow horizontal panning without triggering vertical scroll */
    touch-action: pan-x pan-y !important;
  }

  #today-slider .deal-card.slider-card,
  #featured-slider .deal-card.slider-card,
  #ending-soon-slider .deal-card.slider-card,
  #big-discounts-slider .deal-card.slider-card,
  #trending-slider .deal-card.slider-card {
    flex: 0 0 65vw !important;
    min-width: 65vw !important;
    max-width: 65vw !important;
    border-radius: 12px !important;
    border: 1px solid #f1f5f9 !important;
    scroll-snap-align: start !important;
  }

  .dark #today-slider .deal-card.slider-card,
  .dark #featured-slider .deal-card.slider-card,
  .dark #ending-soon-slider .deal-card.slider-card,
  .dark #big-discounts-slider .deal-card.slider-card,
  .dark #trending-slider .deal-card.slider-card {
    border-color: rgba(255, 255, 255, 0.05) !important;
  }

  #today-slider .deal-card.slider-card .zoom-image-container,
  #featured-slider .deal-card.slider-card .zoom-image-container,
  #ending-soon-slider .deal-card.slider-card .zoom-image-container,
  #big-discounts-slider .deal-card.slider-card .zoom-image-container,
  #trending-slider .deal-card.slider-card .zoom-image-container {
    aspect-ratio: 16 / 10 !important;
  }

  #today-slider .deal-card.slider-card .deal-card-discount-badge,
  #featured-slider .deal-card.slider-card .deal-card-discount-badge,
  #ending-soon-slider .deal-card.slider-card .deal-card-discount-badge,
  #big-discounts-slider .deal-card.slider-card .deal-card-discount-badge,
  #trending-slider .deal-card.slider-card .deal-card-discount-badge {
    padding: 2px 4px !important;
    font-size: 8px !important;
    border-radius: 5px !important;
    top: 4px !important;
    left: 4px !important;
  }

  #today-slider .deal-card.slider-card .floating-fav-btn,
  #featured-slider .deal-card.slider-card .floating-fav-btn,
  #ending-soon-slider .deal-card.slider-card .floating-fav-btn,
  #big-discounts-slider .deal-card.slider-card .floating-fav-btn,
  #trending-slider .deal-card.slider-card .floating-fav-btn {
    width: 22px !important;
    height: 22px !important;
    border-radius: 6px !important;
    top: 4px !important;
    right: 4px !important;
  }

  #today-slider .deal-card.slider-card .floating-fav-btn i,
  #featured-slider .deal-card.slider-card .floating-fav-btn i,
  #ending-soon-slider .deal-card.slider-card .floating-fav-btn i,
  #big-discounts-slider .deal-card.slider-card .floating-fav-btn i,
  #trending-slider .deal-card.slider-card .floating-fav-btn i {
    font-size: 9px !important;
  }

  #today-slider .deal-card.slider-card .deal-card-timer,
  #featured-slider .deal-card.slider-card .deal-card-timer,
  #ending-soon-slider .deal-card.slider-card .deal-card-timer,
  #big-discounts-slider .deal-card.slider-card .deal-card-timer,
  #trending-slider .deal-card.slider-card .deal-card-timer {
    display: none !important;
  }

  #today-slider .deal-card.slider-card > div:not(.zoom-image-container),
  #featured-slider .deal-card.slider-card > div:not(.zoom-image-container),
  #ending-soon-slider .deal-card.slider-card > div:not(.zoom-image-container),
  #big-discounts-slider .deal-card.slider-card > div:not(.zoom-image-container),
  #trending-slider .deal-card.slider-card > div:not(.zoom-image-container) {
    padding: 0.35rem !important;
    gap: 0.15rem !important;
  }

  #today-slider .deal-card.slider-card .flex.items-center.justify-between.gap-2,
  #featured-slider .deal-card.slider-card .flex.items-center.justify-between.gap-2,
  #ending-soon-slider .deal-card.slider-card .flex.items-center.justify-between.gap-2,
  #big-discounts-slider .deal-card.slider-card .flex.items-center.justify-between.gap-2,
  #trending-slider .deal-card.slider-card .flex.items-center.justify-between.gap-2 {
    display: none !important;
  }

  #today-slider .deal-card.slider-card h3,
  #featured-slider .deal-card.slider-card h3,
  #ending-soon-slider .deal-card.slider-card h3,
  #big-discounts-slider .deal-card.slider-card h3,
  #trending-slider .deal-card.slider-card h3 {
    font-size: 0.7rem !important;
    line-height: 0.9rem !important;
    margin: 0 !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 1.8rem !important;
  }

  #today-slider .deal-card.slider-card p,
  #featured-slider .deal-card.slider-card p,
  #ending-soon-slider .deal-card.slider-card p,
  #big-discounts-slider .deal-card.slider-card p,
  #trending-slider .deal-card.slider-card p {
    display: none !important;
  }

  #today-slider .deal-card.slider-card .text-\[10px\].font-medium,
  #featured-slider .deal-card.slider-card .text-\[10px\].font-medium,
  #ending-soon-slider .deal-card.slider-card .text-\[10px\].font-medium,
  #big-discounts-slider .deal-card.slider-card .text-\[10px\].font-medium,
  #trending-slider .deal-card.slider-card .text-\[10px\].font-medium {
    display: none !important;
  }

  #today-slider .deal-card.slider-card .border-t,
  #featured-slider .deal-card.slider-card .border-t,
  #ending-soon-slider .deal-card.slider-card .border-t,
  #big-discounts-slider .deal-card.slider-card .border-t,
  #trending-slider .deal-card.slider-card .border-t {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1px !important;
  }

  #today-slider .deal-card.slider-card .deal-card-cta,
  #featured-slider .deal-card.slider-card .deal-card-cta,
  #ending-soon-slider .deal-card.slider-card .deal-card-cta,
  #big-discounts-slider .deal-card.slider-card .deal-card-cta,
  #trending-slider .deal-card.slider-card .deal-card-cta {
    display: none !important;
  }

  #today-slider .deal-card.slider-card .text-2xl,
  #featured-slider .deal-card.slider-card .text-2xl,
  #ending-soon-slider .deal-card.slider-card .text-2xl,
  #big-discounts-slider .deal-card.slider-card .text-2xl,
  #trending-slider .deal-card.slider-card .text-2xl {
    font-size: 0.85rem !important;
    font-weight: 900 !important;
    color: #ff4d4d !important;
  }

  #today-slider .deal-card.slider-card .text-2xl span,
  #featured-slider .deal-card.slider-card .text-2xl span,
  #ending-soon-slider .deal-card.slider-card .text-2xl span,
  #big-discounts-slider .deal-card.slider-card .text-2xl span,
  #trending-slider .deal-card.slider-card .text-2xl span {
    font-size: 9px !important;
  }

  #today-slider .deal-card.slider-card .line-through,
  #featured-slider .deal-card.slider-card .line-through,
  #ending-soon-slider .deal-card.slider-card .line-through,
  #big-discounts-slider .deal-card.slider-card .line-through,
  #trending-slider .deal-card.slider-card .line-through {
    font-size: 0.65rem !important;
  }
}

/* ============================================================
   SECTION 37: PREMIUM MOBILE UI ENHANCEMENTS
   ============================================================ */

/* ── Safe area update for taller nav ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 767px) {
    #mobile-bottom-nav {
      bottom: 0;
      height: calc(72px + env(safe-area-inset-bottom, 0px));
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    body.has-bottom-nav {
      padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ── Hero Slider Premium Enhancements ── */
@media (max-width: 767px) {
  /* Hero slider height: taller for more visual impact */
  .mobile-hero-slider {
    min-height: 220px;
    height: 220px;
  }

  /* Slide image: full-bleed with object-fit cover */
  .mobile-hero-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Overlay gradient: richer for better text legibility */
  .mobile-hero-slide-overlay {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.4) 45%,
      transparent 80%
    ) !important;
  }

  /* Slide heading: premium weight */
  .mobile-hero-slide-title {
    font-size: 1.25rem !important;
    letter-spacing: -0.02em !important;
    text-shadow: 0 3px 12px rgba(0,0,0,0.5) !important;
  }

  /* CTA button: more rounded, gradient border */
  .mobile-hero-slide-cta {
    border-radius: 14px !important;
    padding: 9px 18px !important;
    font-size: 0.78rem !important;
    box-shadow: 0 6px 20px rgba(255, 77, 77, 0.5) !important;
  }

  /* Hero container border radius */
  .mobile-hero-slider,
  .hero-banner-container {
    border-radius: 20px !important;
    overflow: hidden;
  }
}

/* ── Section Header Upgrade ── */
@media (max-width: 767px) {
  /* Section header icon boxes — more vibrant */
  #trending-deals-section .w-10,
  #today-deals-section .w-10,
  #ending-soon-deals-section .w-10,
  #big-discounts-section .w-10,
  #featured-restaurants-section .w-10,
  #partners-section .w-10 {
    background: linear-gradient(135deg, rgba(255,77,77,0.12) 0%, rgba(255,159,10,0.12) 100%) !important;
    border: 1px solid rgba(255,77,77,0.15);
  }

  /* Section header titles — tighter on mobile */
  #trending-deals-section h2,
  #today-deals-section h2,
  #ending-soon-deals-section h2,
  #big-discounts-section h2,
  #featured-restaurants-section h2 {
    font-size: 1.15rem !important;
    letter-spacing: -0.01em;
  }

  /* View all links — brand colored */
  #trending-deals-section a[href*="categories"],
  #today-deals-section a[href*="categories"],
  #ending-soon-deals-section a[href*="categories"],
  #big-discounts-section a[href*="categories"] {
    font-size: 0.72rem !important;
    color: #ff4d4d !important;
    font-weight: 700 !important;
  }
}

/* ── Full-feed Deal Cards (non-slider): 2-col on mobile ── */
@media (min-width: 390px) and (max-width: 640px) {
  /* Allow 2-col grid for the main deals grid if it is a 2-col grid */
  #deals-grid.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.85rem !important;
  }
}

/* ── Premium Pulse on Favorite Button ── */
@keyframes fav-pulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.35); }
  60%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.floating-fav-btn.is-favorited i {
  animation: fav-pulse 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ── Premium Swipe Hint Indicator ── */
@media (max-width: 767px) {
  /* Swipe hint for horizontal sliders */
  .slider-swipe-hint {
    position: absolute;
    bottom: 8px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: rgba(100, 116, 139, 0.6);
    font-size: 0.6rem;
    font-weight: 600;
    pointer-events: none;
    animation: hint-fade 3s ease 1s forwards;
  }

  @keyframes hint-fade {
    0%   { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
  }
}

/* ── Mobile Drawer: Premium Scrollbar ── */
@media (max-width: 767px) {
  #mobile-menu .flex-1.overflow-y-auto {
    scroll-behavior: smooth;
    overscroll-behavior: contain;
  }

  /* ── Drawer header: keep consistent with main CSS ── */
  /* #mobile-menu > div:first-child gradient is set in Section 4 */
}

/* ── Mobile City Sheet: Premium ── */
@media (max-width: 767px) {
  #mobile-city-sheet {
    border-radius: 28px 28px 0 0 !important;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
  }

  #mobile-city-sheet a {
    border-radius: 14px !important;
    transition: background 0.15s ease, transform 0.1s ease !important;
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  #mobile-city-sheet a:active {
    transform: scale(0.97) !important;
    background: rgba(255, 77, 77, 0.06) !important;
  }
}

/* ── Premium Page Enter Animation ── */
/* NOTE: We use ONLY opacity (no transform) on body — applying transform to body
   creates a new stacking context which breaks ALL position:fixed children
   (modals, bottom sheets, overlays, bottom nav, etc.) */
@keyframes page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (max-width: 767px) {
  body:not(.page-loaded) {
    animation: page-enter 0.25s ease forwards;
  }
}

/* Except when page is exiting */
body.page-exit {
  animation: none;
  opacity: 0;
}

/* ── Mobile Search Overlay Upgrade ── */
@media (max-width: 767px) {
  #mobile-search-overlay {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(32px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(32px) saturate(1.8) !important;
  }

  .dark #mobile-search-overlay {
    background: rgba(8, 13, 25, 0.98) !important;
  }

  /* Search input inside overlay */
  #mobile-overlay-search-input {
    border-radius: 14px !important;
    padding: 12px 42px !important;
    font-size: 16px !important;
    background: rgba(248, 250, 252, 0.9) !important;
    border: 1.5px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    min-height: 50px !important;
  }

  #mobile-overlay-search-input:focus {
    border-color: rgba(255, 77, 77, 0.4) !important;
    box-shadow: 0 4px 20px rgba(255, 77, 77, 0.08) !important;
    background: #ffffff !important;
  }

  .dark #mobile-overlay-search-input {
    background: rgba(30, 41, 59, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #f1f5f9 !important;
  }
}

/* ── Deal Card CTA Button: Premium ── */
@media (max-width: 767px) {
  a.deal-card-cta {
    background: linear-gradient(135deg, #ff4d4d 0%, #ff6b35 100%) !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 4px 14px rgba(255, 77, 77, 0.3) !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease !important;
  }

  a.deal-card-cta:active {
    transform: scale(0.96) !important;
    box-shadow: 0 2px 6px rgba(255, 77, 77, 0.2) !important;
  }
}

/* ── Deals Slider & Card layout optimizations on Mobile ── */
@media (max-width: 767px) {
  .slider-container {
    gap: 0.75rem !important;
    padding-bottom: 1rem !important;
  }
  .slider-card {
    flex: 0 0 calc(50% - 0.375rem) !important;
    min-width: 0 !important;
  }
  
  /* Optimize deal cards for mobile (especially 2-column sliders) */
  .deal-card p {
    display: none !important; /* Hide description to prevent vertical overflow */
  }
  
  .deal-card-expiry {
    display: none !important; /* Hide duplicate calendar row */
  }
  
  .deal-card > div.md\:block {
    padding: 0.75rem 0.75rem !important; /* Tighter padding */
    gap: 0.4rem !important;
  }
  
  .deal-card > div.md\:block h3 {
    font-size: 0.8rem !important; /* Cleaner, smaller titles */
    line-height: 1.25 !important;
    margin-bottom: 0.125rem !important;
  }

  .deal-card > div.md\:block .pricing-row {
    padding-top: 0.5rem !important;
    margin-top: 0.125rem !important;
  }

  .deal-card > div.md\:block .text-2xl {
    font-size: 1.15rem !important; /* Scale down the main price text */
  }
  
  .deal-card > div.md\:block .line-through {
    font-size: 0.75rem !important; /* Scale down original price */
  }

  .deal-card-cta {
    padding: 0.5rem 0.65rem !important; /* Smaller CTA button */
    font-size: 0.725rem !important;
    border-radius: 10px !important;
  }

  /* ── Search results grid card responsive adjustments ── */
  #deals-grid .deal-card {
    border-radius: 12px !important;
    border: 1px solid #f1f5f9 !important;
  }
  .dark #deals-grid .deal-card {
    border-color: rgba(255, 255, 255, 0.05) !important;
  }
  #deals-grid .deal-card .zoom-image-container {
    aspect-ratio: 16 / 10 !important;
  }
  #deals-grid .deal-card .deal-card-discount-badge {
    padding: 2px 6px !important;
    font-size: 9px !important;
    border-radius: 6px !important;
    top: 6px !important;
    left: 6px !important;
  }
  #deals-grid .deal-card .floating-fav-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 9999px !important;
    top: 6px !important;
    right: 6px !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }
  #deals-grid .deal-card .floating-fav-btn i {
    font-size: 11px !important;
    color: #4b5563 !important;
  }
  #deals-grid .deal-card .deal-card-timer {
    display: flex !important;
  }
  #deals-grid .deal-card > div.md\:block {
    padding: 0 !important;
    gap: 0 !important;
  }
  #deals-grid .deal-card .flex.items-center.justify-between.gap-2 {
    display: flex !important;
  }
  /* Old per-element card overrides removed — new mobile card has its own mobile-only div */

  /* ── Search Grid Layout Override ── */
  #deals-grid,
  #category-deals-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* Search Controls mobile styling */
  #search-results-section .flex-col {
    gap: 12px !important;
  }
  .search-sort-container {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }
  .search-sort-select {
    flex: 1 !important;
    text-align: end !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  #search-results-section button.btn-secondary {
    width: auto !important;
    white-space: nowrap !important;
  }

  /* Groupon-style card styling overrides */
  .mob-card-store {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 2px 0 0 0 !important;
  }
  .mob-card-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
    margin: 4px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .dark .mob-card-title {
    color: #f8fafc !important;
  }
  .mob-card-location {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    color: #64748b !important;
    margin-bottom: 4px !important;
  }
  .mob-card-distance {
    color: #94a3b8 !important;
    margin-left: 4px !important;
    font-weight: 500 !important;
  }
  .mob-card-rating {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }
  .mob-card-star {
    color: #f59e0b !important;
  }
  .mob-card-star--empty {
    color: #e2e8f0 !important;
  }
  .mob-card-rating-score {
    font-weight: 800 !important;
    color: #1e293b !important;
  }
  .dark .mob-card-rating-score {
    color: #e2e8f0 !important;
  }
  .mob-card-rating-count {
    color: #64748b !important;
  }
  .mob-card-price-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    margin-top: auto !important;
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 6px !important;
  }
  .dark .mob-card-price-block {
    border-top-color: rgba(255, 255, 255, 0.05) !important;
  }
  .mob-card-price-original {
    font-size: 11px !important;
    text-decoration: line-through !important;
    color: #94a3b8 !important;
    line-height: 1 !important;
  }
  .mob-card-price-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .mob-card-price-sale {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #059669 !important;
    line-height: 1 !important;
  }
  .dark .mob-card-price-sale {
    color: #34d399 !important;
  }
  .mob-card-price-currency {
    font-size: 10px !important;
    font-weight: 600 !important;
  }
  .mob-card-discount-pill {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
  }
  .dark .mob-card-discount-pill {
    background-color: rgba(220, 38, 38, 0.2) !important;
    color: #f87171 !important;
  }
  .mob-card-limited-time {
    font-size: 9px !important;
    font-weight: 600 !important;
    color: #dc2626 !important;
  }
  .dark .mob-card-limited-time {
    color: #f87171 !important;
  }
  .mob-card-promo-row {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #7c3aed !important;
    margin-top: 1px !important;
  }
  .dark .mob-card-promo-row {
    color: #a78bfa !important;
  }
  .mob-card-promo-code {
    background-color: #f3e8ff !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    border: 1px dashed #c084fc !important;
    font-weight: 800 !important;
  }
  .mob-card-promo-code {
    background-color: rgba(124, 58, 237, 0.2) !important;
    border-color: #a78bfa !important;
  }
}

/* ============================================================
   MOBILE UX/UI ANALYSIS OPTIMIZATIONS
   ============================================================ */

/* 1. Arabic Specific Typography Enhancements */
:lang(ar):not(i):not(.fa):not(.fab):not(.far):not(.fas):not([class*="fa-"]) {
  font-family: 'Tajawal', 'Cairo', sans-serif !important;
  line-height: 1.65 !important;
}
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4, :lang(ar) h5, :lang(ar) h6 {
  line-height: 1.45 !important;
}

/* 2. Scroll Indicator for Horizontal Lists */
@media (max-width: 768px) {
  .scrollbar-hide {
    mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%) !important;
  }
  [dir="rtl"] .scrollbar-hide {
    mask-image: linear-gradient(to left, transparent 0%, #000 8%, #000 92%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 8%, #000 92%, transparent 100%) !important;
  }
}

/* 3. Small Viewports Layout Stability */
@media (max-width: 399px) {
  .mob-logo {
    max-width: 95px !important;
  }
  #mob-city-btn {
    max-width: 105px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  #mobile-city-selector-label {
    max-width: 50px !important;
  }
  .mob-action-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }
}

@media (max-width: 360px) {
  .grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  .mob-logo {
    max-width: 85px !important;
  }
  #mob-city-btn {
    max-width: 90px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  #mobile-city-selector-label {
    max-width: 40px !important;
  }
  .mob-action-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }
}

/* ============================================================
   MOBILE UI/UX FIXES — Footer & Hero Slider
   ============================================================ */

/* ── Fix 1: Footer accordion toggle — Remove duplicate chevron gap issue ──
   The h3.footer-col-toggle has Tailwind class `gap-2` which applies gap
   to ALL flex children. On mobile, we override to `gap-0` and push the
   chevron to the far end via justify-content:space-between (already set
   in mobile.min.css). We also reset the `mb-5` margin since the toggle
   collapses the links and the margin creates unwanted spacing. */
@media (max-width: 640px) {
  /* The h3 carries both Tailwind `flex gap-2 items-center` and CSS flex.
     We neutralize the `gap-2` here so only the chevron at far-right shows. */
  h3.footer-col-toggle {
    gap: 0 !important;
    margin-bottom: 0 !important;
  }

  /* The inner span already has `flex items-center gap-2` for the icon+label */
  h3.footer-col-toggle > span {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Ensure the toggle chevron icon is visible and correctly aligned */
  h3.footer-col-toggle > i.toggle-chevron {
    display: block !important;
    flex-shrink: 0;
    margin-left: 12px;
    opacity: 0.6;
    font-size: 0.65rem;
    transition: transform 0.3s;
  }

  h3.footer-col-toggle.open > i.toggle-chevron {
    transform: rotate(180deg);
  }

  /* RTL: mirror the icon margin */
  html[dir=rtl] h3.footer-col-toggle > i.toggle-chevron {
    margin-left: 0;
    margin-right: 12px;
  }

  /* ── Fix 2: Bottom footer links — Stack vertically on mobile ──
     The links bar uses `flex space-x-5` (Tailwind) which doesn't wrap.
     On mobile we switch to a flex-wrap grid layout. */
  #main-footer > div > div.flex.flex-col.sm\\:flex-row,
  #main-footer > div > div:last-child {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.625rem !important;
    text-align: center !important;
  }

  /* The links row inside the bottom bar */
  #main-footer > div > div:last-child > div.flex {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem 1rem !important;
    column-gap: 1.25rem !important;
    row-gap: 0.5rem !important;
  }

  /* Remove margin-based spacing (space-x-5) on mobile since we use gap */
  #main-footer > div > div:last-child > div.flex > a {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ── Fix 3: Hero slider — Ensure inactive slides don't show content
   The slides-container is a flex row shifted by translateX. Adding
   overflow:hidden on the container ensures no bleed-through of adjacent
   slide text content on very narrow screens or during paint. */
@media (max-width: 767px) {
  .mobile-hero-slider .slides-container {
    overflow: hidden;
  }

  /* Each slide child (anchor or div) must clip its overlay content */
  .mobile-hero-slider .slides-container > * {
    overflow: hidden;
  }
}

/* Tinder Swipe Overlays & Animation Styles */
.deal-card, .jd-card {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.swipe-overlay-badge {
  position: absolute;
  top: 16px;
  z-index: 50;
  padding: 6px 12px;
  border-radius: 10px;
  color: white;
  font-weight: 900;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-transform: uppercase;
}

.swipe-save {
  right: 16px;
  background-color: #10b981 !important; /* Emerald 500 */
}
html[dir=rtl] .swipe-save {
  right: auto;
  left: 16px;
}

.swipe-skip {
  left: 16px;
  background-color: #ef4444 !important; /* Red 500 */
}
html[dir=rtl] .swipe-skip {
  left: auto;
  right: 16px;
}

/* Quick Filter Buttons Styling */
.mobile-quick-filter-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mobile-quick-filter-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: inherit;
  transition: border-color 0.2s ease;
}

.mobile-quick-filter-btn.active {
  background: rgba(239, 68, 68, 0.08) !important;
  transform: scale(0.96);
  box-shadow: inset 0 2px 6px rgba(239, 68, 68, 0.05);
}

.mobile-quick-filter-btn.active::after {
  border-color: #ff3b30 !important;
}

.dark .mobile-quick-filter-btn.active {
  background: rgba(239, 68, 68, 0.15) !important;
}


/* ============================================================
   SORT PILLS BAR — Premium Mobile Sort Selector
   ============================================================ */

/* Container: horizontal scrollable row, no wrap */
.sort-pills-bar {
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.sort-pills-bar::-webkit-scrollbar { display: none; }

/* Individual pill */
.sort-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  border: 1.5px solid transparent;
  background: #f1f5f9;
  color: #475569;
  transition: background 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.14s ease,
              box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  outline: none;
}

.dark .sort-pill {
  background: rgba(30, 41, 59, 0.85);
  color: #94a3b8;
  border-color: rgba(255,255,255,0.06);
}

.sort-pill .sort-pill-icon {
  font-size: 0.72rem;
  transition: transform 0.18s ease;
}

.sort-pill:hover:not(.active) {
  background: #e2e8f0;
  color: #334155;
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
.dark .sort-pill:hover:not(.active) {
  background: rgba(51, 65, 85, 0.9);
  color: #e2e8f0;
  border-color: rgba(255,255,255,0.12);
}

.sort-pill.active {
  background: linear-gradient(135deg, #ff3b30 0%, #ff9f0a 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(255, 59, 48, 0.35),
              0 1px 4px rgba(255, 59, 48, 0.2);
  transform: scale(1.03);
}
.sort-pill.active .sort-pill-icon {
  transform: scale(1.15);
}

.sort-pill:active {
  transform: scale(0.96) !important;
  box-shadow: none !important;
}

/* ── Reset Button ── */
.sort-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid #fed7aa;
  background: #fff7ed;
  color: #ea580c;
  transition: background 0.18s ease, border-color 0.18s ease,
              transform 0.14s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  outline: none;
}
.dark .sort-reset-btn {
  background: rgba(234, 88, 12, 0.12);
  border-color: rgba(234, 88, 12, 0.3);
  color: #fb923c;
}
.sort-reset-btn:hover {
  background: #ffedd5;
  border-color: #fb923c;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(234, 88, 12, 0.15);
}
.dark .sort-reset-btn:hover {
  background: rgba(234, 88, 12, 0.2);
}
.sort-reset-btn:active {
  transform: scale(0.95);
  box-shadow: none;
}

/* ============================================================
   MOBILE LAYOUT FIX: REMOVE UNWANTED HORIZONTAL SPACING
   ============================================================ */

/* On mobile (below 768px), eliminate excessive side gaps and use minimal padding */
@media (max-width: 767px) {
  /* AGGRESSIVE: Override ALL Tailwind horizontal padding utilities on mobile */
  .px-4,
  .px-6,
  .px-8,
  section.px-4,
  section.px-6,
  section.px-8,
  div.px-4,
  div.px-6,
  div.px-8 {
    padding-left: 0.5rem !important;  /* 8px - minimal padding */
    padding-right: 0.5rem !important; /* 8px - minimal padding */
  }

  /* Override Tailwind responsive padding classes */
  .sm\:px-6,
  .sm\:px-8 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Override container max-width classes */
  section,
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl,
  .max-w-3xl,
  .max-w-2xl,
  .max-w-xl {
    max-width: 100% !important;
    padding-left: 0.5rem !important;  /* 8px */
    padding-right: 0.5rem !important; /* 8px */
  }

  /* Remove any mx-auto centering margins on mobile */
  .mx-auto,
  section.mx-auto,
  div.mx-auto {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Ensure main content wrapper has no extra margin or padding */
  #app-content-wrapper,
  main,
  body > div,
  body > main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Header container: minimal padding */
  #main-header .max-w-7xl,
  #main-header > div {
    padding-left: 0.375rem !important;  /* 6px */
    padding-right: 0.375rem !important; /* 6px */
  }

  /* Mobile header row: minimal padding */
  .mob-header-row {
    padding-left: 0.375rem !important;  /* 6px */
    padding-right: 0.375rem !important; /* 6px */
  }

  /* Mobile hero slider: minimal side margin */
  .mobile-hero-slider {
    margin-left: 0.5rem !important;  /* 8px */
    margin-right: 0.5rem !important; /* 8px */
  }

  /* Hero section: minimal padding */
  .hero-section,
  section.hero-section {
    padding-left: 0.5rem !important;  /* 8px */
    padding-right: 0.5rem !important; /* 8px */
  }

  /* Hero inner container: no additional padding */
  .hero-section > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* All major sections: minimal padding */
  #trending-deals-section,
  #categories-section,
  #today-deals-section,
  #featured-restaurants-section,
  #ending-soon-deals-section,
  #big-discounts-section,
  #partners-section,
  #search-results-section,
  #newsletter-section,
  #merchant-cta-section,
  #stats-counter-section {
    padding-left: 0.5rem !important;  /* 8px */
    padding-right: 0.5rem !important; /* 8px */
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  /* Deal cards grid: no padding (parent section has padding) */
  #deals-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }



  /* ============================================================
     SECTION 9: MOBILE BOTTOM NAVIGATION — PREMIUM FIXED BAR
     ============================================================ */

  /* Ensure bottom nav is always visible above safe areas */
  #mobile-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    z-index: 50 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    gap: 0 !important;
    padding-top: 0.75rem !important;
    padding-bottom: max(0.625rem, env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05) !important;
  }

  .dark #mobile-bottom-nav {
    background: rgba(10, 16, 30, 0.95) !important;
    border-top-color: rgba(30, 41, 59, 0.8) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2) !important;
  }

  /* Bottom nav items spacing and touch targets */
  #mobile-bottom-nav .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    min-height: 60px;
    padding: 0;
    gap: 0;
    position: relative;
    text-decoration: none;
    color: rgba(100, 116, 139, 1);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  #mobile-bottom-nav .bottom-nav-item:active {
    transform: scale(0.9);
  }

  #mobile-bottom-nav .bottom-nav-item > div {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: all 0.3s ease;
    margin-bottom: 0.25rem;
  }

  #mobile-bottom-nav .bottom-nav-item > span {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  /* Active state for bottom nav items */
  #mobile-bottom-nav .bottom-nav-item.active,
  #mobile-bottom-nav .bottom-nav-item:hover {
    color: #ff4d4d;
  }

  #mobile-bottom-nav .bottom-nav-item.active > div {
    background-color: rgba(255, 76, 77, 0.1);
    color: #ff4d4d;
  }

  .dark #mobile-bottom-nav .bottom-nav-item.active > div {
    background-color: rgba(239, 68, 68, 0.1);
  }

  /* ============================================================
     SECTION 10: BODY & CONTENT WRAPPER PADDING
     ============================================================ */

  /* Ensure body doesn't go under fixed elements */
  body.has-bottom-nav {
    position: relative;
  }

  /* Content wrapper padding for mobile bottom nav */
  #app-content-wrapper {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    margin-bottom: 0 !important;
    min-height: calc(100vh - 64px - 72px - env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Prevent horizontal overflow on all pages */
  #app-content-wrapper,
  #default-homepage-sections,
  #hero-section,
  #categories-section,
  #trending-deals-section,
  #partners-section,
  #today-deals-section,
  #big-discounts-section {
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* All container elements should not overflow */
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl,
  .max-w-3xl {
    width: 100% !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    box-sizing: border-box !important;
  }

  /* ============================================================
     SECTION 11: MOBILE HEADER VISIBILITY & RTL SUPPORT
     ============================================================ */

  /* Ensure mobile header is always on top and visible */
  #main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 40 !important;
    min-height: 60px;
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }

  .dark #main-header {
    background-color: rgba(10, 16, 30, 0.95) !important;
  }

  /* Mobile logo alignment */
  .mob-logo {
    width: auto !important;
    height: 28px !important;
    display: block;
    margin: 0 auto;
  }

  /* RTL alignment fixes for mobile header */
  html[dir="rtl"] #main-header .mob-header-row {
    flex-direction: row-reverse;
  }

  html[dir="rtl"] #main-header .mob-city-pill {
    flex-direction: row-reverse;
  }

  /* Mobile search bar RTL */
  html[dir="rtl"] #mobile-overlay-search-input {
    text-align: right;
    direction: rtl;
  }

  /* ============================================================
     SECTION 12: CATEGORIES MOBILE REDESIGN
     ============================================================ */

  /* Premium mobile categories bar */
  .mobile-categories-bar {
    margin-top: 1rem !important;
    margin-bottom: 0.25rem !important;
    position: relative;
    width: 100% !important;
    overflow: hidden !important;
    display: block !important;
  }

  .mobile-categories-bar::-webkit-scrollbar {
    display: none !important;
  }

  /* Individual category cards */
  .category-card-premium-mobile {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    flex-shrink: 0;
    border-radius: 16px !important;
    overflow: hidden !important;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 0.5rem !important;
    background-size: cover !important;
    background-position: center !important;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1.5px solid transparent !important;
  }

  .category-card-premium-mobile:active {
    transform: scale(0.92) !important;
  }

  .category-card-premium-mobile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .category-card-premium-mobile:hover img {
    transform: scale(1.08) !important;
  }

  .category-card-premium-mobile > * {
    position: relative;
    z-index: 10;
  }

  /* Active state when a category is selected/active */
  .category-card-premium-mobile.active {
    border-color: #ff4d4d !important;
    box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.2), 0 4px 12px rgba(255, 77, 77, 0.15) !important;
  }

  /* Category text styling */
  .category-card-premium-mobile span,
  .category-card-premium-mobile .category-name {
    text-align: center;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: white !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    line-height: 1.2 !important;
    word-break: break-word;
    display: block;
    width: 100%;
    padding: 0 4px;
  }

  /* ============================================================
     SECTION 13: MOBILE DEAL CARDS & GRID OPTIMIZATION
     ============================================================ */

  /* Mobile deal cards - premium touch targets */
  .mobile-card-view {
    border-radius: 20px !important;
    overflow: hidden !important;
    margin-bottom: 1rem !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
  }

  .mobile-card-view:active {
    transform: scale(0.97);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
  }

  .dark .mobile-card-view {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  }

  /* ============================================================
     SECTION 14: MOBILE LAYOUT STABILITY & CLS PREVENTION
     ============================================================ */

  /* Prevent layout shift from scrollbar appearing */
  html {
    overflow-y: scroll;
  }

  /* Image containers reserve space to prevent CLS */
  .zoom-image-container,
  .mobile-hero-slider,
  .slider-card img {
    background-color: #f1f5f9;
  }

  .dark .zoom-image-container,
  .dark .mobile-hero-slider,
  .dark .slider-card img {
    background-color: #1e293b;
  }

  /* ============================================================
     SECTION 15: HERO SECTION MOBILE OPTIMIZATION
     ============================================================ */

  /* Hero section container */
  #hero-section {
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }

  /* Mobile hero slider styling */
  .mobile-hero-slider {
    width: 100% !important;
    height: auto !important;
    margin: 1rem 0 !important;
    padding: 0 1rem !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .mobile-hero-slider .slides-container {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .mobile-hero-slider .slides-container a {
    flex: 1 0 100%;
    width: 100%;
    height: 100%;
    display: block;
  }

  .mobile-hero-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Mobile search trigger */
  .mobile-search-trigger {
    width: 100% !important;
    height: 56px !important;
    margin: 1rem 0 !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
  }

  /* Hero search bar mobile */
  .hero-search-bar {
    width: 100%;
    padding: 0 1rem;
    margin: 1rem 0;
    box-sizing: border-box;
  }

  .hero-search-inner {
    width: 100%;
    display: flex;
    align-items: center;
  }

  .hero-search-input {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-city-chips {
    width: 100%;
    overflow-x: auto;
    padding: 0.5rem 1rem;
    margin: 0;
    box-sizing: border-box;
  }

  /* ============================================================
     SECTION 16: MOBILE SECTION CONTAINERS & OVERFLOW PREVENTION
     ============================================================ */

  /* All sections should be full width and prevent overflow */
  .max-w-7xl.mx-auto.px-4,
  .max-w-6xl.mx-auto.px-4,
  .max-w-5xl.mx-auto.px-4,
  .max-w-4xl.mx-auto.px-4,
  .max-w-3xl.mx-auto.px-4 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Slider containers should never overflow */
  .slider-container,
  .slider-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
  }

  /* Deal grids */
  #deals-grid,
  .grid {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* ============================================================
     SECTION 17: MOBILE BUTTONS & FORMS
     ============================================================ */

  /* Buttons should have min touch targets */
  .btn, button, [role="button"], a[role="button"] {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
  }

  /* Forms should be readable on mobile */
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="number"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;
    padding: 0.75rem 1rem !important;
    border-radius: 12px !important;
    width: 100% !important;
  }

  /* ============================================================
     SECTION 18: RTL LAYOUT FIXES
     ============================================================ */

  /* RTL categories bar */
  html[dir="rtl"] .mobile-categories-bar {
    flex-direction: row-reverse;
  }

  /* RTL sections */
  html[dir="rtl"] .max-w-7xl.mx-auto,
  html[dir="rtl"] .max-w-6xl.mx-auto,
  html[dir="rtl"] .max-w-5xl.mx-auto,
  html[dir="rtl"] .max-w-4xl.mx-auto,
  html[dir="rtl"] .max-w-3xl.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* RTL bottom nav alignment */
  html[dir="rtl"] #mobile-bottom-nav .bottom-nav-item {
    flex-direction: column;
  }

  /* ============================================================
     SECTION 19: PERFORMANCE & VISUAL STABILITY
     ============================================================ */

  /* Reduce repaints during animations */
  .deal-card,
  .category-card,
  .subcategory-bubble-card {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* Skeleton loading backgrounds */
  .skeleton,
  [data-loading="true"] {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
  }

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

  .dark .skeleton,
  .dark [data-loading="true"] {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  }

  /* ============================================================
     SECTION 20: MOBILE SAFE ZONE INSETS
     ============================================================ */

  /* Ensure content doesn't go under notches or gesture areas */
  @supports (padding: max(0px)) {
    #main-header {
      padding-top: max(0px, env(safe-area-inset-top, 0px));
    }

    #mobile-bottom-nav {
      padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
    }

    #app-content-wrapper {
      padding-bottom: calc(72px + max(0px, env(safe-area-inset-bottom, 0px)));
    }
  }

}

  /* Slider containers: ensure touch scrolling works */
  .slider-container,
  #trending-slider,
  #today-slider,
  #featured-slider,
  #ending-slider,
  #big-discounts-slider {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
  }

  /* Subcategory scroll containers: minimal padding */
  .subcategory-scroll-container,
  .subcategory-pills-scroll-container {
    padding-left: 0.5rem !important;  /* 8px */
    padding-right: 0.5rem !important; /* 8px */
  }

  /* Partners logo container: minimal padding */
  .partner-logo-container {
    padding-left: 0.5rem !important;  /* 8px */
    padding-right: 0.5rem !important; /* 8px */
  }

  /* Mobile categories bar: minimal padding */
  .mobile-categories-bar {
    padding-left: 0.5rem !important;  /* 8px */
    padding-right: 0.5rem !important; /* 8px */
  }

  /* Fix for any rogue container classes */
  .container {
    padding-left: 0.5rem !important;  /* 8px */
    padding-right: 0.5rem !important; /* 8px */
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  /* Mobile search trigger: minimal padding */
  .mobile-search-trigger,
  div[class*="mt-3"][class*="px-4"] {
    padding-left: 0.5rem !important;  /* 8px */
    padding-right: 0.5rem !important; /* 8px */
  }
}

/* Extra small phones (below 400px): reduce to minimal padding */
@media (max-width: 399px) {
  /* Even more aggressive padding reduction for small screens */
  .px-4,
  .px-6,
  .px-8,
  section,
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl,
  .max-w-3xl {
    padding-left: 0.375rem !important;  /* 6px */
    padding-right: 0.375rem !important; /* 6px */
  }

  #main-header .max-w-7xl,
  #main-header > div {
    padding-left: 0.25rem !important;  /* 4px */
    padding-right: 0.25rem !important; /* 4px */
  }

  .mob-header-row {
    padding-left: 0.25rem !important;  /* 4px */
    padding-right: 0.25rem !important; /* 4px */
  }

  .mobile-hero-slider {
    margin-left: 0.375rem !important;  /* 6px */
    margin-right: 0.375rem !important;
  }

  .hero-section,
  section.hero-section {
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important;
  }

  /* All sections: 6px padding */
  #trending-deals-section,
  #categories-section,
  #today-deals-section,
  #featured-restaurants-section,
  #ending-soon-deals-section,
  #big-discounts-section,
  #partners-section,
  #search-results-section,
  #newsletter-section,
  #merchant-cta-section,
  #stats-counter-section {
    padding-left: 0.375rem !important;  /* 6px */
    padding-right: 0.375rem !important; /* 6px */
  }
}


/* ============================================================
   SLIDER FIX: iOS Safari (iPhone 14 Pro, 390×844 and all touch devices)
   ONE definitive block — no conflicts with earlier rules.
   ============================================================ */

@media (hover: none), (max-width: 767px) {

  /* 1. Section wrappers that contain sliders must not clip overflow.
        overflow-x: clip (set in style.css on .slider-wrapper) creates a
        block-formatting context on some browsers and stops the child
        .slider-container from receiving touch events on iOS Safari.
        Force it back to visible so the scrollable child is unobstructed. */
  .slider-wrapper {
    overflow:   visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    /* Remove any transform that creates a stacking/compositing context
       and can swallow touch events before they reach the scroll container. */
    transform:        none !important;
    -webkit-transform: none !important;
    will-change: auto !important;
  }

  /* 2. The actual scrolling container.
        Key points for iOS Safari:
        • overflow-x: auto  — let the browser decide (works on all iOS versions)
        • -webkit-overflow-scrolling: touch  — momentum/inertia on iOS < 13
        • touch-action: pan-x pan-y  — allow BOTH axes so iOS doesn't hijack
          the gesture for page scroll and block the slider at the same time.
          (pan-x alone blocks vertical page scroll, confusing iOS gesture
           disambiguation and causing it to ignore the slider entirely.) */
  .slider-container {
    overflow-x:   auto !important;
    overflow-y:   hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    /* GPU layer — smoother compositing on older A-series chips */
    -webkit-transform: translateZ(0) !important;
    transform:         translateZ(0) !important;
    /* Always full width of parent section */
    width:     100% !important;
    max-width: 100% !important;
    /* Snap is fine to keep */
    scroll-snap-type: x mandatory !important;
  }

  /* 3. Cards must not shrink.
        Do NOT force an explicit pixel/% width here — the responsive
        flex: 0 0 60% rule in the base stylesheet is correct at 390 px.
        Overriding it with min/max-width breaks card sizing. */
  .slider-card {
    flex-shrink: 0 !important;
    flex-grow:   0 !important;
    /* Ensure taps reach the card itself */
    pointer-events: auto !important;
    touch-action:   pan-x pan-y !important;
  }

  /* 4. All other horizontal scroll containers — same pattern. */
  .subcategory-scroll-container,
  .subcategory-pills-scroll-container,
  .category-slider-container,
  .partner-logo-container,
  .mobile-categories-bar,
  .hero-city-chips {
    overflow-x:   auto !important;
    overflow-y:   hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    -webkit-transform: translateZ(0) !important;
    transform:         translateZ(0) !important;
  }

  /* 5. Body/html must not restrict touch propagation. */
  html, body {
    touch-action: auto !important;
  }
}

/* ============================================================
   JO-DEALS PREMIUM MOBILE HOMEPAGE REDESIGN STYLES
   ============================================================ */

@media (max-width: 767px) {
  /* General Premium UI Adjustments */
  body {
    background-color: #F8FAFC !important;
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 16px)) !important;
  }
  .dark body {
    background-color: #0F172A !important;
  }
  
  /* Touch target helpers */
  button, a, input, select {
    min-height: 44px;
  }

  /* Spacing system and Premium Spacing classes */
  .section-premium-spacing {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Glassmorphism overlays & soft shadows */
  .glass-card {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
  }
  .dark .glass-card {
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  
  /* Redesigned Search input trigger details */
  .mobile-search-trigger {
    background-color: #ffffff;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease-in-out;
  }
  .mobile-search-trigger:active {
    transform: scale(0.98);
  }
  .dark .mobile-search-trigger {
    background-color: #1e293b;
    box-shadow: none;
  }

  /* Categories list circular icons with glow and gradient backgrounds */
  .category-card-premium {
    flex-shrink: 0;
    transition: transform 0.2s ease;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px;
  }
  .category-card-premium:active {
    transform: scale(0.92);
  }
  .category-image-wrap {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.08) !important;
  }
  
  /* Beautiful custom colorful circular background gradients for Categories */
  .category-card-premium:nth-child(7n+1) .category-image-wrap {
    background: linear-gradient(135deg, #FFE4E6, #FECDD3) !important; /* Rose */
    color: #E11D48 !important;
  }
  .category-card-premium:nth-child(7n+2) .category-image-wrap {
    background: linear-gradient(135deg, #CCFBF1, #99F6E4) !important; /* Teal */
    color: #0D9488 !important;
  }
  .category-card-premium:nth-child(7n+3) .category-image-wrap {
    background: linear-gradient(135deg, #FEF3C7, #FDE68A) !important; /* Amber */
    color: #D97706 !important;
  }
  .category-card-premium:nth-child(7n+4) .category-image-wrap {
    background: linear-gradient(135deg, #E0F2FE, #BAE6FD) !important; /* Blue */
    color: #0284C7 !important;
  }
  .category-card-premium:nth-child(7n+5) .category-image-wrap {
    background: linear-gradient(135deg, #F3E8FF, #E9D5FF) !important; /* Purple */
    color: #7C3AED !important;
  }
  .category-card-premium:nth-child(7n+6) .category-image-wrap {
    background: linear-gradient(135deg, #DCFCE7, #BBF7D0) !important; /* Green */
    color: #16A34A !important;
  }
  .category-card-premium:nth-child(7n+7) .category-image-wrap {
    background: linear-gradient(135deg, #FFEDD5, #FED7AA) !important; /* Orange */
    color: #EA580C !important;
  }
  
  /* Category active status and glow effect */
  .category-card-premium.active .category-image-wrap {
    transform: scale(1.08);
    box-shadow: 0 0 16px rgba(255, 77, 77, 0.4) !important;
    border: 2px solid #FF4D4D !important;
  }
  
  .category-name {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #334155 !important;
  }
  .dark .category-name {
    color: #cbd5e1 !important;
  }

  /* Premium Mobile Floating Bottom Navigation overrides */
  #mobile-bottom-nav {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.15) !important;
    border-radius: 24px !important;
    padding: 10px 16px !important;
    height: auto !important;
  }
  .dark #mobile-bottom-nav {
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  
  .bottom-nav-item {
    transition: all 0.25s ease !important;
  }
  .bottom-nav-item.active i {
    transform: translateY(-2px) scale(1.15) !important;
    color: #FF4D4D !important;
  }
  .bottom-nav-item.active span {
    color: #FF4D4D !important;
    font-weight: 800 !important;
  }

  /* Support for iOS Safe Area heights in navigation padding */
  .pb-calc {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ============================================================
     JO-DEALS PREMIUM MOBILE HOMEPAGE REDESIGN STYLES
     ============================================================ */

  /* Glow focused Search Bar */
  .mobile-search-trigger {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  }
  .mobile-search-trigger:focus-within,
  .mobile-search-trigger:active {
    transform: scale(0.98);
    box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.25), 0 8px 24px rgba(255, 77, 77, 0.15) !important;
    border-color: #FF4D4D !important;
  }

  /* Micro-animations */
  @keyframes floatBadge {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-4px); }
    100% { transform: translateY(0px); }
  }
  .animate-float-badge {
    animation: floatBadge 3s ease-in-out infinite;
  }

  @keyframes pulseTimer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }
  .animate-pulse-timer {
    animation: pulseTimer 1.5s ease-in-out infinite;
  }

  /* Mini Offer Cards styling - Redesigned to be vertical, premium cards */
  .mini-offer-card {
    background: #ffffff;
    border: 1.5px solid rgba(226, 232, 240, 0.8);
    border-radius: 22px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }
  .mini-offer-card:active {
    transform: scale(0.95) translateY(2px);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  }
  
  /* Modern colorful gradient card themes */
  .mini-card-rose {
    background: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 100%) !important;
    border-color: #FECDD3 !important;
  }
  .dark .mini-card-rose {
    background: linear-gradient(135deg, #4c0519 0%, #881337 100%) !important;
    border-color: rgba(244, 63, 94, 0.3) !important;
  }
  
  .mini-card-teal {
    background: linear-gradient(135deg, #F0FDFA 0%, #CCFBF1 100%) !important;
    border-color: #99F6E4 !important;
  }
  .dark .mini-card-teal {
    background: linear-gradient(135deg, #134e4a 0%, #115e59 100%) !important;
    border-color: rgba(20, 184, 166, 0.3) !important;
  }
  
  .mini-card-amber {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%) !important;
    border-color: #FCD34D !important;
  }
  .dark .mini-card-amber {
    background: linear-gradient(135deg, #451a03 0%, #78350f 100%) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
  }
  .mini-offer-img-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 12px;
    overflow: hidden;
    background: #f8fafc;
  }
  .dark .mini-offer-img-container {
    background: #0f172a;
  }
  .mini-offer-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  .mini-offer-card:hover .mini-offer-img {
    transform: scale(1.08);
  }
  .mini-offer-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #FF4D4D;
    color: #ffffff;
    font-size: 8px;
    font-weight: 900;
    padding: 2px 5px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(255, 77, 77, 0.3);
    z-index: 5;
  }
  .mini-offer-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  /* Flash Deals Progress Bar */
  .flash-progress-bar {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
  }
  .dark .flash-progress-bar {
    background: #334155;
  }
  .flash-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #FF4D4D, #FF9F0A);
    border-radius: 999px;
    transition: width 0.5s ease-out;
  }

  /* Premium Gold Exclusive Cards */
  .gold-premium-card {
    background: linear-gradient(135deg, #1e1b4b 0%, #030712 100%);
    border: 1.5px solid rgba(245, 158, 11, 0.35);
    box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.15);
  }
  .gold-text-glow {
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
  }

  /* Floating Action Button (FAB) */
  .fab-surprise {
    position: fixed;
    bottom: 90px;
    right: 20px;
    z-index: 39;
    background: linear-gradient(135deg, #FF4D4D 0%, #FF9F0A 100%);
    box-shadow: 0 8px 24px rgba(255, 77, 77, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .fab-surprise:active {
    transform: scale(0.85);
  }
  [dir="rtl"] .fab-surprise {
    right: auto;
    left: 20px;
  }

  /* Loading Skeleton Card */
  .skeleton-loader {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: loadingSkeleton 1.5s infinite;
  }
  .dark .skeleton-loader {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
  }
  @keyframes loadingSkeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* Empty States visual */
  .empty-state-visual {
    padding: 32px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  /* Redesigned Mobile Deal Cards - Uniform Height & Premium UI/UX */
  .mobile-card-view {
    display: flex !important;
    flex-direction: column !important;
    height: 420px !important; /* Uniform card height fit for premium layout */
    justify-content: space-between !important;
    background: #ffffff !important;
    border: 1px solid rgba(241, 245, 249, 0.9) !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.04), 0 8px 16px -6px rgba(15, 23, 42, 0.02) !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
  }
  .dark .mobile-card-view {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5) !important;
  }
  .mobile-card-view:active {
    transform: scale(0.985) translateY(1px) !important;
  }
  .mobile-card-img-container {
    position: relative !important;
    width: 100% !important;
    height: 200px !important; /* Large optimized image height */
    overflow: hidden !important;
  }
  .mobile-card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  .mobile-card-view:hover .mobile-card-img {
    transform: scale(1.06) !important;
  }
  .mobile-card-body {
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  .mobile-card-cta {
    display: block !important;
    width: 100% !important;
    padding: 11px 0 !important;
    background: linear-gradient(135deg, #ff4d4d 0%, #e11d48 100%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    text-align: center !important;
    border-radius: 16px !important;
    font-size: 12px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.18) !important;
    border: none !important;
    text-decoration: none !important;
  }
  .dark .mobile-card-cta {
    background: linear-gradient(135deg, #ff4d4d 0%, #e11d48 100%) !important;
    color: #ffffff !important;
  }
  .mobile-card-cta:active {
    transform: scale(0.97) !important;
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.1) !important;
  }
}


/* ============================================================
   SKELETON LOADERS & ANIMATIONS
   ============================================================ */

@keyframes skeleton-loading {
  0% { background-color: #f1f5f9; }
  50% { background-color: #e2e8f0; }
  100% { background-color: #f1f5f9; }
}

@keyframes dark-skeleton-loading {
  0% { background-color: #1e293b; }
  50% { background-color: #334155; }
  100% { background-color: #1e293b; }
}

.skeleton-loader {
  animation: skeleton-loading 1.5s infinite ease-in-out;
  border-radius: 8px;
}

.dark .skeleton-loader {
  animation: dark-skeleton-loading 1.5s infinite ease-in-out;
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

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