/* ==========================================================================
   GSCTEMPC — LOGIN PAGE DESIGN SYSTEM
   Mirrors the member-portal theme (index.php): Fraunces + Inter type,
   the green/white/gold cooperative palette, ledger-paper texture, shimmer
   sweeps and reveal-on-load motion. This file is presentation only — no
   markup here changes what the form submits or how it behaves.
   ========================================================================== */

:root {
    --primary-green:   #2E7D32;
    --secondary-green: #4CAF50;
    --deep-green:      #1b5e20;
    --light-green-bg:  #F1F8F1;
    --white:           #ffffff;
    --gray-text:       #666666;
    --ink:             #26332a;
    --gold:            #FFC94A;
    --gold-deep:       #4a3200;
    --danger:          #c62828;
    --danger-bg:       #fdecea;
    --danger-border:   #f5c6c2;
    --lock:            #9a6a00;
    --lock-bg:         #fff8e6;
    --lock-border:     #ffe1a6;

    --display-font: 'Fraunces', Georgia, 'Times New Roman', serif;
    --body-font:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft:     cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast:      0.2s;
    --dur-med:       0.4s;
    --dur-slow:      0.7s;

    --shadow-soft:  0 10px 34px rgba(27, 94, 32, 0.10);
    --shadow-panel: 0 30px 90px rgba(19, 62, 22, 0.22);
    --shadow-hover: 0 22px 55px rgba(27, 94, 32, 0.18);

    --radius-shell: 28px;
    --radius-card:  16px;
    --radius-input: 12px;

    --ledger-line: rgba(255, 255, 255, 0.07);
}

/* -------------------------------- Reset -------------------------------- */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

/* ============================================================
   PAGE BACKGROUND — matches index.php / about.php / the member pages
   ============================================================
   Was a flat `var(--light-green-bg)` fill, which didn't match the
   fixed gradient-over-company.jpg background used site-wide (the
   .lg-brand panel to the right already correctly used company.jpg —
   see its own comment below — so this brings the outer page backdrop
   in line with it too). Same formula as style.css's real `body` rule,
   same fixed attachment, same mobile scroll-attachment fallback used
   on applications.php / application_view.php / rate-us.php / profile.php.

   Path is '../../company.jpg' (not '../company.jpg') because this CSS
   file lives two levels down, in assets/css/, while login.php itself
   sits at the site root next to company.jpg — same relative path
   .lg-brand below already uses successfully.

   Note: the .lg-ambient blobs immediately below were tuned to float
   over the old flat pale backdrop. They still render fine over this
   darker photo-tinted one, but will read a little more subtly against
   it than before — that's an expected side effect of unifying the
   background, not a separate change.
   ============================================================ */
body {
    font-family: var(--body-font);
    background: linear-gradient(rgba(20, 70, 36, 0.88), rgba(27, 94, 32, 0.88)), url('../../company.jpg') center/cover no-repeat fixed;
    color: var(--ink);
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
@media (max-width: 768px) {
    body {
        background-attachment: scroll;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

*:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ----------------------------- Skip link ----------------------------- */

.lg-skip-link {
    position: fixed;
    top: -60px;
    left: 16px;
    z-index: 10000;
    background: var(--primary-green);
    color: var(--white);
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    transition: top var(--dur-fast) var(--ease-out);
    box-shadow: var(--shadow-soft);
}
.lg-skip-link:focus { top: 16px; }

/* --------------------------- Ambient backdrop --------------------------- */

.lg-ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.lg-ambient__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
    will-change: transform;
}
.lg-ambient__blob--1 {
    width: 480px; height: 480px;
    top: -180px; left: -140px;
    background: radial-gradient(circle, rgba(76,175,80,0.35), transparent 70%);
    animation: lgDrift1 22s ease-in-out infinite;
}
.lg-ambient__blob--2 {
    width: 560px; height: 560px;
    bottom: -220px; right: -160px;
    background: radial-gradient(circle, rgba(46,125,50,0.28), transparent 70%);
    animation: lgDrift2 26s ease-in-out infinite;
}
.lg-ambient__blob--3 {
    width: 320px; height: 320px;
    top: 40%; left: 50%;
    background: radial-gradient(circle, rgba(255,201,74,0.18), transparent 70%);
    animation: lgDrift3 30s ease-in-out infinite;
}
@keyframes lgDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(60px, 40px) scale(1.08); }
}
@keyframes lgDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-50px, -30px) scale(1.06); }
}
@keyframes lgDrift3 {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-46%, -54%) scale(1.15); opacity: 0.8; }
}
.lg-ambient__grain {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    background-image:
        radial-gradient(circle at 20% 30%, #000 0.5px, transparent 0.5px),
        radial-gradient(circle at 70% 60%, #000 0.5px, transparent 0.5px);
    background-size: 3px 3px, 4px 4px;
    mix-blend-mode: multiply;
}

/* -------------------------------- Layout -------------------------------- */

.lg-page {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 32px 20px;
}

.lg-shell {
    width: 100%;
    max-width: 1040px;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background: var(--white);
    border-radius: var(--radius-shell);
    overflow: hidden;
    box-shadow: var(--shadow-panel);
    animation: lgShellIn 0.7s var(--ease-out) both;
    position: relative;
}
@keyframes lgShellIn {
    from { opacity: 0; transform: translateY(26px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   BRAND PANEL (left)
   ============================================================ */

.lg-brand {
    position: relative;
    overflow: hidden;
    /* Company photo as the true background layer; the green gradient sits
       on top of it at partial opacity (see .lg-brand::before) so the photo
       reads through as a tinted backdrop rather than being fully covered. */
    /* Matches how the homepage references site photos (e.g. staffs.jpg) —
       company.jpg is expected to sit at the site root, next to logo.png.
       Move this rule to assets/img/company.jpg + update the path if you'd
       rather keep photos out of the root. */
    background-color: var(--deep-green);
    background-image: url('../../company.jpg');
    background-size: cover;
    background-position: center;
    color: var(--white);
    padding: 46px 42px 38px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    isolation: isolate;
}
/* Transparent green tint over the company photo — this is the "glass over
   photo" layer. Adjust the two alpha values below to taste: lower = more
   photo shows through, higher = more solid green. */
.lg-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 14% 12%, rgba(255,255,255,0.16), transparent 45%),
        radial-gradient(circle at 88% 88%, rgba(255,201,74,0.18), transparent 50%),
        linear-gradient(160deg, rgba(46,125,50,0.82) 0%, rgba(13,51,16,0.88) 100%);
}

.lg-brand__ledger {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(to bottom, var(--ledger-line) 0, var(--ledger-line) 1px, transparent 1px, transparent 42px);
    -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 40%, black 30%, transparent 88%);
    mask-image: radial-gradient(ellipse 85% 70% at 50% 40%, black 30%, transparent 88%);
    opacity: 0.85;
    transition: transform 0.6s var(--ease-out);
    will-change: transform;
}

.lg-brand__glow {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(50px);
}
.lg-brand__glow--gold {
    width: 220px; height: 220px;
    bottom: -60px; right: -60px;
    background: rgba(255, 201, 74, 0.25);
    animation: lgPulseGlow 5s ease-in-out infinite;
}
.lg-brand__glow--white {
    width: 180px; height: 180px;
    top: -50px; left: -40px;
    background: rgba(255, 255, 255, 0.12);
    animation: lgPulseGlow 6.5s ease-in-out infinite reverse;
}
@keyframes lgPulseGlow {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.12); }
}

.lg-brand__particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lg-particle {
    position: absolute;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    animation: lgFloatUp 9s linear infinite;
}
.lg-particle:nth-child(1) { left: 12%; bottom: -10px; animation-delay: 0s; width: 4px; height: 4px; }
.lg-particle:nth-child(2) { left: 28%; bottom: -10px; animation-delay: 1.4s; background: rgba(255,201,74,0.65); }
.lg-particle:nth-child(3) { left: 47%; bottom: -10px; animation-delay: 2.8s; width: 3px; height: 3px; }
.lg-particle:nth-child(4) { left: 63%; bottom: -10px; animation-delay: 4.2s; background: rgba(255,201,74,0.5); }
.lg-particle:nth-child(5) { left: 79%; bottom: -10px; animation-delay: 5.6s; width: 6px; height: 6px; }
.lg-particle:nth-child(6) { left: 91%; bottom: -10px; animation-delay: 7s; width: 4px; height: 4px; }
@keyframes lgFloatUp {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: 0.9; }
    90%  { opacity: 0.5; }
    100% { transform: translateY(-420px) translateX(18px); opacity: 0; }
}

.lg-brand__top,
.lg-brand__mid,
.lg-brand__bottom {
    position: relative;
    z-index: 2;
}

.lg-brand__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
    margin-bottom: 26px;
}

.lg-seal {
    position: relative;
    width: 148px; height: 148px;
    display: flex; align-items: center; justify-content: center;
    animation: lgFadeUp 0.8s var(--ease-out) both;
}
/* Matches how includes/header.php treats the same logo.png — no boxed-in
   white plate, just the mark itself, sized big.
   The source file has generous transparent padding around the round
   emblem (that's why it looked small even at a big container size), so
   .lg-seal__clip crops a circular window and zooms the image inward via
   transform: scale() until the emblem fills it — same idea as a CSS
   "avatar crop". filter: drop-shadow lives on this clipping element so
   the shadow still follows the true circular edge after cropping. */
.lg-seal__clip {
    position: relative;
    z-index: 2;
    width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,0.38));
    transition: transform var(--dur-med) var(--ease-out);
}
.lg-seal:hover .lg-seal__clip { transform: scale(1.04); }
.lg-seal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transform: scale(1.85);
    transform-origin: center;
}

.lg-brand__eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 18px;
    border-radius: 20px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.3);
    font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
    animation: lgFadeUp 0.8s var(--ease-out) 0.1s both;
}
.lg-brand__eyebrow::after {
    content: '';
    position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), rgba(255,201,74,0.5), transparent);
    animation: lgShimmerSweep 3.2s ease-in-out infinite;
}
@keyframes lgShimmerSweep { 0% { left: -60%; } 55%, 100% { left: 130%; } }
.lg-brand__eyebrow i { color: var(--gold); }

.lg-brand__title {
    font-family: var(--display-font);
    font-weight: 600;
    font-size: 2.15rem;
    line-height: 1.18;
    margin-bottom: 16px;
    animation: lgFadeUp 0.9s var(--ease-out) 0.18s both;
}
.lg-brand__title span {
    font-weight: 700;
    background: linear-gradient(95deg, var(--white) 40%, var(--gold) 120%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lg-brand__subtitle {
    font-size: 0.95rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.88);
    max-width: 380px;
    margin-bottom: 30px;
    animation: lgFadeUp 0.9s var(--ease-out) 0.26s both;
}

@keyframes lgFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lg-brand__features {
    list-style: none;
    display: flex; flex-direction: column; gap: 12px;
    animation: lgFadeUp 0.9s var(--ease-out) 0.34s both;
}

/* Each feature is its own bordered card — deliberately over-designed with
   a visible background/border/radius so the row structure holds up even
   at a glance, on any screen, over the photo background. */
.lg-feature-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 15px;
    border-radius: 14px;
    background: rgba(13, 51, 16, 0.38);
    border: 1px solid rgba(255,255,255,0.16);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    transition: transform var(--dur-fast) var(--ease-out),
                background var(--dur-fast) ease,
                border-color var(--dur-fast) ease;
}
.lg-feature-card:hover {
    transform: translateX(3px);
    background: rgba(13, 51, 16, 0.55);
    border-color: rgba(255, 201, 74, 0.4);
}
.lg-brand__feature-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.24);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    color: var(--gold);
    transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) ease;
}
.lg-feature-card:hover .lg-brand__feature-icon {
    transform: rotate(-6deg) scale(1.06);
    background: rgba(255, 201, 74, 0.24);
}
.lg-feature-card__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.lg-feature-card__text strong {
    display: block;
    font-size: 0.87rem;
    font-weight: 700;
    line-height: 1.3;
}
.lg-feature-card__text span {
    display: block;
    font-size: 0.77rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.45;
}

.lg-brand__bottom { display: flex; flex-direction: column; gap: 20px; }

.lg-brand__chips {
    display: flex; flex-wrap: wrap; gap: 10px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.16);
    animation: lgFadeUp 0.9s var(--ease-out) 0.42s both;
}
.lg-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.24);
    font-size: 0.76rem; font-weight: 700;
    transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) ease;
}
.lg-chip:hover { background: rgba(255,255,255,0.2); transform: translateY(-3px); }
.lg-chip i { color: var(--gold); }

/* ============================================================
   FORM PANEL (right)
   ============================================================ */

.lg-form-panel {
    padding: 50px 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    position: relative;
}
.lg-form-panel__inner {
    width: 100%;
    max-width: 380px;
    animation: lgFadeUp 0.8s var(--ease-out) 0.15s both;
}

.lg-form-head { margin-bottom: 26px; }
.lg-form-kicker {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--secondary-green);
    margin-bottom: 10px;
}
.lg-form-head h2 {
    font-family: var(--display-font);
    font-weight: 600;
    color: var(--primary-green);
    font-size: 1.6rem;
    margin-bottom: 8px;
    line-height: 1.25;
}
.lg-form-sub { color: var(--gray-text); font-size: 0.88rem; line-height: 1.55; }

/* ------------------------------- Alerts ------------------------------- */

.lg-alert {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 15px;
    border-radius: 12px;
    margin-bottom: 18px;
    font-size: 0.85rem;
    line-height: 1.55;
    animation: lgAlertIn 0.35s var(--ease-out) both;
}
@keyframes lgAlertIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.lg-alert--error {
    background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border);
    animation: lgAlertIn 0.35s var(--ease-out) both, lgShake 0.5s ease 0.35s both;
}
@keyframes lgShake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
.lg-alert--lock { background: var(--lock-bg); color: var(--lock); border: 1px solid var(--lock-border); }
.lg-alert--notice { background: var(--light-green-bg); color: var(--primary-green); border: 1px solid #cfe8cf; }
.lg-alert__icon { margin-top: 1px; flex-shrink: 0; }

/* --------------------------- Lockout ring card --------------------------- */

.lg-lockout-card {
    display: flex; align-items: center; gap: 16px;
    background: var(--lock-bg);
    border: 1px solid var(--lock-border);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 20px;
    animation: lgAlertIn 0.4s var(--ease-out) both;
}
.lg-lockout-card__ring { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.lg-lockout-card__ring svg { width: 56px; height: 56px; transform: rotate(-90deg); }
.lg-lockout-track { fill: none; stroke: rgba(154, 106, 0, 0.18); stroke-width: 5; }
.lg-lockout-progress {
    fill: none; stroke: var(--lock); stroke-width: 5; stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}
.lg-lockout-card__icon {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--lock); font-size: 0.95rem;
}
.lg-lockout-card__text { display: flex; flex-direction: column; gap: 2px; }
.lg-lockout-card__text strong { color: var(--lock); font-size: 0.92rem; }
.lg-lockout-card__text span { font-size: 0.82rem; color: rgba(154, 106, 0, 0.85); }

/* -------------------------------- Fields -------------------------------- */

.lg-form { display: flex; flex-direction: column; }

.lg-field { margin-bottom: 18px; position: relative; }
.lg-field__label-row { display: flex; justify-content: space-between; align-items: center; }
.lg-field label {
    display: block;
    margin-bottom: 7px;
    color: #3d4a41;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.lg-input-shell { position: relative; }
.lg-input-icon {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: #9aa79f; font-size: 0.92rem;
    transition: color var(--dur-fast) ease;
    z-index: 2;
}
.lg-field input[type="text"],
.lg-field input[type="password"] {
    width: 100%;
    padding: 13.5px 15px 13.5px 43px;
    background: #f7faf7;
    border: 1.5px solid #e0e8e0;
    border-radius: var(--radius-input);
    color: var(--ink);
    font-size: 0.95rem;
    font-family: var(--body-font);
    transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
    -webkit-appearance: none; appearance: none;
    position: relative;
}
.lg-field input::placeholder { color: #b6c2b8; }
.lg-field input:hover:not(:disabled) { border-color: #c9dbc9; }
.lg-field input:focus {
    border-color: var(--secondary-green);
    outline: none;
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(76,175,80,0.14);
}
.lg-field input:focus ~ .lg-input-icon,
.lg-input-shell:focus-within .lg-input-icon { color: var(--secondary-green); }
.lg-field input:disabled { opacity: 0.5; cursor: not-allowed; }

.lg-input-underline {
    position: absolute; left: 12px; right: 12px; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--secondary-green), var(--gold));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--dur-med) var(--ease-out);
    border-radius: 2px;
}
.lg-input-shell:focus-within .lg-input-underline { transform: scaleX(1); }

.lg-toggle-pass {
    position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #9aa79f; cursor: pointer; font-size: 0.92rem;
    padding: 4px;
    transition: color var(--dur-fast) ease, transform var(--dur-fast) ease;
    z-index: 2;
}
.lg-toggle-pass:hover:not(:disabled) { color: var(--primary-green); transform: translateY(-50%) scale(1.08); }
.lg-toggle-pass:disabled { cursor: not-allowed; opacity: 0.5; }

.lg-capslock-warn {
    font-size: 0.74rem; color: var(--lock); margin-top: 8px;
    display: none; align-items: center; gap: 6px;
    animation: lgFadeUp 0.25s var(--ease-out) both;
}
.lg-capslock-warn.show { display: flex; }

/* ----------------------------- Links + rows ----------------------------- */

.lg-row-between {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-bottom: 24px; margin-top: -2px;
}
.lg-link {
    color: var(--secondary-green);
    font-size: 0.83rem; font-weight: 700;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    position: relative;
}
.lg-link::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -2px;
    height: 1.5px; background: currentColor;
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur-fast) var(--ease-out);
}
.lg-link:hover::after { transform: scaleX(1); }
.lg-link--muted { color: var(--gray-text); }

/* -------------------------------- Button -------------------------------- */

.lg-btn-signin {
    position: relative;
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
    color: var(--white);
    border: none;
    border-radius: var(--radius-input);
    font-size: 0.96rem;
    font-weight: 700;
    font-family: var(--body-font);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    box-shadow: 0 12px 26px rgba(46,125,50,0.3);
    overflow: hidden;
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease, filter var(--dur-fast) ease;
}
.lg-btn-signin:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(46,125,50,0.38);
    filter: brightness(1.04);
}
.lg-btn-signin:active:not(:disabled) { transform: translateY(0); }
.lg-btn-signin:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

.lg-btn-signin__shine {
    position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
    animation: lgShimmerSweep 2.8s ease-in-out infinite;
    pointer-events: none;
}

.lg-spinner {
    width: 15px; height: 15px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: lgSpin 0.7s linear infinite;
    display: none;
}
@keyframes lgSpin { to { transform: rotate(360deg); } }

/* ------------------------------- Trust strip ------------------------------- */

.lg-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 22px 0 16px;
    color: #b6c2b8; font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.lg-divider::before, .lg-divider::after {
    content: ''; flex: 1; height: 1px; background: #e5ede5;
}

.lg-trust-strip {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
}
.lg-trust-strip span {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.73rem; font-weight: 600; color: var(--gray-text);
}
.lg-trust-strip i { color: var(--secondary-green); }

/* -------------------------------- Footer bits -------------------------------- */

.lg-back-link { text-align: center; margin-top: 26px; }
.lg-back-link a {
    color: var(--gray-text);
    text-decoration: none;
    font-size: 0.83rem;
    display: inline-flex; align-items: center; gap: 7px;
    transition: color var(--dur-fast) ease, gap var(--dur-fast) ease;
}
.lg-back-link a:hover { color: var(--primary-green); gap: 10px; }

.lg-helper-note {
    font-size: 0.75rem; color: #8a978d; margin-top: 20px; text-align: center; line-height: 1.65;
}

.lg-footnote {
    position: relative; z-index: 1;
    font-size: 0.75rem; color: #7c8a7e;
    text-align: center;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Below 900px the shell stacks to one column: the brand panel becomes a
   full-width card sitting above the form instead of disappearing. It's
   the same content and animations, just retuned (smaller type, tighter
   spacing) so it reads as a compact welcome header on a phone instead of
   a full-height hero. */
@media (max-width: 900px) {
    .lg-page { padding: 24px 16px; align-items: flex-start; }
    .lg-shell {
        grid-template-columns: 1fr;
        max-width: 480px;
    }

    .lg-brand {
        padding: 34px 26px 28px;
        gap: 22px;
        /* Visually second on mobile — the sign-in form is what people
           came for, so it shows first without any scrolling. This brand
           card becomes supporting content underneath, reachable by
           scrolling down, not something blocking the form. DOM order is
           left as-is (brand markup stays before the form in the source)
           so screen readers still meet the logo/intro copy first; only
           the on-screen position changes. */
        order: 2;
    }
    .lg-form-panel { order: 1; }

    .lg-brand__top { margin-bottom: 6px; gap: 14px; }
    .lg-seal { width: 108px; height: 108px; }
    .lg-brand__title { font-size: 1.7rem; margin-bottom: 12px; }
    .lg-brand__subtitle { font-size: 0.88rem; max-width: none; margin-bottom: 22px; }
    .lg-brand__features { gap: 10px; }
    .lg-feature-card { padding: 12px 14px; }
    .lg-brand__chips { padding-top: 16px; }

    .lg-form-panel { padding: 38px 28px 42px; }
}

@media (max-width: 480px) {
    .lg-page { padding: 16px 10px; }
    .lg-shell { border-radius: 20px; }
    .lg-brand { padding: 28px 20px 24px; }
    .lg-seal { width: 92px; height: 92px; }
    .lg-brand__title { font-size: 1.45rem; }
    .lg-brand__eyebrow { font-size: 0.72rem; padding: 8px 14px; }
    .lg-form-panel { padding: 30px 20px 36px; }
    .lg-form-head h2 { font-size: 1.4rem; }
}

@media (min-width: 901px) and (max-width: 1080px) {
    .lg-shell { max-width: 920px; }
    .lg-brand { padding: 40px 34px 32px; }
    .lg-form-panel { padding: 44px 34px; }
}

/* Landscape phones: shell already stacks (still under 900px wide in most
   cases), just keep vertical padding tight so it doesn't force excess
   scrolling before the form is reachable. */
@media (max-height: 620px) and (max-width: 900px) {
    .lg-page { padding: 14px 14px; align-items: flex-start; }
    .lg-brand { padding: 24px 24px 20px; gap: 16px; }
    .lg-seal { width: 84px; height: 84px; }
    .lg-brand__mid .lg-brand__subtitle { margin-bottom: 14px; }
    .lg-brand__features { gap: 8px; }
    .lg-form-panel { padding: 26px 24px 30px; }
}

@media print {
    .lg-ambient, .lg-brand, .lg-footnote { display: none !important; }
}