@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

/* ---------- Tokens ---------- */
:root {
    --auth-accent:       #e02020; 
    --auth-accent-dark:  #c01a1a;
    --auth-bg:           #f0f2f5;      
    --auth-card:         #ffffff;
    --auth-border:       #e2e8f0;
    --auth-border-focus: #94a3b8;      
    --auth-text:         #0f172a;
    --auth-muted:        #64748b;
    --auth-placeholder:  #94a3b8;
    --auth-input-bg:     #f8fafc;
    --auth-shadow:       0 10px 30px -5px rgba(0,0,0,0.08), 0 4px 12px -2px rgba(0,0,0,0.04);
    --auth-radius-card:  16px;
    --auth-radius-input: 8px;
    --auth-radius-btn:   8px;
    /* Both scripts, in one stack. Inputs and buttons carry a Khmer placeholder
       and a Latin value at the same time, so a Latin-only stack left the Khmer
       glyphs to whatever the browser substituted. Font matching is per
       character, so each one gets the right face. */
    --auth-font:         var(--site-font-ui, 'Roboto Condensed', 'Bayon', 'Noto Sans Khmer', 'Khmer OS', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

/* ---------- Reset ---------- */
html, body.auth-page {
    min-height: 100%;
}

body.auth-page {
    background: var(--auth-bg);
    color: var(--auth-text);
    font-family: var(--auth-font);
    font-size: 16px;
    isolation: isolate;
    line-height: 1.5;
    margin: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Remove old dark-mode pseudo-elements */
body.auth-page::before,
body.auth-page::after,
body.auth-page.auth-has-background::after {
    display: none !important;
}

.auth-bg-video { display: none; }

/* ---------- Page shell ---------- */
.auth-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100svh;
    padding: 32px 16px 48px;
    width: 100%;
}

/* ---------- Card ---------- */
.auth-card.form {
    background: var(--auth-card);
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius-card);
    box-shadow: var(--auth-shadow);
    max-width: 540px;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: min(540px, 100%);
}

body.auth-page .auth-card.form {
    border-color: var(--auth-border);
    box-shadow: var(--auth-shadow);
}

.auth-card.form::after { display: none; }

/* ---------- Card top bar ---------- */
.auth-card-topbar {
    align-items: center;
    border-bottom: 1px solid var(--auth-border);
    display: flex;
    justify-content: space-between;
    padding: 16px 28px;
}

.auth-topbar-brand {
    align-items: center;
    display: flex;
    gap: 9px;
    text-decoration: none;
    transform: none !important;
}

.auth-topbar-brand:hover,
.auth-topbar-brand:focus { text-decoration: none; outline: 0; transform: none !important; }

.auth-topbar-logo {
    height: 28px;
    object-fit: contain;
    width: auto;
}

.auth-topbar-name {
    color: var(--auth-text);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

/* ---------- Flag Language Dropdown Selector (No Panel, No Text) ---------- */
.auth-lang-dropdown {
    position: relative;
    display: inline-block;
}

.auth-lang-btn {
    align-items: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer;
    display: inline-flex;
    gap: 4px;
    padding: 2px 4px;
    transform: none !important;
    transition: opacity 0.15s ease;
}

.auth-lang-btn:hover {
    opacity: 0.8;
    transform: none !important;
}

.auth-lang-btn:focus,
.auth-lang-btn:focus-visible {
    outline: 0;
    transform: none !important;
}

.auth-flag-icon {
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
    height: 16px;
    object-fit: cover;
    width: 24px;
}

.auth-lang-arrow {
    color: var(--auth-muted);
    transition: transform 0.2s ease;
}

.auth-lang-dropdown.active .auth-lang-arrow {
    transform: rotate(180deg);
}

.auth-lang-menu {
    background: #ffffff;
    border: 1px solid var(--auth-border);
    border-radius: 10px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: auto;
    opacity: 0;
    padding: 6px;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
}

.auth-lang-dropdown.active .auth-lang-menu,
.auth-lang-menu.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.auth-lang-item {
    align-items: center;
    border-radius: 6px;
    display: flex;
    gap: 6px;
    padding: 6px;
    text-decoration: none !important;
    transition: background 0.15s ease;
    transform: none !important;
}

.auth-lang-item:hover {
    background: #f1f5f9;
    text-decoration: none !important;
    transform: none !important;
}

.auth-lang-item.active {
    background: #fff5f5;
}

.auth-lang-check {
    color: var(--auth-accent);
    font-size: 10px;
}

/* ---------- Card body ---------- */
.auth-card__inner {
    padding: 36px 44px 40px;
    position: relative;
    z-index: 1;
}

/* ---------- Center logo icon ---------- */
.auth-brand {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 4px auto 18px;
    text-decoration: none;
    transform: none !important;
    width: fit-content;
}

.auth-brand:hover,
.auth-brand:focus { outline: 0; text-decoration: none; transform: none !important; }

.auth-logo-stack {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: inline-flex;
    height: auto;
    justify-content: center;
    overflow: visible;
    place-items: center;
    transform: none !important;
    width: auto;
}

.auth-card .auth-logo,
.auth-logo-stack > .auth-logo {
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.12));
    height: auto;
    margin: 0;
    max-height: 72px;
    max-width: 240px;
    object-fit: contain;
    transform: none !important;
    width: auto;
}

.auth-brand:hover .auth-logo {
    transform: none !important;
}

.auth-logo__shine { display: none; }   /* not needed in light mode */

/* ---------- Card header ---------- */
.auth-card__header {
    margin-bottom: 6px;
    text-align: center;
}

.auth-card .auth-card__header h1,
.auth-card .auth-card__header h2 {
    color: #111827;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.35;
    margin: 0;
}

.auth-card .auth-subtitle {
    color: #6b7280;
    font-size: 13.5px;
    line-height: 1.6;
    margin: 8px auto 22px;
    text-align: center;
}

.auth-card .auth-subtitle a {
    color: var(--auth-accent);
    font-weight: 700;
    text-decoration: none;
}

.auth-card .auth-subtitle a:hover {
    text-decoration: underline;
}

/* ---------- Note (old style kept for compat) ---------- */
.auth-card .auth-note {
    color: var(--auth-muted);
    font-size: 13px;
    line-height: 1.65;
    margin: 9px auto 0;
    max-width: 360px;
    text-align: center;
}

/* ---------- Form groups ---------- */
.auth-card .form-group {
    margin-bottom: 18px;
}

.auth-card .auth-field label {
    color: #1e293b;
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 7px;
}

/* ---------- Input wrapper ---------- */
.auth-control {
    position: relative;
    width: 100%;
}

/* Hide all left icons in inputs as requested */
.auth-control__icon {
    display: none !important;
}

/* ---------- Input ---------- */
.auth-card.form form .auth-control .form-control,
.auth-card.form form .form-control {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: none !important;
    color: #0f172a;
    font-family: var(--auth-font);
    font-size: 14.5px;
    height: 48px;
    line-height: 1.4;
    padding: 12px 16px;
    outline: none !important;
    transition: border-color 150ms ease;
    width: 100%;
}

.auth-card.form form .auth-control:has(.auth-password-toggle) .form-control,
.auth-card.form form .auth-control input[type="password"] {
    padding-right: 46px;
}

.auth-card.form form .auth-control .form-control::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.auth-card.form form .auth-control .form-control:hover,
.auth-card.form form .form-control:hover {
    border-color: #cbd5e1;
    background: #ffffff;
    box-shadow: none !important;
}

.auth-card.form form .auth-control .form-control:focus,
.auth-card.form form .form-control:focus {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: none !important;
    color: #0f172a;
    outline: none !important;
}

/* ---------- Password toggle ---------- */
.auth-password-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: #94a3b8;
    cursor: pointer;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%) !important;
    transition: color 150ms ease;
    width: 38px;
    z-index: 3;
}

.auth-password-toggle:hover,
.auth-password-toggle:focus-visible {
    color: #1e293b;
    outline: 0;
}

/* ---------- Forgot password row ---------- */
.auth-card .auth-row {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    margin: -2px 0 20px;
}

.auth-card .forget-pass { margin: 0; }

.auth-card.form form .forget-pass a {
    color: #e02020;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.auth-card.form form .forget-pass a:hover,
.auth-card.form form .forget-pass a:focus {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- Submit button (No hover movement/scaling) ---------- */
.auth-card.form .auth-submit.button {
    align-items: center;
    background: #e02020;
    border: none;
    border-radius: 10px;
    color: #ffffff !important;
    cursor: pointer;
    display: inline-flex;
    font-family: var(--auth-font);
    font-size: 15px;
    font-weight: 600;
    height: 48px;
    justify-content: center;
    letter-spacing: 0.2px;
    position: relative;
    text-decoration: none;
    text-shadow: none;
    transform: none !important;
    transition: background-color 150ms ease, box-shadow 150ms ease;
    width: 100%;
    overflow: hidden;
}

.auth-card.form .auth-submit.button {
    box-shadow: 0 4px 14px rgba(224, 32, 32, 0.25);
}

.auth-card.form .auth-submit.button::before { display: none; }

.auth-card.form .auth-submit.button:hover:not(:disabled) {
    background: #c81a1a;
    box-shadow: 0 4px 16px rgba(224, 32, 32, 0.30);
    filter: none;
    outline: 0;
    transform: none !important;
}

.auth-card.form .auth-submit.button:active {
    background: #b01414;
    transform: none !important;
}

.auth-card.form .auth-submit.button:focus {
    outline: 0;
    transform: none !important;
}

/* Greyed out only while a request is in flight, which the page scripts drive
   by setting `disabled`. An idle button is never grey: the form says what is
   wrong when it is submitted, so there is nothing for a dead-looking button
   to communicate. */
.auth-card.form .auth-submit.button:disabled {
    background: #cbd5e1 !important;
    box-shadow: none !important;
    cursor: not-allowed;
    filter: none;
    opacity: 0.8;
    transform: none !important;
}

/* ---------- Field-level validation ---------- */
.auth-card.form .form-control.is-invalid {
    background: #fff7f7;
    border-color: #e02020;
}

.auth-card.form .form-control.is-invalid:focus {
    border-color: #e02020;
    box-shadow: 0 0 0 3px rgba(224, 32, 32, 0.12);
}

.auth-field-error {
    color: #c81a1a;
    display: block;
    font-size: 12.5px;
    line-height: 1.5;
    margin-top: 6px;
}

.auth-field-error::before {
    content: '\26A0';
    font-size: 12px;
    margin-right: 5px;
}

/* ---------- Divider "Or Sign In With" ---------- */
.auth-divider {
    align-items: center;
    color: #94a3b8;
    display: flex;
    font-size: 12.5px;
    font-weight: 500;
    gap: 12px;
    margin: 22px 0 16px;
    text-align: center;
}

.auth-divider::before,
.auth-divider::after {
    background: #e2e8f0;
    content: '';
    flex: 1;
    height: 1px;
}

/* ---------- Social buttons (No hover movement/scaling) ---------- */
.auth-social-btn {
    align-items: center;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    color: #1e293b;
    cursor: pointer;
    display: flex;
    font-family: var(--auth-font);
    font-size: 14.5px;
    font-weight: 600;
    gap: 10px;
    height: 46px;
    justify-content: center;
    padding: 0 16px;
    text-decoration: none;
    transform: none !important;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
    width: 100%;
}

.auth-social-btn:hover,
.auth-social-btn:focus {
    background: #f8fafc;
    border-color: #cbd5e1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    color: #0f172a;
    outline: 0;
    text-decoration: none;
    transform: none !important;
}

.auth-social-btn img,
.auth-social-btn svg {
    flex-shrink: 0;
    height: 20px;
    width: 20px;
}

/* ---------- Standalone login link (e.g. Forgot Password, OTP pages) ---------- */
.auth-card .login-link {
    border-top: none;
    color: var(--auth-muted);
    font-size: 13px;
    margin-top: 20px;
    padding: 0;
    text-align: center;
}

/* ---------- Bottom links row (e.g. Login & Register pages) ---------- */
.auth-bottom-row {
    align-items: baseline !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 22px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--auth-border) !important;
    width: 100% !important;
}

.auth-bottom-row .login-link {
    margin-top: 0 !important;
    text-align: left !important;
}

.auth-bottom-row .login-link,
.auth-bottom-row .auth-privacy-link,
.auth-bottom-row span,
.auth-bottom-row a {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    vertical-align: baseline !important;
}

.auth-bottom-row a,
.auth-card .login-link a {
    color: var(--auth-accent);
    font-weight: 600;
    text-decoration: none;
}

.auth-bottom-row a:hover,
.auth-card .login-link a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-privacy-link {
    color: var(--auth-muted) !important;
    font-size: 12.5px !important;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.auth-privacy-link:hover {
    color: var(--auth-text) !important;
    text-decoration: underline !important;
}

/* ---------- Alerts ---------- */
.auth-card .auth-alert,
.auth-card .alert {
    background: #fff5f5;
    border: 1px solid #fca5a5;
    border-left: 3px solid #e02020;
    border-radius: 8px;
    color: #b91c1c;
    font-size: 13px;
    line-height: 1.55;
    margin: 0 0 16px;
    padding: 10px 13px;
    text-align: left !important;
}

.auth-card .alert-success {
    background: #f0fdf4;
    border-color: #86efac;
    border-left-color: #16a34a;
    color: #15803d;
}

.auth-card .alert-warning {
    background: #fffbeb;
    border-color: #fcd34d;
    border-left-color: #d97706;
    color: #92400e;
}

/* ---------- "Powered by" footer ---------- */
.auth-powered {
    color: var(--auth-muted);
    font-size: 12px;
    margin-top: 22px;
    text-align: center;
}

.auth-powered a {
    color: var(--auth-muted);
    font-weight: 600;
    text-decoration: none;
}

.auth-powered a:hover { text-decoration: underline; }

/* ---------- Captcha (keep compat) ---------- */
.auth-card .captcha-row {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: 132px minmax(0, 1fr);
}

.auth-card .captcha-preview {
    align-items: center;
    background: var(--auth-input-bg);
    border: 1.5px solid var(--auth-border);
    border-radius: 8px;
    display: flex;
    height: 46px;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    width: 132px;
}

.auth-card .captcha-preview:hover,
.auth-card .captcha-preview:focus-visible {
    border-color: #b0b8c4;
    outline: 0;
}

.auth-code-input {
    font-size: 19px !important;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: center;
}

.auth-card .captcha-preview img {
    border: 0;
    border-radius: 0;
    display: block;
    height: 44px;
    object-fit: cover;
    width: 130px;
}

/* ---------- Status icon ---------- */
.auth-status {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 18px;
    padding: 1px 0;
}

.auth-status__icon {
    align-items: center;
    background: rgba(22, 163, 74, 0.10);
    border: 1px solid rgba(22, 163, 74, 0.28);
    border-radius: 50%;
    color: #16a34a;
    display: inline-flex;
    font-size: 21px;
    height: 54px;
    justify-content: center;
    margin-bottom: 17px;
    width: 54px;
}

/* ---------- Khmer font ---------- */
html[lang="km"] .auth-card,
html[lang="km"] .auth-card input,
html[lang="km"] .auth-card button,
html[lang="km"] .auth-card a,
html[lang="km"] .auth-card span {
    font-family: var(--site-font-khmer, 'Bayon', 'Noto Sans Khmer', sans-serif);
}

html[lang="km"] .auth-card .auth-card__header h1,
html[lang="km"] .auth-card .auth-card__header h2 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
}

html[lang="km"] .auth-bottom-row {
    align-items: baseline !important;
}

html[lang="km"] .auth-bottom-row .login-link,
html[lang="km"] .auth-bottom-row .auth-privacy-link,
html[lang="km"] .auth-bottom-row span,
html[lang="km"] .auth-bottom-row a {
    font-size: 12px !important;
    line-height: 1.4 !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 575.98px) {
    .auth-container {
        align-items: flex-start;
        padding: 16px 10px 40px;
    }

    .auth-card.form {
        border-radius: 12px;
    }

    .auth-card__inner {
        padding: 24px 20px 26px;
    }

    .auth-logo-stack {
        height: 60px;
        width: 60px;
    }

    .auth-card .auth-card__header h1,
    .auth-card .auth-card__header h2 {
        font-size: 20px;
    }

    .auth-card .captcha-row {
        grid-template-columns: 120px minmax(0, 1fr);
    }

    .auth-card .captcha-preview {
        width: 120px;
    }

    .auth-card .captcha-preview img {
        width: 118px;
    }
}

@media (max-width: 380px) {
    .auth-card .captcha-row {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .auth-card .captcha-preview {
        width: 132px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-card.form .auth-submit.button,
    .auth-card.form form .auth-control .form-control {
        transition: none;
    }
}

/* Powered-by logo. The height comes from Settings as an inline style; this
   only keeps the image aligned with the text beside it and stops a wide
   upload from overflowing a narrow auth card. */
.auth-powered a {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.auth-powered__logo {
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
}