/* ============================================================
   Antica Sicilia — booking.css
   Pagina prenotazioni: ordinazione torte + Calendly (tavolo/ritiro)
   ============================================================ */

.booking-hero {
  padding-block: clamp(120px, 18vh, 220px) var(--section-gap);
  border-bottom: 1px solid var(--hair);
}
.booking-hero__eyebrow { color: var(--accent2); }
.booking-hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-top: var(--s3);
}
.booking-hero__lead { margin-top: var(--s4); max-width: 52ch; color: var(--muted); }

/* Tabs di ancora */
.booking-tabs {
  display: flex; gap: var(--s3); flex-wrap: wrap;
  margin-top: var(--s5);
}
.booking-tabs a {
  padding: var(--s2) var(--s4);
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  font-weight: 600; font-size: 0.9rem;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.booking-tabs a:hover { background: var(--ink); color: var(--surface); }

/* Blocchi */
.booking-section { padding-block: var(--section-gap); scroll-margin-top: 90px; }
.booking-section + .booking-section { border-top: 1px solid var(--hair); }
.booking-section__head { max-width: 60ch; margin-bottom: var(--s6); }
.booking-section__title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.02;
  margin-top: var(--s3);
}
.booking-section__lead { margin-top: var(--s4); color: var(--muted); }

/* Layout torte: form + riepilogo */
.cake-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--grid-gap);
  align-items: start;
}
@media (max-width: 900px) { .cake-layout { grid-template-columns: 1fr; } }

/* Form */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.field { display: flex; flex-direction: column; gap: var(--s2); }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em; }
.field .hint { font-size: 0.75rem; color: var(--muted); font-weight: 400; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-input);
  background: var(--surface);
  font-size: 1rem;
  transition: border-color 0.25s var(--ease-out);
}
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--accent); }
.field textarea { min-height: 110px; resize: vertical; }
.field.is-invalid input,
.field.is-invalid select { border-color: var(--accent); }

.form-actions { margin-top: var(--s5); display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; }
.form-note { font-size: 0.8rem; color: var(--muted); max-width: 46ch; }

/* Riepilogo laterale */
.cake-summary {
  position: sticky; top: 90px;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-card);
  background: var(--surface);
}
.cake-summary__title { font-family: var(--display); font-weight: 500; font-size: 1.4rem; }
.cake-summary__row { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--hair); }
.cake-summary__row span:first-child { color: var(--muted); }
.cake-summary__row strong { font-weight: 600; text-align: right; }
.cake-summary__total { display: flex; justify-content: space-between; padding-top: var(--s4); font-size: 1.15rem; }
.cake-summary__total strong { font-family: var(--display); font-size: 1.6rem; color: var(--accent); }
.cake-summary__stock { margin-top: var(--s3); font-size: 0.8rem; color: var(--muted); }
.cake-summary__stock.is-low { color: var(--accent); font-weight: 600; }

/* Messaggio esito */
.booking-alert {
  margin-top: var(--s4);
  padding: var(--s4);
  border-radius: var(--r-card);
  font-weight: 500;
  display: none;
}
.booking-alert.is-visible { display: block; }
.booking-alert--ok { background: rgba(108, 138, 58, 0.14); color: var(--pistacchio); border: 1px solid var(--pistacchio); }
.booking-alert--err { background: rgba(198, 55, 31, 0.1); color: var(--accent); border: 1px solid var(--accent); }

/* Calendly */
.calendly-wrap {
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface);
  min-height: 680px;
}
.calendly-inline-widget { min-width: 320px; height: 680px; }
.calendly-fallback {
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
}
.calendly-fallback p { color: var(--muted); max-width: 48ch; margin: var(--s3) auto; }

/* WhatsApp */
.wa-cta {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-weight: 600; color: var(--pistacchio);
}
.wa-cta:hover { text-decoration: underline; }

/* Header minimale pagina interna */
.subpage-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3) var(--gutter);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}
.subpage-header .wordmark { font-family: var(--display); font-size: 1.35rem; font-weight: 500; }
.subpage-header nav { display: flex; gap: var(--s4); font-weight: 600; font-size: 0.9rem; }
@media (max-width: 560px) { .subpage-header nav a.hide-sm { display: none; } }