/* ==========================================================
   CIO Checkout Layout System
   File: checkout-page.css
   Purpose: Clean 2-column checkout layout
   ========================================================== */

/* ----------------------------------------------------------
   0) Ensure our wrapper isn't constraining anything
---------------------------------------------------------- */

body.woocommerce-checkout .custom-checkout-center-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Some themes wrap Woo content with widths/centering */
body.woocommerce-checkout .wbc-article,
body.woocommerce-checkout .wbc-content,
body.woocommerce-checkout .wbc-content > .woocommerce {
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  float: none;
  display: block;
}

/* ----------------------------------------------------------
   1) Desktop Grid Layout (FORM is the grid host)
---------------------------------------------------------- */

@media (min-width: 1024px) {

  body.woocommerce-checkout form.woocommerce-checkout.custom-checkout-wide {
    display: grid;
    grid-template-columns: minmax(600px, 1fr) minmax(420px, 520px);
    gap: 32px;

    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;

    align-items: start;

    /* Prevent odd clearing/float behaviour from older styles */
    float: none;
    width: 100%;
  }

  /* -----------------------------
     ROW 1: Express checkout (full width)
  ----------------------------- */
  body.woocommerce-checkout .wcpay-express-checkout-wrapper {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    margin: 0;
  }

  /* -----------------------------
     LEFT COLUMN: Customer details (rows 2-3)
  ----------------------------- */
  body.woocommerce-checkout #customer_details {
    grid-column: 1;
    grid-row: 2 / span 2;
    width: 100%;
    margin: 0;
  }

  /* -----------------------------
     RIGHT COLUMN: Order title (row 2)
  ----------------------------- */
  body.woocommerce-checkout #order_review_heading {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    align-self: start;
  }

  /* -----------------------------
     RIGHT COLUMN: Order review + payment (row 3)
  ----------------------------- */
  body.woocommerce-checkout #order_review {
    grid-column: 2;
    grid-row: 3;
    width: 100%;
    margin: 0;

    position: sticky;
    top: 24px;

    display: block;
  }

  /* Make sure payment stays inside the right column */
  body.woocommerce-checkout #order_review #payment,
  body.woocommerce-checkout #order_review .woocommerce-checkout-payment {
    width: 100%;
    clear: none;
    float: none;
  }
}

/* ----------------------------------------------------------
   2) Remove WooCommerce Float System (col2-set)
---------------------------------------------------------- */

body.woocommerce-checkout .woocommerce .col2-set,
body.woocommerce-checkout .woocommerce-page .col2-set {
  float: none;
  width: auto;
}

body.woocommerce-checkout .woocommerce .col2-set .col-1,
body.woocommerce-checkout .woocommerce .col2-set .col-2,
body.woocommerce-checkout .woocommerce-page .col2-set .col-1,
body.woocommerce-checkout .woocommerce-page .col2-set .col-2 {
  float: none;
  width: 100%;
}

/* ----------------------------------------------------------
   3) Order table / payment stability
---------------------------------------------------------- */

body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table {
  width: 100%;
  table-layout: auto;
}

body.woocommerce-checkout #order_review .shop_table {
  width: 100%;
}

/* ----------------------------------------------------------
   4) Mobile Layout (Stacked)
---------------------------------------------------------- */

@media (max-width: 1023px) {

  body.woocommerce-checkout form.woocommerce-checkout.custom-checkout-wide {
    display: block;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 16px;
  }

  body.woocommerce-checkout #order_review {
    position: static;
  }
}