/* =========================================================================
   MCBC — LEAD CAPTURE STYLES
   Floating Action Button, Pre-capture Modal, Full Webforms
   Mobile-first. Premium F&B aesthetic.
   ========================================================================= */

/* ===== FLOATING ACTION BUTTON (FAB) ===== */
/* Bottom-right, persistent, thumb-zone friendly */

.fab-root {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none; /* parent transparent; children pickup events */
}
.fab-root > * { pointer-events: auto; }

@media (min-width: 768px) {
  .fab-root { bottom: 32px; right: 32px; }
}

/* Hide FAB while user scrolls down (less obtrusive while reading) */
.fab-root--hidden {
  transform: translateY(120%);
  transition: transform 0.4s cubic-bezier(0.5, 0, 0, 1.2);
}
.fab-root {
  transition: transform 0.4s cubic-bezier(0.5, 0, 0, 1.2);
}

/* The main circular FAB trigger button */
.fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: var(--mcbc-coral, #0090AD);
  color: var(--mcbc-white, #FFFFFF);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 144, 173, 0.45), 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s cubic-bezier(0.5, 0, 0, 1.2), box-shadow 0.3s;
  position: relative;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.fab:hover, .fab:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 14px 38px rgba(0, 144, 173, 0.55), 0 6px 16px rgba(0, 0, 0, 0.25);
  outline: none;
}
.fab:focus-visible {
  outline: 3px solid var(--mcbc-pink, #B3DDE6);
  outline-offset: 4px;
}
.fab:active {
  transform: scale(0.95);
}

/* Pulsing ring animation around the FAB to draw attention */
.fab::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--mcbc-coral, #0090AD);
  opacity: 0;
  animation: fab-pulse 2.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes fab-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  60% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Disable pulse once user has expanded FAB once (less annoying after first interaction) */
.fab-root--seen .fab::before {
  display: none;
}

/* FAB icon — chef hat / message hybrid */
.fab__icon {
  width: 28px;
  height: 28px;
  transition: transform 0.3s, opacity 0.2s;
}
.fab__icon--close {
  position: absolute;
  opacity: 0;
  transform: rotate(-90deg);
}

/* When FAB is in "open" state, swap icons */
.fab-root--open .fab {
  background: var(--mcbc-charcoal, #131A1C);
  transform: rotate(0deg);
}
.fab-root--open .fab__icon--default {
  opacity: 0;
  transform: rotate(90deg);
}
.fab-root--open .fab__icon--close {
  opacity: 1;
  transform: rotate(0deg);
}

/* The expandable menu of options (revealed when FAB clicked) */
.fab-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 4px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(0.92);
  transform-origin: bottom right;
  transition: opacity 0.3s, transform 0.35s cubic-bezier(0.5, 0, 0, 1.2);
}
.fab-root--open .fab-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Individual option in the menu */
.fab-option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 16px;
  background: var(--mcbc-white, #FFFFFF);
  border: none;
  border-radius: 100px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  font-family: var(--sans, system-ui, -apple-system, sans-serif);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mcbc-charcoal, #131A1C);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.3s, background 0.3s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.fab-option:hover, .fab-option:focus-visible {
  transform: translateX(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  outline: none;
}
.fab-option:focus-visible {
  outline: 2px solid var(--mcbc-coral, #0090AD);
  outline-offset: 2px;
}
.fab-option__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.fab-option--whatsapp {
  background: #25D366;
  color: #FFFFFF;
}
.fab-option--whatsapp:hover { background: #1FBA56; }
.fab-option--call {
  background: var(--mcbc-charcoal, #131A1C);
  color: var(--mcbc-white, #FFFFFF);
}
.fab-option--quote {
  background: var(--mcbc-coral, #0090AD);
  color: var(--mcbc-white, #FFFFFF);
}
.fab-option--quote:hover { background: var(--mcbc-coral-deep, #E5524A); }

/* Tagline below FAB on first load — disappears after first interaction */
.fab-nudge {
  margin-bottom: 4px;
  padding: 8px 14px;
  background: var(--mcbc-charcoal, #131A1C);
  color: var(--mcbc-white, #FFFFFF);
  border-radius: 8px;
  font-family: var(--mono, monospace);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s 1.2s, transform 0.4s 1.2s;
  position: relative;
  white-space: nowrap;
}
.fab-nudge::after {
  content: '';
  position: absolute;
  right: 22px;
  bottom: -5px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--mcbc-charcoal, #131A1C);
}
.fab-root:not(.fab-root--seen) .fab-nudge {
  opacity: 1;
  transform: translateY(0);
}
.fab-root--seen .fab-nudge,
.fab-root--open .fab-nudge {
  display: none;
}

/* On very small phones, slightly tighter */
@media (max-width: 380px) {
  .fab { width: 56px; height: 56px; }
  .fab__icon { width: 26px; height: 26px; }
  .fab-option { padding: 10px 14px 10px 12px; font-size: 0.8rem; }
}


/* ===== PRE-CAPTURE MODAL ===== */
/* Shown when user clicks WhatsApp anywhere — capture name + intent first */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(19, 26, 28, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.5, 0, 0, 1.2);
}
.modal-overlay--open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 32px);
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  background: var(--mcbc-cream, #EFE7D6);
  border-radius: 16px;
  padding: 32px 24px 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  transform: scale(0.92) translateY(20px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.5, 0, 0, 1.2), opacity 0.4s;
  position: relative;
  -webkit-overflow-scrolling: touch;
}
.modal-overlay--open .modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(19, 26, 28, 0.06);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mcbc-charcoal, #131A1C);
  transition: background 0.2s, transform 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.modal__close:hover, .modal__close:focus-visible {
  background: rgba(19, 26, 28, 0.12);
  transform: rotate(90deg);
  outline: none;
}
.modal__close svg { width: 18px; height: 18px; }

.modal__eyebrow {
  font-family: var(--mono, monospace);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--mcbc-coral, #0090AD);
  margin-bottom: 8px;
  font-weight: 600;
}
.modal__title {
  font-family: var(--display, Georgia, serif);
  font-weight: 400;
  font-size: 1.65rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--mcbc-charcoal, #131A1C);
  margin: 0 0 8px;
}
.modal__title em {
  font-style: italic;
  color: var(--mcbc-coral, #0090AD);
}
.modal__sub {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(19, 26, 28, 0.7);
  margin: 0 0 20px;
}

/* Form fields shared with full webforms */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.field__label {
  font-family: var(--mono, monospace);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--mcbc-charcoal, #131A1C);
  font-weight: 600;
}
.field__input,
.field__select,
.field__textarea {
  width: 100%;
  padding: 14px 14px;
  background-color: var(--mcbc-white, #FFFFFF);
  border: 1.5px solid rgba(19, 26, 28, 0.12);
  border-radius: 8px;
  font-family: var(--sans, system-ui, -apple-system, sans-serif);
  font-size: 16px; /* 16px prevents iOS zoom on focus */
  color: var(--mcbc-charcoal, #131A1C);
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-weight: 400;
}
/* Light-theme select chevron — set on default AND focus, never wiped */
.field__select,
.field__select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23161617' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
.field__select { padding-right: 36px; }
/* Hide native IE/Edge dropdown arrow */
.field__select::-ms-expand { display: none; }
.field__textarea {
  min-height: 88px;
  resize: vertical;
  font-family: inherit;
}
.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--mcbc-coral, #0090AD);
  box-shadow: 0 0 0 3px rgba(0, 144, 173, 0.15);
  background-color: var(--mcbc-white, #FFFFFF);
}
.field__input::placeholder,
.field__textarea::placeholder {
  color: rgba(19, 26, 28, 0.35);
}
.field__hint {
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(19, 26, 28, 0.55);
  margin-top: 2px;
}
.field__error {
  display: none;
  font-size: 0.82rem;
  color: #C73838;
  margin-top: 4px;
  font-weight: 500;
  line-height: 1.35;
}
.field--has-error .field__error {
  display: block;
  animation: mcbc-fieldError-fadeIn 0.2s ease-out;
}
.field--has-error .field__input,
.field--has-error .field__select,
.field--has-error .field__textarea {
  border-color: #C73838 !important;
  box-shadow: 0 0 0 2px rgba(199, 56, 56, 0.18);
  animation: mcbc-fieldError-shake 0.4s cubic-bezier(.36,.07,.19,.97);
}
.field--has-error .field__label {
  color: #C73838;
}

@keyframes mcbc-fieldError-fadeIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mcbc-fieldError-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

/* Top-of-form error summary banner */
.form__summary-error {
  display: none;
  background: rgba(199, 56, 56, 0.08);
  border: 1px solid rgba(199, 56, 56, 0.4);
  border-left: 4px solid #C73838;
  color: #8b1f1f;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 0.92rem;
  font-weight: 500;
  margin-bottom: 18px;
  line-height: 1.4;
  animation: mcbc-fieldError-fadeIn 0.25s ease-out;
}
.form__summary-error span {
  margin-right: 6px;
  font-size: 1.05em;
}

/* Field grid for wider forms — pairs of fields side by side on desktop */
.field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 600px) {
  .field-grid--2 { grid-template-columns: 1fr 1fr; gap: 0 14px; }
}

.modal__submit,
.form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
  padding: 16px 20px;
  background: var(--mcbc-coral, #0090AD);
  color: var(--mcbc-white, #FFFFFF);
  border: none;
  border-radius: 100px;
  font-family: var(--sans, system-ui, -apple-system, sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.3s, background 0.3s;
  -webkit-tap-highlight-color: transparent;
}
.modal__submit:hover,
.form__submit:hover {
  background: var(--mcbc-coral-deep, #E5524A);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 144, 173, 0.35);
}
.modal__submit:active,
.form__submit:active {
  transform: translateY(0);
}
.modal__submit:disabled,
.form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.modal__submit svg,
.form__submit svg { width: 16px; height: 16px; }

/* Loading spinner inside submit button */
.modal__submit--loading,
.form__submit--loading {
  pointer-events: none;
  color: transparent;
}
.modal__submit--loading::after,
.form__submit--loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.modal__alt {
  margin-top: 16px;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(19, 26, 28, 0.65);
}
.modal__alt a {
  color: var(--mcbc-coral, #0090AD);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Success state — replaces form after submission */
.modal__success {
  text-align: center;
  padding: 12px 0;
  display: none;
}
.modal--success .form,
.modal--success .modal__title:not(.modal__title--success),
.modal--success .modal__sub,
.modal--success .modal__alt {
  display: none;
}
.modal--success .modal__success {
  display: block;
}
.modal__success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: rgba(76, 175, 80, 0.15);
  color: #2D7A36;
  border-radius: 50%;
  margin-bottom: 16px;
}
.modal__success-icon svg { width: 32px; height: 32px; }


/* ===== FULL WEBFORMS (embedded on pages) ===== */
/* Used inline on social/corporate/mealplan pages */

.lead-form {
  background: var(--mcbc-charcoal, #131A1C);
  color: var(--mcbc-white, #FFFFFF);
  padding: var(--section-y, 5rem) var(--gutter, 1.5rem);
  position: relative;
  overflow: hidden;
}
.lead-form::before {
  content: '';
  position: absolute;
  top: -20%; right: -10%;
  width: 40%; height: 140%;
  background: radial-gradient(ellipse at center, rgba(0, 144, 173, 0.1) 0%, transparent 70%);
  pointer-events: none;
}
.lead-form__inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.lead-form__heading {
  text-align: center;
  margin-bottom: 36px;
}
.lead-form__heading .section__eyebrow {
  justify-content: center;
}
.lead-form__heading .section__eyebrow::before {
  display: none;
}
.lead-form__title {
  font-family: var(--display, Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.85rem, 4vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--mcbc-white, #FFFFFF);
  margin: 0 0 12px;
}
.lead-form__title em {
  font-style: italic;
  color: var(--mcbc-coral, #0090AD);
}
.lead-form__sub {
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
  max-width: 560px;
  margin: 0 auto;
}

.lead-form__form {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 28px 22px;
}
@media (min-width: 600px) {
  .lead-form__form { padding: 36px 32px; }
}

/* On the dark webform background, fields invert */
.lead-form .field__label {
  color: rgba(255, 255, 255, 0.85);
}
.lead-form .field__input,
.lead-form .field__select,
.lead-form .field__textarea {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--mcbc-white, #FFFFFF);
}
.lead-form .field__input::placeholder,
.lead-form .field__textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.lead-form .field__input:focus,
.lead-form .field__select:focus,
.lead-form .field__textarea:focus {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--mcbc-coral, #0090AD);
  box-shadow: 0 0 0 3px rgba(0, 144, 173, 0.2);
}
/* The meal ticks invert with everything else. Without this they keep the light
   theme's white card and read as the only lit thing on a dark form. */
.lead-form .mealpick__opt {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--mcbc-white, #FFFFFF);
}
.lead-form .mealpick__opt:hover { border-color: rgba(255, 255, 255, 0.35); }
.lead-form .mealpick__opt:has(input:checked) {
  background-color: rgba(0, 144, 173, 0.22);
  border-color: var(--mcbc-coral, #0090AD);
}

/* Chevron icon on dark-theme select — must be set explicitly (white) and persist on focus */
.lead-form .field__select,
.lead-form .field__select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
/* Belt-and-braces: ensure native browser select chevron never appears on top */
.lead-form .field__select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-size: 12px 8px;
}
/* Firefox: hide the native dropdown arrow */
.lead-form .field__select::-ms-expand {
  display: none;
}
/* Style the option dropdown panel itself for dark theme */
.lead-form .field__select option {
  background-color: #131A1C;
  color: #FFFFFF;
}
.lead-form .field__hint {
  color: rgba(255, 255, 255, 0.55);
}

.lead-form__alt {
  text-align: center;
  margin-top: 24px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}
.lead-form__alt a {
  color: var(--mcbc-coral, #0090AD);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lead-form__success {
  display: none;
  text-align: center;
  padding: 32px 16px;
}
.lead-form--success .lead-form__form,
.lead-form--success .lead-form__alt {
  display: none;
}
.lead-form--success .lead-form__success {
  display: block;
}
.lead-form__success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: rgba(76, 175, 80, 0.15);
  color: #6ED27A;
  border-radius: 50%;
  margin-bottom: 20px;
}
.lead-form__success-icon svg { width: 36px; height: 36px; }
.lead-form__success-title {
  font-family: var(--display, Georgia, serif);
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--mcbc-white, #FFFFFF);
  margin: 0 0 8px;
}
.lead-form__success-title em {
  font-style: italic;
  color: var(--mcbc-pink, #B3DDE6);
}
.lead-form__success-text {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 460px;
  margin: 0 auto 20px;
}

/* Privacy/trust line below submit */
.lead-form__trust,
.modal__trust {
  margin-top: 14px;
  text-align: center;
  font-family: var(--mono, monospace);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(19, 26, 28, 0.5);
}
.lead-form__trust {
  color: rgba(255, 255, 255, 0.5);
}
.lead-form__trust strong,
.modal__trust strong {
  color: var(--mcbc-coral, #0090AD);
}

/* Mobile tweaks for full webform */
@media (max-width: 600px) {
  .lead-form { padding: 3rem 1.25rem; }
  .lead-form__heading { margin-bottom: 24px; }
  .lead-form__sub { font-size: 0.95rem; }
}

/* ===========================================================================
   CHIPS, TOGGLE AND REVEAL — the three catering-form upgrades
   ===========================================================================
   Chips are a RADIO GROUP wearing a nicer face, not buttons with JS behind
   them. Three things fall out of that, and all three are the point:

     - the browser does the picking, the arrow keys and the one-of-many rule,
       so `js/lead-capture.js` needs no change at all;
     - an unpicked group is simply ABSENT from FormData, which is exactly what
       "they did not say" has to look like on the wire — a pre-checked default
       would put a budget on a lead nobody gave one for;
     - the value posts under the input's own `name`, so it walks into
       `payload.traits` with everything else.

   The real input stays in the DOM and focusable — moved out of sight rather
   than `display: none`, because a display-none radio is unreachable by
   keyboard and invisible to a screen reader.

   SELECTED IS CORAL IN BOTH THEMES, and that is a correction rather than a
   preference. The first version filled a chosen chip with charcoal, which is
   the right answer on a white form and invisible on this one: both catering
   forms sit on a near-black section, so a chosen chip rendered as a dark blob
   that read as DISABLED — the opposite of what it meant. Coral is the one
   accent this page already carries on the submit button and its links, and it
   reads on both grounds.
   ------------------------------------------------------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.chip__input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.chip__face {
  display: inline-flex;
  align-items: center;
  /* 44px, the same touch target every other control on this form gets. A chip
     row is the densest thing on the page and the easiest to mis-tap. */
  min-height: 44px;
  padding: 10px 16px;
  border: 1.5px solid rgba(19, 26, 28, 0.12);
  border-radius: 999px;
  background-color: var(--mcbc-white, #FFFFFF);
  font-family: var(--sans, system-ui, -apple-system, sans-serif);
  font-size: 0.9rem;
  color: var(--mcbc-charcoal, #131A1C);
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.chip:hover .chip__face { border-color: rgba(19, 26, 28, 0.4); }
.chip__input:checked + .chip__face {
  background-color: var(--mcbc-coral, #0090AD);
  border-color: var(--mcbc-coral, #0090AD);
  color: var(--mcbc-white, #FFFFFF);
}
/* The focus ring the hidden input would otherwise take with it. Without this a
   keyboard user tabs into a group whose selection they cannot see moving. */
.chip__input:focus-visible + .chip__face {
  outline: 2px solid var(--mcbc-coral, #0090AD);
  outline-offset: 2px;
}

/* The date-flexible toggle. A checkbox, so an unticked one is absent from
   FormData and a ticked one posts its own value — never a hidden default. */
.field__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--mcbc-charcoal, #131A1C);
}
.field__toggle input {
  width: 20px;
  height: 20px;
  accent-color: var(--mcbc-coral, #0090AD);
  cursor: pointer;
  flex-shrink: 0;
}

/* Which meals. Three ticks replace what used to be two dropdowns — a "meals
   per day" count and a "which meals" list, which said the same thing twice and
   could contradict each other. The count is derived from the ticks now, so
   there is nothing left to disagree about.

   Same control as .field__toggle, laid out as three cards: a 44px target, the
   brand accent, and the border language the selects already use. */
.mealpick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.mealpick__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 14px;
  background-color: var(--mcbc-white, #FFFFFF);
  border: 1.5px solid rgba(19, 26, 28, 0.12);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--mcbc-charcoal, #131A1C);
  transition: border-color 0.15s, background-color 0.15s;
}
.mealpick__opt:hover { border-color: rgba(19, 26, 28, 0.3); }
.mealpick__opt input {
  width: 20px;
  height: 20px;
  accent-color: var(--mcbc-coral, #0090AD);
  cursor: pointer;
  flex-shrink: 0;
}
/* A ticked card reads as chosen without needing to find the small box. */
.mealpick__opt:has(input:checked) {
  border-color: var(--mcbc-coral, #0090AD);
  background-color: rgba(0, 144, 173, 0.06);
}
.mealpick__opt:focus-within {
  outline: 2px solid var(--mcbc-coral, #0090AD);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .mealpick { grid-template-columns: 1fr; }
}

/* The GST reveal. A <details>, so it opens with no JavaScript and keeps working
   if a script fails to load — which is the state a form most needs to survive,
   because a half-working form takes the enquiry and loses the fields. The
   inputs inside stay in the DOM while it is closed, and that is safe:
   lead-capture.js drops empty values before they reach traits, so an untouched
   reveal sends nothing. */
.reveal {
  border: 1.5px solid rgba(19, 26, 28, 0.12);
  border-radius: 8px;
  margin-bottom: 14px;
  background-color: var(--mcbc-white, #FFFFFF);
}
.reveal__summary {
  padding: 14px;
  cursor: pointer;
  font-family: var(--mono, monospace);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: var(--mcbc-charcoal, #131A1C);
  list-style: none;
}
.reveal__summary::-webkit-details-marker { display: none; }
.reveal__summary::after { content: " +"; color: var(--mcbc-coral, #0090AD); }
.reveal[open] .reveal__summary::after { content: " \2013"; }
.reveal__summary:focus-visible {
  outline: 2px solid var(--mcbc-coral, #0090AD);
  outline-offset: -2px;
}
.reveal__body { padding: 0 14px 4px; }
.reveal__note {
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(19, 26, 28, 0.55);
  margin: 0 0 12px;
}

/* ---------------------------------------------------------------------------
   On the dark webform background, these invert — the same way .field__input,
   .field__label and .field__hint already do a few rules above. Both catering
   pages render inside .lead-form, so this block is what an enquirer actually
   sees; the light rules above are the base the modal form uses.
   ------------------------------------------------------------------------- */
.lead-form .chip__face {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--mcbc-white, #FFFFFF);
}
.lead-form .chip:hover .chip__face { border-color: rgba(255, 255, 255, 0.45); }
.lead-form .chip__input:checked + .chip__face {
  background-color: var(--mcbc-coral, #0090AD);
  border-color: var(--mcbc-coral, #0090AD);
  color: var(--mcbc-white, #FFFFFF);
}
/* The label read as dark-on-dark before this — invisible, on the one control
   whose whole job is to be noticed beside the date. */
.lead-form .field__toggle { color: rgba(255, 255, 255, 0.85); }
.lead-form .reveal {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}
.lead-form .reveal__summary { color: rgba(255, 255, 255, 0.85); }
.lead-form .reveal__note { color: rgba(255, 255, 255, 0.55); }

@media (max-width: 600px) {
  /* Five chips at full padding stack five deep on a 390px screen. Letting them
     shrink keeps the row to two lines. */
  .chip__face { padding: 10px 14px; font-size: 0.86rem; }
}