/**
 * Checkout + cart layer — Woo's own CSS is off on these pages, so this covers what style.css has no class for:
 * summary lines, shipping / payment lists, WooCommerce notices, the blockUI overlay, validation state.
 */
@layer components {
    .screen-reader-text {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* ---------- Fields ---------- */
    .woocommerce-checkout .woocommerce-input-wrapper {
        display: block;
    }

    .woocommerce-checkout .mj-field__input {
        inline-size: 100%;
    }

    .woocommerce-checkout .required {
        color: var(--color-danger);
        text-decoration: none;
    }

    .woocommerce-checkout .optional {
        font-size: var(--text-caption);
        font-weight: var(--weight-regular);
        color: var(--color-text-muted);
    }

    .woocommerce-checkout .woocommerce-invalid .mj-field__input {
        border-color: var(--color-danger);
    }

    .woocommerce-checkout .mj-check {
        display: flex;
        align-items: flex-start;
        gap: var(--space-inline);
    }

    /* ---------- Summary ---------- */
    .mj-lines {
        display: flex;
        flex-direction: column;
        gap: var(--space-inset);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mj-line {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-inset);
        margin: 0;

        dd {
            margin: 0;
        }
    }

    .woocommerce-shipping-methods,
    .wc_payment_methods {
        display: flex;
        flex-direction: column;
        gap: var(--space-inline);
        margin: 0;
        padding: 0;
        list-style: none;

        input[type="radio"] {
            accent-color: var(--color-accent);
        }

        label {
            cursor: pointer;
        }
    }

    .wc_payment_method .payment_box {
        margin-block-start: var(--space-inline);
        color: var(--color-text-muted);

        p {
            margin: 0;
        }
    }

    /* ---------- WooCommerce notices ---------- */
    .woocommerce-error,
    .woocommerce-message,
    .woocommerce-info {
        margin: 0 0 var(--space-inset);
        padding: var(--space-inset) var(--space-group);
        list-style: none;
        border-inline-start: var(--border-strong) solid var(--color-accent);
        border-radius: var(--radius-default);
        background: var(--color-surface);
        font-size: var(--text-body);

        li {
            margin: 0;
        }

        a {
            font-weight: var(--weight-bold);
        }
    }

    .woocommerce-error {
        border-inline-start-color: var(--color-danger);
    }

    /* jQuery blockUI paints a white veil while totals refresh */
    .blockUI.blockOverlay {
        background: var(--color-background) !important;
        opacity: 0.6 !important;
        border-radius: var(--radius-large);
    }
}

@layer components {

    /* ---------- Order item meta (wc_display_item_meta) ---------- */
    .wc-item-meta {
        margin: 0;
        padding: 0;
        list-style: none;

        p {
            display: inline;
            margin: 0;
        }
    }

    /* ---------- Cart rows ---------- */
    .mj-cart-line {
        flex-wrap: wrap;
        align-items: center;

        .product-thumbnail img {
            inline-size: 5rem;
            block-size: 5rem;
            object-fit: contain;
            border-radius: var(--radius-default);
            background: var(--color-surface);
        }

        .product-name {
            flex: 1 1 12rem;
        }

        .product-quantity .qty {
            inline-size: 5rem;
            text-align: center;
        }

        .product-remove a.remove {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            inline-size: var(--size-action-md);
            block-size: var(--size-action-md);
            border: var(--border-default) solid var(--color-border-control);
            border-radius: var(--radius-circle);
            color: var(--color-text-muted);
            font-size: var(--text-title-1);
            line-height: 1;
            text-decoration: none;

            &:hover {
                border-color: var(--color-danger);
                color: var(--color-danger);
            }
        }
    }

    .woocommerce-cart-form .coupon .mj-field__input {
        inline-size: 12rem;
    }
}

@layer pages {
    @media (min-width: 1024px) {
        .mj-checkout__summary {
            position: sticky;
            inset-block-start: calc(var(--size-header-topbar, 4.5rem) + var(--space-inset));
        }
    }
}