/* ═══════════════════════════════════════════════════════════
   Registration form system — the register pages, public (PublicEventRegister)
   and member (EventRegister), under EventBand (event-pages.css). The staff
   "New registration" modal borrows the order summary's parts.

   Speaks the member portal's language, as the event page before it does:
   white 16px cards on the cool ground, Inter for everything you read and
   type, Instrument Serif only for headlines and money. (It was Fraunces and
   square editorial rules until the landing page took on the portal look.)
   Honors --crm-navy / --crm-teal from app.css + branding overrides.
   ═══════════════════════════════════════════════════════════ */

:root {
    --reg-bg:           #F4F6FB;
    --reg-surface:      #FFFFFF;
    --reg-ink:          var(--crm-text, #0D2447);
    --reg-ink-2:        var(--crm-text-2, #4A5B78);
    --reg-ink-3:        #66768F;
    --reg-rule:         var(--crm-border, #DCE5F0);
    --reg-rule-strong:  #C3CFDF;
    --reg-display:      'Instrument Serif', Georgia, serif;
    --reg-ui:           'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --reg-radius:       16px;
    --reg-soft:         rgba(var(--crm-teal-rgb, 0, 197, 168), .14);
    --reg-teal-ink:     color-mix(in oklab, var(--crm-teal, #00C5A8) 55%, #06131F);
    --reg-focus:        0 0 0 3px rgba(var(--crm-teal-rgb, 0, 197, 168), .22);
    --reg-shadow-card:  0 1px 2px rgba(13, 36, 71, .05), 0 6px 20px rgba(13, 36, 71, .05);
    --reg-shadow-cta:   0 10px 26px -12px rgba(13, 36, 71, .6);
    --reg-ease:         cubic-bezier(.2, .8, .2, 1);
}

/* ─────────────────────────────────────────────────────────
   Shell, loading, empty
   ───────────────────────────────────────────────────────── */

.reg-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.75rem;
}

.reg-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    padding: 6rem 0;
}

.reg-loading-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--crm-navy, #0D2447);
    animation: reg-dot 1.2s ease-in-out infinite both;
    opacity: .4;
}

.reg-loading-dot:nth-child(1) { animation-delay: -.32s; }
.reg-loading-dot:nth-child(2) { animation-delay: -.16s; }

@keyframes reg-dot {
    0%, 80%, 100% { transform: scale(.6); opacity: .3; }
    40%           { transform: scale(1);  opacity: 1; }
}

.reg-empty { text-align: center; padding: 6rem 2rem; }

.reg-empty-title {
    font-family: var(--reg-display);
    font-weight: 400;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.05;
    margin: 0 0 1rem;
    color: var(--reg-ink);
}

.reg-empty-body { font-family: var(--reg-ui); font-size: 1.02rem; color: var(--reg-ink-2); }

.reg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─────────────────────────────────────────────────────────
   Body grid
   ───────────────────────────────────────────────────────── */

.reg-body { padding-top: 2.25rem; padding-bottom: 4rem; font-family: var(--reg-ui); color: var(--reg-ink); }

.reg-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.75rem;
    /* No align-items: start — the aside must stretch the row's height, or the summary card
       has nowhere to stick within it. */
}

.reg-form { min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }

.reg-lede { font-size: .93rem; line-height: 1.55; color: var(--reg-ink-2); margin: 0 0 1rem; max-width: 62ch; }

/* ─────────────────────────────────────────────────────────
   Sections — each step of the form is a card, headed like the
   event page's cards, with its number in a soft teal chip.
   ───────────────────────────────────────────────────────── */

.reg-section {
    background: var(--reg-surface);
    border: 1px solid var(--reg-rule);
    border-radius: var(--reg-radius);
    box-shadow: var(--reg-shadow-card);
    --reg-pad: 1.4rem;   /* the booking components bleed their rows to the card's edges by it */
    padding: 0 var(--reg-pad) var(--reg-pad);
}

.reg-section-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 calc(-1 * var(--reg-pad)) 1.25rem;
    padding: 1.1rem var(--reg-pad) .9rem;
    border-bottom: 1px solid var(--reg-rule);
}

.reg-section-num {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    background: var(--reg-soft);
    color: var(--reg-teal-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.reg-section-title { margin: 0; font-family: var(--reg-ui); font-size: 1.05rem; font-weight: 600; color: var(--reg-ink); }

.reg-section-empty { font-size: .95rem; color: var(--reg-ink-3); margin: 0; padding: .25rem 0; }

/* A card holding only the CAPTCHA has no head. */
.reg-section:not(:has(.reg-section-head)) { padding-top: 1.25rem; }

/* ─────────────────────────────────────────────────────────
   Fields — bordered, rounded, a teal ring on focus.
   ───────────────────────────────────────────────────────── */

.reg-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem 1rem;
}

.reg-field--full { grid-column: 1 / -1; }
.reg-field--half { grid-column: span 1; }

.reg-field label,
.reg-field-label {
    display: block;
    font-family: var(--reg-ui);
    font-size: .84rem;
    font-weight: 600;
    color: var(--reg-ink-2);
    margin-bottom: .4rem;
}

.reg-req { color: var(--reg-teal-ink); margin-left: .15rem; }

.reg-field input,
.reg-field select,
.reg-field textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--reg-rule-strong);
    border-radius: 10px;
    background: var(--reg-surface);
    padding: .6rem .8rem;
    font-family: var(--reg-ui);
    font-size: 1rem;
    color: var(--reg-ink);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.reg-field input:hover,
.reg-field select:hover,
.reg-field textarea:hover { border-color: color-mix(in srgb, var(--reg-rule-strong) 60%, var(--crm-navy, #0D2447)); }

.reg-field input:focus,
.reg-field select:focus,
.reg-field textarea:focus {
    outline: none;
    border-color: var(--crm-teal, #00C5A8);
    box-shadow: var(--reg-focus);
}

.reg-help { font-family: var(--reg-ui); font-size: .82rem; color: var(--reg-ink-3); margin-top: .35rem; }

/* Bootstrap-rendered question inputs (DynamicFieldInput) take the same field look. */
.reg-field--bs-host .form-control,
.reg-field--bs-host .form-select,
.reg-field--bs-host input[type="text"],
.reg-field--bs-host input[type="email"],
.reg-field--bs-host input[type="number"],
.reg-field--bs-host input[type="tel"],
.reg-field--bs-host input[type="url"],
.reg-field--bs-host input[type="date"],
.reg-field--bs-host textarea,
.reg-field--bs-host select {
    border: 1px solid var(--reg-rule-strong) !important;
    border-radius: 10px !important;
    background-color: var(--reg-surface) !important;
    padding: .6rem .8rem !important;
    font-family: var(--reg-ui) !important;
    font-size: 1rem !important;
    color: var(--reg-ink) !important;
    box-shadow: none !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
}

.reg-field--bs-host .form-select { padding-right: 2.25rem !important; }

.reg-field--bs-host .form-control:focus,
.reg-field--bs-host .form-select:focus,
.reg-field--bs-host input:focus,
.reg-field--bs-host textarea:focus,
.reg-field--bs-host select:focus {
    border-color: var(--crm-teal, #00C5A8) !important;
    box-shadow: var(--reg-focus) !important;
}

.reg-field--bs-host .form-text { display: none; }
.reg-field--bs-host .form-label { display: none; }

/* Yes/no questions: a real checkbox, not a full-width field; the question's own label already
   sits above it, so the component's label beside the box would only repeat it. */
.reg-field--bs-host .form-check { padding-left: 0; margin: 0; }
.reg-field--bs-host .form-check-label { display: none; }
.reg-field--bs-host .form-check-input {
    float: none;
    width: 1.25rem !important;
    height: 1.25rem;
    min-height: 0;
    margin: 0;
    padding: 0 !important;
    border: 1px solid var(--reg-rule-strong);
    border-radius: .35rem !important;
    background-color: #fff;
    background-image: var(--bs-form-check-bg-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
}
.reg-field--bs-host .form-check-input:checked {
    background-color: var(--crm-navy, #0D2447) !important;
    border-color: var(--crm-navy, #0D2447) !important;
}

.reg-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* "I'm attending" */
.reg-attending {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    margin-top: 1.25rem;
    padding: .85rem 1rem;
    border-radius: 12px;
    background: var(--reg-bg);
    border: 1px solid var(--reg-rule);
}

.reg-attending label { font-weight: 600; font-size: .95rem; color: var(--reg-ink); display: grid; gap: .1rem; cursor: pointer; }
.reg-attending label span { font-weight: 400; font-size: .84rem; color: var(--reg-ink-3); }

.reg-check { width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--crm-navy, #0D2447); flex: none; }

/* Offers and the member-pricing hint, under the tickets. */
.reg-offers { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; }

.reg-offers li {
    font-size: .88rem;
    color: var(--reg-ink);
    padding: .55rem .8rem;
    border-radius: 10px;
    background: var(--reg-soft);
}

.reg-offers .bi { color: var(--reg-teal-ink); margin-right: .35rem; }

.reg-signin-hint { font-size: .88rem; color: var(--reg-ink-2); margin: 1rem 0 0; }
.reg-signin-hint .bi { color: var(--reg-teal-ink); margin-right: .25rem; }
.reg-signin-hint a { color: var(--crm-navy, #0D2447); font-weight: 600; }

/* ─────────────────────────────────────────────────────────
   Billing options (member payment step) — option cards.
   ───────────────────────────────────────────────────────── */

.reg-billing-list { display: grid; gap: .6rem; }

.reg-billing {
    appearance: none;
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.1rem;
    text-align: left;
    font-family: inherit;
    color: var(--reg-ink);
    background: var(--reg-surface);
    border: 1px solid var(--reg-rule-strong);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.reg-billing:hover { border-color: color-mix(in srgb, var(--reg-rule-strong) 50%, var(--crm-navy, #0D2447)); }
.reg-billing:focus-visible { outline: none; box-shadow: var(--reg-focus); }

.reg-billing--active {
    border-color: var(--crm-teal, #00C5A8);
    background: color-mix(in srgb, var(--crm-teal, #00C5A8) 6%, white);
}

.reg-billing-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--reg-rule-strong);
    position: relative;
    flex-shrink: 0;
    transition: border-color .2s ease;
}

.reg-billing--active .reg-billing-radio { border-color: var(--crm-navy, #0D2447); }

.reg-billing--active .reg-billing-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--crm-navy, #0D2447);
}

.reg-billing-label { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.reg-billing-name { font-size: .98rem; font-weight: 600; }
.reg-billing-desc { font-size: .86rem; color: var(--reg-ink-3); }
.reg-billing-aside { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--reg-ink-3); }

/* ─────────────────────────────────────────────────────────
   Step indicator (member wizard)
   ───────────────────────────────────────────────────────── */

.reg-progress { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.reg-progress-step {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--reg-ink-3);
    transition: color .2s ease;
}

.reg-progress-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    border: 1px solid var(--reg-rule-strong);
    background: var(--reg-surface);
    color: var(--reg-ink-3);
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.reg-progress-step--done { color: var(--reg-ink-2); }
.reg-progress-step--done .reg-progress-step-num { background: var(--reg-soft); border-color: transparent; color: var(--reg-teal-ink); }
.reg-progress-step--active { color: var(--reg-ink); }
.reg-progress-step--active .reg-progress-step-num { background: var(--crm-navy, #0D2447); border-color: var(--crm-navy, #0D2447); color: #fff; }

.reg-progress-divider { width: 28px; height: 1px; background: var(--reg-rule-strong); flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────
   Error
   ───────────────────────────────────────────────────────── */

.reg-error {
    padding: .9rem 1.1rem;
    border-radius: 12px;
    border: 1px solid #F3C9BF;
    background: #FDF3F1;
    color: #7A1F12;
    font-size: .93rem;
}

/* ─────────────────────────────────────────────────────────
   Order summary — the event page's Tickets card, in the same place,
   now adding up the booking.
   ───────────────────────────────────────────────────────── */

.reg-summary { min-width: 0; }

.reg-summary-sticky {
    position: sticky;
    top: 5.5rem;
    background: var(--reg-surface);
    border: 1px solid var(--reg-rule);
    border-radius: var(--reg-radius);
    box-shadow: var(--reg-shadow-card);
    padding: 1.2rem 1.4rem 1.4rem;
    font-family: var(--reg-ui);
}

.reg-summary-head { margin: 0 0 .9rem; font-family: var(--reg-ui); font-size: 1.05rem; font-weight: 600; color: var(--reg-ink); }
.reg-summary-event { font-size: .95rem; font-weight: 600; line-height: 1.35; color: var(--reg-ink); }
.reg-summary-when { font-size: .85rem; color: var(--reg-ink-3); margin-top: .15rem; }

.reg-summary-rule { border: none; border-top: 1px solid var(--reg-rule); margin: 1.1rem 0; opacity: 1; }

/* In the register pages' card the rules run edge to edge, like the card's own head. (Not in the
   staff modal, which hosts the summary without this padding.) */
.reg-summary-sticky .reg-summary-rule { margin-left: -1.4rem; margin-right: -1.4rem; }

.reg-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .88rem;
    font-weight: 600;
    color: var(--reg-ink-2);
}

.reg-summary-amount {
    font-family: var(--reg-display);
    font-weight: 400;
    font-size: 2.1rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--reg-ink);
}

.reg-summary-empty { font-size: .9rem; color: var(--reg-ink-3); margin: .25rem 0; }

.reg-summary-todo { font-size: .85rem; color: var(--reg-ink-3); margin: 1.1rem 0 0; }
.reg-summary-todo + .reg-cta--sticky { margin-top: .6rem; }

/* ─────────────────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────────────────── */

.reg-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: 0 1.5rem;
    border: none;
    border-radius: 11px;
    background: var(--crm-navy, #0D2447);
    color: #fff;
    font-family: var(--reg-ui);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, transform .25s var(--reg-ease), box-shadow .25s ease;
}

.reg-cta:hover:not(:disabled) {
    background: color-mix(in srgb, var(--crm-navy, #0D2447) 85%, var(--crm-teal, #00C5A8));
    box-shadow: var(--reg-shadow-cta);
    color: #fff;
}

.reg-cta:active:not(:disabled) { transform: scale(.97); }
.reg-cta:focus-visible { outline: 2px solid var(--crm-navy, #0D2447); outline-offset: 3px; }
.reg-cta:disabled { opacity: .4; cursor: not-allowed; }

.reg-cta--sticky { width: 100%; margin-top: 1.25rem; }

.reg-cta-arrow { display: inline-block; transition: transform .25s var(--reg-ease); }
.reg-cta:hover:not(:disabled) .reg-cta-arrow { transform: translateX(3px); }

.reg-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--reg-ink-2);
    font-family: var(--reg-ui);
    font-size: .92rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: color .2s ease;
}

.reg-cta-secondary:hover { color: var(--crm-navy, #0D2447); }
.reg-cta-secondary--inline { margin-left: 1.5rem; }

.reg-back-arrow { display: inline-block; transition: transform .25s var(--reg-ease); }
.reg-cta-secondary:hover .reg-back-arrow { transform: translateX(-3px); }

.reg-submit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.reg-submit-row--end { justify-content: flex-end; }
.reg-submit-row--mobile { display: none; }

/* ─────────────────────────────────────────────────────────
   Members-only gate
   ───────────────────────────────────────────────────────── */

.reg-gate { padding-top: 2.5rem; padding-bottom: 5rem; }

.reg-gate-card {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    padding: 2.25rem 2rem;
    background: var(--reg-surface);
    border: 1px solid var(--reg-rule);
    border-radius: var(--reg-radius);
    box-shadow: var(--reg-shadow-card);
}

.reg-gate-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    border-radius: 16px;
    background: var(--reg-soft);
    color: var(--reg-teal-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.reg-gate-title { font-family: var(--reg-display); font-weight: 400; font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1.05; margin: 0 0 .75rem; color: var(--reg-ink); }
.reg-gate-body { font-family: var(--reg-ui); font-size: 1rem; line-height: 1.6; color: var(--reg-ink-2); margin: 0 0 1.5rem; }
.reg-gate-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .75rem; }

/* ─────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────── */

@media (max-width: 880px) {
    .reg-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }

    /* The summary follows the form (it holds the discount, the code field and the total);
       the fixed bar (.evt-bar, event-pages.css) carries the total and the button meanwhile. */
    .reg-summary { order: 1; }
    .reg-summary-sticky { position: static; }

    .reg-body--with-bar { padding-bottom: 7rem; }

    .reg-fields { grid-template-columns: 1fr; }
    .reg-field--half { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
    .reg-shell { padding-left: 1rem; padding-right: 1rem; }   /* sides only: it is often also the .reg-body */
    .reg-section { --reg-pad: 1.1rem; }
    .reg-summary-sticky { padding: 1.1rem; }
    .reg-summary-sticky .reg-summary-rule { margin: 1rem -1.1rem; }
    .reg-progress-divider { width: 14px; }
    .reg-progress { gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .reg-loading-dot { animation: none; opacity: .6; }
    .reg-cta-arrow, .reg-back-arrow { transition: none; }
}