/* Tampilan halaman masuk dan daftar, disamakan dengan dashboard pembeli
   (css/user-refresh.css): latar abu kehijauan, kartu putih bergaris tipis
   tanpa bayangan, tombol pill hijau tua, dan font Plus Jakarta Sans.

   Dimuat setelah style.css, yang tetap dipakai bersama halaman admin. Semua
   aturan di sini memakai awalan body.login-page supaya tidak bocor ke halaman
   lain dan cukup kuat menimpa aturan login lama di style.css. Di aplikasi
   Android, css/mobile.css dimuat paling akhir dan tetap mengatur jarak aman
   layar serta penutup saat aplikasi dibuka. */

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

body.login-page {
    --u-bg: #f4f6f5;
    --u-surface: #ffffff;
    --u-soft: #f4f6f5;
    --u-border: #e3e8e6;
    --u-control: #d2d8d6;
    --u-text: #0d1614;
    --u-muted: #56625f;
    --u-accent: #0f766e;
    --u-accent-dark: #0b5c54;
    --u-accent-soft: #e3f2ef;
    --u-danger: #b42318;
    --u-danger-soft: #fdeceb;
    --u-warning: #8a5300;
    --u-warning-soft: #fdf3e2;
    --u-positive: #1d6b3f;
    --u-positive-soft: #e3f4e8;
    --u-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 40px 16px;
    place-items: center;
    background: var(--u-bg);
    color: var(--u-text);
    font-family: var(--u-font);
}

/* style.css memasang Inter ke semua elemen lewat "*", jadi font dari body
   tidak turun. Selektor ini hanya satu tingkat lebih kuat daripada "*" dan
   melewati <i>, sehingga ikon Font Awesome (.fas) tetap memakai fontnya. */
:where(body.login-page) :not(i) {
    font-family: var(--u-font);
}

/* ---------- Tata letak ---------- */

body.login-page .login-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 440px;
    gap: 0;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
}

/* Panel merek hanya di layar lebar. Di HP form langsung terlihat, mereknya
   cukup baris kecil di atas kartu. */
body.login-page .login-brand-panel {
    display: none;
}

@media (min-width: 960px) {
    body.login-page .login-container {
        grid-template-columns: minmax(0, 1fr) 440px;
        max-width: 1040px;
        gap: 72px;
        align-items: center;
    }

    body.login-page .login-brand-panel {
        display: grid;
        align-content: center;
        gap: 28px;
        min-height: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: var(--u-text);
    }

    body.login-page .login-brand-panel::before,
    body.login-page .login-brand-panel::after {
        content: none;
    }
}

/* ---------- Panel merek ---------- */

body.login-page .login-brand,
body.login-page .login-card-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    color: var(--u-text);
    text-decoration: none;
}

body.login-page .login-brand .brand-mark,
body.login-page .login-card-brand .brand-mark {
    display: block;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    box-shadow: none;
    overflow: hidden;
}

body.login-page .login-card-brand .brand-mark {
    width: 36px;
    height: 36px;
}

body.login-page .login-brand .brand-mark img,
body.login-page .login-card-brand .brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.login-page .login-brand strong {
    color: var(--u-text);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0;
}

body.login-page .login-brand-copy {
    display: grid;
    gap: 14px;
    max-width: 30rem;
}

body.login-page .login-hero-title {
    margin: 0;
    color: var(--u-text);
    font-size: clamp(2rem, 3.2vw, 2.7rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

body.login-page .login-brand-copy p:not(.login-hero-title) {
    margin: 0;
    color: var(--u-muted);
    font-size: 1.02rem;
    line-height: 1.6;
}

body.login-page .login-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 30rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Satu warna untuk semua kategori, sama dengan tile di halaman depan dan
   dashboard. */
body.login-page .login-category-list li {
    padding: 8px 14px;
    border: 1px solid var(--u-border);
    border-radius: 999px;
    background: var(--u-surface);
    color: var(--u-text);
    font-size: 0.9rem;
    font-weight: 600;
}

/* ---------- Kartu form ---------- */

body.login-page .login-card {
    display: grid;
    gap: 18px;
    width: 100%;
    margin: 0;
    padding: 28px 24px;
    border: 1px solid var(--u-border);
    border-radius: 20px;
    background: var(--u-surface);
    box-shadow: none;
    backdrop-filter: none;
    color: var(--u-text);
}

body.login-page .login-header {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    text-align: left;
}

body.login-page .login-card-brand span:last-child {
    font-size: 1rem;
    font-weight: 800;
}

@media (min-width: 960px) {
    body.login-page .login-card-brand {
        display: none;
    }
}

body.login-page .login-header h1 {
    margin: 0;
    color: var(--u-text);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* Masuk dan Daftar sebagai satu kontrol bersegmen, sama dengan tab saldo di
   menu Isi saldo. */
body.login-page .auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 0;
    padding: 4px;
    border: 0;
    border-radius: 999px;
    background: var(--u-soft);
    box-shadow: none;
}

body.login-page .auth-tab {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--u-muted);
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: none;
    transform: none;
    cursor: pointer;
}

/* Di langkah OTP dan lupa password tidak ada tab yang aktif. Tab-nya
   disembunyikan supaya user fokus ke satu langkah; tiap langkah punya tombol
   kembali sendiri. */
body.login-page .auth-tabs:not(:has(.auth-tab.active)) {
    display: none;
}

body.login-page .auth-tab:hover {
    color: var(--u-text);
}

body.login-page .auth-tab.active {
    border-color: var(--u-border);
    background: var(--u-surface);
    color: var(--u-text);
    box-shadow: none;
}

/* ---------- Pesan dan kotak info ---------- */

body.login-page .auth-message {
    min-height: 0;
    margin: 0;
    padding: 10px 14px;
    border: 0;
    border-radius: 12px;
    background: var(--u-soft);
    color: var(--u-text);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.45;
}

body.login-page .auth-message:empty {
    display: none;
}

body.login-page .auth-message.failed {
    background: var(--u-danger-soft);
    color: var(--u-danger);
}

body.login-page .auth-message.success {
    background: var(--u-positive-soft);
    color: var(--u-positive);
}

body.login-page .auth-dev-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    background: var(--u-warning-soft);
    color: var(--u-warning);
    font-size: 0.9rem;
    line-height: 1.45;
}

body.login-page .auth-telegram-box {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--u-border);
    border-radius: 12px;
    background: var(--u-soft);
}

body.login-page .auth-telegram-box p {
    margin: 0;
    color: var(--u-text);
    font-size: 0.92rem;
}

body.login-page .btn-telegram-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 999px;
    background: #229ed9;
    color: #ffffff;
    font-weight: 700;
    box-shadow: none;
    cursor: pointer;
}

/* ---------- Form ---------- */

body.login-page .auth-view {
    display: none;
}

body.login-page .auth-view.active {
    display: grid;
    gap: 14px;
}

body.login-page .auth-view-note {
    margin: 0;
    color: var(--u-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

body.login-page .form-group {
    display: grid;
    gap: 6px;
    margin: 0;
}

body.login-page .form-group label {
    margin: 0;
    color: var(--u-text);
    font-size: 0.9rem;
    font-weight: 700;
}

body.login-page .login-card input[type="email"],
body.login-page .login-card input[type="password"],
body.login-page .login-card input[type="text"] {
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--u-control);
    border-radius: 12px;
    background: var(--u-surface);
    color: var(--u-text);
    font-size: 16px;
    box-shadow: none;
    outline: none;
}

body.login-page .login-card input::placeholder {
    color: var(--u-muted);
    opacity: 1;
}

body.login-page .login-card input[type="email"]:focus,
body.login-page .login-card input[type="password"]:focus,
body.login-page .login-card input[type="text"]:focus {
    border-color: var(--u-accent);
    box-shadow: 0 0 0 3px var(--u-accent-soft);
}

body.login-page #otpCode:not(:placeholder-shown),
body.login-page #forgotOtpCode:not(:placeholder-shown) {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.12em;
}

body.login-page .password-field {
    position: relative;
}

body.login-page .password-field input {
    padding-right: 52px;
}

body.login-page .password-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--u-muted);
    box-shadow: none;
    transform: translateY(-50%);
    cursor: pointer;
}

body.login-page .password-toggle:hover {
    background: var(--u-soft);
    color: var(--u-text);
}

body.login-page .captcha-box {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

body.login-page .captcha-code {
    display: flex;
    flex: 1;
    align-items: center;
    min-height: 48px;
    padding: 0 14px;
    border: 1px dashed var(--u-control);
    border-radius: 12px;
    background: var(--u-soft);
    color: var(--u-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.15rem;
    letter-spacing: 0.2em;
}

body.login-page .captcha-refresh {
    display: grid;
    flex: none;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--u-control);
    border-radius: 50%;
    background: var(--u-surface);
    color: var(--u-text);
    box-shadow: none;
    cursor: pointer;
}

body.login-page .consent-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 2px 0 0;
    color: var(--u-muted);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
}

body.login-page .consent-check input {
    flex: none;
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 2px 0 0;
    padding: 0;
    accent-color: var(--u-accent);
}

body.login-page .consent-check a {
    color: var(--u-accent);
    font-weight: 700;
}

body.login-page .otp-target {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    background: var(--u-accent-soft);
    color: var(--u-text);
}

body.login-page .otp-target span {
    color: var(--u-muted);
    font-size: 0.85rem;
}

body.login-page .otp-target strong {
    font-size: 1rem;
    overflow-wrap: anywhere;
}

/* ---------- Tombol ---------- */

body.login-page .auth-link-btn {
    justify-self: end;
    margin: -6px 0 0;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--u-accent);
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: none;
    cursor: pointer;
}

body.login-page .btn-login-submit {
    width: 100%;
    min-height: 50px;
    margin: 4px 0 0;
    padding: 12px 20px;
    border: 0;
    border-radius: 999px;
    background: var(--u-accent);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: none;
    transform: none;
    cursor: pointer;
}

body.login-page .btn-login-submit:hover:not(:disabled) {
    background: var(--u-accent-dark);
    box-shadow: none;
    transform: none;
}

body.login-page .btn-login-submit:disabled {
    opacity: 0.6;
    cursor: progress;
}

body.login-page .btn-auth-secondary,
body.login-page .btn-google-native {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid var(--u-control);
    border-radius: 999px;
    background: var(--u-surface);
    color: var(--u-text);
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: none;
    transform: none;
    cursor: pointer;
}

body.login-page .btn-auth-secondary:hover,
body.login-page .btn-google-native:hover {
    background: var(--u-soft);
}

body.login-page .login-card button:focus-visible,
body.login-page .login-card a:focus-visible {
    outline: 3px solid var(--u-accent);
    outline-offset: 2px;
}

/* ---------- Google ---------- */

body.login-page .google-auth-section {
    display: grid;
    gap: 14px;
    margin: 4px 0 0;
}

body.login-page .auth-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: var(--u-muted);
    font-size: 0.85rem;
}

body.login-page .auth-divider::before,
body.login-page .auth-divider::after {
    content: "";
    height: 1px;
    background: var(--u-border);
}

body.login-page .auth-divider span {
    padding: 0;
    background: none;
    color: var(--u-muted);
}

body.login-page .google-web-button {
    display: flex;
    justify-content: center;
    min-height: 44px;
}

/* ---------- HP ---------- */

@media (max-width: 480px) {
    body.login-page {
        padding: 20px 16px;
        place-items: start center;
    }

    body.login-page .login-card {
        gap: 16px;
        padding: 22px 18px;
    }

    body.login-page .login-header h1 {
        font-size: 1.35rem;
    }
}