/* ═══════════════════════════════════════════════════
   login.css  — Techsillica Auth Page
   v2 — CSP-clean, premium animation pass
═══════════════════════════════════════════════════ */

/* ── Layout shell ────────────────────────────────── */
.login-split-layout {
  display:    flex;
  min-height: 100vh;
  overflow:   hidden;
  background: var(--navy);
}

/* ═══════════════════════════════════════════════════
   LEFT PANEL — Navy editorial side
═══════════════════════════════════════════════════ */
.left-panel {
  width:          46%;
  min-height:     100vh;
  background:     var(--navy);
  position:       relative;
  display:        flex;
  flex-direction: column;
  padding:        40px 48px;
  overflow:       hidden;
  flex-shrink:    0;
}

/* Grid texture */
.left-panel::before {
  content: '';
  position: absolute;
  inset:    0;
  background-image:
    linear-gradient(rgba(201,146,42,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,146,42,0.07) 1px, transparent 1px);
  background-size:  52px 52px;
  pointer-events:   none;
  animation:        gridDrift 40s linear infinite;
}

@keyframes gridDrift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 52px 52px, 52px 52px; }
}

/* Warm glow orb */
.left-panel::after {
  content:        '';
  position:       absolute;
  bottom:         -15%;
  right:          -10%;
  width:          70%;
  height:         70%;
  background:     radial-gradient(ellipse at center, rgba(201,146,42,0.10) 0%, transparent 70%);
  pointer-events: none;
  animation:      orbPulse 8s ease-in-out infinite;
}

@keyframes orbPulse {
  0%, 100% { opacity: 0.7; transform: scale(1);    }
  50%       { opacity: 1;   transform: scale(1.12); }
}

/* ── Brand ───────────────────────────────────────── */
.lp-brand {
  display:         flex;
  align-items:     center;
  gap:             10px;
  position:        relative;
  z-index:         1;
  margin-bottom:   auto;
  text-decoration: none;
}

.lp-logo {
  width:          40px;
  height:         40px;
  background:     var(--gold);
  border-radius:  9px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  font-family:    var(--font-display);
  font-size:      1rem;
  font-weight:    900;
  color:          var(--navy);
  flex-shrink:    0;
  transition:     transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                  box-shadow 0.3s ease;
}

.lp-brand:hover .lp-logo {
  transform:  rotate(-6deg) scale(1.08);
  box-shadow: 0 8px 24px rgba(201,146,42,0.35);
}

.lp-logo-name {
  font-family: var(--font-display);
  font-size:   1.1rem;
  font-weight: 800;
  color:       #fff;
  transition:  letter-spacing 0.3s ease;
}

.lp-brand:hover .lp-logo-name { letter-spacing: 0.5px; }

.lp-logo-sub {
  font-size:    0.62rem;
  color:        rgba(255,255,255,0.4);
  letter-spacing: 0.3px;
  display:      block;
  margin-top:   1px;
}

/* ── Hero text ───────────────────────────────────── */
.lp-hero {
  position:   relative;
  z-index:    1;
  margin-top: 60px;
}

.lp-eyebrow {
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color:          var(--gold-light);
  margin-bottom:  16px;
  display:        flex;
  align-items:    center;
  gap:            10px;
}

.lp-eyebrow::before {
  content:    '';
  display:    inline-block;
  width:      28px;
  height:     1.5px;
  background: var(--gold-light);
  animation:  eyebrowExpand 1s 0.3s both ease-out;
}

@keyframes eyebrowExpand {
  from { width: 0; opacity: 0; }
  to   { width: 28px; opacity: 1; }
}

.lp-headline {
  font-family:    var(--font-display);
  font-size:      clamp(2.2rem, 3.5vw, 3rem);
  font-weight:    900;
  color:          #fff;
  line-height:    1.1;
  margin-bottom:  20px;
  letter-spacing: -0.5px;
}

.lp-headline em {
  font-style: italic;
  color:      var(--gold-light);
  position:   relative;
}

/* Underline shimmer on the italic word */
.lp-headline em::after {
  content:    '';
  position:   absolute;
  left:       0;
  bottom:     -2px;
  width:      100%;
  height:     2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gold-light) 40%,
    var(--gold) 60%,
    transparent 100%);
  background-size: 200% 100%;
  animation:  shimmerLine 3s 1s ease-in-out infinite;
}

@keyframes shimmerLine {
  0%   { background-position: 200% 0; opacity: 0.6; }
  50%  { background-position: -200% 0; opacity: 1;  }
  100% { background-position: 200% 0; opacity: 0.6; }
}

.lp-sub {
  font-size:     0.9rem;
  color:         rgba(255,255,255,0.55);
  line-height:   1.7;
  max-width:     340px;
  margin-bottom: 36px;
}

/* ── Stats row ───────────────────────────────────── */
.lp-stats {
  display:       flex;
  gap:           0;
  margin-bottom: 40px;
}

.lp-stat {
  flex:       1;
  padding:    14px 16px;
  background: rgba(255,255,255,0.04);
  border:     1px solid rgba(255,255,255,0.07);
  transition: background 0.25s ease, transform 0.25s ease;
  cursor:     default;
}

.lp-stat:first-child  { border-radius: 8px 0 0 8px; }
.lp-stat:last-child   { border-radius: 0 8px 8px 0; border-left: none; }
.lp-stat:not(:first-child):not(:last-child) { border-left: none; }

.lp-stat:hover {
  background: rgba(255,255,255,0.08);
  transform:  translateY(-2px);
}

.lp-stat-val {
  font-family: var(--font-display);
  font-size:   1.4rem;
  font-weight: 800;
  color:       var(--gold-light);
  line-height: 1;
}

/* Smaller variant for fraction values (e.g. "1/3 & 1/4") */
.lp-stat-val.lp-stat-val--lg { font-size: 1.1rem; }

.lp-stat-label {
  font-size:      0.64rem;
  color:          rgba(255,255,255,0.4);
  margin-top:     3px;
  letter-spacing: 0.2px;
}

/* ── Feature pills ───────────────────────────────── */
.lp-features {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

.lp-pill {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  padding:     6px 12px;
  background:  rgba(255,255,255,0.05);
  border:      1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  font-size:   0.72rem;
  color:       rgba(255,255,255,0.6);
  font-weight: 500;
  transition:  background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
  cursor:      default;
}

.lp-pill:hover {
  background:   rgba(201,146,42,0.12);
  border-color: rgba(201,146,42,0.3);
  color:        var(--gold-light);
  transform:    translateY(-1px);
}

.lp-pill-dot {
  width:       5px;
  height:      5px;
  border-radius: 50%;
  background:  var(--gold-light);
  flex-shrink: 0;
  animation:   dotPulse 2.5s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.5; transform: scale(0.75); }
}

/* ── Bottom nav ──────────────────────────────────── */
.lp-footer {
  position:        relative;
  z-index:         1;
  margin-top:      40px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-top:     20px;
  border-top:      1px solid rgba(255,255,255,0.07);
}

.lp-footer-link {
  font-size:       0.72rem;
  color:           rgba(255,255,255,0.3);
  text-decoration: none;
  transition:      color 0.2s ease, letter-spacing 0.2s ease;
}

.lp-footer-link:hover {
  color:          var(--gold-light);
  letter-spacing: 0.2px;
}

/* ── Decorative floating card ────────────────────── */
.lp-deco-card {
  position:        absolute;
  right:           -24px;
  top:             50%;
  transform:       translateY(-50%);
  background:      rgba(13,33,55,0.95);
  border:          1px solid rgba(201,146,42,0.2);
  border-radius:   12px;
  padding:         16px 18px;
  backdrop-filter: blur(20px);
  box-shadow:      0 20px 60px rgba(0,0,0,0.5);
  z-index:         10;
  width:           170px;
  animation:       floatCard 4s ease-in-out infinite;
}

@keyframes floatCard {
  0%, 100% { transform: translateY(-50%) translateX(0)    rotate(0deg);    }
  33%       { transform: translateY(-52%) translateX(-4px) rotate(-1.5deg); }
  66%       { transform: translateY(-48%) translateX(3px)  rotate(1deg);   }
}

.deco-label {
  font-size:      0.6rem;
  font-weight:    700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.35);
  margin-bottom:  8px;
}

.deco-exam {
  font-family:   var(--font-display);
  font-size:     0.82rem;
  font-weight:   800;
  color:         #fff;
  margin-bottom: 3px;
}

.deco-sub {
  font-size:     0.65rem;
  color:         rgba(255,255,255,0.4);
  margin-bottom: 10px;
}

.deco-bar-wrap {
  height:        4px;
  background:    rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow:      hidden;
  margin-bottom: 4px;
}

.deco-bar {
  height:     100%;
  width:      74%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 4px;
  animation:  expandDeco 2s 0.5s both ease-out;
}

@keyframes expandDeco {
  0%   { width: 0;   opacity: 0; }
  65%  { width: 78%; opacity: 1; }
  100% { width: 74%; opacity: 1; }
}

/* Wrapper for score line (replaces style="margin-top:5px") */
.mt-5 { margin-top: 5px; }

.deco-score {
  font-family: var(--font-display);
  font-size:   1rem;
  font-weight: 800;
  color:       var(--gold-light);
}

.deco-score-sub {
  font-size:   0.6rem;
  color:       rgba(255,255,255,0.35);
  margin-left: 3px;
}

/* ═══════════════════════════════════════════════════
   RIGHT PANEL — White form side
═══════════════════════════════════════════════════ */
.right-panel {
  flex:            1;
  background:      var(--white);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         48px 52px;
  position:        relative;
  overflow-y:      auto;
  min-height:      100vh;
}

.right-panel::before {
  content:        '';
  position:       absolute;
  top:            0;
  right:          0;
  width:          200px;
  height:         200px;
  background:     radial-gradient(ellipse at top right, rgba(201,146,42,0.06), transparent 70%);
  pointer-events: none;
}

.form-container {
  width:     100%;
  max-width: 380px;
  position:  relative;
  z-index:   1;
}

/* ── Tab switcher ────────────────────────────────── */
.auth-tabs {
  display:       flex;
  background:    var(--grey-100);
  border-radius: 8px;
  padding:       4px; /* Added padding for the slider to breathe */
  margin-bottom: 32px;
  position:      relative;
  z-index:       1;
  /* Adds a subtle sunken/debossed look to the grey container */
  box-shadow:    inset 0 1px 3px rgba(0, 0, 0, 0.05); 
}
/* The Sliding Premium Pill Indicator */
.auth-tabs::after {
  content:       '';
  position:      absolute;
  top:           4px;
  left:          4px;
  width:         calc(50% - 4px);
  height:        calc(100% - 8px);
  background:    var(--white);
  border-radius: 6px;
  /* Crisp drop shadow to lift the pill out of the debossed container */
  box-shadow:    0 2px 8px rgba(13, 33, 55, 0.08), 
                 0 1px 2px rgba(13, 33, 55, 0.04);
  /* The bouncy sliding physics */
  transition:    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index:       -1;
}
/* Magically slides the pill to the right when the 2nd tab is active */
.auth-tabs:has(.auth-tab:nth-child(2).active)::after {
  transform: translateX(100%);
}
.auth-tab {
  flex:        1;
  padding:     10px 0;
  border:      none;
  border-radius: 6px;
  /* Force transparent background so the sliding pill shows behind the text */
  background:  transparent !important; 
  font-family: var(--font-body);
  font-size:   0.85rem; 
  font-weight: 600;
  color:       var(--grey-400);
  cursor:      pointer;
  transition:  color 0.3s ease;
  text-align:  center;
  outline:     none;
}

.auth-tab:hover:not(.active) { color: var(--grey-600); }

.auth-tab.active {
  color: var(--navy);
}
/* Accessibility focus ring */
.auth-tab:focus-visible {
  box-shadow: inset 0 0 0 2px var(--gold-light);
}
.auth-btn--google {
  background: var(--surface, #fff);
  color: var(--text-primary, #1a1a1a);
  border: 1px solid var(--border, #d1d5db);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
}
.auth-btn--google:hover { background: var(--grey-50, #f9fafb); }
.divider { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; color: var(--text-muted); font-size: .85rem; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── Form heading (uses shared .title / .subtitle) ── */
.form-title {
  font-family:   var(--font-display);
  font-size:     1.7rem;
  font-weight:   900;
  color:         var(--navy);
  line-height:   1.15;
  margin-bottom: 6px;
}

.form-subtitle {
  font-size:     0.82rem;
  color:         var(--grey-600);
  margin-bottom: 28px;
  line-height:   1.5;
}

/* ── Input animations ────────────────────────────── */
.input-icon {
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              color 0.2s ease;
}

.input-wrap:focus-within .input-icon {
  color:     var(--navy);
  transform: translateY(-50%) scale(1.15);
}

/* Focus glow ring */
.input-wrap:focus-within {
  border-radius: 10px;
  box-shadow:    0 0 0 3px rgba(13,33,55,0.08);
}

.form-input:focus {
  outline:      none;
  border-color: var(--navy);
}

.form-input.success { border-color: var(--green); }

.input-toggle-pw {
  transition: color 0.2s ease, transform 0.2s ease;
}

.input-toggle-pw:hover {
  color:     var(--navy);
  transform: scale(1.05);
}



/* ── Name row ────────────────────────────────────── */
.name-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
}

/* ── Password label row ──────────────────────────── */
.form-row-between {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   6px;
}

.forgot-link-btn {
  background:  none;
  border:      none;
  cursor:      pointer;
  font-family: var(--font-body);
  font-size:   0.72rem;
  font-weight: 600;
  color:       var(--navy);
  padding:     0;
  transition:  color 0.15s ease, letter-spacing 0.2s ease;
}

.forgot-link-btn:hover {
  color:          var(--gold);
  letter-spacing: 0.2px;
}

/* ── Remember me ─────────────────────────────────── */
.checkbox-row {
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin-bottom: 20px;
}

.checkbox-row input[type="checkbox"] {
  width:        15px;
  height:       15px;
  accent-color: var(--navy);
  cursor:       pointer;
  flex-shrink:  0;
  transition:   transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.checkbox-row input[type="checkbox"]:checked { transform: scale(1.15); }

.checkbox-row label {
  font-size:  0.78rem;
  color:      var(--grey-600);
  cursor:     pointer;
  user-select: none;
}

/* ── Submit button ───────────────────────────────── */
.auth-btn-submit.navy {
  /* Premium subtle gradient instead of flat navy */
  background: linear-gradient(135deg, var(--navy) 0%, #162a45 100%);
  color:      #fff;
  position:   relative;
  overflow:   hidden;
  border:     1px solid rgba(255,255,255,0.06); /* Tiny edge highlight */
  
  /* Bouncy physics to match the Google button */
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease,
              background 0.3s ease;
}

/* Upgraded Sleek Skewed Shimmer */
.auth-btn-submit.navy::after {
  content:    '';
  position:   absolute;
  top:        0;
  left:       -100%;
  width:      50%;
  height:     100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 100%);
  transform:  skewX(-25deg); /* Angling it makes it look highly polished */
  transition: none;
}

.auth-btn-submit.navy:hover:not(:disabled)::after {
  animation: shimmerFast 0.75s ease-out forwards;
}
@keyframes shimmerFast {
  0%   { left: -100%; }
  100% { left: 200%; }
}
/* Layered glow & lift effect */
.auth-btn-submit.navy:hover:not(:disabled) {
  transform:  translateY(-2px);
  background: linear-gradient(135deg, #153050 0%, #1e406d 100%);
  box-shadow: 0 12px 24px rgba(13, 33, 55, 0.28),
              0 4px 10px rgba(13, 33, 55, 0.15),
              0 0 0 2px rgba(13, 33, 55, 0.08);
}

.auth-btn-submit.navy:active:not(:disabled) {
  transform:  translateY(0);
  box-shadow: 0 4px 12px rgba(13, 33, 55, 0.2);
}
/* Arrow slide micro-interaction */
.btn-arrow {
  display:    inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.auth-btn-submit.navy:hover:not(:disabled) .btn-arrow {
  transform: translateX(4px);
}
.auth-btn-submit.dark {
  background: #1c1f26;
  color:      #fff;
  position:   relative;
  overflow:   hidden;
}

.auth-btn-submit.dark::after {
  content:    '';
  position:   absolute;
  top:        0;
  left:       -100%;
  width:      60%;
  height:     100%;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,0.10) 50%,
    transparent 100%);
  transition: left 0.5s ease;
}

.auth-btn-submit.dark:hover:not(:disabled)::after { left: 160%; }

.auth-btn-submit.dark:hover:not(:disabled) {
  background: #2a2e38;
  transform:  translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.auth-btn-submit.dark:active:not(:disabled) { transform: translateY(0); }

/* ── Divider ─────────────────────────────────────── */
.divider {
  display:       flex;
  align-items:   center;
  gap:           12px;
  margin-bottom: 16px;
}

.divider-line {
  flex:       1;
  height:     1px;
  background: var(--grey-200);
}

.divider-text {
  font-size:   0.72rem;
  color:       var(--grey-400);
  white-space: nowrap;
  font-weight: 500;
}

/* ── OAuth buttons ───────────────────────────────── */
.oauth-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
  margin-bottom:         24px;
}

.btn-oauth {
  padding:         10px 14px;
  border:          1.5px solid var(--grey-200);
  border-radius:   8px;
  background:      var(--white);
  font-family:     var(--font-body);
  font-size:       0.78rem;
  font-weight:     600;
  color:           var(--grey-700);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             7px;
  transition:      border-color 0.3s ease, 
                   background 0.3s ease, 
                   transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
                   box-shadow 0.3s ease;
  position:        relative;
}

.btn-oauth:hover:not(.disabled) {
  border-color: var(--navy);
  background:   var(--white); /* Keep it white so the shadow pops */
  transform:    translateY(-2px);
  box-shadow:   0 12px 24px rgba(13, 33, 55, 0.12),
                0 4px 10px rgba(13, 33, 55, 0.06),
                0 0 0 3px rgba(13, 33, 55, 0.04);
}
.btn-oauth:active:not(.disabled) {
  transform:  translateY(0);
  box-shadow: 0 2px 8px rgba(13, 33, 55, 0.1);
}

.btn-oauth.disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}

.badge-soon {
  position:     absolute;
  top:          -8px;
  right:        -4px;
  background:   var(--gold-light);
  color:        var(--navy);
  font-size:    0.55rem;
  font-weight:  700;
  padding:      1px 5px;
  border-radius: 10px;
  letter-spacing: 0.5px;
}

/* ── Switch mode ─────────────────────────────────── */
.switch-mode {
  text-align: center;
  font-size:  0.78rem;
  color:      var(--grey-500);
}

.switch-mode a {
  color:           var(--navy);
  font-weight:     700;
  text-decoration: none;
  transition:      color 0.15s ease;
}

.switch-mode a:hover { color: var(--gold); }

/* ── Admin link ──────────────────────────────────── */
.admin-access {
  text-align:    center;
  margin-top:    20px;
  padding-top:   16px;
  border-top:    1px solid var(--grey-100);
}

.admin-access a {
  font-size:       0.7rem;
  color:           var(--grey-400);
  text-decoration: none;
  transition:      color 0.15s ease;
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
}

.admin-access a:hover { color: var(--grey-700); }

/* ── Admin badge ─────────────────────────────────── */
.admin-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           7px;
  background:    #1c1f26;
  border-radius: 6px;
  padding:       6px 12px;
  margin-bottom: 20px;
}

.admin-badge-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    #ef4444;
  box-shadow:    0 0 6px rgba(239,68,68,0.6);
  animation:     redPulse 1.6s ease-in-out infinite;
}

@keyframes redPulse {
  0%, 100% { box-shadow: 0 0 6px  rgba(239,68,68,0.6); }
  50%       { box-shadow: 0 0 14px rgba(239,68,68,0.9); }
}

.admin-badge-text {
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.7);
}

/* ── Admin warning ───────────────────────────────── */
.admin-warning {
  margin-bottom:  18px;
  padding:        10px 12px;
  background:     #fef2f2;
  border:         1px solid #fecaca;
  border-radius:  6px;
  font-size:      0.72rem;
  color:          #991b1b;
  line-height:    1.5;
}

/* ── Forgot views ────────────────────────────────── */
.forgot-info {
  font-size:   0.82rem;
  color:       var(--grey-600);
  margin-bottom: 20px;
  text-align:  center;
  line-height: 1.5;
}

/* Smaller hint variant (spam folder line) */
.forgot-info--small,
.forgot-info-sub {
  font-size: 0.72rem;
  color:     var(--grey-400);
}

/* ── Back button ─────────────────────────────────── */
.back-btn {
  background:  none;
  border:      none;
  cursor:      pointer;
  font-family: var(--font-body);
  font-size:   0.78rem;
  color:       var(--grey-500);
  display:     flex;
  align-items: center;
  gap:         5px;
  padding:     0;
  margin-bottom: 20px;
  transition:  color 0.15s ease, gap 0.2s ease;
}

.back-btn:hover {
  color: var(--navy);
  gap:   8px;
}



/* View-swap transition — JS adds .view-exit / .view-enter */
.view-exit {
  animation: viewOut 0.2s ease both;
}

.view-enter {
  animation: viewIn 0.3s 0.15s ease both;
}

@keyframes viewOut {
  from { opacity: 1; transform: translateX(0);    }
  to   { opacity: 0; transform: translateX(-16px); }
}

@keyframes viewIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0);    }
}

/* ═══════════════════════════════════════════════════
   CSP UTILITY CLASSES
   Replaces every style="…" attribute in login.html
═══════════════════════════════════════════════════ */

/* Spacing nudges */
.mt-6  { margin-top:    6px; }
.mb-0  { margin-bottom: 0;   }

/* OAuth icon size */
.oauth-icon { font-size: 1rem; }

/* Last-name input — no left icon, so default padding */
.input-no-icon { padding-left: 14px; }

/* Country-code text badge (+91) */
.input-icon--cc {
  font-size:   0.78rem;
  font-weight: 700;
  left:        10px;
  color:       var(--grey-600);
}

/* Phone input — offset to clear the +91 badge */
.input-pl-wide { padding-left: 44px; }

/* Select — pointer cursor + remove OS arrow (custom arrow comes from shared.css) */
select.form-select {
  cursor:     pointer;
  appearance: none;
}

/* Inline text links (Terms / Privacy) */
.link-navy {
  color:           var(--navy);
  font-weight:     600;
  text-decoration: none;
  transition:      color 0.15s ease;
}

.link-navy:hover { color: var(--gold); }

/* Email address highlight in forgot-step-2 */
.text-navy { color: var(--navy); }

/* Hidden views — JS must toggle via classList, NOT style.display */
.js-hidden { display: none !important; }

/* "try again" inline text button */
.btn-inline,
.btn-text-navy {
  background:  none;
  border:      none;
  padding:     0;
  cursor:      pointer;
  color:       var(--navy);
  font-weight: 700;
  font-size:   0.72rem;
  font-family: var(--font-body);
  transition:  color 0.15s ease, text-decoration 0.15s ease;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-inline:hover,
.btn-text-navy:hover { color: var(--gold); }

/* Service-unavailable degraded state — set by JS when Supabase fails to load */
.btn--unavailable { opacity: 0.5; }

/* ── Toast notification ──────────────────────────── */
#toast {
  position:       fixed;
  bottom:         20px;
  right:          20px;
  background:     #1c1f26;
  color:          #fff;
  padding:        10px 16px;
  border-radius:  10px;
  font-size:      0.8rem;
  font-weight:    500;
  box-shadow:     0 8px 32px rgba(0,0,0,0.28);
  display:        flex;
  align-items:    center;
  gap:            8px;
  z-index:        9999;
  transform:      translateY(70px);
  opacity:        0;
  transition:     transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                  opacity   0.3s ease;
  pointer-events: none;
  max-width:      360px;
  border:         1px solid rgba(255,255,255,0.06);
}

/* JS adds this class to show the toast */
#toast.toast--visible {
  transform:      translateY(0);
  opacity:        1;
  pointer-events: auto;
}

/* Coloured left-border variants */
#toast.toast--success { border-left: 3px solid var(--green,      #22c55e); }
#toast.toast--error   { border-left: 3px solid var(--red,        #ef4444); }
#toast.toast--warning { border-left: 3px solid var(--gold,       #b7791f); }
#toast.toast--info    { border-left: 3px solid var(--gold-light, #c9921a); }

/* ── RESPONSIVE ──────────────────────────────────── */
@media (max-width: 900px) {
  .left-panel  { display: none; }
  .right-panel { padding: 36px 28px; }
  body         { background: var(--cream); }
}

@media (max-width: 480px) {
  .right-panel { padding: 28px 20px; }
  .name-row    { grid-template-columns: 1fr; }
  .oauth-row   { grid-template-columns: 1fr; }
}

/* ── Reduced-motion overrides ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
  }
}