/* vv-otp-modal-fit 20260919T225100Z
 * Fit live WhoAreYouModal / RoleGuard OTP panel to the viewport.
 * Live dialog: [role=dialog][aria-labelledby=vv-signin-modal-title] (z-10000).
 * PRE-LAUNCH .vv-demo-banner is z-9990 and must never cover Verify.
 * Does not restyle Super Map / MLS gold-frame. Does not change auth fetch.
 */

:root {
  --vv-otp-safe-top: env(safe-area-inset-top, 0px);
  --vv-otp-safe-bottom: env(safe-area-inset-bottom, 0px);
  --vv-otp-max-h: min(90vh, calc(100dvh - 16px - var(--vv-otp-safe-top) - var(--vv-otp-safe-bottom)));
}

html[data-vv-otp-modal-open="1"],
html[data-vv-otp-modal-open="1"] body {
  overflow: hidden !important;
}

/* ---- PRE-LAUNCH strip: tuck whenever the auth dialog is open ---- */
html[data-vv-otp-modal-open="1"] .vv-demo-banner,
html[data-vv-otp-modal-open="1"] .vv-watermark-overlay,
html[data-vv-otp-modal-open="1"] [data-vv-prelaunch-banner],
body:has([role="dialog"][aria-labelledby="vv-signin-modal-title"]) .vv-demo-banner,
body:has([role="dialog"][aria-labelledby="vv-signin-modal-title"]) .vv-watermark-overlay,
body:has([role="dialog"][aria-labelledby="vv-signup-title"]) .vv-demo-banner,
body:has([data-vv-signup-modal]) .vv-demo-banner,
body:has(.vv-signup-modal-root) .vv-demo-banner,
.vv-demo-banner[data-vv-otp-tucked="1"] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  z-index: 1 !important;
}

/* If the strip is still painted, keep it under the dialog (z-10000). */
body:has([role="dialog"][aria-labelledby="vv-signin-modal-title"]) .vv-demo-banner,
html[data-vv-otp-modal-open="1"] .vv-demo-banner {
  z-index: 40 !important;
}

/* ---- Live WhoAreYouModal / RoleGuard OTP shell ---- */
[role="dialog"][aria-labelledby="vv-signin-modal-title"],
[role="dialog"][aria-labelledby="vv-signup-title"],
[data-vv-signup-modal].vv-signup-modal-root,
.vv-signup-modal-root {
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding-top: max(8px, var(--vv-otp-safe-top)) !important;
  padding-bottom: max(8px, var(--vv-otp-safe-bottom)) !important;
  align-items: center !important;
  justify-content: center !important;
}

[role="dialog"][aria-labelledby="vv-signin-modal-title"] > .relative.w-full,
[role="dialog"][aria-labelledby="vv-signup-title"] > .relative.w-full,
[role="dialog"][aria-labelledby="vv-signin-modal-title"] > [data-vv-otp-card],
.vv-signup-card {
  max-height: var(--vv-otp-max-h) !important;
  width: min(480px, calc(100vw - 32px)) !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

[role="dialog"][aria-labelledby="vv-signin-modal-title"] .relative.w-full.rounded-2xl.overflow-hidden,
[role="dialog"][aria-labelledby="vv-signin-modal-title"] .rounded-2xl.shadow-2xl {
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Scroll the step body. Live content uses style min-height: 280px. */
[role="dialog"][aria-labelledby="vv-signin-modal-title"] [style*="min-height"],
[role="dialog"][aria-labelledby="vv-signin-modal-title"] [data-vv-otp-scroll],
.vv-signup-card {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  max-height: 100%;
}

/* Primary CTAs stay in the scrollport. Secondary (employee, legal) may scroll. */
/* BUTTER 20260919T225100Z: sticky removed — trapped Phone/TOS taps on mobile */
[data-testid="vv-auth-send-email-otp"],
[data-testid="vv-auth-verify-email-otp"],
[data-testid="vv-auth-send-sms"],
[data-vv-signup-submit],
.vv-signup-card button[type="submit"] {
  position: static !important;
  bottom: auto !important;
  z-index: auto !important;
  flex-shrink: 0 !important;
}

[data-testid="vv-auth-sso-row"],
.vv-signup-sso,
.vv-auth-sso-row {
  position: static !important;
  bottom: auto !important;
  z-index: auto !important;
  padding-top: 8px !important;
  background: transparent !important;
}

/* Short / 1280×800 / minimized windows — tighten, do not clip Verify. */
@media (max-height: 860px) {
  [role="dialog"][aria-labelledby="vv-signin-modal-title"] {
    padding-top: max(4px, var(--vv-otp-safe-top)) !important;
    padding-bottom: max(4px, var(--vv-otp-safe-bottom)) !important;
  }

  [role="dialog"][aria-labelledby="vv-signin-modal-title"] .p-6 {
    padding: 12px 16px !important;
  }

  [role="dialog"][aria-labelledby="vv-signin-modal-title"] .mb-8 {
    margin-bottom: 12px !important;
  }

  [role="dialog"][aria-labelledby="vv-signin-modal-title"] .mb-5,
  [role="dialog"][aria-labelledby="vv-signin-modal-title"] .mb-6 {
    margin-bottom: 10px !important;
  }

  [data-testid="vv-auth-email-otp-block"] {
    margin-bottom: 8px !important;
    padding: 8px 10px !important;
  }

  [data-testid="vv-auth-tos"],
  [data-testid="vv-auth-tos-block"] {
    min-height: 0 !important;
    margin: 8px 0 4px !important;
    padding: 8px 10px !important;
  }

  [data-testid="vv-auth-employee-login"] {
    min-height: 40px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

@media (max-height: 700px) {
  :root {
    --vv-otp-max-h: min(96vh, calc(100dvh - 8px - var(--vv-otp-safe-top) - var(--vv-otp-safe-bottom)));
  }

  [role="dialog"][aria-labelledby="vv-signin-modal-title"] img#vv-signin-modal-title,
  [role="dialog"][aria-labelledby="vv-signin-modal-title"] #vv-signin-modal-title {
    height: 36px !important;
    max-height: 36px !important;
  }
}

@media (max-width: 480px) {
  [role="dialog"][aria-labelledby="vv-signin-modal-title"] > .relative.w-full,
  .vv-signup-card {
    width: min(100vw - 16px, 480px) !important;
  }
}

/* ---- Logged-in mobile account chrome (SignInPopover + hamburger) ---- */
@media (max-width: 767px) {
  header,
  header nav,
  [class*="Header"] {
    overflow: visible !important;
  }

  [data-vv-account-trigger="1"],
  .flex.xl\\:hidden .gold-gradient-btn {
    display: inline-flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 44px !important;
    min-width: 44px !important;
    flex-shrink: 0 !important;
    z-index: 10040 !important;
  }

  [data-vv-account-menu="1"] {
    position: fixed !important;
    top: auto !important;
    right: 12px !important;
    left: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    min-width: 0 !important;
    width: auto !important;
    max-height: min(70vh, calc(100dvh - 88px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 10050 !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html[data-vv-account-open="1"] .vv-demo-banner,
  html[data-vv-account-open="1"] .vv-watermark-overlay,
  body:has([data-vv-account-dock]) .vv-demo-banner,
  body:has([data-vv-account-dock]) .vv-watermark-overlay {
    display: none !important;
    pointer-events: none !important;
  }
}

.vv-account-dock {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(0, 26, 21, 0) 0%, #00352b 18%, #002a22 100%);
  border-top: 1px solid rgba(212, 175, 55, 0.28);
}

.vv-account-dock[data-vv-account-dock="bar"] {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10045;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 26, 21, 0.96);
}

html[data-vv-otp-modal-open="1"] .vv-account-dock {
  display: none !important;
}

@media (min-width: 768px) {
  .vv-account-dock[data-vv-account-dock="bar"] {
    display: none !important;
  }
}

.vv-account-dock a,
.vv-account-dock button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  width: 100%;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}

.vv-account-dock a {
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #f5ec9b;
}

.vv-account-dock [data-vv-sign-out] {
  background: rgba(231, 76, 60, 0.12);
  border: 1px solid rgba(231, 76, 60, 0.45);
  color: #ff6b6b;
}