/* Template-aligned overrides scoped to Checkout only. */

.checkout-hero {
    background: url("/img/bg-epc.png") center / cover no-repeat !important;
}

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

iframe#__browserLink_initializationData {
    display: none !important;
}

.checkout-page .checkout-submit {
    min-width: 260px;
    min-height: 44px;
    padding: 8px 28px;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.checkout-page .checkout-submit.is-loading {
    cursor: wait;
    opacity: 0.82;
}

.checkout-page .checkout-submit-status {
    margin: -10px 0 24px;
    color: #006d7f;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

/*
 * CHECKOUT PAYPAL - ZONA SENSIBILE (NON MODIFICARE ALLA LEGGERA)
 *
 * Contesto:
 * - I tre campi carta (Numero/Scadenza/CVV) NON sono input HTML nostri:
 *   sono Hosted Fields PayPal renderizzati dentro iframe.
 * - Il layout visivo finale dipende dalla combinazione:
 *   1) CSS template (item-header-mobile, griglia bootstrap),
 *   2) override locali in questo file,
 *   3) stile interno applicato da PayPal agli iframe.
 *
 * Cosa abbiamo stabilizzato:
 * - Uniformita verticale delle label nel form carta.
 * - Distacco coerente tra label e contenitori campi.
 * - Stile "capsula" dei contenitori host, mantenendo editabilita.
 *
 * Rischi noti se si cambia questa sezione:
 * - Campi non cliccabili/non editabili.
 * - Overlay iframe disallineati o sovrapposti.
 * - Spaziature incoerenti tra Nominativo e Numero/Scadenza/CVV.
 *
 * Regola operativa:
 * - Intervenire qui solo con micro-patch e test manuale su:
 *   focus, digitazione, autofill/saved cards, submit carta, fallback PayPal button.
 */

/* Card form: input nome in stile capsule (template) */
.checkout-page .checkout-card-in {
    width: 100%;
    height: 78px;
    padding: 0 28px;
    border: 1px solid #36a7c5;
    border-radius: 50px;
    background: transparent;
    font-size: 18px;
    color: #2b2b2b;
    box-sizing: border-box;
}

.checkout-page .checkout-card-in:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: #36a7c5;
}

/* Card form: host PayPal in stile capsule (come Nominativo) */
.checkout-page .checkout-card-hosted {
    width: 100%;
    height: 78px;
    padding: 0 24px;
    border: 1px solid #36a7c5;
    border-radius: 50px;
    background: transparent;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

/* Riduce il vuoto tra input Nominativo e riga Numero/Scadenza/CVV */
.checkout-page #card-form .row.g-0 + .row.g-0 {
    margin-top: 16px;
}

/* Allinea tutte le label del form carta (Nominativo + Numero/Scadenza/CVV) */
.checkout-page #card-form .item-header-mobile {
    display: flex;
    align-items: center;
    min-height: 48px;
    height: auto;
    line-height: 1.2;
}

/* Stacca i campi dalle label superiori per evitare effetto "attaccato" */
.checkout-page #card-form .checkout-card-in,
.checkout-page #card-form .checkout-card-hosted {
    margin-top: 10px;
}

/* Accessibilita: ripristina focus visibile sui bottoni elimina carrello */
button[onclick^="askDeleteCarrello"]:focus-visible {
    outline: 2px solid #0d6efd !important;
    outline-offset: 2px;
}

/* Mantiene i ritorni a capo nei testi della modale popup */
.custom-modal-text {
    white-space: pre-line;
}

/* Popup successo Checkout: CTA primaria scoped solo a questa modale */
#confirmModal.checkout-success-modal #confirmBtn {
    min-width: min(380px, calc(100vw - 80px));
    max-width: calc(100vw - 80px);
    min-height: 56px;
    padding: 13px 34px;
    border: 0;
    border-radius: 999px;
    background: #006d7f;
    color: #fff;
    font-weight: 700;
    line-height: 1.15;
    box-shadow: 0 10px 22px rgba(0, 109, 127, 0.22);
}

#confirmModal.checkout-success-modal #confirmBtn:hover {
    background: #005a69;
}

#confirmModal.checkout-success-modal #confirmBtn:focus-visible {
    outline: 3px solid rgba(0, 109, 127, 0.28);
    outline-offset: 4px;
}

@media (min-width: 480px) {
    #confirmModal.checkout-success-modal #confirmBtn {
        white-space: nowrap;
    }
}

.legal-bullets {
    color: #676767;
    font-size: 18px;
    font-weight: 300;
}

.legal-bullets li {
    color: inherit;
    font: inherit;
}

.consenso-link {
    font: inherit;
}

/*
 * Campi obbligatori non compilati: bordo rosso + fondino rosso tenue.
 * !important necessario per battere border: 1px solid #00627D !important del template
 * (style.css riga 907, stessa ragione del !important su select option sopra).
 */
.custom-input.is-invalid {
    border-color: #dc3545 !important;
    background-color: rgba(220, 53, 69, 0.07) !important;
    background-image: none !important;
}

/* Nasconde il pulsante occhio nativo di Edge/Chrome sui campi password (evita doppia icona con la nostra) */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

/*
 * Il template raggruppa .custom-input::placeholder e select option in un'unica regola
 * applicando color: rgb(75,75,75,20%) !important — le opzioni delle tendine risultano
 * quasi invisibili. Il !important qui è obbligatorio per battere quello del template.
 * #2b2b2b è il quasi-nero già usato in questo file (.checkout-card-in, riga 64).
 */
select option {
    color: #2b2b2b !important;
}

.custom-select {
    color: #2b2b2b;
}

select.custom-select:focus,
select.custom-input:focus,
select.form-select:focus,
input.custom-input:focus,
input.form-control:focus {
    border: 1px solid #36a7c5 !important;
    box-shadow: 0 0 0 3px rgba(54, 167, 197, 0.25) !important;
    outline: none !important;
}

.checkout-page select.custom-select:focus,
.checkout-page select.custom-input:focus,
.checkout-page select.form-select:focus,
.checkout-page input.custom-input:focus,
.checkout-page input.form-control:focus {
    border: revert !important;
    box-shadow: revert !important;
    outline: revert !important;
}

/* Rimuove il check verde sui campi validi (Bootstrap is-valid / was-validated :valid) */
.was-validated .form-control:valid,
.was-validated .custom-input:valid,
.form-control.is-valid,
.custom-input.is-valid {
    border-color: #ced4da !important;
    background-image: none !important;
    box-shadow: none !important;
}

.was-validated .form-control:not(select):valid:focus,
.was-validated .custom-input:not(select):valid:focus,
.form-control:not(select).is-valid:focus,
.custom-input:not(select).is-valid:focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Popup modale: rispetta i newline nel testo (per elenchi bullet) */
.custom-modal-text { white-space: pre-line; }