/* ============================================================
   NTRA - Moduli a schede (richiesta viaggio, viaggio a sorpresa,
   prenotazione viaggio pubblicato, lista regalo, appuntamenti)
   ============================================================
   L'aspetto viene da style.css e ntra-shared-ui.css:
     .ntra-card                      -> riquadro del modulo (sul <form>)
     .bottone                        -> invio e bottoni d'azione
     .ntra-field-label / -input / -help, .ntra-eyebrow -> campi
   Qui restano struttura del wizard e i controlli speciali che NON sono
   bottoni veri (frecce, puntini, giorni del calendario, orari, tessere).
   ============================================================ */

.ntra-wizard {max-width: 900px; margin: 0 auto;}
.ntra-wizard-login-notice {padding: 24px; text-align: center;}

/* .ntra-card è pensata per la home: nel modulo testo a sinistra e altezza libera */
.ntra-wizard-form {position: relative; overflow: hidden;}
.ntra-wizard-form.ntra-card {--ntra-wizard-pad: 26px; height: auto; padding: var(--ntra-wizard-pad); text-align: left; background: var(--nta-cream);}
.ntra-wizard-form.ntra-card p {min-height: 0;}

/* Controlli tondi del wizard (frecce, mesi del calendario): stesso bordo dei bottoni */
.ntra-wizard-arrow,
.ntra-wizard-calendar-nav {display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; color: var(--nta-black); background: var(--nta-white); border: var(--nta-border); border-radius: 50%; box-shadow: var(--nta-control-shadow); transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;}
.ntra-wizard-arrow:hover:not(:disabled),
.ntra-wizard-calendar-nav:hover:not(:disabled) {background: var(--nta-gold); transform: translateY(var(--nta-press)); box-shadow: none;}
.ntra-wizard-arrow:disabled,
.ntra-wizard-calendar-nav:disabled {opacity: 0.35;}

/* ------------------------------------------------------------
   Testata colorata: "X" (ricomincia) | titolo | "?" (FAQ)
   Il colore arriva da 'header_color' nella configurazione del modulo
   (variabile --ntra-wizard-header-bg, di default rosa).
   ------------------------------------------------------------ */
.ntra-wizard-header {display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 12px; margin: calc(var(--ntra-wizard-pad) * -1) calc(var(--ntra-wizard-pad) * -1) var(--ntra-wizard-pad); padding: 12px 20px; background: var(--ntra-wizard-header-bg, var(--nta-pink)); border-bottom: var(--nta-border);}
.ntra-wizard-header h2 {margin: 0; text-align: center;}
.ntra-wizard-header .bottone {width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 50%; box-shadow: none; font-size: var(--nta-fs-h3); line-height: 1;}
.ntra-wizard-header .bottone::after {display: none;}
.ntra-wizard-header .bottone:hover {transform: none; background: var(--nta-gold);}

/* ------------------------------------------------------------
   Viewport / track scorrevole
   (flex-start: ogni scheda è alta quanto il contenuto, il JS adatta il viewport)
   ------------------------------------------------------------ */
.ntra-wizard-viewport {position: relative; overflow: hidden; transition: height 0.35s ease;}
.ntra-wizard-track {display: flex; align-items: flex-start; touch-action: pan-y; transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);}
.ntra-wizard-step {flex: 0 0 100%; min-width: 100%; box-sizing: border-box; padding: 5px 3px 16px;}

/* ------------------------------------------------------------
   Layout "stacked": le schede si accumulano in verticale
   ('layout' => 'stacked', inc/bookings/ntra-image-choice-forms.php)
   ------------------------------------------------------------ */
.ntra-wizard--stacked .ntra-wizard-viewport {overflow: visible;}
.ntra-wizard--stacked .ntra-wizard-track {flex-direction: column; align-items: stretch; transform: none !important; transition: none; touch-action: auto;}
.ntra-wizard--stacked .ntra-wizard-step {display: none; flex: none; width: 100%; min-width: 0; scroll-margin-top: 19px;}
.ntra-wizard--stacked .ntra-wizard-step.is-revealed {display: block; margin-bottom: 29px; padding-bottom: 22px; border-bottom: 2px dashed var(--nta-black); animation: ntra-wizard-stacked-reveal 0.4s ease both; transition: opacity 0.3s ease;}
.ntra-wizard--stacked .ntra-wizard-step.is-revealed:last-child {margin-bottom: 0; padding-bottom: 0; border-bottom: none;}
.ntra-wizard--stacked .ntra-wizard-step.is-revealed:not(.is-current) {opacity: 0.6;} /* già risposte: attenuate ma sempre modificabili */
.ntra-wizard--stacked .ntra-wizard-step.is-revealed:not(.is-current):hover,
.ntra-wizard--stacked .ntra-wizard-step.is-revealed:not(.is-current):focus-within {opacity: 1;}
.ntra-wizard--stacked .ntra-wizard-nav {justify-content: flex-start; margin-top: 14px;}
.ntra-wizard--stacked .ntra-wizard-dots {display: none;}
.ntra-wizard--stacked .ntra-wizard-step[data-step-type="choice"][data-choice-multiple="0"] .ntra-wizard-next {display: none;} /* scelta singola: si avanza scegliendo */

@keyframes ntra-wizard-stacked-reveal {
    from {opacity: 0; transform: translateY(10px);}
    to {opacity: 1; transform: translateY(0);}
}

/* ------------------------------------------------------------
   Layout "flat": tutto visibile, un solo bottone di invio
   ('layout' => 'flat')
   ------------------------------------------------------------ */
.ntra-wizard--flat .ntra-wizard-viewport {overflow: visible;}
.ntra-wizard--flat .ntra-wizard-track {flex-direction: column; align-items: stretch; transform: none !important; transition: none; touch-action: auto;}
.ntra-wizard--flat .ntra-wizard-step {display: block !important; flex: none; width: 100%; min-width: 0; margin-bottom: 26px; padding-bottom: 21px; border-bottom: 2px dashed var(--nta-black);}
.ntra-wizard--flat .ntra-wizard-step:last-child {margin-bottom: 0; padding-bottom: 0; border-bottom: none;}
.ntra-wizard--flat .ntra-wizard-step--intro {padding-bottom: 0; border-bottom: none;}
.ntra-wizard--flat .ntra-wizard-prev,
.ntra-wizard--flat .ntra-wizard-dots,
.ntra-wizard--flat .ntra-wizard-next {display: none !important;}
.ntra-wizard--flat .ntra-wizard-nav {justify-content: center; margin-top: 8px;}
.ntra-wizard--flat .ntra-wizard-step.is-shaking {animation: none;}

/* ------------------------------------------------------------
   Scheda introduttiva e pannello login / registrazione / ospite
   ------------------------------------------------------------ */
.ntra-wizard-intro {display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px 0 8px; text-align: center;}
.ntra-wizard-intro-image {width: 60%; max-width: 176px; height: auto;}
.ntra-wizard-intro-copy h3 {margin: 0 0 10px;}
.ntra-wizard-intro-copy p {margin: 0;}

.ntra-wizard-login-panel {width: 100%; max-width: 368px; margin-top: 6px; padding: 16px 18px; box-sizing: border-box; text-align: left; background: var(--nta-white); border: var(--nta-border); border-radius: var(--nta-field-radius);}
.ntra-wizard-login-panel-notice {margin: 0 0 8px; padding: 8px 11px; color: var(--nta-black); background: var(--nta-pink); border: var(--nta-border); border-radius: var(--nta-field-radius); font-size: var(--nta-fs-small); font-weight: 700;}
.ntra-wizard-login-panel-text {margin: 0 0 13px; font-size: var(--nta-fs-small);}
.ntra-wizard-login-panel-actions {display: flex; flex-wrap: wrap; align-items: center; gap: 10px;}
.ntra-wizard-login-panel-actions .bottone {margin: 0;}
.ntra-wizard-login-panel-link {font-size: var(--nta-fs-small); text-decoration: underline;}

/* "Continua come ospite": pulsante solo testo, come un link */
.ntra-wizard-guest-cta {display: inline-flex; align-items: center; gap: 5px; margin: 0 0 0 auto; padding: 5px 0; color: var(--nta-black); font-size: var(--nta-fs-small); font-weight: 700; text-decoration: underline; text-underline-offset: 2.4px;}
.ntra-wizard-guest-cta:hover {color: var(--nta-coral-dark);}

/* ------------------------------------------------------------
   Scheda domanda: opzioni a immagine (tessere)
   ------------------------------------------------------------ */
.ntra-wizard-question h3 {margin: 0 0 5px;}
.ntra-wizard-question-subtitle {margin: 0 0 18px; color: var(--nta-text-muted); font-size: var(--nta-fs-small);}

.ntra-wizard-options {display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 14px;}
.ntra-wizard-option {position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 11px 8px 13px; text-align: center; background: var(--nta-white); border: var(--nta-border); border-radius: var(--nta-block-radius); box-shadow: var(--nta-control-shadow); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;}
.ntra-wizard-option:hover {background: #fffbe8; transform: translateY(calc(var(--nta-press) / 2)); box-shadow: 0 calc(var(--nta-press) / 2) 0 0 var(--nta-shadow-color);}
.ntra-wizard-option:focus-within {outline: 2.4px solid var(--nta-coral-dark); outline-offset: 2.4px;}
.ntra-wizard-option input {position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;}
.ntra-wizard-option-media {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 77px; aspect-ratio: 1 / 1; border-radius: 6px;}
/* Con immagine o campione di colore: riquadro bordato. Solo testo: niente buco */
.ntra-wizard-option-media:has(img),
.ntra-wizard-option-media:has(.ntra-wizard-option-swatch) {background: var(--nta-white); border: var(--nta-border);}
.ntra-wizard-option-media:not(:has(img, .ntra-wizard-option-swatch)) {position: static; height: 0; aspect-ratio: auto;}
.ntra-wizard-form .ntra-wizard-option-media img {width: 100%; height: 100%; margin: 0; object-fit: cover; border-radius: 5px;}
.ntra-wizard-option-label {color: var(--nta-black); font-size: var(--nta-fs-small); font-weight: 700;}
/* Scelta fatta: la tessera "affonda", diventa gialla e mostra la spunta */
.ntra-wizard-option-check {position: absolute; top: -8px; right: -8px; display: flex; align-items: center; justify-content: center; width: 21px; height: 21px; color: var(--nta-white); background: var(--nta-coral-dark); border: var(--nta-border); border-radius: 50%; font-size: var(--nta-fs-small); opacity: 0; transform: scale(0.6); transition: opacity 0.15s ease, transform 0.15s ease;}
.ntra-wizard-option.is-selected {background: var(--nta-gold); transform: translateY(var(--nta-press)); box-shadow: none;}
.ntra-wizard-option.is-selected .ntra-wizard-option-check {opacity: 1; transform: scale(1);}
.ntra-wizard-option-swatch {display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 2.4px rgba(255, 255, 255, 0.6);}

/* ------------------------------------------------------------
   Scheda campi classici
   ------------------------------------------------------------ */
.ntra-wizard-fields h3 {margin: 0 0 5px;}
.ntra-wizard-fields-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 13px; margin-top: 14px;}
.ntra-wizard-field {display: flex; flex-direction: column; gap: 5px;}
.ntra-wizard-field-asterisk {color: var(--nta-coral-dark);}
.ntra-wizard-field-error {color: var(--nta-coral-dark); font-size: var(--nta-fs-xs); font-weight: 700;}
.ntra-wizard-field.is-locked input {color: var(--nta-text-muted); background: var(--nta-disabled); cursor: not-allowed;}
.ntra-wizard-field-locked-note {color: var(--nta-text-muted); font-size: var(--nta-fs-xs); font-style: italic;}
.ntra-wizard-field.is-invalid input,
.ntra-wizard-field.is-invalid textarea {background: #fff0ee; border-color: var(--nta-coral-dark);}

/* ------------------------------------------------------------
   Navigazione: frecce, puntini, invio
   ------------------------------------------------------------ */
.ntra-wizard-nav {display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 19px;}
.ntra-wizard-arrow {width: 40px; height: 40px;}
.ntra-wizard-form .ntra-wizard-arrow img {width: 14px; height: 14px; margin: 0; object-fit: contain;}
.ntra-wizard-arrow.is-hidden {visibility: hidden;}

.ntra-wizard-nav {flex-wrap: wrap;}

/* Linea a tappe (come nel design): una riga tutta sua sopra frecce e invio.
   Tratto già percorso rosa, il resto giallo; tappe passate teal, future bianche;
   il veicolo (img/wizard-veicolo.png) si sposta sulla tappa corrente.
   --ntra-wizard-trip (0 → 1) lo imposta il JS; data-count = "1/10". */
.ntra-wizard-dots {
    --ntra-wizard-dot: 22px;      /* diametro delle tappe */
    --ntra-wizard-line: 10px;     /* spessore della linea */
    --ntra-wizard-vehicle: 64px;  /* larghezza del veicolo */
    position: relative; order: -1; display: flex; align-items: center; justify-content: space-between;
    flex: 0 0 70%; margin: 26px 15% 14px; padding: 0; /* larghezza 70% + 15% per lato = 100% */
}
/* Linea: parte da metà della prima tappa e arriva a metà dell'ultima */
.ntra-wizard-dots::before {content: ""; position: absolute; top: 50%; left: calc(var(--ntra-wizard-dot) / 2); right: calc(var(--ntra-wizard-dot) / 2); height: var(--ntra-wizard-line); box-sizing: border-box; background: linear-gradient(to right, var(--nta-pink) calc(var(--ntra-wizard-trip, 0) * 100%), var(--nta-gold) 0); border: var(--nta-border); border-radius: var(--ntra-wizard-line); transform: translateY(-50%); transition: background 0.5s ease;}
/* Contatore "1/10" in alto a destra */
.ntra-wizard-dots::after {content: attr(data-count); position: absolute; right: 0; bottom: calc(100% + 2px); font-family: var(--nta-font-title); font-size: var(--nta-fs-h4); line-height: 1;}

.ntra-wizard-dots button {position: relative; z-index: 1; flex: 0 0 auto; width: var(--ntra-wizard-dot); height: var(--ntra-wizard-dot); margin: 0; padding: 0; background: var(--nta-white); border: var(--nta-border); border-radius: 50%; transition: background-color 0.2s ease, transform 0.2s ease;}
.ntra-wizard-dots button:has(~ button.is-active) {background: var(--nta-teal);} /* tappe già passate */
.ntra-wizard-dots button:not(:disabled):hover {transform: scale(1.15);}
.ntra-wizard-dots button.is-active {visibility: hidden;} /* sotto al veicolo */
.ntra-wizard-dots button:disabled {cursor: default;}

/* Veicolo: centrato sulla tappa corrente, scivola da una tappa all'altra */
.ntra-wizard-dots img[data-wizard-vehicle] {position: absolute; top: 50%; left: calc(var(--ntra-wizard-dot) / 2 + (100% - var(--ntra-wizard-dot)) * var(--ntra-wizard-trip, 0)); z-index: 2; width: var(--ntra-wizard-vehicle); height: auto; margin: 0; pointer-events: none; transform: translate(-50%, -55%); transition: left 0.6s cubic-bezier(0.65, 0, 0.35, 1);}

@media (max-width: 640px) {
    .ntra-wizard-dots {--ntra-wizard-dot: 14px; --ntra-wizard-line: 7px; --ntra-wizard-vehicle: 44px; flex-basis: 100%; margin-inline: 0;}
}

.ntra-wizard-submit {margin: 0;}

/* Il JS mostra/nasconde la navigazione con l'attributo hidden */
.ntra-wizard-next[hidden],
.ntra-wizard-guest-cta[hidden] {display: none !important;}

.ntra-wizard-required-hint {margin: 11px 0 0; color: var(--nta-coral-dark); font-size: var(--nta-fs-small); text-align: center;}
.ntra-wizard-hint-intro {margin: 0 0 3px; font-weight: 700;}
.ntra-wizard-hint-list {display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none;}
.ntra-wizard-hint-list li {margin: 0; font-weight: 700;}
.ntra-wizard-hint-list li::before {content: "• ";}

.ntra-wizard-step.is-shaking {animation: ntra-wizard-shake 0.4s ease;}
@keyframes ntra-wizard-shake {
    0%, 100% {transform: translateX(0);}
    20% {transform: translateX(-5px);}
    40% {transform: translateX(5px);}
    60% {transform: translateX(-3px);}
    80% {transform: translateX(3px);}
}

/* ------------------------------------------------------------
   Tema "regalo" (ntra-wizard--gift): tessere scelte in teal
   ------------------------------------------------------------ */
.ntra-wizard--gift .ntra-wizard-option.is-selected {background: var(--nta-teal);}

/* Transizione "gift": ogni scheda che entra fa una piccola comparsa */
.ntra-wizard[data-wizard-transition="gift"] .ntra-wizard-track {transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);}
.ntra-wizard[data-wizard-transition="gift"] [data-wizard-step] {opacity: 0;}
.ntra-wizard[data-wizard-transition="gift"] [data-wizard-step].is-current {animation: ntra-wizard-gift-reveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;}
@keyframes ntra-wizard-gift-reveal {
    0% {opacity: 0; transform: scale(0.92) rotate(-1.5deg);}
    60% {opacity: 1; transform: scale(1.03) rotate(0.5deg);}
    100% {opacity: 1; transform: scale(1) rotate(0);}
}
@media (prefers-reduced-motion: reduce) {
    .ntra-wizard[data-wizard-transition="gift"] [data-wizard-step] {opacity: 1; animation: none;}
}

/* ------------------------------------------------------------
   Scheda "calendario" (giorno + orario) del modulo appuntamenti
   ------------------------------------------------------------ */
.ntra-wizard-calendar-wrap {text-align: center;}
.ntra-wizard-calendar-hint {color: var(--nta-text-muted); font-style: italic;}
.ntra-wizard-calendar {max-width: 304px; margin: 0 auto;}
.ntra-wizard-calendar-header {display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;}
.ntra-wizard-calendar-month {font-family: var(--nta-font-accent); font-size: var(--nta-fs-h4); text-transform: capitalize;}
.ntra-wizard-calendar-nav {width: 30px; height: 30px; font-size: var(--nta-fs-h4); line-height: 1;}

.ntra-wizard-calendar-weekdays {display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 5px; color: var(--nta-text-muted); font-size: var(--nta-fs-xs); font-weight: 700; text-transform: uppercase;}
.ntra-wizard-calendar-grid {display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;}
.ntra-wizard-calendar-loading {grid-column: 1 / -1; padding: 8px 0; color: var(--nta-text-muted); font-size: var(--nta-fs-small);}

/* Giorni e orari: tessere bianche con bordo, gialle al passaggio, teal se scelte */
.ntra-wizard-calendar-cell,
.ntra-wizard-calendar-slot {margin: 0; color: var(--nta-black); background: var(--nta-white); border: var(--nta-border); border-radius: var(--nta-field-radius); font-size: var(--nta-fs-small);}
.ntra-wizard-calendar-cell {display: block; width: 100%; aspect-ratio: 1; padding: 0;}
.ntra-wizard-calendar-cell:not(.is-unavailable):not(.is-empty):hover,
.ntra-wizard-calendar-slot:hover {background: var(--nta-gold);}
.ntra-wizard-calendar-cell.is-unavailable {color: #999; background: #f1f1f1; border-color: #bbb; cursor: not-allowed;}
.ntra-wizard-calendar-cell.is-empty {background: transparent; border: none; cursor: default;}
.ntra-wizard-calendar-cell.is-selected,
.ntra-wizard-calendar-slot.is-selected {background: var(--nta-teal);}

.ntra-wizard-calendar-slots {margin-top: 16px; text-align: left;}
.ntra-wizard-calendar-slots-label {margin: 0 0 8px; font-weight: 700;}
.ntra-wizard-calendar-slots-grid {display: flex; flex-wrap: wrap; gap: 8px;}
.ntra-wizard-calendar-slot {display: inline-block; padding: 6px 11px;}

/* ------------------------------------------------------------
   Scheda "riepilogo"
   ------------------------------------------------------------ */
.ntra-wizard-summary-wrap {text-align: center;}
.ntra-wizard-summary {max-width: 368px; margin: 16px auto 0; padding: 18px 21px; text-align: left; background: var(--nta-white); border: var(--nta-border); border-radius: var(--nta-field-radius);}
.ntra-wizard-summary dt {margin-top: 11px; color: var(--nta-text-muted); font-size: var(--nta-fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;}
.ntra-wizard-summary dt:first-child {margin-top: 0;}
.ntra-wizard-summary dd {margin: 2px 0 0; font-weight: 700;}

.ntra-wizard-empty-notice {padding: 16px; text-align: center;}

/* ------------------------------------------------------------
   Modulo semplice (non a schede): richiesta transfer
   ------------------------------------------------------------ */
.ntra-booking-request-form.ntra-card {max-width: 544px; height: auto; margin: 22px auto; padding: 22px; text-align: left;}
.ntra-booking-request-form.ntra-card p {min-height: 0;}
.ntra-booking-request-form .bottone {margin: 16px 0 0;}

@media (max-width: 640px) {
    .ntra-wizard-form.ntra-card {--ntra-wizard-pad: 16px;}
    .ntra-wizard-header {grid-template-columns: 36px 1fr 36px; padding: 10px 12px;}
    .ntra-wizard-header .bottone {width: 36px; height: 36px;}
    .ntra-wizard-options {grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 11px;}
    .ntra-wizard-login-panel-actions {flex-direction: column; align-items: stretch;}
    .ntra-wizard-guest-cta {justify-content: center; margin-left: 0;}
}