/* ============================================================
   Checkout Custom Styles
   ============================================================ */

/* 1. Global font inheritance — no hardcoded fonts on cart/checkout pages */
.woocommerce-cart #primary *,
.woocommerce-checkout #primary *,
.woocommerce-cart .wc-block-cart *,
.woocommerce-checkout .wc-block-checkout *,
.woocommerce-cart .wp-block-woocommerce-cart *,
.woocommerce-checkout .wp-block-woocommerce-checkout * {
    font-family: inherit !important;
}

/* 2. Text color — page content only (excludes buttons, checkout-button, return-to-cart-link) */
.woocommerce-cart #primary *:not(button):not([type="submit"]):not(.checkout-button):not(.return-to-cart-link),
.woocommerce-checkout #primary *:not(button):not([type="submit"]):not(.checkout-button):not(.return-to-cart-link),
.woocommerce-cart .wc-block-cart *:not(button):not([type="submit"]):not(.checkout-button):not(.return-to-cart-link),
.woocommerce-cart .wp-block-woocommerce-cart *:not(button):not([type="submit"]):not(.checkout-button):not(.return-to-cart-link) {
    color: var(--cart-label-color, #ffffff) !important;
}

/* ============================================================
   3. Two-column checkout layout
      Left  ~ 58% : contact + shipping + payment details
      Right ~ 38% : order summary (sticky)
   ============================================================ */

.wc-checkout-columns {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
}

.wc-checkout-col-left {
    flex: 0 0 58%;
    min-width: 0;
}

.wc-checkout-col-right {
    flex: 0 0 calc(42% - 40px);
    min-width: 0;
}

/* Sticky order summary panel */
.wc-checkout-order-review-wrap {
    position: sticky;
    top: 80px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 20px 24px;
}

.wc-checkout-order-review-wrap #order_review_heading {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 0;
    border-bottom: none;
}

/* Remove excess margin/padding added by WooCommerce inside the order review panel */
#order_review .woocommerce-checkout-review-order-table {
    margin-bottom: 12px;
}

/* Stack columns on small screens */
@media (max-width: 768px) {
    .wc-checkout-columns {
        flex-direction: column;
    }

    .wc-checkout-col-left,
    .wc-checkout-col-right {
        flex: 0 0 100%;
        width: 100%;
    }

    .wc-checkout-order-review-wrap {
        position: static;
    }
}

/* ============================================================
   4. Place Order row — "Return to cart" (left 50%) + button (right 50%)
   ============================================================ */

/* Container */
.place-order {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    flex-wrap: wrap;
    gap: 0 !important;
}

/* Button */
.place-order #place_order,
.place-order button[name="woocommerce_checkout_place_order"] {
    flex: 0 0 50% !important;
    width: 50% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    order: 2;
}

/* ============================================================
   5. Place Order Button styling (Classic & Blocks)
   ============================================================ */
#place_order,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button,
.wp-element-button.wc-block-components-checkout-place-order-button,
button[name="woocommerce_checkout_place_order"] {
    background-color: var(--order-btn-bg, var(--btn-bg)) !important;
    color: var(--order-btn-text, #ffffff) !important;
    font-weight: 700 !important;
    border-radius: var(--order-btn-radius, 9999px) !important;
    padding: 12px 32px !important;
    letter-spacing: 0.025em !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid transparent !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#place_order:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button.wc-block-components-checkout-place-order-button:hover,
.wp-element-button.wc-block-components-checkout-place-order-button:hover,
button[name="woocommerce_checkout_place_order"]:hover {
    background-color: var(--order-btn-bg, var(--btn-bg)) !important;
    filter: brightness(0.85);
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* ============================================================
   6. Return to Cart link — left 50% of .place-order row
      Excluded from broad color rule above so its own color applies
   ============================================================ */
.return-to-cart-link {
    flex: 0 0 50% !important;
    width: 50% !important;
    box-sizing: border-box !important;
    order: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-top: 0 !important;
    color: var(--return-cart-color, #111111) !important;
    text-decoration: none !important;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.return-to-cart-link:hover {
    color: var(--btn-bg, #A05C35) !important;
    border-bottom-color: var(--btn-bg, #A05C35);
}

.return-to-cart-link::before {
    content: '←';
    margin-right: 6px;
    font-size: 1.1em;
    transition: transform 0.2s ease;
}

.return-to-cart-link:hover::before {
    transform: translateX(-4px);
}

/* ============================================================
   7. Checkout form field grid — flexbox replaces WooCommerce's
      default CSS-float layout for .form-row-first / .form-row-last.

      WHY: Floats misalign when validation error messages add
      unequal height below paired sibling fields. Flexbox with
      align-items: flex-start locks every field to its column
      width regardless of neighbour height — on initial load AND
      after validation errors appear.
   ============================================================ */

/* Turn the field wrapper into a flex row that wraps */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    /* fields stay top-aligned, error msgs don't push siblings */
    margin-left: -8px !important;
    margin-right: -8px !important;
}

/* Base reset: remove floats/clears that WooCommerce would normally apply */
.woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-shipping-fields__field-wrapper .form-row {
    float: none !important;
    clear: none !important;
    box-sizing: border-box !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Left field in a paired row — 50% width */
.woocommerce-billing-fields__field-wrapper .form-row-first,
.woocommerce-shipping-fields__field-wrapper .form-row-first {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
}

/* Right field in a paired row — 50% width */
.woocommerce-billing-fields__field-wrapper .form-row-last,
.woocommerce-shipping-fields__field-wrapper .form-row-last {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    margin-left: 0 !important;
    /* WooCommerce sets margin-left on float-right, reset it */
}

/* Full-width fields — span both columns */
.woocommerce-billing-fields__field-wrapper .form-row-wide,
.woocommerce-shipping-fields__field-wrapper .form-row-wide {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Mobile: stack all fields full-width */
@media (max-width: 768px) {

    .woocommerce-billing-fields__field-wrapper,
    .woocommerce-shipping-fields__field-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .woocommerce-billing-fields__field-wrapper .form-row-first,
    .woocommerce-billing-fields__field-wrapper .form-row-last,
    .woocommerce-shipping-fields__field-wrapper .form-row-first,
    .woocommerce-shipping-fields__field-wrapper .form-row-last {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   8. Proxy Coupon Area (Inside Order Summary Table)
   ============================================================ */

/* Hide the default real coupon form we placed at the top, since we submit it via JS */
.wc-checkout-coupon-area-hidden,
.woocommerce-form-coupon-toggle {
    display: none !important;
}

/* Style the proxy row inside the WooCommerce review order table */
.woocommerce-checkout-review-order-table .custom-coupon-proxy-row td {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    border-top: 1px solid #e5e5e5;
    border-bottom: none;
    background-color: transparent;
}

.custom-coupon-accordion {
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
}

.custom-coupon-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    color: #3b2210;
    /* Specific brown color from the visual */
    font-size: 1.05rem;
    user-select: none;
    transition: color 0.2s ease;
}

.custom-coupon-toggle:hover {
    color: var(--btn-bg, #A05C35);
}

.custom-coupon-content {
    margin-top: 16px;
}

.proxy-coupon-flex {
    display: flex;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    align-items: stretch;
}

.proxy-coupon-flex input[type="text"] {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box !important;
    padding: 8px 16px !important;
    border: 1px solid #666 !important;
    background-color: transparent !important;
    border-radius: 4px !important;
    font-size: 1rem !important;
    color: #3b2210 !important;
    margin: 0 !important;
}

.proxy-coupon-flex input[type="text"]:focus {
    border-color: var(--btn-bg, #A05C35) !important;
    outline: none !important;
}

.proxy-coupon-flex button {
    padding: 8px 24px !important;
    background-color: var(--order-btn-bg, var(--btn-bg)) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: filter 0.2s ease !important;
    text-transform: none !important;
    width: auto !important;
    min-width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.proxy-coupon-flex button:hover {
    filter: brightness(0.9) !important;
    background-color: var(--order-btn-bg, var(--btn-bg)) !important;
}