/* ═══════════════════════════════════════════════════════════════
   HireLocal — 3D / motion layer for the auth screens
   (sign in, create account, forgot password, reset password)
   Pure CSS 3D transforms. Shares the vocabulary of home-3d.css.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --hl-green:  #25D366;
    --hl-deep:   #1a6b4a;
    --hl-teal:   #0d9488;
    --hl-amber:  #fbbf24;
    --hl-violet: #8b5cf6;
    --hl-ease:   cubic-bezier(.22, 1, .36, 1);
}

/* ───────────────────────────────────────────────────────────────
   1. THE STAGE — background photo, scrim, depth
   ─────────────────────────────────────────────────────────────── */

body.simple-bg-screen {
    position: relative;
    min-height: 100vh;
    background-attachment: fixed;
}

/* Darkening scrim so the white card reads against any photo */
body.simple-bg-screen::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(135deg, rgba(10, 38, 27, .82) 0%, rgba(8, 24, 32, .72) 55%, rgba(13, 148, 136, .55) 100%);
    pointer-events: none;
}

.hl-auth-stage {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    perspective: 1000px;
}

/* Drifting colour wash */
.hl-auth-stage .hl-aurora-blob {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .42;
    will-change: transform;
}
.hl-auth-stage .hl-aurora-blob:nth-child(1) {
    width: 460px; height: 460px; top: -110px; left: -90px;
    background: radial-gradient(circle at 35% 35%, var(--hl-green), transparent 68%);
    animation: hl-auth-drift-a 24s var(--hl-ease) infinite alternate;
}
.hl-auth-stage .hl-aurora-blob:nth-child(2) {
    width: 380px; height: 380px; bottom: -80px; right: -80px;
    background: radial-gradient(circle at 60% 40%, var(--hl-teal), transparent 68%);
    animation: hl-auth-drift-b 29s var(--hl-ease) infinite alternate;
}
.hl-auth-stage .hl-aurora-blob:nth-child(3) {
    width: 300px; height: 300px; top: 55%; left: 12%;
    background: radial-gradient(circle at 50% 50%, var(--hl-violet), transparent 66%);
    opacity: .26;
    animation: hl-auth-drift-c 33s var(--hl-ease) infinite alternate;
}

@keyframes hl-auth-drift-a {
    0%   { transform: translate3d(0,0,0) scale(1); }
    100% { transform: translate3d(110px, 80px, 0) scale(1.2); }
}
@keyframes hl-auth-drift-b {
    0%   { transform: translate3d(0,0,0) scale(1.12); }
    100% { transform: translate3d(-90px, -70px, 0) scale(.88); }
}
@keyframes hl-auth-drift-c {
    0%   { transform: translate3d(0,0,0) scale(.95); }
    100% { transform: translate3d(120px, -60px, 0) scale(1.28); }
}

/* Floating 3D chips flanking the card (desktop only) */
.hl-auth-chips { position: absolute; inset: 0; transform-style: preserve-3d; }

.hl-auth-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 15px 10px 11px;
    background: rgba(255,255,255,.93);
    border-radius: 13px;
    box-shadow: 0 18px 38px -12px rgba(0,0,0,.5), 0 2px 0 0 rgba(255,255,255,.7) inset;
    font-size: 12.5px;
    font-weight: 600;
    color: #16303f;
    white-space: nowrap;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
}
.hl-auth-chip .hl-chip-ico {
    width: 30px; height: 30px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: #fff;
    transform: translateZ(16px);
    box-shadow: 0 6px 13px -4px rgba(0,0,0,.5);
}
.hl-auth-chip .hl-chip-sub {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: #8b98a5;
}

.hl-auth-chip--1 { top: 18%; left: 6%;   animation: hl-auth-float-a 10s ease-in-out infinite; }
.hl-auth-chip--2 { top: 64%; left: 10%;  animation: hl-auth-float-b 12s ease-in-out infinite; }
.hl-auth-chip--3 { top: 24%; right: 7%;  animation: hl-auth-float-b 11s ease-in-out infinite reverse; }
.hl-auth-chip--4 { top: 70%; right: 5%;  animation: hl-auth-float-a 13s ease-in-out infinite reverse; }

@keyframes hl-auth-float-a {
    0%,100% { transform: translate3d(0,0,0)         rotateX(6deg)  rotateY(-15deg); }
    50%     { transform: translate3d(0,-24px,32px)  rotateX(-5deg) rotateY(-5deg); }
}
@keyframes hl-auth-float-b {
    0%,100% { transform: translate3d(0,0,0)         rotateX(-5deg) rotateY(14deg); }
    50%     { transform: translate3d(12px,-20px,24px) rotateX(7deg) rotateY(4deg); }
}

/* ───────────────────────────────────────────────────────────────
   2. THE CARD
   ─────────────────────────────────────────────────────────────── */

section.login-screen-sec,
section.signup-screen-sec,
section.lost-ps-screen-sec {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 48px 0;
    perspective: 1400px;
}

/* Override the theme's 12% top margin — we flex-centre instead */
.hl-auth-card {
    margin: 0 auto !important;
    max-width: 460px;
    width: 100%;
    background: rgba(255,255,255,.97);
    border-radius: 20px;
    padding: 34px 30px 30px;
    transform-style: preserve-3d;
    box-shadow:
        0 40px 80px -30px rgba(0, 0, 0, .6),
        0 12px 28px -16px rgba(0, 0, 0, .4),
        0 0 0 1px rgba(255,255,255,.35) inset;

    /* Entrance: swings up and forward out of the background */
    opacity: 0;
    transform: perspective(1400px) rotateX(14deg) translate3d(0, 40px, -120px);
    animation: hl-card-in .95s var(--hl-ease) .1s forwards;
}

@keyframes hl-card-in {
    to { opacity: 1; transform: perspective(1400px) rotateX(0) translate3d(0,0,0); }
}

/* Contents layer forward inside the card */
.hl-auth-card > * { position: relative; }
.hl-auth-brand { transform: translateZ(30px); }
.hl-auth-card .tab-links { transform: translateZ(20px); }

/* Staggered rise for each row inside the card */
.hl-auth-row {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    animation: hl-auth-row-in .6s var(--hl-ease) forwards;
}
.hl-auth-row--1 { animation-delay: .32s; }
.hl-auth-row--2 { animation-delay: .40s; }
.hl-auth-row--3 { animation-delay: .48s; }
.hl-auth-row--4 { animation-delay: .56s; }
.hl-auth-row--5 { animation-delay: .64s; }

@keyframes hl-auth-row-in {
    to { opacity: 1; transform: translate3d(0,0,0); }
}

/* Brand wordmark */
.hl-auth-brand { display: block; text-align: center; margin-bottom: 18px; text-decoration: none; }
.hl-auth-brand .hl-brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; margin-bottom: 9px;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--hl-green), var(--hl-teal));
    color: #fff; font-size: 20px;
    box-shadow: 0 12px 24px -10px rgba(37,211,102,.85);
    transform-style: preserve-3d;
    animation: hl-mark-bob 5s ease-in-out infinite;
}
@keyframes hl-mark-bob {
    0%,100% { transform: translateZ(0)    rotateY(0)     rotateX(0); }
    50%     { transform: translateZ(24px) rotateY(-14deg) rotateX(8deg); }
}

/* ───────────────────────────────────────────────────────────────
   3. TABS — sliding 3D indicator
   ─────────────────────────────────────────────────────────────── */

.hl-auth-card .tab-links {
    position: relative;
    border-bottom: 1px solid #eef1f4;
    border-radius: 0;
}
.hl-auth-card .tab-links a {
    position: relative;
    z-index: 1;
    border-bottom: none;
    transition: color .28s ease, transform .28s var(--hl-ease);
}
.hl-auth-card .tab-links a:hover { color: var(--hl-deep); }
.hl-auth-card .tab-links a.active { color: var(--hl-deep); font-weight: 700; transform: translateZ(14px); }

/* The indicator itself — sits under whichever tab is active */
.hl-auth-card .tab-links::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 50%;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--hl-green), var(--hl-teal));
    box-shadow: 0 4px 10px -2px rgba(37,211,102,.8);
    transition: transform .45s var(--hl-ease);
}
.hl-auth-card .tab-links[data-active="register"]::after { transform: translateX(100%); }

/* ───────────────────────────────────────────────────────────────
   4. ACCOUNT TYPE — 3D press tiles
   ─────────────────────────────────────────────────────────────── */

.account-type { perspective: 600px; }
.account-type > div { flex: 1; display: flex; }

.account-type label {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    overflow: hidden;
    transition:
        transform .35s var(--hl-ease),
        box-shadow .35s var(--hl-ease),
        border-color .25s ease,
        background .25s ease,
        color .25s ease;
}
.account-type label i { transition: transform .35s var(--hl-ease); }

.account-type label:hover { transform: translateZ(14px) translateY(-2px); }
.account-type label:hover i { transform: scale(1.12) rotate(-8deg); }

.account-type input[type="radio"]:checked + label {
    transform: translateZ(26px) translateY(-3px);
    box-shadow: 0 16px 28px -14px rgba(37,211,102,.9), 0 0 0 1px var(--hl-green) inset;
}
.account-type input[type="radio"]:checked + label i {
    transform: translateZ(18px) scale(1.16);
    color: var(--hl-green);
}
/* Keyboard focus must stay visible — these labels replace the radio visually */
.account-type input[type="radio"]:focus + label { outline: 2px solid var(--hl-teal); outline-offset: 2px; }

/* ───────────────────────────────────────────────────────────────
   5. INPUTS — lift + glow on focus
   ─────────────────────────────────────────────────────────────── */

.hl-auth-card .form-control {
    border: 1.5px solid #e5e8ec;
    border-radius: 50px;
    padding: 11px 18px;
    height: auto;
    font-size: 14px;
    box-shadow: none;
    transition:
        transform .3s var(--hl-ease),
        box-shadow .3s var(--hl-ease),
        border-color .2s ease;
}
.hl-auth-card .form-control:focus {
    border-color: var(--hl-green);
    transform: translateZ(18px) translateY(-2px);
    box-shadow:
        0 0 0 4px rgba(37,211,102,.16),
        0 14px 26px -14px rgba(26,107,74,.6);
    outline: none;
}
.hl-auth-card select.form-control { padding-right: 34px; }

/* Password field + reveal toggle */
.hl-pw-wrap { position: relative; }
.hl-pw-wrap .form-control { padding-right: 46px; }
.hl-pw-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    margin-top: -7px;              /* offset the theme's 15px input margin-bottom */
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; padding: 0;
    color: #9aa5b1; font-size: 15px; cursor: pointer;
    border-radius: 50%;
    transition: color .2s ease, background .2s ease;
}
.hl-pw-toggle:hover { color: var(--hl-deep); background: #f2f5f7; }
.hl-pw-toggle:focus { outline: 2px solid var(--hl-teal); outline-offset: 1px; }

/* ───────────────────────────────────────────────────────────────
   6. BUTTON — real press depth + submit spinner
   ─────────────────────────────────────────────────────────────── */

.hl-auth-card .btn-login {
    position: relative;
    width: 100%;
    min-width: 0;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--hl-green), #17b757);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .4px;
    padding: 13px 0;
    transform-style: preserve-3d;
    box-shadow: 0 6px 0 -1px #128a45, 0 18px 30px -14px rgba(18,138,69,.9);
    transition: transform .2s var(--hl-ease), box-shadow .2s var(--hl-ease), filter .2s ease;
}
.hl-auth-card .btn-login:hover {
    filter: brightness(1.05);
    transform: translate3d(0,-3px,22px);
    box-shadow: 0 9px 0 -1px #128a45, 0 24px 38px -16px rgba(18,138,69,.95);
}
.hl-auth-card .btn-login:active {
    transform: translate3d(0,4px,0);
    box-shadow: 0 2px 0 -1px #128a45, 0 8px 16px -10px rgba(18,138,69,.9);
}

/* is-loading is set by auth-3d.js on submit */
.hl-auth-card .btn-login.is-loading {
    color: transparent;
    pointer-events: none;
}
.hl-auth-card .btn-login.is-loading::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 19px; height: 19px;
    margin: -9.5px 0 0 -9.5px;
    border: 2.5px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: hl-spin .7s linear infinite;
}
@keyframes hl-spin { to { transform: rotate(360deg); } }

/* WhatsApp secondary button gets the same physicality */
.wa-login-btn {
    border-radius: 50px !important;
    transform-style: preserve-3d;
    box-shadow: 0 5px 0 -1px #128a45, 0 14px 24px -12px rgba(18,138,69,.8);
    transition: transform .2s var(--hl-ease), box-shadow .2s var(--hl-ease);
}
.wa-login-btn:hover  { transform: translate3d(0,-2px,18px); }
.wa-login-btn:active { transform: translate3d(0,3px,0); box-shadow: 0 2px 0 -1px #128a45; }

/* ───────────────────────────────────────────────────────────────
   7. REGISTER — field groups swing between roles
   ─────────────────────────────────────────────────────────────── */

.jobseeker-fields,
.employer-fields {
    transform-origin: top center;
    transform-style: preserve-3d;
}
.jobseeker-fields.show,
.employer-fields.show {
    animation: hl-group-in .5s var(--hl-ease);
}
@keyframes hl-group-in {
    from { opacity: 0; transform: rotateX(-16deg) translate3d(0,-12px,-40px); }
    to   { opacity: 1; transform: rotateX(0)      translate3d(0,0,0); }
}

/* ───────────────────────────────────────────────────────────────
   8. MESSAGES
   ─────────────────────────────────────────────────────────────── */

.hl-auth-card .alert-danger {
    border-radius: 12px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
    font-size: 13px;
    padding: 11px 14px;
    animation: hl-shake .5s var(--hl-ease);
}
@keyframes hl-shake {
    0%,100%   { transform: translateX(0); }
    18%, 58%  { transform: translateX(-7px); }
    38%, 78%  { transform: translateX(7px); }
}

.hl-auth-card span a { color: var(--hl-deep); font-weight: 600; }
.hl-auth-card span a:hover { color: var(--hl-green); }
.divider-text::before, .divider-text::after { width: 36%; }

/* ───────────────────────────────────────────────────────────────
   9. Responsive + accessibility guards
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 1099px) {
    .hl-auth-chips { display: none; }
}
@media (max-width: 767px) {
    .hl-auth-card { padding: 26px 20px 24px; border-radius: 16px; }
    section.login-screen-sec,
    section.signup-screen-sec,
    section.lost-ps-screen-sec { padding: 28px 0; }
    .hl-auth-stage .hl-aurora-blob { filter: blur(58px); opacity: .3; }
    /* Fixed backgrounds are janky on mobile Safari/Chrome */
    body.simple-bg-screen { background-attachment: scroll; }
}

@media (prefers-reduced-motion: reduce) {
    .hl-auth-stage .hl-aurora-blob,
    .hl-auth-chip,
    .hl-auth-card .hl-brand-mark,
    .hl-auth-card .alert-danger,
    .jobseeker-fields.show,
    .employer-fields.show {
        animation: none !important;
    }
    .hl-auth-card,
    .hl-auth-row {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .hl-auth-card .form-control,
    .hl-auth-card .btn-login,
    .wa-login-btn,
    .account-type label,
    .hl-auth-card .tab-links::after,
    .hl-auth-card .tab-links a { transition: none !important; }
    /* The spinner still turns — it communicates that work is in flight */
}