/**
 * FEF Checkout — layout + polish
 * ALL colors/sizes/spacing driven by CSS variables set at wp_head by
 * FEF_Checkout_Enhancements. Change values in Frontend Forms → 🛒 Checkout
 * Styles and they flow through here.
 *
 * Design goals:
 *   • Billing full-width on top, shipping stacked below (single left column)
 *   • Order summary card on the right — sticky
 *   • Absolutely NO table borders/dividers on the order review
 *   • Product thumbnail next to each line
 *   • Clean typography with the reference design's spacing and hierarchy
 */

/* ═══════════════════════════════════════════════════════════════
   DEFAULTS — used when settings haven't been saved yet.
   Overridden by the inline <style> block from
   FEF_Checkout_Enhancements::inject_dynamic_css().
   ═══════════════════════════════════════════════════════════════ */
:root {
    --fef-co-max-width:         1180px;
    --fef-co-container-padding: 20px;
    --fef-co-gap:               40px;
    --fef-co-page-bg:           #ffffff;
    --fef-co-h1-size:           24px;
    --fef-co-h2-size:           20px;
    --fef-co-h3-size:           16px;
    --fef-co-body-size:         14px;
    --fef-co-small-size:        13px;
    --fef-co-label-size:        14px;
    --fef-co-heading-color:     #0f172a;
    --fef-co-body-color:        #334155;
    --fef-co-muted-color:       #64748b;
    --fef-co-label-color:       #334155;
    --fef-co-summary-bg:        #f8fafc;
    --fef-co-summary-border:    #e2e8f0;
    --fef-co-summary-radius:    16px;
    --fef-co-summary-padding:   24px;
    --fef-co-thumb-size:        56px;
    --fef-co-thumb-radius:      8px;
    --fef-co-line-name-size:    14px;
    --fef-co-line-qty-color:    #64748b;
    --fef-co-line-price-color:  #0f172a;
    --fef-co-subtotal-label:    #64748b;
    --fef-co-subtotal-value:    #0f172a;
    --fef-co-total-color:       #0f172a;
    --fef-co-total-size:        20px;
    --fef-co-total-border:      #0f172a;
    --fef-co-coupon-bg:         #ffffff;
    --fef-co-coupon-border:     #e2e8f0;
    --fef-co-coupon-btn-bg:     #0f172a;
    --fef-co-coupon-btn-color:  #ffffff;
    --fef-co-chip-bg:           #dcfce7;
    --fef-co-chip-color:        #166534;
    --fef-co-input-border:      #cbd5e1;
    --fef-co-input-focus:       #3b82f6;
    --fef-co-input-radius:      8px;
    --fef-co-input-padding:     10px;
}

/* ═══════════════════════════════════════════════════════════════
   PAGE-LEVEL BACKGROUND (checkout page only)
   ═══════════════════════════════════════════════════════════════ */
body.woocommerce-checkout { background: var(--fef-co-page-bg); }

/* ═══════════════════════════════════════════════════════════════
   MAIN LAYOUT — 2-column grid (customer details | order summary)
   Uses named grid-areas so we can assign any element to either
   area regardless of DOM order.
   ═══════════════════════════════════════════════════════════════ */

.e-checkout__container,
.woocommerce form.checkout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr) !important;
    grid-template-areas: "left right" !important;
    gap: var(--fef-co-gap) !important;
    max-width: var(--fef-co-max-width);
    margin: 0 auto;
    padding: 0 var(--fef-co-container-padding);
    box-sizing: border-box;
}

/* Left area: everything that ISN'T the order review */
.woocommerce form.checkout .col2-set,
.woocommerce form.checkout .u-columns,
.woocommerce form.checkout > #customer_details,
.woocommerce form.checkout > .customer-details,
.e-checkout__container > .col-1,
.e-checkout__container > .e-woo-checkout__form-column-1,
form.checkout > div:not(#order_review):not(#order_review_heading):not(.e-woo-checkout__form-column-2):not(.woocommerce-checkout-review-order):not(.woocommerce-checkout-payment) {
    grid-area: left !important;
}

/* Right area: order review + heading + payment (sticky) */
.woocommerce form.checkout #order_review,
.woocommerce form.checkout #order_review_heading,
.woocommerce form.checkout .woocommerce-checkout-review-order,
.woocommerce form.checkout .woocommerce-checkout-review-order-table-wrapper,
.e-checkout__container > .col-2,
.e-checkout__container > .e-woo-checkout__form-column-2 {
    grid-area: right !important;
    align-self: start;
    position: sticky;
    top: 80px;
}

/* Inside LEFT column — force billing to stack above shipping */
.woocommerce form.checkout .col2-set,
.woocommerce form.checkout .u-columns,
.woocommerce form.checkout > .customer-details,
.woocommerce form.checkout > #customer_details {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}
.woocommerce form.checkout .col2-set .col-1,
.woocommerce form.checkout .col2-set .col-2,
.woocommerce form.checkout .u-columns .u-column1,
.woocommerce form.checkout .u-columns .u-column2,
.woocommerce form.checkout .woocommerce-billing-fields,
.woocommerce form.checkout .woocommerce-shipping-fields,
.woocommerce form.checkout .woocommerce-additional-fields {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 0 30px !important;
    display: block !important;
}
.woocommerce form.checkout .col2-set .col-1,
.woocommerce form.checkout .u-columns .u-column1,
.woocommerce form.checkout .woocommerce-billing-fields   { order: 1; }
.woocommerce form.checkout .col2-set .col-2,
.woocommerce form.checkout .u-columns .u-column2,
.woocommerce form.checkout .woocommerce-shipping-fields  { order: 2; }
.woocommerce form.checkout .woocommerce-additional-fields{ order: 3; }

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY — headings and body
   ═══════════════════════════════════════════════════════════════ */
.woocommerce-checkout .entry-title,
.woocommerce-checkout .page-title,
.woocommerce-checkout h1 {
    font-size: var(--fef-co-h1-size) !important;
    color: var(--fef-co-heading-color) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}
.woocommerce form.checkout h3,
.woocommerce form.checkout #order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
    font-size: var(--fef-co-h2-size) !important;
    font-weight: 700 !important;
    color: var(--fef-co-heading-color) !important;
    margin: 0 0 20px !important;
    letter-spacing: -0.01em !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
.woocommerce form.checkout .woocommerce-shipping-fields > h3,
.woocommerce form.checkout .woocommerce-additional-fields > h3 {
    margin-top: 32px !important;
    padding-top: 24px !important;
    border-top: 1px solid var(--fef-co-summary-border) !important;
}
.woocommerce form.checkout p,
.woocommerce form.checkout .form-row p {
    font-size: var(--fef-co-body-size);
    color: var(--fef-co-body-color);
}

/* Fallback section headings inserted by JS when the theme strips them */
.fef-co-fallback-heading {
    font-size: var(--fef-co-h2-size) !important;
    font-weight: 700 !important;
    color: var(--fef-co-heading-color) !important;
    margin: 0 0 20px !important;
    letter-spacing: -0.01em !important;
}
.woocommerce-shipping-fields .fef-co-fallback-heading {
    margin-top: 32px !important;
    padding-top: 24px !important;
    border-top: 1px solid var(--fef-co-summary-border) !important;
}

/* ═══════════════════════════════════════════════════════════════
   FORM INPUTS
   ═══════════════════════════════════════════════════════════════ */
.woocommerce form.checkout .form-row {
    margin: 0 0 16px !important;
    padding: 0 !important;
}
.woocommerce form.checkout .form-row label {
    display: block !important;
    font-size: var(--fef-co-label-size) !important;
    color: var(--fef-co-label-color) !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
}
.woocommerce form.checkout .form-row .required { color: #dc2626; }
.woocommerce form.checkout .form-row input.input-text,
.woocommerce form.checkout .form-row textarea,
.woocommerce form.checkout .form-row select,
.woocommerce form.checkout .select2-selection {
    width: 100% !important;
    padding: var(--fef-co-input-padding) 14px !important;
    border: 1px solid var(--fef-co-input-border) !important;
    border-radius: var(--fef-co-input-radius) !important;
    font-size: var(--fef-co-body-size) !important;
    background: #ffffff !important;
    color: var(--fef-co-heading-color) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: border-color .15s, box-shadow .15s;
    height: auto !important;
    line-height: 1.4 !important;
}
.woocommerce form.checkout .form-row input.input-text:focus,
.woocommerce form.checkout .form-row textarea:focus,
.woocommerce form.checkout .form-row select:focus {
    outline: none !important;
    border-color: var(--fef-co-input-focus) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ORDER SUMMARY CARD (right column)
   ═══════════════════════════════════════════════════════════════ */
.woocommerce form.checkout #order_review {
    background: var(--fef-co-summary-bg) !important;
    border: 1px solid var(--fef-co-summary-border) !important;
    border-radius: var(--fef-co-summary-radius) !important;
    padding: var(--fef-co-summary-padding) !important;
}
.woocommerce form.checkout #order_review_heading {
    background: var(--fef-co-summary-bg);
    padding: 0 !important;
    margin: 0 0 16px !important;
}

/* ═══════════════════════════════════════════════════════════════
   COUPON PROMPT (rendered by FEF_Checkout_Enhancements)
   ═══════════════════════════════════════════════════════════════ */
.fef-co-coupon-prompt {
    margin: 0 0 20px !important;
    padding: 14px !important;
    background: var(--fef-co-coupon-bg) !important;
    border: 1px solid var(--fef-co-coupon-border) !important;
    border-radius: 10px !important;
    /* Kill any inherited widths so this fits inside the summary card */
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    clear: both !important;
    float: none !important;
}
.fef-co-coupon-form label {
    margin-bottom: 8px !important;
    font-size: var(--fef-co-body-size) !important;
}
.fef-co-coupon-row input { padding: 8px 12px !important; }
.fef-co-coupon-apply { padding: 8px 16px !important; }
.fef-co-coupon-form label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: 600 !important;
    color: var(--fef-co-heading-color) !important;
    font-size: var(--fef-co-body-size) !important;
    margin-bottom: 10px !important;
}
.fef-co-coupon-icon { font-size: 16px; }
.fef-co-coupon-row  { display: flex; gap: 8px; }
.fef-co-coupon-row input {
    flex: 1 !important;
    padding: 10px 14px !important;
    border: 1px solid var(--fef-co-input-border) !important;
    border-radius: var(--fef-co-input-radius) !important;
    font-size: var(--fef-co-body-size) !important;
    background: #ffffff !important;
    color: var(--fef-co-heading-color) !important;
    box-sizing: border-box !important;
}
.fef-co-coupon-row input:focus {
    outline: none;
    border-color: var(--fef-co-input-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}
.fef-co-coupon-apply {
    padding: 10px 20px;
    background: var(--fef-co-coupon-btn-bg);
    color: var(--fef-co-coupon-btn-color);
    border: none;
    border-radius: var(--fef-co-input-radius);
    font-weight: 600;
    font-size: var(--fef-co-body-size);
    cursor: pointer;
    white-space: nowrap;
    transition: filter .15s;
}
.fef-co-coupon-apply:hover { filter: brightness(1.1); }
.fef-co-coupon-msg {
    margin-top: 8px;
    font-size: var(--fef-co-small-size);
    color: var(--fef-co-muted-color);
}
.fef-co-coupon-msg-err { color: #b91c1c; }
.fef-co-coupon-msg-ok  { color: #166534; }
.fef-co-coupon-applied { display: flex; flex-wrap: wrap; gap: 8px; }
.fef-co-coupon-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--fef-co-chip-bg);
    color: var(--fef-co-chip-color);
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
}
.fef-co-coupon-remove {
    color: var(--fef-co-chip-color);
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    padding: 0 4px;
    border-radius: 4px;
}
.fef-co-coupon-remove:hover { background: rgba(0, 0, 0, .06); }

/* Hide WC's built-in coupon toggle since we render our own */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout_coupon { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   ORDER REVIEW TABLE — ZERO borders/lines, custom line-item layout
   ═══════════════════════════════════════════════════════════════ */
.woocommerce form.checkout .woocommerce-checkout-review-order-table,
.woocommerce form.checkout table.shop_table {
    background: transparent !important;
    border: none !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin: 0 !important;
}
.woocommerce form.checkout .woocommerce-checkout-review-order-table th,
.woocommerce form.checkout .woocommerce-checkout-review-order-table td,
.woocommerce form.checkout .woocommerce-checkout-review-order-table tr,
.woocommerce form.checkout table.shop_table th,
.woocommerce form.checkout table.shop_table td,
.woocommerce form.checkout table.shop_table tr {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
/* Hide the default "Product / Subtotal" header */
.woocommerce form.checkout .woocommerce-checkout-review-order-table thead { display: none !important; }

/* Line item rows — COMPACT: [thumb] [name]     [× qty  price] */
.woocommerce form.checkout .woocommerce-checkout-review-order-table tbody tr,
.woocommerce form.checkout .woocommerce-checkout-review-order-table tbody tr.cart_item {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 0 !important;
}
.woocommerce form.checkout .woocommerce-checkout-review-order-table tbody tr + tr {
    border-top: 1px solid var(--fef-co-summary-border) !important;
}
.woocommerce form.checkout .woocommerce-checkout-review-order-table tbody td {
    padding: 0 !important;
    vertical-align: middle !important;
}
/* The product-total cell now contains BOTH .product-quantity (moved via
   JS) and the price — display them inline with the price bold on the right. */
.woocommerce form.checkout .woocommerce-checkout-review-order-table td.product-total,
.woocommerce form.checkout .woocommerce-checkout-review-order-table td.product-subtotal {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

/* Line inner (thumb + name) — compact horizontal layout */
.fef-co-line-inner {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
}
.woocommerce form.checkout .woocommerce-checkout-review-order-table td.product-name {
    min-width: 0 !important;
}
.fef-co-thumb {
    flex: 0 0 auto !important;
    width: var(--fef-co-thumb-size) !important;
    height: var(--fef-co-thumb-size) !important;
    object-fit: cover !important;
    border-radius: var(--fef-co-thumb-radius) !important;
    background: #ffffff !important;
    border: 1px solid var(--fef-co-summary-border) !important;
    box-sizing: border-box !important;
    display: block !important;
}
.fef-co-thumb-placeholder {
    background: linear-gradient(135deg, #e2e8f0 25%, transparent 25%, transparent 75%, #e2e8f0 75%),
                linear-gradient(135deg, #e2e8f0 25%, transparent 25%, transparent 75%, #e2e8f0 75%);
    background-size: 12px 12px;
    background-position: 0 0, 6px 6px;
}
.fef-co-line-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-weight: 500 !important;
    font-size: var(--fef-co-line-name-size) !important;
    color: var(--fef-co-heading-color) !important;
    line-height: 1.35 !important;
}
.woocommerce form.checkout .woocommerce-checkout-review-order-table .product-quantity {
    display: inline-block !important;
    color: var(--fef-co-line-qty-color) !important;
    font-size: var(--fef-co-small-size) !important;
    font-weight: 500 !important;
    margin: 0 !important;
    order: 1 !important;   /* qty appears BEFORE price in the flex parent */
}
.woocommerce form.checkout .woocommerce-checkout-review-order-table td.product-total {
    /* Price element itself: bold, positioned after qty via flex order */
    order: unset !important;
}
.woocommerce form.checkout .woocommerce-checkout-review-order-table td.product-total > *:not(.product-quantity) {
    order: 2 !important;
    font-weight: 600 !important;
    color: var(--fef-co-line-price-color) !important;
}


/* ═══════════════════════════════════════════════════════════════
   TOTALS ROWS (tfoot) — clean, no borders except grand total divider
   ═══════════════════════════════════════════════════════════════ */
.woocommerce form.checkout .woocommerce-checkout-review-order-table tfoot { display: block !important; margin-top: 16px !important; }
.woocommerce form.checkout .woocommerce-checkout-review-order-table tfoot tr {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 0 !important;
    border-top: none !important;
}
.woocommerce form.checkout .woocommerce-checkout-review-order-table tfoot tr th,
.woocommerce form.checkout .woocommerce-checkout-review-order-table tfoot tr td {
    font-size: var(--fef-co-body-size) !important;
    padding: 0 !important;
    border: none !important;
}
.woocommerce form.checkout .woocommerce-checkout-review-order-table tfoot tr th {
    color: var(--fef-co-subtotal-label) !important;
    font-weight: 500 !important;
    text-align: left !important;
}
.woocommerce form.checkout .woocommerce-checkout-review-order-table tfoot tr td {
    color: var(--fef-co-subtotal-value) !important;
    font-weight: 600 !important;
    text-align: right !important;
}
/* Grand total — bigger, with the only real divider on the whole table */
.woocommerce form.checkout .woocommerce-checkout-review-order-table tfoot tr.order-total {
    padding-top: 16px !important;
    margin-top: 8px !important;
    border-top: 2px solid var(--fef-co-total-border) !important;
}
.woocommerce form.checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce form.checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td,
.woocommerce form.checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td strong,
.woocommerce form.checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th strong {
    font-size: var(--fef-co-total-size) !important;
    font-weight: 700 !important;
    color: var(--fef-co-total-color) !important;
}

/* No-shipping-available message — nicer */
.woocommerce form.checkout .woocommerce-shipping-totals p {
    margin: 0 !important;
    padding: 10px 12px !important;
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border-radius: 6px !important;
    border-left: 3px solid #dc2626 !important;
    font-size: var(--fef-co-small-size) !important;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .e-checkout__container,
    .woocommerce form.checkout {
        display: block !important;
        padding: 0 16px;
    }
    .woocommerce form.checkout #order_review,
    .woocommerce form.checkout .woocommerce-checkout-review-order {
        position: static !important;
        margin-top: 30px;
    }
}