/* Page styles (public/auth.php). */
body{
  font-family:var(--font-body);
  background:var(--dark);
  color:var(--white);
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 520px;
  max-width:1400px;
  margin:0 auto;
  width:100%;
}

/* ── LEFT PANEL ── */
.auth-left{
  background:none;
  display:flex;flex-direction:column;justify-content:flex-start;gap:32px;
  padding:16px 48px 48px;position:relative;overflow:hidden;
}
.auth-left::after{
  content:'';position:fixed;top:0;left:0;
  width:100vw;height:100vh;z-index:0;
  background:
    linear-gradient(135deg,rgba(var(--dark-rgb), 0.7),rgba(var(--dark-rgb), 0.9)),
    url('/assets/images/background.png') center top/cover no-repeat;
  pointer-events:none;
}
.auth-left::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(circle at 30% 50%,rgba(var(--primary-rgb), 0.08),transparent 70%);
}
.left-logo{position:relative;z-index:2;}
.left-content{position:relative;z-index:2;}
.left-content h1{
  font-family:var(--font-display);
  font-size:clamp(3rem,5vw,5.5rem);
  line-height:0.9;letter-spacing:3px;
  margin-bottom:24px;
}
.left-content h1 em{color:var(--primary);font-style:normal;}
.left-content p{
  font-size:1.1rem;color:rgba(var(--white-rgb), 0.7);
  line-height:1.7;max-width:440px;margin-bottom:40px;
  font-weight:300;
}
.left-features{display:flex;flex-direction:column;gap:16px;}
.left-feature{
  display:flex;align-items:center;gap:14px;
  font-size:0.9rem;font-weight:500;color:rgba(var(--white-rgb), 0.75);
}
.left-feature i{color:var(--primary);font-size:1rem;width:20px;text-align:center;}
.left-bottom{
  position:relative;z-index:2;
  font-size:0.7rem;color:var(--text-muted);letter-spacing:1px;
  margin-top:auto;
}

/* ── RIGHT PANEL ── */
.auth-right{
  background:var(--dark2);
  border-left:1px solid var(--border);
  display:flex;flex-direction:column;justify-content:center;
  padding:48px 44px;
  overflow-y:auto;
  position:relative;z-index:2;
}
/* The language menu itself is views/components/language-menu.php (its look: css/components/language-menu.css); this only places it */
.auth-lang{position:absolute;top:16px;right:20px;z-index:3;}

/* Tabs */
.tab-bar{
  display:flex;background:rgba(var(--white-rgb), 0.04);
  border:1px solid var(--border);
  border-radius:10px;padding:4px;gap:4px;
  margin-bottom:28px;
}
.tab-btn{
  flex:1;padding:11px;border:none;background:transparent;
  color:rgba(var(--white-rgb), 0.5);font-size:0.85rem;font-weight:700;
  cursor:pointer;border-radius:7px;transition:all 0.3s;
  font-family:var(--font-body);
}
.tab-btn.active{background:var(--primary);color:var(--on-brand);}

/* Role selector */
.role-cards{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;}
.role-msg{font-size:0.8rem;}
.role-msg:empty{display:none;}
.role-card{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 16px;border:1.5px solid var(--border);
  border-radius:10px;background:rgba(var(--white-rgb), 0.03);
  cursor:pointer;transition:border-color 0.2s,background 0.2s;
}
.role-card:hover{background:rgba(var(--white-rgb), 0.06);}
.role-card.selected[data-role="agent"]{border-color:var(--primary);background:rgba(var(--primary-rgb), 0.07);}
.role-card.selected[data-role="player"]{border-color:var(--primary);background:rgba(var(--primary-rgb), 0.07);}
.role-card.selected[data-role="scout"]{border-color:var(--accent);background:rgba(var(--accent-rgb), 0.07);}
.role-card-icon{font-size:1.1rem;margin-top:2px;flex-shrink:0;}
.role-card-title{font-size:0.88rem;font-weight:700;color:var(--white);margin-bottom:3px;}
.role-card-desc{font-size:0.76rem;color:rgba(var(--white-rgb), 0.5);line-height:1.45;}

.forgot-link{
  display:block;text-align:right;font-size:0.72rem;
  color:var(--primary);text-decoration:none;margin-bottom:18px;
}
.forgot-link:hover{text-decoration:underline;}

@media(max-width:900px){
  body{grid-template-columns:1fr;}
  .auth-left{display:none;}
  .auth-left::after{display:none;}
  .auth-right{padding:40px 28px;}
}

/* ── Page elements ── */
.auth-left-logo { height:var(--logo-standalone); width:auto; border-radius:10px; }
.role-ico-scout { color:var(--accent); }
@media (pointer: coarse) {
  .tab-btn { min-height:var(--tap); }
  .forgot-link { display:block; min-height:var(--tap); line-height:var(--tap); margin-bottom:6px; }
}