/* ===========================
   PREMIUM CHECKOUT (Classic)
   =========================== */

body.woocommerce-checkout{
  background:#f6f7fb;
}

/* container */
.woocommerce-checkout .woocommerce{
  max-width: 1380px;
  margin: 40px auto;
  padding: 0 18px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
}

/* remove theme serif only on checkout headings */
.woocommerce-checkout h2,
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px;
  font-size:24px;
}

/* ===========================
   LAYOUT: left form + right summary
   =========================== */
.woocommerce-checkout form.checkout{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 22px;
  align-items: start;
}

/* Left big card */
.woocommerce-checkout #customer_details{
  background:#fff;
  border:1px solid #e9ecf2;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 12px 30px rgba(16,24,40,0.07);
}

/* Right summary card */
.woocommerce-checkout #order_review{
  background:#fff;
  border:1px solid #e9ecf2;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 12px 30px rgba(16,24,40,0.07);
}

/* Sticky summary on desktop */
@media(min-width: 981px){
  .woocommerce-checkout #order_review{
    position: sticky;
    top: 22px;
  }
}

/* Mobile stack */
@media(max-width: 980px){
  .woocommerce-checkout form.checkout{
    grid-template-columns: 1fr;
  }
}

/* ===========================
   FIX: Put "Additional information" inside left (not beside)
   Theme often uses .col-1/.col-2 floats
   =========================== */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{
  float: none !important;
  width: 100% !important;
}

/* make additional info feel like a section divider inside left card */
.woocommerce-checkout .woocommerce-additional-fields{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #eef1f6;
}

/* ===========================
   FORM UI
   =========================== */
.woocommerce-checkout label{
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px;
}

/* spacing between fields */
.woocommerce-checkout .form-row{
  margin-bottom: 14px;
}

/* inputs */
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;

  border: 1px solid #d7dde8;
  border-radius: 12px;
  padding: 12px 12px;
  font-size: 14px;
  background: #fff;

  transition: box-shadow .2s ease, border-color .2s ease;
}

.woocommerce-checkout textarea{
  min-height: 110px;
}

.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus{
  border-color:#111827;
  box-shadow: 0 0 0 4px rgba(17,24,39,0.10);
  outline: none;
}

/* make first/last name alignment clean but not fight theme */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last{
  width: 48% !important;
}
.woocommerce-checkout .form-row-first{ margin-right: 4% !important; }
@media(max-width: 780px){
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last{
    width: 100% !important;
    margin-right: 0 !important;
  }
}

/* ===========================
   ORDER TABLE
   =========================== */
.woocommerce-checkout table.shop_table{
  border: 0;
  margin: 0;
}
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td{
  padding: 10px 0;
  border-top: 1px solid #eef1f6;
}
.woocommerce-checkout table.shop_table tr:first-child th,
.woocommerce-checkout table.shop_table tr:first-child td{
  border-top: 0;
}

/* ===========================
   PAYMENT + BUTTON
   =========================== */
.woocommerce-checkout #payment{
  background: transparent;
  border: 0;
  margin-top: 14px;
}

.woocommerce-checkout #payment .payment_box{
  background:#f7f7fb;
  border:1px solid #e9ecf2;
  border-radius: 12px;
}

/* place order button */
.woocommerce-checkout #place_order{
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 800;
  background: #111827;
  color: #fff;
  transition: transform .08s ease, opacity .2s ease;
  margin-top:20px;
}
.woocommerce-checkout #place_order:hover{ opacity: .92; }
.woocommerce-checkout #place_order:active{ transform: scale(.985); }

/* OPTIONAL: hide coupon strip (makes cleaner) */
.woocommerce-checkout .woocommerce-form-coupon-toggle{
  display:none;
}


/* ===============================
   FORCE 2-COLUMN CHECKOUT LAYOUT
   =============================== */

/* WooCommerce classic checkout columns wrapper */
.woocommerce-checkout form.checkout {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 22px !important;
  align-items: start !important;
}

/* Left side */
.woocommerce-checkout form.checkout #customer_details {
  grid-column: 1 / 2 !important;
}

/* Right side: heading + order review */
.woocommerce-checkout form.checkout #order_review_heading,
.woocommerce-checkout form.checkout #order_review {
  grid-column: 2 / 3 !important;
}

/* Ensure right side doesn't break due to floats */
.woocommerce-checkout form.checkout #order_review_heading,
.woocommerce-checkout form.checkout #order_review {
  float: none !important;
  width: 100% !important;
}

/* Desktop only */
@media (max-width: 980px) {
  .woocommerce-checkout form.checkout {
    grid-template-columns: 1fr !important;
  }

  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout #order_review {
    grid-column: 1 / -1 !important;
  }
}


/* Kill theme column floats */
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  float: none !important;
  width: 100% !important;
}


/* ✅ Keep order summary on top (same row) */
.woocommerce-checkout form.checkout {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 22px !important;
  align-items: start !important;
}

/* Left column */
.woocommerce-checkout form.checkout #customer_details {
  grid-column: 1 / 2 !important;
  grid-row: 1 !important;
}

/* Hide the separate Woo heading so it doesn't create a 2nd row */
.woocommerce-checkout form.checkout #order_review_heading {
  display: none !important;
}

/* Right column (order box) pinned to row 1 */
.woocommerce-checkout form.checkout #order_review {
  grid-column: 2 / 3 !important;
  grid-row: 1 !important;
  align-self: start !important;
  float: none !important;
  width: 100% !important;
}

/* Add "Your order" title inside the card */
.woocommerce-checkout form.checkout #order_review:before {
  content: "Your order";
  display: block;
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 16px 0;
}

/* Mobile stack */
@media (max-width: 980px) {
  .woocommerce-checkout form.checkout {
    grid-template-columns: 1fr !important;
  }
  .woocommerce-checkout form.checkout #order_review {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}