/* ════════════════════════════════════════════════════════════════════
   Phase T.9a — Auth surfaces Picsin Teal overrides + standalone shell
   ════════════════════════════════════════════════════════════════════
   Single sheet covering BOTH:
     1. Auth modal (.atl-auth-* namespace from atelier-auth-modal.css)
        → overrides hardcoded umber tints + cream OAuth chrome
     2. Standalone /login + /register + /verify-otp + /forgot-password
        + /reset-password pages (.atl-authpage-* new namespace)
        → ports them off Bootstrap into a Picsin Teal centered-card shell

   Hard rules:
   - DO NOT edit atelier-auth-modal.css.
   - DO NOT touch CustomerAuthController, RegisterController,
     PasswordResetController, SocialAuthController, RegistrationService.
   - DO NOT touch routes/auth.php.
   - Google + Facebook OAuth buttons keep their official branding (per
     Naman 2026-05-01 Q3) — Picsin Teal only retones the surrounding
     chrome, not the branded button itself.
   - All teal CTAs use !important to defend against legacy Bootstrap
     button reset still loaded by layouts.app where applicable.
   - Append-only — future T.9 polish lands at the bottom of this file.
   ──────────────────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════════
   PART A — Auth MODAL overrides (.atl-auth-*)
   ════════════════════════════════════════════════════════════════════
   Lifted from atelier-auth-modal.css. Tones the modal Picsin Teal
   without touching the source sheet.
   ──────────────────────────────────────────────────────────────────── */

/* T.9a.A1 — Modal overlay backdrop tint (slate, was umber) */
.atl-auth-overlay {
    background: rgba(44, 55, 66, 0.55) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* T.9a.A2 — Dialog box: white + slate border + soft shadow */
.atl-auth-dialog {
    background: var(--pt-card) !important;
    border: 1px solid var(--pt-rule) !important;
    border-radius: var(--pt-radius-lg) !important;
    box-shadow: var(--pt-shadow-lg) !important;
}

/* T.9a.A3 — Header typography */
.atl-auth-eyebrow {
    color: var(--pt-teal-700) !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
}
.atl-auth-title {
    font-style: normal !important;
    font-weight: 700 !important;
    color: var(--pt-slate) !important;
    font-size: 22px !important;
    letter-spacing: -0.005em !important;
}
.atl-auth-subtitle {
    color: var(--pt-ink-2) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}
.atl-auth-close {
    color: var(--pt-ink-3) !important;
}
.atl-auth-close:hover {
    background: var(--pt-band) !important;
    color: var(--pt-slate) !important;
}

/* T.9a.A4 — Quota warning (used when sessionStorage stash fails on big photos) */
.atl-auth-quota-warn {
    background: rgba(217, 130, 43, 0.10) !important;
    border: 1px solid rgba(217, 130, 43, 0.28) !important;
    border-left: 3px solid var(--pt-warning) !important;
    color: #B45309 !important;
    border-radius: var(--pt-radius) !important;
}
.atl-auth-quota-warn strong {
    color: var(--pt-slate) !important;
}

/* T.9a.A5 — OAuth buttons (Google branding preserved per Naman Q3) */
.atl-oauth-btn {
    background: #FFFFFF !important;
    color: #3c4043 !important;
    border: 1px solid var(--pt-rule-strong) !important;
    border-radius: var(--pt-radius) !important;
    font-weight: 600 !important;
}
.atl-oauth-btn:hover {
    background: var(--pt-band) !important;
    border-color: var(--pt-slate) !important;
    color: #3c4043 !important;
    box-shadow: 0 1px 2px rgba(60,64,67,.14) !important;
}

/* T.9a.A6 — "or" divider */
.atl-auth-or {
    color: var(--pt-ink-3) !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
}

/* T.9a.A7 — Email + password collapse */
.atl-auth-emailpw-toggle {
    color: var(--pt-teal-700) !important;
    font-weight: 700 !important;
}
.atl-auth-emailpw-toggle:hover {
    color: var(--pt-teal) !important;
}
.atl-auth-chevron {
    color: currentColor !important;
}
.atl-auth-label {
    color: var(--pt-ink-2) !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
}
.atl-auth-input {
    border: 1px solid var(--pt-rule) !important;
    border-radius: var(--pt-radius) !important;
    color: var(--pt-slate) !important;
    background: #FFFFFF !important;
}
.atl-auth-input:focus {
    border-color: var(--pt-teal) !important;
    box-shadow: 0 0 0 3px rgba(27, 156, 133, 0.14) !important;
    outline: none !important;
}
.atl-auth-error {
    color: var(--pt-danger) !important;
    font-weight: 500 !important;
}
.atl-auth-submit {
    background: var(--pt-teal) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--pt-teal) !important;
    border-radius: var(--pt-radius) !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
}
.atl-auth-submit:hover {
    background: var(--pt-teal-700) !important;
    border-color: var(--pt-teal-700) !important;
    color: #FFFFFF !important;
}
.atl-auth-foot {
    color: var(--pt-ink-2) !important;
    font-size: 13px !important;
}
.atl-auth-foot a {
    color: var(--pt-teal-700) !important;
    font-weight: 700 !important;
}
.atl-auth-foot a:hover {
    color: var(--pt-teal) !important;
}


/* ════════════════════════════════════════════════════════════════════
   PART B — Standalone auth page shell (.atl-authpage-*)
   ════════════════════════════════════════════════════════════════════
   Used by /login + /register + /verify-otp + /forgot-password +
   /reset-password (all ported from layouts.app → layouts.atelier in
   Phase T.9a). Picsin Teal centered card.
   ──────────────────────────────────────────────────────────────────── */

.atl-authpage {
    background: var(--pt-band) !important;
    min-height: calc(100vh - 80px) !important;
    padding: 60px 20px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
}
.atl-authpage-card {
    background: var(--pt-card) !important;
    border: 1px solid var(--pt-rule) !important;
    border-radius: var(--pt-radius-lg) !important;
    box-shadow: var(--pt-shadow) !important;
    width: 100% !important;
    max-width: 460px !important;
    padding: 36px 32px !important;
}

/* Header */
.atl-authpage-head {
    margin-bottom: 24px !important;
    text-align: left !important;
}
.atl-authpage-eyebrow {
    color: var(--pt-teal-700) !important;
    font-size: 12px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    margin: 0 0 8px !important;
}
.atl-authpage-title {
    color: var(--pt-slate) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.005em !important;
    margin: 0 0 6px !important;
}
.atl-authpage-subtitle {
    color: var(--pt-ink-2) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

/* Tab pills (Sign In / Sign Up) */
.atl-authpage-tabs {
    display: flex !important;
    gap: 6px !important;
    background: var(--pt-band) !important;
    border-radius: var(--pt-radius) !important;
    padding: 4px !important;
    margin: 0 0 22px !important;
}
.atl-authpage-tab {
    flex: 1 !important;
    text-align: center !important;
    padding: 10px 14px !important;
    border-radius: var(--pt-radius-sm) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--pt-ink-2) !important;
    text-decoration: none !important;
    transition: background .18s, color .18s !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}
.atl-authpage-tab:hover {
    color: var(--pt-slate) !important;
    background: rgba(255, 255, 255, 0.5) !important;
    text-decoration: none !important;
}
.atl-authpage-tab.is-active {
    background: var(--pt-card) !important;
    color: var(--pt-slate) !important;
    box-shadow: var(--pt-shadow-sm) !important;
}

/* OAuth buttons (Google branding preserved) */
.atl-authpage-oauth {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 0 0 20px !important;
}
.atl-authpage-oauth-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 11px 16px !important;
    border-radius: var(--pt-radius) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    background: #FFFFFF !important;
    color: #3c4043 !important;
    border: 1px solid var(--pt-rule-strong) !important;
    text-decoration: none !important;
    transition: background .18s, border-color .18s, box-shadow .18s !important;
}
.atl-authpage-oauth-btn:hover {
    background: var(--pt-band) !important;
    border-color: var(--pt-slate) !important;
    color: #3c4043 !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(60,64,67,.14) !important;
}
/* Phase T.9a round 2 (2026-05-01) — Naman: match the modal's white-outlined
   Facebook button (was a blue brand-fill button). Reverts to the default
   .atl-authpage-oauth-btn white-outlined style by simply NOT overriding
   anything for the --facebook variant. The Facebook brand colour now lives
   on the SVG icon path (blue "f" on white button), exactly like Google.
   This block intentionally left empty so future variants can append. */

/* "or" divider */
.atl-authpage-or {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: var(--pt-ink-3) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    margin: 18px 0 !important;
}
.atl-authpage-or::before,
.atl-authpage-or::after {
    content: "" !important;
    flex: 1 !important;
    height: 1px !important;
    background: var(--pt-rule) !important;
}

/* Form */
.atl-authpage-field {
    margin-bottom: 14px !important;
}
.atl-authpage-label {
    display: block !important;
    color: var(--pt-ink-2) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
}
.atl-authpage-required {
    color: var(--pt-danger) !important;
    font-weight: 700 !important;
    margin-left: 3px !important;
}
.atl-authpage-input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 11px 14px !important;
    font-family: var(--pt-font-sans) !important;
    font-size: 14px !important;
    color: var(--pt-slate) !important;
    background: #FFFFFF !important;
    border: 1px solid var(--pt-rule) !important;
    border-radius: var(--pt-radius) !important;
    transition: border-color .18s, box-shadow .18s, background .18s !important;
}
.atl-authpage-input:hover {
    border-color: var(--pt-rule-strong) !important;
}
.atl-authpage-input:focus {
    outline: none !important;
    border-color: var(--pt-teal) !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(27, 156, 133, 0.14) !important;
}
.atl-authpage-input::placeholder {
    color: var(--pt-ink-3) !important;
    font-weight: 500 !important;
}

/* Mobile prepend (+91) for register */
.atl-authpage-input-group {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: stretch !important;
}
.atl-authpage-input-prepend {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    background: var(--pt-band) !important;
    border: 1px solid var(--pt-rule) !important;
    border-right: none !important;
    border-radius: var(--pt-radius) 0 0 var(--pt-radius) !important;
    font-size: 14px !important;
    color: var(--pt-ink-2) !important;
    font-weight: 600 !important;
}
.atl-authpage-input-group .atl-authpage-input {
    border-radius: 0 var(--pt-radius) var(--pt-radius) 0 !important;
}

/* OTP input — large monospaced, tabular-nums, letter-spaced */
.atl-authpage-otp-input {
    text-align: center !important;
    font-size: 22px !important;
    letter-spacing: 8px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
}

/* Forgot password link (under password field on /login) */
.atl-authpage-forgot {
    display: block !important;
    text-align: right !important;
    margin: -4px 0 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--pt-teal-700) !important;
    text-decoration: none !important;
    letter-spacing: .02em !important;
}
.atl-authpage-forgot:hover {
    color: var(--pt-teal) !important;
    text-decoration: none !important;
}

/* Primary submit button */
.atl-authpage-submit {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 13px 18px !important;
    background: var(--pt-teal) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--pt-teal) !important;
    border-radius: var(--pt-radius) !important;
    font-family: var(--pt-font-sans) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background .18s, border-color .18s, opacity .18s !important;
    margin: 8px 0 4px !important;
}
.atl-authpage-submit:hover {
    background: var(--pt-teal-700) !important;
    border-color: var(--pt-teal-700) !important;
    color: #FFFFFF !important;
}
.atl-authpage-submit:disabled,
.atl-authpage-submit.is-disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
}

/* Footer links (Terms / Privacy / Back to sign in / Resend) */
.atl-authpage-foot {
    margin-top: 18px !important;
    text-align: center !important;
    font-size: 13px !important;
    color: var(--pt-ink-2) !important;
}
.atl-authpage-foot a {
    color: var(--pt-teal-700) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
.atl-authpage-foot a:hover {
    color: var(--pt-teal) !important;
    text-decoration: none !important;
}
.atl-authpage-foot-sep {
    color: var(--pt-ink-3) !important;
    margin: 0 8px !important;
}

/* Status messages (success / error / info) */
.atl-authpage-msg {
    padding: 12px 14px !important;
    border-radius: var(--pt-radius) !important;
    font-size: 13px !important;
    margin: 0 0 14px !important;
    line-height: 1.5 !important;
}
.atl-authpage-msg--error {
    background: rgba(192, 57, 43, 0.06) !important;
    color: #8a2317 !important;
    border: 1px solid rgba(192, 57, 43, 0.22) !important;
    border-left: 3px solid var(--pt-danger) !important;
}
.atl-authpage-msg--success {
    background: var(--pt-teal-tint) !important;
    color: var(--pt-teal-700) !important;
    border: 1px solid rgba(27, 156, 133, 0.28) !important;
    border-left: 3px solid var(--pt-teal-700) !important;
}
.atl-authpage-msg--hint {
    background: var(--pt-band) !important;
    color: var(--pt-ink) !important;
    border: 1px solid var(--pt-rule) !important;
    font-size: 12px !important;
}

/* Mobile @560px */
@media (max-width: 560px) {
    .atl-authpage          { padding: 32px 16px !important; }
    .atl-authpage-card     { padding: 28px 22px !important; }
    .atl-authpage-title    { font-size: 22px !important; }
}


/* ════════════════════════════════════════════════════════════════════
   Phase T.9b (2026-05-01) — OTP channel picker on /register pane
   ════════════════════════════════════════════════════════════════════
   2-card radio for "Email" vs "Mobile SMS" verification channel.
   Mirrors the COD payment OTP channel picker visual (T.6.13). Selected
   card gets teal-tint bg + teal border + filled ico circle.
   ──────────────────────────────────────────────────────────────────── */
.atl-authpage-otp-channels {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
.atl-authpage-otp-channel {
    flex: 1 1 calc(50% - 5px) !important;
    min-width: 160px !important;
    border: 1px solid var(--pt-rule) !important;
    border-radius: var(--pt-radius) !important;
    padding: 12px 14px !important;
    cursor: pointer !important;
    background: var(--pt-card) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    transition: border-color .18s, background .18s, box-shadow .18s !important;
    margin: 0 !important;
}
.atl-authpage-otp-channel:hover {
    border-color: var(--pt-teal) !important;
    box-shadow: 0 0 0 1px rgba(27, 156, 133, 0.12) !important;
}
.atl-authpage-otp-channel input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.atl-authpage-otp-channel-ico {
    width: 30px !important;
    height: 30px !important;
    border-radius: var(--pt-radius-pill) !important;
    background: var(--pt-band) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--pt-ink-2) !important;
    flex-shrink: 0 !important;
    transition: background .18s, color .18s !important;
}
.atl-authpage-otp-channel-ico svg {
    width: 15px !important;
    height: 15px !important;
}
.atl-authpage-otp-channel-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}
.atl-authpage-otp-channel-label {
    font-size: 14px !important;
    color: var(--pt-slate) !important;
    font-weight: 700 !important;
}
.atl-authpage-otp-channel-sub {
    font-size: 11px !important;
    color: var(--pt-ink-3) !important;
    letter-spacing: .02em !important;
}
.atl-authpage-otp-channel.is-selected,
.atl-authpage-otp-channel:has(input[type="radio"]:checked) {
    border-color: var(--pt-teal) !important;
    background: var(--pt-teal-tint) !important;
    box-shadow: 0 0 0 1px var(--pt-teal) inset !important;
}
.atl-authpage-otp-channel.is-selected .atl-authpage-otp-channel-ico,
.atl-authpage-otp-channel:has(input[type="radio"]:checked) .atl-authpage-otp-channel-ico {
    background: rgba(27, 156, 133, 0.15) !important;
    color: var(--pt-teal-700) !important;
}