/**
 * UsatoMania Child — Checkout
 * Layout gestito da Blonwe/Bootstrap. Qui solo override USM custom.
 */

/* CF input nella pagina checkout blonwe */
#billing_codice_fiscale,
#billing_codice_tessera {
    text-transform: uppercase;
}

/* Override colore pulsante "Completa ordine" con gold USM */
#place_order {
    background-color: var(--usm-gold, #EBBD17) !important;
    border-color: var(--usm-gold, #EBBD17) !important;
    color: var(--usm-dark, #151616) !important;
    font-weight: 700;
}

#place_order:hover {
    background-color: var(--usm-gold-dark, #c9a110) !important;
    border-color: var(--usm-gold-dark, #c9a110) !important;
}
/* ============================================================
   USATOMANIA — CHECKOUT RESTYLE
   Incollare in: Aspetto → Personalizza → CSS aggiuntivo
   Selettori standard WooCommerce (checkout classico/shortcode)
   ============================================================ */

/* ---------- Variabili brand ---------- */
:root {
  --um-verde: #3c5220;
  --um-verde-scuro: #24301a;
  --um-giallo: #f2c200;
  --um-avorio: #f6f4ee;
  --um-bordo: #e4e1d8;
  --um-bordo-input: #dcd8cc;
  --um-testo: #2a2a26;
  --um-testo-soft: #55534b;
  --um-muted: #8a887e;
}

/* ---------- Layout a 2 colonne con riepilogo sticky ----------
   Il tema mette i due blocchi dentro `.cart-wrapper` (flex, wrap): erano
   entrambi al 100% e quindi impilati. Qui 60/40 affiancati da desktop.
   !important perché Blonwe impone la larghezza piena con specificità alta. */
.checkout-wrapper .cart-wrapper {
  gap: 0 !important;
  align-items: flex-start;
}
.checkout-wrapper .cart-wrapper > div#customer_details {
  max-width: 60% !important;
  flex: 0 0 60%;
  padding-right: 1em;
}
.checkout-wrapper .cart-wrapper > .order-review-wrapper {
  width: 40% !important;
  flex: 0 0 40%;
}
/* Express checkout Stripe e separatore: restano a tutta larghezza sopra le colonne */
.checkout-wrapper .cart-wrapper > #wc-stripe-express-checkout-element,
.checkout-wrapper .cart-wrapper > #wc-stripe-express-checkout-button-separator {
  flex: 0 0 100%;
  width: 100%;
}

form.woocommerce-checkout #order_review {
  position: sticky;
  top: 24px;
}

@media (max-width: 991.98px) {
  /* Mobile e tablet: una colonna, entrambi i blocchi a piena larghezza. */
  .checkout-wrapper .cart-wrapper > div#customer_details,
  .checkout-wrapper .cart-wrapper > .order-review-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    flex: 0 0 100%;
    padding-right: 0;
  }
  form.woocommerce-checkout #order_review { position: static; }
}

/* ---------- Card "Dettagli di fatturazione" ---------- */
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
  background: #fff;
  border: 1px solid #ebe8de;
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 20px;
}
.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3,
.woocommerce-additional-fields > h3,
#order_review_heading {
  font-size: 20px;
  color: var(--um-verde-scuro);
  margin: 0 0 22px;
}

/* ---------- Campi form ---------- */
form.woocommerce-checkout .form-row { margin-bottom: 16px; }

form.woocommerce-checkout .form-row label {
  font-size: 13px;
  font-weight: 600;
  color: var(--um-testo-soft);
  margin-bottom: 7px;
  display: block;
}
form.woocommerce-checkout .form-row .required { color: #b23b2e; text-decoration: none; }
form.woocommerce-checkout .form-row .optional { color: #a9a69c; font-weight: 400; }

form.woocommerce-checkout .input-text,
form.woocommerce-checkout select,
form.woocommerce-checkout textarea,
form.woocommerce-checkout .select2-container--default .select2-selection--single {
  width: 100%;
  /* Campi compatti (prima 14px/16px: troppo alti, il form non stava in una schermata).
     min-height tiene il campo comunque toccabile su mobile. */
  padding: 5px 5px;
  min-height: 38px;
  border: 1px solid var(--um-bordo-input);
  border-radius: 10px;
  font-size: 15px;
  background: #fcfbf7;
  color: var(--um-testo);
  height: auto;
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* Blonwe impone `height: 2.875rem` con `.checkout-wrapper .woocommerce-input-wrapper input`
   (0,2,1): senza questa regola l'altezza resterebbe fissa e il padding sopra
   non avrebbe effetto. */
.checkout-wrapper .woocommerce-input-wrapper input.input-text,
.checkout-wrapper .woocommerce-input-wrapper textarea,
.checkout-wrapper .woocommerce-input-wrapper select {
  height: auto;
  min-height: 38px;
}

form.woocommerce-checkout .select2-container--default .select2-selection__rendered {
  line-height: 1.4;
  padding: 0;
  color: var(--um-testo);
}
form.woocommerce-checkout .select2-container--default .select2-selection__arrow {
  height: 100%;
  right: 10px;
}

form.woocommerce-checkout .input-text:focus,
form.woocommerce-checkout select:focus,
form.woocommerce-checkout textarea:focus {
  outline: none;
  border-color: var(--um-verde);
  box-shadow: 0 0 0 3px rgba(60, 82, 32, 0.12);
}
form.woocommerce-checkout ::placeholder { color: #a9a69c; }

/* Campi affiancati: Nome/Cognome, Via/Città, CAP/Provincia, Telefono/Email
   (l'accoppiamento è deciso lato PHP in USM_TH_Checkout::PAIRS). */
form.woocommerce-checkout .form-row-first,
form.woocommerce-checkout .form-row-last {
  width: calc(50% - 8px);
}
form.woocommerce-checkout .form-row-first { float: left; clear: both; }
form.woocommerce-checkout .form-row-last { float: right; }
/* I blocchi a piena larghezza non devono finire accanto a una coppia flottante */
form.woocommerce-checkout .form-row-wide,
form.woocommerce-checkout .woocommerce-account-fields,
form.woocommerce-checkout .woocommerce-shipping-fields,
form.woocommerce-checkout .woocommerce-additional-fields { clear: both; }

@media (max-width: 767.98px) {
  /* Un campo per riga, tranne CAP e Provincia che sono corti e stanno bene
     appaiati anche su schermo stretto. */
  form.woocommerce-checkout .form-row-first,
  form.woocommerce-checkout .form-row-last {
    width: 100%;
    float: none;
  }
  form.woocommerce-checkout #billing_postcode_field,
  form.woocommerce-checkout #shipping_postcode_field {
    width: calc(50% - 6px);
    float: left;
    clear: both;
  }
  form.woocommerce-checkout #billing_state_field,
  form.woocommerce-checkout #shipping_state_field {
    width: calc(50% - 6px);
    float: right;
  }
}

/* Checkbox */
form.woocommerce-checkout input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--um-verde);
}

/* Errori di validazione */
form.woocommerce-checkout .form-row.woocommerce-invalid .input-text,
form.woocommerce-checkout .form-row.woocommerce-invalid select {
  border-color: #b23b2e;
  box-shadow: 0 0 0 3px rgba(178, 59, 46, 0.10);
}

/* ---------- Riepilogo ordine ---------- */
#order_review {
  background: #fff;
  border: 1px solid #ebe8de;
  border-radius: 16px;
  padding: 24px;
}
#order_review_heading {
  background: var(--um-verde-scuro);
  color: #f4f1e6;
  border-radius: 16px 16px 0 0;
  padding: 18px 24px;
  margin: 0;
}
/* se heading e box sono adiacenti, uniscili visivamente */
#order_review_heading + #order_review {
  border-radius: 0 0 16px 16px;
  border-top: none;
}

#order_review .shop_table {
  border: none;
  margin-bottom: 20px;
}
#order_review .shop_table th,
#order_review .shop_table td {
  border: none;
  border-bottom: 1px solid #ebe8de;
  padding: 12px 0;
  font-size: 14px;
  color: var(--um-testo-soft);
  background: none;
}
/* Riga prodotto con miniatura (vedi USM_TH_Checkout::add_thumbnail_to_review).
   NIENTE display:flex sul <td>: toglierebbe la cella dall'algoritmo di layout
   della tabella, che collasserebbe la colonna (misurata: 122px) mandando
   miniatura, nome e quantità uno sotto l'altro. La miniatura si affianca al
   testo con un float, che dentro una cella funziona senza effetti collaterali. */
#order_review .shop_table td.product-name {
  vertical-align: middle;
  overflow: hidden; /* contiene il float */
  line-height: 1.4;
}
#order_review .shop_table td.product-name img.usm-review-thumb {
  float: left;
  width: 44px;
  height: 44px;
  margin: 0 10px 0 0;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #ebe8de;
  background: #fff;
}
/* Il nome resta inline così la quantità gli scorre accanto invece di
   finire a capo su una riga tutta sua. */
#order_review .shop_table td.product-name .usm-review-name {
  display: inline;
}
#order_review .shop_table td.product-name .product-quantity {
  white-space: nowrap;
  color: var(--um-muted);
  font-weight: 600;
}
#order_review .shop_table td.product-total {
  vertical-align: middle;
  white-space: nowrap;
}

#order_review .shop_table thead th {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--um-muted);
}
#order_review .shop_table .order-total th,
#order_review .shop_table .order-total td {
  border-bottom: none;
  border-top: 2px solid var(--um-verde-scuro);
  padding-top: 16px;
  font-size: 18px;
  color: var(--um-verde-scuro);
}
#order_review .shop_table .order-total .amount {
  font-size: 24px;
  font-weight: 700;
  color: var(--um-verde);
}

/* ---------- Metodi di pagamento come card ---------- */
#payment { background: none; }
#payment ul.wc_payment_methods {
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#payment ul.wc_payment_methods li.wc_payment_method {
  border: 1px solid var(--um-bordo-input);
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
  transition: border-color 0.15s, background 0.15s;
}
#payment ul.wc_payment_methods li.wc_payment_method:hover {
  border-color: var(--um-verde);
}
/* metodo selezionato */
#payment ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
  border: 2px solid var(--um-verde);
  background: #f7faf2;
  padding: 13px 15px;
}
#payment ul.wc_payment_methods li.wc_payment_method > label {
  font-weight: 600;
  color: var(--um-testo);
  cursor: pointer;
}
#payment ul.wc_payment_methods input[type="radio"] {
  accent-color: var(--um-verde);
  width: 18px;
  height: 18px;
  margin-right: 8px;
}
#payment div.payment_box {
  background: var(--um-avorio);
  border-radius: 10px;
  font-size: 13px;
  color: var(--um-testo-soft);
  margin-top: 10px;
}
#payment div.payment_box::before { display: none; } /* rimuove la freccetta */

/* ---------- Stripe come voci di primo livello ----------
   Con "Optimized Checkout" disattivato (opzione optimized_checkout_element = no)
   Carta di credito e Klarna sono gateway WooCommerce autonomi: stessa <li>,
   stessa radio e stessa payment_box di PayPal e Bonifico, quindi ereditano le
   card qui sopra. Restano solo queste rifiniture. */

/* Il JS di Stripe mette style="display:block" inline sulle <li> country-gated
   (Klarna): senza questo si romperebbe il flex del tema. */
.checkout-wrapper .order-review-wrapper #order_review .woocommerce-checkout-payment
  ul.wc_payment_methods li.wc_payment_method[style*="block"] {
  display: flex !important;
  flex-wrap: wrap;
}

/* Fieldset dell'element Stripe: via bordo e margini di default del browser */
#payment div.payment_box fieldset.wc-upe-form,
#payment div.payment_box #wc-stripe-upe-form,
#payment div.payment_box #wc-stripe_klarna-upe-form {
  border: 0;
  margin: 0;
  padding: 0;
}

/* Icone dei gateway allineate tra loro (Stripe le emette a 37x24) */
#payment ul.wc_payment_methods li.wc_payment_method > label img {
  height: 20px;
  width: auto;
  max-width: 48px;
  object-fit: contain;
  margin-left: 6px;
  vertical-align: middle;
}

/* ---------- Privacy + termini ---------- */
.woocommerce-privacy-policy-text p,
.woocommerce-terms-and-conditions-wrapper {
  font-size: 13px;
  color: var(--um-muted);
  line-height: 1.5;
}
.woocommerce-terms-and-conditions-wrapper a,
.woocommerce-privacy-policy-text a {
  color: var(--um-verde);
  font-weight: 600;
}

/* ---------- Bottone "Effettua ordine" ---------- */
#place_order {
  width: 100%;
  background: var(--um-giallo);
  color: var(--um-verde-scuro);
  border: none;
  border-radius: 12px;
  padding: 18px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
  transition: background 0.15s, transform 0.1s;
}
#place_order:hover { background: #e0b400; }
#place_order:active { transform: scale(0.99); }

/* ---------- Express checkout (G Pay / bottoni Stripe) ---------- */
.wc-stripe-payment-request-wrapper,
#wc-stripe-payment-request-wrapper {
  max-width: 1200px;
  margin: 0 auto 8px;
}
#wc-stripe-payment-request-button button,
.wc-stripe-payment-request-wrapper button {
  border-radius: 12px !important;
}
#wc-stripe-payment-request-button-separator,
.payment-request-separator {
  color: #a9a69c;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Note sull'ordine ---------- */
form.woocommerce-checkout textarea#order_comments {
  min-height: 96px;
  resize: vertical;
}

/* =============================================
   Fix audit UI 2026-07 — checkout senza distrazioni
   Su cart e checkout: via bottom bar mobile e FAB appuntamenti
   (erano 4 vie di uscita permanenti durante il pagamento).
   ============================================= */
body.woocommerce-checkout .klb-mobile-bottom,
body.woocommerce-cart .klb-mobile-bottom,
body.woocommerce-checkout a.usm-floating-appt,
body.woocommerce-cart a.usm-floating-appt {
    display: none !important;
}

/* =============================================
   Rifinitura checkout 2026-08
   ============================================= */

/* ── Apple Pay / Google Pay ───────────────────────────────────
   Stripe li stampa a 1360 px, edge-to-edge: la pagina di pagamento si apriva
   con due barre nere piene larghezza, prima ancora che si veda cosa si sta
   comprando. Restano la scorciatoia utile che sono, ma alla larghezza della
   colonna del modulo e con lo stesso raggio di tutto il resto. */
.wc-stripe-express-checkout-element {
    /* Il plugin Stripe impone la larghezza dopo di noi: senza !important la
       regola risultava scritta ma inefficace (misurato: 1360px comunque). */
    max-width: 807px !important;
    margin-left: 0;
    margin-right: auto;
}

.wc-stripe-express-checkout-element .StripeElement {
    border-radius: var(--usm-radius, 12px);
    overflow: hidden;
}

/* Il separatore era due parole grigie sospese al centro della pagina. */
.wc-stripe-express-checkout-button-separator {
    max-width: 807px;
    margin-left: 0;
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--usm-olive, #79806e);
}

.wc-stripe-express-checkout-button-separator::before,
.wc-stripe-express-checkout-button-separator::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--usm-surface-alt, #e9e8e2);
}

/* ── Colore dei link ──────────────────────────────────────────
   Nella stessa colonna convivevano tre colori diversi: il rosso #E53E3E
   della privacy policy e l'azzurro #228BE6 dei termini (default di
   WooCommerce e del tema) accanto al verde dei nostri blocchi. Tre colori
   per tre link che fanno la stessa cosa: aprire una pagina informativa. */
/* Il tema colora questi due link con le proprie variabili (--color-red600 e
   --color-blue600) e lo fa con !important: nessuna specificita' lo batte,
   verificato provando anche `body.woocommerce-checkout ... a.classe`. Quindi
   !important anche qui, che e' l'unica cosa che funziona. */
.woocommerce-privacy-policy-text a,
a.woocommerce-terms-and-conditions-link {
    color: var(--usm-green, #213e25) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.woocommerce-privacy-policy-text a:hover,
a.woocommerce-terms-and-conditions-link:hover {
    color: var(--usm-gold-dark, #c9a110) !important;
}

/* ── Pulsante finale ──────────────────────────────────────────
   Era alto 50 px contro i 54 di ogni campo del modulo: l'azione conclusiva
   risultava piu' piccola delle caselle che la precedono. */
.woocommerce-checkout #place_order {
    min-height: 54px;
    padding: 16px 24px;
}

/* ── Metodi di pagamento ──────────────────────────────────────
   Il box Stripe porta 302 px di altezza con dentro poco: il padding del
   tema ci aggiungeva aria che non serviva. */
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method > label {
    padding-top: 2px;
    padding-bottom: 2px;
    margin-bottom: 0;
}

.woocommerce-checkout ul.wc_payment_methods .payment_box {
    margin-top: 0;
    padding: 14px 16px;
}

/* ── Box consensi ─────────────────────────────────────────────
   La legend del fieldset cadeva sopra il bordo e sembrava un errore di
   impaginazione: le serve uno sfondo che interrompa la linea. */
.usm-consensi-modulo > legend {
    padding: 0 8px;
    margin-left: -8px;
    background: inherit;
    font-weight: 600;
    color: var(--usm-dark, #151616);
}

/* ── Colonna del modulo: quattro contenitori, un solo stile ───
   Fatturazione, spedizione e note sono card bianche con bordo, raggio 16 e
   28 px di padding. "Creare un account?" invece non aveva ne' sfondo ne'
   bordo ne' padding: la casella cadeva a filo del bordo pagina, 29 px piu' a
   sinistra di ogni altra etichetta, e sembrava ritagliata fuori dal modulo. */
.woocommerce-checkout .woocommerce-account-fields {
    background: #fff;
    border: 1px solid var(--usm-surface-alt, #ebe8de);
    border-radius: 16px;
    padding: 20px 28px;
    margin-bottom: 24px;
}

.woocommerce-checkout .woocommerce-account-fields > p:last-child,
.woocommerce-checkout .woocommerce-shipping-fields > h3:last-child,
.woocommerce-checkout .woocommerce-additional-fields p:last-child {
    margin-bottom: 0;
}

/* ── Etichette: un font solo ──────────────────────────────────
   "Spedire a un indirizzo diverso?" usciva in Playfair Display, serif, in
   mezzo a un modulo dove ogni altra etichetta e' in DM Sans. */
.woocommerce-checkout #ship-to-different-address,
.woocommerce-checkout #ship-to-different-address label,
.woocommerce-checkout #ship-to-different-address span {
    font-family: var(--usm-font-label, 'Work Sans', 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 600;
}




/* ── Metodi di pagamento: leggibilita' ────────────────────────
   Il metodo selezionato aveva l'etichetta in oro su bianco sporco:
   contrasto misurato 1.68:1, contro i 4.5:1 minimi. Sul metodo di pagamento
   attivo, che e' il punto in cui il cliente controlla cosa sta per usare.
   La selezione resta segnalata dal pallino e dal bordo, che sono oro: il
   colore serve li', non sul testo. !important perche' il tema colora
   l'etichetta con la propria primaria e nessuna specificita' lo batte. */
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method > label {
    color: var(--usm-dark, #151616) !important;
    font-weight: 600;
}

/* Ogni riquadro era alto 82 px per una riga di testo: quattro metodi
   occupavano piu' spazio del riepilogo dell'ordine. Il padding del tema
   (14 px) va sostituito, non sommato: serve !important. */
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method {
    padding: 10px 16px !important;
    margin-top: 10px;
}

/* ── Caselle di spunta ────────────────────────────────────────
   18 px con il testo che partiva dal bordo superiore: la riga dei termini,
   che e' obbligatoria, sembrava una nota a margine. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row label.checkbox,
.woocommerce-checkout .usm-consensi-modulo label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"],
.woocommerce-checkout .usm-consensi-modulo input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
}


/* =============================================================
   SISTEMA CAMPI DEL CHECKOUT
   =============================================================
   Fin qui il modulo era un insieme di misure ereditate da tre parti diverse
   e mai messe d'accordo, misurate in pagina:
     - input di testo alti 54 px, <select> del Paese alto 38, select2 della
       Provincia 54: tre altezze nella stessa colonna;
     - padding interno 5 px, con il testo appoggiato al bordo del campo;
     - bordo #CED4DA, il grigio-blu di Bootstrap, in un sito i cui bordi
       sono #e9e8e2 e #807660;
     - larghezze decise dalle classi form-row-first/last di WooCommerce, per
       cui il C.A.P. era largo 357 px come il nome e il cognome.
   Qui il modulo prende una griglia sola e i controlli una misura sola. */

/* ── Griglia ──────────────────────────────────────────────────
   Dodici colonne: bastano a dare a ogni campo la larghezza del dato che
   contiene, che e' il punto (il C.A.P. sono cinque cifre, la via e' lunga). */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    /* Il tema imposta display:flex sul contenitore: senza !important la
       griglia resta dichiarata ma inerte, e le righe tornano a impilarsi. */
    display: grid !important;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 16px;
    row-gap: 18px;
}

/* Il margine verticale delle righe lo sostituisce il row-gap: sommati
   davano spaziature diverse tra un campo e l'altro. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
    grid-column: span 12;
    /* Le classi form-row-first/last del tema portano width:50%: dentro una
       cella di griglia il campo si dimezzava una seconda volta (il nome
       usciva largo 184 px invece di 368). La larghezza la decide la cella. */
    width: 100% !important;
    max-width: none;
    margin: 0;
    padding: 0;
    float: none;
}

.woocommerce-checkout #billing_first_name_field,
.woocommerce-checkout #billing_last_name_field,
.woocommerce-checkout #shipping_first_name_field,
.woocommerce-checkout #shipping_last_name_field {
    grid-column: span 6;
}

/* Citta' | C.A.P. | Provincia sulla stessa riga, nell'ordine in cui si
   scrive un indirizzo. */
.woocommerce-checkout #billing_city_field,
.woocommerce-checkout #shipping_city_field {
    grid-column: span 5;
}

.woocommerce-checkout #billing_postcode_field,
.woocommerce-checkout #shipping_postcode_field {
    grid-column: span 3;
}

.woocommerce-checkout #billing_state_field,
.woocommerce-checkout #shipping_state_field {
    grid-column: span 4;
}

.woocommerce-checkout #billing_phone_field,
.woocommerce-checkout #shipping_phone_field {
    grid-column: span 5;
}

.woocommerce-checkout #billing_email_field {
    grid-column: span 7;
}

/* ── Un'altezza sola ──────────────────────────────────────────
   52 px per tutto quello che si compila: campi di testo, menu a tendina
   nativi e select2. */
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
    height: 52px !important;
    min-height: 52px;
    padding: 0 14px !important;
    border: 1px solid rgba(128, 118, 96, .32) !important;
    border-radius: 10px !important;
    background-color: #fff;
    font-size: 15px;
    line-height: 50px;
    color: var(--usm-text, #1b1c19);
    box-shadow: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.woocommerce-checkout .form-row textarea {
    min-height: 104px;
    padding: 14px !important;
    border: 1px solid rgba(128, 118, 96, .32) !important;
    border-radius: 10px !important;
    font-size: 15px;
    line-height: 1.6;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

/* select2 allinea il testo e la freccia con le proprie regole interne. */
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
    line-height: 50px;
    color: var(--usm-text, #1b1c19);
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
    height: 50px;
    right: 10px;
}

/* Il <select> nativo del Paese non aveva freccia e restava 14 px piu' basso
   di ogni altro campo. */
.woocommerce-checkout .form-row select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23807660' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

/* ── Messa a fuoco ────────────────────────────────────────────
   Serve vedere dove si sta scrivendo: il bordo grigio non cambiava. */
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
    border-color: var(--usm-gold, #EBBD17) !important;
    box-shadow: 0 0 0 3px rgba(235, 189, 23, .22);
    outline: none;
}

/* Campo obbligatorio lasciato vuoto. */
.woocommerce-checkout .form-row.woocommerce-invalid input,
.woocommerce-checkout .form-row.woocommerce-invalid select {
    border-color: var(--usm-error, #ba1a1a) !important;
}

/* ── Etichette ────────────────────────────────────────────────*/
.woocommerce-checkout .form-row > label {
    display: block;
    margin-bottom: 7px;
    font-family: var(--usm-font-label, 'Work Sans', sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--usm-dark, #151616);
}

.woocommerce-checkout .form-row > label .optional {
    font-weight: 400;
    color: var(--usm-olive, #79806e);
}

/* ── Caselle di spunta ────────────────────────────────────────
   Erano quadratini di sistema da 18 px, uno diverso per browser, appoggiati
   accanto al testo senza allineamento verticale. Qui sono un controllo solo,
   uguale ovunque compaia: fattura, account, indirizzo diverso, privacy,
   termini, consensi. */
.woocommerce-checkout input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    position: relative;
    width: 20px !important;
    height: 20px !important;
    margin: 0;
    padding: 0;
    border: 1.5px solid rgba(128, 118, 96, .55);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.woocommerce-checkout input[type="checkbox"]:hover {
    border-color: var(--usm-gold, #EBBD17);
}

.woocommerce-checkout input[type="checkbox"]:checked {
    background: var(--usm-green, #213e25);
    border-color: var(--usm-green, #213e25);
}

/* La spunta la disegna gia' il tema con la propria icona (::before, font
   klbtheme). Disegnarne una seconda qui le sovrapponeva - e il tema ne
   forzava pure il colore in oro invece che in bianco: due segni storti uno
   sull'altro. Qui si stila solo la casella e si lascia a lui il segno. */
.woocommerce-checkout input[type="checkbox"]::before {
    color: #fff;
}

.woocommerce-checkout input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--usm-gold, #EBBD17);
    outline-offset: 2px;
}

/* Testo e casella sulla stessa linea, con la casella che non si schiaccia
   quando il testo va a capo. */
.woocommerce-checkout .form-row label.checkbox,
.woocommerce-checkout .form-row.checkbox label,
.woocommerce-checkout label.woocommerce-form__label-for-checkbox,
.woocommerce-checkout #ship-to-different-address label,
.woocommerce-checkout .usm-consensi-modulo label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    cursor: pointer;
}

.woocommerce-checkout .form-row label.checkbox > span,
.woocommerce-checkout label.woocommerce-form__label-for-checkbox > span {
    flex: 1 1 auto;
}

/* La casella e' alta 20 px e la riga di testo 20.3: senza questo scarto
   di due pixel la spunta risulta appena piu' alta della parola. */
.woocommerce-checkout .form-row label.checkbox input[type="checkbox"],
.woocommerce-checkout label.woocommerce-form__label-for-checkbox input[type="checkbox"],
.woocommerce-checkout #ship-to-different-address input[type="checkbox"],
.woocommerce-checkout .usm-consensi-modulo input[type="checkbox"] {
    margin-top: 1px;
}

/* ── Schermi stretti ──────────────────────────────────────────
   Nome e cognome affiancati su 390 px diventano due campi da 170: si
   compilano male. Restano affiancati solo C.A.P. e Provincia, che sono
   corti per natura. */
@media (max-width: 767.98px) {
    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
    .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
        column-gap: 12px;
        row-gap: 14px;
    }

    .woocommerce-checkout #billing_first_name_field,
    .woocommerce-checkout #billing_last_name_field,
    .woocommerce-checkout #shipping_first_name_field,
    .woocommerce-checkout #shipping_last_name_field,
    .woocommerce-checkout #billing_city_field,
    .woocommerce-checkout #shipping_city_field,
    .woocommerce-checkout #billing_phone_field,
    .woocommerce-checkout #shipping_phone_field,
    .woocommerce-checkout #billing_email_field {
        grid-column: span 12;
    }

    .woocommerce-checkout #billing_postcode_field,
    .woocommerce-checkout #shipping_postcode_field {
        grid-column: span 5;
    }

    .woocommerce-checkout #billing_state_field,
    .woocommerce-checkout #shipping_state_field {
        grid-column: span 7;
    }

    /* 28 px di padding su una card larga 358 lasciano 302 px al campo. */
    .woocommerce-checkout .woocommerce-billing-fields,
    .woocommerce-checkout .woocommerce-shipping-fields,
    .woocommerce-checkout .woocommerce-additional-fields,
    .woocommerce-checkout .woocommerce-account-fields {
        padding: 18px 16px;
    }
}

/* Il select2 della Provincia e' inline-block dentro il suo wrapper: la riga
   di testo lo spingeva 2 px piu' in basso di Citta' e C.A.P., che stanno
   sulla stessa riga. A blocco il problema non si pone. */
.woocommerce-checkout .form-row .select2-container {
    display: block;
    margin: 0;
    vertical-align: top;
}

.woocommerce-checkout .form-row .woocommerce-input-wrapper {
    display: block;
    line-height: 0;
}

/* -- Allineamento fine della riga ------------------------------
   L'asterisco di "Provincia" e' uno <span> che sporge di due pixel e alzava
   la sua etichetta a 22 px contro i 20 delle vicine: il menu a tendina
   partiva piu' in basso di Citta' e C.A.P., che stanno sulla stessa riga.
   Invece di inseguire l'altezza delle etichette - che cambia col testo e
   con la lingua - i campi si allineano dal basso: qualunque etichetta ci
   sia sopra, la riga dei controlli resta dritta.
   Al select2 serve anche l'altezza esplicita: il suo contenitore restava a
   48 px mentre la parte visibile ne misura 52, e sporgeva sotto. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.woocommerce-checkout .form-row .select2-container {
    height: 52px;
}

/* -- Spaziatura tra i blocchi ----------------------------------
   I quattro riquadri della colonna sinistra erano separati da 20, 24 e 30 px
   - tre distanze per lo stesso stacco, piu' un margine superiore di 30 px
   sull'ultimo che si sommava al margine inferiore del precedente. Con
   riquadri identici, distanze diverse si notano.
   Anche il padding interno differiva: 28 px su tre e 20 px sul quarto. */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-account-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
    padding: 28px;
    /* Il tema mette 30px di margine superiore sul blocco delle note, che
       collassando col margine inferiore del blocco precedente vinceva sui
       20px degli altri stacchi. */
    margin-top: 0 !important;
    margin-bottom: 20px;
}

/* Le due colonne si toccavano: il distacco era solo il padding destro del
   modulo. Su schermo largo servono aria vera tra i dati e il riepilogo. */
@media (min-width: 992px) {
    .woocommerce-checkout #customer_details {
        padding-right: 32px;
    }
}

/* Su schermo stretto il padding torna a 18/16: 28 px per lato su una card
   larga 358 lascerebbero 302 px al campo. */
@media (max-width: 767.98px) {
    .woocommerce-checkout .woocommerce-billing-fields,
    .woocommerce-checkout .woocommerce-account-fields,
    .woocommerce-checkout .woocommerce-shipping-fields,
    .woocommerce-checkout .woocommerce-additional-fields {
        padding: 18px 16px;
        margin-bottom: 16px;
    }
}

/* ── Metodi di pagamento: larghezza piena ─────────────────────
   Il modulo della carta sta in fondo a una catena di contenitori che
   sommano i propri margini interni: 24 px del riepilogo, 16 del riquadro
   del metodo e altri 16 del box del modulo, per riga. Su una colonna di
   544 px ne restavano 426 al modulo di Stripe, che risultava rientrato
   rispetto a tutto il resto della colonna.
   Il bordo del riquadro basta a delimitare il metodo: il box interno non
   ha bisogno di rientrare ancora. */
.woocommerce-checkout ul.wc_payment_methods .payment_box {
    padding-left: 0;
    padding-right: 0;
}

.woocommerce-checkout ul.wc_payment_methods .payment_box .wc-stripe-upe-element,
.woocommerce-checkout ul.wc_payment_methods .payment_box .StripeElement,
.woocommerce-checkout ul.wc_payment_methods .payment_box iframe {
    width: 100% !important;
    max-width: none !important;
}

/* Il riquadro informativo della modalita' di prova aveva il suo rientro:
   senza, andrebbe a filo del bordo. */
.woocommerce-checkout ul.wc_payment_methods .payment_box > p {
    padding-left: 16px;
    padding-right: 16px;
}