/* CHROME: toast, confirm dialog, modal (coupon/promo/quick-preview/
 * variant-picker dialogs, all built on the shared .eco-modal-* skeleton).
 * Extracted verbatim from themes/default/index.html — 99-100% identical across
 * all 7 themes today. NOT opt-out-able (see PRD Bagian I): these overlays surface
 * on every page in every theme, so a partial exclude would leave holes rather
 * than a real redesign. A theme wanting a different modal feel restyles specific
 * selectors in its own CSS, which wins automatically (chrome is layered, theme
 * CSS is not — see PRD Bagian II).
 *
 * CART SHEET moved OUT of this file — resources/css/chrome/cart-sheet.css
 * now owns .eco-cart-sheet-* (Fase 2 of docs/PRD-primitive-headless-dan-
 * migrasi-vanilla.md, superseding the old Alpine-based
 * components/ecommerce/cart-sheet.blade.php). Pure CSS there, not @apply —
 * see that file's header for why it still lives under chrome/ despite being
 * pure CSS. Still @layer chrome, still the same class names, so every
 * theme's existing .eco-cart-sheet-* override keeps winning exactly as
 * before (PRD Keputusan 1 + 2).
 *
 * This chunk is compiled standalone (see resources/css/chrome/_tokens.css's own
 * header comment) so it keeps its own copy of every plain Tailwind design token
 * its rules below actually use — only what's referenced via var(), nothing more.
 */
:root {
    --color-foreground: #17140f;
    --color-background: #fff;
    --color-danger: var(--color-rose-700);
    --color-rose-700: oklch(51.4% 0.222 16.935);
    --color-success: var(--color-green-700);
    --color-green-700: oklch(52.7% 0.154 150.069);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --font-weight-medium: 500;
    --tracking-widest: 0.1em;
    --leading-snug: 1.375;
    --default-transition-duration: 0.15s;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@layer chrome {
    /* TOAST moved OUT — resources/css/chrome/toast.css now owns .eco-toast
     * (Fase 3 of docs/PRD-primitive-headless-dan-migrasi-vanilla.md,
     * superseding the old Alpine-based components/ecommerce/toast.blade.php).
     * Same reasoning as cart-sheet: pure CSS, same class name, still
     * @layer chrome — see that file's header. */

    /* CONFIRM DIALOG */
    [data-component="confirm-dialog"] {
        position: fixed;
        inset: 0;
        z-index: 60;
        display: flex;
        align-items: center;
        justify-content: center;
        .eco-modal-overlay {
            position: fixed;
            inset: 0;
            background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
        }
        .eco-modal-card {
            position: relative;
            z-index: 10;
            background-color: var(--color-background);
            border: 1px solid color-mix(in oklab, var(--color-foreground) 20%, transparent);
            width: 22rem;
        }
        .eco-modal-body {
            display: flex;
            flex-direction: column;
            gap: calc(var(--spacing) * 3);
            padding: calc(var(--spacing) * 6);
            text-align: center;
            .eco-modal-title {
                font-weight: var(--font-weight-medium);
            }
            .eco-modal-text {
                font-size: var(--text-sm);
                line-height: var(--text-sm--line-height);
                opacity: .6;
                margin-top: calc(var(--spacing) * -1);
            }
            .eco-modal-footer {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: calc(var(--spacing) * 2);
                padding-top: calc(var(--spacing) * 2);
            }
        }
    }

    /* MODAL */
    .eco-modal-overlay {
        position: fixed;
        inset: 0;
        background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
        z-index: 50;
    }
    .eco-modal.eco-modal-open {
        position: fixed;
        inset: 0;
        overflow-y: auto;
        z-index: 60;
        display: flex;
        justify-content: center;
        padding-block: calc(var(--spacing) * 16);
        align-items: flex-start;
        .eco-modal-card {
            z-index: 60;
            position: relative;
            display: flex;
            flex-direction: column;
            background-color: var(--color-background);
            width: 60rem;
            border: 1px solid color-mix(in oklab, var(--color-foreground) 30%, transparent);
            align-self: flex-start;
            .eco-modal-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-inline: calc(var(--spacing) * 5);
                padding-block: calc(var(--spacing) * 4);
                border-bottom: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
                .eco-modal-title {
                    font-weight: var(--font-weight-medium);
                }
                .eco-modal-close {
                    position: static;
                    width: calc(var(--spacing) * 8);
                    height: calc(var(--spacing) * 8);
                    background-color: transparent;
                    border-width: 0;
                    color: var(--color-foreground);
                    opacity: .4;
                    transition-property: opacity;
                    transition-timing-function: var(--default-transition-timing-function);
                    transition-duration: var(--default-transition-duration);
                }
                @media (hover: hover) {
                    .eco-modal-close:hover {
                        opacity: 1;
                    }
                }
            }
            .eco-modal-body {
                display: flex;
                flex-direction: column;
                gap: calc(var(--spacing) * 4);
                padding-inline: calc(var(--spacing) * 5);
                padding-block: calc(var(--spacing) * 4);
            }
            .eco-modal-footer {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: calc(var(--spacing) * 2);
                padding-inline: calc(var(--spacing) * 5);
                padding-block: calc(var(--spacing) * 4);
                border-top: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
            }
        }
        .eco-coupon-dialog-card {
            width: 32rem;
            .eco-coupon-dialog-section {
                display: flex;
                flex-direction: column;
                gap: calc(var(--spacing) * 2);
                padding-bottom: calc(var(--spacing) * 4);
                border-bottom: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
                &:last-child {
                    border-width: 0;
                    padding-bottom: 0;
                }
                .eco-coupon-dialog-label {
                    font-size: var(--text-sm);
                    line-height: var(--text-sm--line-height);
                    font-weight: var(--font-weight-medium);
                }
                .eco-coupon-dialog-hint {
                    font-size: var(--text-xs);
                    line-height: var(--text-xs--line-height);
                    opacity: .5;
                }
                .eco-cart-coupon-form {
                    display: flex;
                    gap: calc(var(--spacing) * 2);
                    input {
                        flex: 1;
                    }
                }
                .eco-field-error {
                    font-size: var(--text-xs);
                    line-height: var(--text-xs--line-height);
                    color: var(--color-danger);
                }
                .eco-coupon-dialog-option {
                    display: flex;
                    align-items: center;
                    gap: calc(var(--spacing) * 3);
                    padding: calc(var(--spacing) * 3);
                    border-bottom: 1px solid color-mix(in oklab, var(--color-foreground) 6%, transparent);
                    cursor: pointer;
                    &:last-child {
                        border-width: 0;
                    }
                    &:hover {
                        background-color: color-mix(in oklab, var(--color-foreground) 2%, transparent);
                    }
                    &.eco-coupon-dialog-option--selected {
                        background-color: color-mix(in oklab, var(--color-foreground) 3%, transparent);
                        .eco-shipping-radio-dot {
                            border-color: var(--color-foreground);
                            &::after {
                                opacity: 1;
                            }
                        }
                    }
                    .eco-shipping-radio {
                        display: none;
                    }
                    .eco-shipping-radio-dot {
                        position: relative;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex: none;
                        width: calc(var(--spacing) * 4);
                        height: calc(var(--spacing) * 4);
                        border-radius: 9999px;
                        border: 1px solid color-mix(in oklab, var(--color-foreground) 30%, transparent);
                        &::after {
                            content: "";
                            width: calc(var(--spacing) * 2);
                            height: calc(var(--spacing) * 2);
                            border-radius: 9999px;
                            background-color: var(--color-foreground);
                            opacity: 0;
                            transition-property: opacity;
                            transition-timing-function: var(--default-transition-timing-function);
                            transition-duration: var(--default-transition-duration);
                        }
                    }
                    .eco-coupon-dialog-info {
                        display: flex;
                        flex: 1;
                        flex-direction: column;
                        gap: calc(var(--spacing) * .5);
                        min-width: 0;
                        .eco-coupon-dialog-name-row {
                            display: flex;
                            align-items: center;
                            gap: calc(var(--spacing) * 1.5);
                            flex-wrap: wrap;
                        }
                        .eco-coupon-option-name {
                            font-size: var(--text-sm);
                            line-height: var(--text-sm--line-height);
                            font-weight: var(--font-weight-medium);
                        }
                        .eco-coupon-option-desc {
                            font-size: var(--text-xs);
                            line-height: var(--text-xs--line-height);
                            opacity: .6;
                        }
                        .eco-coupon-option-badge {
                            font-size: 10px;
                            padding-inline: calc(var(--spacing) * 1.5);
                            padding-block: calc(var(--spacing) * .5);
                            border: 1px solid color-mix(in oklab, var(--color-foreground) 20%, transparent);
                            opacity: .7;
                            &.eco-coupon-option-badge--product {
                                border-color: color-mix(in oklab, var(--color-foreground) 30%, transparent);
                            }
                        }
                    }
                    .eco-coupon-option-discount {
                        flex: none;
                        font-size: var(--text-sm);
                        line-height: var(--text-sm--line-height);
                        font-weight: var(--font-weight-medium);
                    }
                }
            }
        }
        .eco-promo-dialog-card {
            width: 26rem;
            padding: 0;
            position: relative;
            overflow: hidden;
            .eco-modal-close {
                position: absolute;
                top: calc(var(--spacing) * 3);
                inset-inline-end: calc(var(--spacing) * 3);
                z-index: 10;
                width: calc(var(--spacing) * 7);
                height: calc(var(--spacing) * 7);
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: .4;
                transition-property: opacity;
                transition-timing-function: var(--default-transition-timing-function);
                transition-duration: var(--default-transition-duration);
                svg { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); }
            }
            @media (hover: hover) {
                .eco-modal-close:hover {
                    opacity: .9;
                }
            }
            .eco-promo-dialog {
                display: flex;
                flex-direction: column;
                .eco-promo-dialog-applied {
                    padding-inline: calc(var(--spacing) * 5);
                    padding-block: calc(var(--spacing) * 2.5);
                    font-size: var(--text-xs);
                    line-height: var(--text-xs--line-height);
                    color: color-mix(in oklab, var(--color-success) 80%, transparent);
                    background-color: color-mix(in oklab, var(--color-success) 4%, transparent);
                    border-bottom: 1px solid color-mix(in oklab, var(--color-success) 20%, transparent);
                }
                .eco-promo-dialog-head {
                    display: flex;
                    flex-direction: column;
                    gap: calc(var(--spacing) * 1);
                    padding-inline: calc(var(--spacing) * 5);
                    padding-top: calc(var(--spacing) * 5);
                    padding-bottom: calc(var(--spacing) * 4);
                }
                .eco-promo-dialog-type {
                    font-size: 10px;
                    text-transform: uppercase;
                    letter-spacing: var(--tracking-widest);
                    opacity: .4;
                    font-weight: var(--font-weight-medium);
                }
                .eco-promo-dialog-name {
                    font-size: var(--text-base);
                    line-height: var(--leading-snug);
                    font-weight: var(--font-weight-medium);
                    margin-top: calc(var(--spacing) * .5);
                }
                .eco-promo-dialog-tagline {
                    font-size: var(--text-sm);
                    line-height: var(--text-sm--line-height);
                    opacity: .6;
                    margin-top: calc(var(--spacing) * .5);
                }
                .eco-promo-dialog-rules {
                    display: flex;
                    flex-direction: column;
                    gap: calc(var(--spacing) * 2);
                    padding-inline: calc(var(--spacing) * 5);
                    padding-block: calc(var(--spacing) * 4);
                    background-color: color-mix(in oklab, var(--color-foreground) 3%, transparent);
                    border-top: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
                    li {
                        font-size: var(--text-sm);
                        line-height: var(--text-sm--line-height);
                        opacity: .6;
                        &::before {
                            content: "—";
                            margin-inline-end: calc(var(--spacing) * 2);
                            opacity: .4;
                        }
                    }
                }
                .eco-promo-dialog-browse {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-inline: calc(var(--spacing) * 5);
                    padding-block: calc(var(--spacing) * 3.5);
                    font-size: var(--text-sm);
                    line-height: var(--text-sm--line-height);
                    font-weight: var(--font-weight-medium);
                    border-top: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
                    transition-property: color, background-color, border-color;
                    transition-timing-function: var(--default-transition-timing-function);
                    transition-duration: var(--default-transition-duration);
                    svg { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); opacity: .5; }
                }
                @media (hover: hover) {
                    .eco-promo-dialog-browse:hover {
                        background-color: color-mix(in oklab, var(--color-foreground) 3%, transparent);
                    }
                }
            }
        }
        .eco-preview-body {
            padding: calc(var(--spacing) * 5);
            .eco-preview-wishlist {
                position: absolute;
                top: 0;
                inset-inline-start: 50%;
                margin-inline-start: calc(var(--spacing) * -12);
                margin-top: calc(var(--spacing) * 7);
                width: calc(var(--spacing) * 10);
                height: calc(var(--spacing) * 10);
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: var(--color-background);
                color: var(--color-danger);
                transition-property: all;
                transition-timing-function: var(--default-transition-timing-function);
                transition-duration: var(--default-transition-duration);
                opacity: .7;
                border: 1px solid color-mix(in oklab, var(--color-foreground) 30%, transparent);
                &:hover {
                    opacity: 1;
                }
                &.eco-wishlisted svg {
                    fill: var(--color-danger);
                }
            }
        }
    }
    body:has(.eco-modal-open),
    body.eco-overflow-hidden {
        overflow: hidden;
    }
    .eco-modal-close {
        position: absolute;
        top: 0;
        inset-inline-end: 0;
        margin-top: 0;
        margin-inline-end: calc(var(--spacing) * -20);
        width: calc(var(--spacing) * 10);
        height: calc(var(--spacing) * 10);
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        cursor: pointer;
        border: 1px solid color-mix(in oklab, var(--color-white) 50%, transparent);
        color: var(--color-white);
        display: flex;
        align-items: center;
        justify-content: center;
        &:hover {
            background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
            svg {
                rotate: 180deg;
            }
        }
        svg {
            width: calc(var(--spacing) * 8);
            height: calc(var(--spacing) * 8);
            transition-property: all;
            transition-timing-function: var(--default-transition-timing-function);
            transition-duration: var(--default-transition-duration);
            opacity: .9;
        }
    }
}