/* Hide login modal and admin modal by default */
#login-box {
  display: none;
}
#adminLoginModal {
  display: none;
}

/* School display styles */
.school-display {
  display: none;
  font-weight: 700;
  margin-top: 8px;
}

/* Admin forgot password link styles */
.admin-forgot {
  margin-top: 15px;
}
/* Modal overlay hidden by default */
#loginModal {
  display: none;
}

/* Choice screen title and description styles */
.choice-title {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.choice-desc {
  margin: 6px 0 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.choice-btn,
.btn-primary,
.btn-secondary {
  -webkit-tap-highlight-color: transparent;
}

button,
.btn,
.btn-primary,
.btn-secondary,
.choice-btn {
  color: #111;
}

.choice-btn:hover,
.choice-btn:active,
.btn-primary:hover,
.btn-primary:active,
.btn-secondary:hover,
.btn-secondary:active {
  filter: none;
}

.choice-btn:focus,
.choice-btn:focus-visible,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-secondary:focus,
.btn-secondary:focus-visible {
  outline: none;
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.14);
}

select:disabled,
select.school-locked {
  background-color: #e5e7eb;
  color: #475569;
  border-color: #cbd5e1;
  cursor: not-allowed;
  opacity: 1;
}

.login-loading-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 15, 33, 0.45);
  z-index: 2000;
}

.login-loading-overlay.active {
  display: flex;
}

.login-loading-card {
  min-width: 250px;
  padding: 22px 26px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(2, 6, 23, 0.25);
  text-align: center;
}

.login-loading-spinner {
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: 4px solid #d1d5db;
  border-top-color: #16a34a;
  animation: login-spin 0.85s linear infinite;
}

#loginLoadingText {
  margin: 0;
  font-weight: 900;
  letter-spacing: 0.08em;
  font-size: 16px;
  color: #0f172a;
}

.login-loading-dots {
  display: inline-flex;
  gap: 6px;
  margin-top: 8px;
}

.login-loading-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  opacity: 0.25;
  animation: login-dot 1s ease-in-out infinite;
}

.login-loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.login-loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes login-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes login-dot {
  0%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px);
  }
}
/* Styles moved from index.html for CSP compliance */
:root{
  --accent:#2563eb;
  --muted:#6b7280;
  --glass: rgba(255,255,255,0.85);
}

html,body{height:100%;}
body {
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  background-image: url('rm285-mynt-51.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color: #0f172a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position: relative;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.45) 100%);
  z-index:0;
  pointer-events:none;
}

.page{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:18px;padding:48px 16px;}

.site-logo{
  width:480px;
  max-width:90vw;
  height:auto;
  margin:10px 0 0 0;
  display:block;
}

.hero{
  width:100%;
  max-width:860px;
  background: rgba(219,234,254,0.92);
  border-radius:24px;
  color: #0f172a;
  padding:34px 28px;
  box-shadow:0 20px 52px rgba(2,6,23,0.22);
  border: 1px solid rgba(15,23,42,0.08);
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:center;
  text-align:center;
}

.hero .copy{max-width:720px}
.hero h2{margin:0 0 10px 0;font-size:40px;letter-spacing:-0.02em}
.hero p{margin:0;color:rgba(15,23,42,0.78);line-height:1.5;font-size:18px}
.u-section-1 .u-sheet-1 {
  min-height: 496px;
}

.u-section-1 .u-custom-html-1 {
  margin-bottom: 0;
  margin-top: 77px;
}

.u-section-1 .u-form-1 {
  height: 329px;
  width: 570px;
  margin: -77px auto 60px;
}

.u-section-1 .u-form-group-1 {
  margin-left: 0;
}

@media (max-width: 1199px) {
  .u-section-1 .u-custom-html-1 {
    margin-top: 184px;
  }
}

@media (max-width: 767px) {
  .u-section-1 .u-form-1 {
    width: 540px;
  }
}

@media (max-width: 575px) {
  .u-section-1 .u-form-1 {
    width: 340px;
  }
}