/* ==========================================================================
   SYDNEY EXPRESS — AUTH MODAL  (sign in / sign up / forgot password)
   v1.0.0 · 2026-08-18
   --------------------------------------------------------------------------
   INSTALL:  Upload this file to  wp-content/themes/listingpro-child/auth-modal.css
             se-auth-modal.php enqueues it automatically. Nothing to paste.

   DO NOT paste this into Appearance > Customize > Additional CSS.
   That was tried and it failed: ~35KB pasted into the Customizer's CodeMirror
   textarea silently lost its first block, which happened to be section 1
   (TOKENS). Every rule below references var(--navy), var(--font), var(--ease)
   and so on, so the moment those custom properties are missing every
   declaration using them becomes invalid and is discarded. The result was a
   completely unstyled modal even though the CSS was visibly present in the
   page source. A file either uploads or it does not; it cannot half-arrive.

   If a copy of this block is still sitting in Additional CSS, delete it —
   otherwise the two fight and the stale copy wins wherever it loads later.

   REPLACEMENT INSTRUCTIONS
   Delete any existing rule anywhere in Additional CSS that targets:
       #modal-3, .login-form-popup, .siginincontainer, .siginupcontainer,
       .forgetpasswordcontainer, .social-login, .pop-form-bottom,
       .md-overlay, .check_policy
   This block replaces all of it. Do not merge it with an older version —
   the panel stacking model changed (absolute -> grid) and the two models
   cannot coexist.

   COMPANION FILE
   Requires the se_auth_modal_* JS in listingpro-child/functions.php.
   Without it the aside, the sub-headings, the consent block and the
   se-mode-* state classes never exist, and this stylesheet degrades to
   "the stock modal, restyled" rather than breaking.

   WHAT WE OVERRIDE AND WHY (verified against listingpro/assets/css/main.css)
   L6800  .login-form-popup       width:556px, min-height:557px  -> responsive
   L6807  .sigin*container        position:absolute !important   -> grid cell
   L6462  .checkbox input         display:none                   -> keyboard bug
   L6836  .social-login li a      width:160px, float, #fff text  -> new buttons
   L6877  .google/.facebook/.twitter  brand block colours        -> neutral set
   L6889  .pop-form-bottom        margin-left/right:-15px        -> reset
   L3043  .form-control           height:40px                    -> 52px, 16px
   L281   .lp-secondary-btn       quicksand, radius 5px, all .3s -> Poppins pill

   SCOPE NOTE
   .md-modal / .md-close / .md-overlay are SHARED with the listing quick-view
   modal (#modal-126). Every selector here is scoped to #modal-3, and the
   overlay is scoped to body.se-auth-open, which our JS adds and removes.
   Nothing in this file may be de-scoped.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENS
   Brand values are from BRAND.md and are not to be re-derived or "improved".
   Neutrals are tinted toward navy rather than pure greys.
   -------------------------------------------------------------------------- */
#modal-3 {
  --navy:      #003781;
  --royal:     #0966A7;
  --sky:       #3597D4;
  --vivid:     #1A72D4;
  --ice:       #CBDFEB;
  --gold:      #F5A200;
  --ink:       #1C2B3A;
  --steel:     #5A6B7B;
  --cloud:     #E8EEF4;
  --arctic:    #EEF5FC;
  --error:     #E8344B;
  --success:   #00B86B;

  /* tinted neutrals — never pure #fff / #000 */
  --surface:   #FCFDFF;
  --field:     #F4F8FC;
  --navy-deep: #002151;

  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* strong ease-out; the CSS built-ins are too weak to read as intentional */
  --ease:      cubic-bezier(.23, 1, .32, 1);
  --ease-move: cubic-bezier(.77, 0, .175, 1);

  --shadow-card: 0 2px 12px rgba(9, 102, 167, .10);
  --shadow-lift: 0 8px 32px rgba(0, 55, 129, .15);
  --shadow-cta:  0 8px 22px rgba(26, 114, 212, .30), 0 2px 6px rgba(0, 55, 129, .18);

  /* The card is a light surface by design. Without this, a visitor whose OS is
     in dark mode gets UA-darkened checkboxes and autofill backgrounds on top of
     our light palette. */
  color-scheme: light;

  /* aside geometry — the form padding below is derived from this */
  --aside-w: 42%;
  --pad:     44px;

  /* The reference sweep runs 1.8s. That is fine on a marketing demo but too
     slow for a modal you are trying to get through, so this lands between:
     long enough for the sweep to read as deliberate, short enough not to
     hold up someone signing in. */
  --aside-dur: 900ms;
}

/* The panel padding below is only safe under border-box. Bootstrap sets this
   globally on the live site, but relying on a third party's reset for our own
   layout is how a theme update silently breaks the card. Own it here.
   Only box-sizing is set on the descendant selector: putting padding, margin,
   gap or line-height on `#id *` would out-specify every class rule below. */
#modal-3,
#modal-3 *,
#modal-3 *::before,
#modal-3 *::after {
  box-sizing: border-box;
}

/* Kill the 300ms tap delay and the default grey flash on every control.
   Set deliberately rather than left to the UA: the flash reads as a rendering
   glitch against the tinted surfaces. */
#modal-3 a,
#modal-3 button,
#modal-3 input,
#modal-3 label,
#modal-3 .se-check-row {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(26, 114, 212, .12);
}


/* --------------------------------------------------------------------------
   2. SHELL — overlay, viewport container, popup card
   -------------------------------------------------------------------------- */

/* Overlay. Scoped to our body class so the quick-view modal keeps its own. */
body.se-auth-open .md-overlay {
  background: rgba(0, 21, 51, .62) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* The theme centres #modal-3 with position:fixed + translate(-50%,-50%) and
   gives it no scroll. At 375px the sign-up panel is taller than the viewport
   and the bottom is simply unreachable. Turn the modal into a full-viewport
   scrolling flex container instead. */
#modal-3.md-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 100000000 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Safe areas: the modal is full-bleed and fixed, so on a notched iPhone the
     card would otherwise sit under the home indicator. */
  padding:
    max(24px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Tall panels: pin to the top so the heading is never scrolled past. */
@media (max-height: 760px) {
  #modal-3.md-modal { align-items: flex-start; }
}

/* The card. Grid so the three stacked panels share one cell and the card
   height follows whichever panel is visible. */
#modal-3 .login-form-popup {
  display: grid;
  position: relative;
  width: 100%;
  max-width: 940px;
  min-height: 0;
  margin: 0 auto;
  background: var(--surface);
  border-radius: 16px;
  overflow: hidden;
  /* The aside is a transformed child. Some engines let transformed descendants
     escape overflow:hidden at rounded corners, so clip explicitly as well. */
  clip-path: inset(0 round 16px);
  box-shadow: var(--shadow-lift), 0 1px 0 rgba(255, 255, 255, .6) inset;
  font-family: var(--font);
}

/* Entrance. Gated behind .se-ready (added by JS) so that if the script never
   runs the card is never left invisible — a recurring Elementor failure mode. */
#modal-3.se-ready .login-form-popup {
  opacity: 0;
  transform: scale(.97);
  transition: opacity 220ms var(--ease), transform 260ms var(--ease);
}
#modal-3.se-ready.md-show .login-form-popup {
  opacity: 1;
  transform: scale(1);
}

/* Panels. Theme ships position:absolute !important; we need them in a grid
   cell so the card can size itself. Higher specificity wins the !important. */
#modal-3 .siginincontainer,
#modal-3 .siginupcontainer,
#modal-3 .forgetpasswordcontainer {
  position: relative !important;
  grid-area: 1 / 1;
  top: auto;
  left: auto;
  width: 100%;
  background: transparent;
  border-radius: 0;
  padding: 34px var(--pad) 30px calc(var(--aside-w) + var(--pad));
  /* NO display here. main.css hides .siginupcontainer and
     .forgetpasswordcontainer with display:none, and #modal-3 .x out-specifies
     that — setting display:flex made all three panels render stacked on top of
     each other on first open, until jQuery wrote an inline display:none.
     Block layout already top-aligns content inside the stretched grid cell,
     which is what the shared card height needs anyway. */
}

/* One shared card height on desktop.
   Originally sign in 582, sign up 695, forgot 329 — the card resized by up to
   366px in the middle of the sweep, a layout change running underneath a
   transform animation, and the main reason the switch read as janky.
   Sign up has since had its username field, its bottom links and slack in the
   consent box removed, bringing the two switching panels to 620 and 624: close
   enough that the shared floor costs almost no dead space. min-height rather
   than height so longer copy can never be clipped. */
@media (min-width: 980px) {
  #modal-3 .login-form-popup { min-height: 640px; }
}

/* Sign up mirrors the layout: form left, aside right. Static padding on each
   panel means the switch never animates a layout property. */
#modal-3 .siginupcontainer {
  padding: 34px calc(var(--aside-w) + var(--pad)) 30px var(--pad);
}

/* No transition on the panels themselves. ListingPro animates their inline
   opacity with jQuery fadeIn/fadeOut (login.js flips to sign-in 5s after a
   successful registration); a CSS transition on the same property stutters. */


/* --------------------------------------------------------------------------
   3. ASIDE — the sliding navy panel
   Absolutely positioned so it sits outside the grid flow entirely.
   -------------------------------------------------------------------------- */
/* Hidden until the JS has finished and added .se-ready. ListingPro re-renders
   the popup contents on every open, so there is a frame where the aside exists
   but the panels have not been re-padded yet — without this you see the
   photograph flash across the form. */
#modal-3 .se-aside { display: none; }
#modal-3.se-ready .se-aside { display: block; }

/* The clip is authored in px against the 940px desktop card. In the narrow
   band between 980px and 972px viewport the card is slightly narrower, so pull
   the circle in proportionally rather than letting the band show a hard edge. */
@media (min-width: 980px) and (max-width: 1010px) {
  #modal-3 .se-aside { clip-path: circle(1600px at -1215px 50%); }
  #modal-3.se-mode-signup .se-aside { clip-path: circle(1600px at 2135px 50%); }
}

/* THE SWITCH — giant-circle sweep.
   Two earlier attempts were wrong and it is worth recording why.

   v1 mirrored the panel with scaleX(-1). Interpolating scale from 1 to -1
   passes through scaleX(0), so the panel collapsed to a sliver at the midpoint.
   A squash.

   v2 kept the panel rigid and morphed its border-radius from right-facing to
   left-facing. No collapse, but a 395px-wide box cannot hold a gentle curve:
   its radius is clamped to its own width, so the edge is always tightly curved
   and the morph through a symmetric lens still reads as a flip.

   v3, this one, takes the geometry from the reference component. That design
   uses a 2000x2000 circle sliding behind a 900x550 card: because the circle is
   enormous relative to the card, the edge it presents is almost straight, and
   the motion is a long slow ease-in-out sweep rather than a shape change.

   Same idea here via clip-path, which keeps it to one element. The aside is
   card-sized and static; only the clipping circle moves. R = 1600px against a
   ~700px card means the edge deviates ~39px top to bottom, so it reads as a
   soft sweep, not a curve. Nothing scales, nothing morphs, nothing collapses.

   Geometry (card is a fixed 940px at >=980px):
     visible band, sign in  = 0    -> 395   (42%)   circle centre x = 395 - 1600
     visible band, sign up  = 545  -> 940           circle centre x = 545 + 1600 */
#modal-3 .se-aside {
  position: absolute;
  inset: 0;                       /* card-sized; the clip decides what shows */
  background: var(--navy-deep);
  clip-path: circle(1600px at -1205px 50%);
  transition: clip-path var(--aside-dur) var(--ease-move);
  z-index: 3;
  /* The element covers the whole card, so it must not intercept clicks meant
     for the form. Only the content inside re-enables them. */
  pointer-events: none;
}

#modal-3.se-mode-signup .se-aside {
  clip-path: circle(1600px at 2145px 50%);
}

/* Content rides in the visible band and translates across with a short delay,
   so the panel leads and the copy follows — the stagger the reference uses. */
#modal-3 .se-aside-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--aside-w);
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px 48px;
  pointer-events: auto;
  transform: translateX(0);
  transition: transform var(--aside-dur) var(--ease-move) 60ms;
}
#modal-3.se-mode-signup .se-aside-inner { transform: translateX(138.095%); }

/* Photography. SWAP-ASIDE-IMAGE — replace the img src with a WP Media URL.
   Treated exactly as the Express Events hero: multiply tint + gradient scrim
   so the photo reads inside the blue palette instead of fighting it. */
/* Card-sized and static. Only the clip moves, so sign in reveals the left of
   the scene and sign up the right — the photograph itself never slides. */
#modal-3 .se-aside-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
#modal-3 .se-aside-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  display: block;
}
#modal-3 .se-aside-media.is-fallback {
  background: linear-gradient(155deg, var(--navy-deep) 0%, var(--navy) 45%, var(--royal) 100%);
}
#modal-3 .se-aside-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--navy);
  mix-blend-mode: multiply;
  opacity: .82;
}
/* Card-sized like the media. The old radial highlight was anchored at 78% of
   the card, which now lands in the form column where it is never seen, so the
   scrim is a straight vertical ramp: light enough at the top for the logo,
   dark enough at the bottom for the heading and CTA. */
#modal-3 .se-aside-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 33, 81, .62) 0%, rgba(0, 33, 81, .34) 38%, rgba(0, 21, 51, .94) 100%);
}

/* Dark surface: every text node sets its own colour with !important.
   Inheritance loses to ListingPro's descendant selectors on the live site
   even though it looks correct locally. Already diagnosed — do not re-debug. */
/* Full lockup (288x134). Height-constrained, width auto, so the ratio holds.
   Shown in its own colours: the lettering reads fine against the navy panel,
   and the knockout filter flattened the pin's interior detail. */
#modal-3 .se-aside-brand { display: flex; align-items: center; }
#modal-3 .se-aside-brand img {
  height: 52px;
  width: auto;
  max-width: 100%;
  display: block;
  flex-shrink: 0;
}
#modal-3 .se-aside-brand b {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff !important;
}

#modal-3 .se-aside-panes {
  display: grid;
  margin-top: auto;
}
#modal-3 .se-aside-pane {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 0s linear 200ms;
}
#modal-3 .se-aside-pane.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 260ms var(--ease) 140ms, transform 260ms var(--ease) 140ms, visibility 0s;
}

#modal-3 .se-aside-pane h4 {
  font-family: var(--font);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.03em;
  text-wrap: balance;
  margin: 0 0 12px;
  color: #fff !important;
}
#modal-3 .se-aside-pane p {
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.65;
  margin: 0 0 22px;
  max-width: 32ch;
  color: rgba(233, 242, 251, .88) !important;
}

/* Ghost CTA — switches panel by clicking the theme's own anchor. */
#modal-3 .se-aside-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 26px;
  border-radius: 100px;
  border: 1.5px solid rgba(203, 223, 235, .55);
  background: rgba(255, 255, 255, .07);
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  color: #fff !important;
  transition: background-color 180ms var(--ease), border-color 180ms var(--ease), transform 160ms var(--ease);
}
#modal-3 .se-aside-cta svg { color: #fff; flex-shrink: 0; }
#modal-3 .se-aside-cta:active { transform: scale(.97); }
#modal-3 .se-aside-cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  #modal-3 .se-aside-cta:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .8);
  }
}


/* --------------------------------------------------------------------------
   4. PANEL HEAD — heading, sub-heading, mobile switch
   -------------------------------------------------------------------------- */
#modal-3 .siginincontainer h3,
#modal-3 .siginupcontainer h3,
#modal-3 .forgetpasswordcontainer h3 {
  font-family: var(--font);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.03em;
  text-align: left;
  text-wrap: balance;
  margin: 0 0 8px;
  padding: 0;
  color: var(--navy) !important;
}

/* Our copy, injected by the child theme. Theme strings stay with Loco. */
#modal-3 .se-sub {
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 46ch;
  color: var(--steel) !important;
}

/* Segmented switch and compact brand row are both mobile-only. Above 980px the
   aside carries the identity and its CTA does the switching; two controls for
   one action is one too many. */
#modal-3 .se-switch,
#modal-3 .se-mini-brand { display: none; }


/* --------------------------------------------------------------------------
   5. SOCIAL — moved above the form by the child theme JS
   -------------------------------------------------------------------------- */
#modal-3 .se-social { margin: 0 0 16px; }

/* The theme's "Connect with your Social Network" <p>. Kept in the a11y tree as
   the group label for the button list, hidden visually because the divider
   below already labels this block. Loco still corrects the string. */
#modal-3 .se-social > p.margin-top-15 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

#modal-3 .social-login {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#modal-3 .social-login li {
  display: block;
  margin: 0;
  padding: 0;
  float: none;
}

/* Equal-weight neutral set. No provider dominates; the mark carries the brand. */
#modal-3 .social-login li a,
#modal-3 .social-login .facebook,
#modal-3 .social-login .google,
#modal-3 .social-login .twitter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  float: none;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 10px;
  border: 1px solid var(--cloud);
  border-radius: 100px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease), transform 160ms var(--ease);
}
#modal-3 .social-login li a span {
  margin: 0;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -.005em;
  color: var(--ink) !important;
}
/* Icon wrapper: theme gives it a white pad + radius for the old block buttons. */
#modal-3 .social-login li a .lp-pop-icon-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: none;
  flex-shrink: 0;
}
#modal-3 .social-login li a .lp-pop-icon-img svg {
  width: 18px;
  height: 18px;
  display: block;
}
#modal-3 .social-login li a:active { transform: scale(.98); }
#modal-3 .social-login li a:focus-visible {
  outline: 3px solid var(--vivid);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  #modal-3 .social-login li a:hover {
    border-color: var(--sky);
    box-shadow: 0 4px 16px rgba(9, 102, 167, .16);
  }
}


/* --------------------------------------------------------------------------
   6. DIVIDER
   -------------------------------------------------------------------------- */
#modal-3 .se-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
}
#modal-3 .se-divider::before,
#modal-3 .se-divider::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--cloud);
}
#modal-3 .se-divider span {
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--steel) !important;
}


/* --------------------------------------------------------------------------
   7. FORM — labels, inputs, checkbox, password reveal
   -------------------------------------------------------------------------- */
#modal-3 form.form-horizontal { margin-top: 0 !important; }

#modal-3 .form-group { margin: 0 0 14px; }
#modal-3 .form-group:last-of-type { margin-bottom: 0; }

#modal-3 .form-group label {
  display: block;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 7px;
  padding: 0;
  letter-spacing: -.005em;
  color: var(--ink) !important;
}

#modal-3 .form-control {
  width: 100%;
  height: 52px;
  padding: 13px 16px;
  font-family: var(--font);
  font-size: 16px; /* below 16px iOS Safari zooms the viewport on focus */
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink) !important;
  background: var(--field);
  border: 1px solid var(--cloud);
  border-radius: 12px;
  box-shadow: none;
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
/* --steel, not a lighter grey: at 5.3:1 on the field it stays readable if a
   placeholder is ever added. Entered text is --ink at 13.5:1, so the hierarchy
   between placeholder and value still reads. */
#modal-3 .form-control::placeholder { color: var(--steel); opacity: 1; }
#modal-3 .form-control:hover { border-color: var(--ice); }
#modal-3 .form-control:focus,
#modal-3 .form-control:focus-visible {
  outline: none;
  background: var(--surface);
  border-color: var(--vivid);
  box-shadow: 0 0 0 3px rgba(26, 114, 212, .18);
}
#modal-3 .form-control[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(232, 52, 75, .16);
}

/* Password field + reveal button */
#modal-3 .se-pw-wrap { position: relative; }
#modal-3 .se-pw-wrap .form-control { padding-right: 72px; }
#modal-3 .se-pw-toggle {
  position: absolute;
  right: 6px;
  bottom: 6px;
  height: 40px;
  min-width: 58px;
  padding: 0 12px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--royal) !important;
  transition: background-color 160ms var(--ease);
}
#modal-3 .se-pw-toggle:focus-visible {
  outline: 3px solid var(--vivid);
  outline-offset: 1px;
}
@media (hover: hover) and (pointer: fine) {
  #modal-3 .se-pw-toggle:hover { background: var(--cloud); }
}

/* Checkboxes.
   The theme sets .checkbox input[type=checkbox]{display:none} and draws the
   box with label::before, which means the control cannot be reached by Tab.
   Restore the real input, style it directly, and kill the pseudo-element. */
#modal-3 .checkbox label::before,
#modal-3 .checkbox label::after {
  content: none !important;
  display: none !important;
}
#modal-3 .checkbox { margin: 0; }
#modal-3 .checkbox.pad-bottom-10 { padding-bottom: 0; }

#modal-3 input[type="checkbox"] {
  display: inline-block !important;
  /* !important: the theme re-asserts the native control in places, which is
     what produced a second small grey box next to ours on :checked. */
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: none !important;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--ice);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}
#modal-3 input[type="checkbox"]:checked {
  background: var(--vivid);
  border-color: var(--vivid);
}
/* A 20px box is well under the 44px minimum. Expand the hit area with a
   pseudo-element rather than inflating the visible control. */
#modal-3 input[type="checkbox"]::before {
  content: '';
  position: absolute;
  inset: -12px;
}
#modal-3 input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}
#modal-3 input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--vivid);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  #modal-3 input[type="checkbox"]:hover { border-color: var(--sky); }
}

/* Row wrapper gives the 44px tap target without inflating the box itself. */
#modal-3 .se-check-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 44px;
  padding: 12px 0;
  margin: 0;
}
#modal-3 .se-check-row label {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  cursor: pointer;
  overflow-wrap: break-word;
  color: var(--ink) !important;
}

/* "Keep me signed in" sits on a row with the forgot-password link. */
#modal-3 .siginincontainer .checkbox.pad-bottom-10 {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
}
#modal-3 .siginincontainer .checkbox.pad-bottom-10 label {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  margin: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink) !important;
}

/* Auto-generated username field, hidden until the user asks for it. */
#modal-3 .se-username-group { display: none; }
#modal-3 .se-username-group.is-open { display: block; }
#modal-3 .se-username-toggle {
  display: inline-block;
  margin: 0 0 16px;
  padding: 4px 0;
  border: 0;
  background: none;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  color: var(--royal) !important;
}
#modal-3 .se-username-toggle:focus-visible {
  outline: 3px solid var(--vivid);
  outline-offset: 2px;
  border-radius: 4px;
}


/* --------------------------------------------------------------------------
   8. CONSENT — click-wrap
   -------------------------------------------------------------------------- */
#modal-3 .se-consent {
  margin: 2px 0;
  padding: 8px 14px 10px;
  background: var(--arctic);
  border: 1px solid var(--cloud);
  border-radius: 12px;
}
/* min-height:44px on these rows was padding the box out with dead space, and
   it was never needed: the checkbox carries its own 44px hit area via the
   ::before inset below. */
#modal-3 .se-consent .se-check-row {
  padding: 3px 0;
  min-height: 0;
  align-items: flex-start;
}
/* The label's line-height leaves the text sitting low against the box edge;
   nudge the control to sit on the first line instead of the row's centre. */
#modal-3 .se-consent .se-check-row input[type="checkbox"] { margin-top: 1px; }
#modal-3 .se-consent .se-check-row + .se-check-row {
  border-top: 1px solid var(--cloud);
  padding-top: 10px;
  margin-top: 6px;
}
/* The theme draws its own checkbox as a label::before/::after square. Inside
   .se-consent the markup is ours, but .check_policy still carries the theme's
   .checkbox class, and its pseudo re-appeared as a small grey square beside our
   control once :checked. Kill both pseudos on every label in here. */
#modal-3 .se-consent label::before,
#modal-3 .se-consent label::after,
#modal-3 .se-check-row label::before,
#modal-3 .se-check-row label::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
}
#modal-3 .se-consent a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--royal) !important;
}
#modal-3 .se-consent a:focus-visible {
  outline: 3px solid var(--vivid);
  outline-offset: 2px;
  border-radius: 3px;
}
@media (hover: hover) and (pointer: fine) {
  #modal-3 .se-consent a:hover { color: var(--vivid) !important; }
}

/* Theme's tooltip block — the agreement text is visible in full now. */
#modal-3 .check_policy .help-text { display: none !important; }
#modal-3 .check_policy {
  float: none !important;
  width: 100%;
  padding: 0;
  margin: 0;
}
/* Theme spacer between the consent block and the submit button. 40px of it was
   a large part of why the sign-up panel overflowed the viewport. */
#modal-3 .clearfix.padding-top-20.padding-bottom-20 {
  padding-top: 12px !important;
  padding-bottom: 0 !important;
}

/* Explanation for the disabled submit. Never leave a dead button unexplained. */
#modal-3 .se-submit-hint {
  display: block;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  margin: 10px 0 0;
  text-align: center;
  color: var(--steel) !important;
}
#modal-3 .se-submit-hint[hidden] { display: none; }


/* --------------------------------------------------------------------------
   9. BUTTONS
   -------------------------------------------------------------------------- */
#modal-3 .lp-secondary-btn,
#modal-3 input[type="submit"].lp-secondary-btn {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 14px 28px;
  border: 0;
  border-radius: 100px;
  font-family: var(--font) !important;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  color: #fff !important;
  background: var(--vivid) !important;
  box-shadow: var(--shadow-cta), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: background-color 180ms var(--ease), box-shadow 180ms var(--ease), transform 160ms var(--ease) !important;
}
#modal-3 .lp-secondary-btn:active { transform: scale(.98); }
#modal-3 .lp-secondary-btn:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  #modal-3 .lp-secondary-btn:hover {
    background: #1560B8 !important;
    box-shadow: 0 12px 28px rgba(26, 114, 212, .34), 0 2px 6px rgba(0, 55, 129, .20);
  }
}

/* Disabled must be legible, not invisible. Paired with .se-submit-hint.
   WCAG exempts disabled controls from contrast, but a dead button nobody can
   read is the exact problem we are fixing, so --steel holds 4.9:1 here. */
#modal-3 .lp-secondary-btn:disabled,
#modal-3 .lp-secondary-btn[disabled] {
  background: var(--cloud) !important;
  color: var(--steel) !important;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* Close control */
/* The theme positions the glyph independently, which left the x floating
   outside the disc. Force the anchor to be the positioning context and centre
   the glyph inside it. */
#modal-3 .md-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 6;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  text-align: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--cloud);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: background-color 160ms var(--ease), transform 160ms var(--ease), border-color 160ms var(--ease);
}
/* The theme paints its own blue disc on the close control via a pseudo-element,
   offset toward the card corner, which showed as a second circle clipped by the
   card edge. Ours is the white disc; remove theirs. */
#modal-3 .md-close::before,
#modal-3 .md-close::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
#modal-3 .md-close i {
  display: block !important;
  width: auto !important;
  height: auto !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  font-size: 17px;
  line-height: 1 !important;
  vertical-align: middle;
  color: var(--steel) !important;
  background: none !important;
}
/* The glyph is a pseudo-element (.fa-close:before). It carries its own
   line-height and font metrics, which is what pushed the x off-centre. */
#modal-3 .md-close i::before {
  display: block !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
}
#modal-3 .md-close i::after { content: none !important; }
#modal-3 .md-close:active { transform: scale(.94); }
#modal-3 .md-close:focus-visible {
  outline: 3px solid var(--vivid);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  #modal-3 .md-close:hover { background: var(--cloud); border-color: var(--ice); }
  #modal-3 .md-close:hover i { color: var(--navy) !important; }
}


/* --------------------------------------------------------------------------
   10. STATUS — the AJAX message target (role=status, aria-live=polite)
   -------------------------------------------------------------------------- */
#modal-3 p.status {
  display: none;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.55;
  margin: 0 0 16px;
  padding: 12px 15px;
  border-radius: 10px;
  background: var(--arctic);
  border: 1px solid var(--cloud);
  color: var(--ink) !important;
}
#modal-3 p.status:empty { display: none !important; }
#modal-3 p.status.se-is-error {
  background: #FDECEE;
  border-color: #F6C3CA;
  color: #A3162A !important;
}
#modal-3 p.status.se-is-success {
  background: #E6F8F0;
  border-color: #A9E7CC;
  color: #076B44 !important;
}
#modal-3 p.status a { color: inherit !important; text-decoration: underline; }

/* The "please wait" state.
   ListingPro injects <span class="alert alert-info">Please wait...<i class="fa
   fa-spinner fa-spin"></i></span> — a Bootstrap alert box with a Font Awesome
   spinner, which lands as a yellow-bordered block in the middle of the form.
   Neutralise the alert chrome and render it as quiet brand-coloured text with
   a single spinner. */
#modal-3 p.status .alert,
#modal-3 p.status .alert-info {
  display: flex !important;
  align-items: center;
  gap: 9px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--royal) !important;
  box-shadow: none !important;
}
#modal-3 p.status .fa-spinner {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border: 2px solid var(--ice);
  border-top-color: var(--vivid);
  border-radius: 50%;
  animation: se-auth-spin 620ms linear infinite;
}
/* Kill the Font Awesome glyph and its own rotation; the border ring above is
   the spinner now. */
#modal-3 p.status .fa-spinner::before { content: none !important; }
#modal-3 p.status .fa-spin { animation: se-auth-spin 620ms linear infinite; }

@keyframes se-auth-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  #modal-3 p.status .fa-spinner,
  #modal-3 p.status .fa-spin { animation-duration: 2s; }
}

/* The modal's OWN open transition, not the form's.
   ListingPro's "md-modal" library shares one .md-overlay element sitewide as
   the backdrop behind whichever modal is opening. #modal-3 is currently the
   only modal on the site, so in practice this overlay exists purely to back
   it — but the selector stays unscoped because the element itself is a
   global sibling, not a #modal-3 descendant; there is nothing to scope it to
   in CSS. If a second .md-trigger modal is ever added, re-check this before
   assuming it still only means modal-3.

   Measured on the live site (screenshot-68 in the working session): for
   ~1.1–1.3s after the trigger fires, this element is fully TRANSPARENT
   (background-color: rgba(0,0,0,0)) with content-loader.gif as its only
   fill — so the dated GIF floats over whatever the page looks like at that
   scroll position, not over a dimmed backdrop. Only once #modal-3's content
   has actually rendered does the theme's own JS swap the image out for the
   navy scrim (rgba(0,21,51,.62)) that stays for the rest of the open modal.

   Fix: force that same navy scrim on immediately instead of waiting for the
   swap, and kill the GIF. The two !important rules pre-empt the JS's own
   inline styles for the whole open sequence, so the backdrop is the correct
   navy dim from the very first frame and there is no visible hand-off.

   Colours are hardcoded, not var(--ice)/var(--vivid) — this element sits
   OUTSIDE #modal-3 (a sibling appended elsewhere in the DOM), which is where
   those custom properties are scoped, so they do not inherit here. Verified
   live: using var() resolved to an unstyled rgb(38,38,38). Ice = #CBDFEB,
   Vivid = #1A72D4, same values #modal-3 uses. */
.md-overlay.content-loading {
  background-image: none !important;
  background-color: rgba(0, 21, 51, 0.62) !important;
}
.md-overlay.content-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid #CBDFEB;
  border-top-color: #1A72D4;
  border-radius: 50%;
  animation: se-auth-spin 620ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .md-overlay.content-loading::after { animation-duration: 2s; }
}


/* --------------------------------------------------------------------------
   11. BOTTOM LINKS
   -------------------------------------------------------------------------- */
#modal-3 .pop-form-bottom {
  margin-left: 0;
  margin-right: 0;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--cloud);
}
/* Sign up has no bottom links: "Already have an account?" duplicates the aside
   CTA and the mobile switch, and "Forgot password" makes no sense on a form for
   people who do not have an account yet. Removing the whole block also takes
   its border, padding and margins out of the panel height. */
#modal-3 .siginupcontainer .pop-form-bottom { display: none; }

#modal-3 .forgetpasswordcontainer .pop-form-bottom {
  border-top: 0;
  padding-top: 8px;
  margin-top: 12px;
}
/* Sign in keeps only "Forgot password". "New here? Sign up!" is the third
   control for one action -- the aside CTA above 980px, the segmented switch
   below it -- and the same goes for sign up's "Already have an account?".
   Both are hidden at every width rather than removed from the DOM: goTo()
   still clicks them to drive ListingPro's own panel switching, and a
   display:none anchor dispatches its handler exactly the same. */
#modal-3 .bottom-links a.signUpClick,
#modal-3 .bottom-links a.signInClick { display: none; }

#modal-3 .bottom-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
#modal-3 .bottom-links a {
  float: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  color: var(--royal) !important;
  transition: color 160ms var(--ease);
}
#modal-3 .bottom-links a.pull-right { float: none; margin-left: auto; }
#modal-3 .bottom-links a:focus-visible {
  outline: 3px solid var(--vivid);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (hover: hover) and (pointer: fine) {
  #modal-3 .bottom-links a:hover { color: var(--vivid) !important; text-decoration: underline; }
}


/* --------------------------------------------------------------------------
   12. RESPONSIVE
   980px is ListingPro's breakpoint and is not negotiable for theme markup.
   -------------------------------------------------------------------------- */
@media (max-width: 979px) {
  #modal-3.md-modal { padding: 16px 12px; align-items: flex-start; }

  #modal-3 .login-form-popup { max-width: 460px; }

  /* Aside is desktop-only. Below 980px the vertical space is worth more than
     the imagery, and the segmented switch carries the same job.
     Must match the .se-ready selector's specificity (120), or the reveal rule
     in section 3 outranks this and the aside reappears on mobile. */
  #modal-3.se-ready .se-aside,
  #modal-3 .se-aside { display: none; }

  #modal-3 .siginincontainer,
  #modal-3 .siginupcontainer,
  #modal-3 .forgetpasswordcontainer {
    padding: 28px 22px 26px;
  }

  #modal-3 .siginincontainer h3,
  #modal-3 .siginupcontainer h3,
  #modal-3 .forgetpasswordcontainer h3 { font-size: 24px; }

  #modal-3 .se-sub { font-size: 14px; margin-bottom: 18px; }

  /* Compact brand row replaces the aside's identity. */
  /* The lockup's wordmark is white — it is drawn for dark backgrounds, which
     is why it sits happily on the navy aside but disappears on this white card.
     Rather than recolour it, give it the background it was designed for: a
     small navy chip. Keeps the asset intact and reads as deliberate branding. */
  #modal-3 .se-mini-brand {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin: 0 0 16px;
    padding: 8px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);
    box-shadow: var(--shadow-card);
  }
  /* The lockup is pin-dominant, so the wordmark is small relative to the box.
     Below ~40px the "SYDNEY EXPRESS" text stops being readable. */
  #modal-3 .se-mini-brand img {
    height: 34px;
    width: auto;
    max-width: 100%;
    flex-shrink: 0;
    display: block;
  }
  #modal-3 .se-mini-brand b {
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--navy) !important;
  }

  /* Segmented switch */
  #modal-3 .se-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    gap: 0;
    margin: 0 0 22px;
    padding: 4px;
    background: var(--arctic);
    border: 1px solid var(--cloud);
    border-radius: 100px;
  }
  #modal-3 .se-switch-thumb {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 100px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
    transform: translateX(0);
    transition: transform 280ms var(--ease-move);
    z-index: 0;
  }
  #modal-3.se-mode-signup .se-switch-thumb { transform: translateX(100%); }
  #modal-3 .se-switch button {
    position: relative;
    z-index: 1;
    min-height: 44px;
    padding: 11px 8px;
    border: 0;
    border-radius: 100px;
    background: none;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: var(--steel) !important;
    transition: color 200ms var(--ease);
  }
  #modal-3 .se-switch button[aria-selected="true"] { color: var(--navy) !important; }
  #modal-3 .se-switch button:focus-visible {
    outline: 3px solid var(--vivid);
    outline-offset: 2px;
  }
}

/* Social buttons: three across will not fit at 375px and still hold 44px.
   Google takes the full row, Facebook and X share the second. */
@media (max-width: 420px) {
  #modal-3 .social-login { grid-template-columns: 1fr 1fr; }
  /* order:-1 matters as much as the span. Google is second in ListingPro's
     markup, so without it Facebook sits alone on row 1, Google spans row 2 and
     X sits alone on row 3 — a ragged three-row stack, not the intended pair. */
  #modal-3 .social-login li:has(a.google) { grid-column: 1 / -1; order: -1; }
  #modal-3 .social-login li a { min-height: 46px; }
  #modal-3 .social-login li a span { font-size: 14px; }
}

/* :has() fallback — same layout via source order for older Safari/Firefox.
   Google is the second <li> in ListingPro's markup. */
@supports not (selector(li:has(a))) {
  @media (max-width: 420px) {
    #modal-3 .social-login li:nth-child(2) { grid-column: 1 / -1; order: -1; }
  }
}

@media (max-width: 360px) {
  #modal-3 .siginincontainer,
  #modal-3 .siginupcontainer,
  #modal-3 .forgetpasswordcontainer { padding: 24px 16px 22px; }
  #modal-3 .se-consent { padding: 14px 14px; }
}


/* --------------------------------------------------------------------------
   13. REDUCED MOTION
   Fewer and gentler, not zero: opacity still aids comprehension.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #modal-3 .se-aside,
  #modal-3 .se-switch-thumb,
  #modal-3.se-ready .login-form-popup {
    transition-duration: .01ms !important;
  }
  #modal-3 .se-aside-pane {
    transform: none !important;
    transition: opacity 160ms linear !important;
  }
  #modal-3 .lp-secondary-btn:active,
  #modal-3 .md-close:active,
  #modal-3 .social-login li a:active,
  #modal-3 .se-aside-cta:active { transform: none; }
}


/* --------------------------------------------------------------------------
   14. PRINT / FORCED COLOURS
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  #modal-3 input[type="checkbox"] { forced-color-adjust: none; border: 1.5px solid ButtonText; }
  #modal-3 input[type="checkbox"]:checked { background: Highlight; border-color: Highlight; }
  #modal-3 .se-aside { border: 1px solid ButtonText; }
}