@charset "UTF-8";
/* mlsg-tokens: assets/css/mlsg-tokens.css */
/**
 * MLS Genie — Design Tokens
 *
 * Single source of truth for all brand and UI colors, spacing, and scale.
 * Every other MLSG stylesheet declares this as a dependency and references
 * these vars — no raw hex values in component files.
 *
 * Structure:
 *   1. Brand — Teal (primary), Navy (secondary), and derived highlight tints
 *   2. Text
 *   3. Surfaces
 *   4. Borders
 *   5. Status — Danger, Success, Warning, Info, Purple
 *   6. WordPress admin palette
 *   7. Google sign-in (brand-locked)
 *   8. Scale / misc
 *
 * @package MLS_Genie
 * @since   1.3.43
 */

:root {

    /* -------------------------------------------------------------------------
       1. BRAND
       Three core brand colors: Teal (primary action), Navy (secondary/text),
       and Neutral. All interactive highlights are derived from Teal.
    -------------------------------------------------------------------------- */

    /* -- Teal: primary action, links, interactive highlights -- */
    --mlsg-teal:              #0d76b4;  /* primary — 4.48:1 on white before, now AA */
    --mlsg-teal-dark:         #0d6da3;  /* hover / pressed state                  */
    --mlsg-teal-deeper:       #0a5a8a;  /* deep emphasis / active border          */
    --mlsg-teal-bg:           #f2f9fe;  /* teal-tinted surface (selected, hover)  */
    --mlsg-teal-bg-light:     #f7fbff;  /* lightest teal tint (subtle highlight)  */
    --mlsg-teal-border:       #b3d9f0;  /* teal-tinted border                     */

    /* -- Brand highlight tints (derived from teal, for selections/focus) -- */
    --mlsg-highlight-bg:      #e8f4fb;  /* selected row, active card bg           */
    --mlsg-highlight-border:  #7ec4e8;  /* focused input, selected border         */
    --mlsg-highlight-text:    #107dbd;  /* highlighted text / active label        */

    /* -- Search-hit mark (amber; distinct from teal links) -- */
    --mlsg-search-hit-bg:     #fffbeb;  /* matched-text background (warning-50)    */
    --mlsg-search-hit-text:   #92400e;  /* matched-text color (warning-800)        */
    --mlsg-search-hit-border: #f5d99a;  /* subtle mark outline                     */

    /* -- Navy: secondary brand, headings, deep surfaces -- */
    --mlsg-navy:              #1a2633;  /* primary brand navy / heading text      */
    --mlsg-navy-deep:         #0f172a;  /* shell / PWA deep background            */
    --mlsg-navy-mid:          #1e293b;  /* mid-depth surface                      */

    /* -- Tooltips -- */
    --mlsg-tooltip-bg:        rgba(26, 38, 51, .92);  /* navy, so a tip reads as part of the brand */
    --mlsg-tooltip-text:      #ffffff;
    --mlsg-tooltip-shadow:    0 2px 10px rgba(15, 23, 42, .25);

    /* -------------------------------------------------------------------------
       2. TEXT
       Five-step scale from primary to faint. Use the step that matches
       the visual weight needed — avoid adding new steps.
    -------------------------------------------------------------------------- */

    --mlsg-text:              #111827;  /* primary — headings, strong body        */
    --mlsg-text-medium:       #374151;  /* secondary — body copy, field values    */
    --mlsg-text-secondary:    #4b5563;  /* tertiary — labels, captions            */
    --mlsg-text-dark:         #1e293b;  /* headings and strong body copy          */
    --mlsg-text-muted:        #535a68;  /* muted — was 3.28:1 on a light border    */
    --mlsg-text-subtle:       #606773;  /* subtle — was 2.05:1 on a light border   */
    --mlsg-text-slate:        #58687f;  /* slate-tone utility (tags, breadcrumbs) */

    /* -------------------------------------------------------------------------
       3. SURFACES
       Page backgrounds, card surfaces, and inset areas.
    -------------------------------------------------------------------------- */

    --mlsg-white:             #ffffff;
    --mlsg-on-brand:          #ffffff;  /* always white — text on colored buttons/badges */
    --mlsg-bg:                #f9fafb;  /* standard page / card background        */
    --mlsg-bg-subtle:         #f6f7f9;  /* inset surface, striped rows            */
    --mlsg-bg-light:          #f1f5f9;  /* light slate surface                    */
    --mlsg-bg-slate:          #f8fafc;  /* slate-50, lightest surface             */
    --mlsg-bg-bare:           #fafafa;  /* near-white bare surface                */

    /* -------------------------------------------------------------------------
       4. BORDERS
    -------------------------------------------------------------------------- */

    --mlsg-border:            #dcdfe4;  /* standard border                        */
    --mlsg-border-light:      #d1d5db;  /* light separator / table rule           */
    --mlsg-border-medium:     #e2e8f0;  /* form field border                      */
    --mlsg-border-slate:      #cbd5e1;  /* slate-300, subtle divider              */

    /* -------------------------------------------------------------------------
       4a. LEAD HEAT
       The four tiers MLSG_Lead_Score assigns: hot, warm, cool, cold.

       They were styled independently in four places and disagreed. The Leads
       list carried all four; lead detail and the pipeline carried three and
       had no cool at all. Warm was --mlsg-warning in two files and
       --mlsg-warning-accent in a third. Cold was grey on the list and blue
       everywhere else. Two tooltip values were raw hex.

       Named for the tier rather than mapped onto danger/warning/info, because
       a cold lead is not an error and a hot one is not a failure — reusing
       the semantic ramps is what let them drift apart.

       Each tier has a text colour for a label or an icon, and a surface for
       the badge it sits in. The text value is the one that has to carry
       contrast; every pair is at least 4.5:1.
    -------------------------------------------------------------------------- */

    --mlsg-heat-hot:          #b91c1c;  /* 5.91:1 on --mlsg-heat-hot-bg           */
    --mlsg-heat-hot-bg:       #fef2f2;
    --mlsg-heat-warm:         #92400e;  /* 6.84:1 on --mlsg-heat-warm-bg          */
    --mlsg-heat-warm-bg:      #fffbeb;
    --mlsg-heat-cool:         #0d6da3;  /* 5.23:1 on --mlsg-heat-cool-bg          */
    --mlsg-heat-cool-bg:      #eff8fd;
    --mlsg-heat-cold:         #4b5563;  /* 6.87:1 on --mlsg-heat-cold-bg          */
    --mlsg-heat-cold-bg:      #f3f4f6;

    /* -------------------------------------------------------------------------
       4b. SHELL TOKENS — light mode (default)
       Used ~98 times across genie-crm.css / genie-crm-shell.css / GeniePortal
       templates. Only had dark-mode values (see body.mlsg-shell.mlsg-dark
       below) — with no light-mode definition at all, every one of those
       declarations was silently falling back to inherited/browser-default
       styling in the (default) light mode, which is why plain links and
       muted text were rendering as the browser's stock blue instead of any
       intended color. Aliased to the existing light-mode --mlsg-* tokens
       above rather than new values, so this can't drift from them.
    -------------------------------------------------------------------------- */

    --shell-bg:               var(--mlsg-bg-slate);
    --shell-surface:          var(--mlsg-white);
    --shell-text:             var(--mlsg-text);
    --shell-text-muted:       var(--mlsg-text-muted);
    --shell-muted:            var(--mlsg-text-slate);
    --shell-border:           var(--mlsg-border-medium);
    --shell-danger:           var(--mlsg-danger);
    --shell-brand:            var(--mlsg-teal);
    --shell-brand-dark:       var(--mlsg-teal-dark);
    --shell-brand-soft:       var(--mlsg-teal-bg);
    --shell-transition:       0.15s ease;


    /* -------------------------------------------------------------------------
       5. STATUS COLORS
       Semantic colors for system states. Each status has a full set:
       text (dark), action (base), background (bg), border.
    -------------------------------------------------------------------------- */

    /* -- Danger -- */
    --mlsg-danger:            #d31f1f;  /* error text — 4.7:1 on its own surface   */
    --mlsg-danger-dark:       #b91c1c;  /* hover / pressed danger                 */
    --mlsg-danger-bg:         #fef2f2;  /* danger surface                         */
    --mlsg-danger-bg-lt:      #fff5f5;  /* lightest danger surface                */
    --mlsg-danger-border:     #fecaca;  /* danger border                          */

    /* -- Success -- */
    --mlsg-success:           #007e51;  /* success text — was 3.58:1 on its surface */
    --mlsg-success-dark:      #065f46;  /* hover / pressed success                */
    --mlsg-success-bg:        #ecfdf5;  /* success surface (emerald-50)           */
    --mlsg-success-bg-mid:    #d1fae5;  /* mid success surface (emerald-100)      */
    --mlsg-success-border:    #86efac;  /* success border                         */

    /* -- Warning -- */
    --mlsg-warning:           #9c3b00;  /* warning text — was 3.48:1 on its border  */
    --mlsg-warning-dark:      #92400e;  /* hover / pressed warning (amber-800)    */
    --mlsg-warning-accent:    #dba617;  /* warning accent / admin border          */
    --mlsg-warning-bg:        #fffbeb;  /* warning surface (amber-50)             */
    --mlsg-warning-border:    #fcd34d;  /* warning border (amber-300)             */

    /* -- Info --
       Points at the brand teal rather than a separate blue. It used to be its
       own generic blue ramp (#1f5de5 and friends), which put a second, unrelated
       blue next to the teal on any screen using both — the GenieScout feature
       pills were the clearest example. Informational is a tone of the brand
       colour here, not a colour of its own.

       Contrast, measured: teal on white 4.92:1, teal on the info surface
       4.63:1, deep teal on white 7.39:1 — all clear AA for body text. */
    --mlsg-info:              var(--mlsg-teal);         /* info text            */
    --mlsg-info-dark:         var(--mlsg-teal-dark);    /* hover / pressed      */
    --mlsg-info-deep:         var(--mlsg-teal-deeper);  /* deep info text       */
    --mlsg-info-bg:           var(--mlsg-teal-bg);      /* info surface         */
    --mlsg-info-bg-deep:      var(--mlsg-teal-bg-light);/* mid info surface     */
    --mlsg-info-border:       var(--mlsg-teal-border);  /* info border          */

    /* -- Purple (drip campaigns, scheduled states) -- */
    --mlsg-purple:            #6b21a8;  /* purple text / icon                     */
    --mlsg-purple-bg:         #f3e8ff;  /* purple surface                         */
    --mlsg-purple-border:     #d8b4fe;  /* purple border                          */

    /* -------------------------------------------------------------------------
       6. WORDPRESS ADMIN PALETTE
       Used only in admin-scoped stylesheets. Do not use in frontend shell.
    -------------------------------------------------------------------------- */

    --mlsg-wp-border:         #dcdcde;
    --mlsg-wp-border-lt:      #ccd0d4;
    --mlsg-wp-text:           #1d2327;
    --mlsg-wp-text-dark:      #23282d;
    --mlsg-wp-muted:          #50575e;
    --mlsg-wp-separator:      #444444;
    --mlsg-wp-red:            #d63638;
    --mlsg-wp-green:          #00a32a;
    --mlsg-wp-blue:           #72aee6;

    /* -------------------------------------------------------------------------
       7. GOOGLE SIGN-IN
       Brand-locked — do not change these values.
    -------------------------------------------------------------------------- */

    --mlsg-google-text:       #3c4043;
    --mlsg-google-border:     #dadce0;
    --mlsg-google-blue:       #0284c7;

    /* -------------------------------------------------------------------------
       8. SCALE / MISC
    -------------------------------------------------------------------------- */

    /* Font scale — set by JS from localStorage, applied via zoom on shell content.
       small = 1 (default), medium = 1.25, large = 1.5                           */
    --mlsg-font-scale: 1;

    /* --------------------------------------------------------------------------
       9. DRAWERS
    -------------------------------------------------------------------------- */

    /* Every slide-in drawer — edit lead, commission, settings, help — sits inset
       from the viewport edge rather than flush against it, with its corners
       rounded. Flush to the edge, a drawer reads as a second window bolted onto
       the browser; inset, it reads as a panel over the page you are still in,
       which is what it is. Applies at every size: on a phone the inset is what
       keeps the page visible behind it.

       Defined once here so the four drawers cannot drift apart.               */
    --mlsg-drawer-inset:  1rem;
    --mlsg-drawer-radius: 1rem;
    --mlsg-drawer-shadow: 0 8px 32px rgba(15, 23, 42, 0.18);
    --mlsg-drawer-scrim:  rgba(15, 23, 42, 0.35);  /* page dimmed behind a drawer */

}

/* =============================================================================
   DARK MODE TOKEN OVERRIDES
   Applied when <body> carries .mlsg-dark (set via JS, stored in localStorage
   under key 'mlsg_theme').
   Only tokens that differ in dark mode are listed here.
============================================================================= */

body.mlsg-shell.mlsg-dark {

    /* Brand.

       The brand blue is a mid-tone: readable as text on white, but only about
       3.2:1 against a dark surface, which is why links and figures across the
       CRM measured as failures. Dark mode lifts it, and flips the text that
       sits ON a brand fill from white to near-black — white on the lifted blue
       would fail in the other direction. Both are measured, not eyeballed. */
    --mlsg-teal:              #5cb5e8;  /* 6.6:1 on the dark card surface */
    --mlsg-teal-dark:         #7cc6ef;  /* hover — lighter, not darker, in dark mode */
    --mlsg-teal-deeper:       #9bd5f4;
    --mlsg-on-brand:          #06121c;  /* near-black: 7.2:1 on the lifted brand blue */

    --mlsg-teal-bg:           #0d2d40;
    --mlsg-teal-bg-light:     #071e2b;
    --mlsg-teal-border:       #1a5a80;
    --mlsg-highlight-bg:      #0d2d40;
    --mlsg-highlight-border:  #1a6fa0;

    --mlsg-navy:              #e2e8f0;
    --mlsg-tooltip-bg:        rgba(226, 232, 240, .95);
    --mlsg-tooltip-text:      #0f172a;
    --mlsg-navy-deep:         #0f172a;
    --mlsg-navy-mid:          #1e293b;

    /* Text */
    --mlsg-text:              #f1f5f9;
    /* Was never declared in either block, so every rule using it fell back to
       the hardcoded slate and stayed unreadable in dark mode. */
    --mlsg-text-dark:         #f1f5f9;
    --mlsg-text-medium:       #cbd5e1;
    --mlsg-text-secondary:    #94a3b8;
    --mlsg-text-muted:        #a6b4c6;  /* 4.21:1 on --mlsg-border at #94a3b8 — lifted */
    --mlsg-text-subtle:       #a3b1c2;  /* 4.40:1 on --mlsg-bg-light at #7c8fa3 — lifted */
    --mlsg-text-slate:        #94a3b8;

    /* Surfaces */
    /* Card and panel surface. The shell used to carry its own literal here,
       one shade off this one, so a card styled from the base token and a card
       styled from the shell alias sat side by side in visibly different
       colours. One value now, aliased below rather than repeated. */
    --mlsg-white:             #1a2c3d;
    --mlsg-bg:                #0f172a;
    --mlsg-bg-subtle:         #1e293b;
    --mlsg-bg-light:          #1e293b;
    --mlsg-bg-slate:          #1e293b;
    --mlsg-bg-bare:           #172032;

    /* Borders */
    --mlsg-border:            #2d3f52;
    --mlsg-border-light:      #2d3f52;
    --mlsg-border-medium:     #2d3f52;
    --mlsg-border-slate:      #334155;

    /* Status — darkened surfaces for dark mode */
    /* Lead heat. Text lifts and the surface drops, the same way the semantic
       ramps do above — a tier colour tuned for white is 3:1 or worse on a
       dark surface. */
    --mlsg-heat-hot:          #f87171;
    --mlsg-heat-hot-bg:       #2d1515;
    --mlsg-heat-warm:         #fbbf24;
    --mlsg-heat-warm-bg:      #2d1f05;
    --mlsg-heat-cool:         #7cc6ef;
    --mlsg-heat-cool-bg:      #0a2233;
    --mlsg-heat-cold:         #a3b1c2;
    --mlsg-heat-cold-bg:      #1e2937;

    --mlsg-danger:            #f87171;  /* red-400: 6.45:1 on dark bg */
    --mlsg-danger-bg:         #2d1515;
    --mlsg-danger-bg-lt:      #1f0d0d;
    --mlsg-danger-border:     #7f1d1d;
    --mlsg-danger-bg-lt:      #1f0d0d;

    --mlsg-success:           #6ee7b7;  /* emerald-300: 4.74:1 on dark bg */
    --mlsg-success-bg:        #052e1a;
    --mlsg-success-bg-mid:    #0a3d22;
    --mlsg-success-border:    #065f46;

    --mlsg-warning:           #fbbf24;  /* amber-400: 10.69:1 on dark bg */
    --mlsg-warning-bg:        #2d1f05;
    --mlsg-warning-border:    #78350f;

    /* Info tracks the brand teal in dark mode too, for the same reason it does
       in light: a separate blue sitting beside the teal reads as a second
       brand colour. Surfaces are teal-tinted rather than blue-tinted so the
       text sits on its own hue. Measured: 7.16:1 on the surface, 6.35:1 on the
       deeper one. */
    --mlsg-info:              var(--mlsg-teal);
    --mlsg-info-bg:           #0a2233;
    --mlsg-info-bg-deep:      #102c3f;
    --mlsg-info-border:       #17557d;

    /* Hover/pressed variants are darker than their base in light mode, which
       inverts in dark mode — a darker shade on a dark surface is unreadable.
       They track the light variants here. */
    --mlsg-success-dark:      var(--mlsg-success);
    --mlsg-warning-dark:      var(--mlsg-warning);
    --mlsg-danger-dark:       var(--mlsg-danger);
    --mlsg-info-dark:         var(--mlsg-info);
    --mlsg-info-deep:         var(--mlsg-info);

    --mlsg-purple:            #c084fc;  /* purple-400: 6.76:1 on dark bg */
    --mlsg-purple-bg:         #1e0a35;
    --mlsg-purple-border:     #581c87;

    /* Shell-specific.

       These alias the tokens above exactly as they do in light mode. They
       were previously written as literals here, which is how they drifted:
       four of the five already matched their alias and the fifth did not,
       with nothing to catch it. Only the shell background genuinely differs
       from its light-mode source, and it says so.

       Anything that needs a card or panel surface should use
       --mlsg-white (or --shell-surface, which is the same value) — not a
       hardcoded colour, and not one of the --mlsg-bg-* tokens, which are
       page and inset backgrounds rather than raised surfaces. */
    --shell-surface:          var(--mlsg-white);
    --shell-text:             var(--mlsg-text);
    --shell-muted:            var(--mlsg-text-slate);
    --shell-border:           var(--mlsg-border-medium);

    /* Deliberately not the light-mode source: the shell sits deeper than the
       page background in dark mode so raised surfaces read as raised. */
    --shell-bg:               #0f172a;

}


/* ── Accessibility ─────────────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Shared primitives ───────────────────────────────────────────────────
   Radius, elevation, spacing and brand aliases.

   These lived in mlsg-global-admin.css, which only loads on wp-admin
   screens. Everything outside wp-admin — the CRM shell, the client portal,
   listing templates — loads this file directly, so every reference to
   --mlsg-radius or --mlsg-shadow there resolved to nothing and quietly fell
   back to square corners and no shadow.

   Values are the originals from that file, so nothing in wp-admin shifts. */
:root {
	/* Controls. One height, one radius and one border for everything a
	   person clicks or types into. Buttons and form controls shared no
	   values, so each system arrived at its own — and two shell files
	   disagreed about the radius, one of them with !important, so side by
	   side they never lined up. */
	--mlsg-control-height: 36px;
	--mlsg-control-radius: 8px;
	--mlsg-control-border: 1px;
	/* A form control keeps 16px text for iOS, a button does not have a
	   border, and both must finish at --mlsg-control-height. Two padding
	   values, one resulting height. */
	--mlsg-control-pad-y:  7px;   /* inputs and selects: 16px text + border */
	--mlsg-control-pad-y-btn: 8px;
	--mlsg-control-pad-x:  12px;

	--mlsg-radius: 10px;
	--mlsg-radius-sm: 8px;
	--mlsg-radius-pill: 999px;

	--mlsg-pad: 14px;
	--mlsg-gap: 20px;

	/* A spacing scale, so a number is chosen from a list rather than invented.
	   Every card body spaces its own children from --mlsg-space-card below,
	   which is what stops a new card arriving with everything jammed together
	   because somebody forgot to add margins. */
	--mlsg-space-1: 4px;
	--mlsg-space-2: 8px;
	--mlsg-space-3: 14px;
	--mlsg-space-4: 20px;
	--mlsg-space-5: 28px;
	--mlsg-space-6: 40px;

	/* What a card puts between its children. Matches the margin the fields
	   carried before, so nothing moves — the difference is that it now applies
	   to everything in a card rather than to fields alone. */
	--mlsg-space-card: var(--mlsg-space-3);

	--mlsg-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
	--mlsg-shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.08);
	--mlsg-focus: 0 0 0 3px rgba(16, 125, 189, 0.25);

	--mlsg-surface: var(--mlsg-white);
	--mlsg-brand: var(--mlsg-teal);
	--mlsg-brand-soft: rgba(16, 125, 189, 0.12);
	--mlsg-border-soft: rgba(0, 0, 0, 0.08);
}

/* ── Toast ────────────────────────────────────────────────────────────────
   The one toast in MLS Genie. Defined here, in the token layer, because
   three separate implementations had drifted apart — a dark pill in the
   CRM, a near-copy of it in the pipeline, and a card in the admin. One
   definition, one look, everywhere.

   Region stacks bottom-right, newest last. A second message never
   overwrites the first, which the single-element versions did.

   --mlsg-toast-offset is overridable per surface: wp-admin needs more
   clearance than the CRM shell on a narrow screen. */
:root {
	--mlsg-toast-bg: var(--mlsg-white);
	--mlsg-toast-text: var(--mlsg-text);
	--mlsg-toast-accent: var(--mlsg-teal);
	--mlsg-toast-accent-success: var(--mlsg-success);
	--mlsg-toast-accent-error: var(--mlsg-danger);
	--mlsg-toast-accent-warning: var(--mlsg-warning);
	--mlsg-toast-border-width: 5px;
	--mlsg-toast-radius: 0;
	--mlsg-toast-shadow: var(--mlsg-shadow-lg);
	--mlsg-toast-pad: 12px 14px;
	--mlsg-toast-gap: 10px;
	--mlsg-toast-offset: 24px;
	--mlsg-toast-width: 340px;
	--mlsg-toast-font-size: 0.8125rem;
	--mlsg-toast-z: 100000;
}

/* Top centre, not bottom right.
   The bottom-right corner is the furthest point from where somebody is
   looking and where the web has trained everyone to expect advertising, so
   confirmations there were being missed. This sits in the reading path. */
.mlsg-toast-region {
	position: fixed;
	top: var(--mlsg-toast-offset);
	left: 50%;
	transform: translateX(-50%);
	z-index: var(--mlsg-toast-z);
	display: flex;
	flex-direction: column;
	gap: var(--mlsg-toast-gap);
	align-items: center;
	pointer-events: none;
}

/* Inside the CRM the top bar is fixed, so a toast at the window's top edge
   would sit behind it. Cleared by the bar's own height. */
body.mlsg-shell .mlsg-toast-region {
	top: calc( var( --shell-topbar-h, 56px ) + 12px );
}

.mlsg-toast {
	display: flex;
	align-items: flex-start;
	gap: var(--mlsg-toast-gap);
	width: var(--mlsg-toast-width);
	max-width: calc(100vw - (var(--mlsg-toast-offset) * 2));
	padding: var(--mlsg-toast-pad);
	background: var(--mlsg-toast-bg);
	color: var(--mlsg-toast-text);
	font-size: var(--mlsg-toast-font-size);
	line-height: 1.5;
	border-radius: var(--mlsg-toast-radius);
	border-left: var(--mlsg-toast-border-width) solid var(--mlsg-toast-accent);
	box-shadow: var(--mlsg-toast-shadow);
	pointer-events: auto;
	animation: mlsg-toast-in 0.2s ease;
}

.mlsg-toast__icon { flex: 0 0 auto; font-size: 1.125rem; line-height: 1.4; color: var(--mlsg-toast-accent); }
.mlsg-toast__msg  { flex: 1; }

/* One button on a toast, such as Undo (2.1.1368). */
.mlsg-toast__action {
	flex: 0 0 auto;
	min-height: 32px;
	padding: 0 12px;
	font: inherit;
	font-weight: 600;
	color: var(--mlsg-teal-dark, var(--mlsg-teal));
	background: transparent;
	border: 1px solid currentColor;
	border-radius: var(--mlsg-radius-sm, 6px);
	cursor: pointer;
}
.mlsg-toast__action:hover { background: var(--mlsg-teal-bg, transparent); }
.mlsg-toast__action:focus-visible { outline: 2px solid var(--mlsg-teal); outline-offset: 2px; }

.mlsg-toast--success { border-left-color: var(--mlsg-toast-accent-success); }
.mlsg-toast--success .mlsg-toast__icon { color: var(--mlsg-toast-accent-success); }
.mlsg-toast--error { border-left-color: var(--mlsg-toast-accent-error); }
.mlsg-toast--error .mlsg-toast__icon { color: var(--mlsg-toast-accent-error); }
.mlsg-toast--warning { border-left-color: var(--mlsg-toast-accent-warning); }
.mlsg-toast--warning .mlsg-toast__icon { color: var(--mlsg-toast-accent-warning); }

.mlsg-toast.is-leaving { animation: mlsg-toast-out 0.18s ease forwards; }

@keyframes mlsg-toast-in  { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mlsg-toast-out { to { opacity: 0; transform: translateY(-10px); } }

@media (prefers-reduced-motion: reduce) {
	.mlsg-toast, .mlsg-toast.is-leaving { animation: none; }
}

/* ── Link colour ─────────────────────────────────────────────────────────
   A default for links MLS Genie renders but has never given a colour to.
   Without one the browser supplies its own — blue unvisited, purple once
   clicked — which is where the purple was coming from.

   Wrapped in :where() so the whole rule carries ZERO specificity. That is
   the point: an author rule always outranks the browser's default whatever
   its specificity, but this one loses to every rule in the plugin. So the
   navigation, cards, table links and everything else keep the colours their
   own components give them, and only genuinely unstyled links change.

   An earlier attempt set a:visited directly. Being a real selector it
   outranked those components, and every visited nav item turned teal.

   :any-link covers visited and unvisited in one selector, so the two states
   cannot drift apart later — which is the actual defect being fixed here,
   not the colour itself.

   In application UI a visited link should look the same as an unvisited one.
   Distinguishing them helps in long documents and search results, where
   "have I read this?" is a real question. In a CRM it just looks broken.

   Worth knowing when testing: browsers restrict :visited for privacy. Only
   colour properties may differ, and JavaScript is deliberately told the
   unvisited style, so this cannot be verified in code — only by looking. */
:where(body.mlsg-shell, body.mlsg-portal, .mlsg-wrap, [class^="mlsg-"], [class*=" mlsg-"]) :any-link {
	color: var(--mlsg-teal);
}
/* mlsg-public-subscribe: assets/css/mlsg-public-subscribe.css */
/**
 * MLS Genie — Public subscribe panel.
 *
 * Loaded on the public site. Deliberately self-contained and scoped tightly to
 * .mlsg-sub-pop, because this renders inside whatever theme the client runs.
 *
 * @since 2.0.45
 */

.mlsg-sub-pop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
}

.mlsg-sub-pop.is-open {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.mlsg-sub-pop__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 24, 39, 0.55);
}

.mlsg-sub-pop__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	max-width: 520px;
	padding: 26px 24px 22px;
	background: var(--mlsg-white, #fff);
	border-radius: 14px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
	/* The theme's own typeface, not ours. This panel opens on top of the
	   client's site, and a different font is the thing that makes it read as
	   a bolted-on plugin rather than part of the page. */
	font-family: inherit;
}

.mlsg-sub-pop__close {
	position: absolute;
	top: 10px;
	right: 12px;
	border: 0;
	background: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: var(--mlsg-text-subtle, #606773);
}

.mlsg-sub-pop__close:hover {
	color: var(--mlsg-text, #111827);
}

.mlsg-sub-pop__title {
	margin: 0;
	padding-right: 24px;
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mlsg-text, #111827);
}

.mlsg-sub-pop__desc {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--mlsg-text-medium, #374151);
}

.mlsg-sub-pop__field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.mlsg-sub-pop__label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--mlsg-text-medium, #374151);
}

/* Two-up on the name row; stacks on narrow screens. */
.mlsg-sub-pop__row {
	display: flex;
	gap: 12px;
}

.mlsg-sub-pop__row .mlsg-sub-pop__field {
	flex: 1;
	min-width: 0;
}

.mlsg-sub-pop__email,
.mlsg-sub-pop__first,
.mlsg-sub-pop__last {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--mlsg-border, #dcdfe4);
	border-radius: 8px;
	font-size: 1rem;
	font-family: inherit;
	color: var(--mlsg-text, #111827);
	background: var(--mlsg-white, #fff);
	box-sizing: border-box;
}

.mlsg-sub-pop__email:focus,
.mlsg-sub-pop__first:focus,
.mlsg-sub-pop__last:focus {
	outline: 2px solid var(--mlsg-teal, #0d76b4);
	outline-offset: 1px;
	border-color: var(--mlsg-teal, #0d76b4);
}

.mlsg-sub-pop__submit {
	padding: 12px 16px;
	border: 0;
	border-radius: 8px;
	background: var(--mlsg-teal, #0d76b4);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
}

.mlsg-sub-pop__submit:hover:not(:disabled) {
	filter: brightness(0.94);
}

.mlsg-sub-pop__submit:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Status sits on its own row below the button, never beside it. */
.mlsg-sub-pop__status {
	display: block;
	margin: 0;
	min-height: 1.2em;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--mlsg-text-medium, #374151);
}

.mlsg-sub-pop__status.is-error {
	color: var(--mlsg-danger, #d31f1f);
}

/* ── Trigger button (shortcode default) ───────────────────────────────── */

.mlsg-sub-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 12px 18px;
	border: 0;
	border-radius: 8px;
	background: var(--mlsg-teal, #0d76b4);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.3;
	cursor: pointer;
	text-decoration: none;
	transition: filter .15s ease;
}

.mlsg-sub-btn i {
	font-size: 1em;
	opacity: .85;
}

.mlsg-sub-btn:hover,
.mlsg-sub-btn:focus {
	filter: brightness(0.94);
	color: #fff;
}

/* Outline variant. A sidebar often already has a solid primary button in it
   (Contact Us, Schedule a Tour), and a second solid button of equal weight
   competes with the one the agent actually wants clicked. */
.mlsg-sub-btn--outline {
	background: transparent;
	border: 1.5px solid var(--mlsg-teal, #0d76b4);
	color: var(--mlsg-teal, #0d76b4);
}

.mlsg-sub-btn--outline:hover,
.mlsg-sub-btn--outline:focus {
	background: var(--mlsg-teal, #0d76b4);
	color: #fff;
	filter: none;
}

/* Plain text variant, for placing under a description without adding
   another block of colour to the page. */
.mlsg-sub-btn--link {
	background: transparent;
	padding: 4px 0;
	color: var(--mlsg-teal, #0d76b4);
	text-decoration: underline;
	font-weight: 500;
}

.mlsg-sub-btn--link:hover,
.mlsg-sub-btn--link:focus {
	background: transparent;
	color: var(--mlsg-teal, #0d76b4);
	text-decoration: none;
	filter: none;
}

/* In a sidebar the button should fill the column — a short button floating
   in a wide card is the thing that reads as unfinished. */
.mlsg-subscribe-widget__buttons .mlsg-sub-btn {
	width: 100%;
}

@media screen and (max-width: 420px) {
	.mlsg-sub-pop__row {
		flex-direction: column;
	}
}

/* Automatic placement on property pages (v2.0.91). Flex + gap so the buttons
   sit side by side and wrap on narrow screens rather than stacking flush. */
.mlsg-sub-listing-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0;
}

/* Widget can now render more than one button (a property offers both price
   drops and open houses), so the wrapper owns the spacing. */
.mlsg-subscribe-widget__buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Consent disclosure under the signup button. Small, but deliberately not
   invisible — it is the record of what the person agreed to. */
.mlsg-sub-pop__consent {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--mlsg-text-muted, #6b7280);
}

.mlsg-sub-pop__consent:empty {
	display: none;
}

.mlsg-sub-pop__consent a {
	color: inherit;
	text-decoration: underline;
}

/* Already subscribed. Muted rather than removed — a button that vanishes
   leaves the visitor unsure whether the click worked. */
.mlsg-sub-btn--done {
	background: transparent;
	border: 1.5px solid var(--mlsg-border, #d1d5db);
	color: var(--mlsg-text-muted, #6b7280);
	filter: none;
}

/* A live control, not a label — clicking it stops the alert, so it has to
   look pressable. */
.mlsg-sub-btn--done:hover,
.mlsg-sub-btn--done:focus {
	background: transparent;
	border-color: var(--mlsg-text-muted, #6b7280);
	color: var(--mlsg-text, #111827);
	filter: none;
}

.mlsg-sub-btn--done i {
	color: var(--mlsg-success, #15803d);
	opacity: 1;
}

/* On a dark background.
   The subscribed state is intentionally quiet, which on a dark hero or footer
   means invisible — muted grey on near-black fails contrast badly. The class
   is applied by the script, which resolves the colour actually painted behind
   the button; CSS has no way to ask that question itself.
   Colours here are white at reduced opacity rather than fixed greys, so the
   button reads correctly on any dark shade rather than only on black. */
.mlsg-sub-btn--done.mlsg-sub-btn--on-dark {
	border-color: rgba(255, 255, 255, 0.35);
	color: rgba(255, 255, 255, 0.85);
}

.mlsg-sub-btn--done.mlsg-sub-btn--on-dark:hover,
.mlsg-sub-btn--done.mlsg-sub-btn--on-dark:focus {
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

/* A darker green is unreadable here; the lighter tick still reads as success. */
.mlsg-sub-btn--done.mlsg-sub-btn--on-dark i {
	color: #4ade80;
}

/* Area picker — several places in one signup. Scrolls rather than growing the
   panel past the viewport on sites with a long list of cities. */
.mlsg-sub-pop__areas {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 190px;
	overflow-y: auto;
	padding: 10px 12px;
	border: 1px solid var(--mlsg-border-light, #e5e7eb);
	border-radius: 8px;
}

.mlsg-sub-pop__areas-label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--mlsg-text-muted, #6b7280);
}

/* Even columns rather than a wrapping row. Wrapping sized each item to its
   own label, so "Big Bear City" and "Blue Jay" started at different points on
   every line and the list read as staggered rather than as a list. */
.mlsg-sub-pop__areas-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.mlsg-sub-pop__areas-group > * {
	flex: 0 0 calc( ( 100% - 16px ) / 2 );
	min-width: 0;
	box-sizing: border-box;
}

@media (max-width: 420px) {
	.mlsg-sub-pop__areas-group > * {
		flex-basis: 100%;
	}
}

.mlsg-sub-pop__area {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	min-width: 0;
	font-size: 0.875rem;
	line-height: 1.4;
	cursor: pointer;
}

/* Checkboxes hold their size so every label starts on the same vertical
   line down the column. */
.mlsg-sub-pop__areas-group .mlsg-sub-pop__area input {
	flex: 0 0 auto;
	margin: 0;
}

.mlsg-sub-pop__area span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Type picker — shown when the visitor chooses what to subscribe to. Full
   width rows so the options read as a list of choices, not a toolbar. */
.mlsg-sub-pop__types {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mlsg-sub-pop__types-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mlsg-sub-pop__type {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--mlsg-border-light, #e5e7eb);
	border-radius: 8px;
	background: transparent;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--mlsg-text, #111827);
	text-align: left;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

.mlsg-sub-pop__type:hover,
.mlsg-sub-pop__type:focus {
	border-color: var(--mlsg-teal, #0d76b4);
	background: var(--mlsg-teal-bg, #f2f9fe);
}

/* When the visitor is still choosing, the name and email fields are premature
   — they pick first, then fill in. */
.mlsg-sub-pop__types:not([hidden]) ~ .mlsg-sub-pop__row,
.mlsg-sub-pop__types:not([hidden]) ~ .mlsg-sub-pop__field,
.mlsg-sub-pop__types:not([hidden]) ~ .mlsg-sub-pop__submit,
.mlsg-sub-pop__types:not([hidden]) ~ .mlsg-sub-pop__areas,
.mlsg-sub-pop__types:not([hidden]) ~ .mlsg-sub-pop__freq,
.mlsg-sub-pop__types:not([hidden]) ~ .mlsg-sub-pop__consent {
	display: none;
}

/* How often. A row of choices rather than a dropdown — three options are
   quicker to read than they are to open. */
.mlsg-sub-pop__freq {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mlsg-sub-pop__freq-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
}

.mlsg-sub-pop__freq-opt {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 0.875rem;
	cursor: pointer;
}

.mlsg-sub-pop__freq-group input {
	flex: 0 0 auto;
	margin: 0;
}

/* Back to the list of choices. Sits above the title, left of the close
   button, so it reads as "up a level" rather than as another action. */
.mlsg-sub-pop__back {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--mlsg-text-muted, #6b7280);
	cursor: pointer;
}

.mlsg-sub-pop__back:hover,
.mlsg-sub-pop__back:focus {
	color: var(--mlsg-teal, #0d76b4);
}

.mlsg-sub-pop__back[hidden] {
	display: none;
}
/* mlsg-unified-login: includes/genie-crm/assets/css/unified-login.css */
/**
 * Unified Login — standalone branded login page styles
 *
 * Extracted from inline <style> block in unified-login.php in v1.8.230.
 * Loaded by the template via a <link rel="stylesheet"> in its <head>.
 *
 * This page is a fully self-contained HTML document (no CRM shell, no
 * theme) — it renders for /dashboard/ and similar unified login
 * entry points. The standalone nature means it ships its own complete
 * stylesheet rather than relying on inherited CRM/theme styles.
 *
 * @package MLS_Genie
 * @since   1.7.467
 */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Brand tokens from client settings ── */
/* Brand colors are set per-installation via an inline `style="--ul-primary:..."` */
/* attribute on the <html> element in the template (HTML carries configuration  */
/* data, this stylesheet stays static). Defaults below are MLS Genie brand and  */
/* render if the installation has no brand override configured.                 */
:root {
	--ul-primary:   #1e88e5;
	--ul-dark:      #0d47a1;
	--ul-neutral:   #64748b;
	--ul-bg:        #f1f5f9;
	--ul-surface:   #ffffff;
	--ul-border:    #e2e8f0;
	--ul-text:      #1e293b;
	--ul-muted:     #64748b;
	--ul-error:     #dc2626;
	--ul-radius:    12px;
}

/* ── Layout ── */
html,body{min-height:100%;background:#fff;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}

.ul-page{
	min-height:100dvh;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:24px 16px;
}

/* ── Card ── */
.ul-card{
	width:100%;
	max-width:400px;
	padding:32px 28px 28px;
	display:flex;
	flex-direction:column;
	gap:16px;
}
/* .ul-card sets its own display:flex at the same specificity as the
   browser's built-in [hidden]{display:none}, and author styles win a tie —
   so without this, the hidden attribute on the step-2 code card is
   silently ignored and both steps render at once. */
.ul-card[hidden]{display:none;}

/* ── Logo / brand ── */
.ul-brand{
	text-align:center;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:10px;
}
.ul-brand__logo-link{display:block;line-height:0;}
.ul-brand__logo{width:280px;max-width:100%;object-fit:contain;display:block;}
.ul-brand__name{
	font-size:22px;
	font-weight:800;
	color:var(--ul-dark);
	letter-spacing:-.03em;
}
.ul-brand__sub{font-size:13px;color:var(--ul-muted);}

/* ── Error ── */
.ul-error{
	/* Tokens, with the old literals as fallbacks: this stylesheet loads on
	   the sign-in page, which renders before the shell's token sheet. */
	background:var(--mlsg-danger-bg, #fef2f2);
	border:1px solid var(--mlsg-danger-border, #fecaca);
	border-radius:8px;
	padding:10px 14px;
	font-size:13px;
	color:var(--ul-error);
	display:none;
}
.ul-error.is-visible{display:block;}
.ul-error.is-info{background:#f0fdf4;border-color:#bbf7d0;color:#15803d;}

/* ── Google button ── */
.ul-google-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	width:100%;
	height:44px;
	background:#fff;
	border:1.5px solid var(--ul-border);
	border-radius:8px;
	font-size:14px;
	font-weight:600;
	color:var(--ul-text);
	cursor:pointer;
	text-decoration:none;
	transition:border-color .15s,box-shadow .15s;
}
.ul-google-btn:hover{
	border-color:var(--ul-primary);
	box-shadow:0 0 0 3px color-mix(in srgb, var(--ul-primary) 15%, transparent);
}
.ul-google-btn svg{flex-shrink:0;}

/* ── Divider ── */
.ul-divider{
	display:flex;
	align-items:center;
	gap:12px;
	color:var(--ul-muted);
	font-size:12px;
}
.ul-divider::before,.ul-divider::after{
	content:'';
	flex:1;
	height:1px;
	background:var(--ul-border);
}

/* ── Form fields ── */
.ul-field{display:flex;flex-direction:column;gap:5px;}
.ul-field label{font-size:13px;font-weight:600;color:var(--ul-text);}
.ul-field input{
	height:42px;
	padding:0 12px;
	border:1.5px solid var(--ul-border);
	border-radius:8px;
	font-size:14px;
	font-family:inherit;
	color:var(--ul-text);
	background:#fff;
	transition:border-color .15s;
	width:100%;
}
.ul-field input:focus{
	outline:none;
	border-color:var(--ul-primary);
	box-shadow:0 0 0 3px color-mix(in srgb, var(--ul-primary) 15%, transparent);
}

/* ── Password wrapper ── */
.ul-pw-wrap{position:relative;}
.ul-pw-wrap input{padding-right:44px;}
.ul-pw-toggle{
	position:absolute;
	right:0;top:0;bottom:0;
	width:42px;
	background:none;border:none;
	cursor:pointer;
	color:var(--ul-muted);
	display:flex;align-items:center;justify-content:center;
}

/* ── Submit ── */
.ul-submit{
	width:100%;
	height:44px;
	background:var(--ul-primary);
	color:#fff;
	border:none;
	border-radius:8px;
	font-size:15px;
	font-weight:700;
	font-family:inherit;
	cursor:pointer;
	transition:filter .15s;
	display:flex;align-items:center;justify-content:center;gap:8px;
}
.ul-submit:hover{filter:brightness(.9);}
.ul-submit:disabled{opacity:.6;pointer-events:none;}

/* ── Spinner ── */
.ul-spinner{
	width:18px;height:18px;
	border:2px solid rgba(255,255,255,.3);
	border-top-color:#fff;
	border-radius:50%;
	animation:ul-spin .6s linear infinite;
	display:none;
}
.ul-spinner.is-visible{display:block;}
@keyframes ul-spin{to{transform:rotate(360deg)}}

/* ── Forgot password link ── */
.ul-forgot{
	text-align:center;
	font-size:13px;
	margin-top:-4px;
}
.ul-forgot a{
	color:var(--ul-muted);
	text-decoration:none;
	transition:color .15s;
}
.ul-forgot a:hover{
	color:var(--ul-primary);
	text-decoration:underline;
}
.ul-forgot a:focus-visible{
	outline:2px solid var(--ul-primary);
	outline-offset:2px;
	border-radius:4px;
}

/* ── Footer ── */
.ul-footer{text-align:center;font-size:12px;color:var(--ul-muted);}

/* ── Registration: name row ── */
.ul-name-row{display:flex;gap:12px;}
.ul-name-row .ul-field{flex:1;min-width:0;}

/* ── Registration: optional-label tag ── */
.ul-optional{font-weight:400;color:var(--ul-muted);}

/* ── Registration: code-step copy ── */
.ul-code-copy{font-size:13px;color:var(--ul-muted);line-height:1.5;text-align:center;}

/* ── Registration: persona picker ── */
.ul-persona{display:flex;gap:8px;}
.ul-persona__option{
	flex:1;
	height:38px;
	background:#fff;
	border:1.5px solid var(--ul-border);
	border-radius:8px;
	font-size:13px;
	font-weight:600;
	font-family:inherit;
	color:var(--ul-text);
	cursor:pointer;
	transition:border-color .15s,background .15s,color .15s;
}
.ul-persona__option:hover{border-color:var(--ul-primary);}
.ul-persona__option.is-selected{
	background:var(--ul-primary);
	border-color:var(--ul-primary);
	color:#fff;
}

/* ── Consent (registration) ── */
.ul-consent{
	display:flex;
	flex-direction:column;
	gap:10px;
	margin:4px 0;
}
.ul-consent__row{
	display:flex;
	align-items:flex-start;
	gap:8px;
	font-size:13px;
	color:var(--ul-text);
	cursor:pointer;
}
.ul-consent__row input[type="checkbox"]{
	margin-top:2px;
	flex-shrink:0;
}
.ul-consent__row--terms{
	font-size:11px;
	line-height:1.5;
	color:var(--ul-text-muted, #6b7280);
}
.ul-consent__row--terms a{
	color:var(--ul-primary);
	text-decoration:underline;
}
.ul-consent__row--terms a:hover{
	text-decoration:none;
}

/* ── Mobile ── */
@media(max-width:440px){
	.ul-card{padding:28px 20px 24px;border-radius:16px;}
	.ul-name-row{flex-direction:column;gap:16px;}
}

/* ── TCPA disclosure (registration, v2.0.71) ──
   Replaced the consent tick-box: consent is given by submitting the form, so
   the disclosure has to be legible rather than tucked away. Deliberately not
   as small as fine print — it is the record of what the client agreed to. */
.ul-consent--disclosure{
	margin:8px 0 0;
}
.ul-consent__disclosure{
	margin:0;
	font-size:11px;
	line-height:1.55;
	color:var(--ul-text-muted, #6b7280);
}
.ul-consent__disclosure a{
	color:var(--ul-primary);
	text-decoration:underline;
}
.ul-consent__disclosure a:hover{
	text-decoration:none;
}

/* ── Password reset panel (v2.0.73) ──
   Reset happens inside the modal now rather than on the WordPress login
   screen, so these carry the same look as the sign-in and register panels. */
.ul-linkbtn{
	background:none;
	border:none;
	padding:0;
	font:inherit;
	color:var(--ul-primary);
	text-decoration:underline;
	cursor:pointer;
}
.ul-linkbtn:hover{
	text-decoration:none;
}
.ul-reset-intro{
	margin:0;
	font-size:13px;
	line-height:1.55;
	color:var(--ul-text-muted, #6b7280);
}
.ul-notice{
	padding:10px 12px;
	border-radius:8px;
	background:var(--mlsg-teal-bg, #f2f9fe);
	border:1px solid var(--ul-border, #e5e7eb);
	font-size:13px;
	line-height:1.5;
	color:var(--ul-text);
}

/* ── Set New Password page (v2.0.75) ──
   Reset now finishes inside the brand rather than on the WordPress login
   screen. Reuses .ul-page / .ul-card / .ul-brand; only the form needs its
   own spacing. */
.ul-reset-form{
	display:flex;
	flex-direction:column;
	gap:16px;
}
.ul-reset-heading{
	font-size:18px;
	text-align:center;
	margin:0;
}

/* ── Sign-up: "I am a" and opt-in boxes (v2.1.948) ──
   templates/shell/signup-profile-fields.php, shared by /register/ and the
   sign-up pop-up. "I am a" is a set of radios drawn as the existing persona
   buttons, so it is keyboard-reachable and announced as one choice. The
   opt-in boxes start unticked; their small print is what the consent history
   stores. */
.mlsg-signup__group{
	margin:0;
	padding:0;
	border:0;
	min-width:0;
}
.mlsg-signup__group legend{
	padding:0;
	margin-bottom:5px;
	font-size:0.8125rem;
	font-weight:600;
	color:var(--ul-text);
}
.mlsg-signup__req{
	color:var(--ul-error);
}
.mlsg-signup__answers{
	flex-wrap:wrap;
}
.mlsg-signup__choice{
	position:relative;
	display:flex;
	flex:1 1 6rem;
	cursor:pointer;
}
.mlsg-signup__choice input{
	position:absolute;
	width:1px;
	height:1px;
	opacity:0;
}
.mlsg-signup__choice .ul-persona__option{
	/* Drawn only by its outline, so it has to reach 3:1 on white. */
	border-color:color-mix(in srgb, var(--ul-muted) 75%, var(--ul-surface));
	display:flex;
	align-items:center;
	justify-content:center;
	height:auto;
	min-height:2.375rem;
	padding:0.375rem 0.5rem;
	text-align:center;
}
.mlsg-signup__choice input:checked + .ul-persona__option{
	background:var(--ul-primary);
	border-color:var(--ul-primary);
	color:var(--ul-surface);
}
.mlsg-signup__choice input:focus-visible + .ul-persona__option{
	outline:2px solid var(--ul-primary);
	outline-offset:2px;
}
.mlsg-signup__small{
	display:block;
	margin-top:2px;
	font-size:0.8125rem;
	line-height:1.5;
	color:var(--ul-muted);
}
.ul-consent .screen-reader-text{
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
}
/* mlsg-auth-modal: includes/genie-crm/assets/css/auth-modal.css */
/**
 * MLS Genie™ — Auth Modal chrome
 * Field/input/button/error styling is inherited from unified-login.css
 * (enqueued as a dependency — see class-mlsg-auth-modal.php). This file is
 * only the modal shell itself: backdrop, dialog box, tabs, close button.
 */

.mlsg-modal{
	position:fixed;
	inset:0;
	z-index:100000;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px 16px;
}
/* .mlsg-modal sets display:flex above, at the same specificity as the
   browser's built-in [hidden]{display:none} — author styles win a tie, so
   without this the modal would stay visible even while [hidden] is set. */
.mlsg-modal[hidden]{display:none;}

.mlsg-modal__backdrop{
	position:absolute;
	inset:0;
	background:rgba(15,23,42,.55);
}

.mlsg-modal__dialog{
	position:relative;
	width:100%;
	max-width:520px;
	max-height:calc(100vh - 48px); max-height: calc(100dvh - 48px);
	overflow-y:auto;
	background:#fff;
	border-radius:16px;
	box-shadow:0 20px 60px rgba(0,0,0,.25);
	padding:32px 28px 28px;
	display:flex;
	flex-direction:column;
	gap:16px;
}

.mlsg-modal__close{
	position:absolute;
	top:14px;
	right:14px;
	width:32px;
	height:32px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:transparent;
	border:none;
	border-radius:8px;
	font-size:16px;
	color:var(--ul-muted, #64748b);
	cursor:pointer;
}
.mlsg-modal__close:hover{background:#f1f5f9;}

.mlsg-modal__tabs{
	display:flex;
	gap:4px;
	background:#f1f5f9;
	border-radius:10px;
	padding:4px;
}
.mlsg-modal__tab{
	flex:1;
	height:36px;
	background:transparent;
	border:none;
	border-radius:7px;
	font-size:14px;
	font-weight:600;
	font-family:inherit;
	color:var(--ul-muted, #64748b);
	cursor:pointer;
	transition:background .15s,color .15s;
}
.mlsg-modal__tab.is-active{
	background:#fff;
	color:var(--ul-text, #0f172a);
	box-shadow:0 1px 3px rgba(0,0,0,.1);
}

.mlsg-modal__panel{
	display:flex;
	flex-direction:column;
	gap:16px;
}
.mlsg-modal__panel[hidden]{display:none;}

/* Body scroll lock while the modal is open */
body.mlsg-modal-open{overflow:hidden;}

@media(max-width:440px){
	.mlsg-modal__dialog{padding:28px 20px 24px;border-radius:16px;}
}
/* mlsg-genie-form: includes/genie-crm/assets/css/genie-form.css */
/**
 * Genie Form Builder — the public form.
 *
 * Extracted from a per-form inline <style> block that repeated every rule for
 * each form on the page, scoped by its unique id. One file, one set of rules,
 * cached once.
 *
 * Scoped to .mlsg-cf so a theme's own form styles are not touched.
 */

.mlsg-cf__fields { display: flex; flex-wrap: wrap; gap: 18px; }

.mlsg-cf-field--full { width: 100%; }
.mlsg-cf-field--half { flex: 1; min-width: 200px; }

/* A field hidden by its show-when rule. A class, not a style set from
   JavaScript — clearing an inline display makes the browser guess. */
.mlsg-cf-field--hidden { display: none; }

.mlsg-cf-label {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 8px;
	color: inherit;
}

.mlsg-cf-req { color: var(--mlsg-danger, #dc2626); }

.mlsg-cf-input {
	width: 100%;
	padding: 13px 14px;
	border-style: solid;
	border-width: var(--genie-field-bwt, 1px) var(--genie-field-bws, 1px) var(--genie-field-bwb, 1px);
	border-color: var(--genie-field-bd, var(--mlsg-border-light, #d1d5db));
	border-radius: var(--genie-field-r, 6px);
	font-size: var(--genie-field-size, 1rem);
	line-height: 1.4;
	font-family: inherit;
	background: var(--genie-field-bg, var(--mlsg-white, #fff));
	color: var(--mlsg-text, #111827);
	box-sizing: border-box;
}

.mlsg-cf-input:focus {
	outline: none;
	border-color: var(--genie-field-focus, var(--mlsg-teal, #0ea5e9));
	box-shadow: 0 0 0 3px rgba( 14, 165, 233, .15 );
}

textarea.mlsg-cf-input { resize: vertical; }

.mlsg-cf-name-row { display: flex; gap: 14px; flex-wrap: wrap; }
.mlsg-cf-name-row .mlsg-cf-input { flex: 1; min-width: 180px; }

.mlsg-cf-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.9375rem;
	line-height: 1.5;
	cursor: pointer;
}

.mlsg-cf-checkbox-label input { margin-top: 2px; flex-shrink: 0; }

/* Marketing consent. Longer than an ordinary checkbox label because it is
   legal copy, so it is given reading-copy sizing rather than label sizing. */
.mlsg-cf-consent {
	font-size: 0.9375rem;
	line-height: 1.55;
}

.mlsg-cf-consent a {
	color: var(--mlsg-teal, #107dbd);
	text-decoration: underline;
}

/* reCAPTCHA. Google renders a fixed-width iframe here; the wrapper only gives
   it room and lets it shrink on a narrow screen rather than overflow. */
.mlsg-cf-captcha {
	margin-top: 18px;
	max-width: 100%;
	overflow-x: auto;
}

.mlsg-cf-footer { margin-top: 22px; }

/* The submit button.
 *
 * Styled here rather than borrowed from .genie-btn, which lives in the admin
 * stylesheet and is not loaded on a public page — asking for it produced the
 * browser's own grey default button on every published form. The public form
 * carries its own look and depends on nothing outside this file. */
.mlsg-cf-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: var(--genie-btn-py, 13px) var(--genie-btn-px, 32px);
	border: 1px solid var(--genie-btn1-bd, var(--genie-btn1-bg, var(--mlsg-teal, #107dbd)));
	border-radius: var(--genie-btn-r, 6px);
	background: var(--genie-btn1-bg, var(--mlsg-teal, #107dbd));
	color: var(--genie-btn1-fg, #fff);
	font-family: inherit;
	font-size: var(--genie-btn-size, 1rem);
	font-weight: var(--genie-btn-w, 600);
	text-transform: var(--genie-btn-tt, none);
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.mlsg-cf-submit--icon {
	gap: 0.5rem;
}

.mlsg-cf-submit:hover,
.mlsg-cf-submit:focus {
	background: var(--genie-btn1-hbg, var(--mlsg-teal-dark, #0d6aa3));
	border-color: var(--genie-btn1-hbd, var(--genie-btn1-hbg, var(--mlsg-teal-dark, #0d6aa3)));
	color: var(--genie-btn1-hfg, #fff);
}

.mlsg-cf-submit:focus-visible {
	outline: 2px solid var(--mlsg-teal-dark, #0d6aa3);
	outline-offset: 2px;
}

.mlsg-cf-submit:disabled,
.mlsg-cf-submit[disabled] {
	opacity: .55;
	cursor: not-allowed;
}

@media ( prefers-reduced-motion: reduce ) {
	.mlsg-cf-submit { transition: none; }
}

.mlsg-cf-error-msg {
	margin-top: 12px;
	padding: 12px 14px;
	background: var(--mlsg-danger-bg, #fef2f2);
	border: 1px solid var(--mlsg-danger-border, #fecaca);
	border-radius: 6px;
	font-size: 0.9375rem;
	color: var(--mlsg-danger, #991b1b);
}

.mlsg-cf-success {
	padding: 16px 20px;
	background: var(--mlsg-success-bg, #ecfdf5);
	border: 1px solid var(--mlsg-success-border, #86efac);
	border-radius: 8px;
	font-size: 0.9375rem;
	color: var(--mlsg-success, #166534);
	font-weight: 500;
}

.mlsg-cf-title {
	font-size: 1.375rem;
	font-weight: 700;
	margin-bottom: 18px;
}

/* The honeypot. Off-screen rather than display:none, because a bot that reads
   styles skips a hidden field and fills a visible one. Aria-hidden and
   tabindex keep it away from a screen reader and the tab order. */
.mlsg-cf-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}