/* ==========================================================================
   IDX signup / registration popup -> Clavo front-page look (CSS only)
   Markup (live, verified Nov 9): jQuery UI dialog
     .ui-dialog.IDX-registrationModal[role=dialog][aria-labelledby=ui-dialog-title-IDX-registration]
       .ui-dialog-titlebar > .ui-dialog-title#ui-dialog-title-IDX-registration ("Sign Up")
                          > a.ui-dialog-titlebar-close[role=button] > span.ui-icon ("close")
       #IDX-registration.ui-dialog-content > #IDX-registrationContent
         #IDX-registrationSignup > p (intro) + form#IDX-signupForm
           .IDX-customRegistrationFields > .IDX-control-group#IDX-{firstName,lastName,email,phone}-group
           p.IDX-googleRecaptchaPolicy, #IDX-FormResponse, #IDX-FormActions > button#IDX-submitBtn
           #IDX-leadSignUpLogin > p > a#IDX-toggleLogIn
         #IDX-registrationLogin (login form, hidden until toggled)
     body > .ui-widget-overlay
   Spec: SIGNUP-POPUP-SPEC.md. Lives in the theme (0.4.6+) next to idx-results.css.
   !important is used ONLY where jQuery UI writes inline styles (width/top/left/height).
   ========================================================================== */
body.single-idx-wrapper { --rm-blue:#0b63f6; --rm-blue-deep:#0a4fd1; --rm-cyan:#2fa8ff; --rm-navy:#061531; --rm-ink:#0b1633; --rm-muted:#5b6680; --rm-line:#dce6f5; --rm-field:#7b8db0; --rm-err:#b42318; }

/* ---------- Overlay ---------- */
body.single-idx-wrapper .ui-widget-overlay {
  position: fixed; inset: 0;
  background: rgba(6, 21, 49, .6) !important; opacity: 1 !important; background-image: none !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* ---------- Card ---------- */
body.single-idx-wrapper .ui-dialog.IDX-registrationModal {
  position: fixed !important;
  top: 50% !important; left: 50% !important; transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px)) !important; min-width: 0 !important; height: auto !important; box-sizing: border-box;
  max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  padding: 0; border: 1px solid rgba(47, 168, 255, .22); border-radius: 18px; background: #fff;
  box-shadow: 0 30px 80px rgba(6, 21, 49, .35), 0 0 0 6px rgba(47, 168, 255, .06);
  font-family: Poppins, Arial, sans-serif; color: var(--rm-ink);
}
body.single-idx-wrapper .ui-dialog.IDX-registrationModal:focus { outline: none; }
body.single-idx-wrapper .IDX-registrationModal .ui-dialog-content {
  width: auto !important; min-height: 0 !important; height: auto !important; padding: 0 28px 24px; background: none; border: 0; overflow: visible;
}

/* ---------- Title bar + heading copy ---------- */
body.single-idx-wrapper .IDX-registrationModal .ui-dialog-titlebar {
  position: relative; padding: 28px 72px 0 28px; margin: 0; border: 0; border-radius: 0; background: none;
}
body.single-idx-wrapper .IDX-registrationModal .ui-dialog-titlebar::before {   /* small Clavo-style eyebrow bar */
  content: ""; display: block; width: 40px; height: 4px; margin-bottom: 14px; border-radius: 4px;
  background: linear-gradient(90deg, var(--rm-blue), var(--rm-cyan));
}
body.single-idx-wrapper .IDX-registrationModal .ui-dialog-title {
  float: none; display: block; margin: 0; padding: 0; width: auto;
  font-size: 0; line-height: 0; color: var(--rm-ink);          /* hides "Sign Up" visually */
}
body.single-idx-wrapper .IDX-registrationModal .ui-dialog-title::before {
  content: "Save homes & get new listing alerts";
  display: block; font: 800 24px/1.2 Poppins, Arial, sans-serif; letter-spacing: -.02em; color: var(--rm-ink);
}
body.single-idx-wrapper .IDX-registrationModal #IDX-registrationSignup > p:first-child {
  margin: 8px 0 22px; font-size: 0; line-height: 0;           /* hides "To create an account, fill out the following form:" */
}
body.single-idx-wrapper .IDX-registrationModal #IDX-registrationSignup > p:first-child::before {
  content: "Create a free account to save favorites and get updates.";
  display: block; font: 400 15px/1.55 Poppins, Arial, sans-serif; color: var(--rm-muted);
}
body.single-idx-wrapper .IDX-registrationModal #IDX-registrationLogin > p:first-child {
  margin: 8px 0 22px; font-size: 0; line-height: 0;           /* hides "Current My Listing Manager Members Log In Here:" */
}
body.single-idx-wrapper .IDX-registrationModal #IDX-registrationLogin > p:first-child::before {
  content: "Sign in to your account."; display: block; font: 400 15px/1.55 Poppins, Arial, sans-serif; color: var(--rm-muted);
}

/* ---------- Close (X): 44px target, top-right; Esc already closes (jQuery UI) ---------- */
body.single-idx-wrapper .IDX-registrationModal .ui-dialog-titlebar-close {
  position: absolute; top: 14px; right: 14px; margin: 0; padding: 0;
  width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--rm-ink);
  display: grid; place-items: center; cursor: pointer;
}
body.single-idx-wrapper .IDX-registrationModal .ui-dialog-titlebar-close .ui-icon {
  position: static; margin: 0; width: 18px; height: 18px; background: none !important; text-indent: 0;
  font-size: 0; overflow: hidden; position: relative;              /* text "close" stays as the accessible name */
}
body.single-idx-wrapper .IDX-registrationModal .ui-dialog-titlebar-close .ui-icon::before,
body.single-idx-wrapper .IDX-registrationModal .ui-dialog-titlebar-close .ui-icon::after {
  content: ""; position: absolute; top: 8px; left: 0; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
  transform: rotate(45deg);
}
body.single-idx-wrapper .IDX-registrationModal .ui-dialog-titlebar-close .ui-icon::after { transform: rotate(-45deg); }
body.single-idx-wrapper .IDX-registrationModal .ui-dialog-titlebar-close:hover { background: #eef4ff; border: 0; }
body.single-idx-wrapper .IDX-registrationModal .ui-dialog-titlebar-close:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--rm-blue); }

/* ---------- Fields: 2-up on desktop (First|Last, Email|Phone) ---------- */
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-customRegistrationFields {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px; margin: 0 0 18px;
}
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-control-group {
  float: none; width: auto; max-width: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-control-label {
  margin: 0; padding: 0; float: none; width: auto; text-align: left;
  font: 600 14px/1.3 Poppins, Arial, sans-serif; color: var(--rm-ink); text-transform: none; letter-spacing: 0;
}
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-required { color: var(--rm-err); margin-left: 2px; }
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-controls { margin: 0; float: none; width: auto; }
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-input,
body.single-idx-wrapper .IDX-registrationModal #IDX-registration input[type="text"],
body.single-idx-wrapper .IDX-registrationModal #IDX-registration input[type="email"],
body.single-idx-wrapper .IDX-registrationModal #IDX-registration input[type="password"],
body.single-idx-wrapper .IDX-registrationModal #IDX-registration input[type="tel"] {
  box-sizing: border-box; width: 100%; height: 48px; margin: 0; padding: 0 14px;
  border: 1px solid var(--rm-field); border-radius: 12px; background: #fff; box-shadow: none;
  font: 400 16px/1.2 Poppins, Arial, sans-serif; color: var(--rm-ink);   /* 16px = no iOS zoom on focus */
  -webkit-appearance: none; appearance: none;
}
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-input:hover { border-color: var(--rm-ink); }
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-input:focus,
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-input:focus-visible {
  outline: none; border-color: var(--rm-blue); box-shadow: 0 0 0 3px rgba(11, 99, 246, .22);
}
/* Errors: IDX marks invalid fields client-side; cover the common hooks + aria-invalid */
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-input[aria-invalid="true"],
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-control-group.IDX-has-error .IDX-input,
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-control-group.error .IDX-input,
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-input.IDX-error,
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-input.error { border-color: var(--rm-err); box-shadow: 0 0 0 3px rgba(180, 35, 24, .15); }
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-formResponse:not(:empty) {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(180, 35, 24, .35);
  background: #fef3f2; color: var(--rm-err); font: 500 14px/1.45 Poppins, Arial, sans-serif;
}

/* ---------- reCAPTCHA notice (required wording when the badge is hidden: keep, de-emphasise) ---------- */
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-googleRecaptchaPolicy {
  order: 3; margin: 14px 0 0; text-align: center; font: 400 12px/1.5 Poppins, Arial, sans-serif; color: var(--rm-muted);
}
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-googleRecaptchaPolicy a { color: var(--rm-muted); text-decoration: underline; }

/* ---------- Primary button: full width ---------- */
body.single-idx-wrapper .IDX-registrationModal form#IDX-signupForm,
body.single-idx-wrapper .IDX-registrationModal form#IDX-loginForm { display: flex; flex-direction: column; }
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-customRegistrationFields { order: 1; }
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-formResponse { order: 1; }
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-form-actions { order: 2; margin: 0; padding: 0; }
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-signupLoginToggleWrap { order: 4; }
body.single-idx-wrapper .IDX-registrationModal #IDX-submitBtn,
body.single-idx-wrapper .IDX-registrationModal #IDX-loginSubmit,
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-form-actions .IDX-btn-primary {
  width: 100%; min-height: 52px; margin: 0; padding: 0 20px; border: 0; border-radius: 12px;
  background: var(--rm-blue); color: #fff; cursor: pointer;
  font: 700 16px/1 Poppins, Arial, sans-serif; text-transform: none; letter-spacing: 0;
  box-shadow: 0 14px 30px rgba(11, 99, 246, .32);
}
body.single-idx-wrapper .IDX-registrationModal #IDX-signupForm #IDX-submitBtn { font-size: 0; }        /* "Sign Up!" */
body.single-idx-wrapper .IDX-registrationModal #IDX-signupForm #IDX-submitBtn::after { content: "Create my account"; font-size: 16px; }
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-form-actions .IDX-btn-primary:hover { background: var(--rm-blue-deep); }
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-form-actions .IDX-btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--rm-blue); }

/* ---------- Secondary: "Already have an account? Sign in" ---------- */
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-signupLoginToggleWrap { margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--rm-line); text-align: center; }
body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-signupLoginToggleWrap p,
body.single-idx-wrapper .IDX-registrationModal #IDX-leadSignUpLogin p { margin: 0; text-align: center; }
body.single-idx-wrapper .IDX-registrationModal #IDX-toggleLogIn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
  color: var(--rm-muted); text-decoration: none; font: 400 14px/1.3 Poppins, Arial, sans-serif;
}
body.single-idx-wrapper .IDX-registrationModal #IDX-toggleLogIn span { font-size: 0; }
body.single-idx-wrapper .IDX-registrationModal #IDX-toggleLogIn span::before { content: "Already have an account? "; font-size: 14px; color: var(--rm-muted); }
body.single-idx-wrapper .IDX-registrationModal #IDX-toggleLogIn span::after { content: "Sign in"; font-size: 14px; font-weight: 700; color: var(--rm-blue); text-decoration: underline; text-underline-offset: 3px; }
body.single-idx-wrapper .IDX-registrationModal #IDX-toggleLogIn:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--rm-blue); border-radius: 8px; }

/* ---------- <640px: stacked, near-full-width sheet, keyboard-safe ---------- */
@media (max-width: 639.98px) {
  body.single-idx-wrapper .ui-dialog.IDX-registrationModal {
    top: 16px !important; left: 16px !important; right: 16px; transform: none;
    width: calc(100vw - 32px) !important; max-height: calc(100dvh - 32px);
    border-radius: 18px;
  }
  body.single-idx-wrapper .IDX-registrationModal .ui-dialog-titlebar { padding: 22px 64px 0 20px; }
  body.single-idx-wrapper .IDX-registrationModal .ui-dialog-titlebar-close { top: 10px; right: 10px; }
  body.single-idx-wrapper .IDX-registrationModal .ui-dialog-title::before { font-size: 21px; }
  body.single-idx-wrapper .IDX-registrationModal .ui-dialog-content { padding: 0 20px 20px; }
  body.single-idx-wrapper .IDX-registrationModal #IDX-registration .IDX-customRegistrationFields { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  body.single-idx-wrapper .ui-dialog.IDX-registrationModal, body.single-idx-wrapper .ui-widget-overlay { transition: none !important; animation: none !important; }
}