/* ============================================================
   SMARTTLYHOST — Login / Auth pages
   Adapted to the base theme markup. On login pages ($show_header
   false) the body gets .st-login; we hide the base navbars/footer
   and turn the .row.login wrapper into a split-screen.
   ============================================================ */

/* Hide the base theme's chrome on login pages */
body.st-login .navbar,
body.st-login nav.navbar,
body.st-login .footer,
body.st-login .nav-content,
body.st-login .header,
body.st-login br { display: none !important; }

html, body.st-login { margin: 0 !important; padding: 0 !important; }
body.st-login {
  background: var(--st-bg);
  min-height: 100vh;
}
/* Neutralize ALL base wrappers so the split-screen is truly full-bleed */
body.st-login .container-md,
body.st-login .container,
body.st-login > .container {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* The base outputs .row.login on auth pages; make it the split shell */
body.st-login .row.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  align-items: stretch;
}

/* Both columns fill the full viewport height */
body.st-login .st-auth__brand,
body.st-login .st-auth__formcol {
  min-height: 100vh;
}

/* LEFT brand panel */
.st-auth__brand {
  position: relative;
  padding: 3.5rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(135deg, var(--st-primary) 0%, var(--st-primary-700) 60%, #5e0c0b 100%);
}
.st-auth__brand::after {
  content: "";
  position: absolute;
  right: -120px; bottom: -120px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,.28), transparent 65%);
  filter: blur(10px);
  animation: stFloat 9s ease-in-out infinite alternate;
}
.st-auth__logo { width: auto; height: 46px; max-width: 320px; display: block; }
.st-auth__brand h1 {
  color: #fff; font-size: 2.4rem; line-height: 1.15;
  font-weight: 800; margin: 0 0 1rem; max-width: 16ch;
}
.st-auth__brand p { color: rgba(255,255,255,.85); font-size: 1.05rem; max-width: 42ch; }
.st-auth__points { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.st-auth__points li {
  display: flex; align-items: center; gap: .7rem;
  margin-bottom: .8rem; color: rgba(255,255,255,.92); font-weight: 500;
}
.st-auth__points li::before {
  content: "✓"; display: grid; place-items: center;
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  background: rgba(255,255,255,.18); font-size: .8rem;
}
.st-auth__meta { position: relative; font-size: .85rem; color: rgba(255,255,255,.7); }

/* RIGHT form column — the cell that holds Blesta's login form */
.st-auth__formcol {
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem; background: var(--st-bg);
}
/* The inner wrapper becomes a clean white card */
.st-auth__formcol > div {
  width: 100%;
  max-width: 440px;
  background: var(--st-surface);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-lg);
  box-shadow: var(--st-shadow-lg);
  padding: 2.25rem;
}
/* CRITICAL: Blesta's login content uses Bootstrap rows/cols that squeeze
   the form into a thin strip. Force everything inside to full width. */
.st-auth__formcol > div .row,
.st-auth__formcol > div [class*="col-"],
.st-auth__formcol > div .col-md-4,
.st-auth__formcol > div .col-md-6,
.st-auth__formcol > div .col-md-8,
.st-auth__formcol > div .col-sm-4,
.st-auth__formcol > div .col-sm-6 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.st-auth__formcol > div .row { display: block !important; margin: 0 !important; }
/* Flatten Blesta's own form wrappers so we get a single clean card */
body.st-login .row.login .panel,
body.st-login .row.login .well,
body.st-login .row.login .card,
body.st-login .row.login fieldset {
  border: none !important; box-shadow: none !important;
  background: transparent !important; padding: 0 !important; margin: 0 !important;
}
/* Make form fields full width and comfortable */
body.st-login .st-auth__formcol .form-control,
body.st-login .st-auth__formcol input[type="text"],
body.st-login .st-auth__formcol input[type="password"] {
  width: 100% !important;
  display: block;
  margin-bottom: .25rem;
}
body.st-login .st-auth__formcol .form-group { margin-bottom: 1.1rem; }
/* Tidy the page heading inside the card */
body.st-login .st-auth__formcol h1,
body.st-login .st-auth__formcol h2,
body.st-login .st-auth__formcol h3 { font-size: 1.5rem; margin: 0 0 .25rem; }

/* Force the login button to brand black regardless of stale color theme */
body.st-login .btn-primary,
body.st-login button[type="submit"],
body.st-login input[type="submit"] {
  background: var(--st-btn) !important;
  border-color: var(--st-btn) !important;
  color: #fff !important;
  width: 100%;
}
body.st-login .btn-primary:hover,
body.st-login button[type="submit"]:hover {
  background: var(--st-btn-600) !important;
  border-color: var(--st-btn-600) !important;
}

/* Mobile logo shown when brand panel hides */
.st-auth__mobile-logo { display: none; text-align: center; margin-bottom: 1.5rem; }
.st-auth__mobile-logo img { height: 40px; }

/* Responsive: stack */
@media (max-width: 900px) {
  body.st-login .row.login { grid-template-columns: 1fr; }
  .st-auth__brand { display: none; }
  .st-auth__mobile-logo { display: block; }
  .st-auth__formcol { padding: 1.5rem; }
}

/* Entrance animations */
@keyframes stFadeUp { from{opacity:0;transform:translateY(18px);} to{opacity:1;transform:translateY(0);} }
@keyframes stFloat  { from{transform:translate(0,0) scale(1);} to{transform:translate(-30px,-24px) scale(1.08);} }
.st-auth__logo, .st-auth__brand h1, .st-auth__brand p,
.st-auth__points li, .st-auth__meta {
  opacity: 0; animation: stFadeUp .7s cubic-bezier(.16,.84,.44,1) forwards;
}
.st-auth__logo{animation-delay:.05s;} .st-auth__brand h1{animation-delay:.18s;}
.st-auth__brand p{animation-delay:.30s;}
.st-auth__points li:nth-child(1){animation-delay:.42s;}
.st-auth__points li:nth-child(2){animation-delay:.50s;}
.st-auth__points li:nth-child(3){animation-delay:.58s;}
.st-auth__points li:nth-child(4){animation-delay:.66s;}
.st-auth__meta{animation-delay:.80s;}
@media (prefers-reduced-motion: reduce){
  .st-auth__logo,.st-auth__brand h1,.st-auth__brand p,.st-auth__points li,.st-auth__meta,.st-auth__brand::after{
    animation:none!important;opacity:1!important;transform:none!important;
  }
}