/* ==========================================================================
   Login page — modern redesign
   Matches the checkout redesign (checkout-modern): orange/navy tokens,
   soft radial page background, white cards, trust strip.
   All rules are scoped under .login-modern (except the page background) so
   nothing leaks into the shared master layout.
   ========================================================================== */

.login-modern {
  --lm-orange: #f58220;
  --lm-orange-hover: #e07010;
  --lm-navy: #0d182a;
  --lm-green: #22c55e;
  --lm-blue: #2563eb;
  --lm-text: #0f172a;
  --lm-muted: #64748b;
  --lm-border: #e2e8f0;
  --lm-radius: 16px;
  color: var(--lm-text);
}

/* Full-bleed soft background on the login page only (this file loads on /user/login). */
#main > .content {
  background:
    radial-gradient(ellipse 68% 62% at 0% 0%, rgba(245, 130, 32, .14) 0%, rgba(245, 130, 32, .06) 34%, rgba(245, 130, 32, 0) 72%),
    #f4f7f9;
}

/* The compact footer's 28px top margin is transparent, so against this page's
   tinted background it revealed the white body colour as a stray band. Remove
   the gap — the footer's own border-top provides the separation. The #footer id
   raises specificity above the footer partial's later-loading inline <style>. */
#footer.enrollment-footer { margin-top: 0; }

.login-modern__shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 0 56px;
}

.login-modern__layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 28px;
  align-items: start;
}

/* ---- Cards ------------------------------------------------------------- */
.login-modern .lm-card {
  background: #fff;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, .06), 0 8px 10px -6px rgba(15, 23, 42, .02);
}

.login-modern .lm-login-card {
  padding: 40px;
}

/* ---- Header ------------------------------------------------------------ */
.login-modern .lm-login-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}

.login-modern .lm-login-head__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--lm-orange), #ff9d4d);
  box-shadow: 0 6px 16px -4px rgba(245, 130, 32, .5);
}

.login-modern .lm-login-head h1 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--lm-text);
  line-height: 1.2;
}

.login-modern .lm-login-head__rule {
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 3px;
  background: var(--lm-orange);
  margin: 10px 0;
}

.login-modern .lm-login-head__subtitle {
  color: var(--lm-muted);
  font-size: 15px;
  margin: 0;
}

/* ---- Form -------------------------------------------------------------- */
.login-modern .lm-field {
  margin-bottom: 20px;
}

.login-modern .lm-field label {
  display: block;
  font-weight: 600;
  font-size: 13.5px;
  margin-bottom: 8px;
  color: var(--lm-text);
}

.login-modern .lm-input {
  position: relative;
}

.login-modern .lm-input > i.lm-input__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 15px;
  pointer-events: none;
}

.login-modern .lm-input input.form-control,
.login-modern .lm-input input[type="email"],
.login-modern .lm-input input[type="password"],
.login-modern .lm-input input[type="text"] {
  width: 100%;
  height: auto;
  padding: 14px 44px 14px 44px;
  border: 1px solid var(--lm-border);
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.4;
  background: #fff;
  color: var(--lm-text);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.login-modern .lm-input input.form-control:focus,
.login-modern .lm-input input:focus {
  outline: none;
  border-color: var(--lm-orange);
  box-shadow: 0 0 0 3px rgba(245, 130, 32, .14);
}

.login-modern .lm-toggle-password {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 4px;
  font-size: 15px;
}

.login-modern .lm-toggle-password:hover { color: var(--lm-muted); }

.login-modern .lm-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-size: 14px;
  flex-wrap: wrap;
}

.login-modern .lm-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--lm-text);
  cursor: pointer;
  margin: 0;
}

.login-modern .lm-remember input { margin: 0; accent-color: var(--lm-orange); }

.login-modern .lm-forgot {
  color: var(--lm-blue);
  font-weight: 600;
  text-decoration: none;
}
.login-modern .lm-forgot:hover { text-decoration: underline; }

.login-modern .lm-submit {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 15px 18px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: var(--lm-orange);
  transition: background .15s ease, transform .05s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.login-modern .lm-submit:hover { background: var(--lm-orange-hover); }
.login-modern .lm-submit:active { transform: translateY(1px); }

.login-modern .lm-register {
  text-align: center;
  margin-top: 18px;
  font-size: 14px;
  color: var(--lm-muted);
}
.login-modern .lm-register a { color: var(--lm-blue); font-weight: 600; text-decoration: none; }
.login-modern .lm-register a:hover { text-decoration: underline; }

/* ---- Trust strip ------------------------------------------------------- */
.login-modern .lm-trust {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--lm-border);
}

.login-modern .lm-trust__item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--lm-text);
}

.login-modern .lm-trust__item i { font-size: 20px; }
.login-modern .lm-trust__item .fa-shield { color: var(--lm-green); }
.login-modern .lm-trust__item .fa-users { color: var(--lm-orange); }
.login-modern .lm-trust__item .fa-star { color: var(--lm-orange); }

/* ---- Sidebar cards ----------------------------------------------------- */
.login-modern .lm-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-modern .lm-aside-card {
  padding: 22px;
  border-radius: var(--lm-radius);
  border: 1px solid transparent;
}

.login-modern .lm-aside-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.login-modern .lm-aside-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.login-modern .lm-aside-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--lm-text);
}

.login-modern .lm-aside-card p {
  font-size: 14px;
  color: var(--lm-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}

.login-modern .lm-aside-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}

.login-modern .lm-card--green { background: #f0fdf4; border-color: #bbf7d0; }
.login-modern .lm-card--green .lm-aside-card__icon { color: var(--lm-green); }
.login-modern .lm-card--green .lm-aside-btn { background: var(--lm-green); color: #fff; }
.login-modern .lm-card--green .lm-aside-btn:hover { background: #16a34a; }

.login-modern .lm-card--blue { background: #eff6ff; border-color: #bfdbfe; }
.login-modern .lm-card--blue .lm-aside-card__icon { color: var(--lm-blue); }
.login-modern .lm-card--blue .lm-aside-btn { background: #fff; color: var(--lm-blue); border: 1px solid var(--lm-blue); }
.login-modern .lm-card--blue .lm-aside-btn:hover { background: #f8fafc; }

.login-modern .lm-card--amber { background: #fff7ed; border-color: #fed7aa; }
.login-modern .lm-card--amber .lm-aside-card__icon { color: var(--lm-orange); }
.login-modern .lm-aside-card__note { margin: 0; font-size: 14px; color: var(--lm-muted); line-height: 1.5; }

/* ---- Alerts ------------------------------------------------------------ */
.login-modern .lm-alert {
  padding: 13px 16px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 14px;
  border: 1px solid transparent;
}
.login-modern .lm-alert--info { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.login-modern .lm-alert--danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.login-modern .lm-alert--success { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.login-modern .lm-alert div + div { margin-top: 4px; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
  .login-modern__layout { grid-template-columns: 1fr; }
  .login-modern .lm-login-card { padding: 28px 22px; }
  .login-modern__shell { padding: 24px 0 40px; }
}

@media (max-width: 520px) {
  .login-modern .lm-trust { flex-direction: column; gap: 14px; }
  .login-modern .lm-options { gap: 14px; }
}