/* =====================================================================
   Member login (job seekers) — premium, animated, fully responsive.
   Namespaced .lg-* so it never collides with the rest of the site.
   Matches the public brand palette + the job-seeker registration look.
   ===================================================================== */
.lg-auth {
    --lg-primary: #294b64;
    --lg-primary-2: #3c6f71;
    --lg-accent: #c9a76a;          /* tan/gold accent from the public site */
    --lg-ink: #1f2733;
    --lg-muted: #6b7787;
    --lg-line: #e6eaf0;
    --lg-bg: #f4f7fb;
    --lg-radius: 20px;
    --lg-shadow: 0 18px 50px rgba(16, 24, 40, .14);
    max-width: 1020px;
    margin: 0 auto;
    padding: 6px 0 44px;
}

.lg-grid {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 26px;
    align-items: stretch;
}

/* ===================== Hero (left) ===================== */
.lg-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--lg-radius);
    background: linear-gradient(150deg, var(--lg-primary) 0%, var(--lg-primary-2) 100%);
    background-size: 160% 160%;
    color: #fff;
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: var(--lg-shadow);
    animation: lg-gradient 14s ease infinite;
}
.lg-hero-inner { position: relative; z-index: 2; }

.lg-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(4px);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    margin-bottom: 22px;
    animation: lg-rise .6s cubic-bezier(.2, .75, .2, 1) both;
}
.lg-badge i { font-size: 15px; color: #ffe7bd; }

.lg-hero .lg-hero-title {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 14px;
    color: #eef4f7;
    animation: lg-rise .6s cubic-bezier(.2, .75, .2, 1) .06s both;
}
.lg-hero .lg-hero-sub {
    font-size: 15.5px;
    line-height: 1.6;
    margin: 0 0 26px;
    max-width: 42ch;
    color: #cfdce3;
    animation: lg-rise .6s cubic-bezier(.2, .75, .2, 1) .12s both;
}

.lg-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lg-points li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    animation: lg-rise .6s cubic-bezier(.2, .75, .2, 1) both;
}
.lg-points li:nth-child(1) { animation-delay: .18s; }
.lg-points li:nth-child(2) { animation-delay: .24s; }
.lg-points li:nth-child(3) { animation-delay: .30s; }
.lg-points .lg-ico {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .16);
    font-size: 17px;
    color: #d7f0e6;
}

/* floating ambient blobs */
.lg-blob { position: absolute; border-radius: 50%; filter: blur(10px); opacity: .35; z-index: 1; animation: lg-float 9s ease-in-out infinite; }
.lg-blob--1 { width: 240px; height: 240px; background: #5fb0a8; top: -70px; right: -60px; }
.lg-blob--2 { width: 200px; height: 200px; background: #6d8fb5; bottom: -70px; left: -50px; animation-delay: 2.4s; }
.lg-blob--3 { width: 130px; height: 130px; background: var(--lg-accent); bottom: 40px; right: 30px; opacity: .22; animation-delay: 1.2s; }

/* ===================== Card (right) ===================== */
.lg-card {
    background: #fff;
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-shadow);
    padding: 38px 38px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: lg-fade-up .55s cubic-bezier(.2, .75, .2, 1) .08s both;
}
.lg-card-head { text-align: center; margin-bottom: 24px; }
.lg-card-title { font-size: 26px; font-weight: 800; color: var(--lg-ink); margin: 0 0 6px; }
.lg-card-sub { font-size: 14.5px; color: var(--lg-muted); margin: 0; line-height: 1.5; }

/* Social buttons */
.lg-social-group { display: grid; gap: 12px; }
.lg-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid var(--lg-line);
    background: #fff;
    color: var(--lg-ink);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}
.lg-social svg { flex-shrink: 0; }
.lg-social:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 24, 40, .12); }
.lg-social--google:hover { border-color: #d2d6dc; background: #fafbfc; color: var(--lg-ink); }
.lg-social--facebook { background: #1877F2; border-color: #1877F2; color: #fff; }
.lg-social--facebook:hover { background: #166fe5; border-color: #166fe5; color: #fff; }

/* Divider */
.lg-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    color: var(--lg-muted);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.lg-divider::before, .lg-divider::after { content: ""; flex: 1; height: 1px; background: var(--lg-line); }

/* Form */
.lg-form { display: flex; flex-direction: column; gap: 16px; }
.lg-field { display: flex; flex-direction: column; }
.lg-field label { font-size: 13px; font-weight: 700; color: var(--lg-ink); margin-bottom: 7px; }
.lg-input-wrap { position: relative; display: flex; align-items: center; }
.lg-input-wrap > .lg-input-ico {
    position: absolute;
    left: 14px;
    font-size: 16px;
    color: var(--lg-muted);
    pointer-events: none;
    transition: color .16s ease;
}
.lg-auth .lg-input-wrap .form-control {
    width: 100%;
    border-radius: 13px;
    border: 1.5px solid var(--lg-line);
    padding: 13px 14px 13px 42px;
    font-size: 15px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.lg-auth .lg-input-wrap .form-control:focus {
    border-color: var(--lg-primary);
    box-shadow: 0 0 0 4px rgba(41, 75, 100, .12);
}
.lg-input-wrap:focus-within > .lg-input-ico { color: var(--lg-primary); }
.lg-input-wrap .form-control.has-toggle { padding-right: 44px; }

.lg-toggle {
    position: absolute;
    right: 8px;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--lg-muted);
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 16px;
    transition: color .16s ease, background-color .16s ease;
}
.lg-toggle:hover { color: var(--lg-primary); background: var(--lg-bg); }

.lg-auth .invalid-feedback { display: block; font-size: 12.5px; margin-top: 5px; }

/* Row: remember + forgot */
.lg-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lg-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--lg-ink); cursor: pointer; margin: 0; }
.lg-check input { width: 17px; height: 17px; accent-color: var(--lg-primary); cursor: pointer; }
.lg-link { font-size: 13.5px; font-weight: 600; color: var(--lg-primary); text-decoration: none; transition: color .15s ease; }
.lg-link:hover { color: var(--lg-primary-2); text-decoration: underline; }

/* Submit */
.lg-submit {
    position: relative;
    overflow: hidden;
    margin-top: 4px;
    width: 100%;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 24px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--lg-primary), var(--lg-primary-2));
    box-shadow: 0 10px 24px rgba(41, 75, 100, .28);
    transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.lg-submit:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 14px 30px rgba(41, 75, 100, .32); }
.lg-submit i { transition: transform .14s ease; }
.lg-submit:hover i { transform: translateX(4px); }
/* light sweep on hover */
.lg-submit::after {
    content: "";
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-18deg);
    transition: left .6s ease;
}
.lg-submit:hover::after { left: 140%; }

/* Footer CTA -> registration */
.lg-foot {
    margin-top: 22px;
    text-align: center;
    font-size: 14px;
    color: var(--lg-muted);
}
.lg-foot a {
    font-weight: 700;
    color: var(--lg-primary);
    text-decoration: none;
}
.lg-foot a:hover { text-decoration: underline; }

/* ===================== Animations ===================== */
@keyframes lg-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes lg-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes lg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@keyframes lg-gradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

@media (prefers-reduced-motion: reduce) {
    .lg-hero, .lg-card, .lg-badge, .lg-hero-title, .lg-hero-sub, .lg-points li,
    .lg-blob, .lg-submit, .lg-submit i, .lg-submit::after, .lg-social {
        animation: none !important;
        transition: none !important;
    }
}

/* ===================== Responsive ===================== */
@media (max-width: 991px) {
    .lg-grid { grid-template-columns: 1fr; }
    .lg-hero { padding: 34px 28px; order: -1; }
    .lg-hero-title { font-size: 27px; }
    .lg-card { padding: 30px 26px 28px; }
}
@media (max-width: 575px) {
    .lg-auth { padding: 2px 0 32px; }
    .lg-hero { padding: 28px 22px; }
    .lg-hero-title { font-size: 24px; }
    .lg-hero-sub { font-size: 14.5px; }
    .lg-card { padding: 26px 18px 24px; }
    .lg-card-title { font-size: 23px; }
    .lg-row { gap: 12px; }
}