/* Whop Integration — welcome panel styles. */

.whopint-welcome {
    /* Same token-following approach as checkout.css. */
    --whopint-accent: var(--vc-color-primary-0, #d93c09);
    --whopint-accent-text: var(--vc-color-primary-2, #fffbf8);
    --whopint-muted: var(--vc-color-neutral-6, #8c8c8c);

    max-width: 640px;
    margin-inline: auto;
    text-align: center;
}

/* On the panel the text is light-on-dark; panel.css supplies the palette and
   the padding, so the block only has to stop constraining its own width. */
.whopint-welcome.whopint-panel {
    max-width: 720px;
}

.whopint-welcome__heading {
    color: var(--whopint-text, inherit);
}

.whopint-welcome__highlight {
    color: var(--whopint-accent);
}

.whopint-welcome__description {
    margin-block: 1rem;
    color: var(--whopint-muted);
    font-size: 1.0625rem;
    line-height: 1.5;
}

/* Decorative half only applies when the host theme has no button class of its
   own — see Theme.php. Note GG's dark theme paints any non-`vc-` link inside
   .entry-content with the brand colour, which rendered this label orange on an
   orange button until it started carrying `vc-btn`. */
.whopint-welcome__telegram:not(.whopint-btn--themed) {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 8px;
    background: var(--whopint-accent, #229ed9);
    color: #fff;
    text-decoration: none;
}

.whopint-welcome__telegram:hover,
.whopint-welcome__telegram:focus-visible {
    text-decoration: none;
}