/* ===== GeoGuard Cloud — Login Page Styles ===== */

/* Vars */
:root{
  --gg-blue:#0d6efd;
  --gg-bg:#f8fafc;
  --gg-text:#111827;
}

/* Base */
html,body{height:100%;}
body{
  display:flex; flex-direction:column; min-height:100vh;
  background:var(--gg-bg); color:var(--gg-text);
  font-family:'Poppins',sans-serif;
}
 
/* Header (синий как на provider-select) */
.login-topbar{
  height:56px;
  background: var(--gg-blue);
  color:#fff;
  display:flex;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.15);
}
.login-app-title{ display:flex; align-items:center; gap:10px; font-weight:700; }
.login-logo{ height:28px; width:auto; display:block; }
.login-title-text{ color:#fff; font-size:18px; }

/* Языки в синей шапке */
.login-topbar .lang-buttons{ background: rgba(255,255,255,.14); }
.login-topbar .lang-btn:hover{ background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.25); }
.login-topbar .flag-emoji{ color:#fff; }
.login-topbar .lang-btn.active{ border-color:#fff; box-shadow: 0 0 0 2px rgba(255,255,255,.2); }
.login-topbar .lang-btn.active .flag-emoji{ color:#fff; }

/* Login section (фон задаётся в login.php по $bgImageUrl) */
.login-section{
  flex:1;
  min-height:50vh;
  display:flex; justify-content:flex-end; align-items:center;
  padding:40px 16px;
}
.login-card{
  background:#fff; padding:28px; border-radius:12px;
  box-shadow:0 4px 20px rgba(0,0,0,.18);
  width:100%; max-width:400px;
}

/* Footer */
footer{
  background:rgba(255,255,255,.95);
  text-align:center; padding:10px;
  box-shadow:0 -2px 5px rgba(0,0,0,.08);
  font-size:.95rem;
}