/* ============================================================================
   Standalone public web form — page-specific rules
   Served from _content/StudioPlus.PublicWeb.Forms/css/standalone-form.css

   Loaded by _StandaloneFormLayout AFTER the shared design language at
   _content/StudioPlus.PublicWeb.Shared/css/sp-core.css. Everything the booking
   flow and this page have in common — shell, hosted header, buttons, field
   controls, navigation row — comes from that file and must not be restated
   here. What lives here is what only a standalone form has: the status banners,
   the save-and-resume link, the page-of-N indicator, section headings, and the
   optional two-column field layout.
   ============================================================================ */

.sp-form-title {
    margin: 0 0 0.5rem;
    color: var(--sp-heading-color, var(--sp-text-color, #212529));
    font-family: var(--sp-font-primary, inherit);
    font-size: clamp(1.75rem, 4vw, 2.4rem);
    line-height: 1.15;
}

.sp-form-description {
    margin: 0 0 2rem;
    color: var(--sp-secondary-text, #666);
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.5;
}

.sp-form-page-title {
    margin: 0 0 0.25rem;
    color: var(--sp-heading-color, var(--sp-text-color, #212529));
    font-family: var(--sp-font-primary, inherit);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Page N of M. Only rendered on multi-page forms. */
.sp-form-progress {
    margin: 0 0 1.5rem;
    color: var(--sp-text-muted, #6c757d);
    font-size: 0.875rem;
}

/* --------------------------------------------------------------- banners --- */

.sp-form-banner {
    margin: 0 0 1.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--sp-border-color, #e5e7eb);
    border-left-width: 4px;
    border-radius: var(--sp-radius, 8px);
    background: var(--sp-hover-bg, #f8f9fa);
    color: var(--sp-text-color, #212529);
    font-size: 0.9375rem;
    line-height: 1.5;
    text-align: left;
}

.sp-form-banner p {
    margin: 0 0 0.5rem;
}

.sp-form-banner p:last-child {
    margin-bottom: 0;
}

.sp-form-banner--submitted,
.sp-form-banner--saved {
    border-left-color: var(--sp-button-color, #1976d2);
}

.sp-form-banner--info {
    border-left-color: var(--sp-button-color, #1976d2);
}

.sp-form-banner--error {
    border-left-color: var(--sp-error-color, #d32f2f);
}

/* The resume URL is a long opaque token — let it wrap rather than force the
   card wider than the viewport on a phone. */
.sp-form-resume-link {
    color: var(--sp-link-color, var(--sp-button-color, #1976d2));
    word-break: break-all;
}

.sp-form-resume-hint {
    color: var(--sp-text-muted, #6c757d);
    font-size: 0.8125rem;
}

/* ------------------------------------------------------ validation errors --- */

.sp-form-errors {
    margin: 0 0 1.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--sp-error-color, #d32f2f);
    border-radius: var(--sp-radius, 8px);
    background: color-mix(in srgb, var(--sp-error-color, #d32f2f) 8%, transparent);
    color: var(--sp-error-text, var(--sp-error-color, #991b1b));
    text-align: left;
}

.sp-form-errors ul {
    margin: 0;
    padding-left: 1.25rem;
}

.sp-form-errors li {
    margin-bottom: 0.25rem;
}

.sp-form-errors li:last-child {
    margin-bottom: 0;
}

.sp-form-errors-other-pages {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    font-weight: 600;
}

/* --------------------------------------------------------------- sections --- */

/* A section is a grouping heading plus its fields — NOT a fieldset box. The
   original markup used <fieldset><legend>, which paints a browser-default
   bordered box with the legend notched into it; that box was most of what made
   the page read as "the old web forms" (bug 049). */
.sp-form-section {
    margin: 0 0 2rem;
}

.sp-form-section:last-of-type {
    margin-bottom: 0;
}

.sp-form-section-heading {
    margin: 0 0 1rem;
    color: var(--sp-heading-color, var(--sp-text-color, #212529));
    font-family: var(--sp-font-primary, inherit);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
}

/* ----------------------------------------------------------- field columns --- */

/* Form fields carry a column assignment from the builder. The shared
   .sp-question-fields column is a single 480px stack; when a form actually uses
   two columns, widen the container and lay the pair out side by side from the
   tablet breakpoint up. Single-column forms are unaffected. */
.sp-form-fields--two-column {
    max-width: 960px;
}

@media (min-width: 768px) {
    .sp-form-fields--two-column {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.5rem;
    }

    .sp-form-fields--two-column > .col-left {
        grid-column: 1;
    }

    .sp-form-fields--two-column > .col-right {
        grid-column: 2;
    }

    .sp-form-fields--two-column > .col-full {
        grid-column: 1 / -1;
    }
}

/* ---------------------------------------------------------------- actions --- */

/* The form's own action row. Uses the shared .sp-step-navigation rules for the
   divider and the mobile stacking; this only handles the fact that a form can
   show up to three buttons (Previous, Finish Later, Submit) where a booking
   step shows two. */
.sp-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--sp-border-color, #e5e7eb);
}

/* Push the primary action to the right on wide viewports, keeping Previous and
   Finish Later together on the left. */
.sp-form-actions .sp-btn-primary {
    margin-left: auto;
}

.sp-center-align .sp-form-actions {
    justify-content: center;
}

.sp-center-align .sp-form-actions .sp-btn-primary {
    margin-left: 0;
}

@media (max-width: 767px) {
    .sp-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .sp-form-actions .sp-btn,
    .sp-form-actions .sp-btn-primary {
        width: 100%;
        margin-left: 0;
    }
}

/* ------------------------------------------------------------ form list --- */

/* /form/{tenantSlug}/select — the index of forms a tenant has published. */
.sp-form-empty {
    color: var(--sp-text-muted, #6c757d);
}

.sp-form-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 640px;
    text-align: left;
}

.sp-center-align .sp-form-list {
    margin-inline: auto;
}

.sp-form-list-item {
    padding: 1.25rem;
    border: 1px solid var(--sp-border-color, #e5e7eb);
    border-radius: var(--sp-radius, 8px);
    background: var(--sp-surface-color, #ffffff);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sp-form-list-item:hover {
    border-color: var(--sp-button-color, #1976d2);
    box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
}

.sp-form-list-item-link {
    text-decoration: none;
}

.sp-form-list-item-name {
    margin: 0 0 0.25rem;
    color: var(--sp-heading-color, var(--sp-text-color, #212529));
    font-family: var(--sp-font-primary, inherit);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
}

.sp-form-list-item-link:hover .sp-form-list-item-name {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sp-form-list-item-desc {
    margin: 0 0 0.5rem;
    color: var(--sp-text-muted, #6c757d);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.sp-form-list-item-type {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--sp-hover-bg, #f2f2f2);
    color: var(--sp-text-muted, #6c757d);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------- confirmation --- */

/* /form/{tenantSlug}/submitted/{responseId} — the thank-you page. Centred
   regardless of the tenant's alignment setting: it is a single short message
   and a tick, and left-aligning that in a wide card reads as unfinished. */
.sp-form-confirmation {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 2rem 0;
}

.sp-form-check-icon {
    color: var(--sp-button-color, #1976d2);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sp-form-confirmation .sp-step-heading,
.sp-form-confirmation .sp-step-description {
    margin: 0;
}

/* -------------------------------------------------------------- turnstile --- */

/* Wrapper for the Cloudflare Turnstile widget. An Invisible-mode sitekey renders
   nothing, so this collapses to zero height rather than leaving a gap. */
.sp-form-turnstile {
    margin: 1.5rem 0 0;
}

.sp-form-turnstile:empty {
    margin: 0;
}

.sp-center-align .sp-form-turnstile {
    display: flex;
    justify-content: center;
}

/* The Family members block and the Session participants checklist are styled in sp-core.css,
   which the booking flow loads too, so both surfaces draw them the same way. */