/* Whop Integration — the shared gradient panel.
 *
 * Borrowed from the host theme's own newsletter surface rather than invented
 * (GG: blocks/capture-form). The two gradient stops swap under
 * [data-theme="dark"] exactly as GG swaps them, giving navy→black in light and
 * grey→near-black in dark.
 *
 * Note the panel is DARK IN BOTH MODES. Anything placed on it must set its own
 * light-on-dark colours rather than inherit the page's, and the Whop iframe —
 * which cannot inherit CSS at all — is pinned to its dark appearance in PHP. */

.whopint-panel {
    --whopint-panel-from: var(--vc-color-primary-two-0, #1d4380);
    --whopint-panel-to: var(--vc-color-neutral-0, #000);

    /* Light-on-dark palette for everything inside the panel. */
    --whopint-text: var(--vc-color-neutral-5, #fff);
    --whopint-muted: rgba(255, 255, 255, 0.82);
    --whopint-border: rgba(255, 255, 255, 0.24);
    --whopint-surface: rgba(255, 255, 255, 0.08);

    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: 12px;
    background: #184888; /* fallback where radial-gradient is unavailable */
    background: radial-gradient(at center, var(--whopint-panel-from), var(--whopint-panel-to));
    color: var(--whopint-text);
}

[data-theme="dark"] .whopint-panel {
    --whopint-panel-from: var(--vc-background-1, #535358);
    --whopint-panel-to: var(--vc-background-2, #202024);
}

/* The billing-cycle switcher sits on the gradient, so it needs its own
   contrast rather than the page-level tokens it uses off-panel. */
.whopint-panel .whopint-checkout__switcher {
    border-color: var(--whopint-border);
    background: var(--whopint-surface);
}

.whopint-panel .whopint-checkout__cycle {
    color: var(--whopint-text);
}