/*
Theme Name: Valorie's List - East Idaho Real Estate Theme
Theme URI: https://valorieslist.com
Author: Valorie Blanchard | Real Estate Brokerage
Author URI: https://valorieslist.com
Description: Premium, high-performance WordPress theme for East Idaho real estate, Snake River MLS search, horse properties, home valuations, and interactive zip code price heatmaps. Designed for Idaho Falls, Rigby, Rexburg, and Teton Valley.
Version: 3.46.19
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: valories-list
Tags: real-estate, custom-header, custom-menu, featured-images, responsive-layout, theme-options
--------------------------------------------------------------
TABLE OF CONTENTS
--------------------------------------------------------------
1. Reset & Global Styles
2. Typography & Colors
3. Header & Navigation Bar
4. Hero Search Banner
5. Featured Property Grid (4 Columns)
6. Zip Code Price Heat Map Widget
7. Home Valuation Lead Tool
8. Footer & Legal MLS Disclaimers
-------------------------------------------------------------- */
/* 1. Global Reset & Layout Variables */
:root {
--primary-blue: #21356e;
--primary-blue-dark: #182956;
--accent-orange: #ec552d;
--accent-orange-hover: #d94822;
--dark-navy: #12172d;
--text-dark: #1e293b;
--text-muted: #64748b;
--bg-light: #f8fafc;
--font-serif: 'Playfair Display', Georgia, serif;
--font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-sans);
color: var(--text-dark);
background-color: var(--bg-light);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* 2. Container Utility */
.valorie-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* 3. Button Styles */
.btn-primary {
background-color: var(--accent-orange);
color: #ffffff;
padding: 0.75rem 1.5rem;
border-radius: 0.75rem;
font-weight: 700;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.2s ease;
border: none;
cursor: pointer;
}
.btn-primary:hover {
background-color: var(--accent-orange-hover);
transform: translateY(-1px);
}
.btn-secondary {
background-color: var(--primary-blue);
color: #ffffff;
padding: 0.75rem 1.5rem;
border-radius: 0.75rem;
font-weight: 700;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.2s ease;
border: none;
cursor: pointer;
}
.btn-secondary:hover {
background-color: var(--primary-blue-dark);
}
/* 4. 4-Column Featured Listing Cards */
.property-grid-4col {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.25rem;
}
@media (min-width: 640px) {
.property-grid-4col {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 768px) {
.property-grid-4col {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.property-grid-4col {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.property-card {
background: #ffffff;
border-radius: 1rem;
overflow: hidden;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.property-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.property-card img {
width: 100%;
height: 200px;
object-fit: cover;
loading: lazy;
}
/* 5. Zip Code Heatmap Grid */
.heatmap-tile-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.75rem;
margin-top: 1.5rem;
}
.heatmap-tile {
background: #f1f5f9;
border: 1px solid #cbd5e1;
border-radius: 0.75rem;
padding: 1rem;
cursor: pointer;
transition: all 0.2s ease;
}
.heatmap-tile.active, .heatmap-tile:hover {
background: var(--primary-blue);
color: #ffffff;
border-color: var(--accent-orange);
}
.heatmap-disclaimer {
background-color: #fffbeb;
border: 1px solid #fef3c7;
border-radius: 1rem;
padding: 1.25rem;
margin-top: 2rem;
font-size: 0.8125rem;
color: #78350f;
}
/* --------------------------------------------------------------
9. AI Chat Widget (Chat with Valorie)
-------------------------------------------------------------- */
.valorie-chat-root { position: fixed; bottom: 20px; right: 20px; z-index: 9999; font-family: var(--font-sans); }
.valorie-chat-toggle { display: flex; align-items: center; gap: 10px; background: var(--primary-blue); border: 2px solid var(--accent-orange); border-radius: 9999px; padding: 6px 16px 6px 6px; cursor: pointer; box-shadow: 0 10px 25px rgba(18,23,45,.35); transition: transform .15s ease; }
.valorie-chat-toggle:hover { transform: translateY(-2px); }
.valorie-chat-toggle img { width: 44px; height: 44px; border-radius: 9999px; object-fit: cover; border: 2px solid #fff; }
.valorie-chat-badge { color: #fff; font-weight: 800; font-size: 13px; white-space: nowrap; }
.valorie-chat-toggle.is-open .valorie-chat-badge { display: none; }
.valorie-chat-panel { position: absolute; bottom: 68px; right: 0; width: 360px; max-width: calc(100vw - 32px); height: 480px; max-height: 70vh; background: #fff; border-radius: 20px; border: 1px solid #e2e8f0; box-shadow: 0 25px 60px rgba(18,23,45,.3); display: flex; flex-direction: column; overflow: hidden; }
.valorie-chat-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--primary-blue); color: #fff; }
.valorie-chat-header img { width: 38px; height: 38px; border-radius: 9999px; object-fit: cover; border: 2px solid var(--accent-orange); }
.valorie-chat-name { font-weight: 800; font-size: 14px; font-family: var(--font-serif); }
.valorie-chat-sub { font-size: 10px; color: #fdba74; font-weight: 700; }
.valorie-chat-close { margin-left: auto; background: transparent; border: 0; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.valorie-chat-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-light); }
.valorie-msg { max-width: 85%; padding: 10px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.5; }
.valorie-msg-bot { background: #fff; border: 1px solid #e2e8f0; color: var(--text-dark); align-self: flex-start; border-bottom-left-radius: 4px; }
.valorie-msg-user { background: var(--primary-blue); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.valorie-typing span { animation: valorieBlink 1.2s infinite; }
.valorie-typing span:nth-child(2) { animation-delay: .2s; }
.valorie-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes valorieBlink { 0%,100% { opacity: .2; } 50% { opacity: 1; } }
.valorie-chat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.valorie-chip { background: #fff; border: 1px solid var(--primary-blue); color: var(--primary-blue); font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 9999px; cursor: pointer; transition: all .15s ease; }
.valorie-chip:hover { background: var(--primary-blue); color: #fff; }
.valorie-chat-cards { display: flex; flex-direction: column; gap: 8px; align-self: flex-start; width: 85%; }
.valorie-chat-card { display: flex; gap: 8px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.valorie-chat-card img { width: 80px; height: 68px; object-fit: cover; flex-shrink: 0; }
.valorie-chat-card-body { padding: 6px 8px 6px 0; }
.valorie-chat-card-price { color: var(--accent-orange); font-weight: 800; font-size: 12px; }
.valorie-chat-card-title { font-weight: 700; font-size: 11px; color: var(--primary-blue); line-height: 1.3; }
.valorie-chat-card-meta { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.valorie-chat-inputrow { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #e2e8f0; background: #fff; }
.valorie-chat-inputrow input { flex: 1; border: 1px solid #cbd5e1; border-radius: 10px; padding: 9px 12px; font-size: 12.5px; outline: none; }
.valorie-chat-inputrow input:focus { border-color: var(--primary-blue); }
.valorie-chat-inputrow button { background: var(--accent-orange); color: #fff; border: 0; border-radius: 10px; padding: 0 16px; font-weight: 800; font-size: 12px; cursor: pointer; }
.valorie-chat-inputrow button:hover { background: var(--accent-orange-hover); }
.valorie-chat-disclaimer { font-size: 9px; color: var(--text-muted); text-align: center; padding: 4px 12px 8px; background: #fff; }
@media (max-width: 480px) { .valorie-chat-panel { width: calc(100vw - 32px); } }
/* --------------------------------------------------------------
10. App Layer — header states, modals, toasts, utilities
-------------------------------------------------------------- */
/* Header: transparent over hero on home, solid after scroll / inner pages */
.valorie-header-transparent { background: transparent; color: #fff; box-shadow: none; border: none; }
.valorie-header-transparent .valorie-utility { background: rgba(2,6,23,.6); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(255,255,255,.1); }
.valorie-header-transparent .valorie-nav > a,
.valorie-header-transparent .valorie-nav button { color: rgba(255,255,255,.9); border-color: #fff; }
.valorie-header-transparent .valorie-nav > a:hover { color: #fff; }
.valorie-header-transparent .valorie-mobile-btn { color: #fff; }
.valorie-header-solid,
.valorie-header-transparent.is-scrolled {
position: fixed; top: 0; left: 0; right: 0;
background: rgba(255,255,255,.98);
backdrop-filter: blur(12px);
box-shadow: 0 4px 6px -1px rgba(0,0,0,.08);
color: #1f2937;
border-bottom: 1px solid #f3f4f6;
}
.valorie-header-solid .valorie-utility,
.valorie-header-transparent.is-scrolled .valorie-utility { background: var(--primary-blue); border-bottom: 1px solid #182956; }
.valorie-header-solid .valorie-nav > a,
.valorie-header-solid .valorie-nav button,
.valorie-header-transparent.is-scrolled .valorie-nav > a,
.valorie-header-transparent.is-scrolled .valorie-nav button { color: #4b5563; border-color: var(--primary-blue); }
.valorie-header-solid .valorie-nav > a:hover,
.valorie-header-transparent.is-scrolled .valorie-nav > a:hover { color: var(--primary-blue); }
.valorie-header-solid .valorie-mobile-btn,
.valorie-header-transparent.is-scrolled .valorie-mobile-btn { color: #374151; }
/* Modals */
.valorie-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.valorie-modal.hidden { display: none; }
.valorie-modal-backdrop { position: absolute; inset: 0; background: rgba(2,6,23,.72); backdrop-filter: blur(4px); }
.valorie-modal-panel {
position: relative; z-index: 1; background: #fff; border-radius: 24px;
width: 100%; max-width: 900px; max-height: 90vh; overflow-y: auto;
box-shadow: 0 25px 60px rgba(0,0,0,.4);
}
.valorie-modal-sm { max-width: 520px; }
.valorie-modal-close {
position: absolute; top: 12px; right: 14px; z-index: 5;
width: 36px; height: 36px; border: 0; border-radius: 9999px;
background: rgba(255,255,255,.9); color: #0f172a; font-size: 26px; line-height: 1;
cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.valorie-modal-close:hover { background: #fff; }
.valorie-modal-media { position: relative; background: #0f172a; }
.valorie-modal-media > img { width: 100%; height: 380px; object-fit: cover; display: block; border-radius: 24px 24px 0 0; }
.valorie-modal-thumbs { display: flex; gap: 8px; padding: 10px 14px; background: #0f172a; overflow-x: auto; }
.valorie-modal-thumb { border: 2px solid transparent; border-radius: 10px; overflow: hidden; padding: 0; background: none; cursor: pointer; flex-shrink: 0; }
.valorie-modal-thumb img { width: 84px; height: 60px; object-fit: cover; display: block; }
.valorie-modal-thumb.is-active { border-color: var(--accent-orange); }
.valorie-modal-body { padding: 24px; }
/* Toast */
.valorie-toast {
position: fixed; bottom: 88px; left: 50%; transform: translateX(-50%);
z-index: 10050; background: #0f172a; color: #fff; font-size: 12px; font-weight: 700;
padding: 10px 18px; border-radius: 9999px; box-shadow: 0 12px 30px rgba(0,0,0,.35);
display: flex; align-items: center; gap: 8px; border: 1px solid rgba(236,85,45,.6);
animation: valorieToastIn .25s ease;
}
.valorie-toast.is-out { opacity: 0; transition: opacity .3s ease; }
@keyframes valorieToastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* Spotlight photo glow sweep */
.valorie-glow-frame::after {
content: ''; position: absolute; inset: 0; border-radius: 16px;
border: 3px solid transparent; pointer-events: none;
background: linear-gradient(120deg, #ec552d, #f97316, #f59e0b) border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: 0; animation: valorieGlow 2.4s ease-out .4s 1 forwards;
}
@keyframes valorieGlow { 0% { opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
/* Utilities */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) {
.valorie-modal-media > img { height: 220px; }
.valorie-modal-body { padding: 18px; }
}
/* Property detail modal — matches PropertyModal.tsx layout */
.valorie-modal { align-items: flex-start; padding: 8px; }
@media (min-width: 640px) { .valorie-modal { padding: 16px; } }
.valorie-modal-lg { max-width: 64rem; border-radius: 16px; overflow: hidden; max-height: 94vh; display: flex; flex-direction: column; }
.valorie-modal-lg .valorie-modal-content { overflow-y: auto; max-height: 94vh; }
.valorie-modal-thumb.is-active { border-color: var(--accent-orange); box-shadow: 0 0 0 2px rgba(236,85,45,.3); opacity: 1; }
/* Header agent badge colour states */
.valorie-header-transparent .valorie-agent-badge p { color: #fff; }
.valorie-header-transparent .valorie-agent-role { color: rgba(255,255,255,.7); }
.valorie-header-solid .valorie-agent-badge p,
.valorie-header-transparent.is-scrolled .valorie-agent-badge p { color: var(--primary-blue); }
.valorie-header-solid .valorie-agent-role,
.valorie-header-transparent.is-scrolled .valorie-agent-role { color: #6b7280; }
/* IDX embed containers */
.valorie-idx-section { overflow: hidden; }
.valorie-idx-embed { width: 100%; min-height: 40px; }
.valorie-idx-embed iframe { width: 100% !important; border: 0; }
.valorie-page-content { background: #fff; border: 1px solid rgba(226,232,240,.8); border-radius: 24px; padding: 24px; }
/* Hero autocomplete: sit above the stats bar, scroll internally on small screens */
.valorie-ac { z-index: 70; max-height: min(60vh, 420px); overflow-y: auto; }
.valorie-ac::-webkit-scrollbar { width: 6px; }
.valorie-ac::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
/* --------------------------------------------------------------
11. Scroll & paint performance
-------------------------------------------------------------- */
/* Backdrop blur is expensive to repaint on every scroll frame. Keep it on the
header (small, fixed) but drop it from large decorative surfaces. */
.valorie-header-transparent .valorie-utility,
.valorie-header-solid,
.valorie-header-transparent.is-scrolled { will-change: background-color; }
section.relative.z-10.bg-\[\#152348\]\/95 { backdrop-filter: none !important; }
/* Isolate heavy sections so scrolling one doesn't repaint the whole page. */
.valorie-property-card,
.valorie-idx-section,
#valorie-testimonials,
#valorie-neighborhoods { contain: layout paint style; }
/* Promote only what animates, and only while it animates. */
.valorie-property-card img { will-change: auto; }
.valorie-property-card:hover img { will-change: transform; }
/* Respect reduced-motion and kill the decorative sweep for those users. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.valorie-glow-frame::after { display: none; }
}
/* Reserve space for images so nothing shifts as they load (CLS). */
.valorie-property-card .relative.aspect-\[4\/3\] { background: #e2e8f0; }
img { max-width: 100%; height: auto; }
/* --------------------------------------------------------------
12. IDX Broker pages — matched to the Valorie's List modal design
Applies to search results, listing details and market reports that
IDX injects into the /idx/ wrapper page.
-------------------------------------------------------------- */
.valorie-idx-wrapper-body {
font-family: var(--font-sans);
color: var(--text-dark);
}
/* ---- Typography ---- */
.valorie-idx-wrapper-body h1,
.valorie-idx-wrapper-body h2,
.valorie-idx-wrapper-body h3,
.valorie-idx-wrapper-body .IDX-detailsAddress {
font-family: var(--font-serif);
color: var(--primary-blue);
font-weight: 800;
letter-spacing: -0.01em;
}
.valorie-idx-wrapper-body .IDX-detailsAddress {
font-size: clamp(1.6rem, 3.2vw, 2.25rem);
line-height: 1.15;
margin-bottom: .25rem;
}
.valorie-idx-wrapper-body a { color: var(--primary-blue); }
.valorie-idx-wrapper-body a:hover { color: var(--accent-orange); }
/* ---- Buttons: orange pills, matching the modal ---- */
.valorie-idx-wrapper-body .IDX-btn,
.valorie-idx-wrapper-body input[type="submit"],
.valorie-idx-wrapper-body button.IDX-btn {
background: var(--accent-orange) !important;
border: 1px solid var(--accent-orange) !important;
color: #fff !important;
border-radius: 12px !important;
font-weight: 700 !important;
font-size: .8rem !important;
padding: .6rem 1.1rem !important;
box-shadow: 0 1px 2px rgba(0,0,0,.06);
transition: background .15s ease, transform .15s ease;
}
.valorie-idx-wrapper-body .IDX-btn:hover,
.valorie-idx-wrapper-body input[type="submit"]:hover {
background: var(--accent-orange-hover) !important;
border-color: var(--accent-orange-hover) !important;
transform: translateY(-1px);
}
/* Secondary actions (Prev/Next/New Search) in navy */
.valorie-idx-wrapper-body .IDX-btn-default {
background: var(--primary-blue) !important;
border-color: var(--primary-blue) !important;
}
.valorie-idx-wrapper-body .IDX-btn-default:hover {
background: #182956 !important;
border-color: #182956 !important;
}
/* ---- Price: serif, navy, prominent (mirrors the modal header) ---- */
.valorie-idx-wrapper-body .IDX-price,
.valorie-idx-wrapper-body .IDX-detailsPrice,
.valorie-idx-wrapper-body .IDX-resultsPrice,
.valorie-idx-wrapper-body .IDX-similar-listings--price {
font-family: var(--font-serif) !important;
color: var(--primary-blue) !important;
font-weight: 800 !important;
}
/* ---- Collapsible feature panels as cards ---- */
.valorie-idx-wrapper-body .IDX-panelToggle {
background: #fff;
border: 1px solid rgba(226,232,240,.9);
border-radius: 16px;
margin-bottom: .75rem;
overflow: hidden;
box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.valorie-idx-wrapper-body .IDX-panelToggle-heading {
font-family: var(--font-serif);
font-weight: 700;
color: var(--primary-blue);
background: var(--bg-light);
padding: .85rem 1.1rem;
border-bottom: 1px solid rgba(226,232,240,.9);
font-size: 1rem;
}
/* ---- Field rows: label / value pairs like the modal's spec grid ---- */
.valorie-idx-wrapper-body .IDX-fieldContainerList { padding: .5rem 1.1rem 1rem; }
.valorie-idx-wrapper-body .IDX-field {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: .5rem 0;
border-bottom: 1px solid #f1f5f9;
font-size: .8rem;
}
.valorie-idx-wrapper-body .IDX-field:last-child { border-bottom: 0; }
.valorie-idx-wrapper-body .IDX-label {
color: var(--text-muted);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
font-size: .68rem;
}
.valorie-idx-wrapper-body .IDX-text { color: var(--text-dark); font-weight: 600; }
/* ---- Beds / baths / sqft strip ---- */
.valorie-idx-wrapper-body .IDX-social {
background: var(--bg-light);
border: 1px solid rgba(226,232,240,.9);
border-radius: 16px;
padding: 1rem;
margin: 1rem 0;
}
.valorie-idx-wrapper-body .IDX-social-label {
color: var(--text-muted);
text-transform: uppercase;
font-size: .62rem;
font-weight: 800;
letter-spacing: .05em;
}
.valorie-idx-wrapper-body .IDX-social-text {
color: var(--primary-blue);
font-weight: 800;
font-size: 1.05rem;
}
/* ---- Similar listings styled like our property cards ---- */
.valorie-idx-wrapper-body .IDX-similar-listings--item {
background: #fff;
border: 1px solid rgba(226,232,240,.9);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(15,23,42,.05);
transition: box-shadow .25s ease, transform .25s ease;
}
.valorie-idx-wrapper-body .IDX-similar-listings--item:hover {
box-shadow: 0 18px 30px -12px rgba(15,23,42,.22);
transform: translateY(-2px);
}
.valorie-idx-wrapper-body .IDX-similar-listings--item-image img { border-radius: 0; }
.valorie-idx-wrapper-body .IDX-similar-listings--info { padding: .9rem 1rem; }
.valorie-idx-wrapper-body .IDX-similar-listings--address-street {
font-family: var(--font-serif);
font-weight: 700;
color: var(--primary-blue);
}
.valorie-idx-wrapper-body .IDX-similar-listings--status-value { color: var(--accent-orange); font-weight: 800; }
/* ---- Map ---- */
.valorie-idx-wrapper-body .IDX-detailsMap {
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(226,232,240,.9);
}
/* ---- Forms ---- */
.valorie-idx-wrapper-body input[type="text"],
.valorie-idx-wrapper-body input[type="email"],
.valorie-idx-wrapper-body input[type="tel"],
.valorie-idx-wrapper-body select,
.valorie-idx-wrapper-body textarea {
border: 1px solid #cbd5e1 !important;
border-radius: 12px !important;
padding: .6rem .8rem !important;
font-size: .85rem !important;
background: var(--bg-light) !important;
}
.valorie-idx-wrapper-body input:focus,
.valorie-idx-wrapper-body select:focus,
.valorie-idx-wrapper-body textarea:focus {
outline: none !important;
border-color: var(--primary-blue) !important;
box-shadow: 0 0 0 3px rgba(33,53,110,.12) !important;
}
/* ---- Slideshow / gallery ---- */
.valorie-idx-wrapper-body .IDX-detailsSlideshow,
.valorie-idx-wrapper-body .IDX-slideshow {
border-radius: 18px;
overflow: hidden;
background: #0f172a;
}
/* ---- Registration modal: match our brand ---- */
.IDX-registrationModal .IDX-btn,
#IDX-registrationModal input[type="submit"] {
background: var(--accent-orange) !important;
border-color: var(--accent-orange) !important;
border-radius: 12px !important;
}
@media (max-width: 640px) {
.valorie-idx-wrapper-body .IDX-field { flex-direction: column; gap: .15rem; }
}
/* --------------------------------------------------------------
13. Base safety net
Guarantees links/lists/headings look right even if the utility
stylesheet fails to load or is overridden by a plugin.
-------------------------------------------------------------- */
a { text-decoration: none; color: inherit; }
a:hover { text-decoration: none; }
.valorie-idx-wrapper-body a,
.prose a { text-decoration: none; }
.prose a:hover { text-decoration: underline; }
ul, ol { list-style: none; margin: 0; padding: 0; }
.prose ul { list-style: disc; padding-left: 1.25rem; }
.prose ol { list-style: decimal; padding-left: 1.25rem; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; }
img, svg, video { display: block; max-width: 100%; }
button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
table { border-collapse: collapse; }
/* --------------------------------------------------------------
14. hidden attribute must always win
style.css loads after the utility sheet, so any element with a
display rule would otherwise ignore [hidden].
-------------------------------------------------------------- */
[hidden] { display: none !important; }
.valorie-chat-panel[hidden] { display: none !important; }
/* --------------------------------------------------------------
15. IDX detail page — PropertyDetailPage.tsx layout
-------------------------------------------------------------- */
.vl-panel {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 24px;
padding: 1.25rem 1.5rem;
box-shadow: 0 1px 2px rgba(15,23,42,.04);
margin: 1.25rem 0;
}
.vl-panel-title {
font-family: var(--font-serif);
font-size: 1.15rem;
font-weight: 800;
color: var(--primary-blue);
margin-bottom: 1rem;
}
/* ---- Quick Spec Ribbon: 8 cards, 2/4/8 columns ---- */
.vl-spec-grid {
display: grid;
/* Auto-fit means the row adapts to however many cards actually have data,
and each card is wide enough that values aren't truncated. */
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: .75rem;
}
@media (max-width: 520px) { .vl-spec-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.vl-spec-card {
background: var(--bg-light);
border: 1px solid #f1f5f9;
border-radius: 16px;
padding: .875rem;
text-align: center;
}
.vl-spec-label {
display: block;
font-size: .625rem;
line-height: 1.2;
color: #94a3b8;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: .25rem;
}
.vl-spec-value {
display: flex;
align-items: center;
justify-content: center;
gap: .35rem;
font-size: .95rem;
font-weight: 700;
color: var(--primary-blue);
line-height: 1.2;
}
.vl-spec-value svg { width: 1rem; height: 1rem; color: var(--accent-orange); flex-shrink: 0; }
.vl-spec-value > span { white-space: normal; overflow-wrap: anywhere; }
/* ---- Category nav pills ---- */
.vl-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 .75rem; }
.vl-pill {
background: var(--bg-light);
border: 1px solid #e2e8f0;
color: #475569;
font-size: .75rem;
font-weight: 700;
padding: .5rem .9rem;
border-radius: 9999px;
cursor: pointer;
transition: all .15s ease;
}
.vl-pill:hover { background: #e2e8f0; color: var(--primary-blue); }
.vl-pill.is-active {
background: var(--primary-blue);
border-color: var(--primary-blue);
color: #fff;
box-shadow: 0 4px 10px -4px rgba(33,53,110,.5);
}
/* ---- Mortgage calculator ---- */
.vl-calc-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 900px) { .vl-calc-grid { grid-template-columns: 1.15fr .85fr; } }
.vl-calc-row {
display: flex; justify-content: space-between; align-items: baseline;
font-size: .78rem; color: #475569; font-weight: 600; margin: .85rem 0 .3rem;
}
.vl-calc-row strong { color: var(--primary-blue); font-weight: 800; }
.vl-calc-controls input[type="range"] { width: 100%; accent-color: var(--accent-orange); }
.vl-calc-result {
background: linear-gradient(135deg, #12172D 0%, #21356e 100%);
color: #fff; border-radius: 20px; padding: 1.25rem; text-align: center;
}
.vl-calc-total-label {
font-size: .625rem; text-transform: uppercase; letter-spacing: .08em;
font-weight: 800; color: #fdba74;
}
.vl-calc-total { font-family: var(--font-serif); font-size: 2.1rem; font-weight: 800; line-height: 1.1; }
.vl-calc-bar { display: flex; height: 8px; border-radius: 9999px; overflow: hidden; margin: .9rem 0 .75rem; background: rgba(255,255,255,.15); }
.vl-seg { display: block; height: 100%; }
.vl-seg-pi { background: var(--accent-orange); }
.vl-seg-tax { background: #fbbf24; }
.vl-seg-ins { background: #34d399; }
.vl-calc-legend { list-style: none; margin: 0; padding: 0; text-align: left; font-size: .72rem; }
.vl-calc-legend li { display: flex; align-items: center; gap: .45rem; padding: .2rem 0; color: #e2e8f0; }
.vl-calc-legend b { margin-left: auto; color: #fff; font-weight: 800; }
.vl-dot { width: .6rem; height: .6rem; border-radius: 9999px; display: inline-block; }
.vl-calc-cta {
display: inline-block; margin-top: .9rem; background: var(--accent-orange); color: #fff !important;
font-size: .75rem; font-weight: 800; padding: .6rem 1.1rem; border-radius: 12px;
}
.vl-calc-cta:hover { background: var(--accent-orange-hover); }
.vl-calc-note { font-size: .65rem; color: #94a3b8; margin-top: .9rem; line-height: 1.5; }
/* Detail pages: give IDX panels room to breathe */
.vl-idx-detail .IDX-panelToggle { margin-bottom: 1rem; }
/* --------------------------------------------------------------
16. MLS / IDX required disclosures
Snake River MLS and IDX Broker require the copyright line,
"deemed reliable" statement, compensation notice and last-updated
timestamp to be displayed. They must stay visible and legible, so
these rules only reduce their visual weight — they never hide them.
-------------------------------------------------------------- */
#IDX-copyright,
#IDX-disclaimer,
[class*="IDX-disclaimer"] {
font-size: 10px !important;
line-height: 1.5 !important;
color: #94a3b8 !important;
text-align: center;
max-width: 68rem;
margin: 1.25rem auto 0 !important;
padding: .75rem 1rem 0 !important;
border-top: 1px solid #f1f5f9;
}
#IDX-copyright a,
#IDX-disclaimer a,
[class*="IDX-disclaimer"] a {
color: #94a3b8 !important;
text-decoration: underline;
}
#IDX-copyright a:hover,
#IDX-disclaimer a:hover { color: var(--primary-blue) !important; }
/* Tighten the stacked paragraphs so the block reads as one small footnote. */
#IDX-disclaimer p,
[class*="IDX-disclaimer"] p { margin: 0 0 .15rem !important; }
/* Never render a broken-image icon: images that fail fade to a neutral tile. */
img.valorie-img-fallback {
background: #e2e8f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E") center/28px no-repeat;
color: transparent;
font-size: 0;
}
}
/* --------------------------------------------------------------
17. Mobile form fields — prevent iOS auto-zoom
Safari on iOS zooms the viewport whenever a focused field has a
font-size below 16px. Every field in the theme uses 12–14px for
visual density, so we bump them to 16px on small screens only.
(Setting maximum-scale on the viewport would also stop the zoom,
but it disables pinch-zoom entirely, which breaks accessibility.)
-------------------------------------------------------------- */
@media screen and (max-width: 767px) {
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input:not([type]),
select,
textarea,
.valorie-idx-wrapper-body input,
.valorie-idx-wrapper-body select,
.valorie-idx-wrapper-body textarea,
#valorie-chat-input,
.IDX-registrationModal input,
.IDX-registrationModal select {
font-size: 16px !important;
line-height: 1.35;
}
/* Keep the fields from growing taller now that the text is larger. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select {
padding-top: .55rem;
padding-bottom: .55rem;
}
/* Range sliders are unaffected by the zoom rule but need touch room. */
input[type="range"] { height: 28px; }
/* Date inputs on iOS need explicit appearance to size correctly. */
input[type="date"] { -webkit-appearance: none; appearance: none; min-height: 44px; }
/* Comfortable tap targets throughout (WCAG 2.5.5). */
button, .valorie-pill, .vl-pill, .valorie-chip { min-height: 40px; }
}
/* Never let a wide element create sideways scrolling on phones. */
html, body { max-width: 100%; overflow-x: clip; }
/* --------------------------------------------------------------
18. Hero autocomplete must escape the hero section
The hero previously had overflow-hidden, which clipped the search
suggestions at the section boundary. The background image keeps its
own overflow-hidden wrapper, so the hero itself does not need one.
-------------------------------------------------------------- */
.valorie-hero-wrap { overflow: visible; }
.valorie-hero-wrap > .absolute.inset-0 { overflow: hidden; } /* background image only */
/* Suggestions panel sits above everything that follows the hero. */
#valorie-autocomplete.valorie-ac {
z-index: 90;
box-shadow: 0 24px 48px -12px rgba(15,23,42,.35);
}
#valorie-hero-form { z-index: 80; }
/* Nothing after the hero should paint over the open dropdown. */
.valorie-hero-wrap ~ * { position: relative; z-index: 1; }
/* --------------------------------------------------------------
19. IDX detail page — layout refinements
-------------------------------------------------------------- */
/* The price / beds / baths / acreage row is duplicated by the spec ribbon. */
.vl-hidden-dupe { display: none !important; }
/* --- Tighten the top of the page --- */
.valorie-idx-wrapper-body { padding-top: 1rem !important; }
.vl-idx-detail .IDX-topAction { margin: 0 0 .75rem !important; }
.vl-idx-detail .idxDetails-basic { margin-top: 0 !important; }
.vl-idx-detail h1.IDX-detailsAddress { margin-top: 0 !important; }
/* IDX ships generous default spacing on the outer rows. */
.vl-idx-detail .row:first-child { margin-top: 0 !important; }
.vl-idx-detail > *:first-child { padding-top: 0 !important; }
/* --- Title block, top-left --- */
.vl-detail-title {
text-align: left !important;
font-family: var(--font-serif);
color: var(--primary-blue);
font-size: clamp(1.55rem, 3vw, 2.15rem);
line-height: 1.15;
font-weight: 800;
margin: 0 0 .35rem !important;
}
.vl-detail-title + * { text-align: left !important; }
/* --- Every IDX block gets the theme's rounded-card treatment --- */
.vl-idx-detail .IDX-panelToggle,
.vl-idx-detail .IDX-detailsMap,
.vl-idx-detail .IDX-similar-listings,
.vl-idx-detail .IDX-detailsSlideshow,
.vl-idx-detail .idxDetails-photoGallery,
.vl-idx-detail .IDX-detailsContact,
.vl-idx-detail .IDX-detailsRequest {
border-radius: 24px !important;
overflow: hidden;
}
.vl-idx-detail .IDX-panelToggle-heading {
cursor: pointer;
border-radius: 0;
}
/* Photos and map corners */
.vl-idx-detail .IDX-detailsMap iframe,
.vl-idx-detail .idxDetails-photoGallery img { border-radius: 0 !important; }
/* --------------------------------------------------------------
20. IDX detail page — listing header
-------------------------------------------------------------- */
/* --- Navy breadcrumb bar --- */
.vl-crumbbar {
background: var(--primary-blue);
color: #fff;
border-radius: 14px;
padding: .7rem 1rem .7rem 1.1rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.1rem;
flex-wrap: wrap;
}
.vl-crumbs { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .85rem; font-weight: 600; min-width: 0; }
.vl-crumbs a { color: rgba(255,255,255,.85) !important; display: inline-flex; align-items: center; gap: .4rem; }
.vl-crumbs a:hover { color: #fff !important; }
.vl-crumbs svg { width: 1rem; height: 1rem; }
.vl-sep { color: rgba(255,255,255,.35); }
.vl-crumb-city { color: var(--accent-orange) !important; font-weight: 700; }
.vl-crumb-city:hover { color: #ff7a52 !important; }
.vl-crumb-current { color: #fff; font-weight: 700; }
.vl-crumb-actions { display: flex; align-items: center; gap: .55rem; margin-left: auto; }
.vl-back-btn {
display: inline-flex; align-items: center; gap: .4rem;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.2);
color: #fff !important;
font-size: .82rem; font-weight: 700;
padding: .5rem .95rem; border-radius: 10px;
}
.vl-back-btn:hover { background: rgba(255,255,255,.2); }
.vl-back-btn svg { width: 1rem; height: 1rem; }
.vl-close-btn {
background: var(--accent-orange); color: #fff;
border: 0; border-radius: 10px;
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
}
.vl-close-btn:hover { background: var(--accent-orange-hover); }
.vl-close-btn svg { width: 1.05rem; height: 1.05rem; }
/* --- White summary card --- */
.vl-listing-card {
background: #fff;
border: 1px solid rgba(226,232,240,.9);
border-radius: 24px;
padding: 1.5rem 1.75rem;
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
box-shadow: 0 1px 3px rgba(15,23,42,.05);
margin-bottom: 1.25rem;
}
@media (min-width: 900px) {
.vl-listing-card { grid-template-columns: 1.55fr .95fr; align-items: start; }
.vl-listing-aside { text-align: right; }
}
.vl-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.vl-badge-status {
background: var(--accent-orange); color: #fff;
font-size: .72rem; font-weight: 800; letter-spacing: .04em;
padding: .42rem .85rem; border-radius: 9999px; text-transform: uppercase;
}
.vl-badge-mls {
background: var(--bg-light); color: var(--primary-blue);
border: 1px solid #e2e8f0;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: .74rem; font-weight: 700;
padding: .42rem .85rem; border-radius: 9999px;
}
.vl-badge-verified {
background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0;
font-size: .74rem; font-weight: 700;
padding: .42rem .85rem; border-radius: 9999px;
display: inline-flex; align-items: center; gap: .35rem;
}
.vl-badge-verified svg { width: .95rem; height: .95rem; }
.vl-listing-title {
font-family: var(--font-serif);
font-size: clamp(1.6rem, 3.4vw, 2.5rem);
line-height: 1.12;
font-weight: 800;
color: var(--primary-blue);
margin: 0 0 .55rem;
}
.vl-listing-address {
display: flex; align-items: flex-start; gap: .45rem;
font-size: .95rem; color: #475569; font-weight: 500; margin: 0;
}
.vl-listing-address svg { width: 1.1rem; height: 1.1rem; color: var(--accent-orange); flex-shrink: 0; margin-top: .12rem; }
.vl-listing-price {
font-family: var(--font-serif);
font-size: clamp(2rem, 4.4vw, 3rem);
font-weight: 800; color: var(--primary-blue);
line-height: 1; letter-spacing: -.02em;
}
.vl-listing-submeta { font-size: .82rem; color: #64748b; margin-top: .3rem; }
.vl-listing-submeta strong { color: var(--accent-orange); font-weight: 800; }
.vl-dot-sep { margin: 0 .4rem; color: #cbd5e1; }
.vl-listing-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .9rem; justify-content: flex-start; }
@media (min-width: 900px) { .vl-listing-actions { justify-content: flex-end; } }
.vl-act {
display: inline-flex; align-items: center; gap: .45rem;
background: var(--bg-light);
border: 1px solid #e2e8f0;
color: var(--primary-blue);
font-size: .82rem; font-weight: 700;
padding: .6rem 1.05rem; border-radius: 9999px;
cursor: pointer; transition: all .15s ease;
}
.vl-act:hover { background: #e2e8f0; }
.vl-act svg { width: 1rem; height: 1rem; color: var(--accent-orange); }
.vl-act.is-done { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.vl-act.is-done svg { color: #047857; }
/* --- Hide the IDX header pieces our card replaces --- */
.vl-has-header .IDX-detailsAddress,
.vl-has-header .IDX-topAction,
.vl-has-header .idxDetails-basic { display: none !important; }
/* The theme breadcrumb is suppressed server-side on the IDX wrapper page
(see template-parts/breadcrumbs.php) rather than hidden with CSS, so the
trail is never present-but-invisible. The navy bar is the breadcrumb on
IDX pages and emits BreadcrumbList schema of its own. */
@media print {
.vl-crumbbar, .vl-listing-actions, .valorie-chat-root, #valorie-header, footer { display: none !important; }
.vl-listing-card { border: 0; box-shadow: none; }
}
/* --------------------------------------------------------------
21. Related listing cards — same design as the homepage cards
-------------------------------------------------------------- */
.vl-idx-detail .IDX-similar-listings {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.25rem;
}
.vl-card {
background: #fff;
border: 1px solid rgba(226,232,240,.8);
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 1px 2px rgba(15,23,42,.05);
transition: box-shadow .3s ease, transform .3s ease;
}
.vl-card:hover { box-shadow: 0 20px 34px -14px rgba(15,23,42,.28); transform: translateY(-2px); }
/* ---- Media ---- */
.vl-card-media { position: relative; aspect-ratio: 4 / 3; background: #e2e8f0; overflow: hidden; }
.vl-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.vl-card:hover .vl-card-media img { transform: scale(1.05); }
.vl-card-media::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,0) 42%),
linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 26%);
pointer-events: none;
}
.vl-card-badges { position: absolute; top: .7rem; left: .7rem; display: flex; gap: .4rem; z-index: 2; flex-wrap: wrap; }
.vl-card-status {
background: var(--primary-blue); color: #fff;
font-size: .72rem; font-weight: 700;
padding: .35rem .75rem; border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.vl-card-horse {
background: rgba(18,23,45,.9); color: #fcd34d;
border: 1px solid rgba(252,211,77,.35);
font-size: .72rem; font-weight: 700;
padding: .35rem .7rem; border-radius: 8px;
}
.vl-card-heart {
position: absolute; top: .7rem; right: .7rem; z-index: 2;
width: 38px; height: 38px; border-radius: 9999px;
background: rgba(255,255,255,.9); color: #334155;
border: 0; display: flex; align-items: center; justify-content: center;
cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2);
transition: all .2s ease;
}
.vl-card-heart:hover { background: #fff; color: var(--accent-orange); }
.vl-card-heart svg { width: 1.1rem; height: 1.1rem; }
.vl-card-price {
position: absolute; left: .9rem; bottom: .75rem; z-index: 2;
font-family: var(--font-serif);
font-size: 1.7rem; font-weight: 800; color: #fff;
text-shadow: 0 2px 8px rgba(0,0,0,.55);
line-height: 1;
}
.vl-card-mls {
position: absolute; right: .7rem; bottom: .85rem; z-index: 2;
background: rgba(15,23,42,.62); color: #e2e8f0;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: .68rem; padding: .3rem .55rem; border-radius: 6px;
}
/* ---- Body ---- */
.vl-card-body { padding: 1rem 1.05rem 1.05rem; display: flex; flex-direction: column; flex: 1; }
.vl-card-title {
font-family: var(--font-serif);
font-size: 1.08rem; font-weight: 700; color: var(--primary-blue);
margin: 0 0 .3rem;
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.vl-card-address {
display: flex; align-items: flex-start; gap: .35rem;
font-size: .8rem; color: #64748b; font-weight: 500; margin: 0;
}
.vl-card-address svg { width: .95rem; height: .95rem; color: var(--accent-orange); flex-shrink: 0; margin-top: .1rem; }
.vl-card-specs {
display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
gap: .4rem;
padding: .7rem 0; margin: .75rem 0 0;
border-top: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9;
font-size: .78rem; color: #334155;
}
.vl-card-specs-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.vl-card-specs span { display: flex; align-items: center; gap: .35rem; }
.vl-card-specs svg { width: 1rem; height: 1rem; color: var(--primary-blue); flex-shrink: 0; }
.vl-card-specs strong { color: var(--primary-blue); font-weight: 700; }
.vl-card-foot {
margin-top: auto; padding-top: .8rem;
display: flex; align-items: center; justify-content: space-between; gap: .6rem;
}
.vl-card-agent { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.vl-card-agent img { width: 34px; height: 34px; border-radius: 9999px; object-fit: cover; border: 2px solid var(--primary-blue); }
.vl-card-agent strong { display: block; font-size: .76rem; color: #0f172a; font-weight: 700; line-height: 1.15; }
.vl-card-agent em { display: block; font-style: normal; font-size: .66rem; color: #94a3b8; line-height: 1.2; }
.vl-card-cta {
display: inline-flex; align-items: center; gap: .3rem;
color: var(--accent-orange); font-size: .76rem; font-weight: 700;
text-align: right; flex-shrink: 0;
}
.vl-card:hover .vl-card-cta { color: var(--accent-orange-hover); }
.vl-card-cta svg { width: .9rem; height: .9rem; }
/* --------------------------------------------------------------
22. Belt-and-suspenders: hide a "Rentals" search option even if the
JS option-stripper hasn't run yet on a given render. Valorie doesn't
handle rental transactions, so this category should never be
selectable on her site.
-------------------------------------------------------------- */
option[value*="rental" i],
option[value*="lease" i] { display: none; }
/* --------------------------------------------------------------
23. Header offset — measured, not guessed
Inner pages need top padding equal to the fixed header's real
height so content (starting with breadcrumbs) sits directly under
it. The old hardcoded 116/120/124px values drifted out of sync
whenever the header's content changed (badges added/removed),
leaving a gap of blank space above the breadcrumb bar. JS measures
the actual rendered height and sets this custom property; this
value is only the fallback for the instant before JS runs.
-------------------------------------------------------------- */
.valorie-inner-main {
/* 148px comfortably covers the utility bar + nav row at their tallest
(agent photo + name + Real Estate Agent label + List Your Home button).
JS overwrites --vl-header-h with the exact measured value immediately
after load, so this fallback only matters for the instant before that
— better a few px too generous than clipped content underneath. */
padding-top: var(--vl-header-h, 148px);
transition: padding-top .15s ease;
}
/* --------------------------------------------------------------
24. Touch devices — belt-and-braces against focus zoom
The 767px breakpoint above covers phones, but larger touch
devices (iPads, some Android tablets) report wider viewports and
still zoom on focus. Targeting coarse pointers catches those
without affecting desktop, where the compact 12–14px fields are
intentional.
-------------------------------------------------------------- */
@media (pointer: coarse) {
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input:not([type]),
select,
textarea,
#valorie-hero-keyword,
#valorie-hero-city,
#valorie-chat-input,
.valorie-idx-wrapper-body input,
.valorie-idx-wrapper-body select,
.valorie-idx-wrapper-body textarea,
.IDX-registrationModal input,
.IDX-registrationModal select {
font-size: 16px !important;
}
/* Keep the hero search bar visually compact despite the larger text. */
#valorie-hero-form select,
#valorie-hero-form input[type="text"] {
padding-top: .5rem;
padding-bottom: .5rem;
}
}
/* --------------------------------------------------------------
25. IDX detail page — compact top area
Reclaims the ~115px of duplicated navigation IDX prints above our
header (its own prev/next row and a second breadcrumb line), keeps
the breadcrumb bar to a single row, and slims the action buttons.
-------------------------------------------------------------- */
/* IDX's duplicate navigation — the useful buttons are moved into our
bar by JS before these are hidden. */
.vl-has-header .IDX-detailsTrack,
.vl-has-header .IDX-breadcrumbs,
.vl-has-header .IDX-alert-info { display: none !important; }
/* Tighter page shell on detail pages. */
.vl-idx-detail .valorie-idx-wrapper-body { padding-top: .75rem !important; padding-bottom: 1.25rem !important; }
.vl-idx-detail #IDX-main > .IDX-row:first-child { margin-top: 0 !important; }
/* ---- Breadcrumb bar: always one row ---- */
.vl-crumbbar {
flex-wrap: nowrap;
padding: .55rem .65rem .55rem 1rem;
margin-bottom: .85rem;
gap: .75rem;
}
.vl-crumbs { flex-wrap: nowrap; overflow: hidden; font-size: .82rem; }
.vl-crumbs a, .vl-crumb-current { white-space: nowrap; }
/* The address is the least important crumb on a page about that address. */
.vl-crumb-current { overflow: hidden; text-overflow: ellipsis; }
.vl-crumb-actions { flex-wrap: nowrap; gap: .4rem; flex-shrink: 0; }
/* Position counter + prev/next moved in from IDX. */
.vl-crumb-count {
color: rgba(255,255,255,.55);
font-size: .7rem;
font-weight: 600;
white-space: nowrap;
margin-right: .15rem;
}
.vl-crumbbar .vl-nav-btn {
display: inline-flex; align-items: center; gap: .25rem;
background: rgba(255,255,255,.1) !important;
border: 1px solid rgba(255,255,255,.18) !important;
color: #fff !important;
font-size: .72rem !important;
font-weight: 700 !important;
padding: .38rem .6rem !important;
border-radius: 8px !important;
white-space: nowrap;
box-shadow: none !important;
}
.vl-crumbbar .vl-nav-btn:hover { background: rgba(255,255,255,.2) !important; transform: none !important; }
.vl-crumbbar .vl-nav-btn svg { width: .85rem; height: .85rem; }
.vl-back-btn { padding: .4rem .75rem; font-size: .76rem; }
.vl-back-btn svg { width: .85rem; height: .85rem; }
.vl-close-btn { width: 30px; height: 30px; border-radius: 8px; }
.vl-close-btn svg { width: .9rem; height: .9rem; }
/* ---- Listing card: tighter ---- */
.vl-listing-card { padding: 1.15rem 1.35rem; margin-bottom: .9rem; gap: 1rem; }
.vl-badges { margin-bottom: .55rem; }
.vl-listing-title { margin-bottom: .35rem; }
/* ---- Action buttons: compact orange pills, white line icons ---- */
.vl-listing-actions {
display: flex;
flex-wrap: nowrap;
gap: .45rem;
margin-top: .7rem;
}
.vl-act {
background: var(--accent-orange);
border: 1px solid var(--accent-orange);
color: #fff;
font-size: .76rem;
font-weight: 700;
padding: .45rem .85rem;
border-radius: 9999px;
gap: .35rem;
white-space: nowrap;
box-shadow: 0 1px 2px rgba(236,85,45,.25);
}
.vl-act:hover {
background: var(--accent-orange-hover);
border-color: var(--accent-orange-hover);
color: #fff;
}
/* White outline icons, per the brief. */
.vl-act svg { width: .9rem; height: .9rem; color: #fff; stroke: #fff; }
.vl-act.is-done { background: #059669; border-color: #059669; color: #fff; }
.vl-act.is-done svg { color: #fff; stroke: #fff; }
@media (max-width: 640px) {
.vl-crumbs { font-size: .74rem; }
/* On the narrowest screens drop the middle crumbs rather than wrapping. */
.vl-crumbs .vl-sep:nth-of-type(-n+2),
.vl-crumbs a:not(:first-child):not(.vl-crumb-city) { display: none; }
.vl-crumb-count { display: none; }
.vl-listing-actions { flex-wrap: wrap; }
}
/* --------------------------------------------------------------
26. Injected-header layout must survive IDX's stylesheet
IDX Broker's CSS loads after the theme's on its hosted pages and
resets our injected elements (the breadcrumb bar was computing
display:block, which forced the actions onto a second row and made
the bar ~84px tall). These layout properties are marked !important
so the header renders the same regardless of IDX's cascade.
-------------------------------------------------------------- */
#vl-listing-header .vl-crumbbar {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
#vl-listing-header .vl-crumbs {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
min-width: 0 !important;
}
#vl-listing-header .vl-crumb-actions {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
margin-left: auto !important;
flex-shrink: 0 !important;
}
#vl-listing-header .vl-listing-card { display: grid !important; }
#vl-listing-header .vl-listing-actions { display: flex !important; flex-wrap: nowrap !important; }
#vl-listing-header .vl-badges { display: flex !important; flex-wrap: wrap !important; }
#vl-listing-header .vl-act { display: inline-flex !important; align-items: center !important; }
#vl-listing-header .vl-listing-address { display: flex !important; align-items: flex-start !important; }
@media (min-width: 900px) {
#vl-listing-header .vl-listing-card { grid-template-columns: 1.55fr .95fr !important; }
#vl-listing-header .vl-listing-actions { justify-content: flex-end !important; }
}
@media (max-width: 640px) {
#vl-listing-header .vl-listing-actions { flex-wrap: wrap !important; }
}
/* --------------------------------------------------------------
27. City page listings grid
-------------------------------------------------------------- */
.valorie-city-card { display: contents; }
.valorie-city-extra.hidden { display: none !important; }
#valorie-city-more svg { transition: transform .2s ease; }
/* ---------------------------------------------------------------------------
IDX Broker form + results overrides
Our global input styling also loads on IDX Broker pages (they render inside
our wrapper). IDX uses Select2 controls whose inner input must be borderless
and auto-height; our global rule gave it a border and 0.6rem padding, forcing
a 61px input inside a 40px control (the box-inside-a-box on advanced search).
--------------------------------------------------------------------------- */
.select2-container .select2-input,
.select2-choices .select2-input,
.select2-drop .select2-input,
.select2-search input {
border: 0 !important;
height: auto !important;
min-height: 0 !important;
padding: 3px 6px !important;
margin: 0 !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
line-height: 1.4 !important;
}
.select2-container .select2-choices {
min-height: 40px;
border-radius: 10px !important;
border-color: #cbd5e1 !important;
background: #fff !important;
padding: 2px 4px !important;
}
.select2-container .select2-choice {
height: 40px !important;
line-height: 38px !important;
border-radius: 10px !important;
border-color: #cbd5e1 !important;
}
.IDX-advancedWrap { margin-bottom: 12px !important; }
.IDX-advancedWrap .IDX-advancedText { margin-bottom: 4px !important; font-size: .84rem !important; }
/* --- Results page density --- */
.vl-res-shell { height: calc(100vh - 132px); }
.vl-res-listcol { padding: 0 14px 28px !important; }
.vl-res-head { padding: 12px 0 10px !important; margin-bottom: 12px !important; }
.vl-res-title { font-size: 1.25rem !important; }
.IDX-resultsCellsContainer { gap: 12px !important; }
.vl-photo { height: 158px !important; }
.vl-body { padding: 9px 11px 11px !important; }
.vl-body .IDX-field-listingPrice .IDX-text { font-size: 1.15rem !important; }
.vl-body .IDX-resultsAddress { font-size: .79rem !important; margin-top: 2px !important; }
.vl-card-meta { padding-top: 7px !important; margin-top: 7px !important; gap: 11px !important; font-size: .76rem !important; }
/* Compact, sticky IDX filter bar. */
.vl-filterbar {
position: sticky;
top: 0;
z-index: 40;
background: #fff;
border-bottom: 1px solid #e2e8f0;
padding: 10px 14px !important;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.vl-filterbar select,
.vl-filterbar input[type="text"],
.vl-filterbar .select2-container {
height: 38px !important;
min-height: 38px !important;
border-radius: 999px !important;
border: 1px solid #cbd5e1 !important;
font-size: .82rem !important;
width: auto !important;
min-width: 104px;
margin: 0 !important;
background: #fff !important;
}
.vl-filterbar .select2-container .select2-choice {
border: 0 !important;
border-radius: 999px !important;
height: 36px !important;
line-height: 34px !important;
}
.vl-filterbar input[type="submit"],
.vl-filterbar button {
height: 38px !important;
border-radius: 999px !important;
padding: 0 20px !important;
font-size: .82rem !important;
font-weight: 700 !important;
margin: 0 !important;
}
@media (max-width: 900px) {
.vl-res-shell { height: auto; }
.vl-filterbar { position: relative; }
}
/* ---------------------------------------------------------------------------
Full MLS quick search widget (search page)
IDX ships this widget as a fixed 250px stack with floated labels. These
rules lay it out as a responsive grid matching the rest of the site.
Selectors are id-prefixed so they only touch the search page widget.
--------------------------------------------------------------------------- */
[id^="IDX-quicksearch-"] { width: 100% !important; max-width: none !important; }
[id^="IDX-quicksearch-"] .IDX-quicksearchForm {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 14px;
width: 100% !important;
}
[id^="IDX-quicksearch-"] .IDX-qsFieldWrap {
width: 100% !important;
height: auto !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 6px;
}
[id^="IDX-quicksearch-"] .IDX-qsLabel {
width: auto !important;
height: auto !important;
display: block !important;
float: none !important;
margin: 0 !important;
font-size: .78rem !important;
font-weight: 800 !important;
color: #111827 !important;
text-align: left !important;
}
[id^="IDX-quicksearch-"] .IDX-qsInput {
width: 100% !important;
max-width: none !important;
height: 44px !important;
box-sizing: border-box;
border: 1px solid #d1d5db !important;
border-radius: 10px !important;
background: #fff !important;
padding: 0 12px !important;
font-size: .88rem !important;
font-weight: 600;
color: #111827 !important;
float: none !important;
margin: 0 !important;
}
[id^="IDX-quicksearch-"] .IDX-qsInput:focus {
border-color: #ec552d !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(236, 85, 45, .15) !important;
}
[id^="IDX-quicksearch-"] .IDX-qsHiddenInput { display: none !important; }
[id^="IDX-quicksearch-"] [id^="IDX-qsSubmitWrap-"] { grid-column: 1 / -1; align-items: flex-start; display: block !important; }
[id^="IDX-quicksearch-"] [id^="IDX-qsSubmit-"] {
width: auto !important;
min-width: 200px;
height: 48px !important;
background: #ec552d !important;
color: #fff !important;
border: 0 !important;
border-radius: 12px !important;
font-weight: 800 !important;
font-size: .95rem !important;
padding: 0 28px !important;
cursor: pointer;
}
[id^="IDX-quicksearch-"] [id^="IDX-qsSubmit-"]:hover { background: #d4441f !important; }
/* ==========================================================================
Zillow-style results page skin (IDX results pages) — added 2026-08-09
Pairs with the zillow-results block at the end of js/app.js
========================================================================== */
:root{--z-text:#111116;--z-text2:#535364;--z-blue:#0041D9;--z-blue-dark:#0035b3;--z-border:#7E7F8E;--z-radius:12px;--z-shadow:0 8px 20px rgba(0,0,0,.15);--z-font:Inter,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;}
.vl-filterbar{height:64px !important;padding:12px 16px !important;gap:8px !important;border-bottom:1px solid #e5e7eb !important;}
.vl-filterbar form{gap:8px !important;width:100%;}
#idxaddonsAcInputContainer{flex:1 1 380px !important;max-width:420px;min-width:240px;}
#idxaddonsAcInputContainer .idxaddons-ac-input-container,#idxaddons-ac-input{height:40px !important;border-radius:var(--z-radius) !important;border:1px solid var(--z-border) !important;background:#fff !important;box-shadow:none !important;font-family:var(--z-font) !important;font-size:16px !important;}
#idxaddons-ac-input{display:flex;align-items:center;padding:0 12px !important;}
.vl-filterbar select.pt-dd{height:40px !important;border-radius:var(--z-radius) !important;background:#fff !important;box-shadow:inset 0 0 0 1px var(--z-border) !important;border:0 !important;color:var(--z-text) !important;font-family:var(--z-font) !important;font-size:14px !important;font-weight:700 !important;padding:0 34px 0 16px !important;cursor:pointer;appearance:none !important;-webkit-appearance:none !important;-moz-appearance:none !important;background-image:url("data:image/svg+xml;utf8,") !important;background-repeat:no-repeat !important;background-position:right 12px center !important;min-width:160px !important;}
.vl-filterbar select.pt-dd:hover{background-color:#f7f7fa !important;}
#iaofPropertyTypeContainer::after,.vl-filterbar .selectContainer::after{display:none !important;content:none !important;}
.vl-filterbar .ms-trigger{display:none !important;}
.vl-zdrop{position:relative;display:inline-flex;}
.vl-zpill{height:40px !important;border-radius:var(--z-radius) !important;background:#fff !important;background-image:none !important;box-shadow:inset 0 0 0 1px var(--z-border) !important;border:0 !important;color:var(--z-text) !important;font-family:var(--z-font) !important;font-size:14px !important;font-weight:700 !important;padding:0 16px !important;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.vl-zpill:hover{background-color:#f7f7fa !important;}
.vl-zdrop.open .vl-zpill{box-shadow:inset 0 0 0 2px var(--z-blue) !important;background:#EDF3FE !important;}
.vl-zpanel{position:absolute;top:calc(100% + 8px);left:0;background:#fff;border-radius:var(--z-radius);box-shadow:0 8px 20px rgba(0,0,0,.25);padding:20px;z-index:200;display:none;min-width:300px;}
.vl-zdrop.open .vl-zpanel{display:block;}
.vl-zpanel-title{font:700 16px var(--z-font);color:var(--z-text);margin:0 0 12px;}
.vl-zpanel .vl-zrow{display:flex;align-items:center;gap:10px;}
.vl-zpanel .vl-zdash{color:var(--z-text2);font-size:18px;}
.vl-zpanel input{height:40px !important;border:1px solid #a7a6ab !important;border-radius:8px !important;padding:0 10px !important;font:400 16px var(--z-font) !important;width:130px !important;color:var(--z-text) !important;background:#fff !important;}
.vl-zpanel input:focus{outline:2px solid var(--z-blue);outline-offset:-1px;}
.vl-zpanel label.vl-zlabel{display:block;font:600 13px var(--z-font);color:var(--z-text);margin:0 0 6px;}
.vl-zpanel .selectContainer .dollar,.vl-zpanel span.dollar{display:none !important;}
.vl-zapply{margin-top:16px;width:100%;height:40px;border:0;border-radius:var(--z-radius);background:var(--z-blue) !important;background-image:none !important;color:#fff;font:700 14px var(--z-font);cursor:pointer;}
.vl-zapply:hover{background:var(--z-blue-dark) !important;}
.vl-filterbar button.vl-morefilters{height:40px !important;border-radius:var(--z-radius) !important;background:#fff !important;color:var(--z-text) !important;box-shadow:inset 0 0 0 1px var(--z-border) !important;border:0 !important;font:700 14px var(--z-font) !important;padding:0 16px !important;display:inline-flex;align-items:center;gap:8px;}
.vl-filterbar button.vl-morefilters svg{stroke:var(--z-text) !important;fill:none !important;width:16px;height:16px;}
.vl-filterbar button.vl-morefilters:hover{background:#f7f7fa !important;}
.vl-filterbar form > button:not(.vl-morefilters){height:40px !important;border-radius:var(--z-radius) !important;background:var(--z-blue) !important;color:#fff !important;border:0 !important;font:700 14px var(--z-font) !important;padding:0 20px !important;box-shadow:none !important;}
.vl-filterbar form > button:not(.vl-morefilters):hover{background:var(--z-blue-dark) !important;}
.vl-filterbar form > button:not(.vl-morefilters) .search_icon{display:none !important;}
.vl-res-listcol{padding:0 20px 32px !important;}
#IDX-resultsContent #IDX-resultsFeaturedListings,#IDX-resultsContent #IDX-resultsActiveListings,#IDX-resultsContent .IDX-resultsListings,.vl-res-listcol #IDX-resultsContent .IDX-resultsListings{display:block !important;grid-template-columns:none !important;width:100% !important;}
#IDX-resultsContent #IDX-resultsFeaturedListings .IDX-resultsCellsContainer,#IDX-resultsContent #IDX-resultsActiveListings .IDX-resultsCellsContainer,.vl-res-listcol #IDX-resultsContent .IDX-resultsCellsContainer{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important;width:100% !important;}
@media (max-width:1100px){.vl-res-listcol #IDX-resultsContent .IDX-resultsCellsContainer{grid-template-columns:1fr !important;}}
#IDX-resultsContent .IDX-resultsCell{width:100% !important;max-width:none !important;min-width:0 !important;border-radius:var(--z-radius) !important;box-shadow:var(--z-shadow) !important;border:0 !important;background:#fff !important;overflow:hidden !important;margin:0 !important;}
#IDX-resultsContent .IDX-resultsCell:hover{box-shadow:0 8px 24px rgba(0,0,0,.22) !important;}
.IDX-resultsCell .vl-photo{border-radius:12px 12px 0 0 !important;position:relative;aspect-ratio:1.887 !important;}
.IDX-resultsCell .vl-photo img{object-fit:cover !important;width:100% !important;height:100% !important;}
.IDX-resultsCell .vl-badge{position:absolute;top:12px;left:12px;background:#fff !important;color:var(--z-text) !important;font:700 12px/20px var(--z-font) !important;text-transform:capitalize !important;letter-spacing:0 !important;border-radius:999px !important;padding:2px 9px !important;box-shadow:0 1px 4px rgba(0,0,0,.25);}
.IDX-resultsCell .IDX-resultsSaveProperty{position:absolute;top:10px;right:12px;z-index:3;}
.IDX-resultsCell .IDX-resultsSaveProperty a{color:rgba(17,17,22,.72) !important;-webkit-text-stroke:2px #fff;font-size:28px !important;}
.IDX-resultsCell .IDX-resultsSaveProperty a:hover{color:var(--z-blue) !important;}
#IDX-resultsContent .IDX-resultsSaveProperty a .fa-heart-o::before{content:"\f004";}
.IDX-resultsCell .vl-body{padding:12px 16px 14px !important;}
.IDX-resultsCell .IDX-field-listingPrice{margin:0 0 2px !important;border:0 !important;display:flex !important;align-items:center;gap:8px;justify-content:flex-start !important;overflow:visible !important;flex-wrap:nowrap !important;}
.IDX-resultsCell .IDX-field-listingPrice .IDX-text{font-family:var(--z-font) !important;font-size:20px !important;font-weight:800 !important;color:var(--z-text) !important;line-height:24px !important;letter-spacing:-.2px;}
#IDX-resultsContent .IDX-reduced{float:none !important;position:static !important;margin-left:8px !important;display:inline-flex !important;border:0 !important;box-shadow:none !important;background:transparent !important;}
#IDX-resultsContent .IDX-reduced *{background:transparent !important;color:var(--z-text) !important;}
#IDX-resultsContent .IDX-reduced .IDX-badge,#IDX-resultsContent .IDX-badge.IDX-badge--success{background:#f1f1f4 !important;color:var(--z-text) !important;border:0 !important;border-radius:6px !important;font:600 12px/18px var(--z-font) !important;padding:2px 6px !important;box-shadow:none !important;display:inline-flex !important;align-items:center;gap:3px;}
#IDX-resultsContent .IDX-reduced .IDX-badge i{font-size:10px !important;color:var(--z-text) !important;}
.IDX-resultsCell .vl-zstats{font:400 14px/24px var(--z-font);color:var(--z-text);display:flex;align-items:center;white-space:nowrap;overflow:hidden;}
.IDX-resultsCell .vl-zstats span{flex:0 0 auto;}
.IDX-resultsCell .vl-zstats b{font-weight:600;margin-right:3px;}
.IDX-resultsCell .vl-zstats .zsep{color:#d1d1d5;margin:0 7px;font-weight:300;}
#IDX-resultsContent .IDX-resultsCell .IDX-resultsAddress{font:400 14px/24px var(--z-font) !important;color:var(--z-text2) !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;display:block !important;}
.IDX-resultsCell .IDX-field-subdivision,.IDX-resultsCell .vl-card-meta,.IDX-resultsCell .IDX-resultsMainInfo,.IDX-resultsCell hr,.IDX-resultsCell .IDX-MLSLogo{display:none !important;}
.IDX-resultsCell .IDX-mlsContainer{margin-top:2px;}
.IDX-resultsCell .IDX-MLSCourtesy{font:400 10px/14px var(--z-font) !important;color:var(--z-text2) !important;text-transform:uppercase;letter-spacing:.2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
@media (min-width:1200px){.vl-res-head{padding-right:290px !important;}}
.vl-res-head .vl-res-title{font:900 20px/26px var(--z-font) !important;color:var(--z-text) !important;letter-spacing:0 !important;}
.vl-res-head .vl-res-count{font:700 14px/20px var(--z-font) !important;color:var(--z-text) !important;}
.vl-actionrow a,.vl-actionrow button,#IDX-resultsTopActions a{height:40px !important;border-radius:var(--z-radius) !important;background:#fff !important;color:var(--z-text) !important;box-shadow:inset 0 0 0 1px var(--z-border) !important;border:0 !important;font:700 14px var(--z-font) !important;display:inline-flex !important;align-items:center !important;padding:0 16px !important;}
.vl-actionrow a:hover,#IDX-resultsTopActions a:hover{background:#f7f7fa !important;}
/* ==========================================================================
Zillow results skin — v2 tweaks (2026-08-09)
Results count under title, navy primary buttons, capsule shape everywhere,
full-width search field, mobile refinements.
========================================================================== */
:root{--z-navy:#21356E;--z-navy-dark:#182750;}
/* results count under title, small */
.vl-res-head{display:block !important;}
.vl-res-head .vl-res-count{display:block !important;font:400 11px/14px var(--z-font) !important;color:#535364 !important;margin:2px 0 0 !important;padding:0 !important;}
@media (min-width:901px){.vl-res-head{padding-right:290px !important;}}
/* navy primary buttons */
.vl-filterbar form > button:not(.vl-morefilters){background:var(--z-navy) !important;}
.vl-filterbar form > button:not(.vl-morefilters):hover{background:var(--z-navy-dark) !important;}
.vl-zapply{background:var(--z-navy) !important;}
.vl-zapply:hover{background:var(--z-navy-dark) !important;}
.vl-zdrop.open .vl-zpill{box-shadow:inset 0 0 0 2px var(--z-navy) !important;background:#EDF1FA !important;}
.vl-zpanel input:focus{outline:2px solid var(--z-navy);}
/* consistent capsule shape everywhere */
.vl-zpill,.vl-filterbar select.pt-dd,.vl-filterbar button.vl-morefilters,
.vl-filterbar form > button:not(.vl-morefilters),.vl-zapply,
.vl-actionrow a,.vl-actionrow button,#IDX-resultsTopActions a,
#idxaddonsAcInputContainer .idxaddons-ac-input-container,#idxaddons-ac-input{border-radius:999px !important;}
/* search field fills leftover space */
#idxaddonsAcInputContainer{flex:1 1 auto !important;max-width:none !important;}
#idxaddons-ac-input{padding:0 18px !important;}
/* mobile refinements (theme's own <=900px rules handle bar wrap + map stack) */
@media (max-width:900px){
#idxaddonsAcInputContainer{flex:0 0 100% !important;max-width:none !important;}
.vl-zdrop{width:100% !important;flex-direction:column !important;}
.vl-zpill{width:100% !important;justify-content:space-between !important;}
.vl-filterbar select.pt-dd{width:100% !important;min-width:0 !important;}
.vl-zpanel{position:static !important;min-width:0 !important;width:100% !important;box-shadow:none !important;border:1px solid #e5e7eb !important;margin-top:8px !important;padding:14px !important;border-radius:12px !important;}
.vl-zpanel .vl-zrow{flex-wrap:nowrap;}
.vl-zpanel input{width:100% !important;min-width:0 !important;}
.vl-zpanel .vl-zrow > div{flex:1 1 0;min-width:0;}
}
/* ==========================================================================
Zillow results skin — v3 fixes (2026-08-10)
Search box inner width, no pill wrapping, title clear of action buttons.
========================================================================== */
#idxaddonsAcInputContainer{flex:1 1 auto !important;max-width:none !important;}
#idxaddonsAcInputContainer .idxaddons-ac-input-container,
#idxaddonsAcInputContainer #idxaddons-ac-input,
#idxaddonsAcInputContainer .ms-ctn{width:100% !important;max-width:none !important;min-width:0 !important;}
.vl-filterbar .vl-zpill{flex-wrap:nowrap !important;}
.vl-filterbar .vl-zpill svg{flex:0 0 auto;}
.vl-filterbar .vl-zpill .vl-zpill-label{white-space:nowrap;}
@media (min-width:901px){
.vl-res-listcol .vl-res-head{padding-right:300px !important;box-sizing:border-box;}
}
/* ==========================================================================
Zillow results skin — v4 responsive fixes (2026-08-10)
Root cause: idxaddons renders the omnisearch form as CSS grid with fixed
column widths sized for the ORIGINAL controls; after the Zillow pills the
tracks no longer match, causing gaps + overlap. Force flex at desktop.
Mobile: IDX hides its own map at small widths, leaving an empty 300px
column — remove it. Tidy the MLS rights line.
========================================================================== */
@media (min-width:901px){
/* form: flex, not idxaddons' grid */
.vl-filterbar form, .vl-filterbar form#idxaddons-omnisearch-form{
display:flex !important;grid-template-columns:none !important;
align-items:center !important;gap:8px !important;width:100% !important;max-width:none !important;
}
/* only the search field flexes; everything else stays natural width */
.vl-filterbar form#idxaddons-omnisearch-form > *{flex:0 0 auto !important;width:auto !important;}
.vl-filterbar form#idxaddons-omnisearch-form > #idxaddonsAcInputContainer{flex:1 1 240px !important;min-width:200px !important;max-width:none !important;}
.vl-filterbar form#idxaddons-omnisearch-form > .vl-zdrop{width:auto !important;}
.vl-filterbar .vl-zdrop .vl-zpill{width:auto !important;}
/* property type: container sized to the pill, select fills it */
#idxaddons-omnisearch-form #iaofPropertyTypeContainer{width:auto !important;min-width:170px !important;flex:0 0 auto !important;}
#idxaddons-omnisearch-form #iaofPropertyTypeContainer select.pt-dd{width:100% !important;min-width:170px !important;max-width:none !important;}
}
/* mobile: IDX hides its own map at small widths; remove the empty 300px column */
@media (max-width:900px){
.vl-res-mapcol{display:none !important;height:0 !important;min-height:0 !important;}
}
/* MLS rights/disclaimer as tidy small print (required text — do not hide) */
#IDX-resultsMLSRights{font:400 10px/15px Inter,sans-serif !important;color:#9095a2 !important;padding:12px 20px !important;}
/* ==========================================================================
Zillow results skin — v5 (2026-08-10)
Search-box typing state (autocomplete widget), autocomplete dropdown
styling, hide duplicate info boxes on listing detail pages.
========================================================================== */
#idxaddons-ac-input, #idxaddons-ac-input.ms-ctn-focus{border-radius:999px !important;overflow:hidden;}
#idxaddons-ac-input .ms-sel-ctn{display:flex !important;align-items:center !important;height:100% !important;}
#idxaddons-search-input, #idxaddons-ac-input .ms-sel-ctn input{border:0 !important;outline:none !important;background:transparent !important;box-shadow:none !important;height:36px !important;border-radius:999px !important;font:400 16px Inter,sans-serif !important;padding:0 !important;margin:0 !important;width:100% !important;}
#idxaddons-ac-input.ms-ctn-focus{border-color:#21356E !important;box-shadow:0 0 0 1px #21356E !important;}
.ms-res-ctn.dropdown-menu{border-radius:12px !important;border:1px solid #e5e7eb !important;box-shadow:0 8px 20px rgba(0,0,0,.25) !important;margin-top:6px !important;font-family:Inter,sans-serif !important;overflow:hidden;}
.ms-res-ctn .ms-res-item{font:400 14px/20px Inter,sans-serif !important;padding:8px 14px !important;}
.ms-res-ctn .ms-res-item-active{background:#EDF1FA !important;}
/* listing detail page: hide the 4 duplicate info boxes (Listing ID / Status / Year Built / Property Type) */
#IDX-detailsMainInfo{display:none !important;}
/* ==========================================================================
Zillow results skin — v6 (2026-08-10)
Single-capsule search box in ALL states (idle / focus / typing / chip):
the outer container is the only visible capsule; inner ms-ctn widget is
made chrome-less; selected-city chip styled as a small navy pill.
========================================================================== */
#idxaddonsAcInputContainer .idxaddons-ac-input-container{height:40px !important;border-radius:999px !important;border:1px solid #7E7F8E !important;background:#fff !important;overflow:hidden !important;display:flex !important;align-items:center !important;transition:none !important;box-shadow:none !important;}
#idxaddonsAcInputContainer .idxaddons-ac-input-container:focus-within{border-color:#21356E !important;box-shadow:0 0 0 1px #21356E !important;}
#idxaddonsAcInputContainer #idxaddons-ac-input.ms-ctn,
#idxaddonsAcInputContainer #idxaddons-ac-input.ms-ctn.ms-ctn-focus{
height:38px !important;min-height:38px !important;max-height:38px !important;
padding:0 6px 0 12px !important;border:0 !important;box-shadow:none !important;
background:transparent !important;border-radius:999px !important;overflow:hidden !important;
flex:1 1 auto !important;display:flex !important;align-items:center !important;transition:none !important;
}
#idxaddons-ac-input .ms-sel-ctn{display:flex !important;align-items:center !important;gap:6px !important;flex-wrap:nowrap !important;height:100% !important;overflow:hidden !important;}
#idxaddons-ac-input .ms-sel-item{display:inline-flex !important;align-items:center !important;gap:5px !important;background:#EDF1FA !important;color:#21356E !important;border:0 !important;border-radius:999px !important;font:600 13px/1 Inter,sans-serif !important;padding:5px 10px !important;margin:0 !important;height:26px !important;box-shadow:none !important;white-space:nowrap !important;}
#idxaddons-ac-input .ms-sel-item:hover{background:#dde6f7 !important;}
#idxaddons-ac-input .ms-sel-item .ms-close-btn{position:static !important;margin:0 !important;color:#21356E !important;opacity:.7;cursor:pointer;width:auto !important;height:auto !important;background:none !important;display:inline-flex !important;align-items:center !important;}
/* ==========================================================================
Zillow results skin — v7 (2026-08-10)
Text inset on the search input (first letter was clipped by the curved
border), smaller Save/Modify buttons aligned with the title, popup close
buttons centered globally.
========================================================================== */
#idxaddonsAcInputContainer #idxaddons-search-input,
#idxaddons-ac-input .ms-sel-ctn input{padding:0 8px 0 6px !important;}
#idxaddonsAcInputContainer #idxaddons-ac-input.ms-ctn,
#idxaddonsAcInputContainer #idxaddons-ac-input.ms-ctn.ms-ctn-focus{padding:0 6px 0 16px !important;}
/* smaller Save/Modify buttons, center-aligned with the results title */
.vl-actionrow a, .vl-actionrow button, #IDX-resultsTopActions a{
height:32px !important;font-size:13px !important;padding:0 14px !important;
}
.vl-actionrow a svg, .vl-actionrow a i{transform:scale(.85);}
@media (min-width:901px){ .vl-actionrow{transform:translateY(7px);} }
/* popup close buttons: glyph centered in the circle (global, all popups) */
.valorie-modal-close, #valorie-chat-close, .valorie-chat-close, .ui-dialog-titlebar-close{
display:flex !important;align-items:center !important;justify-content:center !important;
line-height:1 !important;padding:0 0 2px !important;text-align:center !important;
}
/* v7b: Save/Modify buttons — beat the widget's min-height:40 */
#IDX-resultsTopActions a.IDX-btn{height:32px !important;min-height:32px !important;max-height:32px !important;line-height:1 !important;display:inline-flex !important;align-items:center !important;}
/* ==========================================================================
Zillow results skin — v8 (2026-08-12)
Hide Pending listings; acreage range radio list styling.
========================================================================== */
.IDX-resultsCell[data-idxstatus="pending" i]{display:none !important;}
.vl-zradios{display:flex;flex-direction:column;gap:9px;min-width:170px;}
.vl-zradio{display:flex;align-items:center;gap:9px;font:400 14px/18px Inter,sans-serif;color:#111116;cursor:pointer;}
.vl-zradio input{accent-color:#21356E;width:16px;height:16px;margin:0;cursor:pointer;}
/* ==========================================================================
Zillow results skin — v9 (2026-08-12)
Custom acreage min/max inputs in the Acreage panel.
========================================================================== */
.vl-zcustom{margin-top:14px;padding-top:12px;border-top:1px solid #e5e7eb;}
.vl-zcustom .vl-zrow{margin-top:6px;}
.vl-zcustom-input{height:38px !important;border:1px solid #a7a6ab !important;border-radius:8px !important;padding:0 10px !important;font:400 15px Inter,sans-serif !important;width:110px !important;color:#111116 !important;background:#fff !important;}
.vl-zcustom-input:focus{outline:2px solid #21356E;outline-offset:-1px;}
/* ==========================================================================
Zillow results skin — v10 (2026-08-12)
Un-hide labels inside our panels (form CSS sr-onlys all