/* ============================================================
   AAUPOS V1 — Login page styles (ProLaundry brand)
   Standalone split-screen sign-in (brand panel + form card). Self-
   contained; does not depend on the shell stylesheet. Palette + type
   match the public homepage (home.aspx) so the two front doors read as
   one product: green ProLaundry palette, Poppins display + Jost body,
   logo-dot brand mark, eyebrow labels, btn-pro-style submit.
   Mobile: brand panel hides, form centers.
   ============================================================ */

/* ── ProLaundry palette (mirrors home.aspx :root) ────────────── */
:root {
    --green:    #4caf50;  --green-d:  #43a047;  --green-dd: #2e7d32;
    --green-lt: #a5e8a8;
    --ink:      #2b2b35;  --ink-soft: #3a3a44;
    --body:     #6a6a76;  --muted:    #9a9aa4;
    --paper:    #ffffff;  --mist:     #f4f6f7;  --line: #e6e9ea;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: 'Jost', system-ui, sans-serif; color: var(--body); }

.lp-page { display: flex; flex-direction: row; min-height: 100vh; background: var(--mist); }

/* ── Left brand panel: laundry photo + green overlay ─────────── */
.lp-brand {
    flex: 0 0 44%; width: 44%; min-height: 100vh;
    position: relative; display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    background-color: var(--ink);
    color: #fff;
}
/* Photo layer (same technique as the homepage hero) */
.lp-brand::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background-image: url('https://images.unsplash.com/photo-1545173168-9f1947eebb7f?auto=format&fit=crop&w=1200&q=70');
    background-size: cover; background-position: center;
}
/* Dark-green gradient overlay keeps white text readable on the photo */
.lp-brand::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(150deg, rgba(20,40,24,.86) 0%, rgba(46,125,50,.80) 55%, rgba(43,43,53,.88) 100%);
}
.lp-form-side {
    flex: 1; min-width: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 2.5rem 1.5rem; min-height: 100vh; background: var(--mist);
}
.lp-mobile-logo { display: none; }

@media (max-width: 991.98px) {
    .lp-brand { display: none !important; }
    .lp-form-side { padding: 2rem 1.25rem; }
    .lp-mobile-logo { display: flex !important; align-items: center; gap: .6rem; margin-bottom: 1.5rem; }
}

.lp-brand-inner { position: relative; z-index: 3; max-width: 440px; padding: 3rem 2.5rem; color: #fff; }
.lp-logo-row { display: flex; align-items: center; gap: .9rem; margin-bottom: 2.5rem; }

/* ── logo-dot brand mark (ported from home.aspx .logo-dot) ───── */
.lp-logo-dot {
    width: 54px; height: 54px; border-radius: 14px; flex-shrink: 0;
    background: var(--green); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; overflow: hidden;
    box-shadow: 0 8px 22px rgba(76,175,80,.45);
}
.lp-logo-dot img { width: 100%; height: 100%; object-fit: cover; }
.lp-logo-dot-sm { width: 40px; height: 40px; border-radius: 10px; font-size: 1.1rem; box-shadow: 0 6px 16px rgba(76,175,80,.4); }

.lp-sys-name { font-family: 'Poppins', sans-serif; font-size: 1.3rem; font-weight: 700; line-height: 1.1; }
.lp-sys-tag { font-size: .72rem; opacity: .8; text-transform: uppercase; letter-spacing: .05em; margin-top: .15rem; }

.lp-headline { font-family: 'Poppins', sans-serif; font-size: 2rem; font-weight: 700; line-height: 1.25; margin-bottom: .75rem; color: #fff; }
.lp-hl { background: linear-gradient(90deg, var(--green-lt), #d4f7d6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lp-subhead { font-size: .95rem; opacity: .9; line-height: 1.65; margin-bottom: 1.75rem; }

.lp-feat-list { list-style: none; padding: 0; margin-bottom: 1.75rem; display: flex; flex-direction: column; gap: .6rem; }
.lp-feat-list li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; opacity: .95; }
.lp-feat-list li i { color: var(--green-lt); font-size: .95rem; flex-shrink: 0; }

.lp-badge-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.lp-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
    border-radius: 50px; padding: .3rem .8rem; font-family: 'Poppins', sans-serif;
    font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.lp-badge i { color: var(--green-lt); }
.lp-stats-row { display: flex; align-items: center; gap: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.2); }
.lp-stat-num { font-family: 'Poppins', sans-serif; font-size: 1.6rem; font-weight: 800; line-height: 1; }
.lp-stat-lbl { font-size: .68rem; opacity: .75; text-transform: uppercase; letter-spacing: .06em; margin-top: .15rem; }
.lp-stat-sep { width: 1px; height: 32px; background: rgba(255,255,255,.25); }

/* Subtle texture blobs over the photo (kept low-key, re-tinted) */
.lp-blob { position: absolute; border-radius: 50%; opacity: .08; z-index: 2; animation: lpFloat 8s ease-in-out infinite; }
.lp-blob-1 { width: 420px; height: 420px; background: radial-gradient(circle,#fff 0%,transparent 70%); top: -140px; left: -120px; }
.lp-blob-2 { width: 280px; height: 280px; background: radial-gradient(circle,var(--green-lt) 0%,transparent 70%); bottom: -80px; right: -60px; animation-delay: 3s; }
.lp-blob-3 { width: 180px; height: 180px; background: radial-gradient(circle,#fff 0%,transparent 70%); top: 50%; right: 80px; animation-delay: 5s; }
.lp-grid-overlay {
    position: absolute; inset: 0; z-index: 2;
    background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                      linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size: 40px 40px;
}
@keyframes lpFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
.lp-mobile-name { font-family: 'Poppins', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--ink); }

/* ── Form card ──────────────────────────────────────────────── */
.lp-card {
    width: 100%; max-width: 430px; background: var(--paper); border-radius: 10px;
    box-shadow: 0 18px 50px rgba(0,0,0,.10); padding: 2.5rem 2.25rem; border: 1px solid var(--line);
}
@media (max-width: 575.98px) { .lp-card { padding: 1.5rem 1.25rem; border-radius: 8px; } }

.lp-card-head { text-align: center; margin-bottom: 2rem; }
.lp-card-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, var(--green), var(--green-dd)); color: #fff;
    font-size: 1.6rem; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem; box-shadow: 0 8px 24px rgba(76,175,80,.35);
}
/* Eyebrow: bracketed green label (mirrors home.aspx .eyebrow) */
.lp-eyebrow {
    font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--green);
    letter-spacing: .02em; font-size: .9rem; margin-bottom: .25rem;
}
.lp-eyebrow::before { content: "["; } .lp-eyebrow::after { content: "]"; }
.lp-card-title { font-family: 'Poppins', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--ink); margin-bottom: .35rem; }
.lp-card-sub { font-size: .9rem; color: var(--body); }

.lp-field { margin-bottom: 1.25rem; }
.lp-label { display: block; font-family: 'Poppins', sans-serif; font-size: .8rem; font-weight: 500; color: var(--ink); margin-bottom: .45rem; }
.lp-label i { color: var(--green); margin-right: .3rem; width: 14px; }
.lp-input-wrap { position: relative; }
.lp-input {
    width: 100%; padding: .72rem .9rem; border: 1px solid var(--line); border-radius: 4px;
    font-size: .95rem; color: var(--ink); background: var(--paper); outline: none;
    transition: border-color .2s, box-shadow .2s; font-family: inherit;
}
.lp-input::placeholder { color: var(--muted); }
.lp-input:focus { border-color: var(--green); box-shadow: 0 0 0 .18rem rgba(76,175,80,.18); }

.lp-pw-wrap .lp-input { padding-right: 3rem; }
.lp-pw-toggle {
    position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--muted); cursor: pointer; padding: .25rem;
    font-size: .95rem; transition: color .2s;
}
.lp-pw-toggle:hover { color: var(--green); }

.lp-remember { margin-bottom: 1.25rem; }
.lp-check-label { display: flex; align-items: center; gap: .55rem; font-size: .9rem; color: var(--body); cursor: pointer; user-select: none; }
.lp-check { display: none; }
.lp-check-custom {
    width: 18px; height: 18px; border: 2px solid var(--line); border-radius: 4px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s;
}
.lp-check:checked + .lp-check-custom { background: var(--green); border-color: var(--green); }
.lp-check:checked + .lp-check-custom::after {
    content: ''; width: 5px; height: 9px; border: 2px solid #fff; border-top: none; border-left: none;
    transform: rotate(45deg) translateY(-1px); display: block;
}

.lp-captcha-wrap { margin-bottom: 1.5rem; min-height: 78px; }
.lp-captcha-wrap iframe { display: block; }
@media (max-width: 575.98px) { .lp-captcha-wrap .g-recaptcha { transform: scale(.87); transform-origin: left top; } }

/* ── Submit button (btn-pro / btn-green from home.aspx) ──────── */
.lp-btn-submit {
    display: flex; align-items: center; justify-content: center; width: 100%;
    padding: .8rem 1.6rem; background: var(--green); color: #fff;
    border: none; border-radius: 4px; font-family: 'Poppins', sans-serif;
    font-size: .95rem; font-weight: 600; cursor: pointer;
    box-shadow: 0 6px 18px rgba(76,175,80,.32); margin-bottom: 1.25rem;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.lp-btn-submit:hover { background: var(--green-dd); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(76,175,80,.4); }
.lp-btn-submit:active { transform: translateY(0); }
.lp-btn-submit:disabled { opacity: .7; cursor: not-allowed; transform: none; }

.lp-spinner {
    display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff; border-radius: 50%; animation: lpSpin .65s linear infinite;
    margin-right: .5rem; vertical-align: middle;
}
@keyframes lpSpin { to { transform: rotate(360deg); } }

.lp-trust-row { display: flex; justify-content: center; gap: 1rem; font-size: .72rem; color: var(--body); flex-wrap: wrap; margin-bottom: .5rem; }
.lp-trust-row span { display: flex; align-items: center; gap: .3rem; }
.lp-trust-row i { color: var(--green); font-size: .7rem; }

.lp-back-link { font-size: .85rem; color: var(--body); text-decoration: none; transition: color .2s; }
.lp-back-link:hover { color: var(--green); }
.lp-copy { margin-top: 1.5rem; font-size: .75rem; color: var(--muted); text-align: center; }

#alertContainer { margin-bottom: 1rem; }
.alert { border: none; border-radius: 6px; font-size: .9rem; font-weight: 500; padding: .85rem 1rem; display: flex; align-items: flex-start; gap: .6rem; box-shadow: 0 4px 16px rgba(0,0,0,.1); animation: lpSlideIn .3s ease-out; }
@keyframes lpSlideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.alert-danger { background: #fef2f2; color: #991b1b; border-left: 4px solid #dc3545; }
.alert-success { background: #f0fdf4; color: #14532d; border-left: 4px solid var(--green); }
.alert-warning { background: #fffbeb; color: #78350f; border-left: 4px solid #f59e0b; }
.alert-info { background: #f0fdf4; color: #14532d; border-left: 4px solid var(--green); }
.alert .btn-close { margin-left: auto; }