/* ============================================================
   MPM FOODS — Responsive Stylesheet
   responsive.css
   Mobile-first: base styles in style.css, enhancements here
   ============================================================ */

/* ================================================================
   MOBILE BASE (≤ 767px) — Mobile-first defaults
   ================================================================ */

/* Hide desktop header on mobile */
.desktop-header { display: none !important; }
.mobile-header  { display: block; }

/* Show bottom nav on mobile */
.mpm-bottom-nav { display: flex; }

/* Hide footer on mobile (too cluttered) */
.mpm-footer { display: none; }

/* Section heading size */
.section-heading { font-size: 17px; }

/* Content padding — mobile */
.mpm-container { padding: 0 16px; }
.page-content   { padding-top: 20px; padding-bottom: 28px; }

/* Restaurant hero smaller */
.restaurant-hero { height: 200px; }

/* ================================================================
   RESTAURANT GRID — 2 cards per row on phones (was 1/row before)
   Card copy needs to shrink to fit the narrower column comfortably.
   ================================================================ */
@media (max-width: 575.98px) {
  .rest-card-body { padding: 10px 11px 12px; }
  .rest-card-name { font-size: 13.5px; }
  .rest-card-cuisine { font-size: 11px; margin-bottom: 6px; }
  .rest-card-meta { font-size: 10.5px; gap: 4px; flex-wrap: wrap; }
  .rest-card-rating { font-size: 10.5px; padding: 2px 6px; gap: 3px; }
  .rest-card-time, .rest-card-distance { font-size: 10px; padding: 4px 8px; }
  .rc-fav-btn { width: 28px; height: 28px; font-size: 13px; top: 8px; right: 8px; }
  .rest-card-tag { font-size: 9px; padding: 3px 7px; top: 8px; left: 8px; }

  /* Legacy card body classes (used on the Favorites grid) */
  .rc-body { padding: 10px 11px 12px; }
  .rc-name { font-size: 13.5px; }
  .rc-cats { font-size: 11px; margin-bottom: 6px; }
  .rc-meta { font-size: 10.5px; gap: 6px; }
  .rc-rating { font-size: 10.5px; padding: 2px 6px; }
}

/* Food item image smaller on very small screens */
@media (max-width: 360px) {
  .fic-image { width: 80px; height: 64px; }
  .rc-body { padding: 10px 12px; }
  .rc-name { font-size: 14.5px; }
}

/* Food item card compact */
.food-item-card { padding: 14px 0; }

/* Menu category nav top offset for mobile header */
.menu-cat-nav { top: var(--header-h-mobile); }

/* Cart bar above bottom nav */
.sticky-cart-bar { bottom: var(--bottom-nav-h); }

/* Order card */
.order-card { padding: 14px; }

/* Profile avatar */
.profile-avatar-wrap { padding: 20px; }
.profile-avatar { width: 72px; height: 72px; }

/* ================================================================
   TABLET (768px – 1023px)
   ================================================================ */
@media (min-width: 768px) {
  /* Hide footer on mobile only; shown from tablet up regardless of header layout */
  .mpm-footer { display: block; }

  /* Adjust body padding */
  body.has-bottom-nav { padding-bottom: 0; }
  body.has-sticky-cart { padding-bottom: 0; }

  /* Sticky cart bar — tablet full bar positioned at bottom of screen */
  .sticky-cart-bar {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 480px;
    right: auto;
  }

  /* Restaurant hero */
  .restaurant-hero { height: 280px; }

  /* Restaurant card grid — 2 cols on tablet */
  .restaurants-grid .restaurant-card { /* handled by Bootstrap col-* */ }

  /* Page content padding */
  .page-content { padding-top: 32px; padding-bottom: 60px; }
  .mpm-container { padding: 0 24px; }

  /* Category chips — show more */
  .category-chip { min-width: 90px; }
}

/* ================================================================
   APP SHELL BREAKPOINT — sidebar + top bar take over from the
   mobile header + bottom nav at the same point (992px, Bootstrap's
   "lg") that the sidebar itself appears via d-lg-flex/d-lg-none.
   ================================================================ */
@media (min-width: 992px) {
  .mpm-bottom-nav { display: none !important; }
  .sticky-cart-bar { position: sticky; }
  .menu-cat-nav { top: var(--header-h-desktop); }
}
@media (max-width: 991.98px) {
  .app-sidebar, .app-topbar { display: none !important; }
}

/* ================================================================
   LAPTOP (1024px – 1279px)
   ================================================================ */
@media (min-width: 1024px) {
  .restaurant-hero { height: 320px; }
  .section-heading { font-size: 22px; }

  /* Food item card bigger image */
  .fic-image { width: 120px; height: 96px; }

  /* 3 col restaurant grid */
  .col-lg-4 { flex: 0 0 auto; width: 33.333%; }
}

/* ================================================================
   DESKTOP (1280px – 1439px)
   ================================================================ */
@media (min-width: 1280px) {
  .restaurant-hero { height: 360px; }
  .section-heading { font-size: 24px; }

  /* Sticky cart bar repositioned for desktop */
  .sticky-cart-bar {
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 420px;
    right: auto;
  }

  /* 4 col restaurant grid */
  .col-xl-3 { flex: 0 0 auto; width: 25%; }
}

/* ================================================================
   LARGE DESKTOP (1440px+)
   ================================================================ */
@media (min-width: 1440px) {
  .mpm-container { padding: 0 48px; }
  .restaurant-hero { height: 400px; }
  .header-inner { padding: 0 48px !important; }
}

/* ================================================================
   EXTRA LARGE (1920px+)
   ================================================================ */
@media (min-width: 1920px) {
  .mpm-container { max-width: 1600px; }
}

/* ================================================================
   DESKTOP RESTAURANT PAGE — SIDEBAR LAYOUT
   ================================================================ */
@media (min-width: 992px) {
  .restaurant-page-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 0;
    align-items: start;
  }
  .menu-sidebar {
    position: sticky;
    top: calc(var(--header-h-desktop) + 8px);
    max-height: calc(100vh - var(--header-h-desktop) - 16px);
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 16px 0;
    display: block !important;
  }
  .menu-sidebar-link {
    display: block;
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--mpm-muted);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all var(--mpm-transition);
    font-family: var(--font-body);
  }
  .menu-sidebar-link:hover { color: var(--mpm-primary); background: var(--mpm-primary-light); }
  .menu-sidebar-link.active {
    color: var(--mpm-primary);
    border-left-color: var(--mpm-primary);
    background: var(--mpm-primary-light);
    font-weight: 700;
  }
  .menu-cat-nav { display: none; } /* use sidebar instead */
  .menu-content { padding: 16px 24px; }
}

@media (max-width: 991px) {
  .menu-sidebar { display: none; }
  .menu-content { padding: 0; }
}

/* ================================================================
   CHECKOUT — SIDEBAR ORDER SUMMARY (desktop)
   ================================================================ */
@media (min-width: 992px) {
  .checkout-order-summary-mobile { display: none !important; }
  .checkout-order-summary-desktop { display: block !important; }
}
@media (max-width: 991px) {
  .checkout-order-summary-mobile { display: block; }
  .checkout-order-summary-desktop { display: none !important; }
}

/* ================================================================
   PAYMENT — SUMMARY SIDEBAR (desktop)
   ================================================================ */
@media (min-width: 992px) {
  .payment-summary-sidebar { display: block !important; }
}

/* ================================================================
   FOOTER — responsive columns
   ================================================================ */
@media (min-width: 768px) {
  .mpm-footer { display: block; }
}

/* ================================================================
   SEARCH PAGE
   ================================================================ */
@media (min-width: 768px) {
  .search-results-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    align-items: start;
  }
  .search-filters-sidebar {
    position: sticky;
    top: calc(var(--header-h-desktop) + 20px);
  }
}
@media (max-width: 767px) {
  .search-filters-sidebar { display: none; }
}

/* ================================================================
   PROFILE — desktop wider form
   ================================================================ */
@media (min-width: 768px) {
  .profile-form-wrap { max-width: 540px; }
  .profile-avatar-wrap { flex-direction: row; text-align: left; }
}
@media (max-width: 767.98px) {
  .profile-avatar-wrap .btn-mpm-outline {
    margin: 0 auto;
  }
}

/* ================================================================
   FAVORITES — tab header desktop
   ================================================================ */
@media (min-width: 768px) {
  .mpm-tabs { margin-bottom: 28px; }
}

/* ================================================================
   NOTIFICATIONS — max-width centering on desktop
   ================================================================ */
@media (min-width: 992px) {
  .notifications-wrap { max-width: 700px; }
  .orders-wrap { max-width: 760px; }
  .profile-wrap { max-width: 680px; margin: 0 auto; }
  .offers-wrap { max-width: 720px; margin: 0 auto; }
  .addresses-wrap { max-width: 700px; margin: 0 auto; }
}

/* ================================================================
   ORDER SUCCESS + TRACKING — centered on desktop
   ================================================================ */
@media (min-width: 768px) {
  .order-success-wrap { max-width: 520px; margin: 0 auto; text-align: center; }
  .order-tracking-wrap { max-width: 640px; margin: 0 auto; }
}

/* ================================================================
   TOUCH TARGETS — minimum 44px for all interactive elements
   ================================================================ */
.btn-add,
.qty-btn,
.bottom-nav-item,
.nav-action-btn,
.filter-pill,
.category-chip,
.rc-fav-btn,
.btn-mpm-primary,
.btn-mpm-outline {
  min-height: 44px;
}
.category-chip { min-height: auto; } /* column layout handles it */
.qty-btn { min-height: 32px; } /* stepper exception */

/* ================================================================
   HOME PAGE — hero pills row (Top Rated / Great Offers / etc.)
   Wrap instead of horizontal-scroll on small screens, and shrink
   so all four fit comfortably without spilling off the viewport.
   ================================================================ */
@media (max-width: 767.98px) {
  .hero-pills {
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
  .hero-pills .badge {
    font-size: 0.72rem !important;
    padding: 5px 10px !important;
  }
}