/**
 * Edit SDI/PEC
 * Asterisco sulle etichette dei campi obbligatori (checkout, indirizzi, registrazione).
 * Il tema mette la classe "required" sulle etichette dei campi obbligatori;
 * il modulo la aggiunge e la toglie quando cambia la tipologia cliente.
 */
body#checkout label.required::after,
body#address label.required::after,
body#registration label.required::after,
body#authentication label.required::after {
  content: " *";
  color: #c62828;
  font-weight: 700;
}

/* =====================================================================
 * Stile unico per registrazione, login, indirizzi e passaggi del checkout
 * (etichette sopra i campi, 2 colonne, checkbox/radio grandi, niente commenti).
 * Valido per #customer-form, #login-form, .js-address-form e gli step del checkout.
 * ===================================================================== */
:is(#customer-form, #login-form, .js-address-form, #checkout-addresses-step, #checkout-delivery-step, #checkout-payment-step) {
  --hb-accent: #69c230;
  --hb-border: #d3d8de;
  --hb-radius: 8px;
  --hb-box: 1.65rem;
  --hb-radio: 1.5rem;
}

/* ---------- Campi: etichetta sopra, input a tutta larghezza ---------- */
:is(#customer-form, #login-form, .js-address-form) .form-group.row {
  display: block;
  margin: 0 0 1rem;
}
:is(#customer-form, #login-form, .js-address-form) .form-group.row > [class*="col-"] {
  float: none;
  flex: none;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  padding: 0;
}
:is(#customer-form, #login-form, .js-address-form) .form-group.row > label.form-control-label {
  display: block;
  margin: 0 0 .35rem;
  padding: 0;
  font-size: .875rem;
  font-weight: 600;
  text-align: left;
}
/* commenti sotto i campi (es. "Sono consentite solo lettere...") nascosti */
:is(#customer-form, #login-form, .js-address-form) .form-control-comment {
  display: none !important;
}

/* ---------- Griglia a 2 colonne (registrazione e indirizzi) ---------- */
#customer-form > div,
#customer-form > section,
#customer-form .form-fields,
.js-address-form .form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1rem;
  row-gap: 0;
}
/* righe a tutta larghezza: checkbox, radio, indirizzo, dati fiscali, tipologia */
:is(#customer-form, #login-form, .js-address-form) .form-group.row:has(input[type="checkbox"]),
:is(#customer-form, #login-form, .js-address-form) .form-group.row:has(input[type="radio"]),
:is(#customer-form, #login-form, .js-address-form) .form-group.row:has(select[name="customer_type"]),
:is(#customer-form, #login-form, .js-address-form) .form-group.row:has([name="company"]),
:is(#customer-form, #login-form, .js-address-form) .form-group.row:has([name="vat_number"]),
:is(#customer-form, #login-form, .js-address-form) .form-group.row:has([name="dni"]),
:is(#customer-form, #login-form, .js-address-form) .form-group.row:has([name="address1"]),
:is(#customer-form, #login-form, .js-address-form) .form-group.row:has([name="address2"]),
:is(#customer-form, #login-form, .js-address-form) .form-group.row:has([name="other"]) {
  grid-column: 1 / -1;
}
:is(#customer-form, #login-form, .js-address-form) .form-group.row:has(input[type="checkbox"]) {
  margin-bottom: .75rem;
}
/* nelle checkbox la colonna dell'etichetta è vuota: si nasconde */
:is(#customer-form, #login-form, .js-address-form) .form-group.row:has(input[type="checkbox"]) > label.form-control-label {
  display: none;
}

/* ---------- Input e select ---------- */
:is(#customer-form, #login-form, .js-address-form) .form-control {
  height: 2.9rem;
  padding: .55rem .9rem;
  border: 1px solid var(--hb-border);
  border-radius: var(--hb-radius);
  background-color: #fff;
  box-shadow: none;
  font-size: .95rem;
  transition: border-color .15s, box-shadow .15s;
}
:is(#customer-form, #login-form, .js-address-form) textarea.form-control {
  height: auto;
}
:is(#customer-form, #login-form, .js-address-form) .form-control:focus {
  border-color: var(--hb-accent);
  box-shadow: 0 0 0 3px rgba(105, 194, 48, .2);
  outline: 0;
}

/* password + pulsante VEDI sulla stessa riga */
:is(#customer-form, #login-form, .js-address-form) .input-group {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
}
:is(#customer-form, #login-form, .js-address-form) .input-group .form-control {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: var(--hb-radius) 0 0 var(--hb-radius);
}
:is(#customer-form, #login-form, .js-address-form) .input-group-btn {
  display: flex;
  width: auto;
}
:is(#customer-form, #login-form, .js-address-form) .input-group-btn .btn {
  height: 2.9rem;
  padding: 0 1rem;
  border-radius: 0 var(--hb-radius) var(--hb-radius) 0;
}
:is(#customer-form, #login-form, .js-address-form) .form-footer {
  margin-top: .5rem;
}

/* ---------- Checkbox grandi (markup del tema) ---------- */
:is(#customer-form, #login-form, .js-address-form, #checkout-addresses-step, #checkout-delivery-step, #checkout-payment-step) .custom-checkbox {
  display: block;
  position: relative;
}
:is(#customer-form, #login-form, .js-address-form, #checkout-addresses-step, #checkout-delivery-step, #checkout-payment-step) .custom-checkbox label {
  position: relative;
  display: block;
  margin: 0;
  padding-left: calc(var(--hb-box) + .7rem);
  font-size: .9rem;
  line-height: 1.8;
  text-align: left;
  cursor: pointer;
}
:is(#customer-form, #login-form, .js-address-form, #checkout-addresses-step, #checkout-delivery-step, #checkout-payment-step) .custom-checkbox input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: var(--hb-box);
  height: var(--hb-box);
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
:is(#customer-form, #login-form, .js-address-form, #checkout-addresses-step, #checkout-delivery-step, #checkout-payment-step) .custom-checkbox input[type="checkbox"] + span {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--hb-box);
  height: var(--hb-box);
  margin: 0;
  border: 2px solid #8a929c;
  border-radius: 6px;
  background: #fff;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
/* la spunta è disegnata qui: l'icona del tema viene nascosta */
:is(#customer-form, #login-form, .js-address-form, #checkout-addresses-step, #checkout-delivery-step, #checkout-payment-step) .custom-checkbox .checkbox-checked {
  display: none !important;
}
:is(#customer-form, #login-form, .js-address-form, #checkout-addresses-step, #checkout-delivery-step, #checkout-payment-step) .custom-checkbox input[type="checkbox"]:checked + span {
  background: var(--hb-accent);
  border-color: var(--hb-accent);
}
:is(#customer-form, #login-form, .js-address-form, #checkout-addresses-step, #checkout-delivery-step, #checkout-payment-step) .custom-checkbox input[type="checkbox"]:checked + span::after {
  content: "";
  width: .45rem;
  height: .85rem;
  margin-top: -.15rem;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
:is(#customer-form, #login-form, .js-address-form, #checkout-addresses-step, #checkout-delivery-step, #checkout-payment-step) .custom-checkbox input[type="checkbox"]:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(105, 194, 48, .3);
}
/* asterisco rosso sulle checkbox obbligatorie (privacy, condizioni) */
:is(#customer-form, #login-form, .js-address-form, #checkout-addresses-step, #checkout-delivery-step, #checkout-payment-step) .custom-checkbox:has(input[required]) > label::before {
  content: "* ";
  color: #c62828;
  font-weight: 700;
}
:is(#customer-form, #login-form, .js-address-form, #checkout-addresses-step, #checkout-delivery-step, #checkout-payment-step) .custom-checkbox label em {
  display: block;
  margin-top: .2rem;
  font-size: .8rem;
  line-height: 1.45;
}

/* ---------- Checkbox semplici (es. "Usa questo indirizzo anche per la consegna") ---------- */
:is(#customer-form, #login-form, .js-address-form, #checkout-addresses-step, #checkout-delivery-step, #checkout-payment-step) input[type="checkbox"]:not(.custom-checkbox input) {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: var(--hb-box);
  height: var(--hb-box);
  margin: 0 .6rem 0 0;
  vertical-align: middle;
  border: 2px solid #8a929c;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
:is(#customer-form, #login-form, .js-address-form, #checkout-addresses-step, #checkout-delivery-step, #checkout-payment-step) input[type="checkbox"]:not(.custom-checkbox input):checked {
  background: var(--hb-accent);
  border-color: var(--hb-accent);
}
:is(#customer-form, #login-form, .js-address-form, #checkout-addresses-step, #checkout-delivery-step, #checkout-payment-step) input[type="checkbox"]:not(.custom-checkbox input):checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: .45rem;
  height: .85rem;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
:is(#customer-form, #login-form, .js-address-form, #checkout-addresses-step, #checkout-delivery-step, #checkout-payment-step) .hb-use-same-address label {
  display: inline;
  margin: 0;
  font-size: .9rem;
  vertical-align: middle;
}

/* ---------- Radio grandi (spedizione, pagamento, indirizzi, tipo) ---------- */
:is(#customer-form, #login-form, .js-address-form, #checkout-addresses-step, #checkout-delivery-step, #checkout-payment-step) .custom-radio {
  position: relative;
  display: inline-flex;
  float: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: none;
  width: var(--hb-radio);
  height: var(--hb-radio);
  margin: 0;
  vertical-align: middle;
  border: 2px solid #8a929c;
  border-radius: 50%;
  background: #fff;
  transition: border-color .15s;
}
:is(#customer-form, #login-form, .js-address-form, #checkout-addresses-step, #checkout-delivery-step, #checkout-payment-step) .custom-radio input[type="radio"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
:is(#customer-form, #login-form, .js-address-form, #checkout-addresses-step, #checkout-delivery-step, #checkout-payment-step) .custom-radio input[type="radio"] + span {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: block;
  width: .7rem !important;
  height: .7rem !important;
  margin: 0 !important;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  transition: background .15s;
}
:is(#customer-form, #login-form, .js-address-form, #checkout-addresses-step, #checkout-delivery-step, #checkout-payment-step) .custom-radio:has(input:checked) {
  border-color: var(--hb-accent);
}
:is(#customer-form, #login-form, .js-address-form, #checkout-addresses-step, #checkout-delivery-step, #checkout-payment-step) .custom-radio input[type="radio"]:checked + span {
  background: var(--hb-accent);
}

/* ---------- Passaggi del checkout: spedizione, pagamento, indirizzi salvati ---------- */
#checkout-delivery-step .delivery-option,
#checkout-addresses-step .address-item {
  margin: 0 0 .6rem;
  padding: .75rem .9rem;
  border: 1px solid var(--hb-border);
  border-radius: var(--hb-radius);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
#checkout-delivery-step .delivery-option {
  display: flex;
  align-items: center;
  margin-left: 0;
  margin-right: 0;
}
#checkout-payment-step .payment-option {
  margin: 0 0 .4rem;
  padding: .5rem 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
#checkout-payment-step .payment-option label {
  margin: 0 0 0 .6rem;
  font-weight: 600;
  vertical-align: middle;
}
#checkout-delivery-step .delivery-option:has(input:checked),
#checkout-addresses-step .address-item.selected,
#checkout-addresses-step .address-item:has(input:checked) {
  border-color: var(--hb-accent);
  box-shadow: 0 0 0 1px var(--hb-accent);
}

/* ---------- Condizioni di vendita (checkbox + testo allineati) ---------- */
#conditions-to-approve li {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 .5rem;
  padding: 0;
  list-style: none;
}
#conditions-to-approve li > div {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}
#conditions-to-approve li .custom-checkbox {
  width: var(--hb-box);
  height: var(--hb-box);
}
#conditions-to-approve .condition-label {
  flex: 1 1 auto;
}
#conditions-to-approve .condition-label label,
#conditions-to-approve li label {
  display: block;
  margin: 0;
  padding: 0;
  font-size: .9rem;
  line-height: 1.4;
}

body#checkout .condition-label {
  margin-left: 0px;
	margin-top: 0px;
}

body#checkout section.checkout-step .forgot-password {
  margin-left: auto;
	text-align: center;
}

.password-requirements {
	border-radius: 10px;
  background: #e3f1cc;
  padding: 10px;
}

.password-requirements p {
	font-size: 0.8em;
}

.progress-container .progress {
	height:0rem;
}

/* ---------- Pulsanti coerenti ---------- */
body#checkout .btn.btn-primary,
body#authentication .btn.btn-primary,
body#registration .btn.btn-primary,
body#address .btn.btn-primary {
  border-radius: var(--hb-radius);
  font-weight: 600;
}

/* ---------- Mobile: una colonna ---------- */
@media (max-width: 575.98px) {
  #customer-form > div,
  #customer-form > section,
  #customer-form .form-fields,
  .js-address-form .form-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}



/* =====================================================================
 * Pagina di conferma ordine (thank you page) e dati del bonifico
 * ===================================================================== */
body#order-confirmation {
  --hb-accent: #69c230;
  --hb-line: #e8ebef;
}
body#order-confirmation .card {
  border: 1px solid #e3e6ea;
  border-radius: 12px;
  box-shadow: none;
  overflow: hidden;
}
body#order-confirmation #content-hook_order_confirmation h3,
body#order-confirmation #content-hook_order_confirmation .card-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.3rem;
  line-height: 1.3;
}
body#order-confirmation #content-hook_order_confirmation .done {
  color: var(--hb-accent);
  font-size: 2rem;
}

/* box bonifico */
body#order-confirmation #content-hook_payment_return {
  overflow-wrap: anywhere;
}
body#order-confirmation #content-hook_payment_return .card-block {
  padding: 1.25rem 1.5rem;
}
body#order-confirmation #content-hook_payment_return p {
  margin: 0 0 1rem;
  font-size: .95rem;
  line-height: 1.5;
}

/* elenco dati: etichetta a sinistra, valore a destra, righe pulite */
body#order-confirmation #content-hook_payment_return dl {
  display: grid;
  grid-template-columns: minmax(7rem, 30%) minmax(0, 1fr);
  margin: 0 0 1rem;
  border: 1px solid var(--hb-line);
  border-radius: 10px;
  overflow: hidden;
}
body#order-confirmation #content-hook_payment_return dt,
body#order-confirmation #content-hook_payment_return dd {
  width: auto;
  max-width: none;
  margin: 0;
  padding: .85rem 1rem;
  float: none;
  border-bottom: 1px solid var(--hb-line);
  background: transparent;
  font-size: .95rem;
  line-height: 1.45;
  text-align: left;
}
body#order-confirmation #content-hook_payment_return dt {
  background: #f7f8fa;
  color: #6b7280;
  font-weight: 500;
}
body#order-confirmation #content-hook_payment_return dd {
  min-width: 0;
  color: #1f2933;
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: break-word;
}
body#order-confirmation #content-hook_payment_return dt:last-of-type,
body#order-confirmation #content-hook_payment_return dd:last-of-type {
  border-bottom: 0;
}
/* importo in evidenza */
body#order-confirmation #content-hook_payment_return dd:first-of-type {
  font-size: 1.25rem;
  color: #2f7d12;
}
/* IBAN e codici: mai fuori schermo */
body#order-confirmation #content-hook_payment_return dd * {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* riferimento ordine + "il tuo ordine verrà inviato..." nello stesso riquadro verde */
body#order-confirmation #content-hook_payment_return dl + p {
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border-left: 4px solid var(--hb-accent);
  border-radius: 8px;
  background: rgba(105, 194, 48, .12);
  font-weight: 500;
}
body#order-confirmation #content-hook_payment_return dl + p:has(+ strong) {
  margin: 0;
  padding-bottom: .4rem;
  border-radius: 8px 8px 0 0;
}
body#order-confirmation #content-hook_payment_return dl + p + strong {
  display: block;
  margin: 0 0 1rem;
  padding: 0 1rem .85rem;
  border-left: 4px solid var(--hb-accent);
  border-radius: 0 0 8px 8px;
  background: rgba(105, 194, 48, .12);
  font-size: .95rem;
  line-height: 1.5;
}
/* box "Se hai domande... contatta il nostro team" nascosto */
body#order-confirmation #content-hook_payment_return dl + p + strong + p {
  display: none;
}

@media (max-width: 575.98px) {
  body#order-confirmation #content-hook_payment_return .card-block {
    padding: 1rem;
  }
  body#order-confirmation #content-hook_payment_return dl {
    grid-template-columns: minmax(0, 1fr);
  }
  body#order-confirmation #content-hook_payment_return dt {
    padding-bottom: .2rem;
    border-bottom: 0;
    font-size: .8rem;
  }
  body#order-confirmation #content-hook_payment_return dd {
    padding-top: .2rem;
  }
}

/* =====================================================================
 * Riepilogo ordine: articoli, totali, dettagli (desktop + mobile)
 * ===================================================================== */
body#order-confirmation #order-items,
body#order-confirmation #order-details {
  overflow-wrap: anywhere;
}

/* intestazione: titolo + etichette colonne (le etichette ci sono solo su desktop) */
body#order-confirmation #order-items > .row {
  align-items: center;
  margin-bottom: .25rem;
  border-bottom: 1px solid var(--hb-line);
}
body#order-confirmation #order-items > .row > h3 {
  margin: 0;
  padding-top: .5rem;
  padding-bottom: .7rem;
  border: 0;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #6b7280;
}
body#order-confirmation #order-items > .row > h3:first-child {
  font-size: 1.1rem;
  letter-spacing: 0;
  text-transform: none;
  color: #1f2933;
}
body#order-confirmation #order-details h3 {
  margin: 0 0 .5rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--hb-line);
  font-size: 1.1rem;
  line-height: 1.3;
}

/* righe prodotto */
body#order-confirmation .order-confirmation-table {
  border: 0;
  padding: 0;
}
body#order-confirmation .order-confirmation-table hr {
  display: none;
}
body#order-confirmation .order-confirmation-table .order-line {
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--hb-line);
}
body#order-confirmation .order-confirmation-table .order-line .image img {
  display: block;
  max-width: 100%;
  height: auto;
}
body#order-confirmation .order-confirmation-table .order-line .details {
  color: #1f2933;
  font-weight: 600;
  line-height: 1.4;
}

/* totali */
body#order-confirmation .order-confirmation-table table {
  width: 100%;
  margin-top: .75rem;
}
body#order-confirmation .order-confirmation-table table td {
  padding: .4rem 0;
  border: 0;
}
body#order-confirmation .order-confirmation-table table td:last-child {
  text-align: right;
  font-weight: 600;
}
body#order-confirmation .order-confirmation-table table tr.total-value td {
  padding: .7rem .8rem;
  background: rgba(105, 194, 48, .12);
  font-weight: 700;
}
body#order-confirmation .order-confirmation-table table tr.total-value td:first-child {
  border-radius: 8px 0 0 8px;
}
body#order-confirmation .order-confirmation-table table tr.total-value td:last-child {
  border-radius: 0 8px 8px 0;
}

/* dettagli ordine */
body#order-confirmation #order-details ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
body#order-confirmation #order-details li {
  padding: .6rem 0;
  border-bottom: 1px solid var(--hb-line);
  line-height: 1.45;
}
body#order-confirmation #order-details li:last-child {
  border-bottom: 0;
}

/* ---------- Mobile: articolo in verticale, etichette sotto forma di piccole didascalie ---------- */
@media (max-width: 767.98px) {
  /* le etichette di colonna (solo desktop) si nascondono */
  body#order-confirmation #order-items ._desktop-title {
    display: none;
  }
  body#order-confirmation #order-items > .row > h3:first-child {
    flex: 0 0 100%;
    max-width: 100%;
  }
  body#order-confirmation .order-confirmation-table .order-line {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin: 0;
  }
  body#order-confirmation .order-confirmation-table .order-line > [class*="col-"] {
    float: none;
    flex: none;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  body#order-confirmation .order-confirmation-table .order-line > [class*="col-"]:first-child {
    width: 72px;
  }
  body#order-confirmation .order-confirmation-table .order-line .details {
    flex: 1 1 0;
    min-width: 0;
  }
  body#order-confirmation .order-confirmation-table .order-line .qty {
    flex: 1 1 100%;
    width: 100%;
  }
  body#order-confirmation .order-confirmation-table .order-line .qty > .row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0;
    padding: .65rem .85rem;
    border-radius: 8px;
    background: #f7f8fa;
  }
  body#order-confirmation .order-confirmation-table .order-line .qty > .row > [class*="col-"] {
    float: none;
    flex: 1 1 0;
    width: auto;
    max-width: none;
    padding: 0;
    font-size: .95rem;
    font-weight: 600;
    color: #1f2933;
  }
  body#order-confirmation .order-confirmation-table .order-line .qty > .row > [class*="col-"]::before {
    display: block;
    margin-bottom: .1rem;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
  }
  body#order-confirmation .order-confirmation-table .order-line .qty > .row > :nth-child(1) {
    text-align: left;
  }
  body#order-confirmation .order-confirmation-table .order-line .qty > .row > :nth-child(1)::before {
    content: "Prezzo";
  }
  body#order-confirmation .order-confirmation-table .order-line .qty > .row > :nth-child(2) {
    text-align: center;
  }
  body#order-confirmation .order-confirmation-table .order-line .qty > .row > :nth-child(2)::before {
    content: "Quantità";
  }
  body#order-confirmation .order-confirmation-table .order-line .qty > .row > :nth-child(3) {
    text-align: right;
    font-weight: 700;
  }
  body#order-confirmation .order-confirmation-table .order-line .qty > .row > :nth-child(3)::before {
    content: "Totale";
  }
}