/**
 * GSL Checkout v2 — Complete restyle of WooCommerce Block Checkout & Cart.
 *
 * Targets the actual WooCommerce block DOM hierarchy:
 *   .wp-block-woocommerce-checkout (container-type: inline-size)
 *     └── .wc-block-components-sidebar-layout (flex: 65% main / 35% sidebar)
 *           ├── .wc-block-components-main
 *           │     └── .wc-block-components-checkout-step (each form section)
 *           └── .wc-block-components-sidebar
 *                 └── .wc-block-components-order-summary
 *
 * Uses GSL theme tokens from theme.json.
 * Scoped under `.gsl-checkout` body class.
 *
 * @package GSLCheckout
 * @version 2.0.0
 */

/* ═══════════════════════════════════════════════════════════════
   0.  CSS CUSTOM PROPERTIES
   ═══════════════════════════════════════════════════════════════ */
.gsl-checkout {
    --gsl-primary:       var(--wp--custom--color--primary, #192A38);
    --gsl-secondary:     var(--wp--custom--color--secondary, #E11C3F);
    --gsl-surface:       var(--wp--custom--color--surface, #FFFFFF);
    --gsl-on-primary:    var(--wp--custom--color--on-primary, #FFFFFF);
    --gsl-on-surface:    var(--wp--custom--color--on-surface, #1F3F4D);
    --gsl-font-body:     var(--wp--preset--font-family--body);
    --gsl-font-heading:  var(--wp--preset--font-family--heading);
    --gsl-radius:        var(--wp--custom--button--radius, 0);
    --gsl-border:        color-mix(in srgb, var(--gsl-on-surface) 16%, transparent);
    --gsl-border-strong: color-mix(in srgb, var(--gsl-on-surface) 30%, transparent);
    --gsl-bg-subtle:     #F8F9FA;
}


/* ═══════════════════════════════════════════════════════════════
   1.  PAGE-LEVEL
   ═══════════════════════════════════════════════════════════════ */
.gsl-checkout .main {
    padding-top: 0;
}

/* Keep the internal WooCommerce layout fluid within the outer block.
   WordPress and the active theme retain control of the block's width. */
.gsl-checkout .wc-block-components-sidebar-layout {
    max-width: 100%;
}

.gsl-checkout .wc-block-checkout,
.gsl-checkout .wc-block-cart {
    font-family: var(--gsl-font-body);
    color: var(--gsl-on-surface);
}


/* ═══════════════════════════════════════════════════════════════
   2.  ORDER SUMMARY SIDEBAR — card treatment
   ═══════════════════════════════════════════════════════════════ */
.gsl-checkout .wc-block-components-sidebar {
    background: var(--gsl-bg-subtle);
    padding: 0px !important;
    margin-top: 8px;
    align-self: flex-start;
    position: sticky;
    top: 24px;
}

/* More breathing room between form and sidebar on desktop */
@container (min-width: 700px) {
    .gsl-checkout .wc-block-components-sidebar-layout .wc-block-components-main {
        padding-right: 48px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   3.  SECTION HEADINGS
   ═══════════════════════════════════════════════════════════════ */
.gsl-checkout .wc-block-components-checkout-step__title {
    font-family: var(--gsl-font-heading);
    font-weight: var(--wp--custom--heading--weight, 600);
    font-size: clamp(1rem, calc(0.88rem + 0.6vw), 1.5rem);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: var(--wp--custom--heading--line-height, 1.15);
    color: var(--gsl-primary);
    margin: 0;
}

.gsl-checkout .wc-block-components-checkout-step__heading-container {
    border-bottom: 2px solid var(--gsl-secondary);
    padding-bottom: 12px;
    margin-bottom: 24px;
}

.gsl-checkout .wc-block-components-checkout-step {
    margin-bottom: 32px !important;
    padding-bottom: 32px !important;
    border-bottom: 1px solid var(--gsl-border);
}

.gsl-checkout .wc-block-components-checkout-step:last-child {
    border-bottom: none;
    padding-bottom: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
   4.  FORM INPUTS
   ═══════════════════════════════════════════════════════════════ */
.gsl-checkout .wc-block-components-text-input input[type="text"],
.gsl-checkout .wc-block-components-text-input input[type="email"],
.gsl-checkout .wc-block-components-text-input input[type="tel"],
.gsl-checkout .wc-block-components-text-input input[type="number"],
.gsl-checkout .wc-block-components-text-input input[type="password"],
.gsl-checkout .wc-block-components-text-input input[type="url"] {
    font-family: var(--gsl-font-body);
    color: var(--gsl-on-surface);
    background: var(--gsl-surface);
    border: 1px solid var(--gsl-border-strong);
    border-radius: var(--gsl-radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gsl-checkout .wc-block-components-text-input input:focus {
    border-color: var(--gsl-secondary) !important;
    box-shadow: 0 0 0 1px var(--gsl-secondary) !important;
}

.gsl-checkout .wc-block-components-text-input label {
    font-family: var(--gsl-font-body);
    color: color-mix(in srgb, var(--gsl-on-surface) 60%, transparent);
}

.gsl-checkout .wc-block-components-combobox .components-combobox-control input {
    font-family: var(--gsl-font-body);
    border: 1px solid var(--gsl-border-strong);
    border-radius: var(--gsl-radius);
}

.gsl-checkout .wc-block-components-combobox .components-combobox-control input:focus {
    border-color: var(--gsl-secondary) !important;
    box-shadow: 0 0 0 1px var(--gsl-secondary) !important;
}

.gsl-checkout .wc-block-components-textarea {
    font-family: var(--gsl-font-body);
    border: 1px solid var(--gsl-border-strong);
    border-radius: var(--gsl-radius);
}

.gsl-checkout .wc-block-components-textarea:focus {
    border-color: var(--gsl-secondary) !important;
    box-shadow: inset 0 0 0 0.5px var(--gsl-secondary) !important;
}

.gsl-checkout .wc-block-components-text-input.has-error input {
    border-color: var(--gsl-secondary) !important;
}

.gsl-checkout .wc-block-components-validation-error {
    color: var(--gsl-secondary);
}


/* ═══════════════════════════════════════════════════════════════
   5.  BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.gsl-checkout .wc-block-components-checkout-place-order-button,
.gsl-checkout .wc-block-cart__submit-button,
.gsl-checkout .wc-block-components-button.wp-element-button {
    font-family: var(--wp--custom--button--font--family) !important;
    font-weight: var(--wp--custom--button--font--weight, 600) !important;
    font-size: var(--wp--custom--button--font--size, 1.125rem) !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--gsl-primary) !important;
    color: var(--gsl-on-primary) !important;
    border: 2px solid var(--gsl-primary) !important;
    border-radius: var(--gsl-radius) !important;
    padding: var(--wp--custom--button--padding--block, 0.75rem) var(--wp--custom--button--padding--inline, 1.75rem) !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    min-height: 56px;
}

.gsl-checkout .wc-block-components-checkout-place-order-button:hover,
.gsl-checkout .wc-block-cart__submit-button:hover,
.gsl-checkout .wc-block-components-button.wp-element-button:hover {
    background: var(--gsl-secondary) !important;
    border-color: var(--gsl-secondary) !important;
    color: var(--gsl-on-primary) !important;
}

.gsl-checkout .wc-block-components-checkout-place-order-button:focus-visible,
.gsl-checkout .wc-block-cart__submit-button:focus-visible {
    outline: 2px solid var(--gsl-secondary);
    outline-offset: 2px;
}

.gsl-checkout .wc-block-components-checkout-return-to-cart-button {
    font-family: var(--gsl-font-body);
    color: var(--gsl-primary);
    font-weight: 500;
    text-decoration: none;
}

.gsl-checkout .wc-block-components-checkout-return-to-cart-button:hover {
    color: var(--gsl-secondary);
}

.gsl-checkout .wc-block-components-totals-coupon__button {
    font-family: var(--wp--custom--button--font--family) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.8125rem !important;
    background: var(--gsl-primary) !important;
    color: var(--gsl-on-primary) !important;
    border-radius: var(--gsl-radius) !important;
    padding: 0.5rem 1.25rem !important;
    min-height: auto;
    border: 2px solid var(--gsl-primary) !important;
}

.gsl-checkout .wc-block-components-totals-coupon__button:hover {
    background: var(--gsl-secondary) !important;
    border-color: var(--gsl-secondary) !important;
}


/* ═══════════════════════════════════════════════════════════════
   6.  ORDER SUMMARY CONTENT
   ═══════════════════════════════════════════════════════════════ */
.gsl-checkout .wc-block-components-order-summary .wc-block-components-panel__button {
    font-family: var(--gsl-font-heading) !important;
    font-weight: var(--wp--custom--heading--weight, 600) !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gsl-primary);
    font-size: clamp(1rem, calc(0.88rem + 0.6vw), 1.375rem);
}

.gsl-checkout .wc-block-components-order-summary .wc-block-components-order-summary__button-text {
    font-weight: 600;
}

.gsl-checkout .wc-block-components-order-summary-item {
    border-bottom: 1px solid var(--gsl-border);
}

.gsl-checkout .wc-block-components-order-summary-item:last-child {
    border-bottom: none;
}

.gsl-checkout .wc-block-components-order-summary-item__image > img {
    border-radius: var(--gsl-radius);
    border: 1px solid var(--gsl-border);
}

.gsl-checkout .wc-block-components-order-summary-item__quantity {
    background: var(--gsl-secondary) !important;
    color: var(--gsl-on-primary) !important;
    border-color: var(--gsl-secondary) !important;
    box-shadow: 0 0 0 2px var(--gsl-bg-subtle) !important;
    font-weight: 700;
    font-size: 0.6875rem;
}

.gsl-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
    font-family: var(--gsl-font-body);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--gsl-primary);
    text-decoration: none;
}

.gsl-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name:hover {
    color: var(--gsl-secondary);
}

.gsl-checkout .wc-block-components-order-summary-item__total-price {
    font-weight: 600;
    color: var(--gsl-primary);
}


/* ═══════════════════════════════════════════════════════════════
   7.  TOTALS ROWS
   ═══════════════════════════════════════════════════════════════ */
.gsl-checkout .wc-block-components-totals-wrapper {
    border-top-color: var(--gsl-border);
}

.gsl-checkout .wc-block-components-totals-item__label {
    font-weight: 500;
    color: color-mix(in srgb, var(--gsl-on-surface) 72%, transparent);
    font-size: 0.875rem;
}

.gsl-checkout .wc-block-components-totals-item__value {
    font-weight: 600;
    color: var(--gsl-on-surface);
    font-size: 0.875rem;
}

.gsl-checkout .wc-block-components-totals-footer-item {
    border-top: 2px solid var(--gsl-primary) !important;
    padding-top: 16px !important;
    margin-top: 8px;
}

.gsl-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.gsl-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-family: var(--gsl-font-heading);
    font-size: clamp(1rem, calc(0.88rem + 0.6vw), 1.375rem) !important;
    font-weight: var(--wp--custom--heading--weight, 600);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--gsl-primary);
}


/* ═══════════════════════════════════════════════════════════════
   8.  COUPON FORM
   ═══════════════════════════════════════════════════════════════ */
.gsl-checkout .wc-block-components-totals-coupon-link {
    font-family: var(--gsl-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--gsl-primary);
}

.gsl-checkout .wc-block-components-totals-coupon__content input {
    font-family: var(--gsl-font-body);
    border: 1px solid var(--gsl-border-strong);
    border-radius: var(--gsl-radius);
}

.gsl-checkout .wc-block-components-totals-coupon__content input:focus {
    border-color: var(--gsl-secondary);
    box-shadow: 0 0 0 1px var(--gsl-secondary);
    outline: none;
}


/* ═══════════════════════════════════════════════════════════════
   9.  SHIPPING / RADIO CONTROLS
   ═══════════════════════════════════════════════════════════════ */
.gsl-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
    border-color: var(--gsl-secondary) !important;
}

.gsl-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
    background: var(--gsl-secondary) !important;
}

.gsl-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:focus {
    outline-color: var(--gsl-secondary) !important;
}

.gsl-checkout .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
    box-shadow: inset 0 0 0 1.5px var(--gsl-secondary) !important;
}

.gsl-checkout .wc-block-components-radio-control__label {
    font-weight: 600;
}

.gsl-checkout .wc-block-components-radio-control__secondary-label {
    font-weight: 700;
    color: var(--gsl-primary);
}


/* ═══════════════════════════════════════════════════════════════
   10. PAYMENT METHODS
   ═══════════════════════════════════════════════════════════════ */
.gsl-checkout .wc-block-components-payment-method-label {
    font-family: var(--gsl-font-body);
    font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════
   11. EXPRESS CHECKOUT
   ═══════════════════════════════════════════════════════════════ */
.gsl-checkout .wc-block-components-express-payment {
    border: 1px solid var(--gsl-border);
    border-radius: var(--gsl-radius);
    padding: 20px;
    margin-bottom: 32px;
}

.gsl-checkout .wc-block-components-express-payment__title-container {
    font-family: var(--gsl-font-heading);
    font-weight: var(--wp--custom--heading--weight, 600);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.gsl-checkout .wc-block-components-express-payment-continue-rule {
    border-top-color: var(--gsl-border);
}

.gsl-checkout .wc-block-components-express-payment-continue-rule::after {
    color: color-mix(in srgb, var(--gsl-on-surface) 50%, transparent);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════
   12. CHECKBOXES
   ═══════════════════════════════════════════════════════════════ */
.gsl-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
    border-color: var(--gsl-secondary);
}

.gsl-checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark {
    fill: var(--gsl-secondary);
}

.gsl-checkout .wc-block-checkout__terms a {
    color: var(--gsl-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gsl-checkout .wc-block-checkout__terms a:hover {
    color: var(--gsl-primary);
}


/* ═══════════════════════════════════════════════════════════════
   13. NOTICES
   ═══════════════════════════════════════════════════════════════ */
.gsl-checkout .wc-block-components-notice-banner {
    border-radius: var(--gsl-radius);
    font-family: var(--gsl-font-body);
    font-size: 0.875rem;
}

.gsl-checkout .wc-block-components-notice-banner.is-error {
    border-left: 4px solid var(--gsl-secondary);
    background: color-mix(in srgb, var(--gsl-secondary) 6%, white);
}

.gsl-checkout .wc-block-components-notice-banner.is-success {
    border-left: 4px solid #059669;
    background: color-mix(in srgb, #059669 6%, white);
}

.gsl-checkout .wc-block-components-notice-banner.is-info {
    border-left: 4px solid var(--gsl-primary);
    background: color-mix(in srgb, var(--gsl-primary) 6%, white);
}


/* ═══════════════════════════════════════════════════════════════
   14. CART PAGE
   ═══════════════════════════════════════════════════════════════ */
.gsl-checkout .wc-block-cart .wc-block-components-sidebar {
    background: var(--gsl-bg-subtle);
    border: 1px solid var(--gsl-border);
    border-radius: var(--gsl-radius);
    padding: 24px !important;
}

.gsl-checkout .wc-block-cart {
    font-size: var(--wp--preset--font-size--body, 1rem);
    line-height: var(--wp--custom--typography--line-height--body, 1.7);
}

.gsl-checkout .wc-block-cart-items .wc-block-cart-items__header {
    font-family: var(--gsl-font-heading);
    font-weight: var(--wp--custom--heading--weight, 600);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: var(--wp--preset--font-size--body, 1rem);
    line-height: var(--wp--custom--heading--line-height, 1.15);
}

.gsl-checkout .wc-block-cart-items__row {
    border-bottom-color: var(--gsl-border) !important;
}

.gsl-checkout .wc-block-cart-item__image img {
    border-radius: var(--gsl-radius);
    border: 1px solid var(--gsl-border);
}

.gsl-checkout .wc-block-cart-item__product .wc-block-components-product-name {
    font-weight: 600;
    font-size: clamp(1rem, calc(0.95rem + 0.25vw), 1.125rem);
    line-height: var(--wp--custom--typography--line-height--tight, 1.2);
    color: var(--gsl-primary);
    text-decoration: none;
}

.gsl-checkout .wc-block-cart-item__product,
.gsl-checkout .wc-block-cart-item__prices,
.gsl-checkout .wc-block-cart-item__quantity,
.gsl-checkout .wc-block-cart-item__total,
.gsl-checkout .wc-block-components-product-metadata,
.gsl-checkout .wc-block-components-product-price {
    font-size: var(--wp--preset--font-size--body, 1rem);
    line-height: var(--wp--custom--typography--line-height--body, 1.7);
}

.gsl-checkout .wc-block-cart-item__product .wc-block-components-product-name:hover {
    color: var(--gsl-secondary);
}

.gsl-checkout .wc-block-components-quantity-selector {
    border: 1px solid var(--gsl-border-strong);
    border-radius: var(--gsl-radius);
    overflow: hidden;
}

.gsl-checkout .wc-block-components-quantity-selector__button {
    background: var(--gsl-bg-subtle);
    color: var(--gsl-on-surface);
    border: none !important;
    transition: background 0.15s ease;
}

.gsl-checkout .wc-block-components-quantity-selector__button:hover {
    background: color-mix(in srgb, var(--gsl-on-surface) 12%, transparent);
}

.gsl-checkout .wc-block-components-quantity-selector__input {
    font-weight: 600;
    font-size: var(--wp--preset--font-size--body, 1rem) !important;
    color: var(--gsl-on-surface);
}

.gsl-checkout .wc-block-cart-item__remove-link {
    color: var(--gsl-secondary) !important;
    font-size: var(--wp--preset--font-size--small, 0.875rem) !important;
    font-weight: 500;
}

.gsl-checkout .wc-block-cart .wc-block-cart__totals-title {
    font-family: var(--gsl-font-heading);
    font-weight: var(--wp--custom--heading--weight, 600);
    font-size: clamp(1.25rem, calc(1.06rem + 0.9vw), 1.875rem);
    line-height: var(--wp--custom--heading--line-height, 1.15);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.gsl-checkout .wc-block-cart .wc-block-components-totals-item__label,
.gsl-checkout .wc-block-cart .wc-block-components-totals-item__value {
    font-size: var(--wp--preset--font-size--body, 1rem);
}

.gsl-checkout .wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.gsl-checkout .wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: clamp(1.125rem, calc(1rem + 0.6vw), 1.5rem) !important;
}

.gsl-checkout .wc-block-cart__empty-cart__title {
    font-family: var(--gsl-font-heading);
    font-size: var(--wp--preset--font-size--heading-2, clamp(1.5625rem, calc(1.3721rem + 0.9231vw), 2.5rem));
    line-height: var(--wp--custom--heading--line-height, 1.15);
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   15. LOADING STATES
   ═══════════════════════════════════════════════════════════════ */
.gsl-checkout .wc-block-components-loading-mask::after {
    background: color-mix(in srgb, var(--gsl-surface) 80%, transparent);
}


/* ═══════════════════════════════════════════════════════════════
   16. RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@container (max-width: 699px) {
    .gsl-checkout .wc-block-components-sidebar {
        position: static;
        margin-top: 32px;
        padding: 16px !important;
    }

    .gsl-checkout .wc-block-components-checkout-step {
        margin-bottom: 24px !important;
        padding-bottom: 24px !important;
    }

    /* Order summary items: stack price below description
       instead of crushing it into a narrow third column */
    .gsl-checkout .wc-block-components-order-summary-item {
        display: grid !important;
        grid-template-columns: 48px 1fr !important;
        gap: 4px 10px !important;
        align-items: start;
    }

    .gsl-checkout .wc-block-components-order-summary-item__image {
        grid-row: 1 / 3;
        width: 48px !important;
    }

    .gsl-checkout .wc-block-components-order-summary-item__description {
        grid-column: 2;
        min-width: 0;
    }

    .gsl-checkout .wc-block-components-order-summary-item__total-price {
        grid-column: 2;
        text-align: left;
        font-size: 0.8125rem;
    }

    /* Ensure the place-order / submit button spans full width */
    .gsl-checkout .wc-block-components-checkout-place-order-button,
    .gsl-checkout .wc-block-cart__submit-button {
        width: 100% !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   17. TRUST BADGE (injected via React)
   ═══════════════════════════════════════════════════════════════ */
.gsl-trust-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 12px 0;
    margin-top: 12px;
    border-top: 1px solid var(--gsl-border, #e5e7eb);
    font-size: 0.75rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--gsl-on-surface, #1F3F4D) 55%, transparent);
    letter-spacing: 0.02em;
}

.gsl-trust-badge svg {
    opacity: 0.6;
}


/* ═══════════════════════════════════════════════════════════════
   18. PANEL TOGGLES
   ═══════════════════════════════════════════════════════════════ */
.gsl-checkout .wc-block-components-panel__button > .wc-block-components-panel__button-icon {
    fill: var(--gsl-primary);
}