/*
 * Login / 2FA / password pages — legacy application/views/new_login_view.php: dark two-pane page,
 * truck photo with the animated "THE ROAD TO SUCCESS STARTS HERE." on the left (hidden on phones), the
 * 250px sign-in column on the right (logo, CALL line, placeholder-only fields, yellow SIGN IN button,
 * underlined white links) and the yellow snackbar for messages.
 * Readex Pro (SIL Open Font License 1.1) is self-hosted from public/fonts instead of cdnfonts.com.
 */
/* Only the 400 face, as the legacy cdnfonts stylesheet serves: bold text is synthesized from it, which is narrower than the
   real 700 (legacy "PASSWORD RECOVERY:" fits on one line). */
@font-face { font-family: 'Readex Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/readex-pro-latin.woff2') format('woff2'); }

.fs_login { margin: 0; font-family: 'Readex Pro', system-ui, sans-serif; min-height: 100vh; background-color: #1B1E2A; color: #fff; }
.fs_login .container { display: flex; width: 100vw; min-height: 100vh; }
.fs_login .image-section, .fs_login .login-section { flex: 1; display: flex; justify-content: center; align-items: center; }
.fs_login .image-section { background: #1B1E2A url('../img/login/truck-background.jpg') center / cover no-repeat; }
.fs_login .login-section { background-color: #1B1E2A; padding: 20px; }
.fs_login .login-box { max-width: 250px; width: 100%; text-align: center; }
.fs_login .login-box.wide { max-width: 340px; }
.fs_login .logo img { max-width: 240px; max-height: 80px; }
.fs_login .wordmark { display: inline-block; font-size: 30px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fff; }
.fs_login .wordmark::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 8px; border-radius: 3px; background: #8227E3; vertical-align: 2px; }
.fs_login .customer-service { font-size: 16px; color: #fff; margin: 16px 0 40px; }
.fs_login .customer-service strong { color: #FFD600; }
.fs_login .login-box p { font-size: 16px; color: #fff; margin: 0 0 20px; line-height: 1.35; }
.fs_login .login-box p.small { font-size: 13px; color: #c9cbd4; }
.fs_login .login-box h1 { font-size: 18px; font-weight: 700; letter-spacing: 1px; margin: 0 0 14px; color: #fff; }
.fs_login form { display: flex; flex-direction: column; margin: 0; }
.fs_login input[type="text"], .fs_login input[type="password"] {
  font-family: 'Readex Pro', system-ui, sans-serif; padding: 10px; margin: 0 0 20px; border: 1px solid #ccc; border-radius: 5px;
  font-size: 14px; width: calc(100% - 20px); color: #1B1E2A; background: #fff;
}
.fs_login input.code { text-align: center; letter-spacing: 6px; font-size: 20px; }
.fs_login .password-wrapper { position: relative; }
.fs_login .password-wrapper input { padding-right: 40px; width: calc(100% - 52px); }
.fs_login .toggle-password { position: absolute; top: 9px; right: 10px; cursor: pointer; color: #1B1E2A; background: none; border: 0; padding: 0; line-height: 0; }
.fs_login .toggle-password svg { width: 25px; height: 25px; }
.fs_login .button {
  font-family: 'Readex Pro', system-ui, sans-serif; padding: 10px; background-color: #FFD600; color: #1B1E2A; border: none;
  border-radius: 5px; font-size: 17px; cursor: pointer; font-weight: bold; margin-bottom: 10px; text-decoration: none; display: block;
}
.fs_login .button.secondary { background: transparent; color: #fff; border: 1px solid #FFD600; font-size: 15px; }
.fs_login .forgot, .fs_login .link-button { color: #fff; text-decoration: underline; font-size: 14px; margin-top: 10px; background: none; border: 0; cursor: pointer; font-family: inherit; padding: 0; }
.fs_login .field-error { color: #FFD600; font-size: 13px; margin: -14px 0 14px; text-align: left; }
.fs_login .hint { font-size: 13px; color: #c9cbd4; text-align: left; margin: -12px 0 16px; }
.fs_login .checkbox_line { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #fff; text-align: left; margin: -10px 0 18px; cursor: pointer; }
.fs_login .checkbox_line input { accent-color: #FFD600; }
.fs_login .qr { background: #fff; border-radius: 6px; padding: 8px; width: 184px; height: 184px; margin: 0 auto 12px; display: block; }
.fs_login .manual-key { font-family: ui-monospace, Menlo, monospace; font-size: 14px; letter-spacing: 1px; background: #2a2e3f; border-radius: 5px; padding: 8px; margin: 0 0 18px; word-break: break-all; user-select: all; }
.fs_login ol.steps { text-align: left; font-size: 14px; padding-left: 20px; margin: 0 0 16px; line-height: 1.4; }
.fs_login .codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-family: ui-monospace, Menlo, monospace; font-size: 15px; background: #2a2e3f; border-radius: 5px; padding: 12px; margin: 0 0 18px; user-select: all; }
.fs_login .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* FS-947 dev-only quick-login box (local only) */
.fs_login .dev-login-box { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 30px; padding: 10px 14px; border: 1px solid #FFD600; border-radius: 5px; position: relative; left: 50%; transform: translateX(-50%); width: max-content; }
.fs_login .dev-login-label { margin: 0 !important; font-size: 12px !important; font-weight: bold; letter-spacing: 1px; color: #FFD600 !important; white-space: nowrap; }
.fs_login .dev-login-buttons { display: flex; gap: 8px; }
.fs_login .dev-login-btn { font-family: inherit; padding: 6px 10px; background: transparent; color: #fff; border: 1px solid #FFD600; border-radius: 5px; font-size: 12px; cursor: pointer; }
.fs_login .dev-login-btn:hover { background-color: #FFD600; color: #1B1E2A; }

#snackbar { visibility: hidden; min-width: 250px; max-width: 90vw; background-color: #FFD600; color: #1B1E2A; text-align: center; border-radius: 5px; padding: 16px; position: fixed; z-index: 15; bottom: 30px; right: 25vw; transform: translateX(50%); font-size: 15px; font-weight: bold; box-sizing: border-box; }
#snackbar.show { visibility: visible; animation: fs_fadein 0.5s, fs_fadeout 0.5s 9.7s; }
@keyframes fs_fadein { from { bottom: 0; opacity: 0; } to { bottom: 30px; opacity: 1; } }
@keyframes fs_fadeout { from { bottom: 30px; opacity: 1; } to { bottom: 0; opacity: 0; } }

.fs_login .text-wrapper { display: inline-block; }
.fs_login .text-line { display: block; font-size: 2rem; font-weight: bold; opacity: 0; transform: translateY(50px); text-align: right; color: #fff; letter-spacing: 4px; }
.fs_login .text-line.shown { opacity: 1; transform: translateY(0); }
.fs_login .text-line.fade { transition: all 3s ease; }
.fs_login .highlight { color: #FFD700; }

@media (max-width: 767px) {
  .fs_login .image-section { display: none; }
  #snackbar { right: 50vw; }
}
@media (prefers-reduced-motion: reduce) { .fs_login .text-line, .fs_login .text-line.fade { transition: none; } }
/* One-time-code page (legacy new_verification_otp: "Send Code to Phone instead" in yellow) + 30-day unblock notice */
.fs_login .link-button.otp-alt { color: #FFD600; }
.fs_login .inactive-notice { background: #2a2e3f; border-radius: 5px; padding: 10px; color: #fff; }
.fs_login .inactive-notice a { color: #FFD600; }
.fs_login #reset-login-panel { display: flex; flex-direction: column; }

/* Legacy new_forgot_login_view.php / new_forgot_password_view.php: the recovery steps use .select boxes and purple buttons. */
.fs_login .forgot_steps .select { font-family: 'Readex Pro', system-ui, sans-serif; padding: 10px; margin: 0 0 20px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; background: #fff; color: #1B1E2A; }
.fs_login .forgot_steps .button { background-color: #8227E3; color: #fff; width: 100%; }
.fs_login .forgot_steps [hidden] { display: none; }

/* Legacy login fields: light grey italic placeholders (rgb 202,202,202 measured on the live page). */
.fs_login input::placeholder { color: #cacaca; font-style: italic; opacity: 1; }