/* =============================================================
   Smart Registration — the attendee-facing filler page.

   DELIBERATELY SMALL. Every field inside the card is rendered by the shared
   CustomFieldFormRenderer, which surveys.css already styles (.cf-*). What is left is the page
   around those: the card, the progress line, the lock affordance, the buttons and the thank-you
   panel. Adding a second set of FIELD styles here would fork the look of controls that are
   supposed to match the run.events main application field for field.

   The buttons are the exception, and deliberately so — see the note above them. They are named
   for this page rather than reusing .btn-primary, because that name is Bootstrap's.

   Colors follow the Communities CSS-variable contract:
     --community-primary, --community-accent  (per-community branding)
     --text-primary, --text-secondary, --surface, --surface-sunken, --border-strong

   Touch targets ≥ 44px where interactive. Focus outlines preserved.
   ============================================================= */

/* Fills the parent, like every sibling standard page does — FAQ and the registration widget both
   sit at 100%. This used to be capped at 720px and centred, which put a second width constraint on
   top of the one the page shell already applies: on a wide screen the form ended up as a narrow
   column floating in an empty content area, looking like a mistake rather than a choice. */
.smart-registration-page {
    width: 100%;
    padding: 1rem 0 2rem 0;
}

/* --------- loading and error --------- */

.smart-registration-loading {
    display: flex;
    justify-content: center;
    padding: 3rem 1rem;
}

.smart-registration-error {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    background: var(--surface-sunken);
    color: var(--text-secondary);
}

.smart-registration-error i {
    color: var(--community-accent, #7BCED7);
    font-size: 1.25rem;
}

.smart-registration-error p {
    margin: 0;
}

/* --------- the card --------- */

.smart-registration-card {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    padding: 1.5rem;
}

.smart-registration-header {
    margin-bottom: 1.25rem;
}

.smart-registration-title {
    margin: 0 0 0.25rem 0;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
}

.smart-registration-description {
    margin: 0;
    color: var(--text-secondary);
}

/* Sits above the fields, so it is read before anything is answered again. */
.smart-registration-notice {
    margin: 0 0 1rem 0;
    padding: 0.625rem 0.875rem;
    border-radius: 6px;
    border-left: 3px solid var(--community-accent, #7BCED7);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

.smart-registration-progress {
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.smart-registration-page-title {
    margin: 0 0 1.25rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.smart-registration-fields {
    margin-bottom: 1rem;
}

/* --------- one field --------- */

/* Relative so the lock can sit against the field's own top-right corner rather than the card's. */
.sr-field {
    position: relative;
}

.sr-field-lock {
    position: absolute;
    top: 0;
    right: 0;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1;
}

/* A locked field is still readable — dimming the VALUE would hide the very thing the filler is
   being shown. Only the surface recedes. */
.sr-field-locked .cf-readonly-value {
    background: var(--surface-sunken);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}

.sr-field-unavailable .cf-field-description {
    color: var(--text-secondary);
    font-style: italic;
}

.smart-registration-page-error {
    margin: 0 0 1rem 0;
    color: var(--cf-rating-star-error, #ff0000);
    font-size: 0.9375rem;
}

/* --------- buttons ---------

   PAGE-SCOPED NAMES, not `.btn-primary`. Bootstrap 5.3 is loaded globally from a CDN and owns
   those class names; surveys.css redefines them too. Using them here meant three stylesheets
   arguing over one selector, and which won depended on cascade order and on whether the button
   happened to have focus — hence a Bootstrap-blue Continue button on a green-branded community,
   and a focus ring drawn twice. Every other community page avoids this by naming its own buttons
   (connection-btn-primary, back-btn-primary, event-register-btn); these follow that, and take
   their colour from the community tokens so branding actually reaches them. */

.smart-registration-primary,
.smart-registration-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    min-width: 44px;
}

.smart-registration-primary {
    border: none;
    background: var(--community-primary, #6A4A9E);
    color: var(--primary-color-text, #fff);
}

.smart-registration-primary:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--community-primary, #6A4A9E) 30%, transparent);
}

.smart-registration-secondary {
    border: 1px solid var(--glass-border, #e5e7eb);
    background: transparent;
    color: var(--text-secondary, #4B5563);
}

.smart-registration-secondary:hover:not(:disabled) {
    border-color: var(--community-primary, #6A4A9E);
    color: var(--community-primary, #6A4A9E);
}

.smart-registration-primary:disabled,
.smart-registration-secondary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ONE focus ring, and only for keyboard users. The previous pair drew an outline on hover on top
   of Bootstrap's own focus shadow, which is where the doubled border came from. */
.smart-registration-primary:focus-visible,
.smart-registration-secondary:focus-visible {
    outline: 2px solid var(--community-primary, #6A4A9E);
    outline-offset: 2px;
}

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

.smart-registration-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-strong);
}

/* Back sits at the far left of the row, Next and Submit at the right, so the forward action is
   always in the same place whether or not there is anywhere to go back to. */
.smart-registration-actions .smart-registration-secondary {
    margin-right: auto;
}

/* The page's own spinner is a block element sized for a placeholder; inside a button it has to
   be small enough to sit on the text baseline. */
.loading-spinner--inline {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-width: 2px;
    margin: 0;
}

/* --------- after submit --------- */

.smart-registration-done {
    text-align: center;
}

.smart-registration-done-icon {
    font-size: 2.5rem;
    color: var(--community-accent, #7BCED7);
    margin-bottom: 0.75rem;
}

.smart-registration-done-message {
    margin: 0 0 1.25rem 0;
    color: var(--text-primary);
}

.smart-registration-done-message :last-child {
    margin-bottom: 0;
}

/* --------- narrow screens --------- */

@media (max-width: 768px) {
    .smart-registration-card {
        padding: 1rem;
        border-radius: 8px;
    }

    /* Stacked and full width: two side-by-side buttons at this width leave neither comfortably
       tappable, and the forward action is the one that must never be missed. */
    .smart-registration-actions {
        flex-direction: column-reverse;
    }

    .smart-registration-actions .smart-registration-primary,
    .smart-registration-actions .smart-registration-secondary {
        width: 100%;
        justify-content: center;
    }

    .smart-registration-actions .smart-registration-secondary {
        margin-right: 0;
    }
}