/* ============================================================
   CITAM Safari — public member self-registration wizard.
   Built on the CITAM tokens in citam-theme.css (loaded before this).
   Crimson (#C33C43 family via --accent tokens) carries the page, matching the app rail.
   ============================================================ */

.reg-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    background:
        radial-gradient(circle at 100% 0%, rgba(195, 60, 67, .08), transparent 42%),
        radial-gradient(circle at 0% 100%, rgba(195, 60, 67, .05), transparent 38%),
        var(--bg-canvas);
}

/* Real content always sits above the decorative backdrop. */
.reg-page > * { position: relative; z-index: 1; }

/* ---------- animated backdrop (orbs, glyphs, church skyline) ---------- */
.reg-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Soft drifting light orbs. */
.reg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    animation: reg-orb-drift var(--dur, 28s) ease-in-out infinite alternate;
}
.reg-orb-1 {
    width: 420px; height: 420px; top: -130px; left: -120px;
    background: radial-gradient(circle, rgba(195, 60, 67, .25), transparent 70%);
    --dur: 26s;
}
.reg-orb-2 {
    width: 360px; height: 360px; bottom: -110px; right: -90px;
    background: radial-gradient(circle, rgba(195, 60, 67, .14), transparent 70%);
    --dur: 34s;
    animation-direction: alternate-reverse;
}
.reg-orb-3 {
    width: 300px; height: 300px; top: 38%; left: 58%;
    background: radial-gradient(circle, rgba(75, 181, 216, .18), transparent 70%);
    --dur: 40s;
}
@keyframes reg-orb-drift {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(70px, 45px) scale(1.18); }
}

/* Floating faith glyphs — barely-there, slow, weightless. */
.reg-fx {
    position: absolute;
    color: var(--citam-red);
    opacity: .055;
    animation: reg-fx-float var(--dur, 18s) ease-in-out var(--delay, 0s) infinite;
}
html[data-bs-theme="dark"] .reg-fx { color: var(--accent); opacity: .075; }
@keyframes reg-fx-float {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(-28px) rotate(4deg); }
}
.reg-fx-1 { top: 18%; left: 6%;  font-size: 2.6rem; --dur: 16s; }
.reg-fx-2 { top: 62%; left: 3%;  font-size: 3.4rem; --dur: 22s; --delay: -6s; }
.reg-fx-3 { top: 28%; left: 88%; font-size: 2.8rem; --dur: 19s; --delay: -3s; }
.reg-fx-4 { top: 74%; left: 90%; font-size: 2.4rem; --dur: 17s; --delay: -9s; }
.reg-fx-5 { top: 9%;  left: 76%; font-size: 2rem;   --dur: 14s; --delay: -5s; }
.reg-fx-6 { top: 46%; left: 94%; font-size: 2rem;   --dur: 21s; --delay: -11s; }
.reg-fx-7 { top: 84%; left: 12%; font-size: 2.6rem; --dur: 24s; --delay: -13s; }

/* Church skyline silhouette along the bottom, with a slow dawn-like glow. */
.reg-skyline {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    height: min(26vh, 240px);
    color: var(--citam-red);
    opacity: .06;
    animation: reg-skyline-glow 18s ease-in-out infinite alternate;
}
html[data-bs-theme="dark"] .reg-skyline { color: var(--accent); opacity: .05; }
@keyframes reg-skyline-glow {
    from { opacity: .045; }
    to { opacity: .085; }
}

/* ---------- top bar ---------- */
.reg-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
}
.reg-topbar img { height: 46px; }
.reg-signin {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .85rem; font-weight: 600; text-decoration: none;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    background: var(--bg-surface);
    padding: .5rem .9rem; border-radius: 999px;
    transition: color var(--motion), border-color var(--motion), box-shadow var(--motion);
}
.reg-signin:hover { color: var(--accent); border-color: var(--accent); box-shadow: 0 4px 14px rgba(0, 1, 25, .08); }

/* ---------- hero ---------- */
.reg-hero { text-align: center; padding: 1.25rem 1.25rem 0; }
.reg-hero h1 { font-family: var(--font-heading); font-weight: 700; font-size: 2rem; color: var(--text-primary); margin: 0 0 .4rem; }
.reg-hero p { color: var(--text-muted); max-width: 520px; margin: 0 auto; }

/* ---------- container ---------- */
.reg-container {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 2.5rem;
    flex: 1;
}
.reg-container-sm { max-width: 560px; display: flex; flex-direction: column; justify-content: center; }

/* ---------- stepper ---------- */
.reg-stepper {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0 0 1.75rem;
    counter-reset: step;
}
.reg-stepper li {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    position: relative;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 600;
    text-align: center;
}
.reg-stepper li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 17px;
    left: calc(50% + 24px);
    width: calc(100% - 48px);
    height: 2px;
    border-radius: 1px;
    background: var(--border-strong);
    transition: background-color var(--motion);
}
.reg-stepper .dot {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-surface);
    border: 2px solid var(--border-strong);
    color: var(--text-muted);
    font-family: var(--font-heading); font-weight: 700; font-size: .85rem;
    transition: all var(--motion);
}
.reg-stepper li.active { color: var(--text-primary); }
.reg-stepper li.active .dot {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 0 0 5px var(--accent-bg);
}
.reg-stepper li.done { color: var(--text-secondary); }
.reg-stepper li.done .dot {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}
.reg-stepper li.done:not(:last-child)::after { background: var(--accent); }

/* ---------- step panes & card ---------- */
.reg-step { display: none; }
.reg-step.active { display: block; animation: reg-step-in .35s cubic-bezier(.25, .6, .3, 1) both; }

@keyframes reg-step-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.reg-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 44px rgba(0, 1, 25, .10);
    padding: 2rem 2rem 1.5rem;
}
.reg-card h2 {
    font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem;
    color: var(--text-primary); margin: 0 0 .3rem;
    display: flex; align-items: center; gap: .55rem;
}
.reg-card h2 .mdi { color: var(--accent); font-size: 1.4rem; }
.reg-sub { color: var(--text-muted); font-size: .9rem; margin-bottom: 1.5rem; }

/* ---------- fields ---------- */
.reg-field { margin-bottom: 1.15rem; }
.reg-field label {
    font-weight: 600; font-size: .85rem; color: var(--text-secondary);
    margin-bottom: .35rem; display: block;
}
.reg-hint { font-size: .78rem; color: var(--text-muted); margin-top: .3rem; }

.reg-card .form-control,
.reg-card .form-select {
    background-color: var(--bg-sunken);
    border: 1px solid transparent;
    color: var(--text-primary);
    padding: .75rem .95rem;
    border-radius: var(--radius);
    font-size: .95rem;
    transition: border-color var(--motion), box-shadow var(--motion), opacity var(--motion);
}
.reg-card .form-control:focus,
.reg-card .form-select:focus {
    background-color: var(--bg-sunken);
    border-color: var(--accent);
    box-shadow: 0 0 0 .2rem var(--accent-bg);
    color: var(--text-primary);
}
.reg-card .form-select:disabled { opacity: .55; cursor: not-allowed; }
.reg-card .input-validation-error { border-color: var(--danger); }

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

.reg-phone { display: flex; gap: .6rem; }
.reg-phone .form-select { flex: 0 0 128px; }
.reg-phone .form-control { flex: 1; }

.reg-dob { display: flex; gap: .6rem; }
.reg-dob #regAge { flex: 0 0 86px; text-align: center; }
.reg-dob input[type="date"] { flex: 1; min-width: 0; }

/* ---------- Select2 (searchable dropdowns), skinned like the card inputs ---------- */
.reg-phone .select2 { flex: 0 0 128px; }
.reg-card .select2-container .select2-selection--single {
    height: calc(1.5em + 1.5rem + 2px);
    background-color: var(--bg-sunken);
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: border-color var(--motion), box-shadow var(--motion), opacity var(--motion);
}
.reg-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary);
    padding-left: .95rem;
}
.reg-card .select2-container--open .select2-selection--single,
.reg-card .select2-container--focus .select2-selection--single {
    border-color: var(--accent);
    box-shadow: 0 0 0 .2rem var(--accent-bg);
}
.reg-card .select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--bg-sunken);
    opacity: .55;
    cursor: not-allowed;
}

/* ---------- guardian section (appears for under-18 registrants) ---------- */
.reg-guardian {
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    background: var(--bg-raised);
    padding: 1rem 1rem .1rem;
    margin-bottom: 1.15rem;
    animation: reg-step-in .3s cubic-bezier(.25, .6, .3, 1) both;
}
.reg-guardian-note {
    display: flex; gap: .6rem; align-items: flex-start;
    font-size: .85rem; color: var(--text-secondary);
    margin-bottom: .9rem;
}
.reg-guardian-note .mdi { color: var(--accent); font-size: 1.25rem; }

.reg-check {
    display: flex; align-items: flex-start; gap: .55rem;
    margin: .15rem 0 1rem;
    font-size: .85rem; font-weight: 600; color: var(--text-secondary);
    cursor: pointer;
}
.reg-check input {
    width: 1.05rem; height: 1.05rem; margin-top: .1rem; flex: 0 0 auto;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Applicant phone while mirroring the guardian's number. */
.reg-card .form-control:disabled { opacity: .65; cursor: not-allowed; }

/* ---------- gender pills ---------- */
.reg-pills { display: flex; gap: .6rem; }
.reg-pill { flex: 1; margin: 0; cursor: pointer; }
.reg-pill input { position: absolute; opacity: 0; pointer-events: none; }
.reg-pill span {
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .72rem .5rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-sunken);
    color: var(--text-secondary);
    font-weight: 600; font-size: .9rem;
    transition: all var(--motion);
}
.reg-pill input:checked + span {
    border-color: var(--accent);
    background: var(--accent-bg);
    color: var(--accent-text);
}
.reg-pill input:focus-visible + span { box-shadow: 0 0 0 .2rem var(--accent-bg); }

/* ---------- way-of-joining option cards ---------- */
.reg-options { display: flex; flex-direction: column; gap: .6rem; }
.reg-option { margin: 0; cursor: pointer; }
.reg-option input { position: absolute; opacity: 0; pointer-events: none; }
.reg-option .opt-body {
    display: flex; align-items: center; gap: .9rem;
    padding: .8rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-raised);
    transition: all var(--motion);
}
.reg-option .opt-ico {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-bg); color: var(--accent); font-size: 1.2rem;
    transition: all var(--motion);
}
.reg-option .opt-text { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.reg-option .opt-text strong { color: var(--text-primary); font-size: .92rem; }
.reg-option .opt-text small { color: var(--text-muted); font-size: .78rem; }
.reg-option .opt-check { color: var(--accent); font-size: 1.25rem; opacity: 0; transition: opacity var(--motion); }
.reg-option:hover .opt-body { border-color: var(--border-strong); }
.reg-option input:checked + .opt-body {
    border-color: var(--accent);
    background: var(--accent-bg);
}
.reg-option input:checked + .opt-body .opt-check { opacity: 1; }
.reg-option input:focus-visible + .opt-body { box-shadow: 0 0 0 .2rem var(--accent-bg); }

/* ---------- cascade ---------- */
.reg-cascade { display: flex; flex-direction: column; }
.reg-casc { display: flex; gap: .9rem; position: relative; padding-bottom: .35rem; }
.reg-casc .casc-no {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-sunken); border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    font-family: var(--font-heading); font-weight: 700; font-size: .78rem;
    margin-top: 1.55rem;
    z-index: 1;
    transition: all var(--motion);
}
.reg-casc:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 13.5px; top: 3.1rem; bottom: -1.2rem;
    width: 2px;
    background: var(--border);
}
.reg-casc.filled .casc-no {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.reg-casc .casc-body { flex: 1; }

.reg-crumb {
    display: flex; align-items: center; gap: .5rem;
    margin-top: 1.1rem;
    padding: .7rem .95rem;
    border-radius: var(--radius);
    background: var(--success-bg); color: var(--success-text);
    font-size: .88rem; font-weight: 600;
}
.reg-crumb .mdi { font-size: 1.15rem; color: var(--success); }
.reg-crumb-tight { margin: 0 0 1.1rem; }

/* ---------- review ---------- */
.reg-review { margin: 0 0 1.25rem; }
.reg-review > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .7rem .25rem;
    border-bottom: 1px dashed var(--border);
}
.reg-review dt { font-size: .82rem; font-weight: 600; color: var(--text-muted); margin: 0; }
.reg-review dd { margin: 0; font-weight: 600; color: var(--text-primary); text-align: right; font-size: .92rem; }
.reg-review .rv-group { border-bottom: 0; background: var(--accent-bg); border-radius: var(--radius); padding: .8rem .9rem; margin-top: .5rem; }
.reg-review .rv-group dd { color: var(--accent-text); }

.reg-consent {
    display: flex; gap: .6rem; align-items: flex-start;
    font-size: .8rem; color: var(--text-muted);
    padding: .75rem .9rem;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.reg-consent .mdi { color: var(--success); font-size: 1.1rem; }

/* ---------- nav buttons ---------- */
.reg-nav { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1.25rem; }
.reg-nav .btn {
    font-family: var(--font-heading); font-weight: 600;
    padding: .78rem 1.6rem; border-radius: var(--radius);
    transition: all var(--motion);
}
.reg-btn-back {
    background: var(--bg-surface); color: var(--text-secondary);
    border: 1px solid var(--border-strong);
}
.reg-btn-back:hover { color: var(--text-primary); border-color: var(--text-muted); }
.reg-btn-next {
    background: var(--accent); color: var(--on-accent); border: none;
    margin-left: auto;
}
.reg-btn-next:hover { background: var(--accent-hover); color: var(--on-accent); box-shadow: 0 6px 18px rgba(195, 60, 67, .28); }
/* The page's single red moment. */
.reg-btn-submit {
    background: var(--accent); color: var(--on-accent); border: none;
    margin-left: auto;
}
.reg-btn-submit:hover { background: var(--accent-hover); color: var(--on-accent); box-shadow: 0 6px 18px rgba(195, 60, 67, .3); }
.reg-btn-block { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; margin-left: 0; }

/* ---------- misc ---------- */
.reg-alert:not(:empty) { margin-bottom: 1rem; }
.reg-alert ul { margin: 0; padding-left: 1.1rem; }
.reg-alert.validation-summary-valid { display: none; }

/* Honeypot: parked off-screen so people never see it. */
.reg-hp { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }

.reg-foot { text-align: center; color: var(--text-muted); font-size: .8rem; margin-top: 1.5rem; }

.text-danger { font-size: .8rem; }

/* ---------- success page ---------- */
.reg-success { text-align: center; padding: 2.5rem 2rem 2rem; border-top: 4px solid var(--success); }
.reg-success-badge {
    width: 72px; height: 72px; border-radius: 50%;
    margin: 0 auto 1.25rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--success-bg); color: var(--success); font-size: 2.2rem;
    animation: reg-pop .45s cubic-bezier(.3, 1.4, .5, 1) both;
}
@keyframes reg-pop {
    from { transform: scale(.4); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.reg-success h2 { font-family: var(--font-heading); font-weight: 700; color: var(--text-primary); }
.reg-success-group {
    display: flex; align-items: center; gap: .9rem;
    text-align: left;
    background: var(--accent-bg);
    border-radius: var(--radius);
    padding: .9rem 1.1rem;
    margin: 0 0 1.4rem;
}
.reg-success-group .mdi { font-size: 1.7rem; color: var(--accent); }
.reg-success-group strong { display: block; color: var(--text-primary); }
.reg-success-group small { color: var(--accent-text); }
.reg-next-steps { list-style: none; padding: 0; margin: 0 0 1.6rem; text-align: left; }
.reg-next-steps li { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: .9rem; color: var(--text-secondary); font-size: .9rem; }
.reg-next-steps .ns-ico {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-bg); color: var(--accent); font-size: 1.05rem;
}

/* ---------- responsive ---------- */
@media (max-width: 575.98px) {
    .reg-hero h1 { font-size: 1.5rem; }
    .reg-container { padding: 1rem .9rem 2rem; }
    .reg-card { padding: 1.4rem 1.1rem 1.1rem; }
    .reg-grid { grid-template-columns: 1fr; gap: 0; }
    .reg-stepper .lbl { display: none; }
    .reg-stepper li:not(:last-child)::after { left: calc(50% + 22px); width: calc(100% - 44px); }
    .reg-phone .form-select, .reg-phone .select2 { flex-basis: 108px; }
    .reg-topbar img { height: 38px; }
    .reg-signin span { display: none; }
    .reg-nav .btn { padding: .72rem 1.1rem; flex: 1; }
    .reg-btn-next, .reg-btn-submit { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .reg-step.active, .reg-success-badge,
    .reg-orb, .reg-fx, .reg-skyline { animation: none; }
}