/* ==========================================================================
   JobNest Rider — Login / Become a Rider (Mobile Number + OTP)
   Modelled on the Rider App sign-in and "Join as a JobNest Partner" screens.
   ========================================================================== */

.rauth {
    padding: clamp(2rem, 1.5rem + 3vw, 4.5rem) 0 clamp(3rem, 2rem + 3vw, 5rem);
    background: linear-gradient(180deg, #f3f5f7 0%, #e9ecef 100%);
    min-height: calc(100vh - var(--header-height));
}
.rauth-wrap { max-width: 460px; margin: 0 auto; }
.rauth-step--wide { max-width: 560px; margin: 0 auto; }
.rauth-wrap:has(.rauth-step--wide:not([hidden])) { max-width: 560px; }

/* Brand block (logo, title, subtitle) */
.rauth-brand { text-align: center; margin-bottom: 1.75rem; }
.rauth-logo {
    display: block; width: 122px; height: 122px; margin: 0 auto 1.5rem; border-radius: 50%; overflow: hidden;
    box-shadow: 0 0 0 5px rgba(255, 204, 0, 0.35), 0 0 0 26px rgba(255, 255, 255, 0.55), 0 14px 34px -10px rgba(15, 23, 42, 0.35);
}
.rauth-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rauth-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 1.1rem; border-radius: 50%; background: var(--color-primary); color: var(--color-dark); font-size: 1.5rem; box-shadow: 0 0 0 10px rgba(255, 204, 0, 0.18); }
.rauth-title { margin: 0 0 0.35rem; font-size: clamp(1.45rem, 1.3rem + 0.6vw, 1.75rem); font-weight: var(--fw-extrabold); letter-spacing: 0.04em; color: var(--color-dark); }
.rauth-title i { display: inline-block; vertical-align: middle; font-style: normal; font-size: 0.48em; letter-spacing: 0.08em; padding: 0.3em 0.6em; border-radius: 6px; background: var(--color-dark); color: var(--color-primary); }
.rauth-title--sm { letter-spacing: -0.01em; font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.6rem); }
.rauth-sub { margin: 0; color: var(--color-text-muted); font-size: 0.95rem; }
.rauth-number { color: var(--color-dark); font-weight: var(--fw-bold); letter-spacing: 0.03em; }

/* Card */
.rauth-card { padding: clamp(1.25rem, 1rem + 1.5vw, 1.75rem); border-radius: 20px; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(226, 232, 240, 0.9); box-shadow: 0 18px 40px -22px rgba(15, 23, 42, 0.3); }
.rauth-card--form { background: var(--color-white); border-radius: 24px; }
.rauth-card .backend-notice { margin-bottom: 1.25rem; }
.rauth-label { display: block; margin-bottom: 0.55rem; font-size: 0.72rem; font-weight: var(--fw-extrabold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-dark); }

/* Inputs */
.rauth-input { position: relative; display: flex; align-items: center; }
.rauth-input > i { position: absolute; left: 1.1rem; color: var(--color-dark-2); font-size: 1rem; pointer-events: none; }
.rauth-input .form-control { min-height: 54px; padding-left: 3rem; border: 1.5px solid transparent; border-radius: 14px; background: #e3e7ec; font-size: 1rem; letter-spacing: 0.02em; }
.rauth-input .form-control:focus { background: var(--color-white); border-color: var(--color-dark); box-shadow: 0 0 0 4px var(--color-primary-a35); }
.rauth-input .form-control.is-invalid { border-color: var(--color-error); background: #fff5f6; }
.rauth-input--soft .form-control { background: #eef2f7; border-color: #e3e9f1; }
.rauth-input--locked .form-control { padding-left: 1.25rem; padding-right: 9rem; color: var(--color-text-muted); background: #eef2f7; cursor: not-allowed; }
.rauth-input--locked .form-control:focus { box-shadow: none; border-color: #e3e9f1; background: #eef2f7; }
.rauth-verified-badge { position: absolute; right: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 99px; background: var(--color-warning-soft); color: var(--color-warning); font-size: 0.72rem; font-weight: var(--fw-bold); white-space: nowrap; }
.rauth-verified-badge:has(i) { background: var(--color-success-soft); color: var(--color-success-ink); }
.rauth-input--static { min-height: 54px; padding: 0 1.1rem 0 3rem; border-radius: 14px; background: #eef2f7; border: 1.5px solid #e3e9f1; font-weight: var(--fw-semibold); color: var(--color-dark); }

.rauth-otp { min-height: 60px; text-align: center; font-size: 1.6rem; font-weight: var(--fw-bold); letter-spacing: 0.55em; padding-left: 0.55em; border-radius: 14px; background: #e3e7ec; border: 1.5px solid transparent; font-variant-numeric: tabular-nums; }
.rauth-otp:focus { background: var(--color-white); border-color: var(--color-dark); box-shadow: 0 0 0 4px var(--color-primary-a35); }
.rauth-otp::placeholder { color: #b6bec9; letter-spacing: 0.4em; }

/* Buttons & links */
.rauth-btn { min-height: 50px; border-radius: 14px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--fw-extrabold); font-size: 0.9rem; }
.rauth-btn--lg { min-height: 60px; font-size: 0.95rem; }
.rauth-btn.is-busy { opacity: 0.7; pointer-events: none; }
.rauth-link { padding: 0.35rem 0.1rem; border: 0; background: none; font-weight: var(--fw-semibold); font-size: 0.875rem; color: var(--color-dark); text-decoration: underline; text-decoration-color: var(--color-primary); text-underline-offset: 3px; }
.rauth-link:hover { color: var(--color-primary-ink); }
.rauth-otp-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.rauth-countdown { font-size: 0.85rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.rauth-terms, .rauth-switch, .rauth-preview { margin: 1.25rem 0 0; text-align: center; font-size: 0.8rem; color: var(--color-text-muted); }
.rauth-switch, .rauth-preview { font-size: 0.875rem; }
.rauth-terms a, .rauth-switch a { font-weight: var(--fw-semibold); }

/* Join as a JobNest Partner */
.rauth-join-head { margin-bottom: 1.5rem; }
.rauth-join-title { margin: 0 0 0.4rem; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); font-weight: var(--fw-extrabold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-dark); }
.rauth-join-sub { margin: 0; color: var(--color-text-muted); font-size: 1rem; }
.rauth-field-label { display: block; margin-bottom: 0.55rem; font-size: 0.95rem; font-weight: var(--fw-bold); color: var(--color-dark); }
.rauth-card--form .form-field { margin-bottom: 1.2rem; }
.rauth-radios { border: 0; padding: 0; margin: 0 0 1.2rem; min-width: 0; }
.rauth-radios legend { float: none; width: auto; padding: 0; }
.rauth-radio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.rauth-radio { position: relative; display: flex; align-items: center; gap: 0.85rem; min-height: 54px; padding: 0 1rem; border-radius: 14px; background: #eef2f7; border: 1.5px solid #e3e9f1; font-weight: var(--fw-semibold); color: var(--color-dark); cursor: pointer; transition: border-color var(--dur), background-color var(--dur); }
.rauth-radio--full { grid-column: 1 / -1; }
.rauth-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rauth-radio__dot { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #64748b; display: grid; place-items: center; transition: border-color var(--dur); }
.rauth-radio__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-dark); transform: scale(0); transition: transform var(--dur) var(--ease); }
.rauth-radio:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.rauth-radio:has(input:checked) .rauth-radio__dot { border-color: var(--color-dark); }
.rauth-radio:has(input:checked) .rauth-radio__dot::after { transform: scale(1); }
.rauth-radio:has(input:focus-visible) { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.rauth-radios:has(.is-invalid) .rauth-radio { border-color: var(--color-error); }

@media (max-width: 575.98px) {
    .rauth-logo { width: 112px; height: 112px; box-shadow: 0 0 0 4px rgba(255, 204, 0, 0.35), 0 0 0 18px rgba(255, 255, 255, 0.55), 0 12px 28px -10px rgba(15, 23, 42, 0.35); }
    .rauth-card--form { border-radius: 20px; }
    .rauth-otp { font-size: 1.4rem; letter-spacing: 0.45em; }
}
@media (max-width: 359.98px) {
    .rauth-radio-grid { grid-template-columns: 1fr; }
    .rauth-radio--full { grid-column: auto; }
    .rauth-input--locked .form-control { padding-right: 1.25rem; }
    .rauth-verified-badge { position: static; margin-left: 0.5rem; }
    .rauth-input--locked { flex-wrap: wrap; gap: 0.4rem; }
}