/* RESET MINIMO */
* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
}

body {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
        background:
                linear-gradient(to top, rgba(19, 21, 25, 0.82), rgba(19, 21, 25, 0.68)),
                url("../../images/overlay.png"),
                url("../../images/bg.webp");
        background-size: auto, 256px 256px, cover;
        background-repeat: repeat, repeat, no-repeat;
        background-attachment: fixed;
        color: #fff;
        min-height: 100vh;
        line-height: 1.6;
}

/* CONTENITORE PAGINA */
.page {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.25rem;
}

/* CARD CENTRALE */
.card {
        width: 100%;
        max-width: 880px;
        background: linear-gradient(150deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.54));
        backdrop-filter: blur(10px);
        padding: 2.6rem 1.9rem 2.4rem;
        text-align: center;
        position: relative;
        border-radius: 1.1rem;
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 20px 46px rgba(0, 0, 0, 0.5);
}

.card::before {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: inherit;
        border: 1px solid rgba(255, 255, 255, 0.08);
        pointer-events: none;
}

.card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 16% 18%, rgba(212, 175, 55, 0.1), transparent 45%);
        opacity: 0.9;
        pointer-events: none;
}

/* LOGO */
.logo {
        width: 64px;
        height: 64px;
        border: 1px solid rgba(255,255,255,0.6);
        margin: 0 auto 1.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
}

.logo img {
        width: 70%;
        filter: brightness(0) invert(1);
}

/* TITOLI */
h1 {
        text-transform: uppercase;
        letter-spacing: 0.35em;
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
}

.tema {
        font-size: 0.82rem;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        opacity: 0.8;
        margin-bottom: 1.25rem;
        position: relative;
}

.tema::after {
        content: "";
        display: block;
        width: 40px;
        height: 1px;
        background: #d4af37;
        margin: 0.75rem auto 0;
}

.intro {
        font-size: 0.98rem;
        opacity: 0.85;
        margin-bottom: 1.75rem;
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
}

/* Messaggi di stato */
.alert {
        text-align: left;
        padding: 1rem 1.25rem;
        margin-bottom: 1.4rem;
        border-radius: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(0, 0, 0, 0.45);
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
        position: relative;
}

.alert strong {
        display: block;
        margin-bottom: 0.35rem;
        letter-spacing: 0.06em;
}

.alert ul {
        padding-left: 1.2rem;
        display: grid;
        gap: 0.25rem;
}

.alert-error {
        border-color: rgba(255, 72, 72, 0.65);
        background: linear-gradient(120deg, rgba(255, 72, 72, 0.12), rgba(255, 72, 72, 0.08));
        color: #ffecec;
}

.alert-error::before {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        border: 1px solid rgba(255, 72, 72, 0.35);
        pointer-events: none;
}

.alert-warning {
        border-color: rgba(255, 193, 81, 0.6);
        background: linear-gradient(120deg, rgba(255, 193, 81, 0.12), rgba(255, 193, 81, 0.08));
        color: #fff7e6;
}

.alert-success {
        border-color: rgba(103, 232, 152, 0.55);
        background: linear-gradient(120deg, rgba(43, 210, 137, 0.14), rgba(43, 210, 137, 0.08));
        color: #e8fff2;
}

/* FORM */
form {
        text-align: left;
}

/* GRID MOBILE-FIRST */
.row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.1rem;
        margin-bottom: 0.8rem;
        align-items: stretch;
}

.row.tight {
        gap: 0.7rem;
}

.field {
        margin-bottom: 1.5rem;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
}

.row > .field {
        min-width: 0;
}

label {
        display: block;
        font-size: 0.72rem;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        margin-bottom: 0.15rem;
        opacity: 0.85;
}

input:not([type="radio"]):not([type="checkbox"]),
select {
        width: 100%;
        padding: 0.95rem 1rem;
        background: rgba(10, 10, 14, 0.55);
        border: 1px solid rgba(255,255,255,0.55);
        color: #fff;
        font-size: 0.98rem;
        font-family: inherit;
        border-radius: 0.7rem;
        backdrop-filter: blur(4px);
        min-height: 3.1rem;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

input::placeholder {
        color: rgba(255,255,255,0.4);
}

input:not([type="radio"]):not([type="checkbox"]):focus,
select:focus {
        outline: none;
        border-color: rgba(212, 175, 55, 0.95);
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
        background-color: rgba(18, 18, 24, 0.7);
}

.field.radios input[type="radio"]:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
        border-radius: 999px;
}

/* Prefisso + numero di cellulare */
.phone-input {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.75rem;
        align-items: center;
}

.hidden {
        display: none !important;
}

.phone-input .prefisso {
        max-width: 5rem;
        text-align: center;
}

.phone-input input {
        min-width: 0;
}

/* Radio button a riga */
.field.radios {
        gap: 0.75rem;
}

.field.radios .label {
        display: block;
        font-size: 0.8rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        margin-bottom: 0;
        opacity: 0.8;
}

.field.radios .options {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        font-size: 0.95rem;
        align-items: center;
}

.field.radios .options label {
        background: rgba(255, 255, 255, 0.05);
        padding: 0.5rem 0.9rem;
        border-radius: 0.6rem;
        border: 1px solid rgba(255, 255, 255, 0.08);
}

.field.radios label {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        cursor: pointer;
        line-height: 1.35;
}

.field.radios input[type="radio"] {
        accent-color: #d4af37;
        transform: scale(1.05);
        margin: 0;
        width: 1.05rem;
        height: 1.05rem;
}

/* Blocco dettagli volo */
.flight-details {
        margin-top: 0.5rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        display: none;
        gap: 0.25rem;
}

.flight-details .row {
        margin-bottom: 0.6rem;
}

.flight-details.visible {
        display: block;
}

.field-warning {
        margin-top: -0.5rem;
        font-size: 0.9rem;
        color: #ffd27f;
}

/* Wrapper per input con icona custom */
.input-icon {
        position: relative;
}


.input-icon input {
        position: relative;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
}

.input-icon input[type="text"],
.input-icon input[type="time"] {
        width: 100%;
        padding-right: 2.75rem;
}

.input-icon .icon {
        position: absolute;
        right: 0.88rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1.25rem;
        height: 1.25rem;
        background-size: contain;
        background-repeat: no-repeat;
        opacity: 0.6;
        pointer-events: none;
}

.input-icon.date-icon .icon {
        background: url("../../images/calendar.svg") no-repeat center;
}

.input-icon.time-icon .icon {
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9' stroke='white' stroke-width='2'/%3E%3Cline x1='12' y1='12' x2='12' y2='7' stroke='white' stroke-width='2'/%3E%3Cline x1='12' y1='12' x2='16' y2='14' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
}

/* Rimuovi l'icona nativa mantenendo il click per aprire il picker */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
	opacity: 0;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.input-icon input[type="date"],
.input-icon input[type="time"] {
	cursor: pointer;
}

/* --- Stile select (aeroporto) --- */
select {
        padding-right: 2.5rem;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
}

select:focus {
        border-color: rgba(212, 175, 55, 0.95);
        background-color: rgba(18, 18, 24, 0.7);
}

select::-ms-expand {
        display: none;
}

.select-field {
        position: relative;
}

.select-field::after {
        content: '';
        position: absolute;
        pointer-events: none;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #ffffff;
        opacity: 0.9;
}

select option {
        background: #111;
        color: #fff;
}

.chiesa-group {
        margin-top: 2rem;
        padding-top: 1.1rem;
        border-top: 1px solid rgba(255,255,255,0.08);
}

/* AZIONI */
.actions {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        margin-top: 1.1rem;
}

.btn {
        flex: 1;
        text-align: center;
        padding: 0.95rem 1.2rem;
        text-transform: uppercase;
        letter-spacing: 0.25em;
        font-size: 0.8rem;
        text-decoration: none;
        cursor: pointer;
        border: 1px solid #fff;
        background: transparent;
        color: #fff;
        transition: background 0.2s ease, color 0.2s ease;
}

.btn.primary {
        background: linear-gradient(120deg, #ffffff, #f5f1dc);
        color: #000;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.btn.primary:hover {
        background: rgba(255,255,255,0.9);
}

.btn.outline:hover {
        background: rgba(255,255,255,0.08);
}

/* FOOTER */
.footer-wrap {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 0.9rem;
}

footer {
        font-size: 0.7rem;
        letter-spacing: 0.2em;
        opacity: 0.6;
        text-align: center;
        width: 100%;
}

/* Consenso privacy */
.field.consenso {
        margin-top: 1.5rem;
        font-size: 0.8rem;
        line-height: 1.5;
}

.checkbox-label {
        display: flex;
        align-items: flex-start;
        gap: 0.6rem;
        cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
        margin-top: 0.15rem;
        accent-color: #ffffff;
}

.checkbox-label span {
        opacity: 0.9;
}

.consenso-note {
        margin-top: 0.5rem;
        font-size: 0.7rem;
        opacity: 0.6;
}

.chiesa-group .row {
        margin-top: 0.8rem;
}

/* RESPONSIVE */
@media (max-width: 720px) {
  body {
    background-attachment: scroll;
  }

  .card {
    padding: 2.1rem 1.3rem 2rem;
    border-radius: 0.6rem;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
  }

  h1 {
    font-size: 1.35rem;
    letter-spacing: 0.24em;
  }

  .intro {
    font-size: 0.92rem;
  }

  .phone-input {
    grid-template-columns: 1fr;
  }

  .field.radios .options {
    gap: 0.75rem 1.1rem;
  }
}

@media (min-width: 640px) {
  .actions {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .page {
    padding: 2rem;
  }

  .card {
    padding: 3rem 3rem 2.6rem;
  }

  .row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.2rem;
  }

  .actions {
    gap: 1rem;
  }
}

@media (max-width: 520px) {
  h1 {
    letter-spacing: 0.26em;
    line-height: 1.2;
  }

  label {
    letter-spacing: 0.18em;
  }

  .btn {
    letter-spacing: 0.2em;
  }
}
/* =========================================
   BOOTSTRAP DATEPICKER - TEMA BIANCO (LIGHT)
   ========================================= */

/* CONTENITORE: Sfondo Bianco e Testo Nero */
.datepicker {
    background-color: #ffffff !important; /* BIANCO */
    color: #000000 !important;            /* NERO */
    border: 1px solid #ccc !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5) !important;
    padding: 6px;
    font-family: inherit;
}

/* HEADER (Mese e Anno) */
.datepicker-header .datepicker-controls .button {
    color: #000 !important; /* Frecce nere */
    background: transparent !important;
}
.datepicker-header .datepicker-controls .button:hover {
    background-color: #f2f2f2 !important; /* Grigio chiaro al passaggio */
}

.datepicker-header .datepicker-controls .view-switch {
    color: #000 !important; /* Titolo nero */
    font-weight: bold;
}
.datepicker-header .datepicker-controls .view-switch:hover {
    background-color: #f2f2f2 !important;
}

/* GIORNI SETTIMANA (Lun, Mar...) */
.datepicker-main .days-of-week {
    color: #666 !important; /* Grigio scuro leggibile */
    font-weight: 600;
}

/* CELLE GIORNI (Numeri) */
.datepicker-cell {
    color: #000 !important; /* Numeri neri */
    border-radius: 4px;
}

/* HOVER (Passaggio del mouse) */
.datepicker-cell:hover {
    background-color: #e6e6e6 !important; /* Sfondo grigio chiaro */
    color: #000 !important;
}

/* GIORNO SELEZIONATO */
/* Uso il color ORO del tuo sito per coerenza, ma su sfondo scuro */
.datepicker-cell.selected,
.datepicker-cell.selected:hover {
    background-color: #d4af37 !important; /* Oro */
    color: #000 !important; /* Testo nero */
    font-weight: bold;
}

/* GIORNO CORRENTE (Oggi) */
.datepicker-cell.today {
    background-color: #fff8e1 !important; /* Giallino chiarissimo */
    border: 1px solid #d4af37 !important;
}

/* Mese precedente/successivo */
.datepicker-cell.prev,
.datepicker-cell.next {
    color: #ccc !important; /* Grigio chiaro per i giorni fuori mese */
}

/* Rimuovi freccette decorative esterne */
.datepicker::before,
.datepicker::after {
    border-bottom-color: #ffffff !important;
}

@media (max-width: 720px), (pointer: coarse) {
  #data_nascita {
    font-size: 16px;
  }

  .datepicker.is-mobile-datepicker,
  .datepicker-dropdown.is-mobile-datepicker {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 99999 !important;
    width: min(94vw, 420px);
    max-height: 85vh;
    padding: 0.75rem;
    overflow-y: auto;
    border-radius: 1rem;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.28) !important;
  }

  .datepicker.is-mobile-datepicker {
    font-size: 1.05rem;
  }

  .datepicker.is-mobile-datepicker .datepicker-header .datepicker-controls .button {
    min-width: 2.75rem;
    min-height: 2.75rem;
    font-size: 1.05rem;
    border-radius: 999px;
    background-color: #f7f7f7 !important;
  }

  .datepicker.is-mobile-datepicker .datepicker-header .datepicker-controls .view-switch {
    font-size: 1.15rem;
  }

  .datepicker.is-mobile-datepicker .datepicker-main .days-of-week {
    font-size: 1rem;
    letter-spacing: 0.04em;
  }

  .datepicker.is-mobile-datepicker .datepicker-cell {
    min-width: 2.75rem;
    min-height: 2.75rem;
    line-height: 2.75rem;
    font-size: 1.05rem;
  }

  .datepicker.is-mobile-datepicker .datepicker-cell.selected,
  .datepicker.is-mobile-datepicker .datepicker-cell.selected:hover {
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.35);
  }
}