/* ────────────────────────
   GLOBAL RESET & TYPOGRAPHY
   ──────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body.login-page {
  margin: 0;
  font: 600 8px/1 "Ubuntu", sans-serif;
  text-transform: uppercase;
  height: 100vh;
  display: grid;
  place-items: center;
  /* casino-table blur background */
  background: url("/static/images/login_bg.png") center / cover no-repeat;
  overflow: hidden;
}

/* ────────────────────────
   RESPONSIVE LOGO SCALE
   ──────────────────────── */
:root {
  /* logo height scales with viewport – 80 → 120 px */
  --logo-h: clamp(80px, 18vw, 120px);
}

/* ────────────────────────
   LOGIN BOX
   ──────────────────────── */
.login-box {
  width: clamp(260px, 90vw, 360px);
  padding: 2rem 1.5rem 3rem;      /* top | sides | bottom */
  backdrop-filter: blur(12px);
  background: rgba(32, 32, 32, 0.85);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;                   /* space between logo & form */
  color: #fff;
}

/* brand logo */
.brand-logo {
  width: var(--logo-h);
  height: auto;
  filter: drop-shadow(0 0 8px rgba(255, 221, 0, 0.616));
  margin-bottom: 0.5rem;
}

/* ────────────────────────
   FORM ELEMENTS
   ──────────────────────── */
#login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

#login-form input {
  width: 80%;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 8px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 1rem;
  transition: background 0.3s, box-shadow 0.3s;
}

#login-form input::placeholder { color: rgba(255,255,255,0.65); }

#login-form input:focus {
  background: rgba(255,255,255,0.25);
  box-shadow: 0 0 0 3px rgba(255,223,0,0.5);
  outline: none;
}

/* override Blink/Edge autofill flash */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:autofill {
  background-color: rgba(255,255,255,0.15) !important;
  -webkit-text-fill-color: #fff !important;
  background-clip: padding-box !important;   /* <<< makes background stick */
  box-shadow: 0 0 0 1000px rgba(255,255,255,0.15) inset !important;
}

/* ────────────────────────
   CTA BUTTON
   ──────────────────────── */
.btn-cta {
  width: 80%;
  padding: 0.75rem;
  border: none;
  border-radius: 8px;
  background: linear-gradient(90deg,#ffcc00 0%,#ff9900 50%,#ffcc00 100%);
  background-size: 200% 100%;
  font: 800 14px "Ubuntu", sans-serif;
  text-transform: uppercase;
  color: #121212;
  cursor: pointer;
  transition: background-position .5s, box-shadow .2s, transform .2s;
}

.btn-cta:hover {
  background-position: 100% 0;
  background: linear-gradient(90deg,#fff176 0%,#fff59d 100%);
  box-shadow: 0 0 8px rgba(255,255,255,0.6);
}

.btn-cta:active {
  transform: translateY(2px) scale(0.98);
  box-shadow: 0 2px 10px rgba(255,223,0,0.7);
}

/* ────────────────────────
   ERROR TEXT
   ──────────────────────── */
.error { color: #ff4c4c; font-size: 0.9rem; }
.hidden { display: none; }

/* ────────────────────────
   SMALL-SCREEN TWEAKS
   ──────────────────────── */
@media (max-width: 480px) {
  .login-box { width: 90%; }
  #login-form input, .btn-cta { width: 100%; }
}