/* ============================================================
   PMC Checkout — pagina Checkout (WooCommerce Blocks checkout)
   Design: Figma "Marketplace | New UI" node 767-28027
   Scope: body.woocommerce-checkout (auto-load ricorsivo globale,
   attivo solo sulla pagina checkout via classe WooCommerce).
   Approccio: restyle del Blocks checkout mantenendo layout/behavior
   nativi (2 colonne: campi a sx, "Your order" + totali a dx;
   pagamento + Place Order restano nella colonna sx del blocco).
   ============================================================ */

:root {
  --pmc-co-dark: #080707;      /* Text/Dark Chorcoal */
  --pmc-co-charcoal: #3f3a35;  /* Text/Chorcoal */
  --pmc-co-light: #766f67;     /* Text/Light Chorcoal */
  --pmc-co-red: #d70000;       /* Red info */
  --pmc-co-cream1: #fff3df;    /* card gradient start */
  --pmc-co-cream2: #e9d8b8;    /* card gradient end */
  --pmc-co-panel: rgba(255, 255, 255, 0.5);
  --pmc-co-navy1: #41476f;
  --pmc-co-navy2: #262a42;
  --pmc-co-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --pmc-co-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* --- Sfondo pagina crema (contenuto tra header e footer) --------- */
body.woocommerce-checkout .l-main {
  background: #fbf3e3;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout {
  font-family: var(--pmc-co-sans);
  color: var(--pmc-co-dark);
  padding: 24px 0 56px;
}

/* --- Layout 2 colonne (Figma 618 / 618, gap 48) ----------------- */
body.woocommerce-checkout .wc-block-components-sidebar-layout {
  gap: 48px;
  align-items: flex-start;
}
body.woocommerce-checkout .wc-block-checkout__main {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
}
body.woocommerce-checkout .wc-block-checkout__sidebar {
  flex: 0 0 46%;
  max-width: 620px;
}

/* ================================================================
   TITOLI DI SEZIONE  (Lora SemiBold Italic 24 — Figma H4)
   "Contact information" / "Billing address" / "Payment options"
   ================================================================ */
body.woocommerce-checkout .wc-block-components-checkout-step__title {
  font-family: var(--pmc-co-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--pmc-co-dark);
}
/* numerino step nascosto (Figma non lo prevede) */
body.woocommerce-checkout .wc-block-components-checkout-step__title::before {
  display: none !important;
}
body.woocommerce-checkout .wc-block-components-checkout-step {
  border: 0;
  padding-left: 0;
}
body.woocommerce-checkout .wc-block-components-checkout-step__heading {
  margin-bottom: 8px;
}

/* ================================================================
   CAMPI / INPUT  (Figma Field: border 1px #766F67, radius 12,
   pad 10/12, testo 16 #080707; focus border 2px #080707;
   label Helvetica 14 #3F3A35)
   ================================================================ */
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-text-input .components-form-token-field__input,
body.woocommerce-checkout .wc-block-components-combobox input,
body.woocommerce-checkout .wc-block-components-address-form input,
body.woocommerce-checkout .wc-block-components-select select,
body.woocommerce-checkout .wc-block-components-textarea {
  border: 1px solid var(--pmc-co-light) !important;
  border-radius: 12px !important;
  background: #fff !important;
  padding: 22px 12px 8px !important; /* spazio in alto per label flottante */
  font-family: var(--pmc-co-sans) !important;
  font-size: 16px !important;
  color: var(--pmc-co-dark) !important;
  box-shadow: none !important;
  min-height: 56px;
}
body.woocommerce-checkout .wc-block-components-textarea {
  min-height: 96px;
  padding-top: 26px !important;
}
/* focus = bordo scuro 2px */
body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-combobox.is-active .components-form-token-field__input,
body.woocommerce-checkout .wc-block-components-address-form input:focus,
body.woocommerce-checkout .wc-block-components-select select:focus,
body.woocommerce-checkout .wc-block-components-textarea:focus {
  border: 2px solid var(--pmc-co-dark) !important;
  outline: none !important;
}
/* label flottante */
body.woocommerce-checkout .wc-block-components-text-input label,
body.woocommerce-checkout .wc-block-components-combobox label,
body.woocommerce-checkout .wc-block-components-select label {
  font-family: var(--pmc-co-sans) !important;
  font-size: 16px;
  color: var(--pmc-co-light);
  left: 12px;
}
body.woocommerce-checkout .wc-block-components-text-input.is-active label,
body.woocommerce-checkout .wc-block-components-text-input input:focus + label,
body.woocommerce-checkout .wc-block-components-combobox.is-active label,
body.woocommerce-checkout .wc-block-components-select.is-active label {
  font-size: 12px !important;
  color: var(--pmc-co-charcoal) !important;
  transform: translateY(-9px) !important;
}
/* asterisco richiesto */
body.woocommerce-checkout .wc-block-components-text-input label .required,
body.woocommerce-checkout label .required {
  color: var(--pmc-co-red);
}
/* spaziatura tra i campi (Figma gap 20) */
body.woocommerce-checkout .wc-block-components-address-form > .wc-block-components-text-input,
body.woocommerce-checkout .wc-block-components-address-form > .wc-block-components-combobox,
body.woocommerce-checkout .wc-block-components-address-form > .wc-block-components-select,
body.woocommerce-checkout .wc-block-components-address-form__address_1,
body.woocommerce-checkout .wc-block-components-address-form__city,
body.woocommerce-checkout fieldset .wc-block-components-text-input {
  margin-top: 16px;
}
/* freccia select */
body.woocommerce-checkout .wc-block-components-combobox .components-custom-select-control__button,
body.woocommerce-checkout .wc-block-components-country-input,
body.woocommerce-checkout .wc-block-components-state-input {
  position: relative;
}

/* "+ Add apartment, suite, etc." link */
body.woocommerce-checkout .wc-block-components-address-form__address_2-toggle,
body.woocommerce-checkout .wc-block-components-address-address-wrapper button.wc-block-components-address-form__address_2-toggle {
  font-family: var(--pmc-co-sans);
  color: var(--pmc-co-charcoal);
  font-size: 14px;
}

/* ================================================================
   SIDEBAR = card "Your order" (Figma gradiente 134.7° crema)
   ================================================================ */
body.woocommerce-checkout .wc-block-checkout__sidebar {
  background: linear-gradient(134.74deg, var(--pmc-co-cream1) 0%, var(--pmc-co-cream2) 70.6%);
  border-radius: 20px;
  padding: 24px 32px 32px;
  box-shadow: 0 8px 24px rgba(109, 95, 80, 0.18);
}
/* titolo "Order summary" → "Your order" (Figma) */
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title {
  margin-bottom: 8px;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
  font-size: 0 !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text::after {
  content: 'Your order';
  font-family: var(--pmc-co-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--pmc-co-dark);
}

/* pannello items (bianco translucido) */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-cart-items-block {
  background: var(--pmc-co-panel);
  border-radius: 16px;
  padding: 16px;
  margin: 0 0 16px;
  border: 0 !important;
}
/* coupon: assente nel Figma checkout → nascosto */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
  display: none !important;
}
/* pannello totali unico: subtotal (top) + total (bottom) in un solo box */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-totals-block {
  background: var(--pmc-co-panel);
  border-radius: 16px 16px 0 0;
  padding: 16px 16px 0;
  margin: 0;
  border: 0 !important;
}
body.woocommerce-checkout .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
  background: var(--pmc-co-panel);
  border-radius: 0 0 16px 16px;
  padding: 0 16px 16px;
  margin: 0;
  border: 0 !important;
}

/* riga prodotto */
body.woocommerce-checkout .wc-block-components-order-summary-item {
  padding: 0;
}
body.woocommerce-checkout .wc-block-components-order-summary-item + .wc-block-components-order-summary-item {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--pmc-co-light);
}
body.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name,
body.woocommerce-checkout .wc-block-components-order-summary-item__description p {
  font-family: var(--pmc-co-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  color: var(--pmc-co-dark);
}
body.woocommerce-checkout .wc-block-components-order-summary-item__total-price {
  font-family: var(--pmc-co-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 16px;
  color: var(--pmc-co-dark);
}
/* prezzo unitario sotto il nome: assente nel Figma (solo "Vendor:") */
body.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices {
  display: none;
}
/* riga vendor Dokan (Helvetica 12: "Vendor:" medium scuro, valore charcoal) */
body.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-metadata,
body.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-details {
  font-family: var(--pmc-co-sans);
  font-size: 12px;
  color: var(--pmc-co-charcoal);
}
/* badge quantità (cerchio scuro come Figma mobile) */
body.woocommerce-checkout .wc-block-components-order-summary-item__quantity {
  background: var(--pmc-co-dark);
  color: #fff;
  border: 0;
}

/* ================================================================
   TOTALI  (Subtotal/Total — Lora italic; Total value 24 bold)
   ================================================================ */
body.woocommerce-checkout .wc-block-components-totals-item__label,
body.woocommerce-checkout .wc-block-components-totals-item__value {
  font-family: var(--pmc-co-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 16px;
  color: var(--pmc-co-dark);
}
body.woocommerce-checkout .wc-block-components-totals-footer-item {
  border-top: 1px solid var(--pmc-co-charcoal);
  padding-top: 16px;
  margin-top: 8px;
}
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-weight: 700;
  font-size: 24px;
}
body.woocommerce-checkout .wc-block-components-totals-footer-item__description {
  display: none;
}

/* coupon: reso discreto (non nel Figma checkout) */
body.woocommerce-checkout .wc-block-components-totals-coupon {
  background: transparent;
}
body.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button {
  font-family: var(--pmc-co-sans);
  color: var(--pmc-co-charcoal);
}

/* ================================================================
   PAGAMENTO (colonna sx nel Blocks). Heading Lora italic 18.
   ================================================================ */
body.woocommerce-checkout .wc-block-checkout__payment-method .wc-block-components-checkout-step__title {
  font-size: 18px;
}
body.woocommerce-checkout .wc-block-components-radio-control__option {
  font-family: var(--pmc-co-sans);
}
/* notice "no payment methods" ammorbidita (resta funzionale) */
body.woocommerce-checkout .wc-block-components-notice-banner.is-error {
  border-radius: 12px;
}

/* order note checkbox + textarea */
body.woocommerce-checkout .wc-block-checkout__add-note label,
body.woocommerce-checkout .wc-block-components-checkbox__label {
  font-family: var(--pmc-co-sans);
  font-size: 14px;
  color: var(--pmc-co-dark);
}

/* terms */
body.woocommerce-checkout .wc-block-checkout__terms {
  font-family: var(--pmc-co-sans);
  font-size: 14px;
  color: var(--pmc-co-charcoal);
}

/* ================================================================
   BOTTONE "Place order" (Figma: gradiente navy, pill, bordo bianco)
   ================================================================ */
body.woocommerce-checkout .wc-block-checkout__actions_row {
  justify-content: stretch;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
  width: 100%;
  background: linear-gradient(108.89deg, var(--pmc-co-navy1) 0%, var(--pmc-co-navy2) 100%) !important;
  border: 1px solid #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.16) !important;
  padding: 14px 24px !important;
  min-height: 52px;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button__text,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
  font-family: var(--pmc-co-sans) !important;
  font-size: 16px;
  font-weight: 400;
  color: #fff !important;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
  filter: brightness(1.08);
}

/* ================================================================
   MOBILE — 1 colonna (adattamento dal desktop; no design mobile
   dedicato del checkout nel Figma).
   ================================================================ */
@media (max-width: 782px) {
  body.woocommerce-checkout .wp-block-woocommerce-checkout {
    padding: 16px 0 40px;
  }
  body.woocommerce-checkout .wc-block-components-checkout-step__title {
    font-size: 20px;
  }
  /* Il Blocks checkout duplica il riepilogo: sidebar (desktop) +
     copia inline in .wc-block-checkout__main (mobile). Su mobile
     nascondo la sidebar e uso la copia inline, dandole la card crema. */
  body.woocommerce-checkout .wc-block-checkout__sidebar {
    display: none !important;
  }
  body.woocommerce-checkout .wc-block-checkout__main {
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
  }
  body.woocommerce-checkout .wc-block-checkout__main .wp-block-woocommerce-checkout-order-summary-block {
    background: linear-gradient(134.74deg, var(--pmc-co-cream1) 0%, var(--pmc-co-cream2) 70.6%);
    border-radius: 20px;
    padding: 24px 20px;
    margin-top: 24px;
    box-shadow: 0 8px 24px rgba(109, 95, 80, 0.18);
  }
  /* titolo della copia inline: "Order summary" → "Your order" */
  body.woocommerce-checkout .wc-block-checkout__main .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-step__title {
    font-size: 0 !important;
  }
  body.woocommerce-checkout .wc-block-checkout__main .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-step__title::after {
    content: 'Your order';
    font-family: var(--pmc-co-serif);
    font-style: italic;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.2;
    color: var(--pmc-co-dark);
  }
}