/*
 * Gun Vault — auth page styles
 * Active on /login/, /register/, /forgot-password/.
 *
 * Scoped under the body class added by class-gv-pages.php so we don't
 * leak rules into the rest of the site. Keep this minimal — Elementor
 * already provides the page layout, logo, and surrounding chrome. We
 * only style what sits inside the [data-gv-step] form containers.
 */

.gv-auth-page [data-gv-step][hidden],
.gv-auth-page [data-gv-field][hidden] {
  display: none !important;
}

.gv-auth-page [data-gv-step] {
  font-family: 'Barlow', Arial, sans-serif;
}

/* ─── Error display ─────────────────────────────────────────── */
.gv-auth-page [data-gv-error] {
  display: none;
  margin: 12px 0 0;
  padding: 10px 14px;
  background: #fef0f0;
  border: 1px solid #f5c2c2;
  color: #a33;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.45;
}

/* ─── OTP code input ────────────────────────────────────────── */
.gv-auth-page [data-gv-input="code"] {
  font-family: Consolas, 'Courier New', monospace;
  font-size: 24px;
  letter-spacing: 8px;
  text-align: center;
  font-weight: 700;
  padding: 14px 12px;
  width: 100%;
  max-width: 280px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fafaf7;
}
.gv-auth-page [data-gv-input="code"]:focus {
  border-color: #C8962A;
  outline: 2px solid rgba(200, 150, 42, 0.25);
  outline-offset: 1px;
  background: #fff;
}

/* ─── OTP countdown ─────────────────────────────────────────── */
.gv-auth-page [data-gv-otp-countdown] {
  font-family: Consolas, 'Courier New', monospace;
  font-size: 13px;
  color: #888;
  letter-spacing: 1px;
}

/* ─── "Existing account" hint on /register/ ─────────────────── */
.gv-auth-page [data-gv-existing-note] {
  display: none;
  margin: 0 0 14px;
  padding: 10px 14px;
  background: #fffaee;
  border: 1px solid #f0d896;
  color: #7a5a10;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.45;
}

/* ─── Resend / back action buttons ──────────────────────────── */
.gv-auth-page [data-gv-action] {
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  color: #C8962A;
  text-decoration: underline;
  cursor: pointer;
  font-size: 13px;
}
.gv-auth-page [data-gv-action]:hover {
  color: #b6831a;
}

/* ─── Submit button busy state ──────────────────────────────── */
.gv-auth-page [data-gv-submit][aria-busy="true"] {
  opacity: 0.65;
  cursor: progress;
}
.gv-auth-page [data-gv-submit][aria-busy="true"]::after {
  content: ' …';
}

/* ─── Already signed in: hide the form, show vault link ─────── */
.gv-already-signed-in [data-gv-step] {
  display: none !important;
}

/* ─── Trust-device checkbox row ─────────────────────────────── */
.gv-auth-page [data-gv-trust-device] + label,
.gv-auth-page label > [data-gv-trust-device] {
  font-size: 12px;
  color: #666;
}

/* ─── Ghost-mode toggle helper ──────────────────────────────── */
.gv-auth-page [data-gv-toggle="ghost"] + .gv-ghost-explainer {
  font-size: 11px;
  color: #888;
  display: block;
  margin-top: 4px;
  line-height: 1.4;
}

/* ─── Success states ────────────────────────────────────────── */
.gv-auth-page [data-gv-step="request-success"],
.gv-auth-page [data-gv-step="complete-success"] {
  text-align: center;
  padding: 18px 0;
}
.gv-auth-page [data-gv-step="request-success"] h2,
.gv-auth-page [data-gv-step="complete-success"] h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 24px;
  font-weight: 900;
  color: #1F7A3A;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ─── Mobile tweaks ─────────────────────────────────────────── */
@media (max-width: 540px) {
  .gv-auth-page [data-gv-input="code"] {
    font-size: 20px;
    letter-spacing: 6px;
  }
}