/* Reservations and special orders. */

.reservas-intro { padding-block: calc(var(--header-h) * 0.5) 1rem; }
.reservas-intro__titulo { font-size: clamp(2.2rem, 3.6vw + 1rem, 3.9rem); margin: 1.5rem 0 0.75rem; max-width: 18ch; }
.reservas-intro__texto { font-size: var(--t-lead); max-width: 40rem; color: var(--c-ink-2); margin-bottom: 0; }

.reservas { padding-block: 1.5rem 3rem; }
.reservas__rejilla { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 992px) { .reservas__rejilla { grid-template-columns: minmax(0, 7fr) minmax(0, 4.5fr); gap: 3.5rem; } }

.formulario { background: var(--c-paper); border-radius: var(--r-card); padding: 1.25rem; box-shadow: var(--shadow-1); }
@media (min-width: 576px) { .formulario { padding: 2rem; } }

.selector-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; padding: 0.35rem; margin: 0 0 1rem; background: var(--c-sand); border: 0; border-radius: var(--r-pill); }
.selector-tipo__opcion { display: block; cursor: pointer; margin: 0; }
.selector-tipo__opcion input { position: absolute; opacity: 0; pointer-events: none; }
.selector-tipo__opcion span {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 3rem; padding: 0.4rem 0.75rem;
  border-radius: var(--r-pill); font-weight: 700; font-size: 0.95rem; text-align: center; line-height: 1.15;
  transition: background-color var(--d-ui) ease, color var(--d-ui) ease, box-shadow var(--d-ui) ease, transform var(--d-press) var(--ease-out);
}
.selector-tipo__opcion:active span { transform: scale(0.97); }
.selector-tipo__opcion input:checked + span { background: var(--c-agave); color: var(--c-cream); box-shadow: var(--shadow-1); }
.selector-tipo__opcion input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.formulario__ayuda-tipo { color: var(--c-ink-2); font-size: var(--t-small); margin: 0 0 1.25rem; }
.formulario__ayuda-tipo[hidden], [data-solo-pedido][hidden], [data-solo-reserva][hidden] { display: none; }

.formulario__fila { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 576px) { .formulario__fila { grid-template-columns: 1fr 1fr; } .formulario__fila--tres { grid-template-columns: 1.15fr 1fr 0.8fr; } }

.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn-mn__cargando[hidden], .btn-mn__texto[hidden] { display: none; }
[data-enviar].is-cargando { pointer-events: none; opacity: 0.85; }

.reservas__lateral { display: grid; gap: 1.25rem; }
@media (min-width: 992px) { .reservas__lateral { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.lateral-bloque { padding: 1.4rem; background: var(--c-sand); border-radius: var(--r-card); }
.lateral-bloque h2 { font-size: 1.4rem; margin: 0 0 0.9rem; }
.lateral-bloque__botones { display: grid; gap: 0.5rem; }
.pasos { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.6rem; }
.pasos li::marker { color: var(--c-terra-dark); font-weight: 700; }
.lateral-bloque .horario__hoy { background: #F7DFA6; }

/* success modal */
.modal-exito .modal-content { text-align: center; overflow: hidden; }
.modal-exito__sol { width: 8rem; margin: 1.5rem auto 0; }
.modal-exito__titulo { font-size: 1.9rem; margin-bottom: 0.75rem; }
.modal-exito__auto { font-size: var(--t-small); color: var(--c-ink-2); margin: 0.9rem 0 0; }
.modal-exito__volver { margin-top: 1.1rem; }
.modal-exito .modal-body { padding: 1rem 1.5rem 1.75rem; }

@media (max-width: 575px) {
  .selector-tipo__opcion .ti { display: none; }
  /* the page already has a WhatsApp button; keep the floating one off the form on phones */
  .pagina-reservas .wa-fab { display: none; }
}