/* ==========================================================================
   ForceVera sign-in shell (layouts/guest): login, register, OTP, passwords,
   subscription checkout. Loaded after the template CSS.
   Brand guidelines v1.0 (Oct 2026): Navy leads; Sora for display, DM Sans for text.
   ========================================================================== */
:root {
  --fv-navy: #031323;
  --fv-navy-2: #020c17;
  --fv-deep: #0a2542;
  --fv-blue: #087cff;
  --fv-blue-600: #0067db;
  --fv-cyan: #05d8e8;
  --fv-teal: #19c9c0;
  --fv-mist: #91a5b8;
  --fv-bg: #f6f9fc;
  --fv-line: #dce7f1;
  --fv-ink: #031323;
  --fv-muted: #60758b;
  --fv-grad: linear-gradient(90deg, #087cff 0%, #05d8e8 100%);
  --fv-font-display: "Sora", "DM Sans", system-ui, sans-serif;
  --fv-font-text: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.fv-auth {
  margin: 0; min-height: 100vh; background: var(--fv-bg); color: var(--fv-ink);
  font-family: var(--fv-font-text); letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  --bs-body-font-family: var(--fv-font-text); --bs-primary: #087cff; --bs-primary-rgb: 8, 124, 255;
  --bs-link-color: #087cff; --bs-link-color-rgb: 8, 124, 255;
}
.fv-auth-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); min-height: 100vh; }

/* ---------- Brand panel ---------- */
.fv-auth-brand {
  position: relative; overflow: hidden; color: #fff; isolation: isolate;
  background-color: var(--fv-navy);
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px;
}
.fv-auth-glow {
  position: absolute; z-index: -1; right: calc(21% - 380px); top: 50%; width: 760px; height: 760px; transform: translateY(-50%);
  background: radial-gradient(circle, rgba(8, 124, 255, .42) 0%, rgba(8, 124, 255, .12) 38%, rgba(8, 124, 255, 0) 66%);
}
.fv-auth-symbol {
  /* sized to the panel so it never overlaps the copy; never cropped, faded or tinted */
  position: absolute; z-index: -1; right: 6%; top: 50%; width: 30%; max-width: 330px; height: auto; transform: translateY(-50%);
  filter: drop-shadow(0 30px 60px rgba(3, 19, 35, .55));
}
.fv-auth-brand-inner {
  position: relative; height: 100%; min-height: 100vh; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 44px 56px;
}
.fv-auth-logo { display: inline-flex; text-decoration: none; }
.fv-auth-logo img { height: 30px; width: auto; }
.fv-auth-copy { max-width: min(470px, 60%); }
.fv-auth-kicker {
  margin: 0 0 18px; color: var(--fv-cyan); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
}
.fv-auth-brand h1 {
  font-family: var(--fv-font-display); font-weight: 700; font-size: clamp(34px, 3.4vw, 46px); line-height: 1.08;
  letter-spacing: -.025em; margin: 0 0 18px; color: #fff;
}
.fv-auth-brand h1 span { display: block; color: var(--fv-cyan); }
.fv-auth-lead { color: rgba(255, 255, 255, .7); font-size: 16px; line-height: 1.6; margin: 0 0 30px; }
.fv-auth-pillars { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.fv-auth-pillars li { display: flex; gap: 14px; align-items: baseline; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
.fv-auth-pillars em { font-style: normal; font-family: var(--fv-font-display); font-weight: 600; font-size: 13px; color: var(--fv-blue); min-width: 22px; }
.fv-auth-pillars b { display: block; font-family: var(--fv-font-display); font-weight: 600; font-size: 15.5px; color: #fff; margin-bottom: 2px; }
.fv-auth-pillars span { display: block; font-size: 14px; color: rgba(255, 255, 255, .62); }
.fv-auth-foot {
  display: flex; justify-content: space-between; gap: 16px; margin: 0;
  color: var(--fv-mist); font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
}

/* ---------- Form side ---------- */
.fv-auth-side { display: flex; flex-direction: column; min-height: 100vh; background: var(--fv-bg); }
.fv-auth-form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.fv-auth-card {
  width: 100%; max-width: 440px; box-sizing: border-box; background: #fff; border: 1px solid var(--fv-line);
  border-radius: 24px; padding: 38px 36px; box-shadow: 0 1px 2px rgba(3, 19, 35, .04), 0 24px 48px rgba(3, 19, 35, .08);
}
.fv-auth-card-logo { height: 30px; width: auto; margin-bottom: 28px; }
.fv-auth-card h2 { font-family: var(--fv-font-display); font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; color: var(--fv-ink); }
.fv-auth-sub { color: var(--fv-muted); font-size: 14.5px; margin: 0 0 26px; }
.fv-auth-side-foot { display: flex; justify-content: center; gap: 18px; padding: 0 24px 24px; font-size: 12.5px; color: var(--fv-muted); }
.fv-auth-side-foot a { color: var(--fv-muted); text-decoration: none; }
.fv-auth-side-foot a:hover { color: var(--fv-blue); }

/* Top nav (login, register): back to the ForceVera landing page */
.fv-auth-nav { display: flex; align-items: center; gap: 18px; padding: 22px 32px 0; }
.fv-auth-nav a { text-decoration: none; white-space: nowrap; }
.fv-auth-nav-home { display: inline-flex; align-items: center; gap: 9px; font-family: var(--fv-font-display); font-weight: 700; font-size: 15.5px; color: var(--fv-ink); letter-spacing: -.01em; }
.fv-auth-nav-home img { height: 22px; width: auto; }
.fv-auth-nav-home:hover { color: var(--fv-blue); }
.fv-auth-nav-links { display: flex; gap: 16px; margin-left: auto; }
.fv-auth-nav-links a { color: var(--fv-muted); font-size: 14px; font-weight: 500; }
.fv-auth-nav-links a:hover { color: var(--fv-ink); }
.fv-auth-nav-cta {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--fv-line);
  background: #fff; color: var(--fv-ink); font-size: 14px; font-weight: 600; transition: border-color .15s, color .15s;
}
.fv-auth-nav-cta:hover { border-color: var(--fv-blue); color: var(--fv-blue); }

/* Form controls: the new markup and the template markup used by the other guest pages */
.fv-auth-card .form-label { font-weight: 600; font-size: 13px; color: var(--fv-ink) !important; margin-bottom: 6px; }
.fv-auth-card .form-control, .fv-auth-card .form-select {
  height: 48px; border-radius: 12px !important; border: 1px solid var(--fv-line); background: #fff; font-size: 14.5px; color: var(--fv-ink);
  box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
.fv-auth-card textarea.form-control { height: auto; }
.fv-auth-card .form-control::placeholder { color: var(--fv-mist); opacity: 1 !important; }
.fv-auth-card .form-control:focus, .fv-auth-card .form-select:focus {
  border-color: var(--fv-blue); box-shadow: 0 0 0 4px rgba(8, 124, 255, .12);
}
.fv-auth-card .form-control:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; }
.fv-auth-card .search-icon { color: var(--fv-muted); z-index: 2; }
.fv-auth-card .ps-5 { padding-left: 44px !important; }
.fv-input { position: relative; }
.fv-input > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--fv-muted); font-size: 15px; z-index: 2; }
.fv-input .form-control { padding-left: 44px; padding-right: 46px; }
.fv-input-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); z-index: 2; width: 36px; height: 36px;
  border: 0; border-radius: 9px; background: transparent; color: var(--fv-muted);
}
.fv-input-toggle:hover { background: var(--fv-bg); color: var(--fv-ink); }
.fv-auth-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 22px; font-size: 13.5px; }
.fv-auth-card .form-check-input:checked { background-color: var(--fv-blue); border-color: var(--fv-blue); }
.fv-auth-card .form-check-label { color: var(--fv-ink); }
.fv-auth-card a { color: var(--fv-blue); font-weight: 600; text-decoration: none; }
.fv-auth-card a:hover { color: var(--fv-blue-600); text-decoration: underline; }
.fv-auth-card .btn-primary, .fv-btn-gradient {
  height: 50px; border: 0 !important; border-radius: 12px !important; background: var(--fv-grad) !important; color: var(--fv-navy) !important;
  font-weight: 600; font-size: 15px; box-shadow: 0 10px 24px rgba(8, 124, 255, .28); transition: filter .15s, transform .15s;
}
.fv-auth-card .btn-primary:hover, .fv-btn-gradient:hover { filter: brightness(1.06); transform: translateY(-1px); }
.fv-auth-card .btn-primary:focus-visible, .fv-btn-gradient:focus-visible { outline: 3px solid rgba(8, 124, 255, .35); outline-offset: 2px; }
/* Submit button while the request is being processed (script in layouts/guest) */
.fv-auth-card .btn.is-loading { display: inline-flex; align-items: center; justify-content: center; gap: 10px; opacity: .85; cursor: progress; transform: none; pointer-events: none; }
.fv-auth-card .btn.is-loading::before {
  content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent; animation: fv-spin .7s linear infinite;
}
@keyframes fv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fv-auth-card .btn.is-loading::before { animation-duration: 2s; } }

/* Password strength (partials/password_strength): red = weak, yellow = nearly there, green = strong */
.fv-pw { margin-top: 10px; --fv-pw-color: var(--fv-line); }
.fv-pw[data-level="weak"] { --fv-pw-color: #e5484d; }
.fv-pw[data-level="medium"] { --fv-pw-color: #f5a524; }
.fv-pw[data-level="strong"] { --fv-pw-color: #17b26a; }
.fv-pw-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fv-pw-bars span { height: 6px; border-radius: 99px; background: var(--fv-line); transition: background-color .2s; }
.fv-pw[data-score="1"] .fv-pw-bars span:nth-child(-n+1),
.fv-pw[data-score="2"] .fv-pw-bars span:nth-child(-n+2),
.fv-pw[data-score="3"] .fv-pw-bars span:nth-child(-n+3),
.fv-pw[data-score="4"] .fv-pw-bars span { background: var(--fv-pw-color); }
.fv-pw-label { margin: 8px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--fv-muted); }
.fv-pw[data-level="weak"] .fv-pw-label { color: #c62f35; }
.fv-pw[data-level="medium"] .fv-pw-label { color: #a86400; }
.fv-pw[data-level="strong"] .fv-pw-label { color: #0f8a50; }
.fv-pw.is-required:not([data-level="strong"]) .fv-pw-label { color: #c62f35; }
.fv-pw-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 12.5px; color: var(--fv-muted); }
.fv-pw-rules li { display: flex; align-items: baseline; gap: 7px; }
.fv-pw-rules i { font-size: 7px; color: var(--fv-mist); transform: translateY(-2px); }
.fv-pw-rules li.is-met { color: var(--fv-ink); }
.fv-pw-rules li.is-met i { font-size: 12px; color: #17b26a; transform: none; }
@media (max-width: 575.98px) { .fv-pw-rules { grid-template-columns: 1fr; } }

.fv-auth-divider { display: flex; align-items: center; gap: 12px; color: var(--fv-muted); font-size: 12.5px; margin: 24px 0 18px; }
.fv-auth-divider::before, .fv-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--fv-line); }
.fv-auth-alt { text-align: center; font-size: 14px; color: var(--fv-muted); margin: 0; }
.fv-auth-card .white { color: var(--fv-muted) !important; }
.fv-auth-card .black { color: var(--fv-ink) !important; }
.fv-auth-card .radius-30 { border-radius: 12px !important; }
.fv-auth-card .alert { border-radius: 12px; font-size: 13.5px; }
/* Template leftover: style.css fixes .loginContent at 320px, wider than the card on small phones */
.fv-auth-card .loginContent { width: auto; }
.fv-auth-card { min-width: 0; }

@media (max-width: 991.98px) {
  .fv-auth-grid { grid-template-columns: 1fr; }
  .fv-auth-brand { display: none; }
}
@media (max-width: 1199.98px) and (min-width: 992px) {
  .fv-auth-nav-links { display: none; }
  .fv-auth-nav-cta { margin-left: auto; }
}
@media (max-width: 575.98px) {
  .fv-auth-nav { padding: 16px 16px 0; gap: 14px; }
  .fv-auth-nav-links { gap: 14px; }
  .fv-auth-nav-links a:not(:nth-child(2)) { display: none; }
  .fv-auth-nav-cta { height: 36px; padding: 0 12px; font-size: 13.5px; }
  .fv-auth-form { padding: 24px 16px; align-items: flex-start; }
  .fv-auth-card { padding: 28px 22px; border-radius: 20px; }
  /* iOS Safari zooms into any field under 16px when it is focused */
  .fv-auth-card .form-control, .fv-auth-card .form-select { font-size: 16px; }
}

/* Third-party widgets in the palette */
.pace .pace-progress { background: var(--fv-grad) !important; height: 3px !important; }
.swal2-popup { font-family: var(--fv-font-text) !important; border-radius: 20px !important; }
.swal2-title { font-family: var(--fv-font-display) !important; color: var(--fv-ink) !important; font-weight: 600 !important; }
.swal2-styled.swal2-confirm { background: var(--fv-blue) !important; border-radius: 10px !important; font-weight: 600 !important; }