/* assets/css/pages/event_register.css — v10.5.3 (F4)
   Ported from event_register.php's $customStyles.

   NOTE: the original block redefined .btn, .btn-primary and .btn-light, which
   now collide head-on with Bootstrap's button classes. Those three rules are
   deliberately NOT ported — the markup uses Bootstrap's own buttons instead
   (btn-secondary carries the maroon the original hard-coded as #7a1f1f), so
   there is exactly one definition of a button on the page. */

.er-wrap {
    max-width: 47.5rem;
    margin: 0 auto 3.75rem;
    padding: 0 1rem;
}

.er-crumb {
    max-width: 47.5rem;
    margin: 0 auto;
    padding: 1rem 1rem 0;
}

.er-crumb a {
    color: var(--pcd-secondary);
    text-decoration: none;
    font-weight: 600;
}

.er-summary {
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-radius: 0.875rem;
    padding: 1rem 1.125rem;
    margin: 0.875rem 0 1.25rem;
}

.er-summary h1 {
    margin: 0 0 0.25rem;
    font-size: 1.375rem;
    color: #7C2D12;
}

.er-summary .meta {
    color: #9A3412;
    font-size: 0.875rem;
}

.er-card {
    background: var(--pcd-surface);
    border-radius: 1rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

/* v11.5.0 — the signed-in Sahyogi panel that replaces the OTP card. Only variables already used
   in this file are referenced: an undefined custom property here fails silently and the panel
   would render with no left rule and no tint, which reads as a plain card and says nothing. */
.er-card--known {
    border-left: 4px solid var(--pcd-secondary);
}

.er-card--known .sub a {
    color: var(--pcd-secondary);
}

.er-card h2 {
    margin: 0 0 0.25rem;
    font-size: 1.0625rem;
    color: var(--pcd-text);
}

.er-card .sub {
    color: var(--pcd-text-muted);
    font-size: 0.8125rem;
    margin: 0 0 1rem;
}

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

@media (max-width: 560px) {
    .er-grid {
        grid-template-columns: 1fr;
    }
}

.er-grid .full {
    grid-column: 1 / -1;
}

.er-grid label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--pcd-text);
    display: block;
    margin-bottom: 0.3125rem;
}

.er-grid input,
.er-grid select,
.er-grid textarea {
    width: 100%;
    padding: 0.625rem;
    border: 1px solid #D1D5DB;
    border-radius: var(--pcd-radius);
    box-sizing: border-box;
    font-family: inherit;
}

.er-grid input:disabled,
.er-grid select:disabled {
    background: #F3F4F6;
    color: #9CA3AF;
}

.er-radio {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.er-radio label {
    font-weight: 500;
}

.er-note {
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

.er-err {
    color: #DC2626;
}

.er-ok {
    color: #166534;
}

/* Applied until the phone is verified; JS removes it to unlock the form. */
.er-locked {
    opacity: 0.5;
    pointer-events: none;
}

.er-total {
    font-size: 0.9375rem;
    color: #166534;
    font-weight: 700;
    margin-top: 0.375rem;
}

.er-decl {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 0.625rem;
    padding: 0.75rem;
}

.er-decl input {
    width: auto;
    margin-top: 0.1875rem;
}

.er-decl label {
    font-weight: 500;
    font-size: 0.8125rem;
    color: #475569;
}

/* v10.6.0 inline-style sweep. #otpVerifyRow and #registerForm start hidden via
   Bootstrap's d-none, so event_register.js toggles the class — d-none carries
   !important and would outrank an inline display value. */

.er-card--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 14px 18px;
}

.er-otp-row {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.er-verify-row {
    margin-top: 16px;
}

.er-align-end {
    align-self: end;
}

.er-note--dim {
    color: #94a3b8;
}

/* =========================================================================================
   v11.18.1 — the programme, when the sessions are not a choice.

   A read-only timetable in place of the picker. It sits inside a form, so it must not look like
   something to interact with: no hover state, no cursor change, no control affordance at all.
   Literal hex to match the rest of this file — an undefined custom property here would fail
   silently and leave the table unpainted.
   ========================================================================================= */
.er-slot-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 0.5rem;
    overflow: hidden;
}

.er-slot-table th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #64748B;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #E2E8F0;
}

.er-slot-table td {
    padding: 0.5rem 0.75rem;
    color: #334155;
    border-bottom: 1px solid #EDF2F7;
}

.er-slot-table tbody tr:last-child td {
    border-bottom: 0;
}

.er-actions {
    margin-top: 18px;
}

/* =========================================================================================
   v11.4.5 — "you are already registered", said properly.
   =========================================================================================

   Replaces a single red error line that had to serve three unrelated situations. The state
   colours are literal hex, matching .er-card--error above rather than inventing tokens: an
   undefined custom property in this codebase fails silently, and a card that renders with no
   background is worse than one that renders plainly.
   ========================================================================================= */

.er-state {
    border-radius: var(--pcd-radius);
    padding: 20px 22px;
    margin-bottom: 18px;
    border: 1px solid #e2e8f0;
    background: var(--pcd-surface);
}

.er-state h2 {
    margin: 0 0 8px;
    font-size: 1.125rem;
    line-height: 1.35;
}

.er-state p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
}

.er-state__num {
    display: inline-block;
    margin-top: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
}

.er-state__amount {
    margin-top: 14px;
    font-size: 1.375rem;
    font-weight: 600;
}

.er-state__actions {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* Confirmed — there is a pass to look at and nothing to pay. */
.er-state--confirmed {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #14532d;
}

/* Waiting for payment — the one the old single message hid completely. */
.er-state--awaiting_payment {
    background: #fffbeb;
    border-color: #fde68a;
    color: #78350f;
}

/* With the ashram. Deliberately quiet: there is nothing for the devotee to do. */
.er-state--awaiting_approval {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e3a8a;
}

.er-state__note {
    margin-top: 14px;
    font-size: 0.8125rem;
    opacity: 0.85;
}

/* ── v11.14.0 — markup shipped without styles, so it rendered invisible ────────────────────────
   er-price-note  : the "Sahyogi price applied" line beside the per-person figure
   er-doc-onfile  : the "we already have your identity proof" panel
   Both were added with class names and no rules, which is the same as not adding them. */
.er-price-note {
    display: inline-block;
    margin-left: .5rem;
    padding: .125rem .5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #e8f3e4 0%, #d3e7cc 100%);
    border: 1px solid #a9cb9e;
    color: #1e4620;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: middle;
}

.er-doc-onfile {
    margin: .25rem 0 .5rem;
    padding: .75rem .875rem;
    border-radius: 10px;
    border: 1px solid #e2d2c0;
    border-left: 4px solid #b45309;
    background: linear-gradient(135deg, #fdf8ef 0%, #f8efe0 100%);
}

.er-doc-onfile__head {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .9375rem;
    color: #3b2314;
}

.er-doc-onfile__state {
    font-size: .75rem;
    font-weight: 700;
    color: #7a4408;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.er-doc-onfile__state.is-ok { color: #1e4620; }

.er-doc-onfile__note {
    margin: .375rem 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: #5b4636;
}

@media (prefers-color-scheme: dark) {
    .er-price-note { background: linear-gradient(135deg, #1e3a22 0%, #152b18 100%); color: #cfe8c6; border-color: #2f5c35; }
    .er-doc-onfile { background: linear-gradient(135deg, #2a2016 0%, #1e1710 100%); border-color: #4a3a28; }
    .er-doc-onfile__head { color: #f0e3d2; }
    .er-doc-onfile__note { color: #cbb9a4; }
}

/* v11.14.0 — a refusal that explains itself, instead of an OTP box that silently will not work. */
.er-card--halted { border-left: 4px solid #b45309; background: linear-gradient(135deg, #fdf8ef 0%, #f8efe0 100%); }
.er-card--halted h2 { color: #7a4408; }
.er-halted__actions { display: flex; gap: .625rem; flex-wrap: wrap; margin-top: .875rem; }