/* ==========================================================================
   Member signup flow (signup/create, share, terms)

   ⚠️ THIS FILE IS THE REFERENCE DESIGN and it is deliberately SELF-CONTAINED.
   These pages are EMBEDDED IN CLIENT SITES (iframed), so they must render
   identically everywhere and must not shift when the app's design system
   changes. Do NOT replace these literal values with var(--mbb-*) lookups —
   that was tried on 2026-08-03 and dark-mode tokens leaked in and washed out
   the card. mbb.css derives ITS tokens from this file, not the reverse.
   Loaded on top of the Spark/Bootstrap 4 app.css — everything is scoped
   under .signup-shell so the rest of the app is untouched.

   Responsive contract:
     - mobile  (<576px): full width, minimal gutters, frameless card
     - tablet  (576–991px): slight margin, card chrome appears
     - desktop (>=992px): centered, 56rem cap, denser vertical rhythm, the two
       consent gates side by side
   ========================================================================== */

.signup-shell {
    /* Literal values on purpose — see the file header. This widget must render
       identically inside any client site, independent of mbb.css. */
    --su-ink: #262e35;
    --su-muted: #5f6b76;
    --su-border: #d9e0e6;
    --su-hairline: #edf1f4;
    --su-teal: #00adb5;
    --su-teal-dark: #00939c;
    --su-orange: #ff5722;
    --su-red: #d64545;
    --su-radius: 10px;

    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 0.75rem;   /* mobile: barely any margin */
    color: var(--su-ink);
}

@media (min-width: 576px) {
    .signup-shell {
        max-width: 40rem;      /* tablet: slight margin, comfortable line length */
        padding: 0 1.5rem;
    }
}

@media (min-width: 992px) {
    .signup-shell {
        max-width: 56rem;      /* desktop: wide enough that the paired rows breathe */
        padding: 0 2rem;
    }
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.signup-card {
    position: relative;
    background: #fff;
    border: 0;                 /* frameless on mobile — form feels native */
    border-radius: 0;
    padding: 1rem 0.25rem 1.5rem;
}

/* signature detail: teal -> orange ribbon along the top of the card */
.signup-card::before {
    content: "";
    display: block;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--su-teal), #f2b705 55%, var(--su-orange));
    margin-bottom: 1.75rem;
}

@media (min-width: 576px) {
    .signup-card {
        border: 1px solid #e4e9ee;
        border-radius: 16px;
        padding: 1.75rem 2rem 1.875rem;
        box-shadow: 0 1px 2px rgba(16, 24, 32, 0.04), 0 14px 40px rgba(16, 24, 32, 0.07);
    }

    .signup-card::before {
        border-radius: 999px 999px 0 0;
        margin: -1.75rem -2rem 1.5rem;   /* stretch ribbon to the card edges */
    }
}

@media (min-width: 992px) {
    .signup-card {
        padding: 2rem 2.5rem 2.25rem;
    }

    .signup-card::before {
        margin: -2rem -2.5rem 1.75rem;
    }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.signup-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.signup-eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--su-teal);
    margin-bottom: 0.75rem;
}

.signup-title {
    /* inherits the app typeface (Schibsted Grotesk) — no separate display face */
    font-weight: 700;
    font-size: clamp(1.375rem, 2.4vw + 0.6rem, 1.875rem);
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: var(--su-ink);
    margin: 0 0 0.75rem;
}

.signup-lede {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--su-muted);
    max-width: 34rem;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.signup-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--su-hairline);
}

.signup-section:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.signup-section-title {
    margin-top: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--su-muted);
    margin-bottom: 1rem;
}

.signup-section-hint {
    font-size: 0.875rem;
    color: var(--su-muted);
    margin: -0.5rem 0 1rem;
}

/* --------------------------------------------------------------------------
   Form controls (Bootstrap 4 markup, refreshed skin)
   -------------------------------------------------------------------------- */

.signup-shell label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #3a444e;
    margin-bottom: 0.25rem;
}

.signup-shell .form-group {
    margin-bottom: 0.875rem;
}

.signup-shell .form-control {
    height: auto;
    min-height: 2.75rem;
    padding: 0.5rem 0.875rem;
    font-size: 1rem;            /* >=16px prevents iOS auto-zoom */
    line-height: 1.5;
    color: var(--su-ink);
    background-color: #fff;
    border: 1px solid var(--su-border);
    border-radius: var(--su-radius);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.signup-shell .form-control::placeholder {
    color: #9aa5af;
}

.signup-shell .form-control:focus {
    border-color: var(--su-teal);
    box-shadow: 0 0 0 0.2rem rgba(0, 173, 181, 0.18);
    outline: 0;
}

.signup-shell .form-control.is-invalid {
    border-color: var(--su-red);
    background-image: none;     /* drop Bootstrap's icon; masked/date fields get crowded */
    padding-right: 0.875rem;
}

.signup-shell .form-control.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(214, 69, 69, 0.15);
}

.signup-shell .form-control.is-valid {
    border-color: var(--su-border);   /* stay quiet on success — no green noise */
    background-image: none;
    padding-right: 0.875rem;
}

.signup-shell .invalid-feedback {
    font-size: 0.8125rem;
    color: var(--su-red);
    margin-top: 0.375rem;
}

.signup-shell #state {
    text-transform: uppercase;
}

/* date inputs: Safari/iOS render these shorter than text fields */
.signup-shell input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
}

/* --------------------------------------------------------------------------
   Server-side error summary
   -------------------------------------------------------------------------- */

.signup-alert {
    background: #fdf3f3;
    border: 1px solid #f3d6d6;
    border-left: 4px solid var(--su-red);
    border-radius: var(--su-radius);
    color: #8c2f2f;
    padding: 0.875rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
}

.signup-alert strong {
    display: block;
    margin-bottom: 0.25rem;
}

.signup-alert ul {
    margin: 0;
    padding-left: 1.125rem;
}

.signup-alert li + li {
    margin-top: 0.125rem;
}

/* --------------------------------------------------------------------------
   Household members
   -------------------------------------------------------------------------- */

.signup-hh-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
}

.signup-hh-name {
    flex: 1 1 10rem;
}

.signup-hh-dob {
    flex: 1 1 9.5rem;
}

/* phones: name gets the full first line; date + remove share the second */
@media (max-width: 575.98px) {
    .signup-hh-row {
        margin-bottom: 1rem;
    }

    .signup-hh-name {
        flex-basis: 100%;
    }

    .signup-hh-dob {
        flex: 1 1 auto;
    }
}

.signup-hh-remove {
    flex: 0 0 auto;
    width: 3rem;
    min-height: 3rem;
    border: 1px solid var(--su-border);
    border-radius: var(--su-radius);
    background: #fff;
    color: var(--su-muted);
    font-size: 1.25rem;
    line-height: 1;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.signup-hh-remove:hover,
.signup-hh-remove:focus {
    border-color: var(--su-red);
    color: var(--su-red);
    outline: 0;
}

.signup-add-btn {
    display: block;
    width: 100%;
    min-height: 2.875rem;
    background: transparent;
    border: 1px dashed #c3ccd4;
    border-radius: var(--su-radius);
    color: #3a444e;
    font-size: 0.9375rem;
    font-weight: 600;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.signup-add-btn:hover,
.signup-add-btn:focus {
    border-color: var(--su-teal);
    color: var(--su-teal-dark);
    background-color: rgba(0, 173, 181, 0.05);
    outline: 0;
}

/* --------------------------------------------------------------------------
   Terms + submit
   -------------------------------------------------------------------------- */

.signup-shell .form-check {
    padding-left: 1.75rem;
}

.signup-shell .form-check-input {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.1875rem;
    margin-left: -1.75rem;
    accent-color: var(--su-teal);
}

.signup-shell .form-check-label {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--su-ink);
}

.signup-shell .form-check-label a {
    color: var(--su-teal-dark);
    text-decoration: underline;
}

.signup-submit {
    display: block;
    width: 100%;
    min-height: 3.25rem;
    margin-top: 1.25rem;
    background: var(--su-teal);
    border: 0;
    border-radius: var(--su-radius);
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 8px rgba(0, 173, 181, 0.35);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.signup-submit:hover,
.signup-submit:focus {
    background: var(--su-teal-dark);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 147, 156, 0.4);
    outline: 0;
}

.signup-submit:active {
    transform: translateY(1px);
    box-shadow: 0 1px 4px rgba(0, 147, 156, 0.35);
}

.signup-reassure {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--su-muted);
    margin: 0.875rem 0 0;
}

/* --------------------------------------------------------------------------
   Share / terms pages
   -------------------------------------------------------------------------- */

.signup-done {
    text-align: center;
    padding: 1rem 0 0.5rem;
}

.signup-done-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: rgba(0, 173, 181, 0.1);
    color: var(--su-teal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.signup-done .signup-title {
    margin-bottom: 0.5rem;
}

.signup-terms-text {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--su-ink);
    white-space: pre-line;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Consent gates (added 2026-08-03)
   --------------------------------------------------------------------------
   The two required checkboxes (business program terms + My Birthday Bonus ToS)
   use the shared .mbb-consent/.mbb-check components. mbb.css now derives its
   tokens from this file, so colours already match — these rules only pull the
   radius and rhythm into the widget's scale so the gates read as part of the
   card rather than as a bolted-on component.
   -------------------------------------------------------------------------- */

.signup-shell .mbb-consent {
    border-radius: var(--su-radius);
    border-color: var(--su-border);
}

.signup-shell .mbb-consent + .mbb-consent { margin-top: 0.75rem; }

.signup-shell .mbb-check input[type="checkbox"] {
    width: 1.25rem;            /* comfortable touch target on mobile */
    height: 1.25rem;
}

.signup-shell .mbb-check-text {
    font-size: 0.9375rem;
    color: var(--su-ink);
}

.signup-shell .mbb-check-text a {
    color: var(--su-teal-dark);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Desktop density (added 2026-08-03)
   --------------------------------------------------------------------------
   The card is wider from 992px up, so keep long single-field rows from
   stretching to an uncomfortable measure, and cap the reading width of the
   prose bits. Bootstrap's .form-row pairs (name, phone/birthday, city/state/
   zip) already sit side by side from 576px — this only tunes the leftovers.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    /* Lede and consent copy read better at a bounded measure than at full card width. */
    .signup-lede { max-width: 38rem; }
    .signup-shell .mbb-check-text { max-width: 46rem; }

    /* Section separators can be lighter once there's more horizontal room. */
    .signup-section { margin-top: 1.125rem; padding-top: 1.125rem; }

    /* The consent gates stay STACKED and full width at every breakpoint. Tried
       side-by-side on desktop (2026-08-03) to save height — it read badly: the two
       boxes have very different amounts of text, so they render at wildly uneven
       heights and the short one looks broken. Full width also keeps each gate an
       unmissable, deliberate decision, which is the point of a consent control. */
}

/* .signup-consent-row is a plain block wrapper (a grouping hook only). Do NOT give it
   grid/flex columns — see the note in the desktop block above. */
.signup-consent-row { display: block; }

/* Submit button: less dead space above it. */
.signup-shell .signup-submit { margin-top: 1rem; }