/**
 * IDX Broker Platinum overrides.
 *
 * IDX markup is NOT Divi-editable (BUILD-SPEC §5, Phase 1) — it can only be styled with CSS.
 * These selectors target IDX Broker's real output, so this file transfers to production as-is
 * even though the live feed cannot run in the local Playground environment.
 */

/* --- Omnibar (hero search) ------------------------------------------------ */
.IDX-omnibar-form {
	font-family: var(--vrg-font-body);
}

.IDX-omnibar-field,
.IDX-omnibar-input {
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--vrg-radius);
	background: rgba(255, 255, 255, 0.92);
	padding: 1rem 1.25rem;
	font-size: 1rem;
}

.IDX-omnibar-submit,
.IDX-omnibar-form button[type="submit"] {
	background: var(--vrg-color-accent);
	color: var(--vrg-color-primary);
	font-family: var(--vrg-font-eyebrow);
	text-transform: uppercase;
	letter-spacing: var(--vrg-tracking-eyebrow);
	border: 0;
	border-radius: var(--vrg-radius);
	padding: 1rem 2rem;
	cursor: pointer;
}

/* --- Listing cards (showcase / showcaseWrap) ------------------------------ */
.IDX-showcaseWrap,
.IDX-resultsCell {
	background: #fff;
	border: 1px solid rgba(138, 133, 128, 0.25);
	border-radius: var(--vrg-radius);
	overflow: hidden;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.IDX-showcaseWrap:hover,
.IDX-resultsCell:hover {
	box-shadow: 0 18px 40px rgba(46, 31, 63, 0.16);
	transform: translateY(-3px);
}

.IDX-showcasePhotoLink img,
.IDX-resultsPhotoLink img {
	transition: transform 0.6s ease;
	display: block;
	width: 100%;
	height: auto;
}

.IDX-showcaseWrap:hover .IDX-showcasePhotoLink img {
	transform: scale(1.05);
}

/* Champagne price tag. */
.IDX-showcasePrice,
.IDX-resultsPrice,
.IDX-field-price .IDX-text {
	font-family: var(--vrg-font-eyebrow);
	font-size: 1.25rem;
	letter-spacing: 0.04em;
	color: var(--vrg-color-primary);
	background: var(--vrg-color-accent);
	display: inline-block;
	padding: 0.25em 0.75em;
	border-radius: var(--vrg-radius);
}

.IDX-showcaseAddress,
.IDX-resultsAddress {
	font-family: var(--vrg-font-display);
	font-size: 1.125rem;
	color: var(--vrg-color-primary);
}

/* --- Compliance: MLS disclaimer must stay legible (never hide this) ------- */
.IDX-disclaimer,
.IDX-mlsDisclaimer,
.IDX-detailsDisclaimer {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--vrg-color-muted);
	max-width: none;
}

/* --- Dynamic wrapper: keep IDX pages inside the site shell ---------------- */
#IDX-main {
	max-width: 1180px;
	margin-inline: auto;
	padding-block: var(--vrg-section-y);
}

/* --- IDX Quick Search widget --------------------------------------------
   IDX renders its own form controls at ~22px tall, below the WCAG 2.5.8
   24px minimum, and unstyled against our palette. These selectors target
   IDX's real markup, so they apply wherever the widget is embedded. */
.IDX-qsInput,
.IDX-qsTextInput,
.IDX-qsSelectInput {
	min-height: 44px;
	padding: 0.6rem 0.75rem;
	font: inherit;
	font-size: 1rem;
	border: 1px solid color-mix(in srgb, var(--vrg-color-muted) 45%, transparent);
	border-radius: var(--vrg-radius);
	background: var(--vrg-color-surface);
	color: var(--vrg-color-ink);
	box-sizing: border-box;
	width: 100%;
}

.IDX-qsFieldWrap {
	margin-bottom: 0.75rem;
}

.IDX-qsLabel {
	font-family: var(--vrg-font-eyebrow);
	text-transform: uppercase;
	letter-spacing: var(--vrg-tracking-eyebrow);
	font-size: 0.8125rem;
	color: var(--vrg-color-surface);
	display: block;
	margin-bottom: 0.25rem;
}

/* Submit button matches the site's buttons. */
.IDX-qsSubmit,
.IDX-quicksearch input[type="submit"],
.IDX-qs input[type="submit"] {
	min-height: 44px;
	padding: 0.85em 2em;
	font-family: var(--vrg-font-eyebrow);
	text-transform: uppercase;
	letter-spacing: var(--vrg-tracking-eyebrow);
	background: var(--vrg-color-accent);
	color: var(--vrg-color-ink);
	border: 0;
	border-radius: var(--vrg-radius);
	cursor: pointer;
}

/* ---------------------------------------------------------------- price bands
 * The search hub stacks several showcase widgets. Tighten the gap between a band
 * heading and its listings so each price range reads as one unit, and alternate the
 * background so the bands are visually separable while scrolling.
 */
.vrg-band .vrg-heading {
	margin-bottom: 0.75rem;
}

.vrg-band .vrg-heading h2 {
	margin-bottom: 0.25rem;
}

.vrg-band .vrg-heading p {
	color: var(--vrg-color-muted);
	margin: 0;
}

.vrg-band:nth-of-type(even) {
	background: #FBF7EF;
}

/* IDX lead-signup and quick-search forms ship their own markup; keep inputs from
 * overflowing narrow columns on mobile. */
.vrg-idx-widget input,
.vrg-idx-widget select {
	max-width: 100%;
}

/* ------------------------------------------------- IDX legacy form widgets
 * Quick search (35707) and lead signup (35708) are legacy widgets. They inject their own
 * markup and stylesheet, which causes two problems on our pages:
 *
 *   1. The wrapper is hard-coded to 250px, leaving a cramped column on a full-width row.
 *   2. Field labels are set to a near-white colour (meant for a dark panel), so they are
 *      invisible on our cream background — an accessibility failure, not just cosmetic.
 *
 * IDX's stylesheet is cross-origin, so its rules cannot be inspected or reordered from here;
 * !important is genuinely required to win. Everything is scoped to .vrg-idx-widget.
 */
.vrg-idx-widget form {
	max-width: none;
}

.vrg-idx-widget .IDX-quicksearchWrapper,
.vrg-idx-widget [id^="IDX-quicksearch-"],
.vrg-idx-widget #LeadSignup {
	width: 100% !important;
	max-width: none !important;
}

/* Quick search wraps each label+field in .IDX-qsFieldWrap, so its children grid cleanly. */
.vrg-idx-widget .IDX-quicksearchForm {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1rem 1.25rem;
	align-items: end;
}

/* The lead signup form has no field wrappers — labels and inputs are flat siblings, so a
 * grid pairs the wrong label with the wrong field. Keep it stacked and readable instead. */
.vrg-idx-widget #IDX-widgetLeadSignupForm {
	display: block;
	width: 100% !important;
	max-width: 30rem;
}

.vrg-idx-widget #IDX-widgetLeadSignupForm input {
	margin-bottom: 1rem;
}

.vrg-idx-widget .IDX-qsFieldWrap {
	margin: 0 !important;
	min-width: 0;
}

.vrg-idx-widget .IDX-qsHiddenInput {
	display: none;
}

/* Labels: readable colour, matching the site's field-label treatment.
 *
 * IDX hides these with an ID selector (#IDX-qsPtLabel-35707 { display: none }), which leaves
 * the price and bed/bath inputs with no accessible name at all — a screen reader announces
 * them as bare edit fields. Force them visible; an ID selector can only be beaten by
 * !important. */
.vrg-idx-widget .IDX-qsLabel,
.vrg-idx-widget label {
	display: block !important;
	margin-bottom: 0.3rem;
	color: var(--vrg-color-ink) !important;
	font-family: "Barlow Condensed", system-ui, sans-serif;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-align: left !important;   /* IDX right-aligns them */
}

.vrg-idx-widget .IDX-qsInput,
.vrg-idx-widget input[type="text"],
.vrg-idx-widget input[type="email"],
.vrg-idx-widget input[type="tel"],
.vrg-idx-widget select {
	width: 100% !important;
	min-height: 44px;              /* touch target */
	padding: 0.5rem 0.65rem;
	border: 1px solid rgba(74, 53, 104, 0.25);
	border-radius: 2px;
	background: #fff;
	font: inherit;
	color: var(--vrg-color-ink);
}

.vrg-idx-widget input:focus,
.vrg-idx-widget select:focus {
	outline: 2px solid var(--vrg-color-primary-light);
	outline-offset: 1px;
}

/* Submit buttons inherit the site button treatment. */
.vrg-idx-widget input[type="submit"],
.vrg-idx-widget button[type="submit"] {
	width: auto;
	min-height: 44px;
	padding: 0.65rem 1.75rem;
	border: 0;
	background: var(--vrg-color-primary);
	color: var(--vrg-color-surface) !important;
	font-family: "Barlow Condensed", system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	cursor: pointer;
}

.vrg-idx-widget input[type="submit"]:hover,
.vrg-idx-widget button[type="submit"]:hover {
	background: #6B4E8F;
}

/* IDX styles these buttons with ID selectors and !important, so a class-based !important
 * loses the specificity contest. Matching by ID is the only thing that wins. The IDs are
 * stable (they embed the widget id), so they are pinned here deliberately:
 *   #IDX-qsSubmit-35707 = quick search, #IDX-widgetsubmit = lead signup.
 * If either widget is recreated with a new id, update these two selectors. */
#IDX-qsSubmit-35707,
#IDX-widgetsubmit,
.vrg-idx-widget [id^="IDX-qsSubmit-"] {
	width: auto !important;
	min-height: 44px;
	padding: 0.65rem 1.75rem !important;
	border: 0 !important;
	background: var(--vrg-color-primary) !important;
	color: var(--vrg-color-surface) !important;
	cursor: pointer;
}

#IDX-qsSubmit-35707:hover,
#IDX-widgetsubmit:hover,
.vrg-idx-widget [id^="IDX-qsSubmit-"]:hover {
	background: #6B4E8F !important;
}

#IDX-widgetLeadSignupHeaderWrapper {
	margin-bottom: 0.5rem;
}

#IDX-widgetLeadSignupHeader {
	font-family: "Libre Caslon Display", Georgia, serif;
	font-size: 1.15rem;
	color: var(--vrg-color-primary);
}