/* LBG 1718 Trading - login page */
:root {
  --lbg-red: #e4002b;
  --lbg-blue: #004b93;
  --lbg-navy: #00264d;
}
.auth-page { margin: 0; min-height: 100vh; min-height: 100dvh; background: #eef2f8; }

.auth-shell {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: 1fr;
}

/* Brand panel */
.auth-brand {
  position: relative; overflow: hidden; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem 1.5rem 5.5rem;
  background:
    radial-gradient(circle at 15% 10%, rgba(228,0,43,.45), transparent 45%),
    radial-gradient(circle at 90% 90%, rgba(0,117,214,.5), transparent 50%),
    linear-gradient(145deg, var(--lbg-navy), var(--lbg-blue));
}
.auth-brand::after { /* soft diagonal accent */
  content: ""; position: absolute; inset: auto -20% -40% -20%; height: 60%;
  background: rgba(255,255,255,.05); transform: rotate(-6deg); pointer-events: none;
}
.auth-logo-plate {
  position: relative; z-index: 1; background: #fff; border-radius: 18px;
  padding: 14px 22px; width: min(260px, 70vw);
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
}
.auth-logo-plate img { display: block; width: 100%; height: auto; }
.auth-tagline {
  position: relative; z-index: 1; margin: 1.1rem 0 0; font-weight: 600; letter-spacing: .01em;
  font-size: clamp(.66rem, 4.3vw, 1rem); /* scales down so the full title stays on one line on small phones */
  white-space: nowrap; max-width: 100%;
}
.auth-sub { position: relative; z-index: 1; margin: .25rem 0 0; font-size: .85rem; opacity: .8; }
.auth-features { display: none; }

/* Form panel */
.auth-form-wrap {
  position: relative; z-index: 2; padding: 0 1rem 2rem;
  margin-top: -4rem; display: flex; justify-content: center; align-items: flex-start;
}
.auth-card {
  width: 100%; max-width: 420px; background: #fff; border-radius: 18px;
  padding: 1.75rem 1.5rem; box-shadow: 0 18px 50px rgba(0,20,50,.35);
}
.auth-card h1 { font-size: 1.4rem; font-weight: 700; color: var(--lbg-navy); margin: 0; }
.auth-card .auth-lead { color: #6b7686; font-size: .9rem; margin: .25rem 0 1.25rem; }

.auth-card .form-label { font-size: .8rem; font-weight: 600; color: #3b4656; margin-bottom: .35rem; }
.auth-input { position: relative; }
.auth-input > .bi:first-child {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: #8a96a8; pointer-events: none; font-size: 1.05rem;
}
.auth-input .form-control {
  height: 50px; padding-left: 42px; border-radius: 12px; border: 1.5px solid #d9e0ea;
  font-size: 16px; /* prevents iOS zoom on focus */
  background: #f9fbfd;
}
.auth-input .form-control:focus {
  background: #fff; border-color: var(--lbg-blue); box-shadow: 0 0 0 .22rem rgba(0,75,147,.15);
}
.auth-input .pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border: 0; background: transparent; color: #6b7686;
  border-radius: 10px; font-size: 1.1rem;
}
.auth-input .pw-toggle:hover { color: var(--lbg-blue); }
.auth-input .pw-toggle:focus-visible { outline: 2px solid var(--lbg-blue); }
.auth-input.has-toggle .form-control { padding-right: 48px; }

.btn-signin {
  height: 50px; border: 0; border-radius: 12px; font-weight: 600; font-size: 1rem; color: #fff;
  background: linear-gradient(135deg, var(--lbg-blue), #0a67c2);
  box-shadow: 0 6px 16px rgba(0,75,147,.3);
}
.btn-signin:hover, .btn-signin:focus { color: #fff; filter: brightness(1.08); }
.btn-exit {
  height: 44px; border-radius: 12px; border: 1.5px solid #d9e0ea; background: #fff; color: #5a6677; font-weight: 500;
}
.btn-exit:hover { background: #f3f5f9; color: var(--lbg-red); border-color: #f0b3bd; }
.auth-foot { text-align: center; color: #8a96a8; font-size: .75rem; margin-top: 1.25rem; }

/* Tablet portrait (>=576px) */
@media (min-width: 576px) {
  .auth-brand { padding: 3rem 2rem 7rem; }
  .auth-logo-plate { width: 340px; padding: 18px 28px; }
  .auth-tagline { font-size: 1.25rem; white-space: normal; }
  .auth-form-wrap { margin-top: -5rem; padding-bottom: 3rem; }
  .auth-card { padding: 2.25rem 2.25rem; max-width: 460px; }
}

/* Desktop / tablet landscape (>=992px): split screen */
@media (min-width: 992px) {
  .auth-shell { grid-template-columns: 1.1fr 1fr; }
  .auth-brand { padding: 3rem; }
  .auth-logo-plate { width: 400px; }
  .auth-tagline { font-size: 1.5rem; white-space: normal; }
  .auth-features {
    display: flex; flex-direction: column; gap: .7rem; margin-top: 2rem; text-align: left;
    position: relative; z-index: 1; font-size: .95rem;
  }
  .auth-features .bi { color: #8fd0ff; margin-right: .6rem; }
  .auth-form-wrap { margin-top: 0; background: #f2f5fa; align-items: center; padding: 2rem; }
  .auth-card { box-shadow: 0 10px 40px rgba(0,30,70,.12); max-width: 440px; }
}

/* Short landscape phones: keep everything reachable */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 991.98px) {
  .auth-shell { grid-template-columns: 1fr 1fr; }
  .auth-brand { padding: 1rem; }
  .auth-logo-plate { width: 200px; }
  .auth-form-wrap { margin-top: 0; align-items: center; background: #f2f5fa; padding: 1rem; }
  .auth-card { padding: 1.25rem; box-shadow: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .auth-card { animation: authIn .45s ease both; }
  @keyframes authIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}