/*
 * Aurora for the Website Builder: the company website gets Aurora's glass cards and soft
 * aurora light, so the website and the client area look like one product.
 * Copyright RapidNet Ltd. Sold on the Nuvabill Marketplace; one license per site.
 */

:root {
    --au-bg: #f4f5fa;
    --au-glass: rgb(255 255 255 / 0.74);
    --au-glass-line: rgb(255 255 255 / 0.95);
    --au-shadow: 0 1px 1px rgb(16 19 42 / 0.03), 0 16px 40px -20px rgb(16 19 42 / 0.2);
    --nb-bg: var(--au-bg);
    --nb-ink: #10132a;
    --nb-muted: #5c6080;
    --nb-faint: #686d8e;
    --nb-line: #e9ebf3;
    --nb-chrome: #10132a;
    --nb-chrome-2: #0b0d1a;
    --nb-chrome-line: #252a48;
    --nb-chrome-muted: #b5b9d6;
    --nb-radius: 14px;
    --nb-radius-sm: 10px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --au-bg: #0b0d1a;
        --au-glass: rgb(20 23 44 / 0.72);
        --au-glass-line: rgb(255 255 255 / 0.08);
        --au-shadow: 0 1px 1px rgb(0 0 0 / 0.2), 0 16px 40px -20px rgb(0 0 0 / 0.6);
        --nb-ink: #eceefb;
        --nb-muted: #a3a8c7;
        --nb-faint: #8d92b3;
        --nb-line: #252a48;
        --nb-surface: #14172c;
        --nb-surface-2: #191d36;
        --nb-chrome: #070916;
    }
}

:root[data-theme='dark'] {
    --au-bg: #0b0d1a;
    --au-glass: rgb(20 23 44 / 0.72);
    --au-glass-line: rgb(255 255 255 / 0.08);
    --au-shadow: 0 1px 1px rgb(0 0 0 / 0.2), 0 16px 40px -20px rgb(0 0 0 / 0.6);
    --nb-ink: #eceefb;
    --nb-muted: #a3a8c7;
    --nb-faint: #8d92b3;
    --nb-line: #252a48;
    --nb-surface: #14172c;
    --nb-surface-2: #191d36;
    --nb-chrome: #070916;
}

.wb {
    --wb-card: var(--au-glass);
    --wb-card-line: var(--au-glass-line);
}

/* Soft aurora light behind the top of every page, as in the client area. */
.wb::before {
    content: '';
    position: fixed;
    inset: -20vh -10vw auto;
    height: 70vh;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(40% 50% at 20% 30%, color-mix(in srgb, var(--nb-accent) 30%, transparent), transparent 70%),
        radial-gradient(35% 45% at 80% 20%, rgb(45 212 191 / 0.22), transparent 70%),
        radial-gradient(30% 40% at 55% 60%, rgb(244 114 182 / 0.14), transparent 70%);
    filter: blur(30px);
}

.wb-bg-page,
.wb-bg-soft {
    background: transparent;
}

.wb-bg-soft {
    background: color-mix(in srgb, var(--nb-surface) 45%, transparent);
}

.wb-header {
    background: var(--au-glass);
    border-bottom-color: var(--au-glass-line);
}

.wb-plan,
.wb-card,
.wb-tld,
.wb-faq details,
.wb-table-wrap {
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: var(--au-shadow);
}

.wb-bg-dark {
    background:
        radial-gradient(50% 70% at 20% 0%, color-mix(in srgb, var(--nb-accent) 35%, transparent), transparent 70%),
        radial-gradient(40% 60% at 90% 10%, rgb(45 212 191 / 0.18), transparent 70%),
        var(--wb-dark);
}

.wb-btn-primary {
    box-shadow: 0 10px 24px -12px var(--nb-accent);
}