.mla-booking-page {
    --booking-bg: #f5f5f7;
    --booking-card: #fff;
    --booking-text: #000;
    --booking-muted: rgba(0, 0, 0, .62);
    --booking-brand: #fcd800;
    --booking-border: rgba(0, 0, 0, .10);
    --booking-shadow: 0 16px 34px rgba(0, 0, 0, .08);
    --booking-radius: 20px;
    min-height: calc(100vh - var(--mla-nav-h));
    padding: 0 0 32px;
    color: var(--booking-text);
    background: #fff;
    font-family: "Work Sans", sans-serif;
}

/* Versione iframe: qui la barra di navigazione MLA non c'è, quindi tutto quello
   che lasciava spazio sotto di essa (altezza minima della pagina, aggancio del
   riepilogo, sua altezza massima) deve partire da zero. */
.mla-booking-page.is-embedded {
    --mla-nav-h: 0px;
    --mla-nav-h-mob: 0px;
}

.mla-booking-hero {
    max-width: 1280px;
    margin: 0 auto;
    padding: 30px 20px 0;
}

.mla-booking-kicker {
    margin: 0 0 8px;
    color: rgba(0, 0, 0, .56);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    text-transform: uppercase;
}

.mla-booking-titleRow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.mla-booking-title {
    max-width: none;
    margin: 0;
    color: #000;
    font-family: "Work Sans", sans-serif;
    font-size: clamp(30px, 5vw, 38px);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: 0;
}

.mla-booking-subtitle {
    max-width: 760px;
    margin: 12px 0 0;
    color: rgba(0, 0, 0, .70);
    font-size: 16px;
    line-height: 1.45;
}

.booking-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, .68fr);
    gap: 15px;
    /* Le due colonne sono alte uguali: il riepilogo arriva in fondo alla card. */
    align-items: stretch;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px;
}

.booking-panel,
.pricePanel {
    min-width: 0;
    overflow: hidden;
    background: var(--booking-card);
    border: 1px solid var(--booking-border);
    border-radius: var(--booking-radius);
}

.booking-panel {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .04);
}

.btnIcon {
    display: inline-flex;
    width: 1.35rem;
    height: 1rem;
    vertical-align: -0.15em;
}

.btnIcon--left {
    margin-right: .45rem;
}

.btnIcon--right {
    margin-left: .45rem;
}

.btnIcon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.panelHeader {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 25px 20px 18px;
}

.steps {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.steps::-webkit-scrollbar {
    display: none;
}

.stepPill {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 10px 10px;
    color: #000;
    background: #fff;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.stepPill strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(0, 0, 0, .06);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 400;
}

.stepPill.active {
    color: #fff;
    background: #000;
}

.stepPill.active strong {
    color: #000;
    background: var(--booking-brand);
}

.stepPill.done {
    background: #fff;
}

.stepPill.done strong {
    color: #000;
    background: var(--booking-brand);
}

.stepPill:disabled {
    cursor: default;
}

.stepDots {
    display: none;
}

.debugTools {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    width: fit-content;
    padding: 6px 8px;
    background: #fff7d6;
    border: 1px dashed rgba(0, 0, 0, .28);
    border-radius: 999px;
}

.debugTools span {
    color: rgba(0, 0, 0, .58);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}

.debugFillBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 6px 11px;
    color: #000;
    background: var(--booking-brand);
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.debugFillBtn:hover {
    border-color: rgba(0, 0, 0, .36);
}

.debugPricingDate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.debugPricingDate input {
    min-height: 28px;
    padding: 3px 7px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .22);
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
}

.debugPricingResetBtn {
    min-height: 28px;
    padding: 5px 9px;
    color: #000;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .22);
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.debugPricingResetBtn:disabled {
    cursor: default;
    opacity: .5;
}

.subSteps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px;
    background: #f5f5f7;
    border: 1px solid var(--booking-border);
    border-radius: 18px;
}

.subStepPill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 8px 12px 8px 9px;
    color: rgba(0, 0, 0, .72);
    background: #fff;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.subStepPill strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: rgba(0, 0, 0, .62);
    background: rgba(0, 0, 0, .06);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 500;
}

.subStepPill.active {
    color: #000;
    background: var(--booking-brand);
    border-color: rgba(0, 0, 0, .12);
}

.subStepPill.active strong {
    color: #fff;
    background: #000;
}

.subStepPill.done {
    color: #000;
    background: #fff;
    border-color: rgba(0, 0, 0, .12);
}

.subStepPill.done strong {
    color: #000;
    background: var(--booking-brand);
}

.subStepPill:disabled {
    opacity: .58;
    cursor: default;
}

.stepContainer {
    min-height: 460px;
    padding: 0 20px;
}

/* Lo stacco dalla barra dei pulsanti e' un blocchetto vuoto, non il padding:
   quando l'area scorre il browser il padding di fondo non lo disegna. */
.stepContainer::after {
    content: "";
    display: block;
    flex: 0 0 auto;
    height: 20px;
}

/* Riga di aiuto in cima allo step: il titolo lo dice gia' la barra degli step,
   qui restano solo icona e spiegazione. */
.stepHero {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--booking-border);
    border-radius: 14px;
}

/* Sotto la testata dello step il primo titolo a pillola non aggiunge il suo
   margine: i due stacchi si mettono in fila e lo spazio sembra doppio. Vale
   solo per il primo, quelli piu' in basso separano davvero due blocchi. */
.stepHero + .payBlock > .svcGroupTitlePill,
.stepHero + .bookingServices > .svcGroupTitlePill:first-child {
    margin-top: 0;
}

.stepHero__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    background: var(--booking-brand);
    border-radius: 50%;
}

.stepHero__icon .bi {
    color: #000;
    font-size: 17px;
    line-height: 1;
}

.stepHero__text {
    min-width: 0;
    margin: 0;
    color: rgba(0, 0, 0, .62) !important;
    font-size: 14px;
    line-height: 1.35;
}

.stepContainer p,
.stepContainer small,
.stepContainer .text-muted {
    color: rgba(0, 0, 0, .62) !important;
}

.stepContainer .row {
    margin-left: 0;
    margin-right: 0;
}

.stepContainer .form-group {
    margin-bottom: 10px;
}

.leaderCodeStep {
    width: 100%;
}

.leaderCodeStep .codeFieldHeader {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    height: 16px;
    gap: 12px;
}

.leaderCodeStep .codeFieldHeader .control-label {
    white-space: nowrap;
}

.leaderCodeStep .codeFieldStatus {
    text-align: right;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
    color: #586475;
}

.leaderCodeStep .codeFieldHeader .codeFieldStatus > span {
    display: inline-flex;
    align-items: center;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: normal;
}

.leaderCodeStep .codeFieldStatus .bi {
    margin-left: 4px;
    font-size: inherit;
}

@media (max-width: 480px) {
    .leaderCodeStep .codeFieldLabelPrefix {
        display: none;
    }

    .leaderCodeStep .codeFieldHeader {
        gap: 6px;
    }

    .leaderCodeStep .codeFieldStatus {
        font-size: 9px;
    }

    .leaderCodeStep .codeFieldStatus .bi {
        margin-left: 2px;
    }
}

.promoChoiceCard {
    padding: 20px 20px 40px !important;
}

.stepContainer .form-group.row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    align-items: stretch;
    padding: 12px 14px 14px;
    background: var(--booking-bg);
    border: 1px solid var(--booking-border);
    border-radius: var(--booking-radius);
    margin: 0 0 10px;
}

.stepContainer .form-group:not(.row) {
    display: grid;
    gap: 6px;
    padding: 12px 14px 14px;
    background: var(--booking-bg);
    border: 0;
    border-radius: var(--booking-radius);
}

.stepContainer .form-group.row > label,
.stepContainer .form-group.row > .control-label {
    grid-column: 1;
    width: auto;
    max-width: none;
    padding: 0;
}

.stepContainer .form-group.row > div {
    grid-column: 1;
    width: auto;
    max-width: none;
    padding: 0;
}

.stepContainer .form-group.row.groupedFields,
.stepContainer .form-group.row:has(> div > .groupedFields__label) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.stepContainer .form-group.row.groupedFields > label,
.stepContainer .form-group.row:has(> div > .groupedFields__label) > label {
    grid-column: 1 / -1;
}

.stepContainer .form-group.row.groupedFields > div,
.stepContainer .form-group.row:has(> div > .groupedFields__label) > div {
    display: grid;
    grid-column: auto;
    gap: 5px;
}

.groupedFields__label,
.residenceFields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    grid-column: 1 / -1;
    width: 100%;
}

.residenceSuggestField {
    position: relative;
    display: grid;
    gap: 5px;
    min-width: 0;
}

.stepContainer .form-group.row.residenceFormGroup {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stepContainer .form-group.row.residenceFormGroup > .residenceFields {
    grid-column: 1 / -1;
}

.residenceSuggestMenu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid rgba(0, 0, 0, .14);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
}

/* Il menu della select non sta dentro la card: lo posiziona il JS rispetto al
   campo, cosi' nessun contenitore che scorre lo taglia. */
.selectSuggest__menu {
    position: fixed;
    right: auto;
    z-index: 1300;
}

.residenceSuggestOption {
    display: grid;
    width: 100%;
    gap: 2px;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    background: #fff;
    padding: 8px 10px;
    color: inherit;
    text-align: left;
}

.residenceSuggestOption:last-child {
    border-bottom: 0;
}

.residenceSuggestOption:hover,
.residenceSuggestOption:focus,
.residenceSuggestOption.is-active {
    background: #f3f6fa;
    outline: none;
}

.residenceSuggestOption__main {
    font-size: 13px;
    font-weight: 600;
}

.residenceSuggestOption__meta {
    color: rgba(0, 0, 0, .58);
    font-size: 11px;
    line-height: 1.25;
}

.selectSuggest .selectSuggest__control {
    padding-right: 36px;
    cursor: pointer;
    caret-color: transparent;
    text-overflow: ellipsis;
}

.selectSuggest__caret {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    color: rgba(0, 0, 0, .45);
    pointer-events: none;
    transition: transform .15s ease;
}

.selectSuggest.is-open .selectSuggest__caret {
    transform: translateY(-50%) rotate(180deg);
}

.selectSuggest .selectSuggest__control:disabled {
    cursor: default;
    opacity: .55;
}

.residenceSuggestOption.is-selected {
    background: #f3f6fa;
}

.selectSuggest__placeholderOption .residenceSuggestOption__main {
    color: rgba(0, 0, 0, .5);
    font-weight: 400;
}

.selectSuggest__emptyOption {
    background: #fbfcfd;
    cursor: default;
}

.selectSuggest__emptyOption .residenceSuggestOption__main {
    color: rgba(0, 0, 0, .5);
    font-weight: 400;
    font-style: italic;
}

.cfFieldHead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.stepContainer .cfFieldHead .segmented {
    border: none;
}

.stepContainer .cfFieldHead .segmented label {
    min-width: 0;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1;
}

.stepContainer .cfFieldHead .segmented input:checked + label {
    background: var(--booking-brand);
}

.fieldsGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}

.fieldsGrid > .form-group.row,
.fieldsGrid > .form-group:not(.row) {
    margin: 0;
}

.fieldsGrid > .fieldFull,
.fieldsGrid > .form-group.row.groupedFields,
.fieldsGrid > .form-group.row:has(> div > .groupedFields__label) {
    grid-column: 1 / -1;
}

/* Step 2: un campo per riga, e appare solo quando tocca a lui (task 9 e 10). */
.oneAtATime {
    grid-template-columns: 1fr;
    margin-bottom: 10px;
}

/* Centro e durata sono due scelte dello stesso blocco: affiancate sul desktop,
   impilate sul telefono per non restringere inutilmente le select. */
.centroDurataFields {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr);
    gap: 10px;
    align-items: start;
    margin: 0;
}

.stepContainer .centroDurataFields > .stepField {
    margin: 0;
}

.stepContainer .form-group.stepField.is-required {
    background: var(--booking-brand);
    transition: background .2s ease;
}

/* L'avviso sta sulla riga dell'etichetta, a destra: il riquadro resta di due
   righe invece di tre. */
.stepContainer .form-group.row.stepField {
    grid-template-columns: 1fr auto;
}

.stepContainer .form-group.row.stepField > div {
    grid-column: 1 / -1;
}

/* Acceso per un attimo quando arrivi qui dalla matita del riepilogo. */
.is-highlight {
    border-color: rgba(0, 0, 0, .35) !important;
    box-shadow: 0 0 0 6px rgba(252, 216, 0, .35);
}

.stepField__alert {
    grid-column: 2;
    justify-self: end;
    margin: 0;
    color: #000;
    font-size: 11px;
    line-height: 1.25;
}

.stepField__alert .stepField__alertIcon {
    margin-right: 4px;
    /* Stessa altezza di riga del testo: l'icona non deve alzare il riquadro. */
    font-size: 1em;
    line-height: 1;
}

@media (max-width: 767px) {
    .fieldsGrid {
        grid-template-columns: 1fr;
    }

    .centroDurataFields {
        grid-template-columns: 1fr;
    }

    .residenceFields {
        grid-template-columns: 1fr;
    }
}

.stepContainer [class^="col-sm-"],
.stepContainer [class*=" col-sm-"] {
    width: auto;
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

.stepContainer label,
.stepContainer .control-label {
    margin: 0;
    color: rgba(0, 0, 0, .68);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    text-transform: uppercase;
}

.stepContainer .control-label small {
    color: rgba(0, 0, 0, .52);
    font-size: 11px;
}

.stepContainer input[type="text"],
.stepContainer input[type="email"],
.stepContainer input[type="tel"],
.stepContainer input[type="date"],
.stepContainer input[type="number"],
.stepContainer input[type="password"],
.stepContainer select,
.stepContainer textarea,
.stepContainer .form-control {
    width: 100%;
    min-height: 42px;
    padding: 10px;
    color: #000;
    background: #fff;
    border: 1px solid var(--booking-border);
    border-radius: 12px;
    box-shadow: none;
    font-family: "Work Sans", sans-serif;
    font-size: 14px;
    outline: none;
}

/* Un solo grigio per tutti i suggerimenti nei campi vuoti. Il maiuscolo del
   campo Codice Leader vale per quello che scrivi, non per il suggerimento. */
.stepContainer .form-control::placeholder {
    color: rgba(0, 0, 0, .38);
    text-transform: none;
}

.stepContainer input[type="radio"] {
    accent-color: #000;
}

.stepContainer .form-check,
.stepContainer .inline-rb {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    margin: 7px 0;
}

.stepContainer .form-check-input[type="radio"] {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, .45);
    border-radius: 50%;
    box-shadow: none;
    cursor: pointer;
}

.stepContainer .form-check-input[type="radio"]:checked {
    background-color: #000;
    border-color: #000;
}

.stepContainer .form-check-input[type="radio"]:focus {
    border-color: #000;
    box-shadow: 0 0 0 3px rgba(252, 216, 0, .25);
}

.stepContainer .form-check-label,
.stepContainer .inline-rb label {
    cursor: pointer;
}

.stepContainer textarea {
    min-height: 86px;
    resize: vertical;
}

.stepContainer input:focus,
.stepContainer select:focus,
.stepContainer textarea:focus,
.stepContainer .form-control:focus {
    border-color: rgba(0, 0, 0, .18);
    box-shadow: 0 0 0 4px rgba(252, 216, 0, .20);
}

.stepContainer .form-control.is-invalid,
.stepContainer .form-control.is-invalid:focus {
    border-color: #ba1a1a;
    box-shadow: 0 0 0 4px rgba(186, 26, 26, .15);
}

.stepContainer select:disabled,
.stepContainer input:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.stepContainer .alert {
    padding: 12px 14px;
    border-radius: 18px;
    font-size: 14px;
}

.stepContainer .alert-danger {
    color: #6f1d1b;
    background: #fff1f0;
    border: 1px solid #ffd2ce;
}

.stepContainer .alert-warning {
    color: #4d3900;
    background: #fff7d6;
    border: 1px solid #ffe995;
}

.serviceConfirmWarning {
    margin: 18px 0 0;
}

.validationNearActions {
    margin: 18px 0 0;
}

.registrationOtp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
    padding: 12px 14px;
    background: #fffbe6;
    border: 1px solid #f1df72;
    border-radius: 12px;
}

.registrationOtp__copy {
    display: grid;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
}

.registrationOtp__copy small {
    color: #555;
}

.registrationOtp__controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.registrationOtp__input.form-control {
    width: 132px;
    text-align: center;
    font-weight: 600;
    letter-spacing: .24em;
}

.registrationOtp__resend {
    white-space: nowrap;
}

.registrationOtp > .text-danger {
    flex-basis: 100%;
    margin-top: -6px;
}

.registrationOtp--verified {
    justify-content: flex-start;
    color: #225c36;
    background: #f0faf3;
    border-color: #b9dfc5;
}

.registrationOtp__check {
    display: grid;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    place-items: center;
    color: #fff;
    background: #2f7d49;
    border-radius: 50%;
    font-weight: 700;
}

@media (max-width: 767px) {
    .registrationOtp {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .registrationOtp__controls {
        align-items: stretch;
    }

    .registrationOtp__input.form-control {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
}

.stepContainer .text-danger {
    display: block;
    margin-top: 6px;
    color: #ba1a1a !important;
    font-size: 13px;
}

.stepContainer label .text-danger,
.stepContainer .control-label .text-danger,
.stepContainer .groupedFields__label .text-danger {
    display: inline;
    margin-top: 0;
    margin-left: 3px;
    font-size: inherit;
    line-height: inherit;
    vertical-align: baseline;
}

.inlinePasswordReset {
    margin: 14px 0 0;
}

.inlinePasswordReset__toggle,
.inlinePasswordReset__edit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    color: rgba(0, 0, 0, .72);
    background: transparent;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.inlinePasswordReset__toggle:hover,
.inlinePasswordReset__edit:hover {
    color: #000;
}

.inlinePasswordReset__toggle svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s ease;
}

.inlinePasswordReset__toggle svg.is-open {
    transform: rotate(180deg);
}

.inlinePasswordReset__panel {
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    background: #f6f5f2;
    border: 1px solid var(--booking-border);
    border-radius: 16px;
}

.inlinePasswordReset__controls {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.inlinePasswordReset__controls .form-control {
    min-width: 0;
}

.inlinePasswordReset__submit {
    flex: 0 0 auto;
    min-height: 42px;
    white-space: nowrap;
}

.inlinePasswordReset__confirmation {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.inlinePasswordReset__confirmation p {
    margin: 0;
    color: rgba(0, 0, 0, .72);
    font-size: 14px;
    line-height: 1.4;
}

.inlinePasswordReset__confirmationIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background: var(--booking-brand);
    border-radius: 50%;
}

.inlinePasswordReset__confirmationIcon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #000;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.inlinePasswordReset__edit {
    margin: 9px 0 0 34px;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 575px) {
    .inlinePasswordReset__controls {
        flex-direction: column;
    }

    .inlinePasswordReset__submit {
        align-self: flex-start;
    }
}

.stepContainer .btn,
.stepNav .btn,
.stepContainer button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: "Work Sans", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}

.stepContainer .btn:hover,
.stepNav .btn:hover {
    transform: translateY(-1px);
}

.stepContainer .bottone,
.stepNav .bottone,
.stepContainer .btn-primary,
.stepNav .btn-primary {
    color: #000;
    background: var(--booking-brand);
    border-color: var(--booking-brand);
}

.stepContainer .bottone:hover,
.stepNav .bottone:hover,
.stepContainer .btn-primary:hover,
.stepNav .btn-primary:hover,
.stepContainer .bottone:focus,
.stepNav .bottone:focus {
    color: var(--booking-brand);
    background: #000;
    border-color: #000;
}

.stepContainer .btn-default,
.stepNav .btn-default,
.stepContainer .btn-secondary,
.stepNav .btn-secondary {
    color: #000;
    background: #fff;
    border-color: var(--booking-border);
}

.stepContainer .btn-default:hover,
.stepNav .btn-default:hover,
.stepContainer .btn-secondary:hover,
.stepNav .btn-secondary:hover,
.stepContainer .btn-default:focus,
.stepNav .btn-default:focus {
    color: #fff;
    background: #000;
    border-color: #000;
}

.stepContainer .mt-3 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px !important;
}

/* Barra dei pulsanti: sta fuori dall'area che scorre, come .footerNav in
   configuratore.html. Per questo non serve sfondo opaco ne' sticky: il modulo
   non puo' passarle dietro, non condividono lo spazio. */
.stepNav {
    display: flex;
    align-items: center;
    gap: 10px;
    /* 10px come .footerNav in configuratore.html: stacca la linea dai bordi
       della card e lascia respiro ai pulsanti. Lo stacco in piu' per i
       pulsanti lo fa il padding. */
    margin: 0 10px;
    padding: 10px;
    border-top: 1px solid var(--booking-border);
}

/* Misure dei pulsanti copiate da .btn di configuratore.html. Valgono solo qui
   nella barra: gli altri bottoni dentro agli step restano come sono.
   L'icona resta un SVG, ma rimpicciolita e con il tratto piu' sottile, per
   pesare come la freccia di testo che usa il configuratore. */
.stepNav .btn {
    padding: 16px 24px;
    font-size: 15px;
}

.stepNav .btnIcon {
    width: 1rem;
}

.stepNav .btnIcon--left {
    margin-right: .4rem;
}

.stepNav .btnIcon--right {
    margin-left: .4rem;
}

.stepNav .btnIcon svg {
    stroke-width: 1.75;
}

/* Su schermi stretti i due pulsanti non ci stanno con le misure del
   configuratore e sfondano a destra, sballando l'allineamento. Qui recuperano
   circa 70px fra margini, padding della barra e padding dei bottoni. */
@media (max-width: 480px) {
    .stepNav {
        padding-inline: 0;
    }

    .stepNav .btn {
        padding: 14px 16px;
    }
}

/* Bordo appena visibile sul giallo, come .btnPrimary in configuratore.html. */
.stepNav .bottone,
.stepNav .btn-primary {
    border-color: rgba(0, 0, 0, .10);
}

/* Un solo meccanismo di allineamento: Indietro sta all'inizio della riga
   (comportamento normale) e il margine automatico spinge Avanti fino in fondo.
   Il margine sta su Avanti e non sull'ultimo bottone, cosi' quando c'e' solo
   Indietro (step 4) lui resta a sinistra. */
.stepNav .bottone,
.stepNav .btn-primary {
    margin-left: auto;
}

.stepContainer .table {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--booking-border);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 18px;
    font-size: 14px;
}

.stepContainer .table th,
.stepContainer .table td {
    padding: 12px 14px;
    vertical-align: middle;
    border-color: var(--booking-border);
}

.stepContainer .table thead th {
    color: rgba(0, 0, 0, .62);
    background: #f5f5f7;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.stepContainer .table-dark th,
.stepContainer .table-dark td {
    color: #000;
    background: var(--booking-brand);
    border-color: var(--booking-brand);
}

.summaryChoice {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.summaryChoice__hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
    background: #fff;
    border: 1px solid var(--booking-border);
    border-radius: 17px;
}

.summaryChoice__heroIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    background: var(--booking-brand);
    border-radius: 50%;
}

.summaryChoice__heroIcon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #000;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.summaryChoice__heroText strong {
    display: block;
    color: #000;
    font-size: 18px;
    line-height: 1.2;
}

.summaryChoice__heroText p {
    margin: 3px 0 0;
    color: rgba(0, 0, 0, .65);
    font-size: 14px;
    line-height: 1.25;
}

/* Card degli importi (primo passo dello step Pagamento). Stile minimale:
   testata con il totale, poi le voci, poi le tendine di cosa e' incluso. */
.summaryTotals {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--booking-border);
    border-radius: 14px;
}

.summaryTotals__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    background: #fafafa;
    border-bottom: 1px solid var(--booking-border);
}

.summaryTotals__copy {
    min-width: 0;
}

.summaryTotals__label {
    display: block;
    color: #000;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
}

.summaryTotals__footnote {
    display: block;
    margin-top: 2px;
    color: #86868b;
    font-size: 12px;
    line-height: 1.25;
}

.summaryFootnote { display:block; margin-top:10px; color:#86868b; font-size:12px; line-height:1.25; }

.summaryTotals__amount {
    flex: 0 0 auto;
    color: #000;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.summaryTotals__amount--total {
    font-size: 24px;
    letter-spacing: -.02em;
}

/* Tendine: riga sobria, l'icona sta in un quadratino grigio. */
.summaryDisclosure {
    border-top: 1px solid var(--booking-border);
}

/* La testata del totale ha già il suo bordo inferiore: evita la linea doppia. */
.summaryTotals__head + .summaryDisclosure {
    border-top: 0;
}

.summaryDisclosure[open] {
    background: #fafafa;
}

.summaryDisclosure > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: #000;
    cursor: pointer;
    list-style: none;
}

.summaryDisclosure > summary::-webkit-details-marker {
    display: none;
}

.summaryDisclosure > summary:hover {
    background: var(--booking-bg);
}

.summaryDisclosure__heading {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.summaryDisclosure__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    color: #475569;
    background: #f1f1f3;
    border-radius: 6px;
}

.summaryDisclosure__icon svg,
.summaryDisclosure__icon img {
    width: 15px;
    height: 15px;
}

.summaryDisclosure__icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.summaryDisclosure__copy {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

/* Il titolo sta su una riga sola: se non ci sta, finisce con i puntini. */
.summaryDisclosure__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.summaryDisclosure__badge {
    flex: 0 0 auto;
    padding: 3px 7px;
    /* Una sola pastiglia per tutti: incluso, escluso o non rimborsabile. */
    color: #92400e;
    background: #fef3c7;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.summaryDisclosure__chevron {
    display: inline-flex;
    flex: 0 0 auto;
    color: #86868b;
    transition: transform .2s ease;
}

.summaryDisclosure[open] .summaryDisclosure__chevron {
    transform: rotate(180deg);
}

.summaryDisclosure__chevron svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Allineato al testo del titolo, non al bordo. */
.summaryDisclosure__body {
    padding: 0 20px 14px 60px;
    color: #86868b;
    font-size: 13px;
    line-height: 1.45;
    /* Righe allineate a destra e a sinistra: la sillabazione evita i buchi
       fra le parole che il testo giustificato lascia da solo. */
    text-align: justify;
    hyphens: auto;
}

.summaryDisclosure__body p {
    margin: 0;
}

@media (max-width: 575px) {
    .summaryTotals__head,
    .summaryDisclosure > summary {
        padding-inline: 15px;
    }

    .summaryTotals__amount--total {
        font-size: 21px;
    }

    .summaryDisclosure__body {
        padding-left: 55px;
    }
}

.summaryChoiceCard {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    width: 100%;
    padding: 15px 18px 15px 15px;
    color: #000;
    background: #fff;
    border: 1px solid var(--booking-border);
    border-radius: 17px;
    box-shadow: none;
    font: inherit;
    /* Nella scheda iframe questa card è un <a>: Bootstrap sottolinea i link. */
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.summaryChoiceCard:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 0, 0, .28);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

.summaryChoiceCard:hover .summaryChoiceCard__icon {
    transform: translateX(3px);
}

.summaryChoiceCard--primary {
    background: var(--booking-brand);
    border-color: rgba(0, 0, 0, .18);
}

.summaryChoiceCard__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    background: rgba(0, 0, 0, .06);
    border-radius: 12px;
}

.summaryChoiceCard--primary .summaryChoiceCard__badge {
    background: rgba(255, 255, 255, .55);
}

.summaryChoiceCard__badge svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #000;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.summaryChoiceCard__body {
    flex: 1 1 auto;
    min-width: 0;
}

.summaryChoiceCard strong {
    display: block;
    color: #000;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.18;
}

.summaryChoiceCard small {
    display: block;
    margin-top: 5px;
    color: rgba(0, 0, 0, .70) !important;
    font-size: 14px;
    line-height: 1.2;
}

.summaryChoiceCard__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: #000;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .15s ease;
}

.quoteShareGroup {
    width: 100%;
}

.quoteShare {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--booking-border);
    border-radius: 17px;
    transition: border-color .15s ease;
}

.quoteShare .quoteShare__toggle {
    gap: 14px;
    min-height: 74px;
    padding: 14px 17px 14px 14px;
    border: 0;
    border-radius: 0;
}

.quoteShare .quoteShare__toggle .summaryChoiceCard__badge {
    width: 42px;
    height: 42px;
    border-radius: 12px;
}

.quoteShare .quoteShare__toggle .summaryChoiceCard__badge svg {
    width: 20px;
    height: 20px;
}

.quoteShare .quoteShare__toggle strong {
    font-size: 20px;
    line-height: 1.18;
}

.quoteShare .quoteShare__toggle small {
    margin-top: 5px;
    font-size: 14px;
    line-height: 1.2;
}

.quoteShare .quoteShare__toggle:hover {
    background: #fafafa;
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.quoteShare__chevron {
    transition: transform .2s ease;
}

.quoteShare--open .quoteShare__chevron {
    transform: rotate(180deg);
}

.quoteShare .quoteShare__toggle:hover .quoteShare__chevron {
    transform: none;
}

.quoteShare--open .quoteShare__toggle:hover .quoteShare__chevron {
    transform: rotate(180deg);
}

.quoteShare__panel {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: grid-template-rows .26s cubic-bezier(.22, 1, .36, 1),
        margin-top .26s cubic-bezier(.22, 1, .36, 1),
        opacity .16s ease,
        transform .24s cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear .26s;
}

.quoteShare__panelInner {
    display: grid;
    gap: 14px;
    min-height: 0;
    overflow: hidden;
}

.quoteShareGroup--open .quoteShare__panel {
    grid-template-rows: 1fr;
    margin-top: 14px;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.quoteShare__panel .quoteShareChannel {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .24s cubic-bezier(.22, 1, .36, 1);
}

.quoteShareGroup--open .quoteShareChannel {
    opacity: 1;
    transform: translateY(0);
}

.quoteShareGroup--open .quoteShareChannel:nth-child(2) {
    transition-delay: .035s;
}

.quoteShareGroup--open .quoteShareChannel:nth-child(3) {
    transition-delay: .07s;
}

.quoteShareChannel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    align-items: center;
    gap: 24px;
    min-height: 174px;
    padding: 20px;
    border: 1px solid;
    border-radius: 14px;
}

.quoteShareChannel__availability {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    padding: 4px 8px;
    color: #555;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* Unified quote contact form: reference layout and transitions. */
.quoteContact {
    width: 100%;
    font-family: "Work Sans", sans-serif;
    border: 1px solid var(--booking-border);
    background: var(--booking-card);
    border-radius: var(--booking-radius);
    padding: 36px 34px 34px 34px;
    box-shadow: 0 10px 30px -4px rgba(15, 23, 42, 0.05),
    0 2px 8px -2px rgba(15, 23, 42, 0.03);
}

.quoteContact__title {
    font-size: 22px;
    font-weight: 800;
    color: var(--booking-text);
    letter-spacing: -0.3px;
    line-height: 1.25;
    margin-bottom: 6px;
}

.quoteContact__subtitle {
    font-size: 13.5px;
    color: #5c6f84;
    line-height: 1.45;
    margin-bottom: 22px;
}

.quoteContact__field {
    margin-bottom: 16px;
}

.quoteContact label.quoteContact__label {
    display: block;
    text-transform: none;
    line-height: 1.3;
    font-size: 13px;
    font-weight: 600;
    color: var(--booking-text);
    margin-bottom: 6px;
}

.quoteContact input.quoteContact__input {
    width: 100%;
    height: 46px;
    border: 1px solid var(--booking-border);
    border-radius: 10px;
    padding: 0 15px;
    font-size: 14px;
    font-family: inherit;
    color: var(--booking-text);
    background: var(--booking-card);
    outline: none;
    min-height: 0;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.quoteContact input.quoteContact__input::placeholder {
    color: #94a3b8;
}

.quoteContact input.quoteContact__input:focus {
    border-color: #94a3b8;
}

.quoteContact__phone {
    display: flex;
    height: 46px;
    border: 1px solid var(--booking-border);
    border-radius: 10px;
    background: var(--booking-card);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.quoteContact__phone:focus-within {
    border-color: #94a3b8;
}

.quoteContact input.quoteContact__phoneInput {
    flex: 1;
    height: 100%;
    min-width: 0;
    border: none;
    padding: 0 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--booking-text);
    outline: none;
    min-height: 0;
    box-shadow: none;
    background: transparent;
}

.quoteContact input.quoteContact__phoneInput::placeholder {
    color: #94a3b8;
}

.quoteContact__legend {
    font-size: 13px;
    font-weight: 600;
    color: var(--booking-text);
    margin-top: 22px;
    margin-bottom: 12px;
}

.quoteContact__options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 22px;
}

.quoteContact__option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 110px;
    padding: 12px 6px;
    border: 1.5px solid var(--booking-border);
    border-radius: 13px;
    background-color: var(--booking-card);
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.15s ease;
}

.quoteContact__option:active {
    transform: scale(0.975);
}

.quoteContact__option.quoteContact__option--whatsapp:has(input:checked) {
    border-color: #22c55e;
    background-color: #f2fbf5;
    box-shadow: 0 4px 14px -2px rgba(34, 197, 94, 0.14);
}

.quoteContact__option.quoteContact__option--email:has(input:checked) {
    border-color: #2563eb;
    background-color: #f3f7fe;
    box-shadow: 0 4px 14px -2px rgba(37, 99, 235, 0.14);
}

.quoteContact__option.quoteContact__option--sms:has(input:checked) {
    border-color: var(--booking-brand);
    background-color: #fffdf0;
    box-shadow: 0 4px 14px -2px rgba(255, 208, 0, 0.18);
}

.quoteContact__icon {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    margin-bottom: 9px;
    transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.quoteContact__option:has(input:checked) .quoteContact__icon {
    transform: scale(1.04);
}

.quoteContact__iconBase {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.quoteContact__iconFill {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.quoteContact__option:has(input:checked) .quoteContact__iconBase {
    opacity: 0;
    transform: scale(0.9);
}

.quoteContact__option:has(input:checked) .quoteContact__iconFill {
    opacity: 1;
    transform: scale(1);
}

.quoteContact__option--whatsapp .quoteContact__icon { background: #eafaf1; }
.quoteContact__option--email    .quoteContact__icon { background: #eff6ff; }
.quoteContact__option--sms      .quoteContact__icon { background: #fef9c3; }

.quoteContact__option--whatsapp:has(input:checked) .quoteContact__icon { background: #22c55e; }
.quoteContact__option--email:has(input:checked)    .quoteContact__icon { background: #2563eb; }
.quoteContact__option--sms:has(input:checked)      .quoteContact__icon { background: var(--booking-brand); }

.quoteContact__optionTitle {
    font-size: 13px;
    font-weight: 700;
    color: var(--booking-text);
    margin-bottom: 2px;
    line-height: 1.2;
}

.quoteContact__optionSubtitle {
    font-size: 11px;
    color: #5c6f84;
    line-height: 1.2;
    white-space: nowrap;
}

.quoteContact__submit {
    width: 100%;
    min-height: 48px;
    padding: 6px 0;
    background-color: var(--booking-text);
    color: var(--booking-card);
    border: none;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.08s ease;
}

.quoteContact__submit:hover {
    background-color: #1a1a1a;
}

.quoteContact__submit:active {
    transform: scale(0.99);
}

@media (max-width: 480px) {

    .quoteContact {
        padding: 24px 18px 20px 18px;
        border-radius: var(--booking-radius);
    }

    .quoteContact__title {
        font-size: 18px;
    }

    .quoteContact__subtitle {
        font-size: 13px;
        margin-bottom: 18px;
    }

    .quoteContact input.quoteContact__input,
    .quoteContact input.quoteContact__phoneInput {
        font-size: 16px;
        height: 44px;
    }

    .quoteContact__phone {
        height: 44px;
    }

    .quoteContact__options {
        gap: 7px;
        margin-bottom: 20px;
    }

    .quoteContact__option {
        height: 100px;
        padding: 10px 4px;
        border-radius: 11px;
    }

    .quoteContact__icon {
        width: 32px;
        height: 32px;
        margin-bottom: 7px;
        border-radius: 8px;
    }

    .quoteContact__icon svg {
        transform: scale(0.9);
    }

    .quoteContact__optionTitle {
        font-size: 12px;
        margin-bottom: 2px;
    }

    .quoteContact__optionSubtitle {
        font-size: 10px;
        letter-spacing: -0.2px;
    }

    .quoteContact__submit {
        min-height: 46px;
        font-size: 13.5px;
    }
}

@media (max-width: 350px) {
    .quoteContact {
        padding: 20px 14px;
    }

    .quoteContact__options {
        gap: 5px;
    }

    .quoteContact__optionSubtitle {
        font-size: 9.5px;
    }
}

.quoteContact, .quoteContact * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.quoteContact__title { margin-top: 0; }
.quoteContact label.quoteContact__option { margin: 0; text-transform: none; min-width: 0; }
.quoteContact input.quoteContact__radio { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; opacity: 0; }
.quoteContact__option:has(input:focus-visible), .quoteContact__submit:focus-visible { outline: 2px solid var(--booking-text); outline-offset: 3px; }
.quoteContact input.quoteContact__input:focus, .quoteContact__phone:focus-within { box-shadow: 0 0 0 4px rgba(252, 216, 0, .20); }
.quoteContact input.quoteContact__phoneInput:focus { box-shadow: none; border: 0; }
.quoteContact__option:has(input:disabled) { cursor: not-allowed; }
.quoteContact__option:has(input:disabled) .quoteContact__icon { filter: grayscale(1); opacity: .5; }
.quoteContact__option .quoteShareChannel__availability { position: static; margin-top: 5px; font-size: 8px; padding: 3px; }
.quoteContact__icon svg { display: block; }
.quoteContact__submit:disabled { cursor: not-allowed; opacity: .6; transform: none; }
.quoteContact__submit svg { flex: 0 0 auto; }
/* Esito dentro il bottone: verde (inviato, resta bloccato) o rosso (errore, rientra da solo). */
.quoteContact__submit { transition: background-color .3s ease, transform .08s ease; }
.quoteContact__submit--success, .quoteContact__submit--success:disabled { background-color: #16a34a; opacity: 1; cursor: default; }
.quoteContact__submit--error, .quoteContact__submit--error:hover { background-color: #dc2626; }
.quoteContact__submitLabel { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 0 12px; text-align: center; line-height: 1.25; animation: quoteContactLabelIn .25s ease; }
@keyframes quoteContactLabelIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.quoteContact__phone .quoteShareChannel__prefix { padding: 0 14px; font-size: 13.5px; background: var(--booking-card); }
@media (max-width: 480px) {
    .quoteContact__phone .quoteShareChannel__prefix { padding: 0 11px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .quoteContact *, .quoteContact *::before, .quoteContact *::after { transition: none; }
}

/* Test-only download: one compact row (icon, title + badge, button). */
.quoteShareChannel--download {
    display: flex;
    align-items: center;
    min-height: 0;
    padding: 12px 14px 12px 16px;
    border-color: rgba(210, 174, 0, .30);
    border-radius: var(--booking-radius);
    background: linear-gradient(100deg, #fffdf4 0%, #fff7c7 100%);
}

.quoteShareChannel--download .quoteShareChannel__content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    width: 100%;
}

.quoteShareChannel--download .quoteShareChannel__header {
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: 0;
}

.quoteShareChannel--download .quoteShareChannel__copy {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

.quoteShareChannel--download .quoteShareChannel__copy strong {
    font-size: 14px;
}

.quoteShareChannel--download .quoteShareChannel__availability {
    position: static;
    padding: 3px 7px;
    color: #6f6300;
    background: rgba(255, 216, 0, .28);
    border: 0;
}

.quoteShareChannel--download .quoteShareChannel__download {
    flex: 0 0 auto;
    margin-left: auto;
    min-height: 36px;
    padding: 0 16px;
    font-size: 12.5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

.quoteShareChannel--download .quoteShareChannel__feedback {
    flex-basis: 100%;
    margin: 0;
}

.quoteShareChannel__header {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 18px;
}

.quoteShareChannel__content {
    min-width: 0;
}

.quoteShareChannel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 9px;
}

.quoteShareChannel__icon svg,
.quoteShareChannel__icon img {
    width: 18px;
    height: 18px;
}

.quoteShareChannel__icon svg {
    fill: none;
    stroke: #000;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.quoteShareChannel__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.quoteShareChannel__copy strong {
    color: #000;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.25;
}

.quoteShareChannel__copy small {
    max-width: 245px;
    margin-top: 4px;
    color: rgba(0, 0, 0, .58);
    font-size: 12.5px;
    line-height: 1.45;
}

.quoteShareChannel__download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    color: #111;
    background: #ffd800;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    box-shadow: 0 4px 11px rgba(0, 0, 0, .1);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}

.quoteShareChannel__download:hover {
    filter: brightness(.96);
    transform: translateY(-1px);
}

.quoteShareChannel__download:disabled {
    cursor: wait;
    filter: saturate(.7);
    opacity: .72;
    transform: none;
}

.quoteShareChannel__download svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.quoteShareChannel__download .quoteShareChannel__spinner {
    border-color: rgba(0, 0, 0, .2);
    border-top-color: #111;
}

.quoteShareChannel__prefix {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: stretch;
    padding: 0 10px;
    color: rgba(0, 0, 0, .66);
    background: rgba(0, 0, 0, .025);
    border-right: 1px solid rgba(0, 0, 0, .09);
    font-size: 12px;
    white-space: nowrap;
}

.quoteShareChannel__flag {
    width: 18px;
    height: 12px;
    background: linear-gradient(to right, #009246 0 33.33%, #fff 33.33% 66.66%, #ce2b37 66.66% 100%);
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 1px;
}

.quoteShareChannel__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: quoteShareSpin .7s linear infinite;
}

.quoteShareChannel__feedback {
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.35;
}

.quoteShareChannel__feedback--success {
    color: #147a3d;
}

.quoteShareChannel__feedback--error {
    color: #b42318;
}

@keyframes quoteShareSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Carosello "proposta protezione" (StepSommario): una sola card con intestazione fissa
   e una proposta alla volta; animazioni di entrata/uscita sulla sola proposta,
   gestite via classi + Task.Delay lato C# (nessun JS interop). */
.protCarousel {
    overflow: hidden;
    margin-top: 8px;
    background: var(--booking-card);
    border: 1px solid var(--booking-border);
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .02), 0 16px 36px -8px rgba(0, 0, 0, .04);
}

.protCarousel__intro {
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--booking-border);
}

.protCarousel__introTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.protCarousel__introTitle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.protCarousel__introTitle strong {
    color: #000;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.protCarousel__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    background: #059669;
    border-radius: 50%;
}

.protCarousel__check svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Indicatore di avanzamento: solo trattini, senza contenitore. */
.protCarousel__steps {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 4px;
}

.protCarousel__step {
    width: 14px;
    height: 3px;
    background: rgba(0, 0, 0, .14);
    border-radius: 2px;
    transition: background-color .2s ease;
}

.protCarousel__step--active {
    background: #000;
}

.protCarousel__intro p {
    margin: 8px 0 0;
    color: var(--booking-muted);
    font-size: 13.5px;
    line-height: 1.5;
}

.protCarousel__slide {
    display: grid;
    gap: 0;
}

.protCarousel__slide--enter {
    animation: protCarouselEnter .22s ease-out;
}

.protCarousel__slide--exit {
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity .2s ease, transform .2s ease;
}

@keyframes protCarouselEnter {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.protCarousel__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 140px;
    background: #edf0f4;
    border-bottom: 1px solid var(--booking-border);
}

/* L'immagine riempie il riquadro senza mai dettarne l'altezza:
   la dimensione della card resta guidata da testo e pulsanti. */
.protCarousel__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.protCarousel__mediaFallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: rgba(0, 0, 0, .06);
    border-radius: 14px;
}

.protCarousel__mediaFallback svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: #000;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.protCarousel__badge {
    position: absolute;
    z-index: 1;
    top: 14px;
    left: 14px;
    padding: 5px 12px;
    background: var(--booking-brand);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    color: #000;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.protCarousel__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
    padding: 22px 24px;
    color: #000;
    container-type: inline-size;
}

.protCarousel__title {
    display: block;
    margin-bottom: 4px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.015em;
}

.protCarousel__progress {
    display: block;
    color: var(--booking-muted);
    font-size: 13.5px;
    font-weight: 500;
}

.svcInfoBody > :first-child {
    margin-top: 0;
}

.svcInfoBody > :last-child {
    margin-bottom: 0;
}

.protCarousel__more {
    grid-column: 1 / -1;
    margin: 0;
    border-top: 1px solid var(--booking-border);
}

.protCarousel__more > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 24px;
    color: var(--booking-muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    list-style: none;
    user-select: none;
    transition: background-color .15s ease, color .15s ease;
}

.protCarousel__more > summary:hover {
    background: #fafbfc;
    color: #000;
}

.protCarousel__more > summary::-webkit-details-marker {
    display: none;
}

.protCarousel__more > summary > span:first-child {
    display: inline-flex;
    align-items: center;
}

.protCarousel__morePlus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 7px;
    color: #000;
    background: var(--booking-brand);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 800;
}

.protCarousel__moreChevron {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: rgba(0, 0, 0, .45);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}

.protCarousel__more[open] .protCarousel__moreChevron {
    transform: rotate(180deg);
}

.protCarousel__moreBody {
    margin: 0 24px 18px;
    padding-top: 12px;
    color: var(--booking-muted);
    border-top: 1px dashed var(--booking-border);
    font-size: 13px;
    line-height: 1.6;
}

.protCarousel__moreBody > :first-child {
    margin-top: 0;
}

.protCarousel__moreBody > :last-child {
    margin-bottom: 0;
}

/* Pulsanti sempre della stessa misura e testo su una riga: affiancati solo se
   la colonna è abbastanza larga da contenere etichetta e prezzo, altrimenti impilati. */
.protCarousel__actions {
    display: grid;
    gap: 12px;
}

@container (min-width: 360px) {
    .protCarousel__actions {
        grid-template-columns: 1fr 1fr;
    }
}

.protCarousel__primary,
.protCarousel__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 48px;
    width: 100%;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}

.protCarousel__primary {
    gap: 6px;
    color: #fff;
    background: #0a0b0d;
    border-color: #0a0b0d;
}

.protCarousel__primary small {
    font-size: inherit;
    font-weight: 500;
    color: rgba(255, 255, 255, .82) !important;
}

.protCarousel__primary:hover {
    background: #1f2127;
    border-color: #1f2127;
}

.protCarousel__secondary {
    color: #000;
    background: #fff;
    border-color: rgba(0, 0, 0, .18);
}

.protCarousel__secondary:hover {
    background: #f8f9fa;
    border-color: rgba(0, 0, 0, .28);
}

.protCarousel__skipLink {
    display: inline;
    padding: 0;
    color: #000;
    background: none;
    border: none;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: opacity .15s ease;
}

.protCarousel__skipLink:hover {
    opacity: .75;
}

.protCarouselReview {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    margin-top: 12px;
    padding: 10px 16px;
    background: #fffbea;
    border: 1px solid rgba(199, 164, 0, .32);
    border-radius: 16px;
}

.protCarouselReview__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    background: rgba(255, 216, 0, .3);
    border-radius: 50%;
}

.protCarouselReview__icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: #000;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.protCarouselReview__copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.protCarouselReview__eyebrow {
    margin-bottom: 2px;
    color: rgba(0, 0, 0, .58);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.protCarouselReview__copy strong {
    color: #000;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
}

.protCarouselReview__copy small {
    margin-top: 3px;
    color: rgba(0, 0, 0, .6);
    font-size: 12.5px;
    line-height: 1.35;
}

.protCarouselReview__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 16px;
    color: #000;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.protCarouselReview__button:hover {
    background: var(--booking-brand);
    border-color: rgba(0, 0, 0, .28);
    transform: translateY(-1px);
}

.protCarouselReview__button:focus-visible {
    outline: 3px solid rgba(255, 216, 0, .45);
    outline-offset: 2px;
}

.protCarouselReview__button svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (min-width: 560px) {
    .protCarousel__slide {
        grid-template-columns: 220px 1fr;
        align-items: stretch;
    }

    .protCarousel__media {
        height: auto;
        min-height: 200px;
        border-right: 1px solid var(--booking-border);
        border-bottom: none;
    }
}

@media (min-width: 900px) {
    .protCarousel__slide {
        grid-template-columns: 260px 1fr;
    }

    .protCarousel__intro {
        padding: 24px 28px 20px;
    }

    .protCarousel__body {
        padding: 26px 28px;
    }

    .protCarousel__more > summary {
        padding: 14px 28px;
    }

    .protCarousel__moreBody {
        margin: 0 28px 18px;
    }
}

@media (max-width: 480px) {
    .quoteShare .quoteShare__toggle {
        gap: 12px;
        padding: 13px 14px;
    }

    .quoteShare .quoteShare__toggle .summaryChoiceCard__badge {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .quoteShare .quoteShare__toggle .summaryChoiceCard__badge svg {
        width: 18px;
        height: 18px;
    }

    .quoteShare .quoteShare__toggle strong {
        font-size: 18px;
        line-height: 1.15;
    }

    .quoteShare .quoteShare__toggle small {
        margin-top: 4px;
        font-size: 13px;
        line-height: 1.3;
    }

    .quoteShare__chevron {
        width: 16px;
        height: 16px;
    }

    .quoteShare__panelInner {
        gap: 12px;
    }

    .quoteShareGroup--open .quoteShare__panel {
        margin-top: 12px;
    }

    .quoteShareChannel--download {
        padding: 12px 14px;
    }

    .quoteShareChannel--download .quoteShareChannel__header {
        flex-basis: 100%;
    }

    .quoteShareChannel--download .quoteShareChannel__download {
        width: 100%;
        margin-left: 0;
    }

    .quoteShareChannel__prefix {
        gap: 4px;
        padding: 0 7px;
    }

    .quoteShareChannel__flag {
        width: 16px;
        height: 11px;
    }

.protCarouselReview {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .protCarouselReview__copy {
        flex-basis: calc(100% - 54px);
    }

    .protCarouselReview__button {
        width: 100%;
    }

    .protCarousel__media {
        height: 110px;
    }

    .protCarousel__intro {
        padding: 16px 16px 14px;
    }

    .protCarousel__introTitle strong {
        font-size: 15.5px;
    }

    .protCarousel__body {
        gap: 16px;
        padding: 16px 16px 18px;
    }

    .protCarousel__title {
        font-size: 17px;
    }

    .protCarousel__more > summary {
        padding: 12px 16px;
    }

    .protCarousel__moreBody {
        margin: 0 16px 14px;
    }

    .protCarousel__primary,
    .protCarousel__secondary {
        min-height: 44px;
        font-size: 13.5px;
    }
}

/* ─── Schermata finale post-invio (StepFine): riepilogo identico all'email ─── */

.booking-wrap--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 860px;
}

/* Esito pagamento (carta/PayPal/HeyLight): stesso riepilogo della schermata
   finale del wizard, quindi stessa larghezza utile (860 - 2x20 wrap - 2x20 step). */
.mla-booking-hero > .fineRecap {
    max-width: 780px;
    margin: 0 auto;
}

.fineRecap {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 25px;
}

.fineRecap__hero {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px;
    background: linear-gradient(135deg, #fffdf2 0%, #fff 55%);
    border: 1px solid var(--booking-border);
    border-radius: 17px;
}

.fineRecap__heroIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    background: var(--booking-brand);
    border-radius: 50%;
}

.fineRecap__heroIcon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #000;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Titolo della card: solo lo <strong> figlio diretto, NON quelli nei
   paragrafi (es. l'indirizzo email), che devono restare inline nel testo. */
.fineRecap__heroText > strong {
    display: block;
    margin: 8px 0 6px;
    color: #000;
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.fineRecap__heroText p {
    margin: 0 0 8px;
    max-width: 62ch;
    color: rgba(0, 0, 0, .62) !important;
    font-size: 15px;
    line-height: 1.55;
}

.fineRecap__heroText p:last-child {
    margin-bottom: 0;
}

.fineRecap__heroText p strong {
    font-weight: 600;
    color: #000;
}

.fineRecap__body {
    padding: 20px 18px;
    background: #fff;
    border: 1px solid var(--booking-border);
    border-radius: 17px;
}

.fineRecap__body p {
    color: #000 !important;
}

.fineRecap__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 0;
}

.fineRecap > fieldset .stepNav {
    margin-top: 16px;
}

.fineRecap > fieldset.paymentChangeStep {
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.fineRecap__actions--notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0;
    padding: 22px 24px;
    background: var(--booking-bg);
    border: 1px solid var(--booking-border);
    border-radius: 17px;
}

.fineRecap__actionMessage > strong {
    display: block;
    color: var(--booking-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.fineRecap__actionMessage > p {
    margin: 4px 0 0;
    color: var(--booking-muted);
    font-size: 15px;
    line-height: 1.5;
}

.fineRecap__actions--notice > .btn {
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .fineRecap__actions--notice {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 18px;
    }
}

.fineRecap__actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: "Work Sans", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}

.fineRecap__actions .btn:hover {
    transform: translateY(-1px);
}

.fineRecap__actions .bottone {
    color: #000;
    background: var(--booking-brand);
    border-color: var(--booking-brand);
}

.fineRecap__actions .bottone:hover,
.fineRecap__actions .bottone:focus-visible {
    color: var(--booking-brand);
    background: #000;
    border-color: #000;
}

.fineRecap__actions .btn-default {
    color: #fff;
    background: #000;
    border-color: #000;
}

.fineRecap__actions .btn-default:hover,
.fineRecap__actions .btn-default:focus-visible,
.fineRecap__actions .btn-default:active {
    color: #000;
    background: var(--booking-brand);
    border-color: var(--booking-brand);
}

.stepContainer .table-hover {
    display: block;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.stepContainer .table-hover tbody {
    display: grid;
    gap: 12px;
}

.stepContainer .table-hover tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    background: #f5f5f7;
    border: 1px solid var(--booking-border);
    border-radius: 20px;
}

.stepContainer .table-hover td {
    display: block;
    padding: 0;
    border: 0;
}

.stepContainer .table-hover td:first-child {
    color: #000;
    font-weight: 600;
}

.stepContainer .table-hover td:nth-child(2) {
    min-width: 170px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--booking-border);
    border-radius: 999px;
    text-align: center;
}

.stepContainer .table-hover td:nth-child(3) {
    grid-column: 1 / -1;
    color: rgba(0, 0, 0, .58);
    font-size: 13px;
}

.stepContainer .table-hover .form-check-inline {
    min-width: 72px;
    margin-right: 0;
    padding: 7px 12px;
    border-radius: 999px;
}

.stepContainer .table-hover .form-check-inline:has(input:checked) {
    background: var(--booking-brand);
}

.bookingServices {
    display: grid;
    gap: 0;
}

.svcGroupTitlePill {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 20px 0;
}

.svcGroupTitlePill::before,
.svcGroupTitlePill::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(0, 0, 0, .15);
}

.svcGroupTitlePill span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    padding: 7px 20px;
    color: #fff;
    background: #000;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.svcGroupWrap {
    margin-bottom: 14px;
    padding: 14px;
    background: #f5f5f7;
    border: 0;
    border-radius: 14px;
}

.svcList {
    display: grid;
    gap: 12px;
}

.svcCard {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 16px;
}

.svcCard.is-selected {
    border-color: rgba(252, 216, 0, .85);
    box-shadow: 0 0 0 2px rgba(252, 216, 0, .18);
}

.svcMedia {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    overflow: hidden;
    color: #000;
    background: #fff;
    border: 1px solid var(--booking-border);
    border-radius: 10px;
}

.svcMedia .bi {
    font-size: 26px;
    line-height: 1;
}

.svcMain {
    min-width: 0;
}

.svcTitle {
    margin: 0;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

.svcPrice {
    margin: 4px 0 0;
    color: #000;
    font-size: 14px;
    line-height: 1.4;
}

.svcPrice strong {
    color: #000;
}

.svcPrice .is-omaggio {
    padding: 2px 6px;
    color: #000;
    background: var(--booking-brand);
    border-radius: 4px;
    font-weight: 700;
}

.svcPriceUnit {
    color: var(--booking-muted);
    font-size: 12px;
}

.svcControls {
    display: flex;
    justify-content: flex-end;
    text-align: right;
}

.svcHint {
    margin: 4px 0 0;
    color: var(--booking-muted);
    font-size: 12px;
}

.segmented.is-locked {
    opacity: .55;
    pointer-events: none;
}

.segmented {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--booking-border);
    border-radius: 999px;
}

.stepContainer .segmented input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.stepContainer .segmented label {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: 10px 0;
    color: #000;
    border-radius: 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-transform: none;
    user-select: none;
}

.stepContainer .segmented input:checked + label {
    color: #000;
    background: rgba(0, 0, 0, .06);
}

.stepContainer .segmented input[value="yes"]:checked + label {
    background: var(--booking-brand);
}

.svcInfo {
    grid-column: 1 / -1;
    margin-top: 0;
    padding-top: 10px;
    border-top: 1px dashed var(--booking-border);
}

.svcInfo > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: rgba(0, 0, 0, .78);
    cursor: pointer;
    font-size: 12px;
    line-height: 1.2;
    list-style: none;
    user-select: none;
}

.svcInfo > summary::-webkit-details-marker {
    display: none;
}

.svcInfo > summary span:first-child {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.svcInfoPlus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin: -1px 7px 0 0;
    color: #000;
    background: var(--booking-brand);
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.svcInfoChevron {
    opacity: .7;
}

.infoText {
    margin-top: 8px;
    padding: 10px;
    color: rgba(0, 0, 0, .72);
    background: rgba(0, 0, 0, .02);
    border: 1px solid var(--booking-border);
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.35;
}

.svcInfoBody {
    margin-top: 6px;
}

.stepContainer .badge {
    border-radius: 999px;
    font-weight: 500;
}

.stepContainer .form-check-input:checked {
    background-color: #000;
    border-color: #000;
}

.disclosureCard {
    position: relative;
    padding: 16px 16px 18px;
    margin: 0 0 14px;
    background: var(--booking-bg);
    border: 1px solid var(--booking-border);
    border-radius: var(--booking-radius);
}

.disclosureCard__title {
    margin: 0 0 10px;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

/* L'intera area di anteprima apre la modale: il testo è tagliato, quindi
   il click "istintivo" sul testo sfumato deve portare alla lettura completa. */
.disclosureCard__text {
    position: relative;
    max-height: 200px;
    overflow: hidden;
    padding: 12px 14px;
    margin: 0 0 12px;
    background: #fff;
    border: 1px solid var(--booking-border);
    border-radius: 14px;
    color: rgba(0, 0, 0, .68);
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
    transition: border-color .15s;
}

.disclosureCard__text:hover {
    border-color: rgba(0, 0, 0, .3);
}

.disclosureCard__text::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 80%);
    pointer-events: none;
}

/* Pulsante esplicito "Leggi tutto", nell'angolo in alto a destra del testo. */
.disclosureCard__readAll {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 1;
    padding: 4px 14px;
    color: #000;
    background: #fff;
    border: 1px solid var(--booking-border);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 0 14px rgba(0, 0, 0, .22);
    transition: background .15s, transform .15s, box-shadow .15s;
}

.disclosureCard__text:hover .disclosureCard__readAll,
.disclosureCard__readAll:hover {
    background: var(--booking-brand);
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(0, 0, 0, .28);
}

.disclosureCard__text p {
    margin: 0 0 10px;
}

.disclosureCard__text p:last-child {
    margin-bottom: 0;
}

.disclosureCard__consents {
    display: grid;
    gap: 8px;
}

/* ─── Modale di ingrandimento testo condizioni/privacy ────────────────────── */

.disclosureModal__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .55);
}

.disclosureModal {
    display: flex;
    flex-direction: column;
    width: min(900px, 92vw);
    max-height: 85vh;
    background: #fff;
    border-radius: 17px;
    overflow: hidden;
}

.disclosureModal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 3px solid var(--booking-brand);
    color: #000;
    font-size: 15px;
    font-weight: 600;
}

.disclosureModal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    color: #000;
    background: #fff;
    border: 1px solid var(--booking-border);
    border-radius: 50%;
    cursor: pointer;
    transition: background .15s, transform .15s;
}

.disclosureModal__close:hover {
    background: var(--booking-brand);
    transform: translateY(-1px);
}

.disclosureModal__close svg {
    width: 15px;
    height: 15px;
}

.disclosureModal__body {
    overflow-y: auto;
    padding: 18px 20px 24px;
    color: rgba(0, 0, 0, .78);
    font-size: 14px;
    line-height: 1.6;
}

.disclosureModal__body p {
    margin: 0 0 12px;
}

.disclosureModal__body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .disclosureModal__backdrop {
        padding: 10px;
    }

    .disclosureModal {
        width: 100%;
        max-height: 92vh;
        border-radius: 14px;
    }

    .disclosureModal__header {
        padding: 14px 16px;
    }

    .disclosureModal__body {
        padding: 14px 16px 20px;
    }
}

.consentRow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 8px 8px 14px;
    background: #fff;
    border: 1px solid var(--booking-border);
    border-radius: 999px;
}

.consentRow__name {
    color: #000;
    font-size: 13px;
    font-weight: 600;
}

.consentToggle {
    flex: 0 0 auto;
}

.stepContainer .consentToggle label {
    min-width: 104px;
    padding: 10px 16px;
}

.payment-options {
    display: grid;
    gap: 12px;
}

.stepContainer label.payment-option {
    display: block;
    position: relative;
    margin: 0;
    color: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    text-transform: none;
    cursor: pointer;
}

.payment-option .payment-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.payment-visual {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 74px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--booking-border);
    border-radius: 18px;
    transition: box-shadow .2s, border-color .2s, background .2s;
}

.payment-option:hover .payment-visual {
    border-color: rgba(0, 0, 0, .2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}

.payment-option:has(.payment-radio input:checked) .payment-visual,
.payment-option.is-checked .payment-visual {
    background: var(--booking-brand);
    border-color: var(--booking-brand);
}

.pay-icon {
    display: flex;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 10px;
    background: #f5f5f7;
    border: 1px solid var(--booking-border);
    border-radius: 14px;
    font-size: 20px;
}

.payment-option:has(.payment-radio input:checked) .pay-icon,
.payment-option.is-checked .pay-icon {
    background: #fff;
}

.pay-icon--paypal {
    object-fit: contain;
}

.pay-icon--heylight {
    object-fit: contain;
    padding: 6px;
}

.payment-text .title {
    display: block;
    color: #000;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.payment-text .subtitle {
    display: block;
    margin-top: 3px;
    color: rgba(0, 0, 0, .62);
    font-size: 13px;
    line-height: 1.35;
}

/* ─── Formule di pagamento (step Pagamento) ────────────────────────────── */

.formulaCards {
    display: grid;
    gap: 16px;
}

.stepContainer label.formulaCard {
    display: block;
    position: relative;
    margin: 0;
    color: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    text-transform: none;
    cursor: pointer;
}

.formulaCard input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.formulaCard__visual {
    display: block;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--booking-border);
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .02);
    transition: box-shadow .2s, border-color .2s, transform .2s;
}

.formulaCard:not(.formulaCard--disabled):hover .formulaCard__visual {
    border-color: rgba(0, 0, 0, .18);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .07);
    transform: translateY(-2px);
}

.formulaCard input:focus-visible + .formulaCard__visual,
.payment-option .payment-radio input:focus-visible + .payment-visual {
    border-color: #000;
    box-shadow: 0 0 0 4px rgba(252, 216, 0, .45);
    outline: none;
}

.stepContainer label.formulaCard--disabled,
.formulaCard--disabled .formulaCard__visual {
    cursor: not-allowed;
}

.formulaCard--disabled .formulaCard__visual {
    opacity: .55;
}

.stepContainer .formulaCard--disabled input:disabled {
    opacity: 0;
}

.formulaCard__unavailable {
    display: block;
    font-size: .85em;
    color: var(--booking-muted, #6b6b6b);
    margin: .25rem 0 .5rem;
}

.formulaCard__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.formulaCard__pick {
    flex: 0 0 auto;
    margin-left: auto;
    color: rgba(0, 0, 0, .28);
    font-size: 15px;
    transition: color .2s, transform .2s;
}

.formulaCard:not(.formulaCard--disabled):hover .formulaCard__pick {
    color: #000;
    transform: translateX(2px);
}

.formulaCard__icon {
    display: flex;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: #f5f5f7;
    border: 1px solid var(--booking-border);
    border-radius: 14px;
    font-size: 20px;
}

.formulaCard__titles {
    flex: 1 1 auto;
    min-width: 0;
}

.formulaCard__name {
    display: block;
    color: #000;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.formulaCard__subtitle {
    display: block;
    margin-top: 3px;
    color: rgba(0, 0, 0, .62);
    font-size: 13px;
    line-height: 1.35;
}

.formulaCard .formulaCard__icon {
    background: #f3f4f6;
    border-color: transparent;
    border-radius: 11px;
    transition: background .2s;
}

.formulaCard:not(.formulaCard--disabled):hover .formulaCard__icon,
.formulaCard input:focus-visible + .formulaCard__visual .formulaCard__icon {
    background: #ffe500;
}

.formulaCard .formulaCard__name {
    font-size: 18px;
}

.formulaCard .formulaCard__subtitle {
    font-size: 14px;
    color: #4b5563;
}

.formulaCard__deposit {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-top: 18px;
    padding: 12px 14px;
    background: #f9fafb;
    border: 1px solid #eceff2;
    border-radius: 11px;
    color: #1f2937;
    font-size: 14px;
}

.formulaCard__deposit strong {
    color: #000;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.formulaCard__badge {
    padding: 3px 8px;
    border-radius: 6px;
    background: #ffe500;
    color: #111;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.formulaCard__summaryLabel {
    font-weight: 500;
}

.formulaCard__breakdown {
    color: #4b5563;
    font-size: 13px;
}

.formulaCard__perks {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.formulaCard__perks li {
    position: relative;
    padding-left: 25px;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.45;
}

.formulaCard__perks li + li {
    margin-top: 10px;
}

.formulaCard__perks li::before {
    content: "";
    position: absolute;
    top: .35em;
    left: 3px;
    width: 7px;
    height: 12px;
    border: solid #111;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

@media (max-width: 600px) {
    .formulaCards {
        gap: 12px;
    }

    .formulaCard__visual {
        padding: 16px 14px;
        border-radius: 16px;
    }

    .formulaCard__head {
        gap: 10px;
    }

    .formulaCard .formulaCard__name {
        font-size: 17px;
    }

    .formulaCard .formulaCard__subtitle {
        font-size: 13px;
        line-height: 1.4;
    }

    .formulaCard__deposit {
        margin-top: 14px;
        padding: 10px;
        gap: 6px;
        font-size: 13px;
    }

    .formulaCard__deposit strong {
        font-size: 19px;
    }

    .formulaCard__badge {
        padding: 3px 6px;
        font-size: 11px;
    }

    .formulaCard__breakdown {
        flex-basis: 100%;
        font-size: 12px;
        line-height: 1.5;
    }

    .formulaCard__perks {
        margin-top: 14px;
    }

    .formulaCard__perks li {
        padding-left: 22px;
        font-size: 13px;
        line-height: 1.5;
    }

    .formulaCard__perks li + li {
        margin-top: 8px;
    }

    .formulaCard__perks li::before {
        width: 6px;
        height: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .formulaCard__visual,
    .formulaCard__icon,
    .formulaCard__pick {
        transition: none;
    }

    .formulaCard:not(.formulaCard--disabled):hover .formulaCard__visual,
    .formulaCard:not(.formulaCard--disabled):hover .formulaCard__pick {
        transform: none;
    }
}

/* Formula scelta: le altre spariscono, resta questa con il suo piano. */

.formulaPicked {
    background: #fff;
    border: 1px solid var(--booking-border);
    border-radius: 18px;
    overflow: hidden;
}

.formulaPicked__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--booking-border);
}

.formulaPicked__head .formulaCard__titles {
    flex: 1 1 160px;
}

.stepContainer .formulaPicked__change {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    color: #000;
    background: #f5f5f7;
    border: 1px solid var(--booking-border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: color .2s, background .2s, border-color .2s;
}

.stepContainer .formulaPicked__change:hover {
    color: var(--booking-brand);
    background: #000;
    border-color: #000;
}

/* Cambio di schermata: entrata breve, solo opacita' e spostamento. */
@keyframes payFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.payBlock {
    animation: payFadeIn .2s ease-out both;
}

.payBlock--delayed {
    animation-delay: .06s;
}

@media (prefers-reduced-motion: reduce) {
    .payBlock {
        animation: none;
    }
}

/* ─── Simulatore: quando e quanto paghi ────────────────────────────────── */

.paySim__body,
.heylightPromo {
    padding: 14px 16px;
}

.stepContainer .paySim__today {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
}

.paySim__todayLabel {
    flex: 0 1 auto;
    color: #86868b;
    font-size: 13px;
    letter-spacing: .01em;
}

.paySim__todayAmount {
    color: #000;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.paySim__bar {
    display: flex;
    gap: 3px;
    height: 10px;
    overflow: hidden;
    border-radius: 5px;
}

.paySim__seg {
    min-width: 6px;
    border-radius: 3px;
}

.paySim__seg--now {
    background: var(--booking-brand);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}

.paySim__seg--rata {
    background: #1d1d1f;
}

.paySim__seg--saldo {
    background: #c7c7cc;
}

.paySim__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 9px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
}

.paySim__legend li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.paySim__legendName {
    color: #86868b;
}

.paySim__legendAmount {
    color: #000;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.paySim__dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.paySim__dot--now {
    background: var(--booking-brand);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}

.paySim__dot--rata {
    background: #1d1d1f;
}

.paySim__dot--saldo {
    background: #c7c7cc;
}

.paySim__steps {
    display: grid;
    gap: 12px;
    margin: 14px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--booking-border);
    list-style: none;
}

.paySim__step {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.paySim__step .paySim__dot {
    margin-top: 5px;
}

.paySim__label {
    display: block;
    min-width: 0;
}

.paySim__what {
    display: block;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.paySim__step:last-child .paySim__what,
.paySim__step:last-child .paySim__amount {
    font-weight: 700;
}

.paySim__when {
    display: block;
    margin-top: 2px;
    color: #86868b;
    font-size: 12.5px;
    line-height: 1.35;
}

.paySim__amount {
    color: #000;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.paySim__times {
    margin-left: 4px;
    color: #86868b;
    font-size: 12px;
    font-weight: 600;
}

.stepContainer .paySim__note {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 11px 16px;
    background: #fafafa;
    border-top: 1px solid var(--booking-border);
    color: #86868b;
    font-size: 12px;
    line-height: 1.45;
}

.paySim__noteIcon {
    flex: 0 0 auto;
    margin-top: 1px;
}

@media (max-width: 767px) {
    .formulaPicked__head,
    .paySim__body,
    .heylightPromo {
        padding: 12px 13px;
    }

    .stepContainer .paySim__note {
        padding: 10px 13px;
    }

    .formulaPicked__head .formulaCard__titles {
        flex: 1 1 120px;
    }

    .formulaCard__icon {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        border-radius: 11px;
        font-size: 17px;
    }

    .stepContainer .formulaPicked__change {
        padding: 5px 10px;
    }

    .paySim__steps {
        gap: 11px;
    }

    .paySim__step {
        gap: 8px;
    }

    .paySim__todayAmount {
        font-size: 22px;
    }

    .paySim__amount {
        font-size: 14px;
    }

    .paySim__legend {
        gap: 4px 12px;
    }
}

.heylightPromo {
    overflow: hidden;
}

.heylightPromo__title {
    margin: 0 0 4px;
    font-weight: 600;
}

.heylightPromo__hint {
    margin: 0 0 12px;
    color: #65656b;
    font-size: 14px;
}

.heylightPromo__content {
    display: grid;
    align-items: center;
    min-height: 44px;
}

.heylightPromo__status,
.heylightPromo #heidipay-container {
    grid-area: 1 / 1;
    min-width: 0;
}

.heylightPromo__status p {
    margin: 0;
    font-size: 14px;
}

.heylightPromo__error,
.heylightPromo[data-heylight-state="error"] .heylightPromo__loading,
.heylightPromo[data-heylight-state="ready"] .heylightPromo__status {
    display: none;
}

.heylightPromo[data-heylight-state="error"] .heylightPromo__error {
    display: block;
}

.heylightPromo:not([data-heylight-state="ready"]) #heidipay-container {
    visibility: hidden;
    pointer-events: none;
}

.heylightPromo__retry {
    margin-top: 6px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.heylightPromo #heidipay-container,
.heylightPromo #heidipay-container * {
    max-width: 100% !important;
    font-family: "Work Sans", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow-wrap: break-word;
}

.pricePanel {
    position: sticky;
    top: calc(var(--mla-nav-h) + 16px);
    /* Sfumatura bianco -> grigio: e' lo stile chiesto in call da Francesco. */
    background: linear-gradient(180deg, #fff 0%, #f5f5f7 10%);
    box-shadow: none;
}

.priceTop {
    display: flex;
    /* Totale su una riga sola a sinistra, senza fascia: la riga di stacco la
       disegna l'elenco sotto. */
    align-items: baseline;
    gap: 10px;
    width: 100%;
    padding: 27px 20px 20px;
    color: inherit;
    /* E' un <button>: senza questo il browser ci mette il suo grigio e copre
       la sfumatura del pannello. */
    background: transparent;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: default;
    /* The toggle is a mobile-only affordance; keep the header inert on desktop. */
    pointer-events: none;
}

.summaryChevron {
    display: none;
}

.summarySheetBackdrop {
    display: none;
}

.summaryTopTitle {
    color: #000;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
}

.priceValue {
    min-width: 0;
}

.priceValue .big {
    margin: 0;
    color: #000;
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
}

.summary {
    padding: 5px 20px;
}

/* Prima schermata del riepilogo: riempie la colonna, testo e icona centrati.
   Finche' non c'e' un prezzo la testata "Totale:" sparisce, cosi' si vede la
   sfumatura dall'alto. Su telefono resta: e' il pulsante del bottom sheet. */
@media (min-width: 768px) {
    .pricePanel:has(.summaryEmpty) .priceTop {
        display: none;
    }
}

.summary:has(.summaryEmpty) {
    display: flex;
    flex-direction: column;
}

.summaryEmpty {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 18px;
    text-align: center;
}

.summaryEmpty__title {
    max-width: 200px;
    margin: 0;
    color: #000;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.15;
}

.summaryEmpty__media {
    width: 300px;
    max-width: 100%;
    height: auto;
    margin: 16px 0 18px;
}

.summaryEmpty__text {
    max-width: 420px;
    margin: 0;
    color: rgba(0, 0, 0, .70);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.summaryRows {
    display: grid;
    gap: 6px;
    border-top: 1px solid var(--booking-border);
}

.summarySectionTitle {
    margin: 10px 0 0;
    color: #000;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.summaryRow {
    display: grid;
    /* Keep the price column aligned even on rows without an edit action. */
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 6px;
    align-items: center;
    padding: 6px 0 0;
    border-top: 1px solid var(--booking-border);
}

.summaryRow:first-child {
    border-top: 0;
}

.summaryRow > div:first-child {
    display: grid;
    grid-template-columns: minmax(96px, .8fr) minmax(0, 1.2fr);
    gap: 6px;
    align-items: center;
    min-width: 0;
}

/* Riga con il suo prezzo accanto: etichetta, valore, importo. */
.summaryRow--withPrice > div:first-child {
    grid-template-columns: minmax(80px, .7fr) minmax(0, 1fr) auto;
}

.summaryRow__label {
    display: block;
    /* Minuscolo e grigio: il maiuscolo pesava il doppio (configuratore.html). */
    color: #86868b;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
}

.summaryRow__value {
    display: block;
    margin-top: 0;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-align: right;
    /* Il valore sta su una riga sola: se non ci sta, finisce con i puntini,
       come in configuratore.html. Le descrizioni lunghe stanno nell'etichetta,
       che invece va a capo. */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.summaryRow--service .summaryRow__label {
    /* Grigio e leggero come in configuratore.html: il nero resta ai numeri. */
    color: #86868b;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
}

.summaryRow--service > div:first-child {
    grid-template-columns: minmax(0, 1fr) auto;
}

.summaryRow__priceBadge {
    justify-self: end;
    width: fit-content;
    padding: 5px 8px;
    color: #000;
    background: var(--booking-brand);
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.sumIconBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #000;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .10);
    /* Quasi rettangolari, come in configuratore.html. */
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, transform .15s;
}

/* Sul nero, come in configuratore.html: accanto c'e' il prezzo giallo e un
   pulsante giallo si confonderebbe. */
.sumIconBtn:hover,
.sumIconBtn:focus-visible {
    color: #fff;
    background: #000;
    border-color: #000;
}

.sumIconBtn--remove:hover,
.sumIconBtn--remove:focus-visible {
    color: var(--booking-brand);
}

.sumIconBtn svg {
    width: 13px;
    height: 13px;
}

/* Desktop: keep the total visible while the sidebar body scrolls independently. */
@media (min-width: 981px) {
    .pricePanel {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - var(--mla-nav-h) - 32px);
        max-height: calc(100dvh - var(--mla-nav-h) - 32px);
    }

    .priceTop {
        flex: 0 0 auto;
    }

    .pricePanel .summary {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

}

/* Barra di scorrimento sottile, condivisa da tutte le aree che scorrono dentro
   una card. Sta fuori dalle media query perche' il browser la disegna solo
   quando serve davvero: se l'elemento non scorre, queste regole non si vedono.
   Per aggiungere un'area nuova basta metterla in questi elenchi. */
.pricePanel .summary,
.is-embedded .panelBody,
.is-embedded .stepContainer {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .24) transparent;
}

.pricePanel .summary::-webkit-scrollbar,
.is-embedded .panelBody::-webkit-scrollbar,
.is-embedded .stepContainer::-webkit-scrollbar {
    width: 6px;
}

.pricePanel .summary::-webkit-scrollbar-track,
.is-embedded .panelBody::-webkit-scrollbar-track,
.is-embedded .stepContainer::-webkit-scrollbar-track {
    background: transparent;
}

.pricePanel .summary::-webkit-scrollbar-thumb,
.is-embedded .panelBody::-webkit-scrollbar-thumb,
.is-embedded .stepContainer::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .22);
    border-radius: 999px;
}

.pricePanel .summary::-webkit-scrollbar-thumb:hover,
.is-embedded .panelBody::-webkit-scrollbar-thumb:hover,
.is-embedded .stepContainer::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, .38);
}

.pricePanel .summary::-webkit-scrollbar-button,
.is-embedded .panelBody::-webkit-scrollbar-button,
.is-embedded .stepContainer::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

/* Embed nell'iframe: la pagina e' solo la scheda, senza header, titolo ne'
   footer (vedi VseEmbedMode). Quindi il conto dell'altezza e' semplice, 100vh
   e basta: la card riempie l'iframe, scorre solo il contenuto e i pulsanti
   restano attaccati al fondo della card, come in configuratore.html.
   Nella pagina normale non si puo' fare: titolo e footer rubano spazio.

   Vale su desktop (>=981px) e su telefono (<=767px), dove il riepilogo e' una
   barra fissa fuori dal flusso e la pagina gli riserva gia' lo spazio. Nella
   fascia tablet (768-980px) no: li' il riepilogo sta nel flusso sopra la card,
   e comprimere entrambi in una schermata li strizzerebbe.

   Questo blocco monta solo lo scheletro. Chi scorre lo decidono i due blocchi
   subito dopo: su desktop scorre .stepContainer e la testata resta ferma, su
   telefono scorre .panelBody e la testata se ne va con il contenuto, come in
   configuratore.html. */
@media (min-width: 981px), (max-width: 767px) {
    .mla-booking-page.is-embedded {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        padding-bottom: 0;
        overflow: hidden;
    }

    .is-embedded .booking-wrap {
        flex: 1 1 auto;
        min-height: 0;
        align-items: stretch;
        /* Dentro un contenitore flex i margini auto fanno stringere il blocco sul
           contenuto: senza questo la scheda cambia larghezza a ogni scelta. */
        width: 100%;
    }

    .is-embedded .booking-panel {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .is-embedded .panelBody {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .is-embedded .panelHeader,
    .is-embedded .booking-error {
        flex: 0 0 auto;
    }

    .is-embedded .stepContainer {
        flex: 1 1 auto;
        min-height: 0;
    }

    .is-embedded .stepNav {
        flex: 0 0 auto;
    }
}

/* Desktop embed: scorre solo il modulo, la testata con i bottoni step resta
   ferma in cima alla card. La barra sottile e' la stessa del riepilogo. */
@media (min-width: 981px) {
    .is-embedded .stepContainer {
        overflow-y: auto;
    }
}

/* Telefono embed: scorre tutto insieme, testata compresa, come in
   configuratore.html. Cosi' il modulo guadagna l'altezza della testata. */
@media (max-width: 767px) {
    .is-embedded .panelBody {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.booking-error {
    margin: 0 20px 16px;
    padding: 12px 14px;
    color: #6f1d1b;
    background: #fff1f0;
    border: 1px solid #ffd2ce;
    border-radius: 18px;
    font-size: 14px;
}

/* Desktop: la striscia degli step scorre di lato invece di andare a capo.
   Non c'e' barra di scorrimento: si trascina col mouse tenendo premuto, come
   lo swipe col dito su mobile (vedi enableDragScroll in mla-public.js).
   La sfumatura ai bordi e il cursore a mano arrivano da .is-scrollable, che il
   JS mette solo quando ci sono step fuori vista. */
@media (min-width: 768px) {
    .steps.is-scrollable {
        cursor: grab;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    }

    .steps.is-dragging,
    .steps.is-dragging .stepPill {
        cursor: grabbing;
    }
}

@media (max-width: 980px) {
    .booking-wrap {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .pricePanel {
        position: static;
        order: -1;
    }
}

@media (max-width: 767px) {
    .mla-booking-page {
        min-height: calc(100vh - var(--mla-nav-h-mob));
    }

    .mla-booking-hero {
        padding: 22px 16px 0;
    }

    .panelHeader {
        padding: 18px 0 14px;
    }

    .steps {
        gap: 8px;
        padding: 6px 42px;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 22px;
    }

    .stepPill {
        scroll-snap-align: start;
    }

    .panelHeader::before,
    .panelHeader::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 3;
        width: 36px;
        pointer-events: none;
    }

    .panelHeader::before {
        left: 0;
        background: linear-gradient(90deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, 0));
    }

    .panelHeader::after {
        right: 0;
        background: linear-gradient(270deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, 0));
    }

    .stepDots {
        display: flex;
        justify-content: center;
        gap: 6px;
        width: 100%;
        pointer-events: none;
    }

    .stepDot {
        width: 6px;
        height: 6px;
        background: rgba(0, 0, 0, .25);
        border-radius: 50%;
        transition: transform .2s ease, background .2s ease;
    }

    .stepDot.active {
        background: #000;
        transform: scale(1.3);
    }

    .subSteps {
        flex-wrap: nowrap;
        margin-right: 20px;
        margin-left: 20px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 8px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .subSteps::-webkit-scrollbar {
        display: none;
    }

    .stepContainer {
        min-height: 0;
        padding: 0 10px;
    }

    .stepHero {
        gap: 10px;
        margin: 0 0 14px;
        padding: 10px 12px;
        border-radius: 12px;
    }

    .stepHero__icon {
        width: 30px;
        height: 30px;
    }

    .stepHero__icon .bi {
        font-size: 15px;
    }

    .stepHero__text {
        font-size: 13px;
    }

    .summaryChoiceCard--enroll {
        gap: 11px;
        min-height: 68px;
        padding: 12px 14px 12px 12px;
        border-radius: 16px;
    }

    .summaryChoiceCard--enroll .summaryChoiceCard__badge {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    .summaryChoiceCard--enroll .summaryChoiceCard__badge svg {
        width: 18px;
        height: 18px;
    }

    .summaryChoiceCard--enroll strong {
        font-size: 17px;
        line-height: 1.2;
    }

    .summaryChoiceCard--enroll small {
        margin-top: 3px;
        font-size: 13px;
        line-height: 1.3;
    }

    .summaryChoiceCard--enroll .summaryChoiceCard__icon {
        width: 20px;
        height: 20px;
    }

    .stepContainer .mt-3 {
        justify-content: center;
    }

    .consentRow {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px;
        border-radius: 16px;
    }

    .consentRow .consentToggle {
        display: flex;
        width: 100%;
    }

    .stepContainer .form-group.row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 14px 15px 15px;
        background: var(--booking-bg);
        border: 1px solid var(--booking-border);
    }

    .stepContainer .form-group.row > label,
    .stepContainer .form-group.row > .control-label,
    .stepContainer .form-group.row > div {
        grid-column: 1;
    }

    .stepContainer .form-group.row.groupedFields,
    .stepContainer .form-group.row:has(> div > .groupedFields__label) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .stepContainer .form-group.row.groupedFields > label,
    .stepContainer .form-group.row:has(> div > .groupedFields__label) > label {
        grid-column: 1 / -1;
    }

    .stepContainer .form-group.row.groupedFields > div,
    .stepContainer .form-group.row:has(> div > .groupedFields__label) > div {
        grid-column: auto;
    }

    .svcCard {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
        border-radius: 18px;
    }

    .svcList {
        gap: 14px;
    }

    .svcMedia {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    .svcMedia .bi {
        font-size: 18px;
    }

    .svcTitle {
        font-size: 15px;
        line-height: 1.3;
    }

    .svcControls {
        grid-column: 1 / -1;
        justify-content: stretch;
        margin-top: 2px;
    }

    .segmented {
        width: 100%;
        height: 44px;
    }

    .stepContainer .segmented label {
        flex: 1 1 0;
        min-height: 0;
        padding: 0;
    }

    .svcInfo {
        margin-top: 2px;
        padding-top: 12px;
    }

    .svcInfo > summary {
        font-size: 13px;
    }

    .priceTop {
        padding: 18px 16px;
    }

    .summary {
        padding: 16px;
    }

    /* Sul telefono la riga resta a due colonne. Le righe con il prezzo mettono
       il pallino sotto al valore, a destra; quelle dei servizi tengono la loro
       descrizione larga, altrimenti va a capo a ogni parola. */
    .summaryRow:not(.summaryRow--service) > div:first-child {
        grid-template-columns: minmax(90px, .75fr) minmax(0, 1.25fr);
    }

    .summaryRow--withPrice .summaryRow__priceBadge {
        grid-column: 2;
        margin-top: 4px;
    }

    /* Price summary becomes a collapsible bottom sheet on mobile.
       76px = 66px di barra chiusa + 10px di stacco dalla card. */
    .booking-wrap {
        padding-bottom: 76px;
    }

    .pricePanel {
        position: fixed;
        top: auto;
        /* Nel bottom sheet la sfumatura non serve: la barra chiusa e' alta 66px. */
        background: #f5f5f7;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1200;
        order: 0;
        display: flex;
        flex-direction: column;
        max-height: 66px;
        overflow: hidden;
        border: 1px solid var(--booking-border);
        border-bottom: 0;
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -14px 34px rgba(0, 0, 0, .20);
        transition: max-height .3s ease;
    }

    .pricePanel.is-open {
        max-height: 85vh;
    }

    .priceTop {
        flex: 0 0 auto;
        align-items: center;
        gap: 10px;
        min-height: 66px;
        padding: 12px 16px;
        cursor: pointer;
        pointer-events: auto;
    }

    .priceTop .summaryTopTitle {
        font-size: 15px;
    }

    /* Nel bottom sheet resta una riga sola: icona e descrizione lunga qui
       affollano la barra, come nel configuratore. */
    .summaryEmpty {
        padding: 4px 0 8px;
    }

    .summaryEmpty__media,
    .summaryEmpty__text {
        display: none;
    }

    .summaryEmpty__title {
        max-width: none;
        color: rgba(0, 0, 0, .62);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.35;
    }

    .priceTop .priceValue {
        min-width: 0;
        margin-left: auto;
    }

    .priceTop .priceValue .big {
        font-size: 22px;
    }

    .summaryChevron {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        color: #000;
        background: #fff;
        border: 1px solid var(--booking-border);
        border-radius: 50%;
        transition: transform .3s ease;
    }

    .pricePanel.is-open .summaryChevron {
        transform: rotate(180deg);
    }

    .summary {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .summarySheetBackdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1150;
        background: rgba(0, 0, 0, .42);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
    }

    .summarySheetBackdrop.is-open {
        opacity: 1;
        visibility: visible;
    }
}

/* Spinner inline nei bottoni durante operazioni lunghe (es. invio iscrizione) */
.btnSpinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .5em;
    vertical-align: -.15em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btnSpinnerRotate .7s linear infinite;
}

@keyframes btnSpinnerRotate {
    to { transform: rotate(360deg); }
}

button:disabled .btnSpinner {
    opacity: .85;
}