/* ==========================================================================
   Bhaturewala token / guest experience
   Light theme only. Loads after the legacy sheets and intentionally overrides.
   ========================================================================== */

:root {
  --t-teal: #077e78;
  --t-ink: #123a38;
  --t-gold: #f6b819;
  --t-pink: #e11c79;
  --t-cream: #ffeac8;
  --t-paper: #fff8ea;
  --t-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --t-body: "DM Sans", Arial, Helvetica, sans-serif;
}

html {
  background: var(--t-paper);
}

body {
  margin: 0;
  color: var(--t-ink);
  background: var(--t-paper);
  font-family: var(--t-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.guest-experience,
.guest-experience *,
.guest-experience *::before,
.guest-experience *::after,
.bw-story,
.bw-story *,
.bw-story *::before,
.bw-story *::after,
.token-ticket,
.token-ticket *,
.token-ticket *::before,
.token-ticket *::after {
  box-sizing: border-box;
}

.guest-experience img,
.bw-story img,
.token-ticket img {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Guest experience layout
   -------------------------------------------------------------------------- */

.guest-experience {
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr) !important;
  column-gap: clamp(36px, 5vw, 76px) !important;
  row-gap: 32px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 48px) 56px !important;
  color: var(--t-ink) !important;
  background: transparent !important;
  font-family: var(--t-body) !important;
}

.guest-experience .brand-story {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.guest-experience .brand-headline {
  margin: 0 !important;
  color: var(--t-ink) !important;
  font-family: var(--t-display) !important;
  font-size: clamp(56px, 6vw, 92px) !important;
  font-weight: 800 !important;
  line-height: 0.92 !important;
  letter-spacing: -0.01em !important;
}

.guest-experience .hero-line {
  margin: 14px 0 22px !important;
  color: var(--t-ink) !important;
  font-family: var(--t-body) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

.guest-experience .hero-photo {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: 3 / 2 !important;
  overflow: visible !important;
  border: 6px solid var(--t-teal) !important;
  border-radius: 0 !important;
  background: var(--t-ink) !important;
  box-shadow: 10px 10px 0 var(--t-gold) !important;
  transform: rotate(-1.2deg) !important;
}

.guest-experience .hero-photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: 50% 74% !important;
}

.guest-experience .hero-photo figcaption {
  position: absolute !important;
  left: -6px !important;
  bottom: 18px !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 6px 14px !important;
  color: #ffffff !important;
  background: var(--t-pink) !important;
  font-family: var(--t-display) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.06em !important;
}

/* --------------------------------------------------------------------------
   Reservation column / panel shell
   -------------------------------------------------------------------------- */

.guest-experience .reservation-column {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 500px !important;
  justify-self: end !important;
}

.guest-experience .reservation-column .reservation-panel {
  width: 100% !important;
  max-width: none !important;
}

.reservation-inner {
  padding: 28px !important;
  color: var(--t-ink) !important;
  background: var(--t-paper) !important;
  border-radius: 2px !important;
}

.reservation-panel .card,
.reservation-panel .menu-intro,
.reservation-panel .drop-status {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.reservation-panel .drop-status::before,
.reservation-panel .drop-status::after {
  display: none !important;
}

.reservation-panel .page-heading {
  margin: 0 !important;
  color: var(--t-ink) !important;
  font-family: var(--t-display) !important;
  font-size: 40px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* --------------------------------------------------------------------------
   Countdown — the dark panel moment
   -------------------------------------------------------------------------- */

.reservation-inner:has(.drop-status--scheduled) {
  padding: 40px 24px 34px !important;
  color: #ffffff !important;
  background: var(--t-ink) !important;
  text-align: center !important;
}

.drop-status--scheduled .drop-kicker {
  margin: 0 !important;
  color: var(--t-gold) !important;
  font-family: var(--t-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.drop-status--scheduled .drop-headline {
  margin: 10px 0 22px !important;
  color: #ffffff !important;
  font-family: var(--t-display) !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.drop-status--scheduled .drop-headline span {
  display: block !important;
  color: var(--t-gold) !important;
  font-size: 64px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.drop-countdown {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  list-style: none !important;
}

.drop-count {
  display: flex !important;
  flex: none !important;
  flex-direction: column !important;
  align-items: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
}

.drop-count.drop-count--zero {
  display: none !important;
}

.drop-count__value {
  display: block !important;
  color: #ffffff !important;
  font-family: var(--t-display) !important;
  font-size: clamp(84px, 9vw, 124px) !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 0.95 !important;
}

.drop-count + .drop-count:not(.drop-count--zero) {
  position: relative !important;
  margin-left: 30px !important;
}

.drop-count + .drop-count:not(.drop-count--zero)::before {
  content: ":" !important;
  position: absolute !important;
  top: 0 !important;
  left: -26px !important;
  display: block !important;
  color: var(--t-pink) !important;
  font-family: var(--t-display) !important;
  font-size: clamp(84px, 9vw, 124px) !important;
  font-weight: 800 !important;
  line-height: 0.95 !important;
}

.drop-count--zero + .drop-count {
  margin-left: 0 !important;
}

.drop-count--zero + .drop-count::before {
  display: none !important;
}

.drop-count__label {
  display: block !important;
  margin-top: 8px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: var(--t-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

.drop-status--scheduled .drop-facts {
  margin: 24px 0 6px !important;
  color: #ffffff !important;
  font-family: var(--t-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

.drop-status--scheduled .drop-note {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: var(--t-body) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* --------------------------------------------------------------------------
   Time slots
   -------------------------------------------------------------------------- */

.slot-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.slot-option {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px 14px 12px !important;
  color: var(--t-ink) !important;
  background: #ffffff !important;
  border: 2px solid var(--t-ink) !important;
  border-radius: 4px !important;
  box-shadow: 3px 3px 0 var(--t-ink) !important;
  font-family: var(--t-body) !important;
  text-align: left !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  transition: transform 0.08s ease, box-shadow 0.08s ease !important;
}

.slot-option:hover:not(:disabled) {
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0 var(--t-ink) !important;
}

.slot-option:focus-visible {
  outline: 3px solid var(--t-gold) !important;
  outline-offset: 2px !important;
}

.slot-time {
  display: block !important;
  color: var(--t-ink) !important;
  font-family: var(--t-display) !important;
  font-size: 46px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.slot-until {
  display: block !important;
  color: rgba(18, 58, 56, 0.7) !important;
  font-family: var(--t-body) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.slot-info {
  display: block !important;
  margin-top: 8px !important;
  color: var(--t-teal) !important;
  font-family: var(--t-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.slot-option.selected {
  background: var(--t-pink) !important;
  border-color: var(--t-ink) !important;
  box-shadow: 3px 3px 0 var(--t-gold) !important;
}

.slot-option.selected .slot-time,
.slot-option.selected .slot-until,
.slot-option.selected .slot-info {
  color: #ffffff !important;
}

.slot-option:disabled {
  opacity: 0.45 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* --------------------------------------------------------------------------
   Plates / menu cards
   -------------------------------------------------------------------------- */

.reservation-panel .menu-card {
  margin: 0 !important;
  padding: 16px !important;
  color: var(--t-ink) !important;
  background: #ffffff !important;
  border: 2px solid var(--t-ink) !important;
  border-radius: 4px !important;
  box-shadow: 3px 3px 0 var(--t-ink) !important;
}

.reservation-panel .menu-card--picked {
  border-color: var(--t-pink) !important;
  box-shadow: 3px 3px 0 var(--t-pink) !important;
}

.reservation-panel .menu-card h2 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 8px !important;
  color: var(--t-ink) !important;
  font-family: var(--t-display) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

.food-mark {
  position: relative !important;
  display: inline-block !important;
  flex: none !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 2px solid var(--t-teal) !important;
  border-radius: 50% !important;
}

.food-mark::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--t-teal) !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.reservation-panel .menu-card--mutton .food-mark {
  border-color: #8c1d2f !important;
}

.reservation-panel .menu-card--mutton .food-mark::after {
  background: #8c1d2f !important;
}

/* --------------------------------------------------------------------------
   Token ticket
   -------------------------------------------------------------------------- */

.token-ticket {
  width: 100% !important;
  max-width: 440px !important;
  margin: 28px auto 48px !important;
  padding: 0 !important;
  color: var(--t-ink) !important;
  background: var(--t-paper) !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: 10px 10px 0 var(--t-gold) !important;
  outline: 3px solid var(--t-teal) !important;
  overflow: hidden !important;
}

.token-head {
  padding: 20px 20px 18px !important;
  color: #ffffff !important;
  background: var(--t-pink) !important;
  text-align: center !important;
}

.token-head img {
  display: block !important;
  width: auto !important;
  height: 84px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

.token-youre-in {
  margin: 8px 0 0 !important;
  color: #ffffff !important;
  font-family: var(--t-display) !important;
  font-size: 64px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.token-time {
  padding: 22px 20px 16px !important;
  text-align: center !important;
}

.token-ticket .label {
  display: block !important;
  color: rgba(18, 58, 56, 0.7) !important;
  font-family: var(--t-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.token-time strong {
  display: block !important;
  color: var(--t-ink) !important;
  font-family: var(--t-display) !important;
  font-size: 68px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.token-date {
  margin: 4px 0 0 !important;
  color: var(--t-ink) !important;
  font-family: var(--t-body) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.token-tear {
  position: relative !important;
  height: 0 !important;
  margin: 0 18px !important;
  border-top: 3px dashed rgba(18, 58, 56, 0.35) !important;
}

.token-tear::before,
.token-tear::after {
  content: "" !important;
  position: absolute !important;
  top: -14px !important;
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  background: #fff3dc !important;
  border-radius: 50% !important;
}

.token-tear::before {
  left: -31px !important;
}

.token-tear::after {
  right: -31px !important;
}

.token-body {
  padding: 20px 22px 8px !important;
}

.ticket-number {
  margin: 0 !important;
  color: var(--t-teal) !important;
  font-family: var(--t-display) !important;
  font-size: 44px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.ticket-number .label {
  display: block !important;
}

.token-dishes {
  margin: 8px 0 14px !important;
  color: var(--t-ink) !important;
  font-family: var(--t-body) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

.token-rows {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.token-rows strong {
  display: block !important;
  color: var(--t-ink) !important;
  font-family: var(--t-body) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.token-show {
  margin: 16px 0 8px !important;
  color: var(--t-pink) !important;
  font-family: var(--t-display) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-align: center !important;
}

.token-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 8px 22px 22px !important;
}

.token-actions button,
.token-actions .button {
  flex: 1 1 150px !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  color: #ffffff !important;
  background: var(--t-teal) !important;
  border: 2px solid var(--t-ink) !important;
  border-radius: 4px !important;
  box-shadow: 3px 3px 0 var(--t-ink) !important;
  font-family: var(--t-body) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
}

/* --------------------------------------------------------------------------
   Story page
   -------------------------------------------------------------------------- */

.bw-story {
  color: var(--t-ink) !important;
  background: var(--t-paper) !important;
  font-family: var(--t-body) !important;
}

.bw-story-hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--t-pink) !important;
}

.bw-story-hero__shade {
  display: none !important;
}

.bw-story-hero__photo {
  position: static !important;
  order: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 720px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: 50% 18% !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

.bw-story-hero__copy {
  position: static !important;
  order: 1 !important;
  align-self: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 56px clamp(24px, 6vw, 88px) !important;
  transform: none !important;
}

.bw-story-hero__title {
  margin: 0 !important;
  color: #ffffff !important;
  font-family: var(--t-display) !important;
  font-size: clamp(56px, 6.4vw, 104px) !important;
  font-weight: 800 !important;
  line-height: 0.94 !important;
}

.bw-story-hero__title span {
  display: block !important;
  color: var(--t-gold) !important;
}

.bw-story-hero__line {
  margin: 18px 0 0 !important;
  color: #ffffff !important;
  font-family: var(--t-body) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

.bw-story-hero__copy .bw-story-kicker {
  display: inline-block !important;
  margin: 0 0 14px !important;
  color: var(--t-cream) !important;
  font-family: var(--t-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.bw-story-rule {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Demo controls
   -------------------------------------------------------------------------- */

.reservation-column > .drop-preview {
  margin-top: 22px !important;
  padding: 0 !important;
  color: rgba(18, 58, 56, 0.7) !important;
  background: none !important;
  border: 0 !important;
  font-family: var(--t-body) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* --------------------------------------------------------------------------
   Phone — everything stacks at 700px and below
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  .guest-experience {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
    padding: 20px 16px 36px !important;
  }

  .guest-experience .brand-headline {
    font-size: clamp(50px, 15vw, 72px) !important;
  }

  .guest-experience .hero-photo {
    width: calc(100% - 6px) !important;
    aspect-ratio: 4 / 3 !important;
    box-shadow: 6px 6px 0 var(--t-gold) !important;
    transform: none !important;
  }

  .guest-experience .reservation-column {
    max-width: none !important;
  }

  .reservation-inner {
    padding: 22px 18px !important;
  }

  .reservation-inner:has(.drop-status--scheduled) {
    padding: 30px 14px 28px !important;
  }

  .drop-countdown {
    gap: 4px !important;
  }

  .drop-count + .drop-count:not(.drop-count--zero) {
    margin-left: 24px !important;
  }

  .drop-count + .drop-count:not(.drop-count--zero)::before {
    left: -21px !important;
  }

  .token-ticket {
    width: calc(100% - 12px) !important;
    margin: 24px auto 40px !important;
  }

  .token-time strong {
    font-size: 56px !important;
  }

  .bw-story-hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .bw-story-hero__photo {
    order: 2 !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  .bw-story-hero__copy {
    order: 1 !important;
    padding: 48px 24px 42px !important;
  }
}

@media (max-width: 400px) {
  .drop-count__value,
  .drop-count + .drop-count:not(.drop-count--zero)::before {
    font-size: 84px !important;
  }

  .token-actions {
    padding: 8px 18px 18px !important;
  }
}

/* QA pass */
.drop-status--open { margin-bottom: 18px !important; }
.drop-status--open .drop-hint { display: none !important; }
.drop-statusline { margin: 0 !important; font-size: 14px !important; }
.reservation-panel .page-heading { margin: 0 0 4px !important; }
.reservation-panel .booking-helper { margin: 0 0 14px !important; }
.guest-experience .slot-option { padding: 10px 12px !important; }
.guest-experience .slot-time { font-size: 38px !important; }
.guest-experience .slot-info { margin-top: 4px !important; }
.guest-experience .hero-photo { max-height: 400px !important; }
@media (max-width: 700px) {
  .guest-experience .hero-photo { max-height: none !important; }
}
.drop-countdown .drop-count.drop-count--zero + .drop-count:not(.drop-count--zero) { margin-left: 0 !important; }
.drop-countdown .drop-count.drop-count--zero + .drop-count:not(.drop-count--zero)::before { display: none !important; }
.reservation-panel .choice .hint { display: block !important; }
.token-actions .button { white-space: nowrap !important; }
.drop-countdown .drop-count + .drop-count:not(.drop-count--zero)::before { left: -30px !important; }
@media (max-width: 700px) {
  .guest-experience .hero-photo { aspect-ratio: 16 / 10 !important; }
  .guest-experience .hero-photo img { object-position: 50% 72% !important; }
  .guest-experience .hero-photo figcaption { font-size: 17px !important; bottom: 10px !important; }
  .drop-countdown .drop-count + .drop-count:not(.drop-count--zero)::before { left: -25px !important; }
}
.guest-experience .hero-photo { min-height: 0 !important; }
.guest-experience .hero-photo img { position: absolute !important; inset: 0 !important; }
.reservation-panel .page-heading { line-height: 1 !important; }
.reservation-panel .choice:has(input:checked) { border-color: var(--t-pink) !important; box-shadow: 3px 3px 0 var(--t-pink) !important; }
@media (max-width: 700px) {
  .guest-experience { gap: 18px !important; padding-top: 14px !important; }
  .guest-experience .hero-line { margin: 8px 0 12px !important; font-size: 18px !important; }
  .guest-experience .hero-photo { aspect-ratio: 16 / 9 !important; }
  .reservation-panel .booking-helper { margin-top: 6px !important; }
}
@media (max-width: 700px) {
  .guest-experience .hero-photo img { object-position: 50% 60% !important; }
}

/* Remaining flow screens */
/* Details step */
.order-slip {
  background: white !important;
  border: 2px solid var(--t-ink) !important;
  border-radius: 4px !important;
  box-shadow: 3px 3px 0 var(--t-ink) !important;
  padding: 14px 16px !important;
  margin: 12px 0 18px !important;
}
.order-slip__time .label {
  display: block !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  color: rgba(18,58,56,.7) !important;
}
.order-slip__time strong {
  display: block !important;
  font-family: var(--t-display) !important;
  font-weight: 800 !important;
  font-size: 40px !important;
  line-height: 1 !important;
  color: var(--t-ink) !important;
}
.order-slip__time .hint {
  display: block !important;
  font-size: 13px !important;
  margin: 2px 0 0 !important;
}
.order-slip__dishes {
  border-top: 2px dashed rgba(18,58,56,.3) !important;
  margin-top: 10px !important;
  padding-top: 8px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}
.order-slip__dishes .row {
  display: flex !important;
  justify-content: space-between !important;
  margin: 0 !important;
  padding: 2px 0 !important;
}
.order-slip .button.quiet {
  padding: 0 !important;
  margin-top: 6px !important;
  min-height: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--t-teal) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}
.reservation-panel .form-field .label {
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  font-weight: 700 !important;
  color: var(--t-ink) !important;
  display: block !important;
  margin-bottom: 5px !important;
}
.reservation-panel .form-field input {
  width: 100% !important;
  height: 50px !important;
  background: white !important;
  border: 2px solid var(--t-ink) !important;
  border-radius: 4px !important;
  padding: 0 14px !important;
  font-size: 16px !important;
  box-shadow: none !important;
}
.reservation-panel .form-field input:focus {
  outline: 3px solid var(--t-gold) !important;
  outline-offset: 1px !important;
}
.reservation-panel .choice-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
.reservation-panel .choice {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  background: white !important;
  border: 2px solid var(--t-ink) !important;
  border-radius: 4px !important;
  padding: 12px !important;
  margin: 0 !important;
  cursor: pointer !important;
  box-shadow: 3px 3px 0 var(--t-ink) !important;
}
.reservation-panel .choice input {
  accent-color: var(--t-pink) !important;
  flex: none !important;
  margin: 2px 0 0 !important;
  width: 18px !important;
  height: 18px !important;
}
.reservation-panel .choice strong {
  display: block !important;
  font-family: var(--t-display) !important;
  font-weight: 800 !important;
  font-size: 21px !important;
  line-height: 1.05 !important;
}
.reservation-panel .choice .hint {
  font-size: 12px !important;
  margin: 2px 0 0 !important;
}
.details-note {
  font-size: 13px !important;
  margin: 10px 0 0 !important;
}

/* Review dialog */
#dialog {
  background: var(--t-paper) !important;
  border: 4px solid var(--t-teal) !important;
  border-radius: 6px !important;
  box-shadow: 10px 10px 0 var(--t-gold) !important;
  padding: 0 !important;
  width: min(440px, calc(100vw - 40px)) !important;
  color: var(--t-ink) !important;
}
#dialog::backdrop {
  background: rgba(18,58,56,.72) !important;
}
#dialog .modal-inner {
  background: transparent !important;
  padding: 24px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#dialog h2 {
  font-family: var(--t-display) !important;
  font-weight: 800 !important;
  font-size: 34px !important;
  line-height: 1 !important;
  margin: 0 0 14px !important;
}
#dialog .row {
  display: grid !important;
  grid-template-columns: 72px 1fr !important;
  gap: 10px !important;
  align-items: baseline !important;
  padding: 7px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(18,58,56,.15) !important;
  font-size: 14px !important;
}
#dialog .row strong {
  text-align: right !important;
  font-size: 15px !important;
  min-width: 0 !important;
}
#dialog .order-total {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  padding-top: 10px !important;
  margin: 0 !important;
  border: 0 !important;
}
#dialog .order-total strong {
  font-family: var(--t-display) !important;
  font-weight: 800 !important;
  font-size: 34px !important;
}
#dialog .notice {
  background: var(--t-cream) !important;
  border: 0 !important;
  border-radius: 2px !important;
  margin: 12px 0 0 !important;
  font-size: 13px !important;
  padding: 10px 12px !important;
}
#dialog .modal-actions {
  display: grid !important;
  grid-template-columns: 1fr 1.5fr !important;
  gap: 10px !important;
  margin-top: 18px !important;
}
#dialog .modal-actions .button {
  width: 100% !important;
  min-height: 50px !important;
  white-space: normal !important;
  border-radius: 4px !important;
}

/* Sold out */
.reservation-inner:has(.drop-status--soldout) {
  background: var(--t-pink) !important;
  color: white !important;
  text-align: center !important;
  padding: 40px 24px 34px !important;
}
.drop-status--soldout .drop-kicker {
  color: var(--t-gold) !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  font-weight: 700 !important;
}
.drop-status--soldout .drop-headline {
  font-family: var(--t-display) !important;
  font-weight: 800 !important;
  color: white !important;
  font-size: 56px !important;
  line-height: .98 !important;
  margin: 10px 0 14px !important;
}
.drop-status--soldout .drop-lede {
  color: white !important;
  font-size: 16px !important;
  margin: 0 0 20px !important;
}
.drop-status--soldout .drop-btn--primary {
  background: var(--t-gold) !important;
  color: var(--t-ink) !important;
  border: 2px solid var(--t-ink) !important;
  border-radius: 4px !important;
  box-shadow: 3px 3px 0 var(--t-ink) !important;
  min-height: 52px !important;
  width: 100% !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}
.drop-status--soldout .drop-actions {
  display: block !important;
  margin: 0 !important;
}

/* Paused and closed */
.reservation-inner:has(.drop-status--paused),
.reservation-inner:has(.drop-status--closed) {
  background: var(--t-ink) !important;
  color: white !important;
  text-align: center !important;
  padding: 40px 24px 34px !important;
}
.drop-status--paused .drop-kicker,
.drop-status--closed .drop-kicker {
  color: var(--t-gold) !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
}
.drop-status--paused .drop-headline,
.drop-status--closed .drop-headline {
  font-family: var(--t-display) !important;
  font-weight: 800 !important;
  color: white !important;
  font-size: 52px !important;
  line-height: 1 !important;
  margin: 10px 0 12px !important;
}
.drop-status--paused .drop-lede,
.drop-status--closed .drop-lede {
  color: rgba(255,255,255,.85) !important;
  font-size: 16px !important;
  margin: 0 !important;
}

/* Waiting list */
.waitlist-panel,
.waitlist-confirm {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.waitlist-kicker {
  color: var(--t-pink) !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  font-weight: 700 !important;
  margin: 0 0 6px !important;
}
.waitlist-panel h2,
.waitlist-confirm h2 {
  font-family: var(--t-display) !important;
  font-weight: 800 !important;
  font-size: 40px !important;
  line-height: 1 !important;
  color: var(--t-ink) !important;
  margin: 0 0 8px !important;
}
.waitlist-lede {
  font-size: 15px !important;
  margin: 0 0 16px !important;
}
.waitlist-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
.waitlist-field {
  min-width: 0 !important;
}
.waitlist-field label {
  display: block !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  font-weight: 700 !important;
  margin-bottom: 5px !important;
}
.waitlist-field input,
.waitlist-field select {
  width: 100% !important;
  height: 50px !important;
  background: white !important;
  border: 2px solid var(--t-ink) !important;
  border-radius: 4px !important;
  padding: 0 12px !important;
  font-size: 16px !important;
}
.waitlist-help {
  font-size: 12px !important;
  margin: 4px 0 0 !important;
}
.waitlist-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 16px !important;
}
.waitlist-actions .drop-btn {
  width: 100% !important;
  min-height: 50px !important;
  border-radius: 4px !important;
}
.waitlist-fineprint,
.waitlist-note {
  font-size: 13px !important;
  margin: 12px 0 0 !important;
  color: rgba(18,58,56,.75) !important;
}
.waitlist-summary {
  list-style: none !important;
  padding: 12px 14px !important;
  margin: 0 0 12px !important;
  background: white !important;
  border: 2px solid var(--t-ink) !important;
  border-radius: 4px !important;
  box-shadow: 3px 3px 0 var(--t-ink) !important;
}
.waitlist-summary li {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 3px 0 !important;
}

@media (max-width: 700px) {
  .waitlist-grid {
    grid-template-columns: 1fr !important;
  }
  .drop-status--soldout .drop-headline {
    font-size: 46px !important;
  }
}
.reservation-panel .choice .hint { font-weight: 400 !important; }
.reservation-inner:has(.drop-status--paused) > .error,
.reservation-inner:has(.drop-status--closed) > .error,
.reservation-inner:has(.drop-status--soldout) > .error { display: none !important; }

/* Pickup code and scanner */
.scan-sheet {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  background: rgba(18, 58, 56, .78) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  overflow: auto !important;
}

.scan-sheet__box {
  position: relative !important;
  width: min(460px, 100%) !important;
  max-height: calc(100vh - 32px) !important;
  overflow: auto !important;
  background: var(--t-paper) !important;
  border: 4px solid var(--t-teal) !important;
  border-radius: 6px !important;
  box-shadow: 8px 8px 0 var(--t-gold) !important;
  padding: 22px !important;
  color: var(--t-ink) !important;
  font-family: var(--t-body) !important;
}

.scan-sheet__close {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 40px !important;
  height: 40px !important;
  background: none !important;
  border: 0 !important;
  font-size: 28px !important;
  line-height: 1 !important;
  color: var(--t-ink) !important;
  cursor: pointer !important;
}

.scan-title {
  font-family: var(--t-display) !important;
  font-weight: 800 !important;
  font-size: 34px !important;
  line-height: 1 !important;
  margin: 0 44px 14px 0 !important;
}

.scan-camera {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: var(--t-ink) !important;
  overflow: hidden !important;
  border-radius: 4px !important;
}

.scan-camera[hidden] {
  display: none !important;
}

.scan-camera video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.scan-frame {
  position: absolute !important;
  inset: 16% !important;
  border: 4px solid var(--t-gold) !important;
  border-radius: 8px !important;
}

.scan-status {
  font-size: 14px !important;
  margin: 10px 0 !important;
}

.scan-result[hidden] {
  display: none !important;
}

.scan-verdict {
  font-family: var(--t-display) !important;
  font-weight: 800 !important;
  font-size: 28px !important;
  padding: 8px 12px !important;
  margin: 0 0 12px !important;
  border-radius: 3px !important;
  text-align: center !important;
}

.scan-verdict--ok {
  background: var(--t-teal) !important;
  color: white !important;
}

.scan-verdict--bad {
  background: var(--t-pink) !important;
  color: white !important;
}

.scan-token {
  font-family: var(--t-display) !important;
  font-weight: 800 !important;
  font-size: 56px !important;
  line-height: 1 !important;
  color: var(--t-teal) !important;
  margin: 0 !important;
  text-align: center !important;
}

.scan-time {
  font-family: var(--t-display) !important;
  font-weight: 800 !important;
  font-size: 32px !important;
  line-height: 1.1 !important;
  margin: 2px 0 10px !important;
  text-align: center !important;
}

.scan-details {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
  font-size: 15px !important;
  text-align: center !important;
}

.scan-note {
  font-size: 13px !important;
  margin: 0 0 12px !important;
  color: rgba(18, 58, 56, .75) !important;
}

.scan-result .button {
  width: 100% !important;
  min-height: 50px !important;
  margin-top: 8px !important;
}

.scan-type {
  margin-top: 12px !important;
}

.scan-type label {
  display: block !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  font-weight: 700 !important;
  margin-bottom: 5px !important;
}

.scan-type > div {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 8px !important;
}

.scan-type input {
  height: 48px !important;
  width: 100% !important;
  background: white !important;
  border: 2px solid var(--t-ink) !important;
  border-radius: 4px !important;
  padding: 0 12px !important;
  font-size: 16px !important;
}

.scan-photo {
  display: block !important;
  text-align: center !important;
  margin-top: 10px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  text-decoration: underline !important;
  color: var(--t-teal) !important;
  background: none !important;
  border: 0 !important;
}

.token-qr {
  display: block !important;
  width: 200px !important;
  margin: 0 auto 6px !important;
}

.token-qr svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.token-qr-wrap {
  padding: 18px 22px 2px !important;
  text-align: center !important;
}

.token-qr-help {
  font-size: 13px !important;
  margin: 0 !important;
  color: rgba(18, 58, 56, .8) !important;
}

.token-email {
  margin: 10px 0 0 !important;
  font-size: 14px !important;
  text-align: center !important;
}

.token-email button {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--t-teal) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  font-size: 14px !important;
}

.email-preview {
  background: white !important;
  border: 1px solid rgba(18, 58, 56, .2) !important;
  border-radius: 4px !important;
  padding: 18px !important;
  text-align: center !important;
  margin-top: 10px !important;
}

.email-preview h3 {
  font-family: var(--t-display) !important;
  font-weight: 800 !important;
  font-size: 30px !important;
  margin: 0 0 6px !important;
}

.email-preview .token-qr {
  width: 180px !important;
}

.email-meta {
  font-size: 13px !important;
  margin: 0 !important;
  text-align: left !important;
  color: rgba(18, 58, 56, .8) !important;
}

.email-demo {
  font-size: 13px !important;
  margin: 12px 0 0 !important;
  background: var(--t-cream) !important;
  padding: 8px 10px !important;
  border-radius: 2px !important;
}

.manager-scan-button {
  min-height: 54px !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  font-size: 17px !important;
}

/* Booking lookup and message previews */
.find-link{margin:16px 0 0;text-align:center}
.find-link button{background:none;border:0;padding:8px;font:inherit;font-weight:700;color:var(--teal,#14706a);text-decoration:underline;cursor:pointer}
.token-ticket .token-time--actual .label{color:#c81e2b !important;font-weight:700}
.token-ticket .token-time--actual strong{color:#c81e2b !important}
.whatsapp-bubble{background:#dcf8c6;color:#16302b;border-radius:12px;padding:12px 14px;margin:12px 0;line-height:1.45}
.booking-actions{display:flex !important;flex-wrap:wrap !important;gap:8px !important}

/* Queue, opening slots and menu groups */
.slot-list--open{grid-template-columns:1fr !important}
.slot-list--open .slot-option{flex-direction:row !important;align-items:center !important;justify-content:space-between !important;gap:12px !important}
.slot-panel{padding:4px 0 12px !important}
.order-page .stack{display:grid;gap:10px}
.menu-group{margin:14px 0 8px !important;font-size:17px !important;color:var(--t-ink) !important}
.gate-card{text-align:left}
.gate-card .button{margin-top:14px !important}
.gate-live{display:flex;align-items:center;gap:8px;margin-top:12px;font-weight:700}
.order-page .menu-card{padding:10px 12px !important}
.order-page .menu-card h2{font-size:19px !important;line-height:1.1 !important;margin:0 0 3px !important}
.order-page .menu-card .hint{font-size:13px !important;margin:0 !important}
.order-page .menu-card .row{flex-wrap:nowrap !important;align-items:center !important;gap:8px !important}
.order-page .qty{flex:none !important}
.order-page .qty .button{min-width:36px !important;min-height:36px !important;width:36px !important;padding:0 !important}
.reservation-inner:has(.drop-status--closed) .find-link button,.reservation-inner:has(.drop-status--scheduled) .find-link button{color:#fff4dc !important}

.slot-panel{padding:12px 14px !important;border:2px solid var(--t-ink);border-top:0;margin-top:-10px;background:#fff}
.slot-count{margin:0 0 2px;font-size:18px}
.slot-count strong{font-family:var(--t-display);font-size:28px;color:var(--t-pink)}
.slot-panel .button{margin-top:10px !important}
.slot-chevron{font-size:18px}
.slot-option.selected .slot-chevron{color:#fff !important}

/* Management orders */
.order-group{display:flex;align-items:baseline;justify-content:space-between;margin:28px 0 12px !important;padding-bottom:8px;border-bottom:2px solid var(--t-ink);font-family:var(--t-display);font-size:26px !important;color:var(--t-ink)}
.order-group small{font-family:var(--t-body);font-size:15px;font-weight:700}
.order-card{margin:0 0 16px;padding:18px;background:#fff;border:2px solid var(--t-ink);border-radius:6px;color:var(--t-ink)}
.order-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.order-token{margin:0 !important;font-family:var(--t-display);font-size:32px;font-weight:800;line-height:1}
.order-name{margin:6px 0 0 !important;font-size:17px;font-weight:700}
.order-status{flex:none;padding:5px 11px;border-radius:999px;font-size:14px;font-weight:700;background:#e8efee;color:var(--t-ink)}
.order-card--preparing .order-status{background:#ffe9b3}
.order-card--ready .order-status{background:var(--t-teal);color:#fff}
.order-card--collected{opacity:.7}
.order-moved{margin:0 0 12px !important;padding:8px 11px;background:#fdecec;color:#b3202c;border-radius:4px;font-weight:700}
.order-items{list-style:none;margin:0 0 14px !important;padding:0 !important;border-top:1px solid #dfe5e3}
.order-items li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #dfe5e3;font-size:17px;line-height:1.3}
.order-items strong{flex:none}
.order-facts{display:grid;gap:10px;margin:0 0 16px !important}
.order-facts div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;align-items:baseline}
.order-facts dt{font-size:14px;color:#5b706d}
.order-facts dd{margin:0 !important;font-size:16px;font-weight:600;overflow-wrap:anywhere}
.order-next{display:block;width:100%;min-height:52px}
.order-tells{margin:8px 0 0 !important;text-align:center;font-size:14px;color:#5b706d}
.order-more{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.order-more .button{flex:1 1 140px;min-height:44px}
.manager-toolbar{margin:18px 0 !important}
.manager-toolbar .tabs{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;width:100% !important}
.manager-toolbar .tabs .button{min-width:0 !important;padding-left:6px !important;padding-right:6px !important}
.manager-scan-button{margin-top:16px !important}
.whatsapp-send{display:flex !important;align-items:center;justify-content:center;width:100%;min-height:52px;margin-top:10px;background:#128c4b !important;border-color:#128c4b !important;color:#fff !important;text-decoration:none !important}
.notify-note{margin:4px 0 14px !important;font-size:14px;color:#5b706d}
.order-notify{width:100%;margin-top:10px !important;min-height:44px}
/* Owner-confirmed opening hours and booking limit. */
.restaurant-hours{display:flex;flex-direction:column;gap:5px;font-size:14px;line-height:1.5;text-align:right;max-width:100%;}
@media(max-width:640px){.restaurant-hours{text-align:left}.site-footer .footer-inner{align-items:flex-start;flex-wrap:wrap;gap:18px}}
.footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:100%;font-size:14px;line-height:1.6}
.footer-contact a,.info-page a{color:#077e78;text-underline-offset:3px;overflow-wrap:anywhere}
.site-help{display:flex;flex-wrap:wrap;gap:8px 18px;max-width:360px}
.site-help a{padding:4px 0}
.info-page{width:min(900px,calc(100% - 32px));margin:36px auto 60px;flex:1;color:#123a38;font-family:var(--font-body);line-height:1.75}
.info-back{display:inline-block;margin-bottom:20px;font-weight:700}
.info-card{padding:clamp(22px,5vw,48px);border:2px solid #123a38;border-radius:16px;background:#fffdf7;box-shadow:5px 5px 0 #f6b819;overflow-wrap:anywhere}
.info-card h1{font-family:var(--font-display);font-size:clamp(36px,6vw,54px);line-height:1.1;margin:8px 0 18px}
.info-card h2{font-family:var(--font-display);font-size:26px;line-height:1.25;margin:28px 0 10px}
.info-card p{margin:10px 0 18px}
.info-card .info-date{font-size:14px;color:#5f706c}
.info-note,.policy-highlight{padding:16px 20px;border-left:4px solid #e11c79;background:#fff0f6;border-radius:4px}
.policy-highlight h2{margin-top:0}
.policy-highlight p{margin-bottom:0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.contact-grid h2:first-child{margin-top:10px}
.info-card address{font-style:normal}
.contact-number{font-size:clamp(26px,5vw,36px);font-weight:700}
.info-page .button{color:#fffdf7;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:640px){.contact-grid{grid-template-columns:1fr;gap:4px}.info-page{margin-top:24px}.info-card{box-shadow:3px 3px 0 #f6b819}}