/* ==========================================================================
   Optima Express IDX overrides — brand the iHomeFinder output.
   MLS attribution must NEVER be hidden. Always passes through compliance.
   ========================================================================== */

/* === Global wrapper === */
.ihf-container,
.idx-container,
.omnibar-wrapper,
.ihf-omnibar-container {
	font-family: var(--font-body) !important;
	color: var(--color-grey-dark) !important;
}

/* === Search forms === */
.ihf-search-form,
.omnibar,
.ihf-omnibar,
.ihf-search-form-container {
	background: var(--color-white) !important;
	border-top: 4px solid var(--color-accent) !important;
	box-shadow: var(--shadow-md) !important;
	border-radius: var(--radius-sm) !important;
}

.ihf-search-form input[type="text"],
.ihf-search-form input[type="number"],
.ihf-search-form select,
.omnibar input,
.omnibar select {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	border: 1px solid var(--color-grey-light) !important;
	border-radius: var(--radius-sm) !important;
	padding: var(--space-3) var(--space-4) !important;
	min-height: 48px !important;
}

.ihf-search-form input:focus,
.ihf-search-form select:focus,
.omnibar input:focus,
.omnibar select:focus {
	border-color: var(--color-accent) !important;
	box-shadow: 0 0 0 3px rgba(97, 155, 138, 0.15) !important;
	outline: none !important;
}

/* === Search button === */
.ihf-search-btn,
.omnibar-submit,
.ihf-search-form button[type="submit"],
.ihf-btn-primary {
	background: var(--color-accent) !important;
	color: var(--color-white) !important;
	font-family: var(--font-heading) !important;
	font-size: var(--text-sm) !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	border: none !important;
	border-radius: var(--radius-sm) !important;
	padding: var(--space-3) var(--space-6) !important;
	cursor: pointer !important;
	transition: background var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out) !important;
	min-height: 48px !important;
}

.ihf-search-btn:hover,
.omnibar-submit:hover,
.ihf-btn-primary:hover {
	background: var(--color-primary) !important;
	color: var(--color-white) !important;
	transform: translateY(-2px) !important;
}

/* === Result grid — force 3-per-row on desktop ===
   Optima Express defaults to a 2-col responsive grid at this width.
   We use :has() to find any container holding our listing cards and
   override the layout regardless of which wrapper class the plugin
   emits (varies by shortcode style: grid / gallery / list).

   Applied inside both wrappers we render IDX content in:
   - .idx-page-wrapper      → template-listings.php
   - .page-content-wrap--idx → page.php IDX-virtual branch (e.g. /property-search/) */
.idx-page-wrapper :has(> .ihf-listing-card),
.idx-page-wrapper :has(> .ihf-grid-result),
.idx-page-wrapper :has(> .ihf-card),
.idx-page-wrapper :has(> .idx-listing-item),
.page-content-wrap--idx :has(> .ihf-listing-card),
.page-content-wrap--idx :has(> .ihf-grid-result),
.page-content-wrap--idx :has(> .ihf-card),
.page-content-wrap--idx :has(> .idx-listing-item) {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: var(--space-6) !important;
}

@media (max-width: 1024px) {
	.idx-page-wrapper :has(> .ihf-listing-card),
	.idx-page-wrapper :has(> .ihf-grid-result),
	.idx-page-wrapper :has(> .ihf-card),
	.idx-page-wrapper :has(> .idx-listing-item),
	.page-content-wrap--idx :has(> .ihf-listing-card),
	.page-content-wrap--idx :has(> .ihf-grid-result),
	.page-content-wrap--idx :has(> .ihf-card),
	.page-content-wrap--idx :has(> .idx-listing-item) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 640px) {
	.idx-page-wrapper :has(> .ihf-listing-card),
	.idx-page-wrapper :has(> .ihf-grid-result),
	.idx-page-wrapper :has(> .ihf-card),
	.idx-page-wrapper :has(> .idx-listing-item),
	.page-content-wrap--idx :has(> .ihf-listing-card),
	.page-content-wrap--idx :has(> .ihf-grid-result),
	.page-content-wrap--idx :has(> .ihf-card),
	.page-content-wrap--idx :has(> .idx-listing-item) {
		grid-template-columns: 1fr !important;
	}
}

/* === Property listing cards === */
.ihf-listing-card,
.idx-listing-item,
.ihf-grid-result,
.ihf-card {
	background: var(--color-white) !important;
	border: 1px solid var(--color-grey-light) !important;
	border-radius: 0 !important;
	overflow: hidden !important;
	clip-path: polygon(0 0, 97% 0, 100% 4%, 100% 100%, 0 100%) !important;
	transition: transform var(--duration-base) var(--ease-out),
		box-shadow var(--duration-base) var(--ease-out) !important;
	box-shadow: var(--shadow-sm) !important;
}

.ihf-listing-card:hover,
.idx-listing-item:hover,
.ihf-grid-result:hover,
.ihf-card:hover {
	transform: translateY(-6px) !important;
	box-shadow: var(--shadow-lg) !important;
}

/* Top accent bar */
.ihf-listing-card::before,
.idx-listing-item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--color-accent);
}

/* === Listing image === */
.ihf-listing-image,
.idx-listing-image,
.ihf-grid-result-image {
	overflow: hidden !important;
	aspect-ratio: 16 / 11 !important;
}

.ihf-listing-image img,
.idx-listing-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transition: transform var(--duration-slow) var(--ease-out) !important;
}

.ihf-listing-card:hover .ihf-listing-image img,
.idx-listing-item:hover .idx-listing-image img {
	transform: scale(1.05) !important;
}

/* === Price === */
.ihf-price,
.idx-price,
.ihf-grid-result-price,
.ihf-listing-price {
	color: var(--color-primary) !important;
	font-family: var(--font-heading) !important;
	font-weight: 700 !important;
	font-size: var(--text-xl) !important;
	letter-spacing: -0.01em !important;
}

/* === Address === */
.ihf-address,
.idx-address,
.ihf-grid-result-address {
	color: var(--color-grey-dark) !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
}

/* === Listing meta (beds/baths/sqft) === */
.ihf-listing-meta,
.idx-listing-meta,
.ihf-grid-result-attributes {
	color: var(--color-grey-mid) !important;
	font-family: var(--font-heading) !important;
	font-size: var(--text-xs) !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
}

/* === MLS attribution — NEVER hide === */
.ihf-mls-attribution,
.mls-disclaimer,
.ihf-disclaimer,
.ihf-listing-disclaimer,
.ihf-listing-courtesy {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	font-size: var(--text-xs) !important;
	color: var(--color-grey-mid) !important;
	font-family: var(--font-body) !important;
	margin-top: var(--space-3) !important;
	padding-top: var(--space-2) !important;
	border-top: 1px solid var(--color-grey-light) !important;
}

/* === IDX page wrapper for full-width search === */
.idx-page-wrapper {
	background: var(--color-off-white);
	padding: var(--space-12) 0;
}

.idx-page-wrapper .container {
	background: var(--color-white);
	padding: var(--space-8);
	border-top: 4px solid var(--color-accent);
	box-shadow: var(--shadow-md);
}

/* === Pagination inside IDX === */
.ihf-pagination a,
.ihf-pagination span,
.idx-pagination a,
.idx-pagination span {
	background: var(--color-white) !important;
	border: 1px solid var(--color-grey-light) !important;
	color: var(--color-primary) !important;
	font-family: var(--font-heading) !important;
	font-weight: 600 !important;
	border-radius: var(--radius-sm) !important;
}

.ihf-pagination .active,
.ihf-pagination a:hover,
.idx-pagination .active,
.idx-pagination a:hover {
	background: var(--color-accent) !important;
	border-color: var(--color-accent) !important;
	color: var(--color-white) !important;
}

/* Hide the address-search wrapper when its shortcode produces no output,
   so the spacing margin doesn't leave a phantom gap on the listings page. */
.idx-address-search:empty {
	display: none;
}

/* === Optima Express built-in contact form (/contact-form/) ===
   The plugin emits its own "Address & Phone" + "Contact By Email" blocks
   plus a multi-field form. We're rendering them inside the theme's
   contact-grid form column, so style the plugin's HTML to match the rest
   of the contact page (typography, inputs, button). */

/* Hide the duplicate "Address & Phone" block — the dark aside on the left
   already shows the correct office contact details, so the plugin's own
   address card inside the form column is redundant. */
.idx-contact-form-wrap .ihf-contact-form-address-phone-container {
	display: none !important;
}

.idx-contact-form-wrap p {
	font-family: var(--font-body);
	color: var(--color-text);
}

.idx-contact-form-wrap a {
	color: var(--color-accent);
}

.idx-contact-form-wrap label {
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-primary);
}

.idx-contact-form-wrap input[type="text"],
.idx-contact-form-wrap input[type="email"],
.idx-contact-form-wrap input[type="tel"],
.idx-contact-form-wrap input[type="number"],
.idx-contact-form-wrap textarea,
.idx-contact-form-wrap select {
	width: 100%;
	background: var(--color-white);
	border: 1px solid var(--color-grey-light);
	border-radius: var(--radius-sm);
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-text);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.idx-contact-form-wrap input[type="text"]:focus,
.idx-contact-form-wrap input[type="email"]:focus,
.idx-contact-form-wrap input[type="tel"]:focus,
.idx-contact-form-wrap input[type="number"]:focus,
.idx-contact-form-wrap textarea:focus,
.idx-contact-form-wrap select:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb, 97, 155, 138), 0.18);
}

.idx-contact-form-wrap textarea {
	min-height: 140px;
	resize: vertical;
}

.idx-contact-form-wrap button,
.idx-contact-form-wrap input[type="submit"],
.idx-contact-form-wrap .btn {
	background: var(--color-primary) !important;
	color: var(--color-white) !important;
	border: none !important;
	border-radius: var(--radius-sm) !important;
	padding: var(--space-3) var(--space-8) !important;
	font-family: var(--font-heading) !important;
	font-size: var(--text-base) !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: none !important;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.1s ease;
}

.idx-contact-form-wrap button:hover,
.idx-contact-form-wrap input[type="submit"]:hover,
.idx-contact-form-wrap .btn:hover {
	background: var(--color-accent) !important;
	transform: translateY(-1px);
}

/* Plugin's section headers ("Address & Phone", "Contact By Email") render
   as gray bars by default — soften them so they blend with our form column. */
.idx-contact-form-wrap .ihf-section-header,
.idx-contact-form-wrap fieldset > legend,
.idx-contact-form-wrap [class*="section-header"]:not(.section-header--center) {
	background: transparent !important;
	border-bottom: 1px solid var(--color-grey-light);
	padding: 0 0 var(--space-2) 0 !important;
	margin-bottom: var(--space-4);
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--color-primary);
	text-transform: none;
	letter-spacing: 0;
}

/* Make the iHomefinder attribution unobtrusive at the bottom of the form */
.idx-contact-form-wrap .ihf-poweredby,
.idx-contact-form-wrap [class*="poweredby"] {
	font-size: var(--text-xs);
	color: var(--color-grey-mid);
	text-align: right;
	margin-top: var(--space-6);
}

/* === Optima Express virtual pages (single property, search results) ===
   Detail pages get a clean full-width wrapper so the plugin's gallery,
   map, and feature tables can breathe instead of squeezing into the
   typography column. Applied via page.php route detection. */
.page-idx-virtual {
	background: var(--color-white);
}

.page-content-wrap--idx {
	padding-block: var(--space-4) var(--space-16);
}

.page-content-wrap--idx > .container-wide > * {
	max-width: 100%;
}

.page-content-wrap--idx h1 {
	font-family: var(--font-display);
	color: var(--color-primary);
	margin-top: 0;
	margin-bottom: var(--space-4);
}

.page-content-wrap--idx img {
	max-width: 100%;
	height: auto;
}

/* Plugin sometimes injects inline fixed widths — gently relax them */
.page-content-wrap--idx [style*="width: 600px"],
.page-content-wrap--idx [style*="width:600px"],
.page-content-wrap--idx [style*="max-width: 600px"],
.page-content-wrap--idx [style*="max-width:600px"] {
	max-width: 100% !important;
	width: 100% !important;
}