/* ============================================================
   VoidPOS — Auth Pages Styles
   Shared by signin.php, signup.php, verify_email.php
   ============================================================ */

/* ── Page shell ────────────────────────────────────────────── */
html, body {
  height: 100%;
}

body {
  background: var(--gray-100);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: var(--black);
}

/* ── Auth nav ──────────────────────────────────────────────── */
.auth-nav {
  height: 56px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-8);
  flex-shrink: 0;
}

.auth-nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--black);
}

.auth-nav__logo-mark {
  width: 30px;
  height: 30px;
  background: var(--black);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  flex-shrink: 0;
}

.auth-nav__logo-mark svg {
  width: 16px;
  height: 16px;
}

.auth-nav__aside {
  font-size: var(--text-sm);
  color: var(--gray-500);
}

.auth-nav__aside a {
  color: var(--black);
  font-weight: 600;
  text-decoration: none;
}

.auth-nav__aside a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Main centering wrapper ────────────────────────────────── */
.auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-5);
}

/* ── Auth card ─────────────────────────────────────────────── */
.auth-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  width: 100%;
  max-width: 440px;
  box-shadow: 0 4px 24px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
}

.auth-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--black);
  margin-bottom: var(--space-10);
  line-height: 1.15;
}

.auth-card__sub {
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin-bottom: var(--space-8);
  font-weight: 300;
}

/* ── Form fields ───────────────────────────────────────────── */
.auth-fg {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5, 6px);
  margin-bottom: var(--space-4);
}

.auth-fg-row {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.auth-fg-row .auth-fg {
  flex: 1;
  margin-bottom: 0;
}

.auth-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gray-700);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.auth-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1-5, 6px);
}

.auth-label-row .auth-label {
  margin-bottom: 0;
}

.auth-input,
.auth-select {
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  color: var(--black);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  outline: none;
  width: 100%;
  transition: border-color var(--duration-fast), background var(--duration-fast);
  appearance: none;
}

.auth-input::placeholder { color: var(--gray-400); }
.auth-select { cursor: pointer; }

.auth-input:focus,
.auth-select:focus {
  border-color: var(--black);
  background: var(--white);
}

.auth-input:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Password wrapper ──────────────────────────────────────── */
.auth-pw-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

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

.auth-pw-eye {
  position: absolute;
  right: var(--space-3);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-400);
  padding: var(--space-1);
  line-height: 1;
  transition: color var(--duration-fast);
  display: flex;
  align-items: center;
}

.auth-pw-eye:hover { color: var(--black); }
.auth-pw-eye svg { width: 16px; height: 16px; }

/* icon toggling */
.auth-pw-eye .icon-eye-closed { display: none; }

/* ── Phone row ─────────────────────────────────────────────── */
.auth-phone-row {
  display: flex;
  gap: var(--space-2);
}

.auth-dial {
  width: 92px;
  flex-shrink: 0;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--black);
  outline: none;
  transition: border-color var(--duration-fast);
  cursor: pointer;
}

.auth-dial:focus { border-color: var(--black); }

/* ── Primary auth button ───────────────────────────────────── */
.auth-btn {
  width: 100%;
  padding: var(--space-3-5, 14px) var(--space-4);
  border-radius: var(--radius-md);
  border: none;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--duration-fast), transform var(--duration-fast);
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  letter-spacing: 0.01em;
}

.auth-btn:hover:not(:disabled) { opacity: 0.85; }
.auth-btn:active:not(:disabled) { transform: scale(0.99); }
.auth-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* White outline variant (verification state) */
.auth-btn--outline {
  background: var(--white);
  color: var(--black);
  border: 1.5px solid var(--black);
}

.auth-btn--outline:hover:not(:disabled) { background: var(--gray-50); }

/* ── Spinner (inline in button) ────────────────────────────── */
.auth-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: auth-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes auth-spin { to { transform: rotate(360deg); } }

/* Dark spinner (for white bg) */
.auth-spinner--dark {
  border-color: rgba(0,0,0,.15);
  border-top-color: var(--black);
}

/* Large spinner (verify_email loader) */
.auth-spinner-lg {
  width: 36px;
  height: 36px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--black);
  border-radius: 50%;
  animation: auth-spin 0.8s linear infinite;
  margin: 0 auto var(--space-5);
}

/* ── Error banner ──────────────────────────────────────────── */
.auth-err {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: #B91C1C;
  margin-top: var(--space-3);
  display: none;
  line-height: 1.55;
}

.auth-err.show { display: block; }

/* ── Warning banner (session expired etc) ──────────────────── */
.auth-warn {
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: #92400E;
  margin-bottom: var(--space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  line-height: 1.5;
}

.auth-warn svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }

/* ── Divider ───────────────────────────────────────────────── */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  color: var(--gray-400);
  font-size: var(--text-xs);
}

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

/* ── Link / ghost button ───────────────────────────────────── */
.auth-link-btn {
  background: none;
  border: none;
  color: var(--gray-500);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: color var(--duration-fast);
}

.auth-link-btn:hover { color: var(--black); }

/* Inline button inside error message */
.auth-inline-btn {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px 10px;
  border: 1px solid #FECACA;
  border-radius: var(--radius-sm);
  background: none;
  color: #B91C1C;
  font: 500 var(--text-xs) var(--font-body);
  cursor: pointer;
  transition: background var(--duration-fast);
}

.auth-inline-btn:hover { background: #FEE2E2; }

/* ── Auth footer text ──────────────────────────────────────── */
.auth-card__footer {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--gray-400);
  margin-top: var(--space-3);
  line-height: 1.6;
}

.auth-card__footer a {
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--gray-300);
}

.auth-card__footer a:hover { text-decoration-color: var(--black); }

.auth-card__switch {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin-top: var(--space-5);
}

.auth-card__switch a {
  color: var(--black);
  font-weight: 600;
  text-decoration: none;
}

.auth-card__switch a:hover { text-decoration: underline; }

/* ── Forgot password panel ─────────────────────────────────── */
.auth-forgot {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-3);
  display: none;
}

.auth-forgot.show { display: block; }

.auth-forgot__title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--black);
  margin-bottom: var(--space-1);
  letter-spacing: -0.02em;
}

.auth-forgot__sub {
  font-size: var(--text-xs);
  color: var(--gray-500);
  margin-bottom: var(--space-3);
}

.auth-forgot__row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.auth-forgot__row .auth-input { flex: 1; }

.auth-forgot__send {
  padding: var(--space-3) var(--space-4);
  background: var(--black);
  border: none;
  border-radius: var(--radius-md);
  color: var(--white);
  font: 600 var(--text-xs) var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--duration-fast);
}

.auth-forgot__send:hover:not(:disabled) { opacity: 0.8; }
.auth-forgot__send:disabled { opacity: 0.5; cursor: not-allowed; }

.fp-msg {
  font-size: var(--text-xs);
  min-height: 16px;
  margin-bottom: var(--space-2);
}

.fp-msg--ok  { color: #065F46; }
.fp-msg--err { color: #B91C1C; }

/* ── Sign-up two-column layout ─────────────────────────────── */
.auth-layout {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: var(--space-12);
  max-width: 940px;
  width: 100%;
  align-items: start;
}

/* ── Perks sidebar ─────────────────────────────────────────── */
.auth-perks { padding-top: var(--space-6); }

.auth-perks__heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--black);
  margin-bottom: var(--space-10);
  line-height: 1.15;
}
 
.auth-perk {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  align-items: flex-start;
}

.auth-perk__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--duration-fast);
}

.auth-perk__icon svg {
  width: 18px;
  height: 18px;
  color: var(--black);
}

.auth-perk__title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--black);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
}

.auth-perk__body {
  font-size: var(--text-xs);
  color: var(--gray-500);
  line-height: 1.6;
}

/* ── Verification pending state ────────────────────────────── */
.auth-verif {
  display: none;
  text-align: center;
  padding: var(--space-4) 0;
}

.auth-verif.show { display: block; }

.auth-verif__icon {
  width: 64px;
  height: 64px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5);
}

.auth-verif__icon svg {
  width: 28px;
  height: 28px;
  color: var(--black);
}

.auth-verif__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--black);
  margin-bottom: var(--space-2);
}

.auth-verif__sub {
  font-size: var(--text-sm);
  color: var(--gray-500);
  line-height: 1.65;
  margin-bottom: var(--space-3);
}

.auth-verif__email-badge {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--black);
  margin-bottom: var(--space-4);
  word-break: break-all;
  font-family: var(--font-display);
}

.auth-resend-btn {
  background: none;
  border: 1.5px solid var(--gray-200);
  color: var(--gray-500);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  font: 500 var(--text-sm) var(--font-body);
  cursor: pointer;
  transition: border-color var(--duration-fast), color var(--duration-fast);
}

.auth-resend-btn:hover:not(:disabled) { border-color: var(--black); color: var(--black); }
.auth-resend-btn:disabled { opacity: 0.45; cursor: not-allowed; }

#resend-msg {
  font-size: var(--text-xs);
  color: var(--gray-500);
  margin-top: var(--space-2);
  min-height: 18px;
}

/* ── Verify_email page (action handler) ────────────────────── */
.auth-action-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-5);
}

.auth-action-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  width: 100%;
  max-width: 420px;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
  text-align: center;
}

.auth-action-icon {
  width: 64px;
  height: 64px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5);
}

.auth-action-icon svg { width: 28px; height: 28px; color: var(--black); }

.auth-action-icon--success { background: #F0FDF4; border-color: #BBF7D0; }
.auth-action-icon--success svg { color: #16A34A; }

.auth-action-icon--warn { background: #FEF2F2; border-color: #FECACA; }
.auth-action-icon--warn svg { color: #B91C1C; }

.auth-action-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--black);
  margin-bottom: var(--space-2);
}

.auth-action-body {
  font-size: var(--text-sm);
  color: var(--gray-500);
  line-height: 1.65;
  margin-bottom: var(--space-6);
}

.auth-action-form { text-align: left; }
.auth-action-form .auth-fg { margin-bottom: var(--space-4); }

.auth-err--action {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: #B91C1C;
  margin-top: var(--space-3);
  display: none;
}

.auth-err--action.show { display: block; }

/* ── Page footer ───────────────────────────────────────────── */
.auth-page-footer {
  text-align: center;
  padding: var(--space-5);
  font-size: var(--text-xs);
  color: var(--gray-400);
  flex-shrink: 0;
}

.auth-page-footer a {
  color: var(--gray-400);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.auth-page-footer a:hover { color: var(--black); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 860px) {
  .auth-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .auth-perks   { display: none; }
}

@media (max-width: 480px) {
  .auth-card { padding: var(--space-8) var(--space-5); border-radius: var(--radius-xl); }
  .auth-action-card { padding: var(--space-8) var(--space-6); }
  .auth-nav { padding: 0 var(--space-4); }
}