/* ============================================================================
   signup-bridge.css — visual continuity between the Laravel sales page
   (/signup/{slug}) and the Lucee registration flow (?event=signupRegistration,
   signupFrame, signup).

   LIVES HERE (Laravel public/css/) on purpose: Apache serves static assets from
   the Laravel docroot even on Lucee-rendered pages, so this file deploys with
   the normal Laravel deploy — beside its token source. The Lucee layout
   (externalSignupLayout.cfm) links it after bootstrap.min.css. Deploy Laravel
   BEFORE (or with) the Lucee layout change, or the link 404s and the page
   falls back to plain Bootstrap.

   The tokens below MIRROR resources/views/sales-page/show.blade.php in the
   Laravel repo (tennispointHP). Change them together or the seam re-opens.

   RULES OF THIS FILE
   - HTML/CSS only. No selector may require renaming an id, name, or JS-hooked
     class in externalWebPageRegistration.cfm — Stripe, stored payments, the
     validation lib and blockUI all key on the existing hooks (#createBtn,
     .playLevel, .StripeElement, data-validation-*).
   - Loaded AFTER bootstrap.min.css so ties break this way.
   ========================================================================== */

:root {
    --sp-ink: #333648;
    --sp-muted: #636e86;
    --sp-line: #dfe4ee;
    --sp-wash: #f6f8fd;
    --sp-cta: #1bb24b;
    --sp-cta-hover: #18a854;
    --sp-cta-text: #0b2b17;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--sp-ink);
    background: #fff;
}

img { max-width: 100%; height: auto; border: 0; }
a { color: #2f78d5; }

/* ---- the shell — same measure as the Laravel page's .sp-shell ---- */
.sb-shell { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* ---- header strip ---- */
.sb-header {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0 10px;
}
.sb-banner-img { display: block; max-height: 120px; width: auto; }
.sb-banner-text {
    display: inline-block;
    padding: 14px 22px;
    border-radius: 10px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}
.sb-header__login { font-size: 14px; color: var(--sp-muted); text-align: right; }
.sb-welcome-pill {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--sp-wash);
    border: 1px solid var(--sp-line);
    font-weight: 600;
    color: var(--sp-ink);
}
.sb-login-sub { display: block; margin-top: 4px; font-size: 13px; }

/* ---- footer ----
   webPage.section.footer here is the entity's SAVED sales-page Footer section
   — for generated pages that means the "Questions players ask" FAQ and the
   closing nudge follow the player onto this page. Bootstrap's default h2/h3
   scale (~28px/24px) dwarfs the 14px answers, so the headings are pulled onto
   the same modest scale (Jeremy, 2026-08-02). */
.sb-footer {
    margin-top: 28px;
    padding-top: 14px;
    padding-bottom: 26px;
    border-top: 1px solid var(--sp-line);
    text-align: center;
    font-size: 14px;
    color: var(--sp-muted);
}
.sb-footer h2 { font-size: 18px; font-weight: 700; color: var(--sp-ink); margin: 18px 0 6px; }
.sb-footer h3 { font-size: 15px; font-weight: 600; color: var(--sp-ink); margin: 14px 0 2px; }
.sb-footer p { margin: 4px 0; }
/* The stored footer ends with the sales page's own CTA link ("Sign Up for
   ..."), which is a loop when the reader is ALREADY registering. The
   generated-copy contract permits links ONLY to /signup/{slug}, so this
   selector removes exactly that CTA and nothing else. */
.sb-footer a[href*="/signup/"] { display: none; }

/* ---- legacy pageStyle.css classes, modernised IN PLACE ----
   The 4K-line form uses these ~32 times; overriding here restyles it with
   zero markup edits. */
.MediumBoldBlackText { font-family: inherit; font-size: 15px; font-weight: 600; color: var(--sp-ink); }
.VeryLargeBoldGrayText { font-family: inherit; font-size: 19px; font-weight: 700; color: var(--sp-ink); }
.LargeBoldGrayText, .MediumBoldGrayText { font-family: inherit; font-size: 16px; font-weight: 600; color: var(--sp-ink); }
.MediumGrayText { font-family: inherit; font-size: 14px; font-weight: 500; color: var(--sp-muted); }
.SmallGrayText { font-family: inherit; font-size: 13px; color: var(--sp-muted); }
.verySmallGrayText { font-family: inherit; font-size: 12px; color: var(--sp-muted); }
.MediumBoldRedText { font-family: inherit; font-size: 14px; font-weight: 600; color: #b3261e; }
.smallLink { font-size: 13px; }
.verySmallLink { font-size: 12px; }

/* ---- section cards ----
   The form paints its cards with inline background:#F1F1F1 + 5px radius.
   Inline styles win on specificity, so the retint targets the inline value
   itself — ugly, honest, and requires no markup edit. */
[style*="F1F1F1"] {
    background: var(--sp-wash) !important;
    border: 1px solid var(--sp-line);
    border-radius: 12px !important;
}

/* ---- the accent bars and step circles ----
   #E3B78A (bars) and #ab6b29 (step circles) are the form's HARDCODED
   DEFAULTS, used only when the org never chose colours. The layout computes
   --sb-accent from the entity's SAVED sales-page branding (same chain as the
   Laravel resolver, headerBackgroundColor included) — so these selectors
   rebrand the defaults to the entity's own colour and NEVER touch an org
   that set explicit colours, whose inline values simply don't match. */
[style*="E3B78A"] {
    background: var(--sb-accent, #3851a3) !important;
    color: var(--sb-on-accent, #ffffff);
    border-radius: 10px;
    padding: 10px 16px !important;
}
[style*="E3B78A"] h4 { color: inherit; font-size: 19px; font-weight: 700; }

/* The footer action bar is TWO adjacent cells (the error cell + the button
   cell). A full radius on each carves rounded notches at the seam — so each
   cell rounds only its OUTER end and they meet flush. Below the md
   breakpoint the cells stack, so each becomes its own full-width bar again. */
.col-md-8[style*="E3B78A"] { border-radius: 10px 0 0 10px; }
.col-md-4[style*="E3B78A"] { border-radius: 0 10px 10px 0; }
@media (max-width: 767.98px) {
    .col-md-8[style*="E3B78A"], .col-md-4[style*="E3B78A"] { border-radius: 10px; }
}

/* Validation errors land in #errorRow — inline red, unreadable on a dark
   accent. On-accent text keeps them visible on any entity colour. */
#errorRow { color: var(--sb-on-accent, #ffffff) !important; font-size: 15px; }
[style*="ab6b29"] { color: var(--sb-accent, #3851a3) !important; }
/* The number inside a default-coloured circle: contrast against the accent
   fill, not the page. Org-coloured circles are left exactly as they are. */
.fa-stack:has(> .fa-circle[style*="ab6b29"]) strong { color: var(--sb-on-accent, #ffffff) !important; }

/* The Cancel link lives inside the accent bar with an inline blue —
   readable on white, invisible on a dark accent. */
.sb-scope a[onclick*="history.go"] span {
    color: var(--sb-on-accent, #ffffff) !important;
    text-decoration: underline;
    font-weight: 600;
}

/* ---- form controls ----
   Bootstrap 5 is loaded page-wide; these tighten it to the Laravel look.
   16px font is deliberate: below 16px, iOS zooms the whole page on focus. */
.sb-scope .form-control, .sb-scope select, .sb-scope textarea {
    min-height: 44px;
    font-family: inherit;
    font-size: 16px;
    color: var(--sp-ink);
    border: 1px solid var(--sp-line);
    border-radius: 8px;
}
.sb-scope textarea { min-height: 80px; }

/* The legacy markup puts .form-control (not .form-select) on its selects, and
   BS5's .form-control sets appearance:none — which strips the native chevron
   and leaves them looking like empty text boxes. Re-add BS5's .form-select
   chevron here rather than renaming the class (see RULES above). */
.sb-scope select.form-control {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

.sb-scope .form-control:focus, .sb-scope select:focus, .sb-scope textarea:focus {
    border-color: var(--sp-cta-hover);
    box-shadow: 0 0 0 3px rgba(27, 178, 75, .15);
    outline: none;
}
/* The Stripe Element container keeps its own look (its input is an iframe). */
.sb-scope .StripeElement { border-radius: 8px; }

/* ---- the one action ----
   #createBtn carries inline padding/font-size, hence the !importants.
   Mirrors .sp-cta__button on the Laravel page, including the load-bearing
   border (fill is 2.79:1 on white; the border clears the 3:1 minimum). */
#createBtn {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px !important;
    font-weight: 700;
    padding: 10px 22px !important;
    margin: 4px 8px !important;
    border-radius: 8px;
    border: 2px solid var(--sp-cta-hover);
    background: var(--sp-cta);
    color: var(--sp-cta-text);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
}
#createBtn:hover, #createBtn:focus { background: var(--sp-cta-hover); }

/* ---- guard rails for the remaining fixed-width legacy markup ---- */
.sb-scope table { max-width: 100%; }

/* ---- small screens ----
   The form body is already Bootstrap .row/.col-md-6 — the viewport meta in
   the layout makes those stack natively. This handles what Bootstrap
   does not own. */
@media (max-width: 720px) {
    .sb-header { justify-content: center; text-align: center; }
    .sb-header__login { text-align: center; }
    .sb-banner-text { font-size: 20px; }
    .sb-scope td[style*="width"], .sb-scope div[style*="width"] { max-width: 100% !important; }
    /* Inline max-widths (420px selects etc.) overrun a 390px viewport. */
    .sb-scope select, .sb-scope textarea,
    .sb-scope input[type="text"], .sb-scope input[type="email"], .sb-scope input[type="tel"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    .sb-scope { overflow-wrap: break-word; }
    #createBtn { display: block; width: 100%; margin: 8px 0 !important; }
}