/* ================================================
   RED CHILLY — MOBILE RESPONSIVE MASTER FILE
   Covers: Website + Admin | All screens ≤ 768px
   ================================================ */

/* ─── GLOBAL PERFORMANCE BASELINE ──────────────── */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
html { touch-action: pan-y; -webkit-overflow-scrolling: touch; }
img  { max-width: 100%; height: auto; }

/* ─── TYPOGRAPHY SCALE ──────────────────────────── */
@media (max-width: 480px) {
  h1 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; }
  h2 { font-size: clamp(1.3rem, 5.5vw, 1.8rem) !important; }
  h3 { font-size: 1.1rem !important; }
  p  { font-size: 0.9rem; }
}

/* ─── NAVBAR ────────────────────────────────────── */
@media (max-width: 768px) {
  .header { top: 32px !important; }
  /* Transparent header on mobile when at top (not scrolled) */
  .header:not(.scrolled) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }
  .top-banner { padding: 6px 12px; font-size: 0.72rem; }
  .top-banner,
  .offer-strip {
    width: calc(100vw - 88px);
    max-width: 320px;
    margin: 0 auto;
    padding: 5px 10px;
    gap: 6px;
    font-size: 0.68rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 0 0 14px 14px;
  }
  .top-banner span,
  #top-banner-text,
  #offer-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .offer-badge {
    flex: 0 0 auto;
    margin-right: 0;
    padding: 2px 6px;
    font-size: 0.58rem;
  }
  .logo-img   { height: 36px; }
  .mobile-menu-toggle { display: flex !important; align-items: center; }
  .nav-actions { display: none !important; }
  .desktop-nav.active {
    padding: 8px 0 !important;
  }
  .desktop-nav.active .nav-link {
    padding: 13px 22px !important;
    font-size: 1rem !important;
  }
}

/* ─── HERO ──────────────────────────────────────── */
@media (max-width: 768px) {
  .hero { min-height: 88vh; }
  .hero-cta { gap: 10px !important; padding: 0 16px !important; }
  .hero-cta .btn {
    width: 100% !important;
    padding: 13px 20px !important;
    font-size: 1rem !important;
  }
  .scroll-indicator { display: none; }
}

/* ─── SECTIONS ──────────────────────────────────── */
@media (max-width: 768px) {
  .section { padding: 48px 0 !important; }
  .section-title { margin-bottom: 28px !important; }
  .container { padding: 0 16px !important; }
}

/* ─── MENU GRID (Homepage) ──────────────────────── */
@media (max-width: 768px) {
  .menu-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .card-img   { height: 180px !important; }
  .card-content { padding: 16px !important; }
}

/* ─── GALLERY ───────────────────────────────────── */
@media (max-width: 600px) {
  .masonry-grid { column-count: 2 !important; column-gap: 8px !important; }
  .gallery-item { margin-bottom: 8px !important; }
}
@media (max-width: 380px) {
  .masonry-grid { column-count: 1 !important; }
}

/* ─── REVIEWS ───────────────────────────────────── */
@media (max-width: 768px) {
  .review-cards { grid-template-columns: 1fr !important; gap: 16px !important; }
  .review-card  { padding: 20px !important; }
}

/* ─── ABOUT + CONTACT ───────────────────────────── */
@media (max-width: 768px) {
  .about-grid { grid-template-columns: 1fr !important; gap: 24px !important; text-align: center; }
  .container-flex { flex-direction: column !important; gap: 24px !important; }
  .contact-info, .map-container { min-width: unset !important; width: 100% !important; }
  .map-glow-border iframe { height: 200px !important; }
}

/* ─── FOOTER ────────────────────────────────────── */
@media (max-width: 768px) {
  footer { padding: 40px 0 90px !important; }
  .footer-logo { height: 56px !important; }
}

/* ─── MOBILE BOTTOM BAR ─────────────────────────── */
@media (max-width: 768px) {
  .mobile-bottom-bar { display: flex !important; }
  .bottom-btn { font-size: 0.88rem !important; padding: 12px 10px !important; }
  .floating-whatsapp { bottom: 76px !important; right: 14px !important; width: 48px !important; height: 48px !important; font-size: 1.5rem !important; }
}

/* ══════════════════════════════════════════════════
   CART DRAWER — BOTTOM SHEET ON MOBILE
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .cart-drawer {
    top: auto !important;
    bottom: -100% !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 82vh !important;
    border-radius: 20px 20px 0 0 !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,69,0,0.25) !important;
    transition: bottom 0.35s cubic-bezier(0.25,0.8,0.25,1) !important;
  }
  .cart-drawer.open {
    bottom: 0 !important;
    right: unset !important;
  }
  /* Drag handle for bottom sheet */
  .cart-drawer-header::before {
    content: '';
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
  }
  .cart-drawer-header { position: relative; padding-top: 22px !important; }
  .cart-items-list { -webkit-overflow-scrolling: touch; }
  .cart-footer { padding-bottom: 20px !important; }
  .cart-checkout-btn {
    padding: 15px !important;
    font-size: 1rem !important;
  }
}

/* ══════════════════════════════════════════════════
   CHECKOUT PAGE
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .checkout-page { padding-top: 90px !important; padding-bottom: 80px !important; }
  .checkout-container {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }
  .checkout-summary, .checkout-form-section {
    width: 100% !important;
    min-width: unset !important;
  }
  .checkout-card { padding: 18px !important; }
  .checkout-card h2 { font-size: 1.1rem !important; }
  .checkout-submit-btn {
    padding: 15px !important;
    font-size: 1rem !important;
    width: 100% !important;
  }
  .checkout-trust { justify-content: center; flex-wrap: wrap; gap: 8px !important; }
  .trust-chip { font-size: 0.75rem !important; padding: 6px 10px !important; }
  #co-name, #co-phone, #co-address {
    font-size: 16px !important; /* prevents iOS zoom */
    padding: 12px 14px !important;
  }
}

/* ══════════════════════════════════════════════════
   MENU PAGE
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .menu-page-hero { padding: 110px 16px 32px !important; }
  .menu-page-hero h1 { font-size: clamp(1.7rem, 6vw, 2.2rem) !important; }

  /* Sticky filter bar — scroll on mobile */
  .menu-filter-bar {
    top: 68px !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .menu-filter-bar::-webkit-scrollbar { display: none; }
  .filter-search {
    min-width: 140px !important;
    flex: 0 0 140px !important;
    font-size: 0.82rem !important;
    padding: 8px 10px !important;
  }
  .cat-pills { flex-wrap: nowrap !important; gap: 6px !important; }
  .cat-pill  { white-space: nowrap !important; padding: 6px 12px !important; font-size: 0.75rem !important; }
  .veg-toggle { white-space: nowrap !important; font-size: 0.75rem !important; }

  /* Menu cards — 2 column on tablet, 1 on small */
  .menu-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .menu-card-img { height: 120px !important; }
  .menu-card-no-img { height: 120px !important; font-size: 2.2rem !important; }
  .menu-card-body { padding: 9px 10px 11px !important; }
  .menu-card-name { font-size: 0.85rem !important; }
  .menu-card-price { font-size: 0.95rem !important; }
  .menu-card-add  { padding: 6px 10px !important; font-size: 0.72rem !important; }
  .qty-stepper button { width: 28px !important; height: 28px !important; }
  .menu-page-wrap { padding: 24px 12px 100px !important; }

  /* Item modal full-screen bottom sheet */
  .item-modal {
    max-height: 92vh !important;
    border-radius: 22px 22px 0 0 !important;
  }
}
@media (max-width: 380px) {
  .menu-cards-grid { grid-template-columns: 1fr !important; }
  .menu-card-img   { height: 160px !important; }
  .menu-card-no-img{ height: 160px !important; }
}

/* ══════════════════════════════════════════════════
   ADMIN PAGE — COMPLETE MOBILE OVERHAUL
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Hide desktop sidebar */
  .sidebar {
    transform: translateX(-100%) !important;
    transition: transform 0.25s ease !important;
    z-index: 200 !important;
  }
  .sidebar.open { transform: translateX(0) !important; }

  /* Main content full width */
  .main { margin-left: 0 !important; }

  /* Topbar compact */
  .topbar { padding: 10px 14px !important; }
  .topbar-title { font-size: 1.05rem !important; }
  .realtime-label { display: none; }
  .topbar-site-link {
    font-size: 0 !important;
    min-width: 36px;
    min-height: 36px;
    justify-content: center;
  }
  .topbar-site-link i { font-size: 1.05rem !important; }

  /* Stats grid — 2x2 on mobile */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }
  .stat-card { padding: 12px 14px !important; }
  .stat-card .stat-num  { font-size: 1.4rem !important; }
  .stat-card .stat-icon { font-size: 1.1rem !important; margin-bottom: 4px !important; }
  .stat-card .stat-label{ font-size: 0.7rem !important; }

  /* Tab panel padding */
  .tab-panel { padding: 14px !important; }

  /* Section header wrap */
  .section-hdr { gap: 8px !important; margin-bottom: 12px !important; }
  .section-hdr h2 { font-size: 0.95rem !important; }
  .hdr-btn { padding: 7px 10px !important; font-size: 0.75rem !important; }

  /* Filter bar — stack on mobile */
  .filter-bar {
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .filter-bar input,
  .filter-bar select { width: 100% !important; font-size: 16px !important; padding: 10px 12px !important; }

  /* Order cards more compact */
  .order-hdr { padding: 11px 12px !important; gap: 10px !important; }
  .order-avatar { width: 34px !important; height: 34px !important; font-size: 0.78rem !important; }
  .order-customer h4 { font-size: 0.85rem !important; }
  .order-customer p  { font-size: 0.72rem !important; }
  .order-body  { padding: 10px 12px !important; }
  .order-footer{ padding: 10px 12px !important; }
  .order-total { font-size: 1rem !important; }
  .order-actions-row { gap: 5px !important; flex-wrap: wrap !important; }
  .status-btn  { padding: 5px 9px !important; font-size: 0.68rem !important; }
  .whatsapp-btn{ padding: 5px 9px !important; font-size: 0.68rem !important; }
  .item-chip   { font-size: 0.72rem !important; padding: 3px 8px !important; }

  /* Menu management — form single column */
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .form-grid input,
  .form-grid select,
  .form-grid textarea { font-size: 16px !important; padding: 9px 12px !important; }
  .menu-form-card { padding: 14px !important; }

  /* Menu stats pills */
  .menu-stats-row { gap: 8px !important; }
  .menu-stat-pill { padding: 6px 10px !important; font-size: 0.74rem !important; }
  .menu-stat-pill strong { font-size: 0.88rem !important; }

  /* Menu table — horizontal scroll */
  .menu-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .menu-table { min-width: 600px !important; }
  .menu-table th, .menu-table td { padding: 9px 10px !important; font-size: 0.78rem !important; }
  .menu-img-thumb { width: 34px !important; height: 34px !important; }

  /* Analytics grid single col */
  .analytics-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .chart-card { padding: 14px !important; }

  /* Bookings grid single col */
  .bookings-grid { grid-template-columns: 1fr !important; }
  .booking-card { padding: 12px !important; }

  /* Settings cards */
  .settings-card { padding: 14px !important; }
  .setting-row { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .settings-input { width: 100% !important; font-size: 16px !important; }
  .save-settings-btn { width: 100% !important; padding: 12px !important; }

  /* Auth box */
  .auth-box { width: 90vw !important; padding: 28px 20px !important; }
  .auth-input { font-size: 16px !important; }
}

/* ─── VERY SMALL PHONES (≤380px) ────────────────── */
@media (max-width: 380px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-card .stat-num { font-size: 1.2rem !important; }
  .order-actions-row { gap: 4px !important; }
  .status-btn { padding: 4px 7px !important; font-size: 0.64rem !important; }
}

/* ─── PREVENT IOS ZOOM ON INPUT FOCUS ───────────── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ─── TOUCH TARGETS (min 44px) ──────────────────── */
@media (max-width: 768px) {
  .nav-item,
  .hdr-btn,
  .form-btn,
  .cat-pill,
  .veg-toggle,
  .tbl-btn,
  .bk-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .logout-btn { padding: 12px !important; }
}

/* ─── SMOOTH SCROLL + OVERSCROLL ────────────────── */
@media (max-width: 768px) {
  .main { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .orders-list { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ─── MODAL IMPROVEMENTS ────────────────────────── */
@media (max-width: 768px) {
  .glass-panel { padding: 28px 18px !important; width: 95% !important; }
  #bookingForm input { font-size: 16px !important; }
  .modal-overlay { align-items: flex-end !important; }
  .modal-overlay .glass-panel {
    border-radius: 20px 20px 0 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

/* ─── ADMIN NAV BOTTOM BAR (mobile only) ─────────── */
@media (max-width: 768px) {
  #admin-bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #161616;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex !important;
    z-index: 150;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #admin-bottom-nav .abn-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    background: none;
    border: none;
    color: #666;
    font-size: 0.6rem;
    gap: 3px;
    cursor: pointer;
    transition: color 0.15s;
  }
  #admin-bottom-nav .abn-btn i { font-size: 1.2rem; }
  #admin-bottom-nav .abn-btn.active { color: #ff4500; }
  /* Push main content above bottom nav */
  .main { padding-bottom: 70px !important; }
  /* Hide topbar menu button (we have bottom nav) */
  .mob-menu-btn { display: flex !important; }
}
@media (min-width: 769px) {
  #admin-bottom-nav { display: none !important; }
}

/* ─── STICKY ORDER BAR — above mobile bottom bar ── */
@media (max-width: 768px) {
  .sticky-order-bar { bottom: 62px !important; padding: 10px 14px !important; }
  .sticky-order-text { font-size: 0.82rem !important; }
  .sticky-order-btn  { padding: 9px 14px !important; font-size: 0.82rem !important; }
  .sticky-order-total{ font-size: 1rem !important; }
}

/* ─── CART NAV BTN in topbar ────────────────────── */
@media (max-width: 768px) {
  .cart-nav-btn { width: 38px !important; height: 38px !important; font-size: 1.1rem !important; }
  .nav-actions .cart-nav-btn { display: flex !important; }
}



/* ═══════════════════════════════════════════════════
   MOBILE NAV — Transparent when at top of page
   On desktop inner pages the header has inline bg,
   on mobile we want it fully transparent until scroll
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Remove the solid black background when NOT scrolled */
    .header:not(.scrolled) {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border-bottom: none !important;
    }

    /* Once scrolled → bring back the dark background */
    .header.scrolled {
        background: rgba(5, 5, 5, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-bottom: 1px solid rgba(255, 69, 0, 0.2) !important;
    }

    /* Nav links need to stay readable even on transparent bg */
    .header:not(.scrolled) .nav-link,
    .header:not(.scrolled) .btn {
        text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    }

    /* Logo also keep visible */
    .header:not(.scrolled) .logo-img {
        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
    }
}
/* ─── NAV SOCIAL ICONS — show on mobile (replaces phone btn) ── */
@media (max-width: 768px) {
  .nav-actions {
    display: none !important;
  }
  .nav-social-icons {
    display: none !important;
    align-items: center;
    gap: 4px;
  }
}
@media (max-width: 380px) {
  .nav-social-btn { width: 28px !important; height: 28px !important; font-size: 0.82rem !important; }
  .nav-social-icons { gap: 2px !important; }
}