/* Modulo "Richiedi un appuntamento" - usa le variabili già presenti in style.css */

.prenota-section {
  background: var(--bg-elevata, #D4DFDD);
}

/* stessa impostazione delle sezioni Orari e Contatti */
.prenota-grid {
  display: grid;
  grid-template-columns: minmax(170px, 0.32fr) minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}

.prenota-grid > * {
  min-width: 0;
}

.prenota-grid h2 {
  font-size: 24px;
}

.prenota-lead {
  max-width: 34ch;
  margin: 18px 0 0;
  color: var(--testo-attenuato, #5F6B69);
}

.prenota-card {
  width: 100%;
  max-width: 640px;
  display: grid;
  gap: 18px;
  padding: clamp(22px, 4vw, 36px);
  background: var(--bg-card, #fff);
  border: 1px solid var(--linea, rgba(35, 43, 43, 0.1));
  border-radius: var(--radius, 22px);
  box-shadow: var(--shadow, 0 18px 50px rgba(35, 43, 43, 0.08));
}

.prenota-field {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.prenota-field label,
.prenota-field legend {
  padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--testo, #232B2B);
}

.prenota-opt {
  font-weight: 400;
  color: var(--testo-attenuato, #5F6B69);
}

.prenota-field input[type="text"],
.prenota-field input[type="date"],
.prenota-field select,
.prenota-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;            /* evita lo zoom automatico su iPhone */
  color: var(--testo, #232B2B);
  background: var(--bg, #F2F6F5);
  border: 1px solid var(--linea, rgba(35, 43, 43, 0.1));
  border-radius: 14px;
  appearance: none;
  -webkit-appearance: none;
}

.prenota-field select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.prenota-field textarea {
  min-height: 92px;
  resize: vertical;
}

.prenota-field input:focus-visible,
.prenota-field select:focus-visible,
.prenota-field textarea:focus-visible,
.prenota-choices input:focus-visible + span {
  outline: 2px solid var(--accento, #749393);
  outline-offset: 2px;
}

.prenota-field [aria-invalid="true"] {
  border-color: #b3402a;
}

.prenota-hint,
.prenota-error {
  margin: 0;
  font-size: 0.82rem;
}

.prenota-hint {
  color: var(--testo-attenuato, #5F6B69);
}

.prenota-error {
  color: #b3402a;
  min-height: 0;
}

.prenota-error:empty {
  display: none;
}

.prenota-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.prenota-choices label {
  position: relative;
  cursor: pointer;
}

.prenota-choices input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.prenota-choices span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  font-weight: 500;
  border: 1px solid var(--linea, rgba(35, 43, 43, 0.1));
  border-radius: 999px;
  background: var(--bg, #F2F6F5);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.prenota-choices input:checked + span {
  background: var(--accento-tenue, rgba(116, 147, 147, 0.16));
  border-color: var(--accento, #749393);
}

.prenota-card .btn {
  cursor: pointer;
}

.prenota-status {
  margin: 0;
  font-size: 0.9rem;
  color: var(--testo-attenuato, #5F6B69);
}

.prenota-status:empty {
  display: none;
}

.prenota-fallback {
  justify-self: start;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1180px) {
  .prenota-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .prenota-lead {
    max-width: none;
  }
}