/* ============================================================
   login.css — Card with torn-paper divider
   Background: hero image covers full card (no green tint).
   Right half: white form panel with a jagged torn LEFT edge.
   Page: deep navy blue.
   ============================================================ */

:root {
    --auth-ink:       #0f1e3d;
    --auth-muted:     #64748b;
    --auth-line:      #e5eaf2;
    --auth-field:     #f1f4f9;
    --auth-blue:      #1d4ed8;
    --auth-blue-dark: #1e3a8a;
    --auth-cyan:      #38bdf8;
}

*:not(.fas):not(.far):not(.fab):not(.fa) {
    font-family: 'Noto Sans Lao', 'Souliyo', 'Boon', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

html, body {
    margin: 0; padding: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background: #0b1733;
    color: var(--auth-ink);
}
body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

/* ============================================================
   Full-page wrapper — deep navy blue gradient + dot grid
   ============================================================ */
.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;
    padding: 32px 20px;
    background:
        radial-gradient(900px 600px at 12% 18%,  rgba(37, 99, 235, 0.38), transparent 60%),
        radial-gradient(800px 600px at 92% 92%,  rgba(99, 102, 241, 0.30), transparent 60%),
        radial-gradient(rgba(148, 197, 255, 0.10) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(160deg, #060d1f 0%, #0b1733 50%, #0f1e45 100%);
}

/* ============================================================
   Card shell — single block, hero image covers full card
   Taller: 520px to give form more breathing room
   ============================================================ */
.auth-shell {
    position: relative;
    display: block;
    width: 100%;
    max-width: 800px;
    height: 520px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.65),
                0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ============================================================
   Hero — fills entire card as a bg layer. NO green color.
   ============================================================ */
.auth-hero {
    position: absolute;
    inset: 0;
    background: #000;       /* pure black fallback, no green */
    overflow: hidden;
    display: block;
    padding: 0;
}

/* Image: COVER the full card, centered, no green bg leaking */
.auth-hero-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #000; /* black fallback — no green */
    transform: none !important;
    animation: none !important;
}

/* Subtle vignette — dark navy only, no green */
.auth-hero-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,  rgba(6, 13, 31, 0.25) 0%, transparent 40%),
        linear-gradient(180deg, rgba(6, 13, 31, 0.15) 0%, transparent 25%,
                                rgba(6, 13, 31, 0.45) 100%);
}

.auth-hero-grid  { display: none; }
.auth-hero-brand { display: none !important; }
.auth-hero-copy  { display: none !important; }
.auth-hero-tag   { display: none !important; }
.auth-hero-pills { display: none !important; }

/* ============================================================
   Form panel — white, torn/jagged LEFT edge via clip-path.
   Sits on the RIGHT half, overlaying the hero image.
   ============================================================ */
.auth-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 52%;
    background: #ffffff;

    /* Torn/ripped paper left edge (x in px, y in %) */
    clip-path: polygon(
        52px  0%,
        16px  4%,
        46px  9%,
        8px   14%,
        44px  20%,
        10px  26%,
        48px  32%,
        6px   38%,
        46px  44%,
        12px  50%,
        42px  56%,
        14px  62%,
        48px  68%,
        8px   74%,
        44px  80%,
        10px  86%,
        40px  92%,
        20px  100%,
        100%  100%,
        100%  0%
    );

    /* Left padding clears the torn teeth (~55px) */
    padding: 28px 32px 28px 74px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;   /* centre logo + form wrap */
}

/* Language switcher — child of auth-shell (position:relative), top-right corner */
.auth-lang {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 100;       /* above hero image and form panel */
}
.auth-lang > .btn {
    gap: 6px;
    padding: 4px 8px 4px 4px !important;
    background: #fff !important;
    border: 1px solid var(--auth-line) !important;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(15, 30, 61, 0.10);
    color: var(--auth-ink);
    font-size: 0.75rem;
    font-weight: 700;
}
.auth-lang > .btn img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.auth-lang > .btn .auth-lang-code { font-size: 0.72rem; }
.auth-lang > .btn .fa-chevron-down { font-size: 0.6rem; color: var(--auth-muted); }

.auth-form-wrap {
    width: 100%;
    max-width: 290px;
    margin: 0;
}
.auth-mobile-brand { display: none; }

/* ============================================================
   Logo circle — centred above the title
   ============================================================ */
.auth-logo-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow:
        0 0 0 4px rgba(29, 78, 216, 0.18),
        0 6px 20px rgba(0, 0, 0, 0.18);
    margin: 0 auto 14px;   /* centred */
    background: #fff;
    flex-shrink: 0;
    display: block;
}
.auth-logo-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* Title — no underline bar */
.auth-title {
    margin: 0 0 16px;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--auth-ink);
    text-align: center;
}
/* Remove the coloured line below the title */
.auth-title::after { display: none; }
.auth-sub { display: none; }

/* Form fields */
.auth-field { margin-bottom: 11px; }
.auth-field label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.76rem;
    font-weight: 700;
    color: #475569;
}
.auth-input { position: relative; }
.auth-input > i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.82rem;
    pointer-events: none;
    transition: color 0.15s;
}
.auth-input input {
    width: 100%;
    height: 40px;
    padding: 0 38px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--auth-ink);
    background: var(--auth-field);
    border: 1.5px solid transparent;
    border-radius: 9px;
    outline: none;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.auth-input input::placeholder { color: #a0aec0; font-weight: 500; }
.auth-input input:hover { background: #ebeff6; }
.auth-input input:focus {
    background: #fff;
    border-color: var(--auth-blue);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}
.auth-input:focus-within > i { color: var(--auth-blue); }

/* Password toggle */
.btn-toggle-pass {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
}
.btn-toggle-pass:hover { color: var(--auth-blue); background: rgba(29, 78, 216, 0.06); }
.btn-toggle-pass:focus { outline: none; }

/* Login button */
.auth-btn {
    width: 100%;
    height: 42px;
    margin-top: 14px;
    border: 0;
    border-radius: 9px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--auth-blue) 0%, var(--auth-blue-dark) 100%);
    box-shadow: 0 8px 20px -6px rgba(29, 78, 216, 0.55);
    transition: transform 0.12s, box-shadow 0.15s, filter 0.15s;
}
.auth-btn:hover  { filter: brightness(1.08); box-shadow: 0 12px 24px -8px rgba(29, 78, 216, 0.65); }
.auth-btn:active { transform: translateY(1px); }
.auth-btn:focus  { outline: none; box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.22); }
.auth-btn:disabled { opacity: 0.75; cursor: wait; }

.auth-secure { display: none; }

/* ============================================================
   Footer — below the card, on the dark navy page
   ============================================================ */
.auth-footer {
    max-width: 800px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.90);   /* ຂາວແຈ້ງ */
}
.auth-footer a { color: #ffffff; font-weight: 700; text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; color: #93c5fd; }
.auth-footer-links { display: flex; gap: 10px; }
.auth-footer-links a {
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.10);
    text-decoration: none !important;
    font-weight: 600;
}
.auth-footer-links a:hover { background: rgba(255, 255, 255, 0.18); }
.auth-footer-links .fa-facebook { color: #60a5fa; }
.auth-footer-links .fa-whatsapp { color: #4ade80; }

/* ============================================================
   Responsive — tablet/phone: stack vertically, torn TOP edge
   ============================================================ */

/* --- Tablet & Phone: full-screen, no scroll ------------------- */
@media (max-width: 991.98px) {

    /* Lock the page — no overflow, no scrollbar */
    html, body {
        overflow: hidden !important;
        height: 100% !important;
    }
    .auth-page {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        padding: 0;
        gap: 0;
        justify-content: flex-start;
    }

    /* Footer has no room — hide it */
    .auth-footer { display: none !important; }

    /* Card fills full screen */
    .auth-shell {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        height: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    /* Image: top 37% of screen */
    .auth-hero {
        position: relative;
        width: 100%;
        flex: 0 0 37%;
        min-height: 0;
    }
    .auth-hero-img {
        background-size: cover;
        background-position: center;
    }

    /* Form: remaining 63%, no overflow */
    .auth-panel {
        position: relative;
        right: auto; top: auto; bottom: auto;
        width: 100%;
        flex: 1;
        min-height: 0;
        overflow: hidden;

        /* Torn TOP edge */
        clip-path: polygon(
            0%    50px,
            4%    20px,
            8%    46px,
            12%   14px,
            16%   42px,
            20%   10px,
            24%   40px,
            28%   8px,
            32%   38px,
            36%   12px,
            40%   44px,
            44%   6px,
            48%   36px,
            52%   10px,
            56%   42px,
            60%   8px,
            64%   38px,
            68%   14px,
            72%   46px,
            76%   10px,
            80%   40px,
            84%   16px,
            88%   44px,
            92%   12px,
            96%   42px,
            100%  18px,
            100%  100%,
            0%    100%
        );

        padding: 60px 24px 14px;
        align-items: center;
        justify-content: center;
    }

    .auth-logo-circle { margin: 0 auto 10px; }
    .auth-form-wrap { max-width: 340px; width: 100%; }

    /* Flag: in the white form area, right side, level with logo top.
       top = 37% (hero height) + 62px (torn edge padding) = just in white area.
       Sits to the right of the centered logo with clear space. */
    .auth-lang {
        position: absolute;
        top: calc(37% + 62px);
        right: 16px;
        z-index: 200;
    }
    .auth-lang > .btn {
        background: rgba(255, 255, 255, 0.97) !important;
        border: 1px solid rgba(0,0,0,0.08) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.18) !important;
        padding: 5px 10px 5px 5px !important;
        border-radius: 999px;
    }
    .auth-lang > .btn img  { width: 26px !important; height: 26px !important; }
    .auth-lang > .btn .auth-lang-code { font-size: 0.78rem !important; }
}

/* --- Small phones (≤575px) ------------------------------------ */
@media (max-width: 575.98px) {
    .auth-hero { flex: 0 0 33%; }   /* slightly shorter image on small phones */
    .auth-panel { padding: 56px 18px 12px; }
    .auth-form-wrap { max-width: none; }
    .auth-lang { top: calc(33% + 58px); right: 14px; }

    /* Compact form on small screens */
    .auth-field { margin-bottom: 8px; }
    .auth-input input { height: 36px; font-size: 0.84rem; }
    .auth-btn { height: 38px; margin-top: 10px; font-size: 0.86rem; }
    .auth-title { font-size: 1.15rem; margin-bottom: 12px; }
    .auth-logo-circle { width: 60px; height: 60px; margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-hero-img { animation: none !important; }
}