/**
 * Industrial Devices Catalog – WooCommerce checkout layout
 * Focus: proportions of Billing details vs Your order (2-column layout).
 */

:root {
  --sv-border: #e5e7eb;
  --sv-bg-card: #ffffff;
}

/* =========================================================
 * 1. CHECKOUT FORM – 2 COLUMNS GRID (≈ 2/3 + 1/3)
 * ========================================================= */

.woocommerce-checkout form.woocommerce-checkout {
  /* centru și lățime maximă, ca în exemplu */
  max-width: 1200px;
  margin: 0 auto;

  /* 2 coloane: stânga mai mare, dreapta mai îngustă */
  display: grid !important;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  column-gap: 32px;
  row-gap: 24px;
  align-items: flex-start;
}

/* Stânga: detalii client (Billing + eventual Shipping) */
.woocommerce-checkout #customer_details {
  grid-column: 1;
}

/* Dreapta: heading "Your order" + tabelul de comandă */
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
  grid-column: 2;
}

/* Clear pentru orice float vechi de la temă */
.woocommerce-checkout form.woocommerce-checkout::after {
  content: "";
  display: block;
  clear: both;
}

/* Pe ecrane mici revenim la 1 coloană */
@media (max-width: 900px) {
  .woocommerce-checkout form.woocommerce-checkout {
    display: block !important;
  }

  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review {
    width: 100%;
    max-width: 100%;
  }

  .woocommerce-checkout #order_review_heading {
    margin-top: 24px;
  }
}

/* =========================================================
 * 2. CARDURI / BLOCS – aspect „card” pentru stânga și dreapta
 * ========================================================= */

/* Blocul principal Billing details (col-1) */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Card pentru Billing details */
.woocommerce-checkout #customer_details .woocommerce-billing-fields {
  background: var(--sv-bg-card);
  border: 1px solid var(--sv-border);
  border-radius: 16px;
  padding: 20px 20px 24px;
  box-sizing: border-box;
}

/* Dacă folosești și shipping la checkout, îi facem și lui card */
.woocommerce-checkout #customer_details .woocommerce-shipping-fields {
  margin-top: 24px;
  background: var(--sv-bg-card);
  border: 1px solid var(--sv-border);
  border-radius: 16px;
  padding: 20px 20px 24px;
  box-sizing: border-box;
}

/* Card pentru "Your order" (dreapta) */
.woocommerce-checkout #order_review {
  background: var(--sv-bg-card);
  border: 1px solid var(--sv-border);
  border-radius: 16px;
  padding: 20px 20px 24px;
  box-sizing: border-box;
}

/* Tabelul din "Your order" să nu iasă din card */
.woocommerce-checkout #order_review table.shop_table {
  border-radius: 12px;
  border: 1px solid var(--sv-border);
  overflow: hidden;
}

/* =========================================================
 * 3. FIELDS – First / Last name pe același rând
 * ========================================================= */

/* Containerul câmpurilor de facturare */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper::after {
  content: "";
  display: block;
  clear: both;
}

/* First name + Last name side-by-side (50% / 50% aprox.) */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last {
  float: left;
  box-sizing: border-box;
  width: calc(50% - 8px);
}

/* Spațiu între ele */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last {
  margin-left: 16px;
}

/* Câmpurile marcate ca „wide” ocupă toată lățimea */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide {
  clear: both;
  width: 100%;
  float: none;
}

/* Ne asigurăm că inputurile folosesc 100% din lățimea form-row-ului */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row input.input-text,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row select,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Etichetele stau deasupra câmpului (nu într-o coloană îngustă) */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row label {
  display: block;
  margin-bottom: 4px;
}

/* Responsive: pe mobil, first/last revin pe linii separate */
@media (max-width: 600px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last {
    width: 100%;
    margin-left: 0;
  }
}

/* =========================================================
 * 4. CART / REVIEW TABLE – proporții decente în cardul din dreapta
 * ========================================================= */

/* Header tabel */
.woocommerce table.shop_table th {
  font-size: 12px;
}

/* Celule, să nu fie prea înguste */
.woocommerce table.shop_table td {
  vertical-align: middle;
}

/* Pentru orice layout vechi cu floaturi în checkout, neutralizăm */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  float: none;
  width: 100%;
}

/* Suminvent: asigură labelul deasupra câmpului la Additional information */
.woocommerce .woocommerce-additional-fields .form-row,
.woocommerce-page .woocommerce-additional-fields .form-row {
    display: flex;
    flex-direction: column;
}

.woocommerce .woocommerce-additional-fields .form-row label,
.woocommerce-page .woocommerce-additional-fields .form-row label {
    order: 0;
    margin-bottom: 6px;
}

.woocommerce .woocommerce-additional-fields .form-row textarea,
.woocommerce-page .woocommerce-additional-fields .form-row textarea {
    order: 1;
}