/* ============================================================================
   AURORA — the sign-in card
   The supplied design, made into almost-transparent glass: only a whisper of
   white plus a blur, so the 360° campus behind it is still the thing you see.
   Two aurora ribbons sit inside the card, blurred.

   Loaded last on index.html so it owns the card. The markup it dresses is the
   one the sign-in script drives (assets/js/brand-login.js): #loginForm,
   .role-opt[data-role], #email, #password, #formErr, .btn-cosmic.
   ========================================================================== */

/* --------------------------------- the card -------------------------------- */
.login-page .login-card {
  position: relative;
  width: min(350px, calc(100vw - 36px));
  padding: 28px;
  border-radius: 26px;
  overflow: hidden;
  background-clip: padding-box !important;

  /* pure uniform glass: zero diagonal glare lines, zero split artifacts, pristine clarity */
  background: rgba(255, 255, 255, 0.12) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
  box-shadow:
    0 24px 64px rgba(12, 20, 40, 0.12),
    0 6px 18px rgba(12, 20, 40, 0.06) !important;
}

/* the form inside the card */
.login-page .login-card form {
  position: relative;
  z-index: 2;
  display: block;
}

/* Remove all glare, specular streaks, and blurred pseudo-elements */
.login-page .login-card::before,
.login-page .login-card::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: none !important;
}

/* ------------------------------ the role switch ---------------------------- */
.login-page .login-card .role-switch {
  height: 48px;
  padding: 4px;
  display: flex;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  margin-bottom: 21px;
}

.login-page .login-card .role-opt {
  flex: 1;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: rgba(24, 34, 52, 0.65);
  font-family: "Manrope", "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.25s ease;
}

.login-page .login-card .role-opt:hover {
  color: rgba(24, 34, 52, 0.90);
}

.login-page .login-card .role-opt.on {
  color: #1b2233;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 3px 10px rgba(40, 50, 80, 0.10);
}

/* --------------------------------- the fields ------------------------------ */
.login-page .login-card .field {
  display: block;
  margin-bottom: 17px;
}

.login-page .login-card .field > span {
  display: block;
  margin-bottom: 8px;
  font-family: "Manrope", "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(24, 34, 52, 0.66);
}

.login-page .login-card .field input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.10);
  outline: none;
  color: #1b2233;
  font-family: "Manrope", "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 12px;
  transition: 0.25s ease;
}

.login-page .login-card .field input::placeholder {
  color: rgba(24, 34, 52, 0.42);
}

.login-page .login-card .field input:focus {
  border-color: rgba(100, 150, 255, 0.5);
  background: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 0 0 1px rgba(100, 150, 255, 0.42),
    0 0 20px rgba(70, 150, 255, 0.16);
}

/* the password field */
.login-page .login-card .field input#password,
.login-page .login-card .field input.password {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(180, 200, 235, 0.35);
}

/* ------------------------------- the error line ---------------------------- */
.login-page .login-card .form-err {
  min-height: 15px;
  margin: -6px 0 10px;
  font-family: "Manrope", "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #9d2434;
}

/* ------------------------------- the submit button ------------------------- */
.login-page .login-card .signin-stack {
  margin: 0;
}

.login-page .login-card .btn-cosmic {
  position: relative;
  display: block;
  width: 100%;
  height: 46px;
  margin-top: 5px;
  padding: 0;
  border: none;
  border-radius: 13px;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(135deg, #d4af37 0%, #f3d36b 50%, #b8860b 100%) !important;
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.35) !important;
  transition: 0.25s ease;
}

/* the soft reflection the design puts across the button */
.login-page .login-card .btn-cosmic::before {
  content: "";
  position: absolute;
  width: 130px;
  height: 100px;
  top: -55px;
  left: 40px;
  background: rgba(255, 255, 255, 0.35);
  filter: blur(25px);
  transform: rotate(20deg);
  pointer-events: none;
}

.login-page .login-card .btn-cosmic::after {
  content: none;
}

.login-page .login-card .btn-cosmic:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(212, 175, 55, 0.45) !important;
}

.login-page .login-card .btn-cosmic:active {
  transform: translateY(0);
}

.login-page .login-card .btn-cosmic .cos-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.login-page .login-card .btn-cosmic .cos-label,
.login-page .login-card .btn-cosmic .cos-arrow {
  color: #0f1422 !important;
  font-family: 'Azonix', 'Manrope', system-ui, sans-serif !important;
  font-size: 13px;
  font-weight: 800 !important;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.login-page .login-card .btn-cosmic .cos-arrow {
  display: inline-flex;
  font-size: 16px;
}

.login-page .login-card .btn-cosmic:disabled {
  opacity: 0.55;
  transform: none;
  cursor: not-allowed;
}