/* Fixed pale tints: each of these paints its own ground, so the role variables
   solved for the surface OUTSIDE them are wrong inside them. Re-pointing here covers
   the whole subtree - setting `color` alone would fix only the text sitting directly
   on the panel and leave every child reading --sp-fg-* still resolving the outer
   ground, which is how bug 079 stayed broken while looking fixed. */
.sp-error-message,
.sp-success-message {
    --sp-fg-text: #212529;
    --sp-fg-muted: #4d5761;
    --sp-fg-link: #0a55c0;
    --sp-fg-accent: #7a4f00;
    --sp-fg-error: #b3261e;
    --sp-fg-warning: #7a4f00;
    --sp-fg-success: #1d6a2a;
    --sp-fg-edge: #14477d;
}

/* Fixed dark tints: each of these paints its own ground, so the role variables
   solved for the surface OUTSIDE them are wrong inside them. Re-pointing here covers
   the whole subtree - setting `color` alone would fix only the text sitting directly
   on the panel and leave every child reading --sp-fg-* still resolving the outer
   ground, which is how bug 079 stayed broken while looking fixed. */
.sp-field-help {
    --sp-fg-text: #f8f9fa;
    --sp-fg-muted: #d3d8de;
    --sp-fg-link: #9ec5fe;
    --sp-fg-accent: #ffd88a;
    --sp-fg-error: #ffb3ad;
    --sp-fg-warning: #ffd88a;
    --sp-fg-success: #9be3a8;
    --sp-fg-edge: #9ec5fe;
}

/* Register / Sign-In Page Styles (S-004) */

.sp-register {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.sp-register-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .sp-register-content {
        grid-template-columns: 7fr 5fr;
    }
}

@media (min-width: 1024px) {
    .sp-register-content {
        grid-template-columns: 8fr 4fr;
    }
}

.sp-register-form-area {
    max-width: 480px;
}

.sp-center-align .sp-register-content {
    justify-content: center;
    justify-items: center;
}

.sp-center-align .sp-register-content--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 480px;
    margin: 0 auto;
}

.sp-center-align .sp-register-form-area {
    width: 100%;
}

/* Booking Summary Sidebar */
.sp-booking-summary-sidebar {
    background: var(--sp-surface-color, #f8f9fa);
    border-radius: 8px;
    padding: 1.5rem;
    height: fit-content;
    position: sticky;
    top: 2rem;
}

@media (min-width: 768px) {
    .sp-center-align .sp-register-content--with-summary {
        grid-template-columns: minmax(0, 480px) minmax(280px, 380px);
    }
}

.sp-summary-heading {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--sp-fg-text);
}

/* Form Elements */
.sp-field-group {
    margin-bottom: 1.25rem;
}

.sp-field-group label {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--sp-fg-text);
}

.sp-required-marker {
    color: var(--sp-fg-error);
    font-weight: 700;
    margin-left: 0.25rem;
}

/* Per-field help text.
   Base (touch / coarse pointer): rendered as an always-visible inline hint
   beneath the label. Precise-pointer devices upgrade it to a hover/focus
   tooltip triggered by the info icon (see the media query below). */
.sp-field-label-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.375rem;
}

.sp-field-label-row label {
    margin-bottom: 0;
}

.sp-field-help-wrap {
    /* Force the hint onto its own line under the label in the base layout. */
    flex-basis: 100%;
    min-width: 0;
}

.sp-field-help-toggle {
    /* Hidden until a precise pointer is available. */
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    padding: 0;
    border: 1px solid var(--sp-border-color, #ced4da);
    border-radius: 50%;
    background: none;
    color: var(--sp-fg-muted);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
}

.sp-field-help-toggle:focus-visible {
    outline: 2px solid var(--sp-button-color, #1976d2);
    outline-offset: 1px;
}

.sp-field-help {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--sp-fg-muted);
}

@media (hover: hover) and (pointer: fine) {
    .sp-field-help-wrap {
        position: relative;
        flex-basis: auto;
        display: inline-flex;
    }

    .sp-field-help-toggle {
        display: inline-flex;
    }

    .sp-field-help {
        position: absolute;
        bottom: calc(100% + 0.5rem);
        left: 0;
        z-index: 30;
        width: max-content;
        max-width: 16rem;
        padding: 0.5rem 0.625rem;
        border-radius: 6px;
        background: #1f2937;
        color: #fff;
        font-size: 0.8125rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
        /* Hidden via opacity (not display/visibility) so it stays in the
           accessibility tree for aria-describedby. */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.12s ease;
    }

    .sp-field-help::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0.5rem;
        border: 5px solid transparent;
        border-top-color: var(--sp-fg-text);
    }

    .sp-field-help-wrap:hover .sp-field-help,
    .sp-field-help-toggle:focus-visible + .sp-field-help {
        opacity: 1;
        pointer-events: auto;
    }
}

.sp-field-group input[type="text"],
.sp-field-group input[type="email"],
.sp-field-group input[type="tel"],
.sp-field-group input[type="password"],
.sp-field-group select {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--sp-border-color, #ced4da);
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.sp-field-group input:focus,
.sp-field-group select:focus {
    outline: none;
    border-color: var(--sp-fg-edge);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
}

/* Password field with toggle */
.sp-password-field {
    position: relative;
}

.sp-password-field input[type="password"],
.sp-password-field input[type="text"] {
    padding-right: 4rem;
}

.sp-password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    background: none;
    border: none;
    color: var(--sp-fg-link);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0 0.25rem;
}

/* Radio Groups */
.sp-radio-group {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5rem;
}

.sp-radio-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    font-weight: 400;
}

/* Brand the native radio so its selected state matches the page's primary
   button instead of the browser's default accent color. */
.sp-radio-label input[type="radio"] {
    accent-color: var(--sp-fg-link);
}

/* Keep the register/confirm form fields left-justified even when the tenant
   brands content as centered, so the marketing opt-ins line up with the
   full-width inputs instead of drifting to the middle.

   We can't read --sp-content-align here: `.sp-center-align` is only present
   when content is center-aligned, and in that exact case --sp-content-align is
   always `center` — so the variable would always resolve to center. Force the
   left value explicitly.

   Field labels inherit text-align: center from .sp-booking-main. Short labels
   already sit at the left (their flex row defaults to flex-start), but long
   labels — e.g. the SMS opt-in question — wrap to full width and would
   otherwise center. The radio group is a flex container, so it needs
   justify-content rather than text-align. */
.sp-center-align .sp-register .sp-field-group label {
    text-align: left;
}

.sp-center-align .sp-register .sp-radio-group {
    justify-content: flex-start;
}

/* Buttons. Scoped to .sp-register: every page stylesheet here is @import-ed into the
   single global booking.css, so a bare .sp-btn rule applies on EVERY booking step, not
   just this page. The width:100% below did exactly that and collapsed the location
   search box on the Choose a location step (bug 055) — .sp-search-input-group .sp-btn
   set flex: 0 0 auto, whose basis then resolved from this width and took the whole row. */
.sp-register .sp-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    /*
     * Bug 1003. This rule states no border property at all, deliberately. It first removed the
     * border outright, throwing away the 1px the shared sheet reserves for variants to colour,
     * so bug 049's primary-button rim never reached this page. The next attempt restored a
     * transparent 1px - which brought back the width and the style and still discarded the
     * colour, because the shorthand re-sets the colour as it expands and this rule outranks
     * the .sp-btn-primary rule that supplies the rim. Measured on two databases: a fully
     * transparent edge here, and rgb(101,79,42) on a form outside .sp-register using the same
     * token.
     *
     * sp-core's .sp-btn already reserves a transparent 1px, so the space exists without this
     * page saying anything and the variant rule can colour it. Adding either the shorthand or
     * an explicit colour declaration back here will silently disconnect the rim again.
     */
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease, opacity 0.15s ease;
    width: 100%;
}

/*
 * Bug 1003. There was a .sp-register .sp-btn-primary rule here setting the fill and the label.
 * Both declarations already exist on .sp-btn-primary in the shared sheet, and one of them had
 * become wrong: the contrast sweep rewrote the fill from var(--sp-button-color) to
 * var(--sp-fg-link), pointing a background at a role that means "link text solved against the
 * surface behind it". On roit that replaced the studio's own #1B4772 with black. The shared sheet
 * is deliberate about the split - the studio owns the fill, the solver owns the rim and the label
 * - so this page states neither and inherits both.
 */

.sp-register .sp-btn-primary:hover {
    opacity: 0.9;
}

/* Links */
/*
 * Bug 1001. These read --sp-button-color, the studio's BUTTON colour. On a studio whose brand
 * colour is also the page background that paints link text on an identical ground - "Sign in
 * with a password" and "Create an account" measured 1:1, both visible: 1 and fully clickable,
 * so a new customer had no way to SEE the only route to registration.
 *
 * --sp-link-color was configured all along and simply was not read here, which is why the same
 * class family renders visibly on the public web form. The chain matches .sp-footer a and
 * .sp-return-link in sp-core.css so links resolve the same way wherever they appear.
 */
.sp-link,
.sp-link-btn {
    color: var(--sp-fg-link);
    text-decoration: none;
    font-size: 0.9375rem;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.sp-link:hover,
.sp-link-btn:hover {
    text-decoration: underline;
}

/* Divider */
.sp-form-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    color: var(--sp-fg-muted);
    font-size: 0.875rem;
}

.sp-form-divider::before,
.sp-form-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--sp-border-color, #ced4da);
}

.sp-form-divider span {
    padding: 0 1rem;
}

/* Messages */
.sp-error-message {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    color: #991b1b;
}

.sp-success-message {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    color: #166534;
}

/* Magic Link Polling */
.sp-polling-status {
    color: var(--sp-fg-muted);
    font-style: italic;
}

/* Email Check */
.sp-email-status {
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.sp-email-available {
    color: var(--sp-fg-success);
}

.sp-email-taken {
    color: var(--sp-fg-error);
}

/* Validation errors */
.sp-validation-error {
    color: var(--sp-fg-error);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Step heading */
.sp-step-heading {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--sp-fg-text);
}

/* Mobile: single column, summary compact */
@media (max-width: 767px) {
    .sp-booking-summary-sidebar {
        position: static;
        padding: 1rem;
    }

    .sp-register-form-area {
        max-width: 100%;
    }
}