/* ==========================================================================
   PUTU THE BALI CHEF - Quote calculator + thank-you page styles
   Loaded ONLY by /quote/ and /quote/thank-you/ (six languages each), after
   styles.css. Split out of styles.css because these ~2,000 lines were on the
   critical path of all 170 pages while 164 of them never render a calculator
   (Lighthouse: 80-85% of the stylesheet unused on every other template).
   Everything here reuses the tokens declared in styles.css.
   The phone overrides at the end of the calculator block must stay after the
   base rules they override: same specificity, so only source order wins.
   ========================================================================== */
/* ==========================================================================
   Quote Calculator
   ========================================================================== */

.page-header--compact {
  padding: var(--space-3xl) 0 var(--space-2xl);
  min-height: auto;
  background: var(--color-primary);
  color: var(--color-white);
}
.page-header--compact .page-header__title,
.page-header--compact .page-header__subtitle,
.page-header--compact .breadcrumbs,
.page-header--compact .breadcrumbs a,
.page-header--compact .breadcrumbs__sep {
  color: var(--color-white);
}
.page-header--compact .page-header__subtitle {
  color: rgba(255, 255, 255, 0.85);
  max-width: 640px;
}

.section--tight {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

/* ---- Layout ---- */
.quote-calc {
  padding: 0 0 var(--space-3xl);
}

/* A class that sets `display` outranks the user-agent's [hidden] rule, so
   every flex and grid container below would render even while hidden. This
   puts [hidden] back in charge across the calculator. */
.quote-calc [hidden] { display: none !important; }

/* On body.header-autohide pages — the calculator and its thank-you page —
   the fixed header gets out of the way while you scroll down and slides back
   the moment you scroll up. main.js drives the classes; the header keeps its
   own `transition: all`, which covers the transform. The calculator's desktop
   aside is pinned below the header, so it moves up with it rather than
   floating 96px down an empty strip. */
.header-autohide .header { will-change: transform; }
.header-autohide .header--hidden {
  transform: translateY(-100%);
  box-shadow: none;
}
@media (min-width: 960px) {
  .quote-aside { transition: top var(--transition-base); }
  .header-autohide.header-autohidden .quote-aside { top: var(--space-md); }
}

/* ---- Step header ---- */
.quote-head {
  max-width: 1180px;
  margin: 0 auto var(--space-lg);
  padding: var(--space-md) 0 0;
}
.quote-head__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.quote-head__back {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.quote-head__back svg { width: 18px; height: 18px; }
.quote-head__back:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary);
}
.quote-head__back:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.quote-head__titles { min-width: 0; }
.quote-head__count {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.quote-head__title {
  margin: 2px 0 0;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
}
.quote-head__bar {
  margin-top: var(--space-sm);
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-sand);
  overflow: hidden;
}
.quote-head__bar-fill {
  display: block;
  height: 100%;
  width: 20%;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  transition: width var(--transition-base);
}

/* ---- Layout ---- */
.quote-layout {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}
@media (min-width: 960px) {
  .quote-layout { grid-template-columns: minmax(0, 1fr) 340px; }
}

.quote-form {
  min-width: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
@media (max-width: 640px) {
  .quote-form { padding: var(--space-lg); }
}
/* The sticky bar is fixed 62px tall, 10px off the bottom, so the column needs
   clearance or it covers whatever ends the page. On the layout, not the form:
   inside the form it left a white void under the CTA once the FAQ panel moved
   out and became the last thing in the column. */
@media (max-width: 959px) {
  .quote-layout { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

.quote-step {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.quote-step__title { padding: 0; }
.quote-step__hint {
  margin: 0 0 var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: 1.55;
}
.quote-step__error {
  margin: var(--space-md) 0 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-error);
}
.quote-step__error:empty { display: none; }

.quote-note {
  margin: var(--space-lg) 0 0;
  padding: var(--space-md) var(--space-md);
  background: var(--color-cream);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: 1.55;
}
.quote-prefill-banner {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-primary-50);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* ---- Guest steppers ---- */
.quote-steppers {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.quote-stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
/* The label takes whatever the stepper leaves, not the other way round: on a
   390px phone the stepper is fixed-width and "Young children" was wrapping. */
.quote-stepper-row__label { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.quote-stepper-row__label label { cursor: pointer; }
.quote-stepper-row__sub {
  display: block;
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin-top: 1px;
}
.quote-stepper {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.quote-stepper__btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  background: var(--color-cream);
  color: var(--color-primary);
  font-size: 1.15rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.quote-stepper__btn:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.quote-stepper__btn:last-child { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.quote-stepper__btn:hover:not(:disabled) {
  background: var(--color-primary);
  color: var(--color-white);
}
.quote-stepper__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  z-index: 1;
}
.quote-stepper__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.quote-stepper__input,
.quote-stepper__value {
  min-width: 48px;
  height: 40px;
  padding: 0 6px;
  text-align: center;
  border: 1px solid var(--color-border);
  border-left: 0;
  border-right: 0;
  font-family: inherit;
  font-size: max(1rem, var(--text-base)); /* >=16px: no iOS focus zoom */
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -moz-appearance: textfield;
}
.quote-stepper__value {
  font-size: var(--text-xs);
  white-space: nowrap;
}
.quote-stepper__input::-webkit-outer-spin-button,
.quote-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* The handoff's 44px targets, where there is room for them. */
@media (min-width: 600px) {
  .quote-stepper__btn { width: 44px; height: 44px; }
  .quote-stepper__input,
  .quote-stepper__value { min-width: 56px; height: 44px; }
}

/* ---- Step 2: hint chip + calendar ---- */
.quote-hintchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-md);
  padding: 8px 14px;
  background: var(--color-cream);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.quote-hintchip__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  flex: 0 0 auto;
}

.quote-calendar {
  padding: var(--space-lg);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  max-width: 560px;
}
.quote-calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.quote-calendar__month {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-text);
  font-weight: 600;
  text-align: center;
  flex: 1;
}
.quote-calendar__nav {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-offwhite);
  color: var(--color-primary);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.quote-calendar__nav:hover:not(:disabled) {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.quote-calendar__nav:disabled { opacity: 0.3; cursor: not-allowed; }
.quote-calendar__nav:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.quote-calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.quote-calendar__weekdays span {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 0;
}
.quote-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
@media (max-width: 479px) {
  .quote-calendar { padding: var(--space-md); }
}
.qc-day {
  position: relative;
  aspect-ratio: 1 / 1;
  /* No minimum: aspect-ratio keeps the cell square at whatever width 1fr
     gives it. A 40px floor made seven cells 292px wide inside a 244px card
     on a phone, and the Sunday column was clipped. */
  min-height: 0;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-offwhite);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.qc-day__num { font-variant-numeric: tabular-nums; }
.qc-day:hover:not(:disabled):not(.qc-day--blank) {
  border-color: var(--color-primary);
  background: var(--color-primary-50);
}
.qc-day:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  z-index: 1;
}
.qc-day--blank {
  border: 0;
  background: transparent;
  cursor: default;
  pointer-events: none;
}
.qc-day--today { border-color: var(--color-secondary-light); }
.qc-day--past {
  color: var(--color-text-muted);
  background: transparent;
  cursor: not-allowed;
  opacity: 0.3;
}
.qc-day--chef {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}
.qc-day--chef:hover:not(:disabled) {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
}

/* ---- Step 3: meal cards ---- */
.quote-meals {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.meal-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.meal-card--open { border-color: var(--color-primary-100); }
.meal-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-md) var(--space-lg);
}
/* A 120px basis is the least the heading may be before the actions wrap under
   it ("Dinner / BBQ" is 96px), so the title is never clipped: with room the
   actions sit on the title line, without it they drop right-aligned below. */
.meal-card__heading {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1 1 120px;
  min-width: 0;
}
.meal-card__heading > div { min-width: 0; }
.meal-card__icon { font-size: 1.35rem; line-height: 1; }
.meal-card__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
}
.meal-card__fee {
  margin: 2px 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-light);
  /* Ellipsis rather than wrap, so the heading can shrink and the actions stay
     on the title line on a phone. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meal-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}
.meal-card__add {
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: var(--color-white);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
}
.meal-card__add:hover:not(:disabled) { background: var(--color-primary-dark); }
.meal-card__add:disabled { opacity: 0.45; cursor: not-allowed; }
.meal-card__add:focus-visible,
.meal-card__skip:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.meal-card__count {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-cream);
  border-radius: var(--radius-full);
  padding: 8px 14px;
  white-space: nowrap;
}
.meal-card__skip {
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text-light);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.meal-card__skip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.meal-card__panel {
  padding: 0 var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.meal-card__warn {
  margin: 0;
  padding: 0 var(--space-lg) var(--space-md);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
@media (max-width: 479px) {
  .meal-card__head { padding: var(--space-sm) var(--space-md); gap: var(--space-sm); }
  .meal-card__add { min-height: 40px; padding: 0 14px; }
  .meal-card__count { padding: 7px 10px; }
  .meal-card__skip { min-height: 36px; padding: 0 10px; }
}

/* Menu row: a grid of real buttons, never a button inside a button. */
.menu-row {
  display: grid;
  /* Four columns: name, price, stepper, info. The price and the stepper are
     never shown at once, so whichever is hidden collapses to zero. */
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 6px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  padding: 4px 6px;
  min-height: 52px;
}
.menu-row--active {
  background: var(--color-cream);
  border-color: var(--color-primary);
}
.menu-row__pick {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}
.menu-row__pick:disabled { cursor: not-allowed; opacity: 0.5; }
.menu-row__pick:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.menu-row__badge {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-text-disabled);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-white);
}
.menu-row--active .menu-row__badge {
  border-color: var(--color-primary);
  background: var(--color-primary);
}
.menu-row__name { min-width: 0; }
.menu-row__tag {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-secondary-text);
}
.menu-row__price {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-light);
  white-space: nowrap;
}
.menu-row__stepper .quote-stepper__btn {
  width: 34px;
  height: 34px;
  font-size: 1rem;
  background: var(--color-white);
}
.menu-row__stepper .quote-stepper__value {
  min-width: 48px;
  height: 34px;
}
.menu-row__info {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text-muted);
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: var(--text-xs);
  cursor: pointer;
  padding: 0;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.menu-row__info:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.menu-row__info:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* Phone widths: three columns — name, price, info — on one line. Only a row
   with a stepper (116px wide) drops it onto a second line; a closed row stays
   a single line so five menus do not become five double-height rows. */
@media (max-width: 479px) {
  .menu-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 44px;
  }
  .menu-row__pick { min-height: 40px; }
  .menu-row--active {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 4px;
    padding: 6px 8px 8px 6px;
  }
  .menu-row--active .menu-row__pick { grid-column: 1; grid-row: 1; }
  .menu-row--active .menu-row__info { grid-column: 2; grid-row: 1; }
  .menu-row--active .menu-row__stepper { grid-column: 1 / -1; grid-row: 2; justify-self: end; }
}

/* Advisory, not a blocker: says the meals do not cover every chef day. */
.quote-coverage {
  display: flex;
  gap: 10px;
  margin: var(--space-md) 0 0;
  padding: var(--space-md);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-secondary-dark);
  line-height: 1.55;
}
.quote-coverage strong { color: var(--color-text); }
.quote-coverage:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---- Step 4: add-ons ---- */
.quote-addons {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.addon-card {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
}
.addon-card--on { border-color: var(--color-primary); }
.addon-card__badge {
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}
.addon-card__main {
  display: flex;
  /* Centred, as the handoff draws it. Top-aligned, the toggle sat under the
     Popular badge and the card read as two unrelated corners. */
  align-items: center;
  gap: var(--space-sm);
}
.addon-card__icon { font-size: 1.3rem; line-height: 1.2; flex: 0 0 auto; }
.addon-card__text { flex: 1; min-width: 0; }
/* The name may wrap; the info button never drops to its own line. */
.addon-card__title {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}
.addon-card__title > span:first-child { flex: 1 1 auto; min-width: 0; }
.addon-card__info {
  flex: 0 0 auto;
  margin-top: 1px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-text-disabled);
  background: var(--color-white);
  color: var(--color-text-muted);
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 0.7rem;
  cursor: pointer;
  padding: 0;
}
.addon-card__info:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.addon-card__info:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.addon-card__price {
  margin: 2px 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-light);
}
.addon-card__description {
  margin: 3px 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-light);
  line-height: 1.45;
}
/* The native checkbox stays: it is the accessible control, autofill-safe and
   needs no ARIA. The pill below is its skin. */
.addon-card__toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin: 0;
  padding: 6px 0;
}
.addon-card__switch {
  position: relative;
  display: block;
  width: 52px;
  height: 30px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  transition: background var(--transition-fast);
}
.addon-card__switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}
.addon-card__toggle input:checked + .addon-card__switch {
  background: var(--color-primary);
}
.addon-card__toggle input:checked + .addon-card__switch::after {
  transform: translateX(22px);
}
.addon-card__toggle input:focus-visible + .addon-card__switch {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.addon-card__days {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-cream);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
}
.addon-card__days .quote-stepper__btn { width: 38px; height: 38px; background: var(--color-white); }
.addon-card__days .quote-stepper__input { min-width: 52px; height: 38px; }

/* ---- Step 5: quote so far ---- */
.quote-sofar {
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
}
.quote-sofar__label {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.quote-sofar__rows {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* One line when it fits ("Chef days  Oct 5 – Oct 6 · 2 days  Edit"), and
   the value drops under the label, still right-aligned, only when it
   does not — a German date range is a good deal longer than an English one. */
.quote-sofar__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px var(--space-sm);
  font-size: var(--text-sm);
}
.quote-sofar__row dt { color: var(--color-text-light); white-space: nowrap; }
.quote-sofar__row dd {
  margin: 0 0 0 auto;
  text-align: right;
  font-weight: 600;
}
.quote-sofar__edit {
  border: 0;
  background: none;
  padding: 0 0 0 6px;
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-secondary-text);
  text-decoration: underline;
  cursor: pointer;
}
.quote-sofar__edit:hover { color: var(--color-secondary-dark); }
.quote-sofar__edit:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---- Contact form ---- */
.quote-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
@media (max-width: 640px) {
  .quote-form__grid { grid-template-columns: 1fr; }
}
.quote-form__field { display: flex; flex-direction: column; }
.quote-form__field--full { grid-column: 1 / -1; }
.quote-form__field label {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text);
}
.quote-form__optional { color: var(--color-text-muted); font-weight: 400; }
.quote-form__field input,
.quote-form__field select,
.quote-form__field textarea {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: max(1rem, var(--text-base)); /* >=16px: no iOS focus zoom */
  color: var(--color-text);
  background: var(--color-white);
  resize: vertical;
}
.quote-form__field input:focus,
.quote-form__field select:focus,
.quote-form__field textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}
.quote-form__hint {
  margin: 6px 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
/* Dietary requirements: a checkbox group, because free-text notes buried the
   single most common request Putu gets (gluten-free, vegan, pescatarian…). */
.quote-diet {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin: 0;
}
.quote-diet legend {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  padding: 0 6px;
}
.quote-diet__options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.quote-diet__option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 400;
  min-height: 32px;
  margin-bottom: 0;
  cursor: pointer;
}
.quote-diet__option input {
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* ---- Nav + document actions ---- */
.quote-nav {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}
.quote-nav__back {
  flex: 0 0 auto;
  min-height: 50px;
  padding: 0 18px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-primary);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-lg);
  cursor: pointer;
}
.quote-nav__back:hover { border-color: var(--color-primary); }
.quote-nav__next {
  flex: 1;
  min-height: 50px;
  border: 0;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.quote-nav__next:hover:not(:disabled) { background: var(--color-primary-dark); }
.quote-nav__next:disabled {
  background: var(--color-border);
  color: var(--color-text-muted);
  cursor: default;
}
.quote-nav__back:focus-visible,
.quote-nav__next:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.quote-docs { margin-top: var(--space-lg); }
.quote-docs__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.quote-docs__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-primary);
  background: var(--color-white);
  color: var(--color-primary);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.quote-docs__btn:disabled {
  border-color: var(--color-border);
  color: var(--color-text-muted);
  opacity: 0.55;
  cursor: default;
}
.quote-docs__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.quote-docs__hint {
  margin: 8px 0 0;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-light);
}
.quote-docs__reset {
  margin: var(--space-md) 0 0;
  text-align: center;
}
.quote-linkbtn {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
}
.quote-linkbtn:hover { color: var(--color-primary-dark); }
.quote-linkbtn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.quote-submit-error {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-secondary-dark);
}
.quote-submit-error p { margin: 0; }

/* ---- The estimate panel ----
   One panel, moved between the desktop aside, the mobile sheet and the last
   step. See mountEstimate() in js/quote.js. */
.quote-aside { min-width: 0; }
/* Below the breakpoint mountEstimate() never picks the aside — the panel goes
   to the sheet, or inline on the contact step — so the aside is an empty grid
   item that still costs a row and a `gap`: 32px of white under the FAQ block.
   Take it out of the grid instead. If the aside ever becomes a mobile mount
   point again, this rule has to go with it. */
@media (max-width: 959px) {
  .quote-aside { display: none; }
}
@media (min-width: 960px) {
  .quote-aside {
    /* Placed by hand, because auto-placement puts it in row two: .quote-faqs
       claims column one, which sits behind the cursor, so the cursor moves on a
       row and the aside — the last child, unplaced — is picked up there. The
       panel then starts below the whole form, and the sticky below has nowhere
       to travel, since a grid item can only stick inside its own grid area.
       Spanning both rows hands it the space beside the FAQ block to travel in. */
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: calc(var(--header-height) + var(--space-md));
  }
}
.quote-estimate {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
}
.quote-sheet .quote-estimate,
[data-estimate-slot="inline"] .quote-estimate {
  border: 0;
  padding: 0;
}
[data-estimate-slot="inline"] .quote-estimate {
  border: 1px solid var(--color-border);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
}
.quote-estimate__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.quote-estimate__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}
.quote-estimate__empty {
  margin: 0;
  padding: var(--space-md);
  background: var(--color-cream);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: 1.6;
}
.quote-estimate__lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.quote-estimate__line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--text-sm);
}
.quote-estimate__line-label {
  color: var(--color-text);
  flex: 1 1 auto;
  min-width: 0;
}
.quote-estimate__line-detail {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.quote-estimate__line-amount {
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
}
.quote-estimate__total {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
}
.quote-estimate__total-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
}
.quote-estimate__note {
  margin: 2px 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.45;
}
.quote-estimate__total-amounts { text-align: right; flex: 0 0 auto; }
.quote-estimate__total-idr {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
}
.quote-estimate__total-alt {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-light);
}
.quote-estimate__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: var(--space-md);
}
.quote-tile {
  background: var(--color-primary);
  border-radius: var(--radius-md);
  padding: 11px 13px;
}
.quote-tile__label {
  margin: 0 0 3px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-secondary-light);
}
.quote-tile__value {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-white);
}
.quote-tile__alt {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-secondary-light);
}
.quote-estimate__deposit {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin: var(--space-md) 0 0;
  padding: 10px 12px;
  background: var(--color-cream);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.quote-estimate__deposit span { color: var(--color-text-light); }

@media (max-width: 560px) {
  [data-estimate-slot="inline"] .quote-estimate { padding: var(--space-md); }
  /* Squeezing the label and the amount into one row leaves two words a line.
     Stack instead: the amount reads as the answer to the label above it. */
  .quote-estimate__total {
    flex-direction: column;
    gap: 6px;
  }
  .quote-estimate__total-amounts { text-align: left; }
}

/* ---- Mobile sticky bar ---- */
.quote-stickybar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-text);
  color: var(--color-white);
  box-shadow: 0 8px 30px rgba(45, 42, 38, 0.25);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
@media (min-width: 960px) {
  .quote-stickybar { display: none; }
}
.quote-stickybar__left { min-width: 0; }
.quote-stickybar__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-secondary-light);
}
.quote-stickybar__link {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.quote-stickybar__right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.quote-stickybar__amounts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 0;
}
.quote-stickybar__total {
  font-size: var(--text-base);
  font-weight: 700;
  white-space: nowrap;
}
.quote-stickybar__alt {
  font-size: var(--text-xs);
  color: var(--color-secondary-light); /* 6.3:1 on the dark bar; muted would be 2.6:1 */
  white-space: nowrap;
}
.quote-stickybar__caret {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-secondary-light);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
}
.quote-stickybar:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---- Bottom sheet ---- */
.quote-sheet__scrim {
  position: fixed;
  inset: 0;
  /* Above the fixed header (1000): the sheet is aria-modal, so the logo and
     hamburger behind it must be dimmed and untappable, not left live. */
  z-index: 1001;
  background: rgba(45, 42, 38, 0.35);
}
.quote-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1002;
  max-height: 75vh;
  max-height: 75dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-white);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -8px 30px rgba(45, 42, 38, 0.15);
  padding: var(--space-md) var(--space-lg) calc(var(--space-xl) + env(safe-area-inset-bottom, 0px));
}
.quote-sheet__handle {
  display: block;
  width: 36px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  margin: 0 auto var(--space-md);
}
.quote-sheet__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.quote-sheet__close svg { width: 18px; height: 18px; }
.quote-sheet__close:hover { background: var(--color-cream); color: var(--color-primary); }
.quote-sheet__close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
body.quote-sheet-open { overflow: hidden; }

/* ---- Info dialog ---- */
.meal-info-dialog {
  border: 0;
  padding: 0;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  max-width: 480px;
  width: calc(100% - 2rem);
  box-shadow: 0 20px 60px rgba(45, 42, 38, 0.25);
  color: var(--color-text);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-height: 90vh;
  max-height: 90dvh;
}
.meal-info-dialog::backdrop {
  background: rgba(45, 42, 38, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* Fallback for browsers without native <dialog> */
.meal-info-dialog:not([open]) { display: none; }
.meal-info-dialog--open { display: block !important; z-index: 1000; }
.meal-info-dialog__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.meal-info-dialog__close svg { width: 18px; height: 18px; }
.meal-info-dialog__close:hover { background: var(--color-cream); color: var(--color-primary); }
.meal-info-dialog__close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.meal-info-dialog__body {
  padding: var(--space-xl) var(--space-xl) var(--space-md);
  text-align: center;
  overflow-y: auto;
  max-height: calc(90vh - 90px);
  max-height: calc(90dvh - 90px);
}
.meal-info-dialog__icon {
  display: block;
  font-size: 2rem;
  line-height: 1;
  margin-bottom: var(--space-sm);
}
.meal-info-dialog__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-text);
  margin: 0 0 var(--space-xs);
}
.meal-info-dialog__price {
  color: var(--color-primary);
  font-weight: 700;
  margin: 0 0 var(--space-sm);
  font-size: var(--text-sm);
}
.meal-info-dialog__desc {
  color: var(--color-text-light);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin: 0;
}
.meal-info-dialog__courses {
  margin: var(--space-md) 0 0;
  padding: var(--space-md);
  text-align: left;
  background: var(--color-offwhite);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-md);
}
.meal-info-dialog__courses dt {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}
.meal-info-dialog__courses dd {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: 1.45;
}
.meal-info-dialog__courses dd:last-child { margin-bottom: 0; }
.meal-info-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl) var(--space-xl);
  border-top: 1px solid var(--color-border);
}
@media (max-width: 480px) {
  .meal-info-dialog {
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .meal-info-dialog__body { padding: var(--space-lg) var(--space-lg) var(--space-sm); }
  .meal-info-dialog__footer { padding: var(--space-sm) var(--space-lg) var(--space-lg); }
}

/* ---- Per-step FAQ ----
   Below the CTA and outside the form: this is reassurance beside the step,
   not part of it. It sits on the page ground as its own cream panel, so the
   white card above stays the thing you are filling in.

   The FAQ page's white bordered .faq-item would be wrong here either way, so
   inside the panel the questions are a divided list rather than five separate
   cards. Only the skin changes; the markup and the JS behaviour stay the
   site's own. */
.quote-faqs {
  min-width: 0;
  margin-top: calc(var(--space-xl) * -1 + var(--space-md));
}
@media (min-width: 960px) {
  /* Column one, row two: under the form, never beside it. The row is spelled
     out so the pair reads as one placement with .quote-aside above, and stays
     put if the three children are ever reordered. */
  .quote-faqs { grid-column: 1; grid-row: 2; }
}
.quote-faq {
  background: var(--color-cream);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.quote-faq__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}
.quote-faq__summary::-webkit-details-marker { display: none; }
/* The same circular mark the menu rows use for "more information", so the row
   reads as the help affordance it is rather than as stray text. */
.quote-faq__summary::before {
  content: '?';
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-secondary-light);
  color: var(--color-secondary-text);
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: var(--text-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.quote-faq__summary::after {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition-fast);
}
.quote-faq[open] > .quote-faq__summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.quote-faq__summary:hover { color: var(--color-primary); }
.quote-faq__summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.quote-faq__count {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
}

/* Strip the card treatment: inside the panel these are list rows. */
.quote-faq .faq-item {
  border: 0;
  border-top: 1px solid var(--color-sand);
  border-radius: 0;
  margin: 0;
  background: transparent;
}
.quote-faq .faq-item:hover { border-color: var(--color-sand); }
.quote-faq .faq-item__question {
  /* Inter, not the FAQ page's Playfair: at 14px the serif reads as a mistake
     next to the meal cards, which use the body font for the same reason. */
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.45;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text);
}
/* The open one lifts onto white: the same figure-on-ground move the selected
   menu row makes, inverted, so the answer you are reading is the card. */
.quote-faq .faq-item--open {
  background: var(--color-white);
  border-top-color: var(--color-primary-100);
}
.quote-faq .faq-item--open + .faq-item { border-top-color: var(--color-primary-100); }
.quote-faq .faq-item--open .faq-item__question { color: var(--color-primary); }
.quote-faq .faq-item__icon {
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
}
.quote-faq .faq-item--open .faq-item__icon { color: var(--color-primary); }
.quote-faq .faq-item__answer-inner {
  padding: 0 var(--space-md) var(--space-md);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.quote-faq .faq-item__answer-inner p { margin: 0 0 var(--space-sm); }
.quote-faq .faq-item__answer-inner p:last-child { margin-bottom: 0; }

/* ---- Phone overrides ----
   Kept at the end of the calculator block on purpose: these share their
   specificity with the base rules above, so only source order lets them
   win. Two of them sat mid-section once and were silently dead. */
/* Phones up to the iPhone XR/11 width. The page and the form padding together
   spend 48px a side here, which the handoff's frames do not; a 360px Android
   was left with a 90px label column and a 128px add-on text column. */
/* The day grid: three nested paddings (container, form, card) plus six 3px
   gaps left 34px cells at 375px and 27px at 320px, in a 7-column grid where a
   thumb on the neighbour silently changes the price. Bleed the card to the
   form's edge and tighten the gaps: 42px cells at 375px, 40px at 360px. */
@media (max-width: 479px) {
  .quote-calendar {
    padding: 8px;
    margin: 0 calc(var(--space-md) * -1);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    max-width: none;
  }
  .quote-calendar__grid,
  .quote-calendar__weekdays { gap: 2px; }
  .quote-calendar__nav { width: 44px; height: 44px; }
}
@media (max-width: 419px) {
  .quote-form { padding-left: var(--space-md); padding-right: var(--space-md); }
  .quote-stepper-row { padding: 10px var(--space-sm); gap: 8px; }
  .quote-stepper-row__label { font-size: var(--text-sm); }
  .quote-stepper__btn { width: 36px; height: 36px; font-size: 1rem; }
  .quote-stepper__input,
  .quote-stepper__value { min-width: 44px; height: 36px; }
  .quote-estimate__title { font-size: var(--text-base); }
  .quote-faq__summary { padding: var(--space-sm) 12px; gap: 8px; }
  .quote-faq .faq-item__question { padding: var(--space-sm) 12px; }
  .quote-faq .faq-item__answer-inner { padding: 0 12px var(--space-sm); }
  /* "Chef days  Oct 5 – Oct 6 · 2 days  Edit" is 262px at 13px; a 360px
     Android has 246px for it. One size down and it stays on one line. */
  .quote-sofar { padding: 12px 14px; }
  .quote-sofar__row { font-size: var(--text-xs); gap: 2px 8px; }
  .quote-sofar__edit { padding-left: 4px; }
}
@media (max-width: 479px) {
  .addon-card { padding: var(--space-sm) var(--space-md); }
  .addon-card__title { font-size: var(--text-sm); }
  .addon-card__badge { right: 10px; padding: 2px 10px; }
  .addon-card__days { padding: 6px 8px; gap: 6px; white-space: nowrap; }
  .addon-card__days .quote-stepper__btn { width: 36px; height: 36px; }
  .addon-card__days .quote-stepper__input { min-width: 44px; height: 36px; }
}
@media (max-width: 419px) {
  .addon-card { padding: var(--space-sm) 12px; }
  .addon-card__main { gap: 8px; }
}

/* ---- Toast ---- */
.quote-toast {
  position: fixed;
  left: 50%;
  bottom: calc(90px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(10px);
  z-index: 1004;
  max-width: min(90vw, 420px);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-text);
  color: var(--color-white);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity var(--transition-base), transform var(--transition-base);
  pointer-events: none;
}
.quote-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---- noscript fallback ---- */
.noscript-fallback {
  max-width: 640px;
  margin: var(--space-2xl) auto;
  padding: var(--space-lg);
  background: var(--color-cream);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  color: var(--color-text);
}


/* ==========================================================================
   QUOTE THANK-YOU PAGE (/quote/thank-you/)
   Receipt-style confirmation shown after a quote is sent. Single 800px column;
   everything below reuses the tokens at the top of this file rather than
   introducing new colours.
   ========================================================================== */

.thankyou-hero { background: var(--color-offwhite); text-align: center; }

.thankyou-hero__portrait {
  width: 240px;
  height: 240px;
  max-width: 60vw;
  max-height: 60vw;
  object-fit: cover;
  border-radius: var(--radius-full);
  border: 3px solid var(--color-white);
  outline: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  margin-bottom: var(--space-lg);
}

.thankyou-hero__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem);
  color: var(--color-primary);
  margin: 0 0 var(--space-lg);
  /* A 30-character first name must not push the page sideways. */
  overflow-wrap: break-word;
}

.thankyou-hero__letter { text-align: left; line-height: 1.65; }
.thankyou-hero__letter p { margin: 0 0 var(--space-md); }

.thankyou-hero__signoff {
  font-family: var(--font-accent);
  font-size: 1.35em;
  color: var(--color-primary-dark);
  line-height: 1.4;
}

/* ---- Recap card ---- */
.thankyou-recap-section { background: var(--color-offwhite); }

.thankyou-recap {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.thankyou-recap__head {
  background: var(--color-sand);
  padding: var(--space-sm) var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.thankyou-recap__head-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.15rem;
}
.thankyou-recap__head-brand { color: var(--color-text-light); font-size: var(--text-sm); }

.thankyou-recap__rows { margin: 0; padding: var(--space-lg) var(--space-lg) var(--space-md); }
.thankyou-recap__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 0.35rem 0;
}
.thankyou-recap__row dt { color: var(--color-text-light); margin: 0; }
.thankyou-recap__row dd { margin: 0; font-weight: 500; text-align: right; }

.thankyou-recap__totals {
  border-top: 1px dashed var(--color-border);
  margin: 0 var(--space-lg);
  padding: var(--space-md) 0 var(--space-lg);
}
.thankyou-recap__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding: 0.35rem 0;
}
.thankyou-recap__total-label { color: var(--color-text-light); }
.thankyou-recap__total-value { text-align: right; }
.thankyou-recap__total-value b {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.5em;
  line-height: 1.2;
}
.thankyou-recap__total-value i {
  display: block;
  font-style: normal;
  font-size: 0.9em;
  color: var(--color-text-light);
}
.thankyou-recap__total--deposit .thankyou-recap__total-value b { color: var(--color-primary); }

.thankyou-recap__note {
  margin: var(--space-md) 0 0;
  text-align: center;
  color: var(--color-text-light);
  font-size: var(--text-sm);
}

/* ---- What happens next ---- */
.thankyou-steps { list-style: none; margin: var(--space-xl) 0 0; padding: 0; }

.thankyou-steps__item {
  display: flex;
  gap: 1.1rem;
  align-items: stretch;
}
/* The connector runs from the marker down to the next step, so it must not be
   drawn on the last one. */
.thankyou-steps__item:last-child { align-items: flex-start; }

.thankyou-steps__marker {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
}
.thankyou-steps__item:not(:last-child) .thankyou-steps__marker { margin-bottom: 4px; }

/* Vertical rule below each marker except the last. Drawn on the item so it can
   stretch to the natural height of the step, which varies a lot. */
.thankyou-steps__item:not(:last-child) {
  background:
    linear-gradient(var(--color-border), var(--color-border)) no-repeat
    14px 34px / 2px calc(100% - 34px);
}

.thankyou-steps__body { margin: 0 0 var(--space-lg); padding-top: 0.15rem; line-height: 1.65; }
.thankyou-steps__body strong { color: var(--color-primary-dark); }

/* ---- Step 3: the deposit ---- */
.thankyou-steps__item--deposit .thankyou-steps__marker {
  background: var(--color-primary-dark);
  color: var(--color-accent);
}

.thankyou-deposit {
  flex: 1;
  background: var(--color-primary-dark);
  color: var(--color-offwhite);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.25rem, 3vw, 1.5rem);
  margin-bottom: var(--space-lg);
}
.thankyou-deposit__title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-white);
  margin: 0 0 var(--space-sm);
  font-size: var(--text-xl);
}
.thankyou-deposit__amount { margin: 0 0 var(--space-md); }
.thankyou-deposit__amount b { color: var(--color-accent); font-size: 1.1em; }
.thankyou-deposit__amount i {
  font-style: normal;
  color: var(--color-sand);
  margin-left: 0.4rem;
}
.thankyou-deposit__amount-note { display: block; color: var(--color-sand); font-size: var(--text-sm); }
.thankyou-deposit__list {
  margin: 0;
  padding-left: 1.1rem;
  line-height: 1.6;
  /* The site resets list markers globally; this list needs them back. */
  list-style: disc;
}
.thankyou-deposit__list li { margin-bottom: var(--space-sm); }
.thankyou-deposit__list li:last-child { margin-bottom: 0; }
.thankyou-deposit__list strong { color: var(--color-white); }

/* ---- Question form ---- */
/* A class that sets `display` outranks the user-agent's [hidden] rule, so the
   flex containers below would render even while hidden. This puts [hidden]
   back in charge for everything inside the card and the page's own blocks. */
.thankyou-question [hidden],
.thankyou-deposit [hidden],
[data-ty-recap][hidden],
[data-ty-share][hidden] { display: none !important; }

.thankyou-question {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.thankyou-question__title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  margin: 0 0 var(--space-xs);
}
.thankyou-question__sub { color: var(--color-text-light); margin: 0 0 var(--space-lg); }

.thankyou-question__form { display: flex; flex-direction: column; gap: var(--space-md); }
.thankyou-question__identity { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.thankyou-question__identity .thankyou-question__field { flex: 1 1 220px; }

.thankyou-question__field { display: flex; flex-direction: column; gap: 0.35rem; }
.thankyou-question__field label { font-size: 0.9em; font-weight: 500; }
.thankyou-question__field input,
.thankyou-question__field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.9rem;
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-offwhite);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
}
.thankyou-question__field textarea { resize: vertical; }
.thankyou-question__field input:focus-visible,
.thankyou-question__field textarea:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 1px;
}

.thankyou-question__actions { display: flex; justify-content: flex-end; }
.thankyou-question__actions .btn { min-height: 44px; }
.thankyou-question__actions .btn:disabled { background: var(--color-text-light); border-color: var(--color-text-light); cursor: default; }

.thankyou-question__error {
  margin: 0;
  background: var(--color-cream);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
}

.thankyou-question__success {
  background: var(--color-cream);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}
.thankyou-question__check {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.thankyou-question__success-title { margin: 0 0 0.25rem; font-weight: 600; }
.thankyou-question__success-body { margin: 0; color: var(--color-text-light); }

/* ---- WhatsApp ---- */
.thankyou-whatsapp {
  margin-top: var(--space-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}
.thankyou-whatsapp__pre { margin: 0; color: var(--color-text-light); }
.thankyou-whatsapp__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.6rem 1.5rem;
  border-radius: var(--radius-full);
  background: var(--color-whatsapp-deep); /* 7.7:1 for the label; #25D366 was 2:1 */
  color: var(--color-white);
  font-weight: 600;
  text-decoration: none;
}
.thankyou-whatsapp__btn:hover { background: var(--color-whatsapp-dark); color: var(--color-white); }

/* ---- Share ---- */
.thankyou-share { margin-top: var(--space-2xl); text-align: center; }
.thankyou-share__title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary);
  font-size: var(--text-2xl);
  margin: 0 0 var(--space-xs);
}
.thankyou-share__body { color: var(--color-text-light); margin: 0 0 var(--space-lg); }
.thankyou-share__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.thankyou-share__actions .btn { min-height: 44px; }

.thankyou-footnote {
  margin: var(--space-2xl) 0 0;
  text-align: center;
  font-size: 0.85em;
  /* --color-text-muted fails AA against cream; text-light does not. */
  color: var(--color-text-light);
}

@media (max-width: 480px) {
  .thankyou-recap__row { flex-direction: column; gap: 0; }
  .thankyou-recap__row dd { text-align: left; }
}

/* ---------- The printed quote ----------
   Print and Download PDF hand over the same document: quote-core.js replays
   the PDF's drawing calls as one SVG per A4 page into .quote-print-doc, and
   while those pages are mounted they are the whole printout. Without them
   (the PDF library could not load) the page prints with the fallback rules in
   styles.css instead. */
.quote-print-doc { display: none; }

@media print {
  html.quote-print-active,
  html.quote-print-active body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }
  html.quote-print-active body > :not(.quote-print-doc) { display: none !important; }
  html.quote-print-active .quote-print-doc { display: block; }
  .quote-print-doc__page {
    display: block;
    /* Full width is safe on any margin the printer imposes: at A4 proportions
       the height that follows always fits the height that is left. */
    width: 100%;
    height: auto;
    aspect-ratio: 210 / 297;
    break-inside: avoid;
    break-after: page;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .quote-print-doc__page:last-child { break-after: auto; }
}