/* ============================================
   AUTH MODULE — login, signup, OTP verify
   ============================================ */

.auth-shell {
    max-width: 920px;
    margin: 0 auto;
}

.auth-card {
    border: 1px solid rgba(26, 35, 126, 0.12);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 52px rgba(15, 23, 42, 0.10);
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
}

.auth-card .card-body { padding: 2.25rem; }

/* Inline notes */
.inline-note-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.inline-note {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 1.25rem;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.4;
}

.inline-note i { font-size: 0.8rem; flex-shrink: 0; }
.inline-note--success { color: #166534; }
.inline-note--danger  { color: #b42318; }
.inline-note--warning { color: #b45309; }
.inline-note--info    { color: #1d4ed8; }

.inline-note-list--actions {
    margin-top: 0;
    margin-bottom: 0.45rem;
}

/* Eyebrow / header */
.auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
    background: #eef2ff;
    border: 1px solid #dbe3ff;
    color: #1a237e;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.auth-head { margin-bottom: 1.5rem; }

.auth-head--compact {
    max-width: 500px;
    margin: 0 auto 1.5rem;
    text-align: left;
}

.auth-title {
    margin-top: 1rem;
    margin-bottom: 0.65rem;
}

.auth-subtitle {
    color: #667085;
    font-size: 0.98rem;
    margin-bottom: 0;
    line-height: 1.6;
}

/* Signup stepper */
.auth-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.signup-stepper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 1.6rem 0 1.35rem;
}

.signup-step {
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    padding: 0.95rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #ffffff;
}

.signup-step.is-active  { border-color: #3949ab; background: #eef2ff; box-shadow: inset 0 0 0 1px rgba(57,73,171,0.08); }
.signup-step.is-complete { border-color: #b7e4c7; background: #f4fff7; }

.step-badge {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.92rem;
    color: #475467;
    background: #f2f4f7;
    border: 1px solid #d0d5dd;
    flex-shrink: 0;
}

.signup-step.is-active   .step-badge { color: #1a237e; background: #dfe6ff; border-color: #9fb1ff; }
.signup-step.is-complete .step-badge { color: #146c43; background: #d1fae5; border-color: #98e0bb; }

.step-label { font-weight: 700; color: #101828; font-size: 0.95rem; }
.step-hint  { color: #667085; font-size: 0.82rem; margin-top: 0.15rem; }

/* Verify grid */
.verify-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.verify-card {
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    padding: 1rem;
    background: #ffffff;
}

.verify-card.is-current  { border-color: #3949ab; background: #eef2ff; }
.verify-card.is-complete { border-color: #b7e4c7; background: #f4fff7; }
.verify-card.is-pending  { background: #fafbfc; }

.verify-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.verify-label  { font-weight: 700; color: #101828; }
.verify-target { color: #475467; font-size: 0.92rem; word-break: break-word; }

.verify-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: #f2f4f7;
    color: #475467;
}

.verify-status.is-current  { background: #dfe6ff; color: #1a237e; }
.verify-status.is-complete { background: #d1fae5; color: #146c43; }
.verify-status.is-pending  { background: #f2f4f7; color: #667085; }

/* Auth note / info panels */
.auth-note {
    border: 1px solid #dbeafe;
    background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
    color: #1e3a8a;
    border-radius: 16px;
    padding: 1rem 1.05rem;
    margin-bottom: 1.35rem;
}

.auth-note strong { color: #102a6b; }

.auth-info-panel,
.form-panel {
    border: 1px solid #e4e7ec;
    border-radius: 18px;
    background: #ffffff;
    padding: 1.15rem;
}

.auth-info-panel {
    background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
    border-color: #dbeafe;
}

.panel-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1a237e;
    margin-bottom: 0.65rem;
}

.panel-title    { margin-bottom: 0.45rem; color: #101828; font-size: 1.18rem; font-weight: 700; }
.panel-copy     { color: #667085; line-height: 1.65; margin-bottom: 1rem; }

/* Channel list */
.channel-list { display: grid; gap: 0.85rem; }

.channel-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    border-radius: 16px;
    padding: 0.9rem 1rem;
    border: 1px solid #dbe3ff;
    background: rgba(255, 255, 255, 0.82);
}

.channel-item.is-phone { border-color: #d6f5e8; background: #f5fff9; }

.channel-icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1a237e;
    background: #dfe6ff;
    font-size: 1rem;
}

.channel-item.is-phone .channel-icon { color: #0f6d4c; background: #d1fae5; }

.channel-title { font-weight: 700; color: #101828; margin-bottom: 0.15rem; }
.channel-copy  { color: #667085; font-size: 0.9rem; line-height: 1.55; }

.channel-order {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #1a237e;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.channel-item.is-phone .channel-order { background: #dcfce7; color: #166534; }

/* Form panel */
.form-panel-title { font-size: 1.04rem; font-weight: 700; color: #101828; margin-bottom: 0.25rem; }
.form-panel-copy  { color: #667085; font-size: 0.9rem; line-height: 1.6; margin-bottom: 1rem; }

.auth-card .form-label { font-weight: 700; color: #101828; }

.auth-card .form-control {
    min-height: 3rem;
    border-radius: 12px;
    border-color: #d0d5dd;
}

.auth-card .form-control:focus {
    border-color: #3949ab;
    box-shadow: 0 0 0 0.2rem rgba(57, 73, 171, 0.15);
}

.field-helper { color: #667085; font-size: 0.84rem; line-height: 1.5; margin-top: 0.4rem; }

.field-error {
    display: none;
    color: #b42318;
    font-size: 0.84rem;
    font-weight: 600;
    margin-top: 0.45rem;
}

.form-control.is-invalid + .field-error,
.field-error.is-visible { display: block; }

/* Actions / footer */
.auth-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.35rem;
}

.auth-actions .btn { min-width: 10.5rem; }

.auth-footer { margin-top: 1.35rem; color: #475467; }
.auth-footer a { font-weight: 700; color: #1a237e; }
.auth-footer a:hover { color: #0d47a1; }

/* OTP panel */
.otp-panel {
    border: 1px solid #e4e7ec;
    border-radius: 18px;
    padding: 1.1rem;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.otp-panel-title    { font-weight: 700; color: #101828; margin-bottom: 0.35rem; }
.otp-panel-subtitle { color: #667085; font-size: 0.92rem; margin-bottom: 1rem; }

.otp-code-input {
    text-align: center;
    letter-spacing: 0.22rem;
    font-size: 1.05rem;
    font-weight: 700;
}

/* Signup single card */
.signup-single-card {
    max-width: 620px;
    margin: 0 auto;
    border: 1px solid #e4e7ec;
    border-radius: 24px;
    background: #ffffff;
    padding: 1.45rem 1.45rem 1.2rem;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}

.signup-stack { display: flex; flex-direction: column; gap: 1.15rem; }

.signup-field-group {
    padding-bottom: 1rem;
    border-bottom: 1px solid #eef2f6;
}

.signup-field-group:last-of-type {
    padding-bottom: 0;
    border-bottom: 0;
}

.signup-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: end;
}

.signup-row--single { grid-template-columns: minmax(0, 1fr); }

.signup-otp-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: end;
    padding-top: 0.7rem;
}

.signup-otp-actions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 142px;
}

.signup-resend-note { font-size: 0.8rem; color: #667085; line-height: 1.35; text-align: left; }
.signup-resend-note.is-disabled { color: #98a2b3; }

/* Resend countdown → link transition */
.resend-countdown {
    display: inline-block;
    font-size: 0.84rem;
    font-weight: 600;
    color: #98a2b3;
    line-height: 1.4;
    min-height: 1.5rem;
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0;
}

.resend-countdown[data-ready="true"] {
    color: #1a237e;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}

.resend-countdown[data-ready="true"]:hover { color: #0d47a1; }
.resend-countdown:focus,
.resend-countdown:focus-visible { outline: none; box-shadow: none; }

.signup-field label { display: block; font-weight: 700; color: #101828; margin-bottom: 0.45rem; }

.signup-inline-action {
    min-width: 122px;
    min-height: 3rem;
    border-radius: 12px;
    font-weight: 700;
}

.signup-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.55rem;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.4;
    color: #667085;
}

.signup-status i { font-size: 0.8rem; }
.signup-status.is-verified { color: #166534; }
.signup-status.is-sent     { color: #1d4ed8; }
.signup-status.is-locked   { color: #98a2b3; }

.signup-bottom-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 0.2rem;
}

.signup-consent { margin-top: 0.25rem; padding-top: 0.2rem; }

.signup-consent .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0;
}

.signup-consent .form-check-input     { margin-top: 0.22rem; flex-shrink: 0; }
.signup-consent .form-check-label     { color: #344054; font-size: 0.92rem; line-height: 1.55; }
.signup-consent .form-check-label a   { color: #1a237e; font-weight: 700; text-decoration: none; }
.signup-consent .form-check-label a:hover { color: #0d47a1; text-decoration: underline; }

.signup-bottom-actions .btn-primary { min-width: 148px; }

.signup-cancel-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    color: #475467;
    font-weight: 600;
    text-decoration: none;
    padding: 0 0.2rem;
}

.signup-cancel-link:hover { color: #1a237e; }

/* Narrow panel variant */
.auth-form-panel--narrow {
    max-width: 500px;
    margin: 0 auto;
    border: 1px solid #e4e7ec;
    border-radius: 20px;
    background: #ffffff;
    padding: 1.15rem 1.15rem 1rem;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}

.auth-form-panel--narrow .auth-actions { margin-top: 1rem; }

.auth-form-panel--narrow .auth-actions .btn-primary {
    min-width: 0;
    width: 100%;
}

.auth-note--narrow,
.auth-footer--narrow {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.auth-footer--narrow { margin-top: 1rem; }

.auth-secondary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 0.85rem;
    color: #475467;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
}

.auth-secondary-link:hover { color: #1a237e; }

/* Login OTP layout */
.login-otp-stack { display: flex; flex-direction: column; gap: 1rem; }

.login-otp-actions {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
    gap: 0.75rem;
    align-items: start;
}

.login-otp-primary { width: 100%; min-height: 3.15rem; border-radius: 12px; font-weight: 700; }
.login-otp-secondary { min-width: 0; }

.login-otp-resend-block { display: flex; flex-direction: column; gap: 0.45rem; }

.login-otp-secondary .btn { width: 100%; min-height: 3rem; border-radius: 12px; font-weight: 700; }

/* Responsive */
@media (max-width: 767px) {
    .auth-split,
    .signup-stepper,
    .verify-grid { grid-template-columns: 1fr; }

    .channel-item { grid-template-columns: auto minmax(0, 1fr); }
    .channel-order { grid-column: 1 / -1; width: fit-content; }

    .signup-row,
    .signup-otp-row { grid-template-columns: 1fr; }

    .signup-otp-actions { min-width: 0; }

    .signup-inline-action,
    .signup-bottom-actions .btn-primary,
    .signup-cancel-link { width: 100%; }

    .signup-bottom-actions { flex-direction: column; }

    .login-otp-actions,
    .login-otp-secondary { grid-template-columns: 1fr; }
}

@media (max-width: 576px) {
    .auth-card .card-body { padding: 1.4rem; }
    .auth-actions { flex-direction: column; }
    .auth-actions .btn { width: 100%; }
}