/* Whop Integration — checkout container styles.
 *
 * Colours come from the host theme's own custom properties so the block follows
 * its light/dark switch with no JS: GG defines --vc-color-* and re-declares them
 * under [data-theme=dark]. The fallbacks keep this readable on a theme that has
 * no such tokens.
 *
 * The Whop iframe can't inherit any of this — it is told its mode separately in
 * checkout.js. */

.whopint-checkout {
    --whopint-gap: 16px;
    /* GG's tokens, which it re-declares under [data-theme=dark]:
       body-color / background-2 / neutral-3 / neutral-6 invert with the mode,
       primary-0 is the brand orange and stays put in both. */
    --whopint-surface: var(--vc-background-2, #f5f5f5);
    --whopint-border: var(--vc-color-neutral-3, #f0f0f0);
    --whopint-text: var(--vc-body-color, #202223);
    --whopint-muted: var(--vc-color-neutral-6, #8c8c8c);
    --whopint-accent: var(--vc-color-primary-0, #d93c09);
    --whopint-accent-text: var(--vc-color-primary-2, #fffbf8);

    max-width: 560px;
    margin-inline: auto;
    scroll-margin-top: 96px; /* clear sticky headers when scrolled to via #whop-checkout */
    color: var(--whopint-text);
}

.whopint-checkout__switcher {
    display: flex;
    gap: 8px;
    margin-bottom: var(--whopint-gap);
    padding: 4px;
    border: 1px solid var(--whopint-border);
    border-radius: 999px;
    background: var(--whopint-surface);
}

.whopint-checkout__cycle {
    flex: 1 1 auto;
    padding: 10px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--whopint-muted);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}

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

.whopint-checkout__cycle.is-active {
    background: var(--whopint-accent);
    color: var(--whopint-accent-text);
}

.whopint-checkout__cycle:focus-visible {
    outline: 2px solid var(--whopint-accent);
    outline-offset: 2px;
}

.whopint-checkout__summary {
    margin-bottom: var(--whopint-gap);
    font-weight: 600;
}

/* Each plan is mounted once; the toggle flips which panel is visible. A hidden
   iframe reports zero height and sizes correctly once shown — verified fine. */
.whopint-checkout__panel {
    display: none;
}

.whopint-checkout__panel.is-active {
    display: block;
}

/* Holds the box open while Whop's iframe loads, so the page does not jump. */
.whopint-checkout__mount {
    min-height: 320px;
}

/* Dropped on ready (checkout.js) — past that point the iframe reports its own
   height and the placeholder would only pad the bottom of the panel. */
.whopint-checkout__mount.is-ready {
    min-height: 0;
}