/* ============================================================
   The Sneaky Turtle — brand overrides & menu-page styles
   Loaded after style.css so these rules win.
   ============================================================ */

:root {
  --brand-olive: #64752b;      /* saturated house olive */
  --brand-olive-dark: #394515;
  --brand-charcoal: #171c18;   /* rich near-black panel colour */
  --brand-orange: #b87924;     /* warm antique-gold accent */
  --brand-cream: #f7f1e5;
  --brand-gold-light: #e4bd72;
  --brand-paper: #fffdf8;
  --brand-ink: #20251f;
  --primary-color: #64752b;
  --background-color: #f7f1e5;
  --text-color: #2d332d;
  --heading-color: #171c18;
  --border-color: #ddd2bc;
}

/* ---------- quick-jump nav on the menu page ---------- */
.menu-jumpnav {
  z-index: 20;
  background: linear-gradient(180deg, #fffaf1 0%, var(--brand-cream) 100%);
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(57, 69, 21, 0.14);
  box-shadow: 0 8px 24px rgba(23, 28, 24, 0.08);
}

/* Pinned only from lg up. It never pinned anywhere before - body and main
   were overflow-x: hidden, which made them scroll containers and left a
   sticky child sticking to them instead of the viewport - and the fix for
   that is in style.css. Restoring it on phones is not worth having: the
   pills wrap to five rows there, 252px of a 757px screen, so a third of the
   menu would be permanently covered by the way to reach it. On a wide screen
   the same bar is two rows and stays out of the way.
   `top` clears the fixed header rather than sliding underneath it. */
@media (min-width: 992px) {
  .menu-jumpnav {
    position: sticky;
    top: 86px;
  }
}

.menu-jump {
  display: inline-block;
  padding: 0.45rem 1.1rem;
  border: 1.5px solid var(--brand-olive-dark);
  border-radius: 999px;
  color: var(--brand-olive-dark);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.menu-jump:hover,
.menu-jump:focus {
  background: linear-gradient(135deg, var(--brand-olive-dark), var(--brand-olive));
  border-color: var(--brand-olive-dark);
  color: #fffdf8;
  box-shadow: 0 8px 18px rgba(57, 69, 21, 0.22);
  transform: translateY(-1px);
}

/* ---------- menu sections ---------- */
.our-menu[id] {
  scroll-margin-top: 5rem; /* clears the fixed header when jumping */
}

/* Where the jump-nav pins, a heading has to clear the header and the bar
   both, or the section you asked for lands underneath the thing you asked
   with. 86px of header plus a two-row bar. */
@media (min-width: 992px) {
  .our-menu[id] {
    scroll-margin-top: 15rem;
  }
}

.bg-light-section {
  background: linear-gradient(135deg, #fbf7ee 0%, #f2eadb 100%);
}

.menu-section-icon {
  color: var(--brand-olive-dark);
  font-size: 0.8em;
  vertical-align: middle;
}

.menu-note {
  color: var(--brand-olive);
  font-weight: 600;
  font-size: 0.95rem;
}

.item-extra {
  color: var(--brand-orange);
  font-weight: 700;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

/* keep long item rows readable and give each a subtle divider */
.our-menu .item-wrapper {
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px dashed rgba(57, 69, 21, 0.24);
  height: 100%;
}

.our-menu .item-left h5 {
  margin-bottom: 0.3rem;
  color: var(--brand-ink);
  font-weight: 800;
}

.our-menu .item-left p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: #555c53;
}

.our-menu .item-right {
  flex: 0 0 auto;
}

.our-menu .item-price {
  color: var(--brand-olive-dark);
  font-weight: 800;
  white-space: nowrap;
}

/* ---------- allergen notice ---------- */
.allergen-notice {
  background: var(--brand-charcoal);
  color: rgba(255, 255, 255, 0.75);
}

.allergen-notice p {
  max-width: 60rem;
  margin-inline: auto;
  line-height: 1.6;
}

/* ---------- opening hours table (contact / footer) ---------- */
.hours-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.25);
}

.hours-row.closed {
  opacity: 0.65;
}

.hours-row .day {
  font-weight: 700;
}

@media (max-width: 575px) {
  .menu-jump {
    font-size: 0.75rem;
    padding: 0.35rem 0.8rem;
  }
}

/* ---------- hero service strip (dine-in / takeaway / delivery / bar) ---------- */
/* each item is its own flex child and never breaks internally, so an icon can
   never be orphaned from its label the way inline margins allowed */
.hero-services {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  /* sits on the dark hero image, so labels are white; olive would not pass contrast */
  color: #fff;
}

.hero-services li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.hero-services i {
  color: var(--brand-orange);
}

/* the display-2 headline wraps to five lines in a half-width column at tablet
   sizes; scale it with the viewport instead */
.banner-content h1.display-2 {
  font-size: clamp(2.4rem, 6.2vw, 4.5rem);
  line-height: 1.08;
}

@media (max-width: 991px) {
  .banner-content { padding-right: calc(var(--bs-gutter-x) * 0.5) !important; }
}

/* ---------- turtle mark: loader + inline use ---------- */
.loader .logo-mark.loader-icone {
  width: 3.2rem;
  height: 4.2rem;
  margin: 0 auto 0.75rem;
  display: block;
  color: var(--brand-orange);
}

.logo-mark-inline {
  width: 1.6rem;
  height: 2.1rem;
  vertical-align: -0.45rem;
}

/* footer sits on a dark panel, so the mark inherits white there */
footer .logo-mark, .footer .logo-mark { color: #fff; }

/* form submit buttons — match .book-a-table anchor styling */
.book-a-table button[type="submit"] {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  font-size: 1rem;
  font-family: "Nunito", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  padding: 14px 24px;
  color: white;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  z-index: 1;
}

.book-a-table:hover button[type="submit"] {
  color: #141214;
}

/* ---------- loader ---------- */
/* the fade-out is driven from script.js; without a transition it would snap */
.loader {
  transition: opacity 0.3s ease;
}

/* respect users who ask for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .loader { transition: none; }
  [data-aos] { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ============================================================
   Mobile corrections
   ============================================================ */

@media (max-width: 991.98px) {
  /* The hero image spins continuously. A rotating square's bounding box is up
     to 1.41x its layout box, so at phone widths it pushed ~50px past the
     screen edge and got clipped. Hold it still and centre it on small screens
     (also spares the battery). */
  .banner img {
    animation: none;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }

  /* The story timeline scales the active thumbnail to 1.1, which overflowed
     the viewport with only two slides visible. */
  .about-page .about-story .story-timeline .story-indicators .image-box.slick-current {
    transform: none;
  }
}

/* ---------- home page dish cards ---------- */
/* Replaces the fade carousel: static cards can't stack, so nothing overlaps. */
.section-lede {
  max-width: 44rem;
  color: #6b6b6b;
}

.dish-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dish-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
}

.dish-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  max-height: 190px;
  overflow: hidden;
}

.dish-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dish-card-tag {
  position: absolute;
  left: 0.7rem;
  bottom: 0.7rem;
  background: var(--brand-orange);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

.dish-card-body {
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;
}

.dish-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.dish-card-head h3 {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--heading-color);
}

.dish-card-price {
  color: var(--brand-orange);
  font-weight: 800;
  font-size: 1.05rem;
  white-space: nowrap;
}

.dish-card-body p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #5c5c5c;
}

@media (prefers-reduced-motion: reduce) {
  .dish-card, .dish-card:hover { transition: none; transform: none; }
}

/* ---------- gallery: show food actually on the menu ---------- */
/* The template's tiles were bao buns, lobster and salmon - none of which the
   kitchen serves. Point them at the dish photography instead. */
.gallery-image-one   { background-image: url("../images/dish-favorites.jpg?v=b79bb8f2"); }
.gallery-image-two   { background-image: url("../images/dish-wings.jpg?v=bd68f0d3"); }
.gallery-image-three { background-image: url("../images/dish-starters.jpg?v=db9304e8"); }
.gallery-image-five  { background-image: url("../images/dish-cocktails.jpg?v=18662001"); }
.gallery-image-six   { background-image: url("../images/dish-handhelds.jpg?v=373029bc"); }
.gallery-image-four  { background-image: url("../images/gallery-patio.jpg?v=a4f06b9e"); }

/* None of the tiles set a background-size, so every photo was drawn at its
   natural pixel size and the tile just showed whatever landed in the middle -
   a 1200px-wide plate inside a 470px tile reads as an extreme close-up of a
   bun. Scale each photo to its tile instead, so you see the whole dish. */
.gallery-image,
.gallery-image-two,
.gallery-image-three,
.gallery-image-five,
.gallery-image-six {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* Stacked single-column, the full-height tiles would be a 650px tower. */
@media (max-width: 767px) {
  .gallery-image { height: 300px; }
  .gallery-image-two,
  .gallery-image-three,
  .gallery-image-five,
  .gallery-image-six { height: 200px; }
}

/* ---------- back to top ---------- */
/* The original was always on screen. Now it fades in once you've scrolled,
   and the scroll state is driven by React. */
#back-to-top {
  border: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

#back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  #back-to-top { transition: none; }
}

/* ---------- real photography: make the backdrops behave like photos ---------- */
/* .reservation-bg declares background-size before a `background:` shorthand
   that resets it, so the image fell back to its natural size. A seamless
   texture survives that; a photograph of the dining room does not. */
.reservation-bg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* `background-attachment: fixed` sizes the image to the viewport rather than
   to its own box, so a 500px-tall page banner showed a wildly zoomed sliver of
   the photo. Scrolling backgrounds crop predictably - and fixed ones are
   ignored by iOS Safari anyway. */
.page-banner,
.about-us,
.about-page .testimonials {
  background-attachment: scroll;
  background-position: center;
}

/* Every inner page rendered `.page-banner`, so they all fell back to the
   contact photo - the template's `.reservation-page .banner` rule pointed at a
   class the markup never uses. Give each page its own room. */
.about-page .page-banner {
  background-image: url("../images/pagetitle-about.jpg?v=ea7066c4");
}

.reservation-page .page-banner {
  background-image: url("../images/pagetitle-reservation.jpg?v=e888dace");
}

/* ---------- venue gallery: slideshow of the restaurant ---------- */
/* The room is full of things worth pointing at - the signs, the framed
   prints, the house tap handle - so the stage shows a photo whole and the
   caption names what you are looking at. */
.venue-gallery {
  max-width: 1100px;
  margin-inline: auto;
}

.venue-stage {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 14px;
  overflow: hidden;
  background-color: #0d0d0d;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.venue-stage:focus-visible {
  outline: 3px solid var(--brand-orange, #f4610f);
  outline-offset: 3px;
}

.venue-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s;
}

.venue-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.venue-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.venue-slide figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 3.5rem 1.5rem 1.25rem;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 12%, rgba(0, 0, 0, 0));
}

.venue-slide figcaption strong {
  display: block;
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1.3;
  margin-bottom: 0.15rem;
}

.venue-slide figcaption span {
  display: block;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  max-width: 46ch;
}

.venue-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  transition: background-color 0.25s ease;
}

.venue-nav:hover,
.venue-nav:focus-visible {
  background-color: var(--brand-orange, #f4610f);
}

.venue-prev { left: 12px; }
.venue-next { right: 12px; }

.venue-count {
  position: absolute;
  top: 12px;
  right: 14px;
  margin: 0;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.45);
}

.venue-thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 0.25rem;
}

.venue-thumb {
  flex: 0 0 auto;
  width: 96px;
  aspect-ratio: 3 / 2;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: none;
  opacity: 0.55;
  transition: opacity 0.25s ease, border-color 0.25s ease;
}

.venue-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.venue-thumb:hover,
.venue-thumb:focus-visible { opacity: 0.85; }

.venue-thumb.is-active {
  opacity: 1;
  border-color: var(--brand-orange, #f4610f);
}

@media (max-width: 575px) {
  .venue-slide figcaption { padding: 2.5rem 1rem 1rem; }
  .venue-slide figcaption span { font-size: 0.82rem; }
  .venue-thumb { width: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .venue-slide { transition: none; }
  .venue-nav { transition: none; }
}

/* ---------- "Our Story" collage ---------- */
/* Was four stock food shots at four different aspect ratios, stacked with an
   offset - so they never lined up. Real photographs of the room, all cropped
   to the same 3:2, sitting on an even grid. */
.about-images img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

/* ---------- home collage ---------- */
/* The building at dusk, the dining room, the tap wall and the patio. They
   were not shot in the same shape, and the template's square tiles cropped
   that away - the tap wall is an upright photograph and lost its top and
   bottom to fit. So the grid is built around the shapes instead: two
   landscape frames stack in the wide column, the upright one leads the
   narrow column.
   1.76 is not arbitrary. A 3:2 above a 16:9 is 1.229 column-widths tall; a
   2:3 above a 3:2 is 2.167. Giving the wide column 1.76x the growth makes
   the two columns finish level, so the collage squares off against the
   copy beside it instead of trailing off. */
.about-collage {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.about-collage-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.about-collage-col--wide { flex: 1.76 1 0; }
.about-collage-col--narrow { flex: 1 1 0; }

.about-collage-col--wide img:first-child { aspect-ratio: 3 / 2; }
.about-collage-col--wide img:last-child { aspect-ratio: 16 / 9; }
.about-collage-col--narrow img:first-child { aspect-ratio: 2 / 3; }
.about-collage-col--narrow img:last-child { aspect-ratio: 3 / 2; }

/* ---------- hero mark ---------- */
/* The hero carried a stock photograph of a grill platter - someone else's
   food, slowly rotating, sitting on top of a photograph of our own building.
   The turtle goes there instead.
   Its colour is taken from the scene rather than picked: the right-hand side
   of banner.jpg runs warm and dark (hue ~12deg, ~28% light), so a neutral
   white mark read as pasted on. This ivory sits in the same warm family as
   the brick and the string lights while holding ~7.8:1 contrast against the
   background, and the amber glow ties it to the lit sign beside it. */
.hero-mark {
  --mark-w: clamp(190px, 26vw, 330px);
  width: var(--mark-w);
  height: calc(var(--mark-w) * 1024 / 758);
  align-self: center;
  color: #f5e7d2;
  filter:
    drop-shadow(0 0 30px rgba(240, 201, 138, 0.38))
    drop-shadow(0 12px 26px rgba(0, 0, 0, 0.45));
}

@media (max-width: 767px) {
  .hero-mark { --mark-w: clamp(150px, 42vw, 230px); }
}

/* ---------- mobile navigation drawer ---------- */
/* The drawer used to be a plain white panel, which read as a stray sheet of
   paper laid over the photographs rather than part of the site. It is smoked
   charcoal glass now: the page stays faintly visible through it, so opening
   the menu feels like the page dimming rather than a new screen arriving.
   The slide itself lives with #mobile-menu in style.css. */

#mobile-scrim {
  position: fixed;
  inset: 0;
  z-index: 8;
  background: rgba(35, 38, 31, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out;
}

#mobile-scrim.is-open {
  opacity: 1;
  /* Only catches taps once it is up, so a closed drawer never blocks the page.
     A tap here lands outside the drawer, which is what closes it. */
  pointer-events: auto;
}

#mobile-menu {
  z-index: 9;
  background: linear-gradient(
    160deg,
    rgba(35, 38, 31, 0.86),
    rgba(35, 38, 31, 0.95)
  );
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-right: 1px solid rgba(246, 244, 238, 0.14);
  box-shadow: 12px 0 48px rgba(0, 0, 0, 0.45);
}

/* Without backdrop-filter the translucency has nothing to blur and the text
   would sit over whatever photograph is behind it, so go opaque instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #mobile-menu {
    background: var(--brand-charcoal);
  }
}

#mobile-menu .mobile-nav-link {
  display: block;
  color: var(--brand-cream);
  font-family: "Heebo", sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: color 0.25s ease, transform 0.25s ease;
}

#mobile-menu .mobile-nav-link:hover,
#mobile-menu .mobile-nav-link:focus-visible {
  color: var(--brand-orange);
  transform: translateX(6px);
}

/* A hairline between the links, matching the drawer's own edge. */
#mobile-menu .menus > ul > li + li {
  border-top: 1px solid rgba(246, 244, 238, 0.09);
}

/* The close button is the template's fa-plus turned 45deg. On white it was
   a dark cross on a white chip; on the glass it needs to be cream and flat. */
#mobile-menu #hamburger-cross {
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}

#mobile-menu #hamburger-cross i {
  color: var(--brand-cream);
  transition: color 0.25s ease;
}

#mobile-menu #hamburger-cross:hover i {
  color: var(--brand-orange);
}

/* The drawer and its scrim live inside <header>, and header carries
   z-index: 9 - which makes it a stacking context, so nothing inside it can
   ever paint above a sibling with a higher z-index however large a number we
   give it. The menu page's sticky .menu-jumpnav is z-index: 20, so it cut
   straight across the open drawer.
   Raising the header only while the drawer is open lifts the whole context
   above the jumpnav for exactly as long as it needs to be there, and leaves
   the normal page layering - where the jumpnav is meant to sit over the
   header as you scroll the menu - untouched. */
header.menu-open {
  z-index: 30;
}

/* ---------- home: weekly events, as photo cards ---------- */
/* These reused the "services .cards" markup, but that class is only styled
   scoped under .services - here it rendered with no background, shadow or
   hover state at all, just an icon and two lines of text floating on white.
   A dedicated card with a real photo behind each night fixes both. */
.event-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.event-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
}

.event-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.event-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.event-card:hover .event-card-media img {
  transform: scale(1.06);
}

.event-card-tag {
  position: absolute;
  left: 0.7rem;
  bottom: 0.7rem;
  background: var(--brand-olive);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

.event-card-body {
  padding: 1.1rem 1.25rem 1.3rem;
  flex: 1 1 auto;
}

.event-card-body h5 {
  font-weight: 800;
  color: var(--heading-color);
}

.event-card-body p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: #5c5c5c;
}

@media (prefers-reduced-motion: reduce) {
  .event-card,
  .event-card:hover,
  .event-card-media img,
  .event-card:hover .event-card-media img {
    transition: none;
    transform: none;
  }
}

/* A faint wash behind the section keeps it from butting straight into the
   white gallery section above and the white "What We Focus On" below. */
.weekly-events {
  background: var(--brand-cream);
}

/* ---------- home: "what we focus on" feature boxes ---------- */
/* Same underlying issue as the events cards - .service-box carried no CSS
   anywhere in the template, so it rendered as a bare icon and two lines of
   text with no card around them at all. */
.our-services .service-box {
  height: 100%;
  padding: 2.75rem 1.5rem;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.our-services .service-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.our-services .service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--brand-cream);
}

.our-services .service-icon i {
  color: var(--brand-olive);
}

.our-services .service-box h4 {
  margin-bottom: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .our-services .service-box,
  .our-services .service-box:hover {
    transition: none;
    transform: none;
  }
}

/* ---------- our mission, as a card ---------- */
/* .our-mission carried no CSS at all (used on both / and /about) - the
   copy just floated centred on white. Give it a real panel: a cream card,
   a soft shadow, and a quote badge to mark it as a pull-quote rather than
   another paragraph of body text. */
.our-mission .mission-card {
  position: relative;
  padding: 3.5rem 2.5rem 2.75rem;
  background: var(--brand-cream);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.our-mission .mission-quote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.5rem;
  border-radius: 50%;
  background: #fff;
  color: var(--brand-olive);
  font-size: 1.2rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* ---------- online ordering ---------- */
.online-order-section {
  color: var(--brand-ink);
  background:
    radial-gradient(circle at 8% 8%, rgba(228, 189, 114, .22), transparent 26rem),
    linear-gradient(145deg, #fffaf0 0%, #f1e8d7 100%);
}
.online-order-section .section-kicker {
  color: var(--brand-orange);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.online-order-section h2 { color: var(--brand-charcoal); }
.online-order-section > .container > .text-center > p:last-child { color: #596057; }
.online-order-status { display: flex; align-items: center; gap: .85rem; max-width: 660px; margin: 0 auto 1.5rem; padding: .9rem 1.1rem; border: 1px solid; border-radius: 14px; }
.online-order-status > i { font-size: 1.25rem; }
.online-order-status strong, .online-order-status span { display: block; }
.online-order-status strong { font-weight: 850; }
.online-order-status span { margin-top: .1rem; font-size: .86rem; }
.online-order-status.is-open { color: #294f2d; border-color: #b9d6b9; background: #edf7ed; }
.online-order-status.is-closed { color: #78431c; border-color: #e3c29e; background: #fff4e7; }
.order-category-tabs button,
.order-item-card button,
.order-checkout-button {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-olive-dark), var(--brand-olive));
  color: #fffdf8;
  font-weight: 800;
  padding: .65rem 1.1rem;
  box-shadow: 0 7px 16px rgba(57, 69, 21, .2);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.order-category-tabs button {
  background: rgba(255, 253, 248, .9);
  color: var(--brand-olive-dark);
  border: 1px solid rgba(57, 69, 21, .3);
  box-shadow: 0 4px 12px rgba(23, 28, 24, .06);
}
.order-category-tabs button.active,
.order-category-tabs button:hover,
.order-item-card button:hover,
.order-checkout-button:hover {
  background: linear-gradient(135deg, #2b3510, #52631f);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(57, 69, 21, .28);
}
.order-item-card button:disabled, .order-checkout-button:disabled { cursor: not-allowed; color: #777; background: #ddd9d0; box-shadow: none; transform: none; }
.order-category h3 {
  color: var(--brand-charcoal);
  border-bottom: 2px solid rgba(184, 121, 36, .42);
  padding-bottom: .6rem;
}
.order-item-card,
.order-cart-card {
  background: rgba(255, 253, 248, .96);
  border: 1px solid rgba(184, 121, 36, .16);
  border-radius: 20px;
  padding: 1.35rem;
  box-shadow: 0 18px 42px rgba(34, 38, 26, .13);
}
.order-item-card { display: flex; flex-direction: column; justify-content: space-between; padding: 0; overflow: hidden; }
.order-item-photo { width: 100%; height: 190px; object-fit: cover; background: #ece8dd; }
.order-item-content { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: space-between; padding: 1.35rem; }
.order-item-card h4 { color: var(--brand-charcoal); font-size: 1.08rem; margin-bottom: .35rem; font-weight: 850; }
.order-item-card p { color: #5c625a; font-size: .92rem; margin: 0; }
.order-item-card strong, .order-total strong { color: var(--brand-orange); font-size: 1.15rem; }
.order-cart-card h3 { color: var(--brand-charcoal); font-weight: 850; }
.order-cart-card { top: 6rem; }
.order-cart-fab {
  position: fixed;
  right: 1.5rem;
  top: 7.25rem;
  z-index: 78;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(57, 69, 21, .16);
  border-radius: 50%;
  color: var(--brand-charcoal);
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 20, 15, .2);
  transition: transform .2s ease, box-shadow .2s ease;
}
.order-cart-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(15, 20, 15, .25); }
.order-cart-fab > i { font-size: 1.25rem; }
.order-cart-fab > b { position: absolute; top: -4px; right: -3px; display: grid; place-items: center; min-width: 23px; height: 23px; padding: 0 5px; border: 2px solid #fff; border-radius: 999px; color: #fff; background: var(--brand-olive); font-size: .72rem; }
.order-cart-scrim { position: fixed; inset: 0; z-index: 79; border: 0; background: rgba(10, 12, 10, .57); }
.order-cart-drawer { position: fixed; top: 0; right: 0; z-index: 80; display: flex; flex-direction: column; width: min(480px, 100vw); height: 100dvh; color: #171a17; background: #fff; box-shadow: -18px 0 60px rgba(0, 0, 0, .2); transform: translateX(105%); visibility: hidden; transition: transform .28s ease, visibility .28s ease; }
.order-cart-drawer.is-open { transform: translateX(0); visibility: visible; }
.order-cart-drawer-head { display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: 1rem 1.5rem; }
.order-cart-drawer-close, .order-cart-more { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; color: #111; background: transparent; font-size: 1.55rem; line-height: 1; }
.order-cart-drawer-close:hover, .order-cart-more:hover { background: #f3f3f3; }
.order-cart-more { font-size: 1rem; letter-spacing: .08em; }
.order-cart-store { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 1rem; padding: .55rem 1.5rem 1.35rem; border-bottom: 1px solid #e8e8e8; }
.order-cart-store img { width: 62px; height: 62px; padding: .5rem; border-radius: 50%; object-fit: contain; background: var(--brand-cream); }
.order-cart-store h3 { margin: 0 0 .25rem; color: #171a17; font-size: 1.2rem; font-weight: 900; }
.order-cart-store p { margin: 0; color: #6b6b6b; font-size: .85rem; }
.order-cart-store > i { color: #555; }
.order-cart-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 0 1.5rem 1.5rem; }
.order-cart-empty { display: grid; justify-items: center; padding: 5rem 1rem; text-align: center; }
.order-cart-empty i { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 1rem; border-radius: 50%; color: var(--brand-olive-dark); background: var(--brand-cream); font-size: 1.4rem; }
.order-cart-empty h4 { color: var(--brand-charcoal); font-weight: 850; }
.order-cart-empty p { color: #687067; }
.order-cart-drawer-foot { padding: 1.1rem 1.5rem calc(1.1rem + env(safe-area-inset-bottom)); border-top: 1px solid #e2e2e2; background: #fff; box-shadow: 0 -10px 28px rgba(0, 0, 0, .06); }
.order-cart-drawer-foot .order-checkout-button { min-height: 56px; border-radius: 8px; background: var(--brand-charcoal); box-shadow: none; font-size: 1rem; }
.order-cart-row { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.15rem 0; border-bottom: 1px solid #e8e8e8; }
.order-cart-item-image { width: 88px; height: 88px; border-radius: 12px; object-fit: cover; background: #f2f2f2; }
.order-cart-item-placeholder { display: grid; place-items: center; color: var(--brand-olive); background: linear-gradient(145deg, #f4f0e5, #e8e2d1); font-size: 1.35rem; }
.order-cart-item-copy { min-width: 0; }
.order-cart-item-copy strong, .order-cart-item-copy small { display: block; }
.order-cart-item-copy strong { color: #171a17; font-size: 1rem; font-weight: 850; }
.order-cart-item-copy small { margin-top: .5rem; color: #5f5f5f; }
.order-quantity { display: flex; align-items: center; gap: .7rem; padding: .35rem .55rem; border-radius: 999px; background: #f2f2f2; }
.order-quantity button, .order-close { display: grid; place-items: center; border: 0; background: transparent; color: #171a17; border-radius: 50%; width: 26px; height: 26px; line-height: 1; }
.order-quantity button:hover { background: #e5e5e5; }
.order-utensils { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid #e8e8e8; font-weight: 800; }
.order-utensils span { display: flex; align-items: center; gap: .75rem; }
.order-utensils input { width: 22px; height: 22px; accent-color: var(--brand-olive); }
.order-note { display: block; margin: 1.25rem 0; padding: 1rem; border-radius: 12px; background: #f5f5f5; }
.order-note > button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; padding: 0; border: 0; text-align: left; background: transparent; }
.order-note > button span, .order-note > button strong, .order-note > button small { display: block; }
.order-note > button strong { color: #171a17; font-weight: 850; }
.order-note > button small { margin-top: .15rem; color: #6d6d6d; }
.order-note > button > i { color: #777; font-size: 1.05rem; }
.order-note textarea { width: 100%; min-height: 76px; margin-top: .75rem; padding: .7rem; resize: vertical; border: 1px solid #ddd; border-radius: 8px; background: #fff; }
.order-totals { padding: .8rem 0; }
.order-totals > div { display: flex; justify-content: space-between; padding: .3rem 0; font-size: 1.05rem; }
.order-total { border-top: 1px solid #d9c9aa; margin-top: .4rem; padding-top: .8rem !important; font-size: 1.15rem; }
.order-checkout-button { border-radius: 10px; padding: .85rem 1rem; }
.order-checkout-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; background: rgba(15, 20, 15, .78); backdrop-filter: blur(5px); }
.order-checkout-modal { width: min(680px, 100%); max-height: 92vh; overflow: auto; background: var(--brand-paper); border: 1px solid rgba(184, 121, 36, .22); border-radius: 22px; padding: 1.5rem; box-shadow: 0 30px 80px rgba(0, 0, 0, .3); }
.order-checkout-modal label { display: block; font-weight: 700; font-size: .9rem; }
.order-checkout-modal input:not([type="radio"]) { display: block; width: 100%; margin-top: .35rem; padding: .65rem .75rem; border: 1px solid #d8d7cb; border-radius: 8px; font-weight: 400; }
.order-checkout-modal input:disabled { cursor: not-allowed; opacity: .7; }
.order-payment-methods { display: grid; gap: .65rem; margin: 1.15rem 0; padding: 0; border: 0; }
.order-payment-methods legend { margin-bottom: .2rem; color: var(--brand-charcoal); font-size: .9rem; font-weight: 800; }
.order-payment-methods > label { display: flex; align-items: flex-start; gap: .75rem; padding: .9rem 1rem; border: 1px solid #d8d7cb; border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.order-payment-methods > label.is-selected { border-color: var(--brand-gold); background: #fffaf0; box-shadow: 0 0 0 2px rgba(184, 121, 36, .12); }
.order-payment-methods > label:has(input:disabled) { cursor: not-allowed; opacity: .62; }
.order-payment-methods input { margin-top: .23rem; accent-color: var(--brand-gold); }
.order-payment-methods span, .order-payment-methods strong, .order-payment-methods small { display: block; }
.order-payment-methods span { min-width: 0; }
.order-payment-methods strong { color: var(--brand-charcoal); }
.order-payment-methods strong i { width: 1.25rem; color: var(--brand-gold-dark); }
.order-payment-methods small { margin-top: .2rem; color: #74766e; font-weight: 500; line-height: 1.4; }
.order-checkout-error { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: 1rem; padding: .8rem .9rem; border: 1px solid #e5b5aa; border-radius: 10px; color: #7d2d20; background: #fff1ee; font-size: .84rem; line-height: 1.45; }
.order-checkout-error i { margin-top: .18rem; }
.order-type-toggle { display: flex; gap: 1.5rem; padding: .8rem 0 1rem; }
.order-type-toggle label { font-weight: 700; }
.order-type-toggle input { margin-right: .4rem; }
.order-close { font-size: 1.2rem; }
@media (max-width: 575px) {
  .order-cart-card { position: static !important; }
  .order-category-tabs { justify-content: flex-start !important; flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: .5rem; }
  .order-cart-fab { top: auto; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: none; }
  .order-cart-fab:hover { transform: translateY(-2px); }
  .order-cart-drawer-body, .order-cart-drawer-head, .order-cart-store, .order-cart-drawer-foot { padding-left: 1rem; padding-right: 1rem; }
  .order-cart-row { grid-template-columns: 68px minmax(0, 1fr); }
  .order-cart-item-image { width: 68px; height: 68px; }
  .order-cart-row .order-quantity { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .order-cart-fab, .order-cart-drawer { transition: none; }
}

/* ---------- staff admin ---------- */
.admin-shell { min-height: 70vh; background: #f5f4ec; padding: 4rem max(1rem, calc((100% - 1120px) / 2)); color: #26291c; }
.admin-login-card { max-width: 480px; margin: 2rem auto; background: #fff; padding: 2rem; border-radius: 20px; box-shadow: 0 16px 40px rgba(34,37,20,.1); }
.admin-login-card h1, .admin-topbar h1 { color: var(--brand-olive); }
.admin-login-card label { display: block; font-weight: 700; margin: 1rem 0; }
.admin-login-card input { display: block; width: 100%; margin-top: .35rem; padding: .7rem; border: 1px solid #d8d7cb; border-radius: 8px; }
.admin-order-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.4rem; padding: 1rem; border: 1px solid #dfe4d4; border-radius: 14px; background: #f8f9f4; }
.admin-order-toggle > div > span, .admin-order-toggle > div > strong, .admin-order-toggle > div > small { display: block; }
.admin-order-toggle > div > span { color: #818a7c; font-size: .7rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.admin-order-toggle > div > strong { margin-top: .2rem; color: #27321e; }
.admin-order-toggle > div > small { margin-top: .2rem; color: #747b70; }
.admin-order-toggle.is-off { border-color: #ead0bd; background: #fff7f0; }
.admin-order-toggle.is-off > div > strong { color: #8a3f25; }
.admin-toggle-switch { position: relative; flex: 0 0 52px; width: 52px; height: 30px; margin: 0 !important; }
.admin-toggle-switch input { position: absolute; width: 1px !important; height: 1px; margin: 0 !important; opacity: 0; }
.admin-toggle-switch span { position: absolute; inset: 0; cursor: pointer; border-radius: 999px; background: #b9bcb7; transition: background .2s ease; }
.admin-toggle-switch span::after { content: ''; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.22); transition: transform .2s ease; }
.admin-toggle-switch input:checked + span { background: var(--brand-olive); }
.admin-toggle-switch input:checked + span::after { transform: translateX(22px); }
.admin-toggle-switch input:focus-visible + span { outline: 3px solid rgba(100,117,43,.28); outline-offset: 2px; }
.admin-primary-button, .admin-secondary-button { border: 0; border-radius: 9px; padding: .7rem 1rem; font-weight: 700; }
.admin-primary-button { width: 100%; background: var(--brand-olive); color: #fff; }
.admin-secondary-button { background: #fff; color: var(--brand-olive); border: 1px solid rgba(107,111,58,.25); }
.admin-topbar { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 2rem; }
.admin-status-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.admin-status-tabs button { border: 0; background: #fff; color: #555; padding: .6rem .9rem; border-radius: 999px; }
.admin-empty { padding: 4rem 1rem; text-align: center; background: #fff; border-radius: 18px; }
.admin-order-list { display: grid; gap: 1rem; }
.admin-order-card { background: #fff; border-radius: 16px; padding: 1.25rem; box-shadow: 0 8px 24px rgba(34,37,20,.06); }
.admin-order-heading { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #eee; padding-bottom: .8rem; }
.admin-order-heading h2 { font-size: 1.2rem; margin: .3rem 0; }
.admin-order-heading p { color: #777; margin: 0; font-size: .9rem; }
.admin-order-heading > strong { color: var(--brand-olive); font-size: 1.2rem; }
.admin-order-number { color: var(--brand-olive); font-size: .8rem; font-weight: 800; letter-spacing: .08em; }
.admin-order-card ul { list-style: none; padding: .6rem 0; margin: 0; }
.admin-order-card li { display: flex; justify-content: space-between; padding: .3rem 0; }
.admin-order-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.admin-order-actions select { border: 1px solid #d8d7cb; border-radius: 8px; padding: .45rem .6rem; }
.admin-status { display: inline-block; border-radius: 999px; padding: .35rem .7rem; font-size: .78rem; font-weight: 800; }
.admin-status-pending { background: #fff2cc; color: #7a5a00; }.admin-status-confirmed, .admin-status-ready { background: #dff2e3; color: #27643a; }.admin-status-preparing, .admin-status-out_for_delivery { background: #e3eef8; color: #23527a; }.admin-status-completed { background: #d8e9d1; color: #2d5c23; }.admin-status-cancelled { background: #fae0e0; color: #8a2929; }
@media (max-width: 575px) { .admin-topbar { align-items: start; flex-direction: column; } .admin-order-heading { flex-direction: column; } }

/* Standalone Kitchenasty-inspired operations workspace */
.admin-application { min-height: 100vh; background: #f5f7fa; color: #1f2937; }
.admin-portal-layout { min-height: 100vh; display: flex; background: #f5f7fa; }
.admin-portal-sidebar { width: 254px; flex: 0 0 254px; display: flex; flex-direction: column; background: #17212b; color: #d8e0e7; padding: 1.35rem .85rem 1rem; }
.admin-portal-brand { display: flex; align-items: center; gap: .75rem; padding: .35rem .7rem 1.4rem; border-bottom: 1px solid rgba(255,255,255,.09); }
.admin-brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(135deg, #d3a84f, #a67c27); color: #17212b; font-weight: 900; font-size: .78rem; letter-spacing: -.04em; }
.admin-portal-brand strong { display: block; color: #fff; font-size: .94rem; line-height: 1.2; }
.admin-portal-brand small { display: block; color: #8795a3; font-size: .7rem; margin-top: .25rem; }
.admin-sidebar-label { color: #718092; font-size: .67rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 1.5rem .8rem .55rem; }
.admin-portal-nav { display: grid; gap: .18rem; }
.admin-portal-nav a { display: flex; align-items: center; gap: .75rem; min-height: 43px; padding: .7rem .8rem; border-radius: 9px; color: #afbac5; text-decoration: none; font-size: .87rem; font-weight: 650; transition: background .18s ease, color .18s ease; }
.admin-portal-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.admin-portal-nav a.active { background: #293744; color: #f1c867; box-shadow: inset 3px 0 #d3a84f; }
.admin-nav-icon { width: 21px; color: #81909e; text-align: center; font-size: 1.05rem; }
.admin-portal-nav a.active .admin-nav-icon { color: #f1c867; }
.admin-nav-dot { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: #d3a84f; opacity: .8; }
.admin-sidebar-footer { margin-top: auto; padding: 1rem .75rem .2rem; border-top: 1px solid rgba(255,255,255,.09); display: grid; gap: .55rem; font-size: .74rem; }
.admin-sidebar-footer a { color: #f1c867; text-decoration: none; font-weight: 700; }
.admin-sidebar-footer span { color: #7f8b98; }
.admin-portal-workspace { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.admin-portal-header { position: relative; left: auto; bottom: auto; width: auto; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding: .85rem clamp(1rem, 3vw, 2.25rem); background: #fff; border-bottom: 1px solid #e7ebef; box-shadow: 0 1px 2px rgba(25,43,58,.04); z-index: 1; }
.admin-application header.admin-portal-header { position: static !important; inset: auto !important; width: auto !important; height: auto !important; transform: none !important; }
.admin-portal-header > div:first-child { display: grid; gap: .15rem; }
.admin-portal-eyebrow { color: #98a2ad; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.admin-portal-header strong { color: #1f2937; font-size: 1rem; }
.admin-header-actions { display: flex !important; align-items: center; gap: 1rem; }
.admin-header-actions a, .admin-header-actions button { border: 0; background: transparent; color: #687583; font-size: .82rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.admin-header-actions a:hover, .admin-header-actions button:hover { color: #b18122; }
.admin-portal-main { flex: 1; padding: clamp(1.25rem, 3vw, 2.5rem); }
.admin-workspace-loading { min-height: 220px; display: grid; place-items: center; color: #73808d; font-size: .9rem; }
.admin-portal-main > .admin-shell { min-height: auto; padding: 0; background: transparent; }
.admin-portal-main > .admin-shell .admin-topbar { display: flex; margin-bottom: 1.65rem; padding-top: .25rem; }
.admin-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.65rem; }
.admin-page-heading h1 { margin: 0; color: #1d2935; font-size: clamp(1.65rem, 3vw, 2.1rem); font-weight: 850; letter-spacing: -.035em; }
.admin-page-heading p { color: #788594; margin: .35rem 0 0; font-size: .9rem; }
.admin-page-kicker { color: #b18122 !important; font-size: .7rem !important; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.admin-inline-button { width: auto; min-width: 150px; }
.admin-portal-main .admin-secondary-button { border-color: #dde3e9; color: #566473; background: #fff; box-shadow: 0 1px 2px rgba(26,38,49,.03); }
.admin-portal-main .admin-secondary-button:hover { border-color: #d3a84f; color: #9b721d; }
.admin-portal-main .admin-order-card, .admin-portal-main .admin-menu-category, .admin-portal-main .admin-login-card, .admin-portal-main .admin-empty { border: 1px solid #e4e9ee; box-shadow: 0 4px 14px rgba(25,43,58,.045); }
.admin-portal-main .admin-order-card { border-radius: 12px; }
.admin-portal-main .admin-status-tabs { padding: .3rem; background: #e9edf1; border-radius: 9px; width: fit-content; margin-bottom: 1.25rem; }
.admin-portal-main .admin-status-tabs button { border-radius: 7px; color: #697786; font-size: .78rem; }
.admin-portal-main .admin-status-tabs button:hover { color: #1f2937; background: #fff; }
.kitchen-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.kitchen-column { min-width: 0; background: #e9edf1; border-radius: 13px; padding: .8rem; }
.kitchen-column-heading { display: flex; justify-content: space-between; align-items: end; gap: .5rem; padding: .35rem .35rem .75rem; }
.kitchen-column-heading h2 { margin: .2rem 0 0; color: #263542; font-size: 1rem; }
.kitchen-column-heading > strong { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #6c7884; font-size: .8rem; }
.kitchen-empty { padding: 2rem .5rem; color: #8a96a1; text-align: center; font-size: .82rem; }
.kitchen-ticket { margin-bottom: .75rem; padding: 1rem; background: #fff; border: 1px solid #e1e6eb; border-radius: 10px; box-shadow: 0 3px 10px rgba(25,43,58,.05); }
.kitchen-ticket:last-child { margin-bottom: 0; }
.kitchen-ticket-top { display: flex; justify-content: space-between; gap: .5rem; color: #b18122; font-size: .72rem; }
.kitchen-ticket-top span { color: #8b96a1; }
.kitchen-ticket h3 { margin: .55rem 0 .8rem; color: #263542; font-size: .98rem; }
.kitchen-ticket ul { list-style: none; margin: 0 0 .8rem; padding: .7rem 0; border-top: 1px solid #edf0f2; border-bottom: 1px solid #edf0f2; }
.kitchen-ticket li { display: grid; grid-template-columns: 27px 1fr; gap: .35rem; padding: .22rem 0; font-size: .83rem; }
.kitchen-ticket li strong { color: #b18122; }
.kitchen-ticket li small { grid-column: 2; color: #87929d; font-style: italic; }
.kitchen-address { color: #697786; font-size: .75rem; margin: -.2rem 0 .8rem; }
.kitchen-ticket-action { display: flex; justify-content: space-between; width: 100%; border: 0; border-radius: 7px; padding: .6rem .7rem; background: #17212b; color: #fff; font-size: .78rem; font-weight: 750; cursor: pointer; }
.kitchen-ticket-action:hover { background: #293744; }
.kitchen-ticket-action:disabled { opacity: .6; cursor: wait; }
@media (max-width: 900px) { .kitchen-columns { grid-template-columns: 1fr; } }
.admin-helper-text { font-size: .78rem !important; }
.admin-page-content { position: relative; animation: admin-page-enter .26s ease both; }
.admin-page-transition { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; opacity: 0; background: linear-gradient(90deg, #d3a84f, #f1c867, #d3a84f); transform: scaleX(0); transform-origin: left; }
.admin-portal-layout.is-navigating .admin-page-transition { opacity: 1; animation: admin-route-progress .32s ease-out both; }
.admin-portal-layout.is-navigating .admin-page-content { opacity: .55; transform: translateY(4px); transition: opacity .16s ease, transform .16s ease; }
@keyframes admin-page-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes admin-route-progress { from { transform: scaleX(0); } to { transform: scaleX(.82); } }
@media (prefers-reduced-motion: reduce) { .admin-page-content, .admin-page-transition { animation: none !important; transition: none !important; } }
@media (max-width: 800px) { .admin-portal-sidebar { width: 76px; flex-basis: 76px; padding-left: .55rem; padding-right: .55rem; } .admin-portal-brand { justify-content: center; padding-left: 0; padding-right: 0; } .admin-portal-brand > div, .admin-sidebar-label, .admin-portal-nav a span:not(.admin-nav-icon), .admin-sidebar-footer span, .admin-sidebar-footer a { display: none; } .admin-portal-nav a { justify-content: center; padding-left: .4rem; padding-right: .4rem; } .admin-nav-dot { display: block !important; position: absolute; margin: -24px 0 0 24px; } }
@media (max-width: 575px) { .admin-portal-header { min-height: 62px; } .admin-portal-eyebrow { display: none; } .admin-header-actions a { display: none; } .admin-page-heading { align-items: start; flex-direction: column; } .admin-inline-button { width: 100%; } }
.customer-auth-page, .customer-account-page { min-height: 70vh; background: #f5f4ec; padding: 4rem max(1rem, calc((100% - 980px) / 2)); }
.customer-auth-card { max-width: 480px; margin: 2rem auto; background: #fff; padding: 2rem; border-radius: 20px; box-shadow: 0 16px 40px rgba(34,37,20,.1); }
.customer-auth-card h1, .customer-account-heading h1 { color: var(--brand-olive); }
.customer-auth-card label { display: block; font-weight: 700; margin: 1rem 0; }
.customer-auth-card input { display: block; width: 100%; margin-top: .35rem; padding: .7rem; border: 1px solid #d8d7cb; border-radius: 8px; }
.customer-account-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 2rem; }
.admin-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
.admin-stats-grid > div { background: #fff; border-radius: 14px; padding: 1.25rem; box-shadow: 0 8px 24px rgba(34,37,20,.06); }
.admin-stats-grid span, .admin-stats-grid strong { display: block; }
.admin-stats-grid span { color: #777; font-size: .9rem; }
.admin-stats-grid strong { color: var(--brand-olive); font-size: 1.8rem; margin-top: .4rem; }
.admin-quick-links { display: flex; flex-wrap: wrap; gap: .7rem; }
.admin-quick-links a { background: #fff; color: var(--brand-olive); border-radius: 9px; padding: .8rem 1rem; text-decoration: none; font-weight: 700; }
.admin-staff-form { max-width: none; margin: 0 0 2rem; }
.admin-staff-form h2 { color: var(--brand-olive); font-size: 1.25rem; }
.admin-staff-form select { display: block; width: 100%; margin-top: .35rem; padding: .7rem; border: 1px solid #d8d7cb; border-radius: 8px; }
@media (max-width: 800px) { .admin-stats-grid { grid-template-columns: repeat(2, 1fr); } }

.reservation-booking label { display: block; font-weight: 700; }
.reservation-booking input, .reservation-booking textarea, .reservation-booking select { display: block; width: 100%; margin-top: .35rem; padding: .7rem; border: 1px solid #d8d7cb; border-radius: 8px; background: transparent; font-weight: 400; }
.reservation-booking textarea { min-height: 110px; }
.review-wall { background: #f8f6ef; }
.review-card { background: #fff; border-radius: 18px; padding: 1.5rem; box-shadow: 0 10px 30px rgba(34,37,20,.08); }
.review-stars { color: #b28a24; letter-spacing: .12em; }
.review-card h3 { font-size: 1.15rem; margin: .8rem 0 .5rem; }
.review-card p { color: #555; }
.order-success-page { min-height: 60vh; max-width: 680px; margin: 0 auto; padding: 7rem 1rem; text-align: center; }
.order-success-page h1 { color: var(--brand-olive); margin: .5rem 0 1rem; }
.order-success-page .order-checkout-button { display: inline-block; margin-top: 1.5rem; text-decoration: none; }
.admin-menu-category { margin-bottom: 2rem; }
.admin-menu-category h2 { color: var(--brand-olive); font-size: 1.3rem; margin-bottom: .8rem; }
.admin-menu-item { display: flex; justify-content: space-between; gap: 1rem; background: #fff; border-radius: 14px; padding: 1rem; margin-bottom: .7rem; }
.admin-menu-item-main { flex: 1; }
.admin-menu-item-main input, .admin-menu-item-main textarea, .admin-menu-item-controls input { display: block; width: 100%; border: 1px solid #d8d7cb; border-radius: 7px; padding: .5rem; }
.admin-menu-item-main textarea { min-height: 60px; margin-top: .45rem; }
.admin-menu-item-controls { width: 180px; display: flex; flex-direction: column; gap: .5rem; }
.admin-menu-item-controls label { font-size: .85rem; font-weight: 700; }
.admin-menu-item-controls input[type="number"] { margin-top: .25rem; }
.admin-check { display: flex; align-items: center; gap: .35rem; }
.admin-check input { width: auto; }
@media (max-width: 700px) { .admin-menu-item { flex-direction: column; } .admin-menu-item-controls { width: 100%; } }

/* ============================================================
   Sneaky Turtle command center — premium admin workspace
   ============================================================ */
.admin-application {
  --admin-ink: #14202a;
  --admin-muted: #71808e;
  --admin-line: #e5e9ec;
  --admin-surface: #ffffff;
  --admin-canvas: #f3f5f4;
  --admin-gold: #c89a3f;
  --admin-gold-soft: #fbf3df;
  font-family: "Nunito", sans-serif;
  background: radial-gradient(circle at 80% -20%, rgba(200,154,63,.08), transparent 32%), var(--admin-canvas);
}
.admin-portal-layout { background: transparent; }
.admin-portal-sidebar { width: 272px; flex-basis: 272px; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: linear-gradient(180deg, #13212b 0%, #0e1820 100%); padding: 1.25rem .9rem; box-shadow: 12px 0 40px rgba(14,24,32,.08); z-index: 30; }
.admin-portal-brand { gap: .8rem; padding: .45rem .65rem 1.3rem; }
.admin-brand-mark { width: 44px; height: 44px; border-radius: 14px; font-size: 1rem; background: linear-gradient(145deg, #f2d889, #b98528); box-shadow: 0 8px 24px rgba(200,154,63,.24); }
.admin-portal-brand strong { font-size: .98rem; letter-spacing: -.015em; }
.admin-portal-brand small { color: #8fa0ad; }
.admin-nav-group + .admin-nav-group { margin-top: .35rem; }
.admin-sidebar-label { padding: 1rem .8rem .42rem; font-size: .62rem; color: #677987; }
.admin-portal-nav a { min-height: 41px; border-radius: 10px; padding: .62rem .75rem; font-size: .83rem; color: #aebac3; }
.admin-portal-nav a.active { color: #fff1c7; background: linear-gradient(90deg, rgba(200,154,63,.2), rgba(200,154,63,.07)); box-shadow: inset 2px 0 #d7aa50; }
.admin-nav-icon { display: grid; place-items: center; width: 22px; color: #758793; font-size: .85rem; }
.admin-sidebar-footer { gap: 1rem; padding: 1rem .55rem .2rem; }
.admin-sidebar-profile { display: flex; align-items: center; gap: .65rem; }
.admin-sidebar-profile > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #263743; color: #f0cb70; font-weight: 900; }
.admin-sidebar-profile strong, .admin-sidebar-profile small { display: block; }
.admin-sidebar-profile strong { color: #eaf0f3; font-size: .78rem; }
.admin-sidebar-profile small { color: #788b98; font-size: .62rem; margin-top: .1rem; text-transform: capitalize; }
.admin-sidebar-footer a { display: flex; gap: .45rem; align-items: center; color: #d9b75f; }
.admin-portal-header { min-height: 78px; padding: .9rem clamp(1.1rem, 3vw, 2.5rem); background: rgba(255,255,255,.9); backdrop-filter: blur(18px); }
.admin-header-title { display: flex; align-items: center; gap: .85rem; }
.admin-header-title > div { display: grid; }
.admin-mobile-menu { display: none; width: 38px; height: 38px; border: 1px solid var(--admin-line); border-radius: 10px; background: #fff; color: var(--admin-ink); }
.admin-portal-header strong { color: var(--admin-ink); font-size: 1.02rem; }
.admin-header-actions a, .admin-header-actions button { display: flex; align-items: center; gap: .4rem; }
.admin-live-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .65rem; border-radius: 999px; background: #eef7ef; color: #347042; font-size: .7rem; font-weight: 800; }
.admin-live-pill i { width: 6px; height: 6px; border-radius: 50%; background: #4ea661; box-shadow: 0 0 0 4px rgba(78,166,97,.12); }
.admin-portal-main { padding: clamp(1.4rem, 3vw, 2.75rem); max-width: 1680px; width: 100%; margin: 0 auto; }
.admin-mobile-scrim { display: none; }
.admin-page-heading { align-items: center; }
.admin-page-heading h1 { color: var(--admin-ink); font-size: clamp(1.75rem, 2.7vw, 2.35rem); }
.admin-page-heading p { color: var(--admin-muted); }
.admin-heading-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; }
.admin-primary-button { background: linear-gradient(135deg, #bd8e35, #d4ad58); box-shadow: 0 7px 16px rgba(177,129,34,.18); }
.admin-primary-button:hover { color: #fff; filter: brightness(.96); transform: translateY(-1px); }
.admin-primary-button i, .admin-secondary-button i { margin-right: .35rem; }
.admin-date-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .66rem .85rem; border: 1px solid var(--admin-line); border-radius: 10px; background: #fff; color: #697785; font-size: .78rem; font-weight: 700; }
.admin-notice { display: flex; align-items: center; gap: .45rem; margin: 0 0 1rem; padding: .8rem 1rem; border-radius: 10px; font-size: .82rem; font-weight: 700; }
.admin-notice.success { background: #edf7ef; color: #316e40; border: 1px solid #d7ebdb; }
.admin-notice.error { background: #fff0ef; color: #9b3b34; border: 1px solid #f3d8d5; }
.admin-dashboard-skeleton { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.admin-dashboard-skeleton span { height: 132px; border-radius: 16px; background: linear-gradient(100deg, #fff 20%, #eef1f2 40%, #fff 60%); background-size: 300% 100%; animation: admin-shimmer 1.5s infinite; }
@keyframes admin-shimmer { to { background-position: -100% 0; } }
.admin-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.admin-metric-card { display: flex; align-items: flex-start; gap: .95rem; min-height: 136px; padding: 1.2rem; background: var(--admin-surface); border: 1px solid var(--admin-line); border-radius: 16px; box-shadow: 0 8px 26px rgba(19,32,42,.04); }
.admin-metric-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 13px; }
.admin-metric-icon.gold { color: #9b711d; background: #fbf1d9; }.admin-metric-icon.blue { color: #356b89; background: #e9f3f8; }.admin-metric-icon.violet { color: #6d5a92; background: #f0ebf8; }.admin-metric-icon.green { color: #3f7650; background: #eaf5ed; }
.admin-metric-card p { margin: .05rem 0 .28rem; color: var(--admin-muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.admin-metric-card strong { display: block; color: var(--admin-ink); font-size: 1.75rem; line-height: 1.1; letter-spacing: -.035em; }
.admin-metric-card small { display: block; margin-top: .6rem; color: #8b979f; font-size: .68rem; }
.admin-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .8fr); gap: 1.2rem; margin-bottom: 1.2rem; }
.admin-panel { background: #fff; border: 1px solid var(--admin-line); border-radius: 16px; box-shadow: 0 8px 26px rgba(19,32,42,.04); overflow: hidden; }
.admin-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.25rem; border-bottom: 1px solid #eef1f2; }
.admin-panel-heading span { display: block; color: #b18122; font-size: .62rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.admin-panel-heading h2, .admin-panel-heading h3 { margin: .15rem 0 0; color: var(--admin-ink); font-size: 1rem; }
.admin-panel-heading a, .admin-panel-heading button { border: 0; background: transparent; color: #9a7325; font-size: .74rem; font-weight: 800; text-decoration: none; }
.admin-table-wrap { overflow-x: auto; }
.admin-data-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.admin-data-table th { padding: .75rem 1rem; background: #fafbfb; color: #89959d; font-size: .63rem; text-transform: uppercase; letter-spacing: .06em; text-align: left; white-space: nowrap; }
.admin-data-table td { padding: .82rem 1rem; border-top: 1px solid #f0f2f3; color: #54636e; white-space: nowrap; }
.admin-data-table td:first-child strong, .admin-data-table td:first-child small { display: block; }.admin-data-table td:first-child strong { color: var(--admin-ink); }.admin-data-table td:first-child small { color: #9aa4ab; margin-top: .15rem; }
.admin-data-table tr:hover td { background: #fcfcfb; }
.admin-top-items { list-style: none; margin: 0; padding: .55rem 1.2rem 1rem; }
.admin-top-items li { display: grid; grid-template-columns: 27px 1fr 28px; gap: .65rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid #f0f2f3; }
.admin-top-items li:last-child { border-bottom: 0; }.admin-rank { color: #a2abb1; font-size: .67rem; font-weight: 900; }.admin-top-items strong { display: block; color: #374650; font-size: .78rem; }.admin-top-items li > div > span { display: block; height: 4px; margin-top: .4rem; border-radius: 999px; background: #edf0f1; overflow: hidden; }.admin-top-items li > div > span i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c29137, #dfbf72); }.admin-top-items b { color: #7d8992; font-size: .75rem; text-align: right; }
.admin-panel-empty { padding: 2rem 1.25rem; color: #8b979f; font-size: .8rem; text-align: center; }
.admin-command-panel { padding-bottom: .25rem; }
.admin-command-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; padding: 1rem 1.2rem 1.2rem; }
.admin-command-grid a { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: .7rem; padding: .9rem; border: 1px solid #e8ecee; border-radius: 12px; color: inherit; text-decoration: none; transition: border .18s ease, transform .18s ease, box-shadow .18s ease; }
.admin-command-grid a:hover { border-color: #d7b565; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(19,32,42,.06); }.admin-command-grid a > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--admin-gold-soft); color: #9b721d; }.admin-command-grid strong, .admin-command-grid small { display: block; }.admin-command-grid strong { color: var(--admin-ink); font-size: .77rem; }.admin-command-grid small { margin-top: .2rem; color: #8d98a0; font-size: .64rem; }.admin-command-grid b { color: #b68c3b; }
.admin-catalog-summary { display: grid; grid-template-columns: 130px 130px 130px minmax(240px, 1fr); gap: .75rem; margin-bottom: 1.3rem; }
.admin-catalog-summary > div, .admin-catalog-summary > label { padding: .9rem 1rem; border: 1px solid var(--admin-line); border-radius: 13px; background: #fff; }.admin-catalog-summary > div span, .admin-catalog-summary > div small { display: block; }.admin-catalog-summary > div span { color: var(--admin-ink); font-size: 1.3rem; font-weight: 900; }.admin-catalog-summary > div small { color: #89959d; font-size: .65rem; }.admin-catalog-summary > label { display: flex; align-items: center; gap: .7rem; align-self: stretch; }.admin-catalog-summary label i { color: #9aa5ac; }.admin-catalog-summary input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--admin-ink); }
.admin-section-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }.admin-section-toolbar h2 { margin: 0; color: var(--admin-ink); font-size: 1rem; }
.admin-menu-category.premium { overflow: hidden; margin-bottom: 1rem; background: #fff; border-radius: 16px; }
.admin-category-heading { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.15rem; border-bottom: 1px solid #edf0f1; }.admin-category-heading h2 { margin: .15rem 0 0; color: var(--admin-ink); font-size: 1rem; }.admin-category-heading > div span { color: #9a7a36; font-size: .62rem; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.admin-availability { display: inline-flex; align-items: center; gap: .35rem; color: #a16a31; background: #fff4e6; padding: .32rem .6rem; border-radius: 999px; font-size: .63rem; font-weight: 850; }.admin-availability.on { color: #367044; background: #edf7ef; }.admin-availability::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.admin-menu-row { display: grid; grid-template-columns: 48px minmax(250px, 1fr) 120px 112px 76px; gap: 1rem; align-items: center; padding: .85rem 1rem; border-bottom: 1px solid #f0f2f3; }.admin-menu-row:last-child { border-bottom: 0; }.admin-menu-thumb { display: grid; place-items: center; width: 46px; height: 46px; overflow: hidden; border-radius: 12px; background: #f6f0e2; color: #aa7d27; }.admin-menu-thumb img { width: 100%; height: 100%; object-fit: cover; }.admin-menu-copy input, .admin-menu-copy textarea, .admin-price-input input { width: 100%; border: 0; background: transparent; outline: 0; }.admin-menu-copy input { color: var(--admin-ink); font-weight: 850; }.admin-menu-copy textarea { display: block; height: 34px; resize: none; color: #85919a; font-size: .72rem; }.admin-price-input span { display: block; color: #9aa4ab; font-size: .59rem; text-transform: uppercase; }.admin-price-input input { color: var(--admin-ink); font-weight: 850; }.admin-price-input small { display: none; }.admin-menu-switches { display: grid; gap: .38rem; }.admin-menu-switches label { display: flex; align-items: center; gap: .45rem; color: #6d7982; font-size: .67rem; }.admin-menu-switches input { position: absolute; opacity: 0; }.admin-menu-switches label > span { position: relative; width: 25px; height: 14px; border-radius: 99px; background: #dbe0e3; }.admin-menu-switches label > span::after { content: ''; position: absolute; width: 10px; height: 10px; left: 2px; top: 2px; border-radius: 50%; background: #fff; transition: .18s; }.admin-menu-switches input:checked + span { background: #78a384; }.admin-menu-switches input:checked + span::after { transform: translateX(11px); }.admin-row-actions { display: flex; gap: .35rem; justify-content: end; }.admin-row-actions button, .admin-icon-button { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #e2e7e9; border-radius: 9px; background: #fff; color: #60707b; }.admin-row-actions button:hover { color: #9b721d; border-color: #d7b565; }.admin-row-actions button.danger:hover { color: #a7463d; border-color: #e6b7b2; }
.admin-modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; background: rgba(9,17,23,.62); backdrop-filter: blur(5px); }.admin-modal { position: relative; width: min(510px, 100%); max-height: 92vh; overflow-y: auto; padding: 1.7rem; border-radius: 18px; background: #fff; box-shadow: 0 30px 80px rgba(8,15,20,.3); }.admin-modal h2 { color: var(--admin-ink); margin: .2rem 0 1.2rem; }.admin-modal label { display: block; margin: .8rem 0; color: #52616c; font-size: .74rem; font-weight: 800; }.admin-modal input, .admin-modal textarea, .admin-modal select { display: block; width: 100%; margin-top: .3rem; padding: .68rem .75rem; border: 1px solid #dce2e5; border-radius: 9px; background: #fff; }.admin-modal textarea { min-height: 80px; }.admin-modal-close { position: absolute; top: .8rem; right: .9rem; width: 30px; height: 30px; border: 0; border-radius: 50%; background: #f1f3f4; color: #65737d; font-size: 1.2rem; }
.admin-location-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }.admin-location-card { padding: 1.1rem; }.admin-location-card-top { display: grid; grid-template-columns: 46px 1fr auto; gap: .85rem; align-items: start; }.admin-location-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--admin-gold-soft); color: #9c731f; }.admin-location-card h2 { margin: .45rem 0 .2rem; color: var(--admin-ink); font-size: 1.1rem; }.admin-location-card p { margin: 0; color: #7e8b94; font-size: .75rem; line-height: 1.5; }.admin-location-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1rem 0; padding: .8rem; border-radius: 11px; background: #f7f8f8; color: #849099; font-size: .65rem; }.admin-location-stats strong { color: var(--admin-ink); }.admin-table-list { border-top: 1px solid #edf0f1; }.admin-panel-heading.compact { padding: .85rem 0 .55rem; border: 0; }.admin-table-list > div:not(.admin-panel-heading) { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .2rem; border-top: 1px solid #f0f2f3; color: #52616b; font-size: .73rem; }.admin-table-list small { color: #929ca3; }
@media (max-width: 1180px) { .admin-metric-grid { grid-template-columns: repeat(2, 1fr); }.admin-command-grid { grid-template-columns: repeat(2, 1fr); }.admin-catalog-summary { grid-template-columns: repeat(3, 1fr); }.admin-catalog-summary > label { grid-column: 1 / -1; }.admin-menu-row { grid-template-columns: 45px minmax(190px, 1fr) 100px 105px 70px; gap: .7rem; } }
@media (max-width: 900px) { .admin-dashboard-grid, .admin-location-grid { grid-template-columns: 1fr; }.admin-portal-sidebar { position: fixed; left: 0; transform: translateX(-105%); width: 272px; flex-basis: 272px; padding: 1.25rem .9rem; transition: transform .22s ease; }.admin-portal-layout.mobile-open .admin-portal-sidebar { transform: translateX(0); }.admin-portal-sidebar .admin-portal-brand { justify-content: flex-start; padding: .45rem .65rem 1.3rem; }.admin-portal-sidebar .admin-portal-brand > div, .admin-portal-sidebar .admin-sidebar-label, .admin-portal-sidebar .admin-portal-nav a span:not(.admin-nav-icon), .admin-portal-sidebar .admin-sidebar-footer span, .admin-portal-sidebar .admin-sidebar-footer a { display: block; }.admin-portal-sidebar .admin-portal-nav a { justify-content: flex-start; padding: .62rem .75rem; }.admin-portal-sidebar .admin-nav-dot { display: inline-block !important; position: static; margin: 0 0 0 auto; }.admin-portal-sidebar .admin-sidebar-footer a, .admin-portal-sidebar .admin-sidebar-profile { display: flex; }.admin-mobile-menu { display: grid; place-items: center; }.admin-mobile-scrim { position: fixed; inset: 0; z-index: 25; border: 0; background: rgba(9,17,23,.46); }.admin-portal-layout.mobile-open .admin-mobile-scrim { display: block; } }
@media (max-width: 720px) { .admin-metric-grid, .admin-dashboard-skeleton { grid-template-columns: 1fr; }.admin-metric-card { min-height: 110px; }.admin-command-grid { grid-template-columns: 1fr; }.admin-menu-row { grid-template-columns: 42px 1fr 70px; align-items: start; }.admin-menu-switches { grid-column: 2; grid-row: 2; grid-template-columns: repeat(2, max-content); }.admin-row-actions { grid-column: 3; grid-row: 2; }.admin-price-input { grid-column: 3; grid-row: 1; }.admin-catalog-summary { grid-template-columns: repeat(3, 1fr); }.admin-data-table th:nth-child(3), .admin-data-table td:nth-child(3) { display: none; } }
@media (max-width: 575px) { .admin-header-actions .admin-live-pill, .admin-header-actions a { display: none; }.admin-portal-main { padding: 1.15rem .85rem 2rem; }.admin-dashboard-heading { align-items: stretch; }.admin-heading-actions { width: 100%; }.admin-heading-actions > * { flex: 1; text-align: center; justify-content: center; }.admin-catalog-summary { grid-template-columns: repeat(3, 1fr); }.admin-catalog-summary > div { padding: .7rem; }.admin-menu-row { grid-template-columns: 1fr 72px; }.admin-menu-thumb { display: none; }.admin-menu-switches { grid-column: 1; }.admin-row-actions { grid-column: 2; }.admin-price-input { grid-column: 2; }.admin-location-stats { grid-template-columns: 1fr; } }

/* KitchenAsty-inspired dense operations views, rebuilt for Sneaky Turtle. */
.admin-list-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.45rem; }
.admin-list-heading h1 { margin: .1rem 0 0; color: var(--admin-ink); font-size: clamp(1.9rem, 3vw, 2.45rem); letter-spacing: -.04em; }
.admin-list-heading .admin-secondary-button { width: auto; }
.admin-filter-bar { display: flex; align-items: end; gap: .8rem; margin-bottom: 1.2rem; }
.admin-filter-bar label { display: grid; gap: .35rem; }
.admin-filter-bar label > span { color: #7f8b95; font-size: .62rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.admin-filter-bar select { min-width: 205px; height: 48px; padding: 0 2.5rem 0 .9rem; border: 1px solid #d7dde1; border-radius: 10px; background: #fff; color: #26343e; font: inherit; font-size: .82rem; font-weight: 700; }
.admin-filter-bar p { margin: 0 0 .8rem auto; color: #8a969f; font-size: .72rem; font-weight: 750; }
.admin-list-panel { overflow: hidden; border: 1px solid #e0e5e8; border-radius: 15px; background: #fff; box-shadow: 0 4px 18px rgba(20,32,42,.035); }
.admin-operations-table { width: 100%; min-width: 900px; border-collapse: collapse; color: #596773; font-size: .78rem; }
.admin-operations-table th { padding: 1rem 1.05rem; border-bottom: 1px solid #dfe4e7; background: #fafbfb; color: #677582; font-size: .67rem; font-weight: 900; letter-spacing: .045em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.admin-operations-table td { height: 64px; padding: .75rem 1.05rem; border-bottom: 1px solid #edf0f2; vertical-align: middle; }
.admin-operations-table tr:last-child td { border-bottom: 0; }
.admin-operations-table tbody tr:hover td { background: #fffdfa; }
.admin-operations-table td > strong, .admin-operations-table td > small { display: block; }
.admin-operations-table td > strong { color: #202e38; }
.admin-operations-table td > small { margin-top: .15rem; color: #9aa4ac; font-size: .64rem; }
.admin-type-pill { display: inline-flex; align-items: center; padding: .26rem .6rem; border-radius: 999px; font-size: .66rem; font-weight: 900; letter-spacing: .025em; }
.admin-type-pill.pickup { color: #287941; background: #dcf7e5; }
.admin-type-pill.delivery { color: #315fc3; background: #dfebff; }
.admin-status-confirmed { color: #345fb6; background: #e3ecff; }
.admin-status-preparing { color: #7a35b5; background: #f2e4ff; }
.admin-status-ready, .admin-status-delivered, .admin-status-picked_up, .admin-status-completed { color: #277241; background: #daf6e3; }
.admin-status-out_for_delivery { color: #286990; background: #deeff8; }
.admin-text-action, .admin-table-actions button { border: 0; background: transparent; color: #b68120; font-size: .75rem; font-weight: 900; cursor: pointer; }
.admin-text-action:hover, .admin-table-actions button:hover { color: #7d5814; }
.admin-order-detail { position: relative; width: min(980px, 100%); max-height: 92vh; overflow-y: auto; padding: 1.7rem; border-radius: 18px; background: #f7f8f8; box-shadow: 0 30px 90px rgba(8,15,20,.32); }
.admin-order-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .2rem .4rem 1.2rem; }
.admin-order-detail-heading h2 { margin: .1rem 0; color: var(--admin-ink); font-size: 1.7rem; }
.admin-order-detail-heading p { margin: 0; color: #88949c; font-size: .72rem; }
.admin-order-detail-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, .75fr); gap: 1rem; }
.admin-detail-section { margin-bottom: 1rem; padding: 1.25rem; border: 1px solid #e1e6e8; border-radius: 13px; background: #fff; }
.admin-detail-section h3 { margin: 0 0 1rem; color: var(--admin-ink); font-size: .92rem; }
.admin-detail-line, .admin-detail-totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; color: #52616c; font-size: .78rem; }
.admin-detail-line small { display: block; margin: .2rem 0 0 1.25rem; color: #9a7122; font-style: italic; }
.admin-detail-line b { color: #ad7f25; margin-right: .25rem; }
.admin-detail-totals { margin-top: .8rem; padding-top: .6rem; border-top: 1px solid #edf0f1; }
.admin-detail-totals .total { margin-top: .3rem; padding-top: .8rem; border-top: 1px solid #dfe4e6; color: var(--admin-ink); font-size: .93rem; }
.admin-status-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.admin-status-actions button { padding: .48rem .65rem; border: 1px solid #dce2e5; border-radius: 7px; background: #fff; color: #586873; font-size: .63rem; font-weight: 850; cursor: pointer; }
.admin-status-actions button:hover, .admin-status-actions button.active { color: #fff; border-color: #b98931; background: #b98931; }
.admin-status-actions button.danger { color: #b63e38; }
.admin-status-actions button:disabled { cursor: default; opacity: .7; }
.admin-detail-section dl { margin: 0; }
.admin-detail-section dt { margin-top: .8rem; color: #9aa4ab; font-size: .6rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.admin-detail-section dd { margin: .18rem 0 0; color: #34434d; font-size: .77rem; line-height: 1.5; }

.kitchen-workspace.demo-style { margin: -1rem; padding: 1rem; background: #eef0f3; }
.kitchen-display-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: .9rem 1.25rem; background: #101b2b; color: #aab4c2; }
.kitchen-display-bar > div { display: flex; align-items: center; gap: .8rem; }
.kitchen-display-bar h1 { margin: 0; color: #e7bd60; font-size: 1.08rem; }
.kitchen-display-bar span { font-size: .72rem; }
.kitchen-connection { display: inline-flex; align-items: center; gap: .4rem; }
.kitchen-connection i { width: 7px; height: 7px; border-radius: 50%; background: #52c77a; box-shadow: 0 0 0 4px rgba(82,199,122,.12); }
.kitchen-display-bar button { padding: .48rem .7rem; border: 1px solid #556174; border-radius: 6px; background: #354158; color: #fff; font-size: .68rem; font-weight: 750; }
.kitchen-columns.demo-columns { grid-template-columns: repeat(4, minmax(225px, 1fr)); gap: .8rem; overflow-x: auto; }
.kitchen-column { padding: 0; overflow: hidden; border-radius: 9px; background: #f1f2f4; }
.kitchen-column-heading { align-items: center; padding: .8rem .95rem; border-bottom: 2px solid; }
.kitchen-column-heading h2 { margin: 0; font-size: .88rem; }
.kitchen-column-heading strong { width: 25px; height: 25px; }
.kitchen-new .kitchen-column-heading { color: #81520d; border-color: #efc84d; background: #fff9df; }
.kitchen-confirmed .kitchen-column-heading { color: #254baa; border-color: #83b6ff; background: #eff5ff; }
.kitchen-preparing .kitchen-column-heading { color: #7730a9; border-color: #d39bfa; background: #faf0ff; }
.kitchen-ready .kitchen-column-heading { color: #23643a; border-color: #6bd99a; background: #edfbf2; }
.kitchen-column-body { padding: .65rem; }
.kitchen-ticket { padding: .95rem; border-radius: 8px; }
.kitchen-ticket-top > div { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.kitchen-ticket-top > div > strong { color: #172432; font-family: monospace; font-size: .82rem; }
.kitchen-ticket-top > span { max-width: 65px; text-align: right; line-height: 1.35; }
.kitchen-customer { margin: .6rem 0 .4rem; color: #7d8994; font-size: .73rem; }
.kitchen-ticket ul { margin: 0 0 .75rem; padding: .15rem 0; border: 0; }
.kitchen-ticket li { grid-template-columns: 25px 1fr; color: #27343e; font-size: .76rem; font-weight: 800; }
.kitchen-ticket li strong { color: #65727d; }
.kitchen-ticket-buttons { display: grid; grid-template-columns: 1fr auto; gap: .55rem; align-items: center; }
.kitchen-ticket-action { display: block; padding: .58rem .6rem; background: #bd7e22; text-align: center; }
.kitchen-ticket-action:hover { background: #9f6616; }
.kitchen-ready .kitchen-ticket-action { background: #2da355; }
.kitchen-ready .kitchen-ticket-action:hover { background: #238546; }
.kitchen-cancel { border: 0; background: transparent; color: #d14842; font-size: .67rem; font-weight: 850; }

.admin-menu-filter-card { display: grid; grid-template-columns: minmax(260px, 1fr) 230px; gap: .8rem; margin-bottom: 1.2rem; padding: .9rem; border: 1px solid #e0e5e8; border-radius: 13px; background: #fff; box-shadow: 0 3px 12px rgba(20,32,42,.03); }
.admin-menu-filter-card label { display: flex; align-items: center; gap: .7rem; min-height: 47px; padding: 0 .85rem; border: 1px solid #dce1e4; border-radius: 9px; }
.admin-menu-filter-card label i { color: #9ca6ad; }
.admin-menu-filter-card input { width: 100%; border: 0; outline: 0; color: #2b3944; }
.admin-menu-filter-card select { padding: 0 .8rem; border: 1px solid #dce1e4; border-radius: 9px; background: #fff; color: #2b3944; }
.admin-menu-table-list { min-width: 840px; }
.admin-item-identity { display: flex; align-items: center; gap: .7rem; min-width: 225px; }
.admin-item-identity > span { display: grid; place-items: center; width: 42px; height: 42px; overflow: hidden; border-radius: 7px; background: #f8f1e2; color: #ad7d22; }
.admin-item-identity img { width: 100%; height: 100%; object-fit: cover; }
.admin-item-identity strong, .admin-item-identity small { display: block; }
.admin-item-identity strong { color: #27343e; }
.admin-item-identity small { margin-top: .12rem; color: #a0a9b0; }
.admin-stock-label { display: inline-flex; align-items: center; gap: .35rem; color: #9d5048; font-size: .69rem; font-weight: 750; }
.admin-stock-label i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.admin-stock-label.available { color: #347946; }
.admin-table-actions { display: flex; gap: .7rem; }
.admin-table-actions button.danger { color: #c4423b; }
.admin-image-upload-preview { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px dashed #cfd7dc; border-radius: 14px; color: #7d8991; background: #f5f7f7; }
.admin-image-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.admin-image-upload-preview > div { display: grid; justify-items: center; gap: .55rem; }
.admin-image-upload-preview i { font-size: 2rem; color: var(--brand-olive); }
.admin-image-upload-preview span { font-size: .8rem; font-weight: 800; }
.admin-image-file small { display: block; margin-top: .4rem; color: #8a949a; font-size: .68rem; font-weight: 500; line-height: 1.45; }
.admin-image-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.admin-image-actions .admin-primary-button, .admin-image-actions .admin-secondary-button { width: auto; }
.admin-image-actions .admin-secondary-button.danger { color: #a6342f; border-color: #e7c0bd; }
.admin-edit-switches { display: flex; gap: 1.2rem; margin: 1rem 0; }
.admin-edit-switches label { display: flex; align-items: center; gap: .45rem; margin: 0; }

@media (max-width: 900px) { .admin-order-detail-grid { grid-template-columns: 1fr; }.kitchen-workspace.demo-style { margin: -.5rem; }.kitchen-columns.demo-columns { grid-template-columns: repeat(4, minmax(260px, 82vw)); }.admin-filter-bar p { display: none; } }
@media (max-width: 620px) { .admin-list-heading { align-items: stretch; flex-direction: column; }.admin-list-heading .admin-heading-actions { width: 100%; }.admin-filter-bar, .admin-menu-filter-card { grid-template-columns: 1fr; flex-direction: column; align-items: stretch; }.admin-filter-bar select { width: 100%; }.kitchen-display-bar { align-items: flex-start; flex-direction: column; }.kitchen-display-bar > div:last-child { width: 100%; justify-content: space-between; }.admin-order-detail { padding: 1rem; }.admin-order-detail-heading { align-items: flex-start; flex-direction: column; } }

/* Website-to-admin reservation flow. */
.reservation-booking-premium { padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid #e5e1d6; border-radius: 20px; background: #fff; box-shadow: 0 18px 55px rgba(31,37,20,.09); }
.reservation-form-intro { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: -.15rem 0 1.3rem; padding-bottom: 1.1rem; border-bottom: 1px solid #ece9df; }
.reservation-form-intro > div { display: flex; align-items: center; gap: .8rem; }
.reservation-form-intro > div > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #f8efdb; color: #aa791e; }
.reservation-form-intro strong, .reservation-form-intro small { display: block; }
.reservation-form-intro strong { color: #202b20; font-size: .96rem; }
.reservation-form-intro small { margin-top: .15rem; color: #7d857a; font-size: .71rem; }
.reservation-form-intro em { padding: .3rem .55rem; border-radius: 999px; background: #fff5d8; color: #8a681d; font-size: .62rem; font-style: normal; font-weight: 850; white-space: nowrap; }
.reservation-booking-premium label { color: #39433a; font-size: .78rem; }
.reservation-booking-premium label > span { color: #9aa096; font-weight: 600; }
.reservation-booking-premium input, .reservation-booking-premium textarea, .reservation-booking-premium select { min-height: 46px; border-color: #dfe2db; background: #fcfcfa; }
.reservation-booking-premium textarea { min-height: 95px; }
.reservation-submit { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; border: 0; }
.reservation-form-note { margin: .75rem 0 0; color: #8a9188; font-size: .68rem; text-align: center; }
.reservation-form-note i { color: #6b814e; margin-right: .25rem; }
.reservation-success { padding: clamp(1.5rem, 4vw, 2.7rem); border: 1px solid #dfe6d9; border-radius: 20px; background: linear-gradient(145deg, #fff, #f7faF3); box-shadow: 0 18px 55px rgba(31,37,20,.09); text-align: center; }
.reservation-success > span { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 1rem; border-radius: 50%; background: #e7f3e3; color: #4f753e; font-size: 1.4rem; }
.reservation-success h3 { color: #263220; font-size: 1.45rem; }
.reservation-success p { color: #657060; }
.reservation-reference { display: inline-block; padding: .45rem .7rem; border-radius: 8px; background: #f2eee2; color: #785d22 !important; font-family: monospace; font-weight: 800; }
.reservation-success small { display: block; margin: .6rem 0 1.2rem; color: #838b7e; }
.reservation-success .order-checkout-button { display: inline-block; width: auto; border: 0; }
.admin-sync-copy { display: flex; align-items: center; gap: .38rem; }
.admin-sync-copy i { width: 7px; height: 7px; border-radius: 50%; background: #4bab64; box-shadow: 0 0 0 4px rgba(75,171,100,.11); }
.admin-reservation-table { min-width: 920px; }
.admin-party-size { display: inline-flex; align-items: center; gap: .35rem; color: #44535d; font-weight: 800; }
.admin-party-size i { color: #9e7729; }
.admin-reservation-pending { color: #8b6410; background: #fff2c8; }
.admin-reservation-confirmed { color: #315fae; background: #e2ecff; }
.admin-reservation-seated { color: #763da4; background: #f0e4fb; }
.admin-reservation-completed { color: #307343; background: #ddf4e3; }
.admin-reservation-cancelled, .admin-reservation-no_show { color: #9a3f39; background: #fae3e1; }
.admin-empty-icon { display: grid; place-items: center; width: 50px; height: 50px; margin: 0 auto 1rem; border-radius: 14px; background: #f8f0df; color: #9e7729; font-size: 1.1rem; }
.admin-reservation-detail { position: relative; width: min(760px, 100%); max-height: 92vh; overflow-y: auto; padding: 1.7rem; border-radius: 18px; background: #f7f8f8; box-shadow: 0 30px 90px rgba(8,15,20,.32); }
.admin-reservation-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-bottom: .8rem; }
.admin-reservation-summary > div, .admin-reservation-contact > div { padding: .9rem; border: 1px solid #e1e6e8; border-radius: 10px; background: #fff; }
.admin-reservation-summary span, .admin-reservation-contact span, .admin-reservation-notes > span { display: block; color: #929da5; font-size: .59rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.admin-reservation-summary strong, .admin-reservation-contact strong { display: block; margin-top: .25rem; color: #34434d; font-size: .77rem; }
.admin-reservation-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-bottom: .8rem; }
.admin-reservation-contact strong { overflow-wrap: anywhere; }
.admin-reservation-notes { margin-bottom: .8rem; padding: 1rem; border-left: 3px solid #d1a348; border-radius: 7px; background: #fff9e9; }
.admin-reservation-notes p { margin: .35rem 0 0; color: #5d6358; font-size: .78rem; }
.reservation-actions button { flex: 1 1 105px; }
@media (max-width: 620px) { .reservation-form-intro { align-items: flex-start; flex-direction: column; }.admin-reservation-detail { padding: 1rem; }.admin-reservation-summary, .admin-reservation-contact { grid-template-columns: 1fr; } }
@media (min-width: 992px) and (max-width: 1399px) { .header .logo .logo-title { font-size: 2rem; }.header .menus > ul > li > a { padding-left: .7rem !important; padding-right: .7rem !important; font-size: .76rem; } }

/* Admin palette mirrors the live Sneaky Turtle menu: cream, olive and charcoal. */
.admin-application {
  --admin-ink: var(--brand-charcoal);
  --admin-muted: #74776f;
  --admin-line: #deddd4;
  --admin-surface: #fff;
  --admin-canvas: var(--brand-cream);
  --admin-gold: var(--brand-olive);
  --admin-gold-soft: #efeee2;
  background: var(--brand-cream);
}
.admin-portal-sidebar { background: linear-gradient(180deg, #30342e 0%, var(--brand-charcoal) 100%); box-shadow: 12px 0 40px rgba(35,38,31,.09); }
.admin-brand-mark { background: linear-gradient(145deg, #858a53, var(--brand-olive)); color: #fff; box-shadow: 0 8px 24px rgba(107,111,58,.25); }
.admin-portal-brand small, .admin-sidebar-label { color: #999e8d; }
.admin-portal-nav a { color: #c5c8bc; }
.admin-nav-icon { color: #92988a; }
.admin-portal-nav a:hover { background: rgba(246,244,238,.08); color: #fff; }
.admin-portal-nav a.active { color: #fff; background: linear-gradient(90deg, rgba(107,111,58,.72), rgba(107,111,58,.28)); box-shadow: inset 3px 0 #c5c89b; }
.admin-portal-nav a.active .admin-nav-icon { color: #f4f2e8; }
.admin-nav-dot { background: #c5c89b; }
.admin-sidebar-profile > span { background: #474c41; color: #e5e3cb; }
.admin-sidebar-profile small { color: #959b8b; }
.admin-sidebar-footer a { color: #c5c89b; }
.admin-portal-header { background: rgba(255,255,255,.92); border-bottom-color: #e2e1d8; }
.admin-header-actions a:hover, .admin-header-actions button:hover { color: var(--brand-olive); }
.admin-live-pill { color: var(--brand-olive-dark); background: #eff1e6; }
.admin-live-pill i { background: var(--brand-olive); box-shadow: 0 0 0 4px rgba(107,111,58,.12); }
.admin-page-kicker, .admin-panel-heading span, .admin-category-heading > div span { color: var(--brand-olive) !important; }
.admin-primary-button { background: linear-gradient(135deg, var(--brand-olive-dark), var(--brand-olive)); box-shadow: 0 7px 16px rgba(82,86,44,.18); }
.admin-secondary-button { color: var(--brand-olive); border-color: rgba(107,111,58,.28); }
.admin-portal-main .admin-secondary-button:hover { color: var(--brand-olive-dark); border-color: var(--brand-olive); }
.admin-date-chip, .admin-metric-card, .admin-panel, .admin-list-panel, .admin-menu-filter-card, .admin-filter-bar select { border-color: #dfded5; }
.admin-metric-icon.gold, .admin-command-grid a > i, .admin-location-icon, .admin-menu-thumb, .admin-item-identity > span { color: var(--brand-olive); background: #efeee2; }
.admin-top-items li > div > span i { background: linear-gradient(90deg, var(--brand-olive-dark), #8e9360); }
.admin-panel-heading a, .admin-panel-heading button, .admin-text-action, .admin-table-actions button { color: var(--brand-olive); }
.admin-command-grid b, .admin-availability, .admin-row-actions button:hover { color: var(--brand-olive); }
.admin-command-grid a:hover, .admin-row-actions button:hover { border-color: #a7aa7e; }
.admin-operations-table tbody tr:hover td { background: #faf9f4; }
.admin-type-pill.pickup { color: var(--brand-olive-dark); background: #ecefdf; }
.admin-type-pill.delivery { color: #4f544d; background: #eceeeb; }
.admin-status-confirmed { color: #555b3d; background: #e9ebdc; }
.admin-status-preparing { color: #4f554b; background: #e8eae6; }
.admin-status-ready, .admin-status-delivered, .admin-status-picked_up, .admin-status-completed { color: var(--brand-olive-dark); background: #e5ead7; }
.admin-status-out_for_delivery { color: #555c50; background: #e7ebe3; }
.admin-status-actions button:hover, .admin-status-actions button.active { border-color: var(--brand-olive); background: var(--brand-olive); }
.admin-order-detail, .admin-reservation-detail { background: var(--brand-cream); }
.kitchen-display-bar { background: var(--brand-charcoal); color: #d0d2c9; }
.kitchen-display-bar h1 { color: #d7dac0; }
.kitchen-connection i { background: #9da46c; box-shadow: 0 0 0 4px rgba(157,164,108,.14); }
.kitchen-display-bar button { border-color: #6f7468; background: #484d44; }
.kitchen-ticket-action, .kitchen-ready .kitchen-ticket-action { background: var(--brand-olive); }
.kitchen-ticket-action:hover, .kitchen-ready .kitchen-ticket-action:hover { background: var(--brand-olive-dark); }
.kitchen-new .kitchen-column-heading { color: #5f6339; border-color: #999e65; background: #f4f2df; }
.kitchen-confirmed .kitchen-column-heading { color: #555b43; border-color: #a5aa83; background: #f0f1e7; }
.kitchen-preparing .kitchen-column-heading { color: #50554e; border-color: #9ca198; background: #f0f1ef; }
.kitchen-ready .kitchen-column-heading { color: var(--brand-olive-dark); border-color: #7f8551; background: #eef0e2; }
.reservation-form-intro > div > span, .admin-empty-icon { color: var(--brand-olive); background: #efeee2; }
.reservation-form-intro em { color: var(--brand-olive-dark); background: #efeee2; }
.reservation-reference { color: var(--brand-olive-dark) !important; background: #eeede3; }
.admin-party-size i { color: var(--brand-olive); }
.admin-sync-copy i { background: var(--brand-olive); box-shadow: 0 0 0 4px rgba(107,111,58,.12); }
.admin-reservation-pending { color: #70652e; background: #f1eed8; }
.admin-reservation-confirmed { color: #555b3d; background: #e9ebdc; }
.admin-reservation-seated { color: #50564c; background: #e7eae5; }
.admin-reservation-completed { color: var(--brand-olive-dark); background: #e4e9d7; }
.admin-reservation-notes { border-left-color: var(--brand-olive); background: #f2f1e7; }

/* ---------- payments and payouts workspace ---------- */
.admin-payments-page { display: grid; gap: 1.35rem; }
.payment-connect-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; padding: 1.5rem; border: 1px solid #e2ddd1; border-radius: 16px; background: linear-gradient(135deg, #fff 0%, #f7f4ed 100%); box-shadow: 0 10px 30px rgba(42,46,36,.06); }
.payment-connect-hero.is-ready { border-color: #c8d6b1; background: linear-gradient(135deg, #fbfff7 0%, #edf2e4 100%); }
.payment-connect-hero.needs-action { border-color: #e7d3ae; background: linear-gradient(135deg, #fffdf8 0%, #faf1df 100%); }
.payment-connect-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; color: #fff; background: #635bff; box-shadow: 0 10px 22px rgba(99,91,255,.22); font-size: 1.7rem; }
.payment-connect-copy > span { color: #7e8078; font-size: .67rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.payment-connect-copy h2 { margin: .2rem 0 .35rem; color: #20251f; font-size: 1.35rem; font-weight: 850; }
.payment-connect-copy p { max-width: 680px; margin: 0; color: #6b7067; font-size: .88rem; line-height: 1.55; }
.payment-connect-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; }
.payment-connect-actions .admin-primary-button { width: auto; }
.payment-status-grid, .payment-metrics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.payment-status-grid article { display: flex; align-items: flex-start; gap: .9rem; min-width: 0; padding: 1.15rem; border: 1px solid #e3e2da; border-radius: 14px; background: #fff; }
.payment-status-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px; color: #7f877b; background: #f0f1ed; }
.payment-status-icon.good { color: #42602c; background: #e8f1df; }
.payment-status-grid small, .payment-status-grid strong, .payment-status-grid p { display: block; }
.payment-status-grid small { color: #8d9289; font-size: .63rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.payment-status-grid strong { margin-top: .15rem; color: #292e28; }
.payment-status-grid p { margin: .2rem 0 0; color: #7a8076; font-size: .75rem; }
.payment-action-panel { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.15rem; border: 1px solid #ead2a3; border-radius: 13px; background: #fff8e9; }
.payment-action-panel > i { color: #9c6c17; font-size: 1.2rem; }
.payment-action-panel > div { min-width: 0; flex: 1; }
.payment-action-panel h3 { margin: 0; color: #5d481f; font-size: 1rem; font-weight: 850; }
.payment-action-panel p { margin: .2rem 0 0; color: #7c6842; font-size: .8rem; }
.payment-action-panel button { border: 0; color: #fff; background: #7c641e; border-radius: 8px; padding: .65rem .85rem; font-weight: 800; }
.payment-metrics-grid article { padding: 1.3rem; border: 1px solid #e3e2da; border-radius: 14px; background: #fff; }
.payment-metrics-grid span, .payment-metrics-grid strong, .payment-metrics-grid small { display: block; }
.payment-metrics-grid span { color: #7e837a; font-size: .68rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.payment-metrics-grid strong { margin: .45rem 0 .25rem; color: #20251f; font-size: 1.7rem; }
.payment-metrics-grid small { color: #93978f; font-size: .74rem; }
.payment-panels-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 1rem; align-items: start; }
.payment-payout-list { padding: .35rem 1.1rem 1rem; }
.payment-payout-list article { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .9rem 0; border-bottom: 1px solid #ecece7; }
.payment-payout-list article:last-child { border-bottom: 0; }
.payment-payout-mark { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; color: #59604f; background: #eff1eb; }
.payment-payout-mark.paid { color: #42602c; background: #e7f0df; }
.payment-payout-list strong, .payment-payout-list small { display: block; }
.payment-payout-list small { margin-top: .15rem; color: #969a92; font-size: .7rem; }
.payment-payout-list article > span:last-child { color: #656b61; font-size: .7rem; font-weight: 850; }
@media (max-width: 991px) {
  .payment-connect-hero { grid-template-columns: auto 1fr; }
  .payment-connect-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .payment-panels-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .payment-status-grid, .payment-metrics-grid { grid-template-columns: 1fr; }
  .payment-connect-hero { grid-template-columns: 1fr; }
  .payment-connect-icon { width: 52px; height: 52px; }
  .payment-connect-actions { grid-column: auto; }
  .payment-action-panel { align-items: flex-start; flex-wrap: wrap; }
}