/* Request forms that open WhatsApp with the message already written: the events form (eventi) and the table
   booking form (ristorante-bar). Copied from the events page on 25 Oct 2026 so both forms look the same. */
.ev-req { position: relative; background: var(--sea); color: #fff; padding: calc(var(--section) + 24px) 0 var(--section); }
.ev-req::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; background: radial-gradient(circle at 18px 0, var(--sand) 17px, transparent 18px) 0 0 / 36px 26px repeat-x; }
.ev-req__wrap { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) {.ev-req__wrap { grid-template-columns: 5fr 7fr; gap: 4.5rem; align-items: center; }}
.ev-req__intro h2 { color: #fff; margin: 0 0 1rem; font-size: var(--step-4); line-height: 1.1; }
.ev-req__intro p { color: rgba(255, 255, 255, .86); max-width: 30rem; line-height: 1.6; }
.ev-req__alt a { color: var(--sand); font-weight: 600; white-space: nowrap; }
.ev-form2 { display: grid; gap: 1.25rem; padding: clamp(1.25rem, 4vw, 2.25rem); border-radius: 18px; background: var(--foam, #f7f5f0); color: var(--ink); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); }
.ev-form2 fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ev-form2 legend, .ev-field > span { display: block; margin-bottom: .5rem; font-weight: 600; font-size: .95rem; color: var(--ink); }
.ev-field em { font-style: normal; font-weight: 400; color: var(--muted); }
.ev-chips__opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.ev-chip { position: relative; }
.ev-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ev-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.05rem; border-radius: 999px; border: 1.5px solid rgba(22, 38, 77, .22); background: #fff; color: var(--ink); font-size: .95rem; transition: background .15s, border-color .15s, color .15s; }
.ev-chip input:checked + span { background: var(--sea); border-color: var(--sea); color: #fff; }
.ev-chip input:focus-visible + span { outline: 2px solid var(--sea); outline-offset: 2px; }
.ev-row { display: grid; gap: 1.25rem; }
@media (min-width: 520px) {.ev-row { grid-template-columns: 1fr 1fr; }}
.ev-form2 input:not([type="radio"]), .ev-form2 textarea { width: 100%; box-sizing: border-box; min-height: 50px; padding: .75rem .9rem; font: inherit; color: var(--ink); background: #fff; border: 1.5px solid rgba(22, 38, 77, .18); border-radius: 10px; }
.ev-form2 textarea { min-height: 96px; resize: vertical; }
.ev-form2 input:focus-visible, .ev-form2 textarea:focus-visible { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgba(22, 38, 77, .15); }
.ev-form2 [aria-invalid="true"] { border-color: #b3261e; }
.ev-err { margin: .4rem 0 0; color: #b3261e; font-size: .875rem; }
.ev-stepper { display: grid; grid-template-columns: 50px 1fr 50px; }
.ev-stepper button { min-height: 50px; border: 1.5px solid rgba(22, 38, 77, .18); background: #fff; color: var(--sea); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.ev-stepper button:first-child { border-radius: 10px 0 0 10px; border-right: 0; }
.ev-stepper button:last-child { border-radius: 0 10px 10px 0; border-left: 0; }
.ev-stepper button:hover { background: rgba(22, 38, 77, .06); }
.ev-form2 .ev-stepper input { border-radius: 0; text-align: center; -moz-appearance: textfield; }
.ev-stepper input::-webkit-outer-spin-button, .ev-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ev-send { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: 54px; border: 0; border-radius: 12px; background: var(--sea); color: #fff; font: 600 1.05rem/1.2 var(--sans); cursor: pointer; transition: background .15s; }
.ev-send:hover { background: var(--sea-2, #0f1c3a); }
.ev-send:focus-visible { outline: 3px solid var(--sand); outline-offset: 2px; }
.ev-send svg { width: 22px; height: 22px; flex: none; }
.ev-note { margin: -.25rem 0 0; font-size: .85rem; color: var(--muted); text-align: center; }
.ev-req::before { height: 30px; background: linear-gradient(var(--sand), var(--sand)) 0 0 / 100% 8px no-repeat, radial-gradient(circle at 18px 8px, var(--sand) 17px, transparent 18px) 0 0 / 36px 30px repeat-x; }
/* Table booking form (ristorante-bar): the request is not a booking until the restaurant confirms it. */
.tb-confirm { margin: 1.1rem 0 0; padding: .9rem 1rem; border-left: 4px solid var(--sand, #dccba8); border-radius: 8px; background: rgba(255, 255, 255, .08); color: #fff; }
.tb-confirm strong { display: block; color: var(--sand, #dccba8); }
.tb-status { margin: 0; padding: .8rem 1rem; border-radius: 10px; background: #e7f1fb; color: var(--ink, #121a2e); font-weight: 600; }
.ev-form2 .ev-err[role="alert"] { margin: 0; }
.tb-confirm + .ev-req__alt { margin-top: 1rem; }

/* ===== 25 Oct 2026 mobile review (both request forms) =====
   iPhone Safari gives date and time fields a built-in minimum width that ignores width:100%, so they stuck out of
   the card. They are drawn as plain boxes with a calendar/clock icon (so an empty field still reads as "tap to
   choose"), and no field or grid cell may be wider than its column. Text inputs stay at 16px+ so iOS never zooms. */
.ev-form2, .ev-form2 * { min-width: 0; }
.ev-form2 .ev-row > *, .ev-form2 .ev-field { min-width: 0; max-width: 100%; }
.ev-form2 input, .ev-form2 textarea, .ev-form2 select { max-width: 100%; font-size: max(16px, 1rem); }
.ev-form2 input[type="date"], .ev-form2 input[type="time"] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; min-height: 50px;
  line-height: 1.2; text-align: left; padding-right: 2.9rem;
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 20px 20px;
}
.ev-form2 input[type="date"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316264d' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.ev-form2 input[type="time"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316264d' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.ev-form2 input::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.2em; }
.ev-form2 input::-webkit-calendar-picker-indicator { opacity: 0; width: 2.4rem; margin-right: -2.4rem; cursor: pointer; }
.ev-form2 .ev-stepper { grid-template-columns: 52px minmax(0, 1fr) 52px; }
.ev-form2 .ev-stepper button { min-height: 52px; touch-action: manipulation; }
.ev-chip span { min-height: 46px; }
.ev-send { min-height: 56px; touch-action: manipulation; }
@media (max-width: 380px) {
  .ev-form2 { padding: 1.1rem; gap: 1.1rem; }
  .ev-chip span { padding: 0 .9rem; }
}

/* Table form (25 Oct 2026, option A): day and time are choice lists built from the staff app's hours. */
.ev-form2 select { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-height: 50px; padding: .75rem 2.6rem .75rem .9rem; font: inherit; font-size: max(16px, 1rem); color: var(--ink); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316264d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .85rem center / 18px; border: 1.5px solid rgba(22, 38, 77, .18); border-radius: 10px; }
.ev-form2 select:focus-visible { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgba(22, 38, 77, .15); }
.ev-form2 select[aria-invalid="true"] { border-color: #b3261e; }
.tb-big { margin: -.4rem 0 0; color: var(--muted, #4b5368); font-size: .9rem; }
.tb-big a { color: var(--sea, #16264d); font-weight: 600; }
.tb-closed h3 { margin: 0; font-size: 1.35rem; color: var(--ink, #121a2e); }
.tb-closed p { margin: 0; color: var(--muted, #4b5368); }
.tb-closed__links { display: grid; gap: .6rem; }
.tb-call { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 12px; border: 1.5px solid var(--sea, #16264d); color: var(--sea, #16264d); font-weight: 600; text-decoration: none; }
[hidden] { display: none !important; }
/* Every «Prenota» on the restaurant page scrolls to the form: keep it clear of the sticky header. */
#prenota-tavolo { scroll-margin-top: calc(var(--header-h, 76px) + 8px); }
html:has(#prenota-tavolo) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(#prenota-tavolo) { scroll-behavior: auto; } }
/* Fields staff can switch on (Prenotazioni tavolo): high chair and outdoor table as tick boxes. */
.tb-checks { display: grid; gap: .5rem; }
.tb-check { display: flex; align-items: center; gap: .75rem; min-height: 48px; padding: .5rem .9rem; border: 1.5px solid rgba(22, 38, 77, .18); border-radius: 10px; background: #fff; color: var(--ink, #121a2e); cursor: pointer; }
.ev-form2 .tb-check input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; flex: none; accent-color: var(--sea, #16264d); }
.ev-form2 input[type="tel"] { font-size: max(16px, 1rem); }
.tb-closed .ev-send { text-decoration: none; }
.tb-closed .ev-send svg { width: 22px; height: 22px; flex: none; }
/* A period's note and set menus (e.g. Ferragosto), shown when one of its days is chosen. */
.tb-note { margin: 0; padding: .8rem 1rem; border-radius: 10px; background: var(--sand-2, #f4eee3); color: var(--ink, #121a2e); white-space: pre-line; line-height: 1.5; }
.tb-choices__list { display: grid; gap: .6rem; }
.tb-choice { display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; gap: .75rem; }
.tb-choice__name { font-weight: 600; color: var(--ink, #121a2e); line-height: 1.3; }
.tb-choice .ev-stepper { grid-template-columns: 44px minmax(0, 1fr) 44px; }
.tb-choice .ev-stepper button { min-height: 46px; }
@media (max-width: 380px) { .tb-choice { grid-template-columns: 1fr; } }
/* Event pages (Ferragosto): date, description and set menus from the staff calendar. */
.ev-info { padding-block: var(--section, 4rem); }
.ev-info__date { margin: 0 0 .5rem; color: var(--sand-dark, #75613d); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .9rem; }
.ev-info h2 { margin: 0 0 1rem; font-size: var(--step-4, 2.4rem); line-height: 1.1; color: var(--sea, #16264d); }
.ev-info__note { max-width: 42rem; color: var(--ink, #121a2e); line-height: 1.65; }
.ev-menus { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.ev-menu { padding: 1.25rem; border: 1.5px solid var(--sand, #dccba8); border-radius: 14px; background: #fff; text-align: center; }
.ev-menu h3 { margin: 0; font-size: 1.3rem; color: var(--sea, #16264d); }
.ev-menu__price { margin: .3rem 0 .7rem; color: var(--sand-dark, #75613d); font-weight: 700; }
.ev-menu__desc { margin: 0; color: var(--muted, #4b5368); line-height: 1.55; font-size: .95rem; }
.ev-info__cta { margin: 1.75rem 0 0; }
.ev-event:has(.ev-info:empty) { display: none; }
.tb-choice__name small { display: block; margin-top: .15rem; color: var(--muted, #4b5368); font-weight: 500; font-size: .9rem; }
.ev-form2 .ev-row:has(> [hidden]) { grid-template-columns: minmax(0, 1fr); }
.ev-event .ev-info { padding-block: 0; }