/* filepath: website_sale_aplicoop/static/src/css/layout/pages.css */

/**
 * Page backgrounds and main layout structures
 */

html,
body {
    background-color: transparent !important;
    background: transparent !important;
}

body.website_published {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--primary-color) 30%, white),
        color-mix(in srgb, var(--primary-color) 60%, black)
    ) !important;
}

body.website_published .eskaera-shop-page,
body.website_published .eskaera-checkout-page {
    background: transparent !important;
}

/* Generic page background mixin */
.eskaera-page,
.eskaera-shop-page,
.eskaera-generic-page,
.eskaera-checkout-page {
    min-height: 100vh;
    position: relative;
}

.eskaera-page,
.eskaera-generic-page {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--primary-color) 10%, white),
        color-mix(in srgb, var(--primary-color) 70%, black)
    ) !important;
}

.eskaera-shop-page {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--primary-color) 10%, white),
        color-mix(in srgb, var(--primary-color) 10%, rgb(135, 135, 135))
    ) !important;
}

.eskaera-checkout-page {
    background: linear-gradient(
        -135deg,
        color-mix(in srgb, var(--primary-color) 0%, white),
        color-mix(in srgb, var(--primary-color) 60%, black)
    ) !important;
}

.eskaera-page::before,
.eskaera-generic-page::before {
    background-image: radial-gradient(
            circle at 20% 50%,
            color-mix(in srgb, var(--primary-color, white) 20%, transparent) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 80% 80%,
            color-mix(in srgb, var(--primary-color) 25%, transparent) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 40% 20%,
            color-mix(in srgb, var(--primary-color, white) 15%, transparent) 0%,
            transparent 50%
        );
}

.eskaera-shop-page::before {
    background-image: radial-gradient(
            circle at 15% 30%,
            color-mix(in srgb, var(--primary-color, white) 18%, transparent) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 85% 70%,
            color-mix(in srgb, var(--primary-color) 22%, transparent) 0%,
            transparent 50%
        );
}

.eskaera-checkout-page::before {
    background-image: radial-gradient(
            circle at 20% 50%,
            color-mix(in srgb, var(--primary-color, white) 20%, transparent) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 80% 80%,
            color-mix(in srgb, var(--primary-color) 25%, transparent) 0%,
            transparent 50%
        );
}

.eskaera-page::before,
.eskaera-shop-page::before,
.eskaera-generic-page::before,
.eskaera-checkout-page::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
}

.eskaera-page > .container,
.eskaera-shop-page > .container,
.eskaera-generic-page > div,
.eskaera-checkout-page > .container {
    position: relative;
    z-index: 1;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

#wrap {
    padding: 2rem 0;
}

.group-order-shop {
    background-color: transparent;
}
