/* =========================================================
   Login & register: design layer.
   Loaded only by login.html and register.html, after auth.css.
   Changes appearance only: the markup, form fields, text and
   scripts are exactly as before. (auth.css is also used by the
   dashboard, admin login, instructor register and reset pages,
   so it is left untouched and these rules live here instead.)
   ========================================================= */

/* ---------- page canvas ---------- */
.auth-wrap{
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  background:
    radial-gradient(620px circle at 100% 0%,rgba(245,179,1,.10),transparent 60%),
    radial-gradient(560px circle at 75% 100%,rgba(200,16,46,.07),transparent 60%),
    #f4f6fb;
}

/* ---------- brand panel ---------- */
.auth-wrap .auth-side{
  isolation:isolate;
  background:linear-gradient(160deg,#04121f 0%,#0a2b4e 56%,#123a66 100%);
  padding:clamp(48px,6vw,84px) clamp(32px,5vw,76px);
}
/* The existing photo, quieter and cooler so the copy leads. */
.auth-wrap .auth-side::before{opacity:.17;filter:saturate(.55);z-index:-1;}
/* Gold and red glows in place of the single blurred disc. */
.auth-wrap .auth-side::after{
  inset:0;width:auto;height:auto;bottom:auto;right:auto;border-radius:0;
  opacity:1;filter:none;z-index:-1;pointer-events:none;
  background:
    radial-gradient(520px circle at 100% 0%,rgba(245,179,1,.20),transparent 62%),
    radial-gradient(560px circle at 0% 100%,rgba(200,16,46,.26),transparent 62%);
}
.auth-wrap .auth-side-inner{max-width:540px;}

/* Logo: the full-colour mark on a white card at its true shape,
   with the academy name set beside it. */
.auth-wrap .auth-side .logo-wrap{
  display:inline-flex;align-items:center;gap:18px;
  margin-bottom:clamp(30px,4vw,44px);
  background:none;border:0;padding:0;border-radius:0;
}
.auth-wrap .auth-side .logo-wrap img{
  /* The image carries its own white margin, so the card needs little padding. */
  box-sizing:content-box;height:clamp(84px,7vw,104px);width:auto;max-width:none;
  filter:none;background:#fff;padding:4px 8px;border-radius:18px;
  box-shadow:
    0 22px 44px -22px rgba(0,0,0,.75),
    0 0 0 1px rgba(255,255,255,.5),
    0 0 0 7px rgba(255,255,255,.07);
}
.auth-wrap .auth-side .logo-wrap span{
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.08rem;line-height:1.3;
  color:#fff;max-width:9.5em;padding-left:16px;
  border-left:2px solid rgba(245,179,1,.75);
}

.auth-wrap .auth-side h1{
  font-size:clamp(2rem,3.3vw,2.95rem);line-height:1.14;letter-spacing:-.02em;
  margin-bottom:18px;text-wrap:balance;
}
.auth-wrap .auth-side h1 em{color:var(--gold,#f5b301);}
.auth-wrap .auth-side > .auth-side-inner > p{
  color:rgba(255,255,255,.8);max-width:48ch;margin-bottom:clamp(28px,3.4vw,38px);
}

/* Features as glass cards. */
.auth-wrap .auth-features{gap:12px;}
.auth-wrap .auth-feat{
  align-items:center;gap:16px;padding:14px 18px 14px 14px;border-radius:18px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .25s ease,background-color .25s ease,border-color .25s ease;
}
.auth-wrap .auth-feat:hover{
  transform:translateX(6px);background:rgba(255,255,255,.1);border-color:rgba(245,179,1,.4);
}
.auth-wrap .auth-feat i{
  width:48px;height:48px;border-radius:14px;font-size:17px;
  background:linear-gradient(135deg,#d4142f,#9e0c24);
  box-shadow:0 12px 22px -12px rgba(200,16,46,.95);
}
.auth-wrap .auth-feat:nth-child(2) i{
  background:linear-gradient(135deg,#ffc83d,#e09a00);color:#04121f;
  box-shadow:0 12px 22px -12px rgba(245,179,1,.9);
}
.auth-wrap .auth-feat:nth-child(3) i{
  background:rgba(255,255,255,.12);color:var(--gold,#f5b301);
  box-shadow:inset 0 0 0 1px rgba(245,179,1,.45);
}
.auth-wrap .auth-feat h4{font-size:15.5px;margin-bottom:3px;}
.auth-wrap .auth-feat p{color:rgba(255,255,255,.72);font-size:13.5px;line-height:1.45;}

/* ---------- form side ---------- */
.auth-wrap .auth-main{padding:clamp(36px,5vw,64px) clamp(18px,4vw,48px);}
.auth-wrap .auth-card{
  position:relative;z-index:2;overflow:hidden;
  max-width:520px;background:#fff;border-radius:26px;
  padding:clamp(26px,3.4vw,40px);
  border:1px solid #e6eaf2;
  box-shadow:0 44px 80px -50px rgba(10,43,78,.5),0 2px 6px rgba(10,43,78,.04);
}
/* Red-to-gold strip along the top edge, as on the site's other cards. */
.auth-wrap .auth-card::before{
  content:'';position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,var(--red,#c8102e),var(--gold,#f5b301));
}

.auth-wrap .auth-card .back-home{
  padding:7px 14px 7px 12px;border-radius:999px;margin-bottom:22px;
  background:#f1f4f9;color:var(--navy,#0a2b4e);font-weight:600;font-size:12.5px;
  transition:background-color .2s ease,color .2s ease;
}
.auth-wrap .auth-card .back-home:hover{background:var(--navy,#0a2b4e);color:#fff;}

/* A decorative badge above the heading (icon only, hidden from screen readers). */
.auth-wrap .auth-card > h2{font-size:clamp(1.7rem,2.6vw,2.15rem);margin-bottom:8px;}
.auth-wrap .auth-card > h2::before{
  content:'\f2f6';content:'\f2f6' / '';
  font-family:'Font Awesome 6 Free';font-weight:900;font-size:1.05rem;
  display:grid;place-items:center;width:52px;height:52px;margin-bottom:16px;
  border-radius:16px;color:#fff;
  background:linear-gradient(135deg,#0a1432,#1a2f66);
  box-shadow:0 14px 26px -14px rgba(10,20,50,.8),0 0 0 5px rgba(245,179,1,.18);
}
.auth-wrap .auth-card:has(#registerForm) > h2::before{content:'\f234';content:'\f234' / '';}
.auth-wrap .auth-card > p.sub{margin-bottom:26px;line-height:1.6;}

/* Fields */
.auth-wrap .auth-form .field{margin-bottom:16px;}
.auth-wrap .auth-form label{font-size:11.5px;letter-spacing:.8px;color:#12285a;}
.auth-wrap .auth-form input:not([type="checkbox"]),
.auth-wrap .auth-form select{
  padding:15px 14px 15px 42px;border:1.5px solid #e2e7f0;border-radius:14px;
  background-color:#f7f9fc;
  transition:border-color .2s ease,background-color .2s ease;
}
.auth-wrap .auth-form input:not([type="checkbox"]):hover{background-color:#f1f4f9;}
/* Focus: a thin dark border, no thick ring. */
.auth-wrap .auth-form input:not([type="checkbox"]):focus,
.auth-wrap .auth-form select:focus{
  background-color:#fff;border-color:#0a1432;box-shadow:none;
}
.auth-wrap .auth-form .input-wrap > i{left:15px;color:#94a3b8;transition:color .2s ease;}
.auth-wrap .auth-form .input-wrap:focus-within > i{color:var(--red,#c8102e);}
/* Leave room for the show-password button so text never runs under it. */
.auth-wrap .auth-form .input-wrap:has(.toggle-pw) input{padding-right:42px;}
.auth-wrap .auth-form .toggle-pw{
  right:6px;width:32px;height:32px;border-radius:10px;
  display:grid;place-items:center;
  transition:background-color .2s ease,color .2s ease;
}
.auth-wrap .auth-form .toggle-pw:hover{background:#eef1f7;}

.auth-wrap .auth-form .options{margin:4px 0 22px;}
.auth-wrap .auth-form .remember{color:#4b5563;font-weight:500;}

/* Primary button */
.auth-wrap .auth-form .submit-btn{
  padding:16px;border-radius:14px;font-size:15.5px;font-weight:700;letter-spacing:.3px;
  background:linear-gradient(135deg,#d4142f,#9e0c24);
  box-shadow:0 18px 32px -16px rgba(200,16,46,.85);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.auth-wrap .auth-form .submit-btn:hover{
  background:linear-gradient(135deg,#e11e3c,#a50d22);transform:translateY(-2px);
  box-shadow:0 22px 36px -16px rgba(200,16,46,.9);
}
.auth-wrap .auth-form .submit-btn i{transition:transform .25s ease;}
.auth-wrap .auth-form .submit-btn:hover i{transform:translateX(4px);}
.auth-wrap .auth-form .submit-btn:disabled{opacity:.8;cursor:wait;transform:none;}

/* Divider and social buttons */
.auth-wrap .auth-divider{font-size:11px;letter-spacing:1.4px;font-weight:600;color:#94a3b8;margin:26px 0 18px;}
.auth-wrap .auth-social{gap:12px;}
.auth-wrap .auth-social button{
  padding:13px;border-radius:14px;border:1.5px solid #e2e7f0;font-weight:600;color:#12285a;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.auth-wrap .auth-social button:hover{
  border-color:#0a1432;color:#0a1432;transform:translateY(-2px);
  box-shadow:0 12px 22px -16px rgba(10,20,50,.6);
}

/* Messages from the form script keep their colours; only the shape is refined. */
.auth-wrap .auth-alert{border-radius:12px;border-left-width:4px;font-weight:500;line-height:1.5;}

/* ---------- forgot-password popup (login page) ---------- */
.fp-overlay.show{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.fp-overlay .fp-modal{border-radius:22px;overflow:hidden;padding-top:38px;}
.fp-overlay .fp-modal::before{
  content:'';position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,#c8102e,#f5b301);
}
.fp-overlay .fp-field input{border-width:1.5px;border-radius:12px;background:#f7f9fc;}
.fp-overlay .fp-field input:focus{border-color:#0a1432;background:#fff;}
.fp-overlay .fp-btn{border-radius:12px;padding:14px;box-shadow:0 14px 26px -14px rgba(200,16,46,.8);}

/* ---------- tablet: the brand panel becomes a band above the form ---------- */
@media (max-width:1024px){
  /* The band keeps its own height; any spare page height goes to the form side. */
  .auth-wrap{grid-template-columns:1fr;grid-template-rows:auto 1fr;}
  .auth-wrap .auth-side{display:flex;padding:44px clamp(20px,5vw,48px) 76px;}
  .auth-wrap .auth-main{align-items:flex-start;}
  .auth-wrap .auth-side-inner{max-width:760px;width:100%;margin:0 auto;}
  .auth-wrap .auth-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
  .auth-wrap .auth-feat{flex-direction:column;align-items:flex-start;gap:12px;}
  .auth-wrap .auth-feat:hover{transform:none;}
  /* The card rises over the foot of the band. */
  .auth-wrap .auth-main{padding:0 clamp(16px,4vw,40px) 56px;}
  .auth-wrap .auth-card{margin-top:-40px;max-width:560px;}
}

/* ---------- phone ---------- */
@media (max-width:640px){
  .auth-wrap .auth-side{padding:28px 18px 64px;}
  .auth-wrap .auth-side .logo-wrap{gap:12px;margin-bottom:20px;}
  .auth-wrap .auth-side .logo-wrap img{height:68px;padding:3px 6px;border-radius:14px;}
  .auth-wrap .auth-side .logo-wrap span{font-size:.92rem;padding-left:12px;}
  .auth-wrap .auth-side h1{font-size:clamp(1.5rem,6.6vw,1.95rem);margin-bottom:16px;}
  /* The panel was hidden entirely on phones before; now the logo, heading
     and features show, and only the longer paragraph stays tucked away
     so the form is still close to the top. */
  .auth-wrap .auth-side > .auth-side-inner > p{display:none;}
  .auth-wrap .auth-features{gap:8px;}
  .auth-wrap .auth-feat{padding:12px 10px;gap:8px;border-radius:14px;}
  .auth-wrap .auth-feat i{width:36px;height:36px;border-radius:11px;font-size:14px;}
  .auth-wrap .auth-feat h4{font-size:12.5px;line-height:1.3;margin:0;}
  .auth-wrap .auth-feat p{display:none;}
  .auth-wrap .auth-main{padding:0 12px 44px;}
  .auth-wrap .auth-card{margin-top:-36px;border-radius:22px;padding:24px 18px;}
  .auth-wrap .auth-card > h2::before{width:46px;height:46px;border-radius:14px;margin-bottom:14px;}
}
@media (prefers-reduced-motion:reduce){
  .auth-wrap .auth-feat,.auth-wrap .auth-form .submit-btn,.auth-wrap .auth-social button,
  .auth-wrap .auth-form .submit-btn i{transition:none;}
  .auth-wrap .auth-feat:hover,.auth-wrap .auth-form .submit-btn:hover,
  .auth-wrap .auth-social button:hover{transform:none;}
}