/* 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 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;
}