/* =========================================================
   Login page visual layer (Gym-style diagonal hero)
   Visual only. Does NOT change JS or logic.
   Apply to body.login-page only.
   ========================================================= */

:root{
  --bb-orange:#ff6a00;
  --bb-orange-2:#ff8a3d;
  --bb-green:#2cab63;
  --bb-ink:#ffffff;
  --bb-muted:rgba(255,255,255,0.72);
  --bb-border:rgba(255,255,255,0.16);
  --bb-shadow: 0 22px 60px rgba(3,6,16,0.65);
  --bb-shadow-soft: 0 14px 38px rgba(3,6,16,0.48);
  --radius:22px;

  /* Optional: put your own photo at assets/login_hero.jpg
     then change this to: url("./login_hero.jpg") */
  --hero-photo:"./login_hero.jpg";
}

body.login-page{
  min-height:100vh;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2.2rem 1.5rem;
  font-family:"Spline Sans","Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  color:var(--bb-ink);

  background:
    radial-gradient(1200px 700px at 10% 0%, rgba(255,106,0,0.22), transparent 62%),
    radial-gradient(900px 700px at 105% 8%, rgba(44,171,99,0.22), transparent 58%),
    radial-gradient(700px 520px at 20% 120%, rgba(124,58,237,0.14), transparent 60%),
    linear-gradient(135deg, #050714, #0a0d1d 55%, #05030c 100%);
  background-attachment: fixed;
}

.trainer-login{width:100%;max-width:1180px}

.hero{
  position:relative;
  width:100%;
  min-height:620px;
  border-radius:var(--radius);
  border:1px solid var(--bb-border);
  overflow:hidden;
  box-shadow:var(--bb-shadow);

  /* Right-side “photo” area (optional) */
  background:
    var(--hero-photo),
    radial-gradient(900px 520px at 78% 28%, rgba(255,255,255,0.10), transparent 62%),
    radial-gradient(1100px 820px at 85% 60%, rgba(255,138,61,0.16), transparent 65%),
    linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  background-size: cover;
  background-position: right center;
}

/* Diagonal orange panel like the reference image */
.hero::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: linear-gradient(135deg, var(--bb-orange), var(--bb-orange-2));
  clip-path: polygon(0 0, 72% 0, 44% 100%, 0 100%);
  opacity:0.98;
  z-index:0;
}

/* Subtle diagonal overlays on the right */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10), transparent 40%),
    linear-gradient(45deg, rgba(255,255,255,0.06), transparent 45%),
    linear-gradient(135deg, transparent 58%, rgba(255,255,255,0.10) 59%, transparent 70%);
  mix-blend-mode: overlay;
  opacity:0.55;
  pointer-events:none;
  z-index:0;
}

/* Top nav */
.hero-nav{
  position:absolute;
  top:0;left:0;right:0;
  padding:1.1rem 1.3rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  z-index:3;
}

/* Brand with a dark angled badge (like the black corner in the reference) */
.brandmark{
  display:flex;
  align-items:center;
  gap:0.85rem;
  text-decoration:none;
  color:#fff;
  position:relative;
  padding:0.45rem 0.75rem 0.45rem 0.55rem;
  border-radius:16px;
}
.brandmark::before{
  content:"";
  position:absolute;
  left:-22px;
  top:-22px;
  width:120px;height:120px;
  background:rgba(0,0,0,0.72);
  transform:rotate(45deg);
  border-radius:16px;
  z-index:-1;
  box-shadow:0 18px 44px rgba(0,0,0,0.45);
}
.brandmark__logo{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  font-weight:800;letter-spacing:0.02em;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.55), transparent 55%),
    linear-gradient(145deg, var(--bb-orange), var(--bb-green));
  box-shadow:0 14px 26px rgba(0,0,0,0.45);
}
.brandmark__logo img{
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
}
.brandmark__logo{
  background: rgba(0,0,0,0.28); /* optional */
}


.brandmark__text{display:flex;flex-direction:column;line-height:1.05}
.brandmark__name{font-family:"Space Grotesk","Spline Sans",sans-serif;font-weight:700;font-size:0.98rem}
.brandmark__tag{font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.70);margin-top:0.15rem}

.hero-menu{
  display:flex;align-items:center;gap:18px;
  font-family:"Space Grotesk","Spline Sans",sans-serif;
  font-weight:600;
}
.hero-menu a{
  color:rgba(255,255,255,0.88);
  text-decoration:none;
  font-size:0.82rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
}
.hero-menu a:hover{color:#fff;text-decoration:underline}
.hero-menu__pill{
  padding:0.6rem 0.85rem;
  border:1px solid rgba(255,255,255,0.28);
  border-radius:999px;
  background:rgba(0,0,0,0.22);
  box-shadow:0 12px 28px rgba(0,0,0,0.32);
  text-decoration:none !important;
}
.hero-menu__pill:hover{background:rgba(0,0,0,0.30)}

/* Orange panel content */
.panel{
  position:relative;
  z-index:2;
  padding:6.2rem 3.2rem 2.6rem;
  max-width:560px;
}
.panel__title{
  margin:0;
  font-family:"Space Grotesk","Spline Sans",sans-serif;
  font-size:3.4rem;
  line-height:1.03;
  letter-spacing:-0.02em;
  text-transform:uppercase;
}
.panel__subtitle{
  margin:1.05rem 0 1.55rem;
  color:rgba(255,255,255,0.86);
  line-height:1.6;
  font-size:0.98rem;
  max-width:46ch;
}

/* Form */
.panel__form{
  margin-top:0.5rem;
  display:grid;
  gap:0.95rem;
  max-width:420px;
}
.field{display:grid;gap:0.4rem}
.field label{
  font-size:0.76rem;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.86);
}

.input{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.24);
  background:rgba(0,0,0,0.18);
  color:#fff;
  padding:0.9rem 0.95rem;
  outline:none;
  transition:border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.input::placeholder{color:rgba(255,255,255,0.70)}
.input:focus{
  border-color:rgba(255,255,255,0.52);
  box-shadow:0 0 0 2px rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.22);
}

.login-error{
  min-height:1.1rem;
  font-size:0.84rem;
  color:#fff;
  background:rgba(0,0,0,0.18);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:12px;
  padding:0.55rem 0.75rem;
}
.login-error:empty{
  background:transparent;
  border-color:transparent;
  padding:0;
  min-height:0.1rem;
}

.btn-primary{
  border:none;
  border-radius:999px;
  padding:0.95rem 1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.6rem;
  cursor:pointer;

  font-family:"Space Grotesk","Spline Sans",sans-serif;
  font-size:0.84rem;
  font-weight:800;
  letter-spacing:0.18em;
  text-transform:uppercase;

  color:#fff;
  background:rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.34);
  box-shadow:0 16px 36px rgba(0,0,0,0.35);
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.btn-primary:hover{
  background:rgba(0,0,0,0.30);
  transform:translateY(-1px);
  box-shadow:0 22px 44px rgba(0,0,0,0.40);
}
.btn-primary:active{
  transform:translateY(0);
  box-shadow:0 14px 32px rgba(0,0,0,0.35);
}
.btn-primary:disabled{
  opacity:.7;
  cursor:not-allowed;
  transform:none;
}
.btn-primary__orb{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,0.95);
  box-shadow:0 0 0 6px rgba(255,255,255,0.14);
}

.panel__foot{
  margin-top:0.4rem;
  font-size:0.9rem;
  color:rgba(255,255,255,0.86);
}
.panel__foot a{
  color:#fff;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Right side cards */
.side{
  position:absolute;
  top:88px;
  right:28px;
  width:min(420px, 40%);
  display:grid;
  gap:14px;
  z-index:2;
}
.side-card{
  padding:1.25rem 1.2rem;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(10,12,24,0.58);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow:var(--bb-shadow-soft);
}
.side-card small{
  display:block;
  color:rgba(255,255,255,0.70);
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:0.68rem;
  margin-bottom:0.55rem;
}
.side-card h2{
  margin:0 0 0.55rem;
  font-family:"Space Grotesk","Spline Sans",sans-serif;
  font-size:1.25rem;
  line-height:1.18;
}
.side-card ul{
  margin:0;
  padding-left:1.05rem;
  color:rgba(255,255,255,0.78);
  display:grid;
  gap:0.4rem;
}
.side-card li strong{color:#fff}
.side-card p{
  margin:0;
  color:rgba(255,255,255,0.76);
  line-height:1.6;
}
.side-card--highlight{
  border-color:rgba(255,138,61,0.34);
  background:linear-gradient(160deg, rgba(255,138,61,0.20), rgba(44,171,99,0.12));
}
.side-cta{
  margin-top:0.9rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.75rem 1rem;
  border-radius:999px;
  text-decoration:none;
  color:#fff;
  font-family:"Space Grotesk","Spline Sans",sans-serif;
  font-weight:800;
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.16em;
  border:1px solid rgba(255,255,255,0.34);
  background:rgba(0,0,0,0.18);
  box-shadow:0 14px 34px rgba(0,0,0,0.32);
}
.side-cta:hover{background:rgba(0,0,0,0.26)}
.side-note{
  margin-top:0.6rem;
  color:rgba(255,255,255,0.74);
  font-size:0.82rem;
}

/* Responsive */
@media (max-width: 980px){
  .hero{min-height:740px}
  .side{
    position:relative;
    top:auto; right:auto;
    width:100%;
    max-width:560px;
    margin:0 3.2rem 2.2rem auto;
  }
}
@media (max-width: 700px){
  body.login-page{padding:1.4rem 1rem}
  .hero-nav{padding:0.95rem 0.95rem}
  .panel{padding:5.4rem 1.25rem 1.8rem; max-width:none}
  .panel__title{font-size:2.6rem}
  .side{margin:0 1.25rem 1.2rem}
  .brandmark::before{width:95px;height:95px;left:-18px;top:-18px}
}