/* Styles for the static-SSR auth pages (Register, and later Login / password reset).

   These pages deliberately do NOT use MudBlazor form components. MudTextField, MudSelect and
   MudCheckBox all depend on an interactive circuit for their value binding, so they cannot
   participate in a plain form POST. Native inputs are used instead, styled here to match the
   outlined MudBlazor look the rest of the app uses.

   The floating label is pure CSS (:placeholder-shown + :focus) rather than a copy of
   MudBlazor's internal markup — replicating Mud's fieldset/legend structure would couple
   these pages to component internals that change between versions. Every input therefore
   needs placeholder=" " for the selector to work. */

.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f5f7fa;
    --auth-accent: var(--mud-palette-primary, #0094C0);
}

.auth-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 16px;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    padding: 36px 32px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 5px 8px 0 rgba(0,0,0,.14), 0 1px 14px 0 rgba(0,0,0,.12);
}

.auth-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.auth-logo img {
    max-height: 80px;
    max-width: 220px;
    object-fit: contain;
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    margin: 0 0 4px;
    color: rgba(0,0,0,.87);
    /* FocusOnNavigate (Routes.razor) targets h1 and focuses it on load, which paints a
       browser focus ring around the heading. The heading is not an interactive target,
       so suppress it — same approach RegisterChurch takes on its own h1. */
    outline: none;
}

.auth-subtitle {
    font-size: .875rem;
    text-align: center;
    color: rgba(0,0,0,.6);
    margin: 0 0 20px;
}

/* ---- Fields ---- */

.auth-field {
    margin-bottom: 14px;
}

.auth-input-wrap {
    position: relative;
}

.auth-input-wrap input {
    width: 100%;
    box-sizing: border-box;
    height: 48px;
    padding: 0 14px;
    font-size: 1rem;
    font-family: inherit;
    color: rgba(0,0,0,.87);
    background: transparent;
    border: 1px solid rgba(0,0,0,.23);
    border-radius: 4px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.auth-input-wrap.has-icon input { padding-left: 44px; }
.auth-input-wrap.has-action input { padding-right: 46px; }

.auth-input-wrap input:hover { border-color: rgba(0,0,0,.87); }

.auth-input-wrap input:focus {
    border-color: var(--auth-accent);
    box-shadow: inset 0 0 0 1px var(--auth-accent);
}

/* Floating label. Sits centred inside the field until the input has focus or a value,
   then rises to notch into the top border (white background masks the border behind it). */
.auth-input-wrap label {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    transform-origin: left center;
    font-size: 1rem;
    color: rgba(0,0,0,.6);
    background: #fff;
    padding: 0 4px;
    pointer-events: none;
    transition: transform .15s ease, color .15s ease, left .15s ease;
    white-space: nowrap;
}

.auth-input-wrap.has-icon label { left: 40px; }

.auth-input-wrap input:focus + label,
.auth-input-wrap input:not(:placeholder-shown) + label {
    left: 10px;
    transform: translateY(-140%) scale(.75);
}

.auth-input-wrap input:focus + label { color: var(--auth-accent); }

.auth-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: rgba(0,0,0,.54);
    pointer-events: none;
}

.auth-helper {
    display: block;
    font-size: .75rem;
    line-height: 1.3;
    color: rgba(0,0,0,.6);
    margin: 4px 0 0 14px;
}

/* Password show/hide toggle */
.auth-password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 48px;
    width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(0,0,0,.54);
    padding: 0;
}

.auth-password-toggle:hover { color: rgba(0,0,0,.87); }

/* ---- Validation ---- */

.auth-field .validation-message {
    display: block;
    font-size: .75rem;
    color: #f44336;
    margin: 4px 0 0 14px;
}

.auth-input-wrap input.invalid { border-color: #f44336; }
.auth-input-wrap input.invalid + label { color: #f44336; }

/* Group-level validation — checkbox groups that opt in with data-require-one.
   Keyed on the attribute rather than .validation-message because auth.js creates this
   element wherever a form opts in, which is usually outside .auth-field. The rule above
   is scoped to .auth-field, so a group error picked up no styling whatsoever and rendered
   as bare black body text. Given more weight than a single-field error: it explains why a
   submit was refused, so it has to read as the reason the form did not go through. */
[data-group-error] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(244, 67, 54, .08);
    color: #d32f2f;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.4;
}

/* Drawn, not an icon font or an asset — this renders inside a church's own site via the
   embed iframe, where we cannot count on anything else having loaded. */
[data-group-error]::before {
    content: "!";
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f44336;
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
}

/* ---- Alerts ---- */

.auth-alert {
    padding: 12px 16px;
    border-radius: 4px;
    font-size: .875rem;
    margin-bottom: 16px;
    line-height: 1.4;
}

.auth-alert-error {
    background: #f44336;
    color: #fff;
}

.auth-alert-warning {
    border: 1px solid #ff9800;
    color: #b26a00;
    background: #fff8e1;
}

.auth-alert-success {
    background: var(--auth-accent);
    color: #fff;
}

/* Only the leading heading is a block — scoping this to `strong` in general put the
   email address on its own line and orphaned the sentence's full stop after it. */
.auth-alert-success > strong:first-child { display: block; margin-bottom: 4px; }

/* ---- Buttons / links ---- */

.auth-submit {
    width: 100%;
    padding: 12px;
    margin-top: 6px;
    font-size: 1rem;
    font-weight: 500;
    font-family: inherit;
    color: #fff;
    background: var(--auth-accent);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: filter .15s;
}

.auth-submit:hover { filter: brightness(.93); }
.auth-submit:disabled { opacity: .6; cursor: default; }

.auth-divider {
    height: 1px;
    background: rgba(0,0,0,.12);
    margin: 18px 0;
}

.auth-meta {
    font-size: .875rem;
    text-align: center;
    color: rgba(0,0,0,.87);
    margin: 0;
}

/* Every link inside the auth card picks up the church accent colour, including the
   promo panel — an earlier revision only styled .auth-meta and the promo link fell
   back to plain bold text, losing its affordance. */
.auth-card a,
.auth-linkbutton {
    color: var(--auth-accent);
    font-weight: 600;
    text-decoration: none;
}

.auth-card a:hover,
.auth-linkbutton:hover { text-decoration: underline; }

/* A submit button that has to read as an inline link (the resend-email form) */
.auth-linkbutton {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
}

/* Remember-me + forgot-password row */
.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 14px;
    font-size: .875rem;
}

.auth-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: rgba(0,0,0,.87);
}

.auth-checkbox input[type=checkbox] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--auth-accent);
    cursor: pointer;
}

/* Outlined secondary action (Create an Account) */
.auth-secondary-btn {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 2px solid var(--auth-accent);
    border-radius: 6px;
    color: var(--auth-accent);
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    transition: background .2s, color .2s;
}

.auth-secondary-btn:hover {
    background: var(--auth-accent);
    color: #fff !important;
    text-decoration: none;
}

/* Inline advisory panel (unconfirmed-email prompt on sign-in) */
.auth-inline-note {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 12px;
    font-size: .875rem;
    color: #92400e;
}

/* The resend sits inside its prompt as one sentence, so its <form> must not break the
   line. Forms cannot nest, which is why this is a sibling of the login form rather than
   part of it. */
.auth-inline-note form { display: inline; }
.auth-inline-note .auth-linkbutton { color: #92400e; text-decoration: underline; }

.rc-success-cta form { display: inline; }

.auth-promo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    background: #f0f7ff;
    border: 1px solid #d0e3f7;
    font-size: .875rem;
    text-align: center;
    color: rgba(0,0,0,.87);
}

.auth-promo svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: rgba(0,0,0,.6);
}

.auth-footer {
    text-align: center;
    padding: 16px;
    font-size: .75rem;
    color: rgba(0,0,0,.6);
}

/* Footer links keep the accent colour so they still read as links. An earlier revision
   greyed them to match the copyright text, which made them look like plain prose. */
.auth-footer a {
    color: var(--auth-accent);
    font-weight: 500;
    text-decoration: none;
}

.auth-footer a:hover { text-decoration: underline; }

@media (max-width: 480px) {
    .auth-card { padding: 28px 20px; }
}

/* ===================================================================
   Register Church (trial signup). Its own scale and two-column layout,
   but it reuses the .auth-field / .auth-input-wrap field styling above.
   =================================================================== */

.rc-page {
    min-height: 100vh;
    background: #f4f7f9;
    padding: 20px 0;
    --auth-accent: #0094C0;
}

.rc-shell {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 15px;
}

.rc-topnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding: 0 10px;
    font-size: 13px;
    color: #64748b;
}

.rc-topnav a { color: #64748b; font-weight: 600; text-decoration: none; }
.rc-topnav span a { color: var(--auth-accent); font-weight: 700; }

.rc-header { text-align: center; margin-bottom: 30px; }
.rc-header img { max-height: 65px; margin-bottom: 15px; }

.rc-header h1 {
    font-size: 32px;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -.5px;
    margin: 0;
    outline: none;
}

.rc-header p { font-size: 16px; color: #64748b; margin-top: 5px; }

.rc-card {
    display: grid;
    grid-template-columns: 7fr 5fr;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 5px 8px 0 rgba(0,0,0,.14), 0 1px 14px 0 rgba(0,0,0,.12);
}

.rc-form { padding: 40px; }

.rc-section {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--auth-accent);
    margin: 0 0 14px;
}

.rc-section + .rc-grid { margin-bottom: 8px; }
.rc-grid + .rc-section { margin-top: 26px; }

.rc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 16px; }
.rc-full { grid-column: span 6; }
.rc-half { grid-column: span 3; }
.rc-two-thirds { grid-column: span 4; }
.rc-third { grid-column: span 2; }

.rc-honeypot { position: absolute; left: -9999px; top: -9999px; }

/* Password rule note, sitting under both password columns. The negative top margin closes
   the gap left by the .auth-field margin-bottom on the fields above it. */
.rc-password-hint {
    grid-column: span 6;
    margin: -9px 0 14px 14px;
}

/* State picker. Its label is parked in the floated (notched) position permanently:
   :placeholder-shown never matches a <select>, and a stacked label above the box pushed
   the control down so it stopped lining up with the City field next to it. */
.auth-input-wrap .rc-select-float {
    left: 10px;
    transform: translateY(-140%) scale(.75);
}

.auth-input-wrap .rc-select:focus ~ .rc-select-float { color: var(--auth-accent); }
.auth-input-wrap .rc-select.invalid ~ .rc-select-float { color: #f44336; }

.rc-select {
    width: 100%;
    box-sizing: border-box;
    height: 48px;
    padding: 0 10px;
    font-size: 1rem;
    font-family: inherit;
    color: rgba(0,0,0,.87);
    background: #fff;
    border: 1px solid rgba(0,0,0,.23);
    border-radius: 4px;
    outline: none;
}

.rc-select:hover { border-color: rgba(0,0,0,.87); }
.rc-select:focus { border-color: var(--auth-accent); box-shadow: inset 0 0 0 1px var(--auth-accent); }
.rc-select.invalid { border-color: #f44336; }

.rc-terms { margin: 18px 0 16px; align-items: flex-start; font-size: .875rem; color: #64748b; }
.rc-terms input[type=checkbox] { margin-top: 2px; }
.rc-terms a { color: var(--auth-accent); font-weight: 600; text-decoration: none; }

.rc-submit { height: 54px; font-weight: 800; font-size: 18px; border-radius: 8px; }

.rc-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 12px 0 0;
    font-size: .75rem;
    color: #94a3b8;
}

/* ---- Right column ---- */

/* Flex column so the trust row can pin to the bottom. The sidebar is shorter than the
   form beside it, and without this the leftover height collected as dead space under
   the trust signals instead of being distributed. */
.rc-aside {
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    padding: 40px;
    border-left: 1px solid #f1f5f9;
}

.rc-aside h2 {
    font-size: 1rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 14px;
}

.rc-benefits { list-style: none; margin: 0; padding: 0; }

.rc-benefits li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 12px;
    font-size: .875rem;
    line-height: 1.45;
    color: #475569;
}

.rc-benefits li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 4px;
    width: 14px;
    height: 8px;
    border-left: 2px solid var(--auth-accent);
    border-bottom: 2px solid var(--auth-accent);
    transform: rotate(-45deg);
}

.rc-benefits strong { color: #1e293b; }

.rc-quote {
    margin: 24px 0 0;
    padding: 16px;
    background: #fff;
    border-left: 4px solid var(--auth-accent);
    border-radius: 8px;
}

.rc-quote p { margin: 0; font-style: italic; font-size: .875rem; color: #334155; }
.rc-quote cite { display: block; margin-top: 8px; font-style: normal; font-weight: 700; font-size: .75rem; color: #1e293b; }
.rc-quote span { font-size: .75rem; color: #64748b; }

/* margin-top:auto pins this to the bottom of the flex column above. */
.rc-trust {
    margin-top: auto;
    padding-top: 28px;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
}

.rc-trust-items {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: 8px;
}

.rc-trust-items span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.rc-trust-items svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Breathing room above the testimonial now that the column stretches. */
.rc-quote { margin-top: 28px; }

/* ---- Success ---- */

.rc-success {
    max-width: 560px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 5px 8px 0 rgba(0,0,0,.14);
}

.rc-success-accent { height: 6px; background: linear-gradient(90deg, #10b981 0%, #0094C0 100%); }
.rc-success-body { padding: 32px; text-align: center; }

.rc-success-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rc-success-body h2 { font-size: 1.5rem; font-weight: 700; margin: 8px 0 12px; color: #1e293b; }
.rc-success-lead { max-width: 460px; margin: 0 auto; line-height: 1.6; color: #475569; }
.rc-success-lead strong { color: #334155; }

.rc-next {
    margin-top: 24px;
    padding: 16px;
    text-align: left;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
}

.rc-next h3 { margin: 0 0 10px; font-size: .8125rem; font-weight: 700; color: #166534; }
.rc-next ul { margin: 0; padding-left: 20px; }
.rc-next li { font-size: .875rem; line-height: 1.5; color: #166534; margin-bottom: 6px; }

.rc-success-cta { margin-top: 24px; }
.rc-inline-btn { display: inline-block; width: auto; padding: 10px 32px; font-weight: 700; text-decoration: none; }

.rc-footer { text-align: center; margin-top: 40px; padding-bottom: 40px; color: #94a3b8; font-size: 12px; }
.rc-footer a { color: #94a3b8; }

@media (max-width: 900px) {
    .rc-card { grid-template-columns: 1fr; }
    /* Marketing copy is supporting material; on a phone the form comes first and the
       sidebar would just push it below the fold. */
    .rc-aside { display: none; }
    .rc-form { padding: 28px 20px; }
    .rc-header h1 { font-size: 26px; }
}

@media (max-width: 560px) {
    .rc-half, .rc-two-thirds, .rc-third { grid-column: span 6; }
}