/* Offer page dressed in a Gymex app theme (html[data-offer-theme], set by
   offer-themes.js). Colours come from CSS variables; this file swaps the parts
   of theme.css that hard-code the Night Summit blues: the sky scene, snow,
   icy headlines, glacier buttons and the dark nav/footer bands. */

/* Sky: the theme's gradient with an accent glow on the horizon, a moon in the
   accent colour, and neutral (black, translucent) ridges that sit on any palette. */
html[data-offer-theme] body::before {
    background-image:
        radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.55), transparent 100%),
        radial-gradient(1.5px 1.5px at 64% 14%, rgba(255,255,255,0.45), transparent 100%),
        radial-gradient(1px 1px at 38% 8%, rgba(255,255,255,0.4), transparent 100%),
        radial-gradient(1px 1px at 88% 32%, rgba(255,255,255,0.3), transparent 100%),
        radial-gradient(1px 1px at 27% 30%, rgba(255,255,255,0.25), transparent 100%),
        radial-gradient(1px 1px at 72% 6%, rgba(255,255,255,0.35), transparent 100%),
        radial-gradient(1px 1px at 7% 38%, rgba(255,255,255,0.3), transparent 100%),
        radial-gradient(1px 1px at 51% 24%, rgba(255,255,255,0.25), transparent 100%),
        radial-gradient(circle at 81% 12%, var(--accent) 0, var(--accent) 22px, transparent 26px),
        radial-gradient(circle at 81% 12%, var(--accent-glow) 0, transparent 140px),
        radial-gradient(ellipse 100% 44% at 50% 104%, var(--accent-glow), transparent 70%),
        linear-gradient(180deg, transparent 60%, var(--accent-dim) 72%, transparent 88%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 280' preserveAspectRatio='none'%3E%3Cpath fill='%23000' opacity='0.55' d='M0 280 L0 190 L110 128 L200 168 L320 76 L410 140 L540 48 L640 118 L760 78 L900 158 L1040 70 L1170 156 L1300 108 L1440 170 L1440 280 Z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300' preserveAspectRatio='none'%3E%3Cpath fill='%23000' opacity='0.35' d='M0 300 L0 170 L140 105 L280 165 L430 70 L560 150 L700 55 L840 140 L990 80 L1140 160 L1280 95 L1440 150 L1440 300 Z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23000' opacity='0.2' d='M0 320 L0 200 L130 140 L270 195 L420 100 L570 175 L720 75 L880 165 L1040 105 L1200 180 L1340 130 L1440 165 L1440 320 Z'/%3E%3C/svg%3E"),
        linear-gradient(180deg, var(--theme-g3) 0%, var(--theme-g1) 40%, var(--theme-g2) 85%, var(--theme-g1) 100%);
}
html[data-offer-theme-mode="light"] body::before {
    /* No stars or moon in daylight themes; keep the glow and ridges soft. */
    background-image:
        radial-gradient(ellipse 100% 44% at 50% 104%, var(--accent-glow), transparent 70%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 280' preserveAspectRatio='none'%3E%3Cpath fill='%23000' opacity='0.08' d='M0 280 L0 190 L110 128 L200 168 L320 76 L410 140 L540 48 L640 118 L760 78 L900 158 L1040 70 L1170 156 L1300 108 L1440 170 L1440 280 Z'/%3E%3C/svg%3E"),
        linear-gradient(180deg, var(--theme-g2) 0%, var(--theme-g1) 70%, var(--theme-g3) 100%);
    background-size: 100% 100%, 100% min(30vh, 340px), 100% 100%;
    background-position: bottom, bottom, top;
}

/* Snow only for the winter themes. */
html[data-offer-theme]:not([data-offer-theme="snowy"]):not([data-offer-theme="snowy-christmas"]) body::after,
html[data-offer-theme]:not([data-offer-theme="snowy"]):not([data-offer-theme="snowy-christmas"])::after {
    display: none;
}

/* Headlines and active nav pill pick up the theme instead of ice blue. */
html[data-offer-theme] h1,
html[data-offer-theme] .section-title,
[data-offer-theme] .os-title,
[data-offer-theme] .os-price {
    background: linear-gradient(180deg, var(--text) 30%, var(--accent) 110%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
html[data-offer-theme] .nav-link.active {
    background: var(--accent);
}
[data-offer-theme] .btn-primary,
[data-offer-theme] .os-chip {
    color: var(--ink);
    background: linear-gradient(135deg, var(--accent), var(--theme-accent-dark));
    box-shadow: 0 4px 24px var(--accent-glow), 0 0 70px var(--accent-dim);
}
[data-offer-theme] .btn-primary:hover {
    box-shadow: 0 10px 40px var(--accent-glow), 0 0 100px var(--accent-dim);
}

/* Bands that theme.css paints Night Summit navy. */
html[data-offer-theme] .nav-bg {
    border-bottom-color: var(--border-highlight);
    background: linear-gradient(180deg, var(--surface), var(--bg-mid) 60%);
}
html[data-offer-theme] footer {
    background: var(--bg);
    box-shadow: 0 0 0 100vmax var(--bg);
}
html[data-offer-theme] .surface,
html[data-offer-theme] .plan-card {
    background: var(--surface);
    border-color: var(--border);
}