/*
 * R164: transparent, static glass for ChatGPT pricing cards only.
 * Load after chatgpt-pricing-glass-r157.css. Existing geometry, type and
 * purchase controls stay in the landing stylesheet.
 */
.nx-chatgpt-page .nx-cgpt .nx-cgpt-plan.nexxa-service {
    --cg-muted: #c4bdd2;
    --cg-soft: #a69eb8;
    --cg-liquid-solid: #14111f;
    --cg-liquid-tint: rgba(18, 15, 29, .36);
    --cg-liquid-edge: rgba(211, 199, 244, .22);
    --cg-liquid-highlight: rgba(255, 255, 255, .075);
    --cg-liquid-sheen: rgba(225, 213, 255, .045);
    --cg-liquid-inset: rgba(255, 255, 255, .09);
    --cg-liquid-shadow: rgba(2, 1, 9, .16);
    --cg-liquid-blur: 8px;
    border-color: var(--cg-liquid-edge);
    background: var(--cg-liquid-solid);
    box-shadow:
        inset 0 1px 0 var(--cg-liquid-inset),
        inset 0 -1px 0 rgba(255, 255, 255, .025),
        0 12px 28px -18px var(--cg-liquid-shadow);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

html.nx-chatgpt-page[data-nx-theme="light"] .nx-cgpt .nx-cgpt-plan.nexxa-service {
    --cg-muted: #575064;
    --cg-soft: #655c75;
    --cg-liquid-solid: #fff;
    --cg-liquid-tint: rgba(255, 255, 255, .42);
    --cg-liquid-edge: rgba(120, 95, 160, .24);
    --cg-liquid-highlight: rgba(255, 255, 255, .28);
    --cg-liquid-sheen: rgba(255, 255, 255, .18);
    --cg-liquid-inset: rgba(255, 255, 255, .72);
    --cg-liquid-shadow: rgba(68, 44, 100, .12);
}

/* A single modest blur per card; highlights are painted into the surface. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nx-chatgpt-page .nx-cgpt .nx-cgpt-plan.nexxa-service {
        background:
            linear-gradient(155deg, var(--cg-liquid-sheen), transparent 42%),
            linear-gradient(180deg, var(--cg-liquid-highlight), transparent 26%),
            var(--cg-liquid-tint);
        -webkit-backdrop-filter: blur(var(--cg-liquid-blur)) saturate(108%);
        backdrop-filter: blur(var(--cg-liquid-blur)) saturate(108%);
    }
}

/* Preserve the existing stacked mobile layout with a smaller filter radius. */
@media (max-width: 760px) {
    .nx-chatgpt-page .nx-cgpt .nx-cgpt-plan.nexxa-service {
        --cg-liquid-blur: 6px;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .nx-chatgpt-page .nx-cgpt .nx-cgpt-plan.nexxa-service {
        background: var(--cg-liquid-solid);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (forced-colors: active) {
    .nx-chatgpt-page .nx-cgpt .nx-cgpt-plan.nexxa-service {
        border-color: CanvasText;
        background: Canvas;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}