/* ── Google Fonts ── */
/* Fonts are self-hosted — see public/assets/vendor/fonts/fonts.css, linked
   from frontend/head.blade.php. The Google Fonts @import that was here sent
   every shop visitor's IP to Google. */

/* ── CSS Variables ── */
:root {
  /* Height of the fixed header. Page banners slide under it by pulling
     themselves up exactly this far, and six views used to hardcode -80px —
     so every change to the bar silently misaligned all of them. */
  --header-h: 88px;
  --primary: #e8521a;
  --primary-dark: #c43e0e;
  --primary-light: #ff7043;
  --accent: #f7c948;
  --accent-dark: #e5b520;
  --bg-cream: #fdfaf6;
  --bg-warm: #f5efe6;
  --surface: #ffffff;
  --text-dark: #1a1208;
  --text-mid: #4a3728;
  --text-muted: #8b7355;
  --border: #e8ddd0;
  --shadow-warm: 0 4px 24px rgba(232, 82, 26, 0.12);
  --shadow-card: 0 2px 16px rgba(26, 18, 8, 0.08);
  --shadow-lg: 0 8px 40px rgba(26, 18, 8, 0.14);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-xl: 48px;
}

/* ── Base Styles ── */
html {
  scroll-behavior: smooth;
}

body {
  font-family: "DM Sans", sans-serif;
  background-color: var(--bg-cream);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-top: 80px; /* Space for fixed header */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ── Animations ── */
@keyframes floatUp {
  0% {
    opacity: 0;
    transform: translateY(32px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.85);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.3;
  }
  100% {
    transform: scale(0.85);
    opacity: 0.6;
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes cartBounce {
  0%,
  100% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.3);
  }
  60% {
    transform: scale(0.9);
  }
}

@keyframes toastSlide {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.95);
  }
  15% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  85% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-12px) scale(0.95);
  }
}

/* ── Scroll Reveal ── */
.reveal-up {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-48px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(48px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Header ── */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.3s ease;
  background: rgba(253, 250, 246, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* The bar is pinned to a fixed height so the logo can grow without moving the
   page banners, which pull themselves up under the fixed header by a hard
   -80px. Padding shrinks as the logo grows instead of the bar getting taller. */
.main-header .header-bar {
  min-height: var(--header-h);
  padding-top: 8px;
  padding-bottom: 8px;
  gap: 16px;
}

/* Tenant logo. A brand mark in the bar, not a hero image: bounded on BOTH
   axes so neither a tall square nor a long wordmark can take over the row.
   max-* rather than a fixed height means an image that is already small is
   never blown up, and object-fit:contain keeps the aspect ratio in every
   case. Uploads are unconstrained — Bamboo's is 568x575 — so an unbounded
   rule here is the difference between a logo and a billboard. */
/* 52px suited a horizontal wordmark and starved a circular one. Bamboo's mark
   is a round badge 568x575: at 52px tall the word inside it rendered about
   15px high and the ring of small type around the base disappeared, which is
   what read as faint rather than merely small. A round logo needs more box
   than a wordmark to carry the same weight, so the bar grew with it.

   The filter is contrast, not decoration: pale gold on a near-white blurred
   header sits at low contrast, and a hairline shadow separates the mark from
   the bar without touching the uploaded file. */
.main-header .brand-logo {
  max-height: 64px;
  max-width: 190px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: saturate(1.06) contrast(1.04) drop-shadow(0 1px 1px rgba(26, 18, 8, 0.18));
}

@media (max-width: 767.98px) {
  .main-header .header-bar {
    min-height: 72px;
  }
  .main-header .brand-logo {
    max-height: 52px;
    max-width: 140px;
  }
}

.main-header.scrolled {
  background: rgba(253, 250, 246, 0.96);
  box-shadow: 0 2px 24px rgba(26, 18, 8, 0.1);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}

.nav-link-custom {
  padding: 8px 16px;
  border-radius: 100px;
  text-decoration: none;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-mid);
  transition: all 0.2s;
}

.nav-link-custom:hover,
.nav-link-custom.active {
  color: var(--primary);
  background: rgba(232, 82, 26, 0.08);
}

.cart-btn-nav {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: var(--primary);
  color: white;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  border: 2px solid white;
}

.cart-btn-nav:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(232, 82, 26, 0.2);
}

.order-now-btn {
  background: var(--primary);
  color: #fff !important;
  border-radius: 100px;
  padding: 10px 22px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(232, 82, 26, 0.3);
}

.order-now-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

/* ── Hero ── */
.hero-section {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  /* Local. This was an Unsplash hotlink — the last third-party request the
     tenant shop made, and the one a grep of the Blade views missed because
     it lives in CSS. Relative to this stylesheet at /bootstrap-site-css/. */
  background-image: url("../assets/frontend/img/menu-page.jpg");
  background-size: cover;
  background-position: center;
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(26, 18, 8, 0.82) 0%,
    rgba(26, 18, 8, 0.5) 50%,
    rgba(232, 82, 26, 0.25) 100%
  );
}

/* A tenant that supplies its own hero photo.

   The default overlay is built for a bright stock image and dims it hard at
   82%. A tenant photo shot on a dark ground goes to mud under that, so the
   custom variant keeps the left dark — that is where the glass card sits and
   where the dimming earns its keep — and lifts quickly across to the right so
   the dish stays visible. Readability does not depend on this: the card is
   near-opaque and carries its own contrast. */
.hero-bg-custom {
  background-position: 68% 50%;
}

.hero-bg-custom::after {
  background: linear-gradient(
    100deg,
    rgba(26, 18, 8, 0.86) 0%,
    rgba(26, 18, 8, 0.62) 42%,
    rgba(26, 18, 8, 0.3) 72%,
    rgba(232, 82, 26, 0.18) 100%
  );
}

@media (max-width: 991.98px) {
  /* Single column: the card covers the width, so the photo reads as texture
     behind it and needs a flat, slightly stronger dim rather than a sweep. */
  .hero-bg-custom {
    background-position: 60% 50%;
  }
  .hero-bg-custom::after {
    background: linear-gradient(
      160deg,
      rgba(26, 18, 8, 0.8) 0%,
      rgba(26, 18, 8, 0.62) 100%
    );
  }
}

.hero-glass-card {
  background: rgba(253, 250, 246, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-xl);
  padding: 48px 40px;
  box-shadow: 0 24px 64px rgba(26, 18, 8, 0.2);
  animation: floatUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(232, 82, 26, 0.1);
  color: var(--primary);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* ── Marquee ── */
.marquee-container {
  background: var(--primary);
  padding: 14px 0;
  overflow: hidden;
}

.marquee-track {
  display: flex;
  gap: 48px;
  animation: marquee 28s linear infinite;
  width: max-content;
}

/* ── Category Cards ── */
.category-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: var(--shadow-card);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}

.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.category-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}
.category-card:hover img {
  transform: scale(1.08);
}

.category-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26, 18, 8, 0.8) 0%, transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: 20px;
}

/* A category with no photo on disk. The gradient overlay is transparent at the
   top, so without a solid fill behind it the tile reads as a failed image.
   A brand-tinted panel with the name centred is a finished-looking tile that
   claims nothing about what the dish looks like. */
.category-card-plain {
  background: linear-gradient(135deg, var(--primary) 0%, #C43E0E 100%);
}

.category-card-plain .category-card-overlay {
  background: none;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ── Food Cards (Menu) ── */
.food-card {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: all 0.3s;
}

.food-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.food-img-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.food-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.food-card:hover .food-img {
  transform: scale(1.08);
}

.veg-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  background: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dot.veg {
  background: #2e7d32;
  border: 2px solid #2e7d32;
}
.dot.non-veg {
  background: #c62828;
  border: 2px solid #c62828;
}

.qty-control {
  display: flex;
  align-items: center;
  background: var(--bg-warm);
  border-radius: 100px;
  border: 1.5px solid var(--border);
  overflow: hidden;
}

.qty-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-weight: 800;
  color: var(--text-mid);
  cursor: pointer;
}

.qty-btn:hover {
  background: var(--primary);
  color: #fff;
}

.qty-val {
  width: 30px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
}

/* ── Cart Drawer ── */
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 420px;
  max-width: 100vw;
  background: #fff;
  z-index: 1100;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

.cart-drawer.open {
  transform: translateX(0);
}

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 18, 8, 0.5);
  z-index: 1050;
  display: none;
  backdrop-filter: blur(4px);
}

.cart-overlay.open {
  display: block;
}

/* ── Success Toast ── */
.toast-custom {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-dark);
  color: #fff;
  padding: 12px 24px;
  border-radius: 100px;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  animation: toastSlide 3s forwards;
}

/* ── Footer ── */
footer {
  background: #1a1208;
  color: #fff;
  padding: 64px 0 20px;
}

/* Footer brand lockup: the tenant's logo (or the fallback glyph) beside the
   business name. Wraps rather than shrinking the name on narrow screens. */
.footer-brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Bounded on both axes like the header mark. A fixed height cropped tall
   logos against the panel padding and pushed the rest of the footer column
   out of line; max-* plus contain lets the image settle inside the box at
   whatever ratio it has. */
.footer-brand-logo {
  max-height: 46px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  /* The footer is near-black; most logos are drawn for a light header, so a
     panel keeps them legible without touching the uploaded file. */
  background: rgba(255, 255, 255, 0.94);
  border-radius: 10px;
  padding: 6px 10px;
}

.footer-brand-mark {
  display: inline-flex;
  align-items: center;
  color: var(--primary);
}

.footer-brand-name {
  line-height: 1.2;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  .footer-brand-logo {
    max-height: 38px;
    max-width: 116px;
  }
}

.social-link {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.social-link:hover {
  border-color: var(--primary);
  background: rgba(232, 82, 26, 0.15);
  color: var(--primary);
}

/* ── Helper ── */
.btn-primary-custom {
  background: var(--primary);
  border: none;
  border-radius: 100px;
  padding: 12px 30px;
  font-weight: 700;
  color: #fff;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(232, 82, 26, 0.3);
}

.btn-primary-custom:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  color: #fff;
}

.form-control-custom {
  background: var(--bg-warm);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
}

.form-control-custom:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.25rem rgba(232, 82, 26, 0.1);
  background: #fff;
}

/* ── Menu Specific Button Styles ── */
.size-btn {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text-dark);
  /* Fixed 32px to match the row reserved in .food-card-variants. */
  height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: none;
}

.size-btn:hover {
  background: var(--bg-warm);
  border-color: #d8c8b8;
}

.size-btn.active {
  background: transparent;
  border-color: var(--text-dark);
  color: var(--text-dark);
  font-weight: 700;
  box-shadow: none;
}

.qty-control {
  display: flex;
  align-items: center;
  background: var(--bg-warm);
  border-radius: 100px;
  border: none;
  overflow: hidden;
  height: 38px;
}

.qty-btn {
  width: 32px;
  height: 100%;
  border: none;
  background: transparent;
  font-weight: 700;
  color: var(--text-dark);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qty-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.qty-val {
  width: 30px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-dark);
}

.AddToCart {
  border-radius: 100px !important;
  background: #E8521A !important;
  border: none !important;
  font-weight: 600 !important;
}

/* ── Food card body ──
   Three reserved zones above a pinned foot. Heights are expressed in the
   line-height of each zone so they stay correct if the type scale moves. */
.food-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 20px;
  min-width: 0;
}

.food-card-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-dark);
  margin: 0 0 6px;
  /* Two lines, always — reserved whether the name needs them or not, so the
     rows below start at the same height in every card. A third line is
     clipped rather than allowed to shift the layout. */
  min-height: calc(2 * 1.35em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* A single unbroken word — a long article name with no spaces — would
     otherwise push the card wider than its column. */
  overflow-wrap: anywhere;
}

.food-card-desc {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-muted);
  opacity: 0.9;
  margin: 0 0 14px;
  min-height: calc(2 * 1.55em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Everything from the variants down sits against the bottom of the card. */
.food-card-foot {
  margin-top: auto;
}

.food-card-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  /* One row of chips is reserved so a single-variant card and a two-variant
     card still agree on where the price row starts. */
  min-height: 32px;
}

/* ── Food card action row ──
   Price on the left, quantity + CTA on the right. The controls carry a
   flex-basis rather than a fixed width: while they fit beside the price they
   stay on its row, and below that they wrap onto a full-width line of their
   own instead of overflowing. The previous markup used
   `d-flex justify-content-between` with no wrap, so on the three-up desktop
   grid the row needed more width than the card had and .food-card's
   overflow:hidden clipped the CTA. */
.food-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.food-card-price {
  flex: 0 0 auto;
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--primary);
  /* Prices are short and must never be split across lines; the controls wrap
     instead, which is what their flex-basis is for. */
  white-space: nowrap;
}

.food-card-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 1 1 190px;
  min-width: 0;
}

.food-card-actions .qty-control {
  flex: 0 0 auto;
}

/* Matches .qty-control's 38px so the two controls align on their centres, and
   takes the remaining width so the CTA is the element that flexes — but
   bounded at both ends. Unbounded it grew to fill a wide card and dwarfed the
   94px stepper beside it; below min-width the label started to crowd its own
   padding. Between the two it stays in proportion at every column count. */
.food-card-actions .AddToCart {
  flex: 1 1 auto;
  min-width: 132px;
  max-width: 190px;
  height: 38px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  line-height: 1;
  white-space: nowrap;
}

/* Single column. The controls take their own full-width line under the price
   and spread to the card edges, so the stepper and the CTA sit at opposite
   ends rather than huddling on the right with dead space beside them. */
@media (max-width: 575.98px) {
  .food-card-controls {
    flex: 1 1 100%;
    justify-content: space-between;
  }
  .food-card-actions .AddToCart {
    max-width: none;
  }
}