/* ===============================
   Login Page Styles (login.css)
   =============================== */

/* ---- Design Tokens ---- */
:root{
  --bg-img: url('int15.jpeg');
  --font: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --text-900:#111;
  --text-800:#222;
  --text-700:#333;
  --text-600:#555;

  --brand:#ffd700;
  --brand-hover:#e6c200;

  --card-bg: rgba(255,255,255,.92);
  --border:#ccc;
  --shadow: 0 8px 25px rgba(0,0,0,.08);
  --error:#d60000;
  --link:#003366;
}

/* ---- Reset ---- */
*{ margin:0; padding:0; box-sizing:border-box; }
img{ max-width:100%; display:block; }
button, input, textarea{ font:inherit; }

/* ---- Page ---- */
body{
  font-family: var(--font);
  background: var(--bg-img) no-repeat center center fixed;
  background-size: cover;
  background-color:#f5f5f5;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ---- Header / Nav ---- */
.header-small{
  width:100%;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  position:sticky;
  top:0;
  z-index:1000;
}

.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.25rem 2rem;
  background:#fff;
}

.logo{
  font-size:1.6rem;
  font-weight:700;
  color:var(--text-800);
  letter-spacing:1px;
}

.nav-links{
  list-style:none;
  display:flex;
  gap:2rem;
}

.nav-links a{
  text-decoration:none;
  font-weight:500;
  color:var(--text-800);
  border-bottom:2px solid transparent;
  transition:all .3s ease;
}

.nav-links a:hover{
  color:var(--brand-hover);
  border-bottom-color:var(--brand);
}

.nav-links a.active{
  color:var(--text-900);
  border-bottom-color:var(--brand);
  font-weight:600;
}

/* ---- Layout: center the card below nav ---- */
.login-section{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:2rem;
}

/* ---- Login Card ---- */
.login-container{
  width:100%;
  max-width:420px;
  background:var(--card-bg);
  backdrop-filter:saturate(1.1);
  padding:2.5rem 3rem;
  border-radius:12px;
  box-shadow:var(--shadow);
  text-align:center;
  animation:fadeIn .6s ease;
}

.login-container h2{
  font-size:2rem;
  color:var(--text-800);
  margin-bottom:1.25rem;
}

/* ---- Form ---- */
.input-group{
  margin-bottom:1.25rem;
  text-align:left;
}

label{
  display:block;
  font-weight:600;
  color:var(--text-700);
  margin-bottom:.45rem;
}

input[type="email"],
input[type="password"],
input[type="text"]{
  width:100%;
  padding:.85rem 1rem;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  color:var(--text-900);
  transition:border-color .2s ease, box-shadow .2s ease;
  outline:none;
}

input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(255,215,0,.25);
}

/* Password field with eye toggle */
.password-wrap{
  position:relative;
  display:flex;
  align-items:center;
}

.password-wrap .toggle{
  position:absolute;
  right:.5rem;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:.25rem .5rem;
  line-height:1;
  font-size:1rem;
  opacity:.75;
  transition:opacity .2s ease, transform .2s ease;
}

.password-wrap .toggle:hover{
  opacity:1;
  transform:scale(1.05);
}

/* Remember me / terms style reuse */
.terms{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.95rem;
  color:var(--text-700);
  margin:.25rem 0 1rem;
}
.terms a{ color:var(--link); text-decoration:underline; }

/* ---- Submit Button ---- */
button[type="submit"],
.cta{
  width:100%;
  padding:.95rem 1.25rem;
  border:none;
  border-radius:8px;
  background:var(--brand);
  color:#000;
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
  transition:transform .25s ease, background .25s ease;
  margin-top:.25rem;
}

button[type="submit"]:hover,
.cta:hover{
  background:var(--brand-hover);
  transform:scale(1.04);
}

/* ---- Messages / Links ---- */
.error-message{
  color:var(--error);
  font-size:.95rem;
  margin-top:.6rem;
  text-align:left;
  min-height:1.2rem; /* keeps layout from jumping */
  animation:fadeIn .2s ease;
}

.switch{
  margin-top:1rem;
  color:var(--text-700);
}
.switch a{
  color:var(--link);
  text-decoration:underline;
}

/* ---- Animation ---- */
@keyframes fadeIn{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}

/* ---- Accessibility: reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ---- Responsive ---- */
@media (max-width: 768px){
  .nav{
    flex-direction:column;
    align-items:flex-start;
    gap:1rem;
  }
  .nav-links{
    flex-direction:column;
    width:100%;
    gap:.75rem;
  }
  .login-container{
    padding:2rem 1.5rem;
    max-width:96%;
  }
}