/* ==========================================================================
   Ruuster IDX — Bean Group Global Overrides
   beanre-assets.pages.dev/ruuster-overrides.css

   Single stylesheet injected by Ruuster support into the Bean Group
   iframe embed (beanre.ruuster.com). Covers all sites initially.
   
   To iterate: edit and re-upload to Cloudflare Pages. Changes go live
   immediately — no Ruuster support ticket needed.
   ========================================================================== */

/* Import mainerealestate.com fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Outfit:wght@300;400;500;600;700&display=swap');


/* ==========================================================================
   1. GLOBAL / TYPOGRAPHY
   ========================================================================== */

/* Body / default — Outfit (matches MRE body text) */
.listings,
.listing-details-container,
.listing-details-public-wrapper {
  font-family: "Outfit", -apple-system, system-ui, "Segoe UI", sans-serif !important;
  color: #2d3436 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Prices — Cormorant Garamond (matches MRE headings) */
.property-listings-item-price,
.listing-details-header-price {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
}

/* Panel headers (Description, Property Details) */
.listing-details-panel-header,
.listing-details-panel-header-title {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  color: #0a1e3d !important;
}

/* Navigation */
.public--navigation,
.public--navigation-link-button {
  font-family: "Outfit", -apple-system, system-ui, sans-serif !important;
}

/* Search, filters, UI elements — Outfit */
.listings-address-search-field,
.listings-sort,
.listings-filters,
.select__control,
.save-search-button,
.btn-accent,
.inverted-btn-accent,
.property-listings-item-info-part,
.property-listings-item-address,
.listing-details-description-text-content,
.listing-details-details-item-content-item,
.listing-details-header-address,
.listing-details-header-courtesy,
.listing-details-disclaimer,
.tag {
  font-family: "Outfit", -apple-system, system-ui, "Segoe UI", sans-serif !important;
}


/* ==========================================================================
   2. TOP NAVIGATION BAR
   ========================================================================== */

.public--navigation {
  background-color: #0a1e3d !important;
}

.public--navigation-link-button {
  color: #faf9f7 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
}

.public--navigation-link-button:hover {
  color: #d4914f !important;
}


/* ==========================================================================
   3. SEARCH BAR & CONTROLS
   ========================================================================== */

.listings-address-search-field .select__control {
  border-radius: 8px !important;
  border-color: rgba(10, 30, 61, 0.12) !important;
  font-size: 14px !important;
}

.listings-address-search-field .select__control:hover,
.listings-address-search-field .select__control--is-focused {
  border-color: #5381ac !important;
  box-shadow: 0 0 0 1px #5381ac !important;
}

.listings-address-search-button button {
  background-color: #0a1e3d !important;
  border-radius: 8px !important;
  transition: background-color 0.15s ease !important;
}

.listings-address-search-button button:hover {
  background-color: #1a3358 !important;
}

.listings-result-counter {
  color: #636e72 !important;
  font-size: 13px !important;
}

.listings-sort .select__control {
  border-radius: 6px !important;
  font-size: 13px !important;
}

.save-search-button {
  color: #0a1e3d !important;
  font-weight: 500 !important;
}

.listings-view-switch {
  border-radius: 6px !important;
}

.listings-filters--header {
  font-weight: 600 !important;
  color: #2d3436 !important;
}

.listings-filters--container .select__control {
  border-radius: 6px !important;
}


/* ==========================================================================
   4. LISTING CARDS — SEARCH RESULTS
   ========================================================================== */

/* Card */
.property-listings-item {
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(10, 30, 61, 0.08) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.property-listings-item:hover {
  box-shadow: 0 4px 16px rgba(10, 30, 61, 0.13) !important;
}

/* Photo area */
.property-listings-item-slider {
  border-radius: 10px 10px 0 0 !important;
}

/* Carousel arrows — reveal on hover */
.property-listings-item-slider-arrow-block {
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

.property-listings-item:hover .property-listings-item-slider-arrow-block {
  opacity: 1 !important;
}

/* Carousel active dot */
.property-listings-item-slider-dot-active {
  background-color: #faf9f7 !important;
}

/* Status badges ("NEW - 3 HRS AGO", "Coming Soon", etc.) */
.tag,
.property-listings-item-slider-status-badge {
  background-color: #0a1e3d !important;
  color: #faf9f7 !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 4px 8px !important;
}

/* Heart / Favorite icon background */
.like-icon {
  background-color: #0a1e3d !important;
}

/* Content area */
.property-listings-item-content {
  padding: 12px 14px !important;
}

/* Price */
.property-listings-item-price {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #0a1e3d !important;
  letter-spacing: -0.01em !important;
}

/* Heart / Favorite */
.like {
  opacity: 0.6 !important;
  transition: opacity 0.15s ease !important;
}

.like:hover,
.like-icon:hover {
  opacity: 1 !important;
}

/* Beds / Baths / Sqft */
.property-listings-item-info {
  margin: 4px 0 !important;
}

.property-listings-item-info-part {
  color: #2d3436 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Address */
.property-listings-item-address {
  font-size: 13px !important;
  color: #636e72 !important;
  line-height: 1.4 !important;
}


/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.btn-accent {
  background-color: #0a1e3d !important;
  color: #faf9f7 !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  padding: 10px 24px !important;
  transition: background-color 0.15s ease !important;
}

.btn-accent:hover {
  background-color: #1a3358 !important;
}

.inverted-btn-accent {
  color: #0a1e3d !important;
  border-color: #0a1e3d !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}

.inverted-btn-accent:hover {
  background-color: #0a1e3d !important;
  color: #faf9f7 !important;
}


/* ==========================================================================
   6. PROPERTY DETAIL PAGE
   ========================================================================== */

/* Gallery */
.listing-details-gallery {
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* Header — reorder so courtesy line appears below price/address/info */
.listing-details-header {
  border-radius: 0 0 12px 12px !important;
}

.listing-details-header-block {
  display: flex !important;
  flex-direction: column !important;
}

.listing-details-header-price {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #0a1e3d !important;
  letter-spacing: -0.01em !important;
}

.listing-details-header-address {
  font-size: 16px !important;
  color: #636e72 !important;
}

.listing-details-header-courtesy {
  order: 99 !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(10, 30, 61, 0.06) !important;
  font-size: 12px !important;
  color: #7a9fbe !important;
}

.listing-details-header-info-item {
  font-weight: 600 !important;
  color: #2d3436 !important;
}

/* Description */
.listing-details-description-text-content {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #2d3436 !important;
}

.listing-details-description-text-show-more {
  color: #5381ac !important;
  font-weight: 600 !important;
}

/* Property details table */
.listing-details-details-item-title {
  font-weight: 700 !important;
  color: #0a1e3d !important;
  font-size: 16px !important;
}

.listing-details-details-item-content-item {
  font-size: 14px !important;
  color: #2d3436 !important;
  border-bottom: 1px solid rgba(10, 30, 61, 0.06) !important;
}

/* Map */
.listing-details-map {
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* Promo cards — hidden via Worker script injection */
.listing-details-links {
  display: none !important;
}

/* Tour scheduling */
.listing-details-tour {
  border-radius: 10px !important;
}

/* Contact CTA */
.listing-details-buttons-button {
  background-color: #0a1e3d !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.listing-details-buttons-button:hover {
  background-color: #1a3358 !important;
}


/* ==========================================================================
   7. MLS ATTRIBUTION, COURTESY & DISCLAIMER — Unified Treatment
   ========================================================================== */

/* Courtesy line — hide original in header */
.listing-details-header-block .listing-details-header-courtesy {
  display: none !important;
}

/* Courtesy clone inside MLS panel — align with panel content */
.listing-details-panel-content > .listing-details-header-courtesy,
#courtesy-moved {
  font-family: "Outfit", -apple-system, system-ui, "Segoe UI", sans-serif !important;
  font-size: 13px !important;
  color: #636e72 !important;
  line-height: 1.5 !important;
  padding: 0 0 12px 0 !important;
  margin: 0 0 12px 0 !important;
  border-bottom: 1px solid rgba(10, 30, 61, 0.06) !important;
}

/* MLS attribution panel ("Listing provided by PrimeMLS...") */
.listing-details-panel:nth-last-child(2),
.listing-details-panel:last-child {
  background-color: #faf9f7 !important;
  border-color: rgba(10, 30, 61, 0.04) !important;
}

/* Align MLS content items with courtesy — remove nested indent */
.listing-details-panel:nth-last-child(2) .listing-details-details-item-content,
.listing-details-panel:last-child .listing-details-details-item-content {
  padding-left: 0 !important;
}

/* MLS attribution text — muted, smaller */
.listing-details-panel .listing-details-details-item-content-item {
  font-size: 13px !important;
  color: #636e72 !important;
  border-bottom-color: rgba(10, 30, 61, 0.04) !important;
}

/* "Show More" link in MLS section */
.listing-details-details-button {
  color: #5381ac !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

/* MLS Disclaimer (copyright panel) */
.listing-details-disclaimer {
  font-size: 11px !important;
  color: #7a9fbe !important;
  line-height: 1.6 !important;
}

/* MLS logo — subtle sizing */
.listing-details-container img[alt*="MLS"],
.listing-details-container img[alt*="logo"] {
  opacity: 0.7 !important;
  max-height: 50px !important;
  width: auto !important;
}


/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .property-listings-item-price {
    font-size: 17px !important;
  }

  .listing-details-header-price {
    font-size: 24px !important;
  }

  .btn-accent {
    padding: 10px 18px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .property-listings-item-content {
    padding: 10px 12px !important;
  }

  .property-listings-item-address {
    font-size: 12px !important;
  }
}


/* ==========================================================================
   8. LISTING GRID — 3-4 COLUMNS
   ========================================================================== */

.listings-result-content-list {
  grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 1200px) {
  .listings-result-content-list {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .listings-result-content-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .listings-result-content-list {
    grid-template-columns: 1fr !important;
  }
}