/* ===============================
   Full-viewport, no scroll
=============================== */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg-color);
  font-family: 'Outfit', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes fadeInUp { from{opacity:0;transform:translateY(50px)} to{opacity:1;transform:translateY(0)} }
@keyframes wobble {
  0%,100%{transform:translateX(0)} 15%{transform:translateX(-8px)} 30%{transform:translateX(6px)}
  45%{transform:translateX(-5px)} 60%{transform:translateX(4px)} 75%{transform:translateX(-3px)} 90%{transform:translateX(2px)}
}
.input-error { border:1px solid red !important; animation:wobble .4s ease }

/* ===============================
   Exact 50/50 split
=============================== */
.auth-wrapper{
  display:grid;
  grid-template-columns: 1fr 1fr; /* 50% | 50% */
  width:100vw;
  height:100vh;
}

/* Left: full-bleed image, flush on all sides */
.auth-left{
  position:relative;
  width:100%; height:100%;
  overflow:hidden;
}
.auth-left::before{
  content:"";
  position:absolute; inset:0;
  background:url('../images/loginimg.png') center/cover no-repeat;
}

/* Right: form panel */
.auth-right{
  position:relative;
  width:100%; height:100%;
  background:#0b0f14;
  display:flex; align-items:center; justify-content:center;
  padding:0 32px;
  box-shadow:-1px 0 0 rgba(255,255,255,.06) inset;
}

/* Close icon */
.exit-cross{
  position:absolute; top:22px; right:86px;
  color:var(--accent-col); font-size:1.25rem; text-decoration:none; z-index:3;
  transition:color .15s ease;
}
.exit-cross:hover{ color:var(--accent-col-darker) }

.exit-cross--big{
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  backdrop-filter: blur(2px);
  z-index: 10;
}

.exit-cross--big i{
  font-size: 22px;          /* larger icon */
  line-height: 1;
}

.exit-cross--big:hover{
  background: rgba(255,255,255,0.12);
}

/* Centered brand + heading */
.login-container{
  width:100%;
  max-width: 360px;                 /* narrower form to your spec */
  animation:fadeInUp .45s ease-out both;
  text-align:center;
  box-sizing: border-box;
}

.brand-stack{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  margin-bottom:10px;
}
.brand-stack img{
  height:60px;                      /* slightly bigger logo */
  width:auto; display:block;
}

/* Two-line heading */
.form-heading{
  margin:0 0 18px 0;
  color:var(--white);
  font-weight:600;
  font-size:1.65rem;
  letter-spacing:.2px;
  line-height:1.15;
}

/* Helper note */
.subnote{ margin:4px 0 10px 0; font-size:.92rem; color:#9aa3ae }

/* Inputs: border-only, grey placeholder; EXACT width alignment */
.form-group{ margin-bottom:16px; text-align:left }
.form-group .form-title{ display:none } /* labels kept in DOM, hidden visually */

.input,
.btn.primary{
  width: 100%;
  border-radius: 10px;
  box-sizing: border-box;           /* ensure same horizontal box model as inputs */
}

.input{
  padding:12px 12px;
  background:transparent;           /* no fill */
  border:1px solid rgba(255,255,255,.18);
  color:#f0f0f0; font-size:1rem;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.input::placeholder{ color:#9aa3ae }
.input:focus{
  outline:none;
  border-color:var(--accent-col);
  box-shadow:0 0 0 3px rgba(0,209,178,.15);
}

/* Utility row: remember (left) + forgot (right), centered vertically */
.utility-row{
  display:flex; align-items:center; justify-content:space-between;
  margin:6px 0 10px 0;
  gap: 12px;
}

/* Custom-styled checkbox */
.form-group.remember-me{
  display:flex; align-items:center; gap:.6rem; margin:0; padding:0;
  color:#d7d7d7; font-size:.9rem;
}

/* Links (forgot + sign up) share the accent style */
.link-accent{
  color: var(--accent-col);
  text-decoration:none;
  font-weight:500;
  cursor:pointer;
  transition:opacity .15s ease, color .15s ease;
  font-family: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
}
.link-accent:hover{ opacity:.8 }

/* Button wrapper — force exact edge alignment with inputs */
.button-group{ display:flex; flex-direction:column; gap:12px; margin-top:6px }
.btn-wrapper{
  display:block;
  width:100%;
  padding:0;                         /* remove any wrapper padding that could misalign */
  border-radius:10px;                /* match input radius */
}

/* Primary button -> accent background, no border, taller, lighter weight */
.btn.primary{
  background: var(--accent-col) !important;
  color:#0b0f14 !important;          /* dark text on accent */
  border:none !important;
  font-size:1.04rem;                 /* slightly bigger font */
  font-weight:500;                   /* lighter than 800 */
  padding: 14px 16px;                /* taller button */
  padding-bottom: 22px;
  padding-top: 22px;
}

/* Toggle block (“Don’t have an account?”) — aligned and font applied */
.toggle-block{
  margin-top:14px;
  font-size:.95rem;
  color:#aeb6c0;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
}
.toggle-block .toggle-btn{
  background:none; border:none; padding:0;
  font: inherit;                    /* IBM Plex Sans */
  color: var(--accent-col); font-weight:500; cursor:pointer;
}
.toggle-block .toggle-btn:hover{ opacity:.8 }

/* Flash messages */
.flash-container{ margin-bottom:1rem }
.flash{ padding:12px 16px; margin:8px 0; border-radius:10px; font-weight:600; font-size:.95rem; border:1px solid transparent }
.flash.success{ background-color:rgba(46,204,113,.1); border-color:#2ecc71; color:#2ecc71 }
.flash.error  { background-color:rgba(231,76,60,.1); border-color:#e74c3c; color:#e74c3c }

/* Password strength (unchanged) */
.password-strength-wrapper{ margin: 8px 0 16px 0; }
.password-strength-text-with-icon{ display:flex; align-items:center; gap:.4rem; font-size:.85rem; margin-bottom:6px; color:#b7bdc5 }
.info-icon-container{ position:relative; display:inline-block; cursor:help; color:#9aa3ae }
.info-icon-container .tooltip-text{
  visibility:hidden; opacity:0; width:250px; background:#1e232b; color:#fff; text-align:left;
  padding:8px 10px; border-radius:6px; position:absolute; top:130%; left:50%; transform:translateX(-50%);
  font-size:.75rem; z-index:100; pointer-events:none; transition:opacity .2s; line-height:1.4; border:1px solid rgba(255,255,255,.08)
}
.info-icon-container:hover .tooltip-text{ visibility:visible; opacity:1 }
.strength-bar-bg{ width:100%; height:10px; background:#1c222a; border-radius:6px; overflow:hidden }
.strength-bar-fill{ height:100%; width:0%; background:red; border-radius:6px; transition:width .3s ease, background-color .3s ease }

/* Multi-form visibility (original) */
.form-container{ display:none; }
.form-container.active{ display:block }

/* A11y helper (labels hidden but present) */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* rounds the visible image; the ::before bg will follow the radius */
.auth-left { 
  border-radius: 20px;   /* adjust to taste */
  overflow: hidden;      /* important so the image clips to the radius */
}
.auth-left::before { 
  border-radius: inherit; 
}

/* =======================================
   NEW: Gentle fade when toggling forms
   (keeps your existing show/hide behavior)
=========================================*/
@keyframes fadeSwap { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }
.form-container.active { animation: fadeSwap .25s ease-out both; }

/* =======================================
   Signup terms checkbox: match style
   + increase top margin (more gap)
=========================================*/
.form-group.terms{
  display:flex; align-items:flex-start; gap:.6rem;
  margin: 12px 0 16px 0;               /* was 6px — slightly larger gap now */
  color:#d7d7d7; font-size:.9rem;
}
.form-group.terms a{ color: var(--accent-col); text-decoration: none; }
.form-group.terms a:hover{ opacity:.8 }

/* ============================================
   RESPONSIVE LAYOUT FOR AUTH PAGE
   (append to the end of login.css)
   ============================================ */

/* Use modern viewport units so mobile address bar doesn't clip content */
:root {
  --vh: 100svh; /* fallback handled by browser */
}

/* Base: ensure the grid respects dynamic viewport height */
html, body {
  height: auto;                /* allow content to grow when stacked */
  min-height: var(--vh);
}

/* Wrapper uses dvh/svh for better mobile behavior */
.auth-wrapper {
  height: 100dvh;              /* dynamic on mobile */
  min-height: 100svh;          /* safe viewport height */
}
/* ---------- Tablets (≤ 900px) ---------- */
@media (max-width: 1800px) {
  .auth-wrapper {
    grid-template-columns: 1fr;  /* stack vertically */
    height: auto;                 /* let it flow */
    min-height: 100svh;
  }

  /* Show the image as a banner on top */
  .auth-left {
    height: 38vh;                 /* hero/banner height */
    max-height: 420px;
    border-radius: 0;             /* full-bleed on small screens */
  }
  .auth-left::before {
    border-radius: 0;
  }

  .auth-right {
    min-height: calc(100svh - 38vh);
    padding: clamp(20px, 5vw, 36px);
    box-shadow: 0 -1px 0 rgba(255,255,255,.06) inset; /* divider between image and form */
  }

  /* Keep close button inside visible area */
  .exit-cross {
    top: 16px;
    right: 16px;
  }

  /* Relax the "no-scroll" rule so stacked layout can scroll if needed */
  html, body {
    overflow: auto;
  }
}

/* ---------- Phones (≤ 600px) ---------- */
@media (max-width: 600px) {
  /* More vertical space for form; image becomes shorter banner */
  .auth-left {
    height: 30vh;
    max-height: 320px;
  }
  .auth-right {
    min-height: calc(100svh - 30vh);
    padding: clamp(16px, 5vw, 28px);
    padding-top: calc(env(safe-area-inset-top) + 20px);
    padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
  }

  .brand-stack img { height: 52px; }
  .form-heading { font-size: 1.4rem; margin-bottom: 14px; }
  .input { font-size: 1rem; padding: 12px; }
  .btn.primary { font-size: 1rem; padding: 16px; }

  .utility-row { gap: 10px; }
  .form-group.remember-me { font-size: .95rem; }
  .toggle-block { font-size: .95rem; }

  /* Make flash messages compact */
  .flash { font-size: .9rem; padding: 10px 12px; }
}

/* ---------- Small Phones (≤ 420px) ---------- */
@media (max-width: 420px) {
  .auth-left { height: 26vh; }
  .auth-right { min-height: calc(100svh - 26vh); }
  .login-container { max-width: 100%; }
  .form-heading { font-size: 1.25rem; }
  .exit-cross--big { width: 40px; height: 40px; }
  .exit-cross--big i { font-size: 18px; }
}

@media (max-width: 360px) {
  .auth-left { display: none; }
  .auth-right { min-height: 100svh; }
}

.auth-wrapper {
  width: 100%;                    /* was 100vw — causes horizontal drift on mobile */
}

/* 2) Hard-center the form column content */
.auth-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .login-container {
  margin-inline: auto;
  width: min(520px, 92vw);
  max-width: 100%;
} */

/* 4) Inputs & buttons occupy container width, no overflow */
.login-container .input,
.login-container .btn.primary,
.login-container .btn-wrapper {
  width: 100%;
  max-width: 100%;
}

/* 5) Global box-sizing so padding/borders don’t push width */
*, *::before, *::after { box-sizing: border-box; }

/* 6) On stacked layouts (≤900px), prevent any sneaky horizontal scroll */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
  .auth-right { padding-inline: clamp(16px, 5vw, 28px); }
}

html {
  font-size: clamp(14px, 1.1vw + 0.4rem, 16px);
}

/* Tablet adjustments */
@media (max-width: 900px) {
  .form-heading { font-size: 1.45rem; }
  .brand-stack img { height: 56px; }
  .input { font-size: 1rem; padding: 12px; }
  .btn.primary { font-size: 1rem; padding: 16px; }
  .toggle-block { font-size: .95rem; }
  .utility-row { gap: 10px; }
  .flash { font-size: .95rem; }
}

/* Small phones */
@media (max-width: 600px) {
  .form-heading { font-size: 1.3rem; margin-bottom: 12px; }
  .brand-stack img { height: 50px; }
  .input { font-size: .98rem; padding: 12px; }
  .btn.primary { font-size: .98rem; padding: 14px; }
  .toggle-block { font-size: .93rem; }
  .flash { font-size: .9rem; padding: 10px 12px; }
}

/* Tiny phones */
@media (max-width: 380px) {
  .form-heading { font-size: 1.2rem; }
  .brand-stack img { height: 46px; }
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.pw-wrap { position: relative; }
.pw-wrap .pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 6px;
  line-height: 1;
  opacity: 0.8;
  color: white
}
.pw-wrap .pw-toggle[aria-pressed="true"] { opacity: 1; }

/* Social login container */
.social-login {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.social-login__label {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-bottom: 0.75rem;
}

/* Stack vertically */
.social-login__buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

/* Base social button */
.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;                    /* spacing between icon & text */
  width: 100%;
  padding: 20px 16px;
  border-radius: 10px;
  font-size: 1.04rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--border-subtle);
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  height: 44px;
}

/* Google button */
.btn-google {
  background: var(--card-bg) !important;
  color: var(--white) !important;
}

/* Google logo image */
.btn-google img {
  width: 22px;                   /* correctly sized icon */
  height: 22px;
  display: block;                /* removes inline spacing issues */
}

/* Hover outline */
.btn-google:hover {
  border-color: var(--accent-col) !important;
    box-shadow: 0 0 0 2px var(--accent-col-darker);
}

/* Keyboard focus */
.btn-google:focus-visible {
  outline: none;
  border-color: var(--accent-col) !important;
    box-shadow: 0 0 0 2px var(--accent-col-darker);
}

.hyperlink {
  color: var(--accent-col);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
  cursor: pointer;
}

.hyperlink:hover {
  color: var(--accent-col-darker);
  text-decoration: none;
}

.hyperlink:focus {
  outline: none;
  color: var(--accent-col-darker);
}

.btn-google {
  font-family: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans" !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.btn-google .btn-social__text {
  text-transform: none !important;
  letter-spacing: normal !important;
}