/* Split sign-in page: form on the left (logo top-left), slide show on the right. Used by Views/Account/Login.cshtml */
:root {
    --lg-brand: #1d6f6a;
    --lg-brand-dark: #14524e;
    --lg-ink: #2a1a5e;
    --lg-muted: #5b5f73;
    --lg-line: #d9dde6;
    --lg-accent: #f5b800;
}

body.login-page { display: block; height: auto; min-height: 100vh; background: #fff; overflow-x: hidden; }
.loginctrl, .loginctrl > .containier-fluid { width: 100%; animation: none !important; }

.lg-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; font-family: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif; }

/* ---- left: form ---- */
.lg-left { position: relative; display: flex; flex-direction: column; padding: 28px 8% 24px; background: #fff; }
.lg-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--lg-ink); }
.lg-logo img { height: 40px; width: auto; }
.lg-logo span { font-size: 1.35rem; font-weight: 700; letter-spacing: .2px; }

.lg-form-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 420px; width: 100%; margin: 0 auto; padding: 24px 0; }
.lg-title { margin: 0 0 6px; font-size: 2rem; font-weight: 800; color: var(--lg-ink); }
.lg-sub { margin: 0 0 28px; color: var(--lg-ink); font-weight: 600; font-size: .95rem; }
.lg-sub small { display: block; font-weight: 400; color: var(--lg-muted); margin-top: 2px; }

.lg-field { position: relative; margin-bottom: 18px; }
.lg-field label { position: absolute; left: 14px; top: 7px; font-size: .68rem; color: var(--lg-muted); pointer-events: none; }
.lg-field input[type="text"], .lg-field input[type="password"] {
    width: 100%; height: 56px; padding: 22px 44px 6px 14px; border: 1.5px solid var(--lg-line); border-radius: 8px; background: #fff; font-size: 1rem; color: #1d2230; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.lg-field input:focus { border-color: var(--lg-brand); box-shadow: 0 0 0 3px rgba(29, 111, 106, .15); }
.lg-field .lg-eye { position: absolute; right: 8px; top: 12px; width: 32px; height: 32px; border: 0; background: transparent; color: var(--lg-muted); cursor: pointer; border-radius: 6px; }
.lg-field .lg-eye:hover { color: var(--lg-brand); background: #f2f5f7; }

.lg-row { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 26px; font-size: .85rem; }
.lg-row label { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--lg-ink); font-weight: 600; }
.lg-row a { color: #e04545; font-weight: 600; }

.lg-actions { display: flex; gap: 16px; }
.lg-btn { flex: 1; height: 48px; border-radius: 8px; border: 1.5px solid var(--lg-brand); font-weight: 700; font-size: .95rem; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; transition: transform .1s, box-shadow .15s, background .15s; }
.lg-btn-primary { background: var(--lg-brand); color: #fff; box-shadow: 0 10px 22px rgba(29, 111, 106, .28); }
.lg-btn-primary:hover { background: var(--lg-brand-dark); color: #fff; }
.lg-btn-ghost { background: #fff; color: var(--lg-brand); }
.lg-btn-ghost:hover { background: #f1f8f7; color: var(--lg-brand-dark); }
.lg-btn:active { transform: translateY(1px); }

.lg-note { margin-top: 28px; font-size: .78rem; color: var(--lg-muted); }
.lg-foot { font-size: .72rem; color: #8b8fa3; max-width: 420px; width: 100%; margin: 0 auto; }

.lg-alert { border-radius: 8px; padding: 10px 14px; font-size: .88rem; margin-bottom: 16px; }
.lg-alert-danger { background: #fdecec; color: #a12a2a; }
.lg-alert-warning { background: #fff6dc; color: #7a5a00; }

.lg-leave { animation: lgLeave .45s ease forwards; }
@keyframes lgLeave { to { opacity: 0; transform: translateY(-8px); } }
.lg-disabled { pointer-events: none; opacity: .6; }

/* ---- right: slide show ---- */
.lg-right { position: relative; overflow: hidden; background: #0f2b2a; }
.lg-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .6s ease; }
.lg-slide.is-active { opacity: 1; }
.lg-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .25)); pointer-events: none; }

/* the round arrow on the seam between the two halves */
.lg-next { position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--lg-accent); color: #3b2c00; font-size: 1rem; cursor: pointer; z-index: 5; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.lg-next:hover { transform: translate(-50%, -50%) scale(1.08); }
.lg-next:focus-visible, .lg-dot:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.lg-dots { position: absolute; right: 24px; bottom: 22px; display: flex; gap: 8px; z-index: 5; }
.lg-dot { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, .55); cursor: pointer; }
.lg-dot.is-active { background: #fff; width: 26px; border-radius: 6px; transition: width .2s; }

/* ---- cookie bar ---- */
#cookieConsent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: rgba(0, 0, 0, .88); color: #fff; padding: 1rem; text-align: center; border-top: 2px solid #28a745; font-size: .95rem; }
#acceptCookies { margin-left: 1rem; font-weight: 600; }

@media (max-width: 991.98px) {
    .lg-split { grid-template-columns: 1fr; }
    .lg-right { display: none; }
    .lg-left { padding: 22px 6%; }
}
@media (prefers-reduced-motion: reduce) {
    .lg-slide { transition: none; }
}