/*
 * auth-modal.css — login / signup / forgot-password modal for the standalone
 * dynamic pages (home-override etc).
 *
 * Visual design MIRRORS the legacy site modal (#loginModal /
 * Views/Shared/Partials/Dialogs/_LoginSignup.cshtml) so the standalone page
 * presents the exact same login experience as the rest of the portal:
 *   - white card, gray close, max-width 350px
 *   - navy-gradient inactive tab / light-gradient active tab
 *   - white bordered Google button, gray "OR" pill divider
 *   - white inputs (1px #ccc, radius 2px), placeholder-only labels
 *   - teal (#49b9ad) submit button
 *   - gray underlined "Forgotten Password" link + Cloudflare legal footer
 *
 * Self-contained: no jQuery / Bootstrap / site.min.css dependency. Class names
 * are namespaced (auth-*) so they never collide with the host page.
 */

.auth-modal-overlay,
.auth-modal-overlay * {
  box-sizing: border-box;
}

/* ---------- overlay ---------- */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem 1rem 1rem;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.5);
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.auth-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* ---------- dialog ---------- */
.auth-modal {
  position: relative;
  width: 100%;
  max-width: 350px;
  margin: auto;
  background: #ffffff;
  color: #263957;
  border-radius: 4px;
  box-shadow: 0 5px 22px rgba(0, 0, 0, 0.35);
  transform: translateY(-12px);
  transition: transform 0.15s ease;
}

.auth-modal-overlay.is-open .auth-modal {
  transform: translateY(0);
}

.auth-modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #000000;
  opacity: 0.4;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.auth-modal__close:hover {
  opacity: 0.75;
}

.auth-modal__body {
  padding: 15px 22px 28px;
  font-size: 13px;
  text-align: center;
}

/* ---------- tabs ---------- */
.auth-tabs {
  display: flex;
  flex-wrap: nowrap;
  margin: 6px 0 24px;
}

.auth-tab {
  flex: 1;
  margin: 0 3px 2px 0;
  padding: 10px;
  border: 0;
  border-bottom: solid 2px #d6d6d6;
  background: linear-gradient(to bottom, #0a1f41, #274e73);
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.auth-tab:last-child {
  margin-right: 0;
}

.auth-tab:hover {
  background: linear-gradient(to top, #ffffff, #d9d9d9);
  color: #0a1f41;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.1);
}

.auth-tab.is-active {
  background: linear-gradient(to top, #ffffff, #d9d9d9);
  color: #0a1f41;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* ---------- panels ---------- */
.auth-panel {
  display: none;
}

.auth-panel.is-active {
  display: block;
}

/* ---------- google button ---------- */
.auth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 38px;
  padding: 0 16px;
  border: solid 1px #eee;
  border-radius: 2px;
  background: #ffffff;
  color: #444444;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.auth-google:hover {
  background: #f7f7f7;
  border-color: #ddd;
}

.auth-google svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ---------- divider ---------- */
.auth-or {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 17px 0;
}

.auth-or::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: #eeeeee;
}

.auth-or__pill {
  position: relative;
  z-index: 1;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 14px;
  background: #eeeeee;
  border: 1px solid #e3e4e8;
  border-radius: 24px;
  color: #676767;
  font-size: 13px;
  white-space: nowrap;
}

/* ---------- fields ---------- */
.auth-field {
  margin-bottom: 12px;
  text-align: left;
}

/* legacy modal uses placeholders only — visually hide labels but keep them
   for screen readers / accessibility */
.auth-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.auth-input {
  width: 100%;
  padding: 9px 11px;
  border: solid 1px #ccc;
  border-radius: 2px;
  background: #ffffff;
  color: #263957;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  outline: none;
  transition: border-color 0.15s ease;
}

.auth-input::placeholder {
  color: #999999;
}

.auth-input:focus {
  border-color: #4285f4;
  box-shadow: none;
}

/* ---------- checkbox row ---------- */
.auth-check {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  margin: 12px 0;
  font-size: 14px;
  color: #333333;
  text-align: left;
}

.auth-check.center {
  justify-content: center;
}

.auth-check input {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  accent-color: #2c7be5;
}

/* ---------- primary button ---------- */
.auth-submit {
  width: 100%;
  height: 38px;
  padding: 0 28px;
  border: none;
  border-radius: 2px;
  background: #49b9ad;
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 35px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.auth-submit:hover {
  background: #3fa99e;
}

.auth-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---------- links / helper rows ---------- */
.auth-helper {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: #606060;
}

.auth-link {
  color: #606060;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.auth-link:hover {
  color: #333333;
}

/* forgot-password heading inside the forgot panel */
.auth-heading {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: #263957;
  text-align: center;
}

/* ---------- messages ---------- */
.auth-error {
  display: none;
  margin-bottom: 12px;
  padding: 0.55rem 0.7rem;
  border: 1px solid #f1c6c6;
  border-radius: 2px;
  background: #fdf0f0;
  color: #c0392b;
  font-size: 13px;
  text-align: center;
}

.auth-error.is-visible {
  display: block;
}

.auth-success {
  display: none;
  margin-bottom: 12px;
  padding: 0.55rem 0.7rem;
  border: 1px solid #bfe3c6;
  border-radius: 2px;
  background: #eef9f0;
  color: #2e7d4f;
  font-size: 13px;
  text-align: center;
}

.auth-success.is-visible {
  display: block;
}

/* ---------- turnstile + legal ---------- */
.auth-turnstile {
  display: flex;
  justify-content: center;
  margin: 12px 0;
  min-height: 0;
}

.auth-turnstile:empty {
  margin: 0;
}

.auth-legal {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.45;
  color: #888888;
  text-align: center;
}

.auth-legal a {
  color: #2c7be5;
  text-decoration: none;
}

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

/* ---------- progress ---------- */
.auth-progress {
  display: none;
  height: 3px;
  margin: 4px 0 12px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(73, 185, 173, 0.2);
  position: relative;
}

.auth-progress.is-active {
  display: block;
}

.auth-progress::after {
  content: "";
  position: absolute;
  left: -40%;
  width: 40%;
  height: 100%;
  background: #49b9ad;
  animation: auth-indeterminate 1s infinite linear;
}

@keyframes auth-indeterminate {
  0% { left: -40%; }
  100% { left: 100%; }
}

/* device hint text */
.auth-device-hint {
  margin: 0 0 12px;
  font-size: 14px;
  color: #444444;
  text-align: center;
}

/* hidden helper */
.auth-hidden {
  display: none !important;
}