/* CHROME: checkout success page.
 * Extracted verbatim from themes/default/index.html — 100% identical across all
 * 7 themes today.
 *
 * 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-success: var(--color-green-700);
    --color-green-700: oklch(52.7% 0.154 150.069);
    --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-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --font-weight-medium: 500;
}
@layer chrome {
    [data-page="checkout-success"] {
        /* Same responsive max-width ladder as the shared .container utility
           (resources/css/chrome/primitives.css) — HIGH RISK selector, copied
           verbatim, not re-derived (see primitives.css's own note). */
        width: 100%;
        margin-inline: auto;
        .eco-success-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: calc(var(--spacing) * 5);
            border: 1px solid color-mix(in oklab, var(--color-foreground) 20%, transparent);
            width: 38rem;
            padding-inline: calc(var(--spacing) * 8);
            padding-block: calc(var(--spacing) * 12);
            margin-top: calc(var(--spacing) * 12);
            margin-bottom: calc(var(--spacing) * 20);
            margin-inline: auto;
            text-align: center;
        }
        .eco-success-icon svg {
            width: calc(var(--spacing) * 16);
            height: calc(var(--spacing) * 16);
            stroke-width: .8px;
            color: var(--color-success);
        }
        .eco-success-title {
            font-size: var(--text-2xl);
            line-height: var(--text-2xl--line-height);
            font-weight: var(--font-weight-medium);
            margin-top: calc(var(--spacing) * -1);
        }
        .eco-success-text {
            opacity: .6;
            margin-top: calc(var(--spacing) * -2);
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
        }
        .eco-success-order-num {
            font-weight: var(--font-weight-medium);
            border: 1px solid color-mix(in oklab, var(--color-foreground) 20%, transparent);
            padding-inline: calc(var(--spacing) * 4);
            padding-block: calc(var(--spacing) * 1.5);
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
        }
        .eco-success-va-card {
            display: flex;
            flex-direction: column;
            gap: calc(var(--spacing) * 1.5);
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            width: 100%;
            border: 1px solid color-mix(in oklab, var(--color-foreground) 20%, transparent);
            padding: calc(var(--spacing) * 4);
            .eco-success-va-label {
                opacity: .6;
            }
            .eco-success-va-number {
                font-weight: var(--font-weight-medium);
                font-size: var(--text-xl);
                line-height: var(--text-xl--line-height);
            }
            .eco-success-va-hint {
                font-size: var(--text-xs);
                line-height: var(--text-xs--line-height);
                opacity: .5;
                margin-top: calc(var(--spacing) * 1);
            }
        }
        .eco-success-qr-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: calc(var(--spacing) * 4);
            .eco-success-qr-label {
                font-size: var(--text-sm);
                line-height: var(--text-sm--line-height);
                opacity: .7;
            }
            .eco-success-qr-img {
                width: calc(var(--spacing) * 44);
                height: calc(var(--spacing) * 44);
            }
            .eco-success-qr-download {
                margin-top: calc(var(--spacing) * 3);
                font-size: var(--text-sm);
                line-height: var(--text-sm--line-height);
                border: 1px solid color-mix(in oklab, var(--color-foreground) 30%, transparent);
                padding-inline: calc(var(--spacing) * 4);
                padding-block: calc(var(--spacing) * 2);
                cursor: pointer;
            }
            @media (hover: hover) {
                .eco-success-qr-download:hover {
                    background-color: color-mix(in oklab, var(--color-foreground) 5%, transparent);
                }
            }
        }
        .eco-success-meta {
            display: flex;
            width: 100%;
            border: 1px solid color-mix(in oklab, var(--color-foreground) 15%, transparent);
            & > :not(:last-child) {
                border-inline-end: 1px solid color-mix(in oklab, var(--color-foreground) 15%, transparent);
            }
            .eco-success-meta-item {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: calc(var(--spacing) * .5);
                padding-block: calc(var(--spacing) * 3);
                padding-inline: calc(var(--spacing) * 2);
            }
            .eco-success-meta-label {
                font-size: var(--text-xs);
                line-height: var(--text-xs--line-height);
                opacity: .5;
            }
            .eco-success-meta-val {
                font-size: var(--text-sm);
                line-height: var(--text-sm--line-height);
                font-weight: var(--font-weight-medium);
            }
        }
        .eco-success-steps {
            display: flex;
            align-items: flex-start;
            width: 100%;
            gap: 0;
            margin-top: calc(var(--spacing) * 2);
            .eco-success-step {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: calc(var(--spacing) * 2);
                flex: 1;
                .eco-success-step-dot {
                    width: calc(var(--spacing) * 8);
                    height: calc(var(--spacing) * 8);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 1px solid color-mix(in oklab, var(--color-foreground) 20%, transparent);
                    background-color: color-mix(in oklab, var(--color-foreground) 3%, transparent);
                    svg { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); opacity: .4; }
                }
                .eco-success-step-label {
                    font-size: var(--text-xs);
                    line-height: var(--text-xs--line-height);
                    opacity: .5;
                    text-align: center;
                }
                &.eco-success-step--done {
                    .eco-success-step-dot {
                        border-color: color-mix(in oklab, var(--color-success) 40%, transparent);
                        background-color: color-mix(in oklab, var(--color-success) 5%, transparent);
                        svg { opacity: 1; color: var(--color-success); }
                    }
                    .eco-success-step-label {
                        opacity: .8;
                    }
                }
            }
            .eco-success-step-line {
                flex: 1;
                height: 1px;
                background-color: color-mix(in oklab, var(--color-foreground) 15%, transparent);
                margin-top: calc(var(--spacing) * 4);
                margin-inline: calc(var(--spacing) * 1);
            }
        }
        .eco-success-actions {
            display: flex;
            gap: calc(var(--spacing) * 2);
            margin-top: calc(var(--spacing) * 2);
        }
    }
    @media (min-width: 40rem) {
        [data-page="checkout-success"] { max-width: 40rem; }
    }
    @media (min-width: 48rem) {
        [data-page="checkout-success"] { max-width: 48rem; }
    }
    @media (min-width: 64rem) {
        [data-page="checkout-success"] { max-width: 64rem; }
    }
    @media (min-width: 80rem) {
        [data-page="checkout-success"] { max-width: 80rem; }
    }
    @media (min-width: 96rem) {
        [data-page="checkout-success"] { max-width: 96rem; }
    }
}