/* =========================================================
   GSOLU Auth UI — Premium + Character Animation
   - Font: Plus Jakarta Sans (premium) + Mulish fallback
   - Pill inputs + strong focus ring
   - Premium card + spacing
   - Mobile: animation MUST be visible
   ========================================================= */

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* ---------- Theme variables ---------- */
:root{
  --font: "Plus Jakarta Sans", "Mulish", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --bg: #f6f7fb;
  --paper: #ffffff;
  --text: #2b2f36;
  --muted: #6b7280;

  --border: #e6e8ef;
  --border-2: #dfe3ee;

  --primary: #7c3aed;
  --primary-hover: #8b5cf6;
  --primary-ring: rgba(124, 58, 237, 0.18);

  --success: #15803d;
  --success-bg: rgba(22, 163, 74, 0.10);
  --success-br: rgba(22, 163, 74, 0.18);

  --error: #b91c1c;
  --error-bg: rgba(239, 68, 68, 0.10);
  --error-br: rgba(239, 68, 68, 0.18);

  --radius-card: 30px;
  --radius-pill: 999px;

  --shadow: 0 16px 45px rgba(17, 24, 39, 0.10);
  --bg-waves: url("/images/misc/bg-light.jpg");
}

/* Body has class auth-page */
body.auth-page{
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================================================
   LAYOUT
   ========================================================= */
.auth-layout{
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-waves) center/cover no-repeat, var(--bg);
}

/* MOBILE: show animation + form stacked, animation visible */
.auth-char-column{
  order: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Visible space on mobile */
  min-height: 320px;
  padding: 18px 12px 8px;
}

.auth-form-column{
  order: 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 18px 28px;
}

/* DESKTOP: two columns */
@media (min-width: 768px){
  .auth-layout{
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }

  .auth-char-column{
    order: 1;
    width: 520px;
    max-width: 520px;
    min-height: 100vh;
    padding: 0;
  }

  .auth-form-column{
    order: 2;
    width: 520px;
    min-height: 100vh;
    padding: 28px;
  }
}

/* =========================================================
   CARD
   ========================================================= */
.auth-paper{
  width: 100%;
  max-width: 460px;
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  border: 1px solid rgba(17,24,39,0.04);
}

.auth-paper-inner{
  padding: 34px 44px 30px;
}

@media (max-width: 420px){
  .auth-paper-inner{ padding: 26px 22px 24px; }
}

/* =========================================================
   LOGO + TYPOGRAPHY
   ========================================================= */
.auth-logo-wrap{
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.auth-logo{
  height: 28px;
  width: auto;
}

.auth-title{
  font-size: 32px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 10px 0;
}

.auth-subtitle{
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 22px 0;
}

.auth-heading-sm{
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px 0;
}

.auth-text-muted{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.auth-link{
  color: var(--primary);
  text-decoration: none;
  font-weight: 700;
}
.auth-link:hover{ text-decoration: underline; }

/* =========================================================
   STACK + DIVIDER
   ========================================================= */
.auth-stack{
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.auth-stack-sm{ gap: 10px; }

.auth-divider{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 10px;
  font-size: 12px;
  color: #9aa0ad;
  letter-spacing: 0.12em;
}

.auth-divider::before,
.auth-divider::after{
  content:"";
  height: 1px;
  flex: 1;
  background: var(--border);
}

/* =========================================================
   FORM
   ========================================================= */
.auth-form-group{ margin-bottom: 16px; }

.auth-label{
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 800;
  color: #3a3f49;
}

.auth-input-wrap{
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input{
  width: 100%;
  height: 48px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: #fff;
  font-size: 14px;
  font-family: var(--font);
  color: var(--text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.auth-input::placeholder{ color: #a0a6b3; }

.auth-input:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 5px var(--primary-ring);
}

.auth-input-wrap .auth-input{ padding-right: 52px; }

.auth-toggle-password{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  height: 36px;
  width: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8a90a0;
  transition: background .15s ease, color .15s ease;
}

.auth-toggle-password:hover{
  background: rgba(17,24,39,0.05);
  color: #4b5563;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.auth-btn{
  height: 48px;
  width: 100%;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .05s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  user-select: none;
}

.auth-btn:active{ transform: translateY(1px); }

.auth-btn-primary{
  border: none;
  background: var(--primary);
  color: #fff;
}

.auth-btn-primary:hover{ background: var(--primary-hover); }

.auth-btn-outline{
  border: 1px solid var(--border);
  background: #fff;
  color: #3a3f49;
}

.auth-btn-outline:hover{
  border-color: var(--border-2);
  background: #fafbff;
}

/* Google icon */
.auth-google-icon{
  width: 18px;
  height: 18px;
  display: inline-block;
}

/* =========================================================
   ACTIONS + FOOTER
   ========================================================= */
.auth-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.auth-footer-links{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

/* =========================================================
   ALERTS + ERRORS
   ========================================================= */
.auth-alert{
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
}

.auth-alert-success{
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success-br);
}

.auth-alert-error{
  background: var(--error-bg);
  color: var(--error);
  border: 1px solid var(--error-br);
}

.auth-error{
  margin-top: 8px;
  font-size: 13px;
  color: var(--error);
}

/* =========================================================
   CHARACTER ANIMATION (YOUR ORIGINAL)
   ========================================================= */

/* IMPORTANT: On mobile, the character should not try to take full viewport height.
   We keep it centered with a min-height, but avoid 100vh inside the column. */
.auth-char-root {
  position: relative;
  max-width: 700px;
  width: 100%;
  /* CHANGED from min-height:100vh -> so it fits mobile column */
  min-height: 320px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media (min-width: 768px){
  .auth-char-root{
    min-height: 100vh; /* desktop stays full height */
  }
}

.auth-char-inr {
  position: relative;
  width: 500px;
  height: 306px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* On small screens, scale character down a bit so it always fits */
@media (max-width: 520px){
  .auth-char-inr{
    transform: scale(0.86);
    transform-origin: center;
  }
}

@media (max-width: 400px){
  .auth-char-inr{
    transform: scale(0.78);
  }
}

.auth-char-blue {
  position: absolute;
  width: 140px;
  height: 300px;
  background: #621bfe;
  border: 2px solid #000;
}

.auth-char-black {
  position: absolute;
  width: 90px;
  height: 200px;
  background: #000;
  border: 2px solid #000;
  bottom: -1px;
  right: 21%;
}

.auth-char-yellow {
  position: absolute;
  overflow: hidden;
  width: 90px;
  height: 135px;
  background: #ecbf00;
  border-radius: 50px 50px 0 0;
  bottom: -1px;
  right: 10%;
}

.auth-char-orange {
  position: absolute;
  width: 220px;
  height: 100px;
  background: #ff6900;
  bottom: -2px;
  left: 24%;
  border-radius: 100px 100px 0 0;
  box-shadow: 0 0 10px 0 #000;
}

.auth-char-b-eye, .auth-char-bl-eye {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
}
.auth-char-b-eye { top: 7%; }
.auth-char-be1 { left: 30%; }
.auth-char-be2 { left: 62%; }
.auth-char-bl-eye { top: 9%; }
.auth-char-bl1 { left: 59%; }
.auth-char-bl2 { left: 29%; }

.auth-char-beye-inr, .auth-char-bl-inr {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #000;
  border-radius: 50%;
  left: 2px;
  top: 2px;
  transform-origin: center;
  will-change: transform;
  transition: transform 0.1s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.auth-char-o-eye {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #000;
  border-radius: 50%;
  will-change: transform;
  transition: transform 0.1s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.auth-char-oe1 { left: 38%; top: 21%; }
.auth-char-oe2 { left: 54%; top: 21%; }

.auth-char-y-eye {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #000;
  top: 16%;
  border-radius: 50%;
  left: 42%;
  will-change: transform;
  transition: transform 0.1s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.auth-char-y-mouth {
  position: absolute;
  width: 52px;
  height: 18px;
  background: transparent;
  top: 28%;
  left: 20%;
  will-change: transform;
  transition: transform 0.1s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.auth-char-y-line {
  position: absolute;
  left: 0; top: 7px;
  width: 52px;
  height: 4px;
  background: #000;
  border-radius: 10px;
  transition: all 0.18s ease;
}

.auth-char-omouth {
  position: absolute;
  width: 24px;
  height: 14px;
  background: #000;
  top: 36%;
  left: 44%;
  border-radius: 0 0 100px 100px;
  overflow: hidden;
  will-change: transform;
  transition: all 0.18s ease;
}
.auth-char-o-in {
  position: absolute;
  left: 50%; top: 55%;
  width: 10px;
  height: 6px;
  background: #ff6900;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.auth-char-shapeable {
  --tx: 0px;
  --ty: 0px;
  --rot: 0deg;
  --skx: 0deg;
  --sx: 1;
  --sy: 1;
  --br: 0px;
  transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) skewX(var(--skx)) scaleX(var(--sx)) scaleY(var(--sy));
  transform-origin: center bottom;
  will-change: transform, clip-path, border-radius;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), border-radius 0.18s ease, clip-path 0.28s ease;
}
.auth-char-blue.auth-char-shapeable,
.auth-char-black.auth-char-shapeable {
  border-radius: var(--br);
}

.auth-char-inr.auth-char-yellow-smile .auth-char-y-line {
  width: 44px; left: 4px; top: 6px; height: 8px;
  border-radius: 0 0 40px 40px;
}
.auth-char-inr.auth-char-yellow-zip .auth-char-y-line {
  width: 52px; height: 3px; top: 8px; border-radius: 0;
  box-shadow: 6px 0 0 #000, 12px 0 0 #000, 18px 0 0 #000, 24px 0 0 #000, 30px 0 0 #000, 36px 0 0 #000, 42px 0 0 #000;
}
.auth-char-inr.auth-char-orange-o .auth-char-omouth { width: 18px; height: 18px; border-radius: 50%; }
.auth-char-inr.auth-char-orange-laugh .auth-char-omouth { width: 26px; height: 12px; border-radius: 0 0 80px 80px; }
.auth-char-inr.auth-char-orange-laugh .auth-char-o-in { opacity: 1; }

.auth-char-inr.auth-char-blue-sus .auth-char-beye-inr { transform: translate(0, 0) scale(1.08); }
.auth-char-inr.auth-char-black-serious .auth-char-bl-inr { transform: translate(0, 0) scale(0.92); }

.auth-char-inr.auth-char-hide-blue .auth-char-beye-inr { transform: translateX(-8px) scaleY(0.2) !important; }
.auth-char-inr.auth-char-hide-black .auth-char-bl-inr { transform: scaleY(0.1) !important; }
.auth-char-inr.auth-char-hide-yellow .auth-char-y-eye { transform: scaleY(0.1) !important; }
.auth-char-inr.auth-char-hide-orange .auth-char-o-eye { transform: scale(0.25) !important; }

@keyframes auth-char-blink {
  0% { transform: scaleY(1); }
  50% { transform: scaleY(0.1); }
  100% { transform: scaleY(1); }
}
.auth-char-blink { animation: auth-char-blink 0.18s ease; }

.auth-char-inr.auth-char-state-email .auth-char-omouth {
  width: 22px; height: 10px;
  border-radius: 100px 100px 0 0;
  top: 42%;
}
.auth-char-inr.auth-char-state-email .auth-char-y-line {
  width: 38px; left: 7px; top: 7px; height: 6px;
  border-radius: 0 0 40px 40px;
}

@keyframes auth-char-panic {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 2px); }
  40% { transform: translate(6px, -2px); }
  60% { transform: translate(-5px, 1px); }
  80% { transform: translate(5px, -1px); }
  100% { transform: translate(0, 0); }
}
.auth-char-inr.auth-char-panic { animation: auth-char-panic 0.45s ease-in-out; }

/* MOBILE: hide character/animation */
.auth-char-column {
  display: none;
}

/* DESKTOP: show character/animation */
@media (min-width: 768px){
  .auth-char-column{
    display: flex;              /* or block */
    align-items: center;
    justify-content: center;
  }

  /* Optional: keep full height on desktop */
  .auth-char-root{
    min-height: 100vh;
  }
}