/**
 * Custom IDX Broker Omnibar Styles
 * Project: Finest City Dream Homes (FCDHOMES.COM)
 * Version: 2.1.0 (Grayscale Refactor)
 * Last Updated: 2025-11-12
 */
 
/* ==========================================================================
   Omnibar (Default Styling)
   ========================================================================== */
.idx-omnibar-form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 800px;
  width: 100%;
  margin: 2rem auto;
  padding: 0.5rem 0.75rem;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.idx-omnibar-input {
  flex-grow: 1;
  border: 2px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-gray-950);
  background-color: var(--color-white);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
  outline: none;
}

.idx-omnibar-input::placeholder {
  color: var(--color-gray-600);
}

.idx-omnibar-input:focus {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(255, 130, 0, 0.25);
}

.idx-omnibar-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-shrink: 0;
  background-color: var(--color-orange);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.idx-omnibar-form button[type="submit"]:hover {
  background-color: var(--color-dark-orange);
}

.idx-omnibar-form button[type="submit"] i {
  font-size: 1rem;
  line-height: 1;
}

.idx-omnibar-extra {
  display: none;
}

/* ==========================================================================
   Homepage Hero Omnibar Override
   ========================================================================== */
body.home .hero-search-container .idx-omnibar-form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

body.home .hero-search-container .idx-omnibar-input {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  color: var(--color-dark-blue) !important;
}

body.home .hero-search-container .idx-omnibar-input::placeholder {
  color: var(--color-gray-800) !important;
  opacity: 1;
}

body.home .hero-search-container .idx-omnibar-form button[type="submit"] {
  background-color: var(--color-orange) !important;
  color: var(--color-white) !important;
  padding: 0.5rem 0.875rem !important;
  font-size: 0.85rem !important;
}

body.home .hero-search-container .idx-omnibar-form button[type="submit"]:hover {
  background-color: var(--color-dark-blue) !important;
}

/* ==========================================================================
   IDX Authentication & Forms
   ========================================================================== */

/* Auth Instructions */
#IDX-social-instructions,
#IDX-signup-instructions,
#IDX-login-instructions {
  font-size: 1rem !important;
  color: var(--color-gray-800) !important;
  margin-bottom: 1rem !important;
  font-weight: 500 !important;
}

/* Form Labels */
.IDX-control-label {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--color-gray-900) !important;
  margin-bottom: 0.25rem !important;
  display: block !important;
}

.IDX-required {
  color: var(--color-red) !important;
  margin-left: 0.25rem !important;
}

/* Form Inputs */
.IDX-input {
  width: 100% !important;
  padding: 0.75rem 1rem !important;
  border: 1px solid var(--color-gray-400) !important;
  border-radius: 0.5rem !important;
  margin-bottom: 1rem !important;
  box-shadow: none !important;
  background-color: var(--color-gray-100) !important;
  transition: border-color var(--transition-fast);
}

.IDX-input:focus {
  border-color: var(--color-orange) !important;
  box-shadow: 0 0 0 3px rgba(255, 130, 0, 0.25) !important;
  outline: none !important;
}

.IDX-keepLoggedIn label {
  font-size: 0.875rem !important;
  color: var(--color-gray-800) !important;
}

/* Submit Buttons - Consolidated */
#IDX-submitBtn,
#IDX-loginSubmit {
  background-color: var(--color-orange) !important;
  color: var(--color-white) !important;
  border: none !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 0.5rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  cursor: pointer;
  width: 100% !important;
  transition: background-color var(--transition-fast);
}

#IDX-submitBtn:hover,
#IDX-loginSubmit:hover {
  background-color: var(--color-dark-orange) !important;
}

/* ==========================================================================
   Social Authentication Providers
   ========================================================================== */
#IDX-social-providers {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

#IDX-social-providers .IDX-social-form {
  position: relative;
}

#IDX-social-providers button {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  background-color: var(--idx-primary-color);
}

#IDX-social-providers button:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  background-color: var(--color-gray-700);
}

#IDX-social-providers button span {
  border: 1px solid var(--color-gray-700) !important;
}

#IDX-social-providers .IDX-social-form::before {
  font-family: "Font Awesome 6 Brands";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  color: var(--color-white);
  pointer-events: none;
}

/* Facebook */
#IDX-social-facebook button {
  background-color: #1877f2 !important;
}

#IDX-social-facebook::before {
  display: none !important;
}

#IDX-social-facebook button:hover {
  background-color: var(--color-gray-700) !important;
}

/* Google */
#IDX-social-google button {
  background-color: #ea4335 !important;
}

#IDX-social-google::before {
  display: none !important;
}

#IDX-social-google button:hover {
  background-color: var(--color-gray-700) !important;
}

/* ==========================================================================
   IDX Form Controls
   ========================================================================== */
#IDX-signupForm .IDX-form-control,
#IDX-loginForm .IDX-form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
}

#IDX-signupForm .IDX-form-control:focus,
#IDX-loginForm .IDX-form-control:focus {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(255, 130, 0, 0.25);
  outline: none;
}

#IDX-signupFormSubmitBtn,
#IDX-loginSubmit {
  background-color: var(--color-orange) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-sans) !important;
  width: 100%;
  padding: 0.75rem 1rem !important;
  color: var(--color-white);
}

#IDX-signupFormSubmitBtn:hover,
#IDX-loginSubmit:hover {
  background-color: var(--color-dark-blue) !important;
}

#IDX-toggleLogIn,
#IDX-userSignupLink {
  color: var(--color-orange) !important;
  font-weight: 600;
}

#IDX-toggleLogIn:hover,
#IDX-userSignupLink:hover {
  text-decoration: underline;
}

/* ==========================================================================
 * IDX Search Page "ADD" Button
 * ==========================================================================
 */
#IDX-addListingID {
  /* --- NEW: Centering --- */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* --- NEW: Sizing (A Little Bigger) --- */
  padding: 0.625rem 1.25rem !important; /* 10px 20px (was 8px 16px) */
  font-size: 0.9375rem !important;     /* 15px (was 14px) */
  
  /* --- Original Theme Styles --- */
  background-color: var(--color-orange) !important;
  color: var(--color-white) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  border: none !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer;
  transition: all var(--transition-fast) !important;
  box-shadow: var(--shadow-sm);
  /* line-height: 1.25; <-- Removed, flexbox handles centering */
}

#IDX-addListingID:hover {
  background-color: var(--color-dark-blue) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

#IDX-addListingID:hover {
  background-color: var(--color-dark-blue) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}


/* ==========================================================================
   Details Top Navigation
   ========================================================================== */
#IDX-detailsTopNav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.25rem 1rem;
  background: var(--color-dark-blue);
  border-bottom: 1px solid var(--color-gray-200);
}

#IDX-detailsTopNav .IDX-btn__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-400);
  border-radius: var(--radius-sm);
  padding: 0.5rem 1.25rem;
  color: var(--color-dark-blue);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

#IDX-detailsTopNav .IDX-btn__link:hover {
  background-color: var(--color-light-orange);
  color: var(--color-white);
  border-color: var(--color-light-orange);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

#IDX-detailsTopNav .IDX-btn__link:focus {
  outline: 3px solid var(--color-dark-blue);
  outline-offset: 3px;
}

/* Hide default arrow images */
#IDX-detailsTopNav img[alt*="Previous"],
#IDX-detailsTopNav img[alt*="Next"] {
  display: none !important;
}

/* Add text-based arrows */
#IDX-detailsTopNav #IDX-detailsTopNavPrev span::before {
  content: "< ";
  font-weight: 600;
}

#IDX-detailsTopNav #IDX-detailsTopNavNext span::after {
  content: " >";
  font-weight: 600;
}

@media (max-width: 600px) {
  #IDX-detailsTopNav {
    flex-direction: column;
  }

  #IDX-detailsTopNav .IDX-btn__link {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Details Page Address Styling
   ========================================================================== */

/* Highlight specific address region element */
#IDX-detailsAddressRegion > span:nth-child(7) {
  font-weight: 700;
  font-size: 1.2em;
  color: var(--color-orange);
}

/* Address Street - Uniform Spacing */
#IDX-detailsAddressStreet {
  display: flex;
  gap: 0.4rem;
}

#IDX-detailsAddressStreet span {
  display: inline-block;
}

#IDX-detailsAddressStreet span:empty {
  display: none;
}

/* ==========================================================================
   Property Showcase Cards
   ========================================================================== */
.impress-property-showcase {
  row-gap: 30px;
}

.impress-showcase-property {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0, 44, 59, 0.07);
  border: 1px solid var(--color-gray-300);
  border-top: 4px solid var(--color-orange);
  transition: all var(--transition-normal);
  height: 100%;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

.impress-showcase-property:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 44, 59, 0.1);
}

.impress-showcase-property a.impress-showcase-photo {
  text-decoration: none;
  position: relative;
  display: block;
}

.impress-showcase-property img {
  height: 250px;
  width: 100%;
  object-fit: cover;
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
}

.impress-showcase-property .impress-price {
  position: absolute;
  top: 15px;
  left: 15px;
  background-color: var(--color-dark-blue);
  color: var(--color-white);
  padding: 5px 12px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.impress-showcase-property .impress-status {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: var(--color-light-blue);
  color: var(--color-white);
  padding: 5px 12px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 0.9rem;
}

.impress-showcase-property .impress-address,
.impress-showcase-property .impress-beds-baths-sqft,
.impress-showcase-property .disclaimer {
  padding: 0 25px;
}

.impress-showcase-property .impress-address {
  padding-top: 20px;
  padding-bottom: 10px;
  font-weight: 600;
  color: var(--color-dark-blue);
  font-size: 1.25rem;
  font-family: var(--font-sans);
}

.impress-showcase-property .impress-beds-baths-sqft {
  color: var(--color-gray-700);
  padding-top: 0;
  margin-bottom: 20px;
  font-size: 0.95rem;
  flex-grow: 1;
}

.impress-showcase-property .disclaimer {
  font-size: 0.8rem;
  color: var(--color-gray-700);
  padding-bottom: 20px;
  margin-top: auto;
}

/* ==========================================================================
   IDX Details Page Styling
   ========================================================================== */
body.IDX-page-details #IDX-main {
  background-color: var(--color-white) !important;
}

body.IDX-page-details #IDX-details-header .IDX-details-price {
  font-family: var(--font-sans) !important;
  font-size: 3rem !important;
  color: var(--color-dark-blue) !important;
}

body.IDX-page-details #IDX-details-primary-bar .IDX-btn {
  background-color: var(--color-orange) !important;
  color: var(--color-white) !important;
  border-radius: 5px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
}

body.IDX-page-details #IDX-details-primary-bar .IDX-btn-default {
  background-color: var(--color-light-blue) !important;
}

body.IDX-page-details h2.IDX-details-title {
  font-family: var(--font-sans) !important;
  font-size: 2.25rem !important;
  color: var(--color-dark-blue) !important;
  border-bottom: 3px solid var(--color-orange) !important;
}

/* ==========================================================================
   MAP SEARCH FILTER BAR - JAVASCRIPT COMPATIBLE
   ========================================================================== */

/* Wait for JS to render, then apply styles */
#prime-map-search--filter-bar {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 1rem !important;
  background: var(--color-white) !important;
  position: relative !important;
  z-index: 1001 !important;
  flex-wrap: nowrap !important;
}

/* Search input wrapper - prevent overlap */
#prime-map-search--filter-bar__flyto {
  flex: 0 1 auto !important;
  min-width: 250px !important;
  max-width: 400px !important;
  position: relative !important;
  z-index: 1 !important;
  margin-right: 1rem !important;
}

/* Filter dropdowns container - keep them separate */
#prime-map-search--filter-bar > div:not(#prime-map-search--filter-bar__flyto) {
  flex: 1 !important;
  display: flex !important;
  gap: 0.5rem !important;
  z-index: 2 !important;
}

/* Main search field */
.pm-ccz-fly-to-field {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding: 0.5rem 2.5rem 0.5rem 2.25rem !important;
  background: var(--color-white) !important;
  border: 2px solid var(--color-gray-300) !important;
  border-radius: 6px !important;
  min-height: 44px !important;
  transition: all 0.3s ease !important;
}

.pm-ccz-fly-to-field:hover,
.pm-ccz-fly-to-field:focus-within {
  border-color: var(--color-light-blue) !important;
  box-shadow: 0 0 0 3px rgba(67, 150, 178, 0.1) !important;
}

/* Search icon - left */
.pm-ccz-fly-to-field > section:first-child {
  position: absolute !important;
  left: 0.75rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.pm-ccz-fly-to-field > section:first-child svg {
  width: 16px !important;
  height: 16px !important;
}

/* Vue tags input */
.pm-ccz-fly-to-field .vue-tags-input {
  flex: 1 !important;
  min-width: 0 !important;
}

.pm-ccz-fly-to-field .ti-input {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.pm-ccz-fly-to-field .ti-tags {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.pm-ccz-fly-to-field .ti-new-tag-input {
  border: none !important;
  outline: none !important;
  padding: 0.25rem 0 !important;
  font-size: 14px !important;
  width: 100% !important;
}

/* Close button - × symbol */
.pm-ccz-fly-to-field .rm-btn {
  position: absolute !important;
  right: 0.75rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: var(--color-gray-700) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: var(--color-white) !important;
  border: none !important;
  transition: all 0.2s ease !important;
}

.pm-ccz-fly-to-field .rm-btn::before {
  content: '×' !important;
}

.pm-ccz-fly-to-field .rm-btn svg {
  display: none !important;
}

.pm-ccz-fly-to-field .rm-btn:hover:not(.rm-btn-disabled) {
  background: var(--color-orange) !important;
  transform: translateY(-50%) scale(1.1) !important;
}

.pm-ccz-fly-to-field .rm-btn-disabled {
  opacity: 0.4 !important;
  pointer-events: none !important;
}

/* Autocomplete dropdown */
.pm-ccz-fly-to-field .ti-autocomplete {
  position: absolute !important;
  top: calc(100% + 0.5rem) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10000 !important;
  background: var(--color-white) !important;
  border: 2px solid var(--color-gray-300) !important;
  border-radius: 6px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
  max-height: 300px !important;
  overflow-y: auto !important;
}

/* Filter buttons */
.filter-bar-select,
button[class*="filter"] {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  margin-left: 0.5rem;
}

/* Results count badge - must have space from close button */
.listing-results-count,
.listing-results-count__chip {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  margin-left: 1.5rem; /* More space to avoid close button */
  margin-right: 0.75rem;
  white-space: nowrap;
}

/* Location button */
.pm-ccz-locate-btn,
button[aria-label*="location"],
button[class*="locate"] {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}

/* Override Leaflet map z-index if needed */
.leaflet-container,
.leaflet-pane,
.leaflet-map-pane {
  z-index: 1 !important;
}

/* Ensure map controls stay below filter bar */
.leaflet-top,
.leaflet-bottom {
  z-index: 999 !important;
}



/* ==========================================================================
   Auth Headings
   ========================================================================== */
#IDX-loginForm .IDX-panel-title,
#IDX-leadSignupHeader .IDX-panel-title,
#IDX-leadLoginHeader .IDX-panel-title {
  text-align: center;
  font-size: 1.75rem;
  font-family: var(--font-sans);
}

/* ==========================================================================
   Listing Cards
   ========================================================================== */
.listing-card__favorite > svg {
  fill: var(--color-white);
}

.listing-card__favorite > svg:hover {
  fill: var(--color-red);
}

.listing-card__label.listing-card__virtual-tour,
.listing-card__label.listing-card__price-reduced {
  background-color: var(--color-dark-blue);
  border-radius: 5px;
}

.listing-card__single-item.listing-card__listing-price {
  color: var(--color-dark-blue);
}

/*
 * ==========================================================================
 * Custom Wrapper for Contact Page WPForm
 * ==========================================================================
 *
 * This mimics the .agent-contact-form styles from single-team_member.php
 * to make the main contact form stand out.
 */

#wpforms-166, #IDX-homevaluationContactForm {
  background-color: var(--color-gray-100); /* bg-light-gray */
  padding: 2rem; /* p-8 */
  border-radius: var(--radius-lg); /* rounded-lg */
  border: 1px solid var(--color-gray-300); /* border border-gray-200 */
  box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.05); /* shadow-inner */
  margin-top: 2rem;
}