/* ============================================================
   PMC Checkout CLASSIC — shortcode [woocommerce_checkout]
   Design: Figma "Marketplace | New UI" node 767-28027
   Scope: form.woocommerce-checkout (matcha SOLO il checkout
   classico; il Blocks checkout usa form.wc-block-checkout__form
   → nessuna collisione con css/pages/checkout.css).
   Stato: pagina bozza di valutazione (page id 420). Al go-live
   si punta WooCommerce → Checkout page a questa pagina.
   ============================================================ */

:root {
  --pmc-cc-dark: #080707;
  --pmc-cc-charcoal: #3f3a35;
  --pmc-cc-light: #766f67;
  --pmc-cc-red: #d70000;
  --pmc-cc-cream1: #fff3df;
  --pmc-cc-cream2: #e9d8b8;
  --pmc-cc-panel: rgba(255, 255, 255, 0.5);
  --pmc-cc-navy1: #41476f;
  --pmc-cc-navy2: #262a42;
  --pmc-cc-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --pmc-cc-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* sfondo pagina crema (draft e go-live) */
body:has(form.woocommerce-checkout) .l-main {
  background: #fbf3e3;
}

/* spaziatura verticale: respiro sotto l'header fixed (88px) e sopra il footer.
   La pagina è solo lo shortcode (niente sezione WPBakery) → gestita qui, non dal composer. */
body:has(form.woocommerce-checkout) main.l-main .l-section > .l-section-h {
  padding-top: calc(var(--header-height, 88px) + 48px) !important;
  padding-bottom: 72px;
}

form.woocommerce-checkout {
  font-family: var(--pmc-cc-sans);
  color: var(--pmc-cc-dark);
}

/* --- coupon bar: assente nel Figma → nascosta ------------------ */
body:has(form.woocommerce-checkout) .woocommerce-form-coupon-toggle,
form.woocommerce-checkout .checkout_coupon {
  display: none !important;
}

/* --- campi extra Dokan non nel Figma (VAT/IBAN/Company/Bank) ---- */
/* (restano nel form ma nascosti; ri-attivabili togliendo questa regola) */
form.woocommerce-checkout #billing_dokan_company_id_number_field,
form.woocommerce-checkout #billing_dokan_vat_number_field,
form.woocommerce-checkout #billing_dokan_bank_name_field,
form.woocommerce-checkout #billing_dokan_bank_iban_field {
  display: none !important;
}

/* ================================================================
   LAYOUT 2 colonne via GRID (billing sx / heading+card dx).
   Grid (non float) così #order_review può essere position:sticky
   sotto l'header fixed (88px) senza finirci sotto.
   grid-template-rows: min-content 1fr → riga 1 alta quanto l'heading
   (niente gap tra heading e card).
   ================================================================ */
form.woocommerce-checkout {
  display: grid;
  grid-template-columns: 1fr minmax(0, 46%);
  grid-template-rows: min-content 1fr;
  column-gap: 48px;
  align-items: start;
}
form.woocommerce-checkout #customer_details {
  grid-column: 1;
  grid-row: 1 / 3;
  float: none !important;
  width: auto !important;
  min-width: 0;
}
form.woocommerce-checkout #order_review_heading {
  grid-column: 2;
  grid-row: 1;
  float: none !important;
  width: auto !important;
  margin: 0 0 8px;
  font-family: var(--pmc-cc-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--pmc-cc-dark);
}
form.woocommerce-checkout #order_review {
  grid-column: 2;
  grid-row: 2;
  float: none !important;
  width: auto !important;
  margin: 0;
  align-self: start;
  position: sticky;
  top: calc(var(--header-height, 88px) + 16px);
  z-index: 50;
}

/* dentro customer_details: billing e note impilati a piena larghezza */
form.woocommerce-checkout .col2-set { display: block; width: 100%; }
form.woocommerce-checkout .col2-set .col-1,
form.woocommerce-checkout .col2-set .col-2 {
  float: none !important;
  width: 100% !important;
  padding: 0;
}

/* ================================================================
   TITOLI di sezione (Lora SemiBold Italic)
   ================================================================ */
form.woocommerce-checkout .woocommerce-billing-fields > h3,
form.woocommerce-checkout h3#ship-to-different-address {
  font-family: var(--pmc-cc-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--pmc-cc-dark);
  margin: 0 0 16px;
}
/* "Additional information": assente nel Figma → nascosto (resta il campo note) */
form.woocommerce-checkout .woocommerce-additional-fields > h3 {
  display: none;
}
form.woocommerce-checkout .woocommerce-additional-fields {
  margin-top: 8px;
}

/* ================================================================
   CAMPI / INPUT (Figma: label 14 #3F3A35 sopra; input bordo 1px
   #766F67 radius 12, focus 2px #080707)
   ================================================================ */
form.woocommerce-checkout .form-row label {
  font-family: var(--pmc-cc-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--pmc-cc-charcoal);
  padding-left: 4px;
  margin-bottom: 6px;
}
form.woocommerce-checkout .form-row label .required {
  color: var(--pmc-cc-red);
  border: 0;
}
form.woocommerce-checkout input.input-text,
form.woocommerce-checkout textarea,
form.woocommerce-checkout .select2-container .select2-selection,
form.woocommerce-checkout select,
form.woocommerce-checkout .select2-selection--single {
  border: 1px solid var(--pmc-cc-light) !important;
  border-radius: 12px !important;
  background: #fff !important;
  padding: 10px 12px !important;
  height: auto !important;      /* il tema forza line-height 48 → input 70px; qui riportiamo a Figma */
  min-height: 0 !important;
  line-height: 1.4 !important;  /* 16 * 1.4 = 22.4 → box ~44px come Figma */
  font-family: var(--pmc-cc-sans) !important;
  font-size: 16px !important;
  color: var(--pmc-cc-dark) !important;
  box-shadow: none !important;
}
/* select2 (country/state): stessa altezza dei text input */
form.woocommerce-checkout .select2-container--default .select2-selection--single {
  height: 44px !important;
  display: flex;
  align-items: center;
}
form.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.4 !important;
  padding: 0 !important;
}
form.woocommerce-checkout textarea {
  min-height: 88px !important;
  line-height: 1.4 !important;
}
form.woocommerce-checkout input.input-text:focus,
form.woocommerce-checkout textarea:focus,
form.woocommerce-checkout select:focus,
form.woocommerce-checkout .select2-container--focus .select2-selection {
  border: 2px solid var(--pmc-cc-dark) !important;
  outline: none !important;
}
form.woocommerce-checkout ::placeholder { color: var(--pmc-cc-light); }
/* select2 (country/state) allineamento interno */
form.woocommerce-checkout .select2-selection__rendered {
  line-height: 22px !important;
  padding-left: 0 !important;
  color: var(--pmc-cc-dark);
}
form.woocommerce-checkout .select2-selection__arrow { top: 10px !important; }
/* prima riga: First / Last name affiancati */
form.woocommerce-checkout .form-row-first { width: calc(50% - 8px); float: left; margin-right: 16px; }
form.woocommerce-checkout .form-row-last { width: calc(50% - 8px); float: left; margin-right: 0; }
form.woocommerce-checkout .form-row-wide { clear: both; }

/* ================================================================
   ORDER REVIEW = card "Your order" (gradiente crema)
   ================================================================ */
form.woocommerce-checkout #order_review {
  background: linear-gradient(134.74deg, var(--pmc-cc-cream1) 0%, var(--pmc-cc-cream2) 70.6%);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(109, 95, 80, 0.18);
}
/* tabella ordine dentro pannello bianco translucido.
   border-collapse:separate (non collapse) altrimenti il padding del
   <table> viene ignorato e il prezzo tocca il bordo destro. */
form.woocommerce-checkout .woocommerce-checkout-review-order-table {
  background: var(--pmc-cc-panel);
  border-radius: 16px;
  padding: 8px 16px;
  margin: 0 0 16px;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
}
/* niente header colonne (Figma) */
form.woocommerce-checkout .woocommerce-checkout-review-order-table thead {
  display: none;
}
form.woocommerce-checkout .woocommerce-checkout-review-order-table td,
form.woocommerce-checkout .woocommerce-checkout-review-order-table th {
  border: 0;
  padding: 12px 0;
}
/* riga prodotto: nome Lora bold italic + vendor sotto */
form.woocommerce-checkout .cart_item + .cart_item td {
  border-top: 1px solid var(--pmc-cc-light);
}
form.woocommerce-checkout .cart_item .product-name {
  font-family: var(--pmc-cc-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  color: var(--pmc-cc-dark);
}
form.woocommerce-checkout .cart_item .product-total {
  font-family: var(--pmc-cc-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 16px;
  color: var(--pmc-cc-dark);
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
}
/* riga vendor Dokan (Helvetica 12). Markup reale: <dl class="variation">
   <dt class="variation-Vendor">Vendor:</dt><dd><p>...</p></dd></dl> */
form.woocommerce-checkout .cart_item .product-name .dokan-checkout-vendor,
form.woocommerce-checkout .cart_item .product-name small,
form.woocommerce-checkout .cart_item .product-name .wc-item-meta,
form.woocommerce-checkout .cart_item .product-name dl.variation,
form.woocommerce-checkout .cart_item .product-name dl.variation dt,
form.woocommerce-checkout .cart_item .product-name dl.variation dd,
form.woocommerce-checkout .cart_item .product-name dl.variation dd p {
  font-family: var(--pmc-cc-sans);
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  color: var(--pmc-cc-charcoal);
  margin: 4px 0 0;
}
/* "Vendor:" e valore sulla stessa riga */
form.woocommerce-checkout .cart_item .product-name dl.variation dt,
form.woocommerce-checkout .cart_item .product-name dl.variation dd {
  display: inline;
  margin: 0;
}
form.woocommerce-checkout .cart_item .product-name dl.variation dt {
  margin-right: 4px;
}
form.woocommerce-checkout .cart_item .product-name dl.variation dd p {
  display: inline;
}
/* totali: subtotal + total in pannello bianco */
form.woocommerce-checkout .cart-subtotal,
form.woocommerce-checkout .order-total {
  font-family: var(--pmc-cc-serif);
  font-style: italic;
}
form.woocommerce-checkout .cart-subtotal th,
form.woocommerce-checkout .cart-subtotal td {
  font-weight: 600;
  font-size: 16px;
  color: var(--pmc-cc-dark);
}
form.woocommerce-checkout .order-total th {
  font-weight: 600;
  font-size: 16px;
}
form.woocommerce-checkout .order-total td {
  font-weight: 700;
  font-size: 24px;
  color: var(--pmc-cc-dark);
}
form.woocommerce-checkout .order-total th,
form.woocommerce-checkout .order-total td {
  border-top: 1px solid var(--pmc-cc-charcoal);
  padding-top: 16px !important;
}

/* ================================================================
   PAGAMENTO + BOTTONE (dentro order_review, colonna dx = Figma)
   ================================================================ */
form.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
}
form.woocommerce-checkout #payment .payment_methods {
  border: 0;
}
form.woocommerce-checkout #payment .woocommerce-info,
form.woocommerce-checkout #payment .woocommerce-error {
  border-radius: 12px;
}
form.woocommerce-checkout #payment .form-row.place-order {
  padding: 8px 0 0;
}
form.woocommerce-checkout #place_order {
  width: 100%;
  display: block;
  background: linear-gradient(108.89deg, var(--pmc-cc-navy1) 0%, var(--pmc-cc-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;
  font-family: var(--pmc-cc-sans) !important;
  font-size: 16px;
  font-weight: 400;
  color: #fff !important;
}
form.woocommerce-checkout #place_order:hover { filter: brightness(1.08); }

/* ================================================================
   MOBILE — 1 colonna
   ================================================================ */
@media (max-width: 782px) {
  form.woocommerce-checkout {
    display: block;      /* 1 colonna: annulla il grid desktop */
  }
  form.woocommerce-checkout #customer_details,
  form.woocommerce-checkout #order_review_heading,
  form.woocommerce-checkout #order_review {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    position: static !important;   /* niente sticky su mobile */
  }
  form.woocommerce-checkout #order_review_heading { margin-top: 24px; }
  form.woocommerce-checkout #order_review { padding: 20px; }
  form.woocommerce-checkout .woocommerce-billing-fields > h3 { font-size: 20px; }
  /* First/Last name a piena larghezza impilati (niente 50% da desktop) */
  form.woocommerce-checkout .form-row-first,
  form.woocommerce-checkout .form-row-last {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }
  /* tabella ordine responsive: nome a sx, prezzo a dx sulla stessa riga */
  form.woocommerce-checkout .woocommerce-checkout-review-order-table tr {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }
  form.woocommerce-checkout .woocommerce-checkout-review-order-table td,
  form.woocommerce-checkout .woocommerce-checkout-review-order-table th {
    padding: 8px 0;
  }
  form.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name {
    flex: 1 1 auto;
    min-width: 0;
  }
  form.woocommerce-checkout .woocommerce-checkout-review-order-table .product-total,
  form.woocommerce-checkout .cart-subtotal td,
  form.woocommerce-checkout .order-total td {
    text-align: right;
    white-space: nowrap;
    flex: 0 0 auto;
  }
}