/* ═══════════════════════════════════════════════════════════════════════
   idx-detail.css — HoneyWay brand overrides for IDXBroker detail pages.

   Loaded by /idx-wrapper/default.php (which is the wrapper IDX fetches
   to render its hosted pages with our site chrome).

   Everything is scoped under `.IDX-page-listing` (the body class that
   IDX adds only on detail pages), so this stylesheet never leaks into
   search results, agent pages, contact pages, etc.

   Heavy use of !important because IDX ships its own inline + linked
   styles that load AFTER this file. The IDXBroker stylesheet is the
   last cascade origin we can compete with.

   Generated against the selector inventory pulled by /idx/css-probe.php
   on listing VAWI2010682.
   ═══════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   ROOT TYPOGRAPHY + RESET
   ───────────────────────────────────────────────────────────────── */
.IDX-page-listing #IDX-main,
.IDX-page-listing #idxMainWrapper,
.IDX-page-listing .IDX-wrapper-standard,
.IDX-page-listing #IDX-detailsPageContainer {
    font-family: var(--font-body) !important;
    color: var(--color-ink) !important;
    background: #fff !important;
    line-height: 1.55 !important;
}

.IDX-page-listing #IDX-detailsPageContainer {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.IDX-page-listing #IDX-detailsWrapper {
    padding: 0 !important;
}

/* Headings throughout the detail page use the display font */
.IDX-page-listing #IDX-detailsPageContainer h1,
.IDX-page-listing #IDX-detailsPageContainer h2,
.IDX-page-listing #IDX-detailsPageContainer h3,
.IDX-page-listing #IDX-detailsPageContainer h4,
.IDX-page-listing #IDX-detailsPageContainer .IDX-h2,
.IDX-page-listing .IDX-panel-title {
    font-family: var(--font-display) !important;
    color: var(--color-ink) !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
}


/* ─────────────────────────────────────────────────────────────────
   TOP NAV — "New Search" / breadcrumbs
   ───────────────────────────────────────────────────────────────── */
.IDX-page-listing #IDX-detailsTopNav,
.IDX-page-listing .IDX-inline-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 24px !important;
    background: var(--color-cream) !important;
    border-bottom: 1px solid var(--color-line) !important;
    margin: 0 !important;
}

.IDX-page-listing #IDX-detailsTopNewSearch,
.IDX-page-listing #IDX-detailsMobileNewSearch {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    color: var(--color-honey-dark) !important;
}


/* ─────────────────────────────────────────────────────────────────
   PAGE HEADER — address, price, primary stats
   ───────────────────────────────────────────────────────────────── */
.IDX-page-listing #IDX-detailsHead,
.IDX-page-listing #IDX-detailsHeader,
.IDX-page-listing .IDX-pageHeader {
    background: #fff !important;
    border-bottom: 1px solid var(--color-line) !important;
    padding: 24px 28px !important;
    margin: 0 !important;
}

.IDX-page-listing .IDX-detailsPageTitle,
.IDX-page-listing #IDX-detailsAddress,
.IDX-page-listing #IDX-detailsAddressStreet {
    font-family: var(--font-display) !important;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem) !important;
    font-weight: 700 !important;
    color: var(--color-ink) !important;
    line-height: 1.2 !important;
    margin: 0 0 4px !important;
    letter-spacing: -.01em !important;
}

.IDX-page-listing #IDX-detailsAddressRegion {
    font-size: .92rem !important;
    color: var(--color-mute) !important;
    font-weight: 400 !important;
}

.IDX-page-listing .IDX-detailsAddress__divider {
    color: var(--color-line) !important;
    margin: 0 6px !important;
}

/* Listing price — big, money-green */
.IDX-page-listing .IDX-field-listingPrice .IDX-text,
.IDX-page-listing .IDX-field-price .IDX-text,
.IDX-page-listing #IDX-field-listingPrice .IDX-text {
    font-family: var(--font-display) !important;
    font-size: clamp(1.7rem, 2.6vw, 2.1rem) !important;
    font-weight: 800 !important;
    color: #1b7e3f !important;
    line-height: 1 !important;
    letter-spacing: -.02em !important;
}

/* Price-per-sqft chip */
.IDX-page-listing .IDX-field-pricePerSqFt {
    display: inline-block !important;
    padding: 3px 10px !important;
    background: #e6f3eb !important;
    border-radius: 999px !important;
    font-size: .78rem !important;
    color: #1b7e3f !important;
    font-weight: 600 !important;
    margin-left: 8px !important;
}
.IDX-page-listing .IDX-field-pricePerSqFt .IDX-label {
    display: none !important;
}

/* Listing ID display — muted, small */
.IDX-page-listing .IDX-pageHeader__listingID,
.IDX-page-listing .IDX-field-listingID {
    font-size: .72rem !important;
    color: var(--color-mute) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 600 !important;
}


/* ─────────────────────────────────────────────────────────────────
   ACTION BAR — Save / Share / Print
   ───────────────────────────────────────────────────────────────── */
.IDX-page-listing #IDX-detailsHeaderActions,
.IDX-page-listing #IDX-detailsSlidesActions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 12px 0 0 !important;
}

.IDX-page-listing #IDX-detailsContactLinks {
    margin-top: 8px !important;
}

.IDX-page-listing #IDX-saveProperty.IDX-btn,
.IDX-page-listing .IDX-saveProperty,
.IDX-page-listing #IDX-detailsContactLink {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    background: #fff !important;
    border: 1px solid var(--color-line) !important;
    border-radius: 6px !important;
    color: var(--color-ink) !important;
    font-size: .85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background .15s, border-color .15s, color .15s !important;
}

.IDX-page-listing #IDX-saveProperty.IDX-btn:hover,
.IDX-page-listing .IDX-saveProperty:hover,
.IDX-page-listing #IDX-detailsContactLink:hover {
    background: var(--color-cream) !important;
    border-color: var(--color-honey) !important;
    color: var(--color-honey-dark) !important;
}


/* ─────────────────────────────────────────────────────────────────
   PHOTO GALLERY — Swiper.js carousel
   IDX gallery is full-width; we'll polish the controls + transitions.
   ───────────────────────────────────────────────────────────────── */
.IDX-page-listing #IDX-primaryPhoto,
.IDX-page-listing #IDX-detailsSlides {
    background: #1a1a1a !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.IDX-page-listing .swiper-container {
    height: clamp(320px, 50vw, 560px) !important;
    background: #1a1a1a !important;
}

.IDX-page-listing .swiper-slide {
    background: #1a1a1a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.IDX-page-listing .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Nav arrows — circular, white-on-dark */
.IDX-page-listing .swiper-button-prev,
.IDX-page-listing .swiper-button-next {
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, .92) !important;
    border-radius: 50% !important;
    color: var(--color-ink) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25) !important;
    margin-top: -22px !important;
    transition: background .15s, transform .15s !important;
}

.IDX-page-listing .swiper-button-prev:hover,
.IDX-page-listing .swiper-button-next:hover {
    background: #fff !important;
    transform: scale(1.05) !important;
}

.IDX-page-listing .swiper-button-prev::after,
.IDX-page-listing .swiper-button-next::after {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--color-ink) !important;
}

/* Pagination dots */
.IDX-page-listing .swiper-pagination-bullet {
    background: rgba(255, 255, 255, .6) !important;
    width: 8px !important;
    height: 8px !important;
    opacity: 1 !important;
}
.IDX-page-listing .swiper-pagination-bullet-active {
    background: var(--color-honey) !important;
    width: 24px !important;
    border-radius: 4px !important;
}

/* "See all photos" / gallery link */
.IDX-page-listing #IDX-detailsPhotoGalleryLink,
.IDX-page-listing #IDX-photoGalleryLinkDescription {
    background: rgba(255, 255, 255, .95) !important;
    color: var(--color-ink) !important;
    padding: 11px 18px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: .92rem !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2) !important;
}


/* ─────────────────────────────────────────────────────────────────
   MAIN BODY GRID — content + sidebar
   ───────────────────────────────────────────────────────────────── */
.IDX-page-listing #IDX-detailsMain {
    padding: 32px 28px 56px !important;
}

@media (min-width: 1025px) {
    .IDX-page-listing #IDX-detailsMain {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 360px !important;
        gap: 32px !important;
        align-items: start !important;
    }
    .IDX-page-listing #IDX-detailsAside {
        position: sticky !important;
        top: 24px !important;
    }
}


/* ─────────────────────────────────────────────────────────────────
   DESCRIPTION — property remarks
   ───────────────────────────────────────────────────────────────── */
.IDX-page-listing #IDX-detailsDescription {
    background: #fff !important;
    padding: 22px 0 28px !important;
    border-bottom: 1px solid var(--color-line) !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
    color: var(--color-ink) !important;
}

.IDX-page-listing #IDX-detailsDescription p {
    margin: 0 0 14px !important;
    text-align: justify !important;
    hyphens: auto !important;
}

/* Read more / less */
.IDX-page-listing .IDX-clamp__button {
    color: var(--color-honey-dark) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: 2px solid var(--color-honey) !important;
    padding-bottom: 1px !important;
}

/* Directions / More info action links beneath description */
.IDX-page-listing #IDX-detailsDescriptionActions {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-top: 14px !important;
}

.IDX-page-listing #IDX-detailsDescriptionActions a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    background: var(--color-cream) !important;
    border-radius: 6px !important;
    color: var(--color-honey-dark) !important;
    font-weight: 600 !important;
    font-size: .88rem !important;
    text-decoration: none !important;
}
.IDX-page-listing #IDX-detailsDescriptionActions a:hover {
    background: var(--color-honey) !important;
    color: var(--color-ink) !important;
}


/* ─────────────────────────────────────────────────────────────────
   ACCORDION PANELS — Basic Info, Features, Schools, Mortgage, etc.
   Each panel becomes a card.
   ───────────────────────────────────────────────────────────────── */
.IDX-page-listing .IDX-panel {
    background: #fff !important;
    border: 1px solid var(--color-line) !important;
    border-radius: 10px !important;
    margin: 16px 0 !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .03) !important;
}

.IDX-page-listing .IDX-panel-default {
    border-color: var(--color-line) !important;
}

.IDX-page-listing .IDX-panel-heading {
    background: var(--color-cream) !important;
    border-bottom: 1px solid var(--color-line) !important;
    padding: 14px 20px !important;
    cursor: pointer !important;
    position: relative !important;
}

.IDX-page-listing .IDX-panel-heading:hover {
    background: #f3ecd9 !important;
}

.IDX-page-listing .IDX-panel-title {
    font-family: var(--font-display) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--color-ink) !important;
    margin: 0 !important;
    padding-left: 14px !important;
    position: relative !important;
}

/* Colored bar on the left of each panel title (like our brand sections) */
.IDX-page-listing .IDX-panel-title::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
    bottom: 4px !important;
    width: 4px !important;
    border-radius: 2px !important;
    background: var(--color-honey) !important;
}

/* Cycle accent colors across multiple panels (every 4th gets honey/blue/coral/teal) */
.IDX-page-listing .IDX-panel:nth-of-type(4n+1) .IDX-panel-title::before { background: var(--c-honey,  #d4a04a); }
.IDX-page-listing .IDX-panel:nth-of-type(4n+2) .IDX-panel-title::before { background: var(--c-blue,   #4a78b8); }
.IDX-page-listing .IDX-panel:nth-of-type(4n+3) .IDX-panel-title::before { background: var(--c-coral,  #d97757); }
.IDX-page-listing .IDX-panel:nth-of-type(4n+4) .IDX-panel-title::before { background: var(--c-teal,   #2a8a8a); }

.IDX-page-listing .IDX-panel-body {
    padding: 20px !important;
    background: #fff !important;
}

/* Panel collapse arrow */
.IDX-page-listing .IDX-panel-collapse-toggle .IDX-icon-arrow-up,
.IDX-page-listing .IDX-icon-arrow-up {
    color: var(--color-honey-dark) !important;
    transition: transform .15s !important;
}


/* ─────────────────────────────────────────────────────────────────
   FIELD ROWS — Label/value pairs inside panels
   (101 .IDX-field elements per page)
   ───────────────────────────────────────────────────────────────── */
.IDX-page-listing .IDX-field {
    display: grid !important;
    grid-template-columns: minmax(140px, 36%) 1fr !important;
    align-items: baseline !important;
    gap: 12px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #f0eee6 !important;
    font-size: .92rem !important;
}

.IDX-page-listing .IDX-field:last-child {
    border-bottom: 0 !important;
}

.IDX-page-listing .IDX-label {
    color: var(--color-mute) !important;
    font-weight: 500 !important;
    font-size: .82rem !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
}

.IDX-page-listing .IDX-text {
    color: var(--color-ink) !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
}

/* Two-column field layout inside wider panels */
.IDX-page-listing .IDX-fieldTwoColumn {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 24px !important;
}

@media (max-width: 600px) {
    .IDX-page-listing .IDX-fieldTwoColumn {
        grid-template-columns: 1fr !important;
    }
    .IDX-page-listing .IDX-field {
        grid-template-columns: 1fr !important;
        gap: 2px !important;
        padding: 10px 0 !important;
    }
}


/* ─────────────────────────────────────────────────────────────────
   AGENT CONTACT — sidebar lead form
   Match the style of the agent card on listing-template.php
   ───────────────────────────────────────────────────────────────── */
.IDX-page-listing #IDX-detailsAside {
    background: #fff !important;
    border: 1px solid var(--color-line) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .06) !important;
}

.IDX-page-listing #IDX-detailsContact,
.IDX-page-listing #IDX-detailscontactContainer {
    padding: 20px 22px !important;
    background: linear-gradient(135deg, var(--c-honey-tint, #fdf3df) 0%, #fff 80%) !important;
    border-top: 3px solid var(--color-honey) !important;
}

.IDX-page-listing #IDX-detailsAgentInfo,
.IDX-page-listing #IDX-detailsAgentText {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.IDX-page-listing .IDX-contact__name,
.IDX-page-listing .IDX-contact-information {
    font-family: var(--font-display) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--color-ink) !important;
}

.IDX-page-listing #IDX-contactInfo,
.IDX-page-listing #IDX-contactInformation {
    font-size: .9rem !important;
    color: var(--color-mute) !important;
}

.IDX-page-listing #IDX-contactPhone2 {
    color: var(--color-honey-dark) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}


/* ─────────────────────────────────────────────────────────────────
   FORMS — Contact form, signup, login
   ───────────────────────────────────────────────────────────────── */
.IDX-page-listing .IDX-form,
.IDX-page-listing .IDX-leadFormWrap {
    background: #fff !important;
    padding: 18px 22px 22px !important;
}

.IDX-page-listing .IDX-contact-form__title {
    font-family: var(--font-display) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--color-ink) !important;
    margin: 0 0 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--color-line) !important;
}

.IDX-page-listing .IDX-form-group--PL,
.IDX-page-listing .IDX-control-group {
    margin-bottom: 12px !important;
}

.IDX-page-listing .IDX-control-label,
.IDX-page-listing .IDX-form__element--PL label,
.IDX-page-listing .IDX-custom-form-element__label {
    display: block !important;
    font-size: .75rem !important;
    color: var(--color-mute) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
    margin-bottom: 4px !important;
}

.IDX-page-listing .IDX-input,
.IDX-page-listing .IDX-text-area,
.IDX-page-listing #IDX-detailsContact input[type=text],
.IDX-page-listing #IDX-detailsContact input[type=email],
.IDX-page-listing #IDX-detailsContact input[type=tel],
.IDX-page-listing #IDX-detailsContact input[type=password],
.IDX-page-listing #IDX-detailsContact textarea {
    width: 100% !important;
    padding: 9px 12px !important;
    background: #fff !important;
    border: 1px solid var(--color-line) !important;
    border-radius: 6px !important;
    font-family: var(--font-body) !important;
    font-size: .92rem !important;
    color: var(--color-ink) !important;
    transition: border-color .15s, box-shadow .15s !important;
    box-sizing: border-box !important;
}

.IDX-page-listing .IDX-input:focus,
.IDX-page-listing .IDX-text-area:focus,
.IDX-page-listing #IDX-detailsContact input:focus,
.IDX-page-listing #IDX-detailsContact textarea:focus {
    border-color: var(--color-honey) !important;
    box-shadow: 0 0 0 3px rgba(212, 160, 74, .18) !important;
    outline: none !important;
}

.IDX-page-listing .IDX-text-area {
    min-height: 90px !important;
    resize: vertical !important;
}


/* ─────────────────────────────────────────────────────────────────
   BUTTONS — primary, default, links
   ───────────────────────────────────────────────────────────────── */
.IDX-page-listing .IDX-btn,
.IDX-page-listing .IDX-submit-btn,
.IDX-page-listing button.IDX-btn,
.IDX-page-listing input.IDX-btn,
.IDX-page-listing a.IDX-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 18px !important;
    border-radius: 6px !important;
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    font-size: .92rem !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: background .15s, border-color .15s, color .15s !important;
}

/* Primary = honey */
.IDX-page-listing .IDX-btn-primary,
.IDX-page-listing .IDX-submit-btn,
.IDX-page-listing #IDX-submitBtn,
.IDX-page-listing #IDX-loginSubmit {
    background: var(--color-honey) !important;
    color: var(--color-ink) !important;
    border-color: var(--color-honey) !important;
}

.IDX-page-listing .IDX-btn-primary:hover,
.IDX-page-listing .IDX-submit-btn:hover,
.IDX-page-listing #IDX-submitBtn:hover {
    background: var(--color-honey-dark) !important;
    color: #fff !important;
    border-color: var(--color-honey-dark) !important;
}

/* Default = outline */
.IDX-page-listing .IDX-btn-default,
.IDX-page-listing .IDX-btn__outline {
    background: #fff !important;
    color: var(--color-ink) !important;
    border-color: var(--color-line) !important;
}
.IDX-page-listing .IDX-btn-default:hover,
.IDX-page-listing .IDX-btn__outline:hover {
    background: var(--color-cream) !important;
    border-color: var(--color-honey) !important;
    color: var(--color-honey-dark) !important;
}

/* Block buttons fill width */
.IDX-page-listing .IDX-btn-block {
    width: 100% !important;
}

/* Link-style buttons */
.IDX-page-listing .IDX-btn__link {
    background: transparent !important;
    color: var(--color-honey-dark) !important;
    border: 0 !important;
    padding: 6px 8px !important;
}
.IDX-page-listing .IDX-btn__link:hover {
    color: var(--color-honey) !important;
    text-decoration: underline !important;
}


/* ─────────────────────────────────────────────────────────────────
   SIMILAR LISTINGS — at the bottom of the page
   Re-cast as a horizontal card row matching brand listing cards.
   ───────────────────────────────────────────────────────────────── */
.IDX-page-listing #IDX-detailsSimilar {
    margin: 40px 0 24px !important;
    padding: 0 28px !important;
}

.IDX-page-listing #IDX-similar-listings-title {
    font-family: var(--font-display) !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: var(--color-ink) !important;
    margin: 0 0 18px !important;
    padding-left: 14px !important;
    position: relative !important;
    letter-spacing: -.01em !important;
}
.IDX-page-listing #IDX-similar-listings-title::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: .35em !important;
    bottom: .35em !important;
    width: 4px !important;
    border-radius: 2px !important;
    background: var(--color-honey) !important;
}

.IDX-page-listing .IDX-similar-listings--item {
    background: #fff !important;
    border: 1px solid var(--color-line) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    transition: transform .15s, box-shadow .15s, border-color .15s !important;
}

.IDX-page-listing .IDX-similar-listings--item:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08) !important;
    border-color: var(--color-honey) !important;
}

.IDX-page-listing .IDX-similar-listings--item-image {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    display: block !important;
}

.IDX-page-listing .IDX-similar-listings--info {
    padding: 14px 16px !important;
}

.IDX-page-listing .IDX-similar-listings--price {
    font-family: var(--font-display) !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #1b7e3f !important;
    margin: 0 0 6px !important;
}

.IDX-page-listing .IDX-similar-listings--address {
    font-size: .92rem !important;
    color: var(--color-ink) !important;
    font-weight: 600 !important;
    margin: 0 0 4px !important;
}

.IDX-page-listing .IDX-similar-listings--address-city,
.IDX-page-listing .IDX-similar-listings--address-state {
    color: var(--color-mute) !important;
    font-weight: 400 !important;
}

.IDX-page-listing .IDX-similar-listings--bed-bath-sqft-acre,
.IDX-page-listing .IDX-similar-listings--details {
    font-size: .82rem !important;
    color: var(--color-mute) !important;
    margin-top: 6px !important;
}

.IDX-page-listing .IDX-similar-listings--item-MLSLogo {
    opacity: .5 !important;
    max-height: 18px !important;
    width: auto !important;
}


/* ─────────────────────────────────────────────────────────────────
   MLS DISCLAIMER / COURTESY
   ───────────────────────────────────────────────────────────────── */
.IDX-page-listing #IDX-detailsCourtesy,
.IDX-page-listing .IDX-mlsSelectorRulesCourtesy {
    background: #f6f5f1 !important;
    border-top: 1px solid var(--color-line) !important;
    padding: 22px 28px !important;
    font-size: .8rem !important;
    color: var(--color-mute) !important;
    line-height: 1.55 !important;
}


/* ─────────────────────────────────────────────────────────────────
   HIDE IDX-NATIVE WIDGETS YOU REPLACED
   The custom listing-template already has mortgage + schools, so the
   IDX-hosted detail page can either show or hide these — leaving the
   built-ins ON for now since IDX pages aren't your custom template.
   Comment-in any of the hides below to suppress them.
   ───────────────────────────────────────────────────────────────── */

/* Hide the IDX mortgage-rates widget (you have your own calculator
   on listing-template.php — but on IDX pages it's nice to keep) */
/* .IDX-page-listing #IDX-mortgageRatesResultInfo,
.IDX-page-listing .IDX-mortgageRatesBottom,
.IDX-page-listing [class^="IDX-mortgageRates"] { display: none !important; } */

/* Hide IDX's print button (we keep print disabled on our pages) */
/* .IDX-page-listing #IDX-printable { display: none !important; } */


/* ─────────────────────────────────────────────────────────────────
   MODALS — Contact-agent modal, login/signup
   ───────────────────────────────────────────────────────────────── */
.IDX-page-listing .IDX-modal {
    border-radius: 12px !important;
    border: 0 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25) !important;
    background: #fff !important;
    max-width: 520px !important;
    padding: 0 !important;
}

.IDX-page-listing .IDX-modal__header {
    background: linear-gradient(135deg, var(--c-honey-tint, #fdf3df) 0%, #fff 80%) !important;
    border-bottom: 1px solid var(--color-line) !important;
    border-top: 3px solid var(--color-honey) !important;
    padding: 18px 22px !important;
}

.IDX-page-listing .IDX-modal__title {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    color: var(--color-ink) !important;
    margin: 0 !important;
    font-size: 1.15rem !important;
}

.IDX-page-listing .IDX-modal__close {
    background: transparent !important;
    color: var(--color-mute) !important;
    border: 0 !important;
    font-size: 1.4rem !important;
    cursor: pointer !important;
}
.IDX-page-listing .IDX-modal__close:hover {
    color: var(--color-honey-dark) !important;
}

.IDX-page-listing .IDX-modal__body {
    padding: 22px !important;
    background: #fff !important;
}


/* ─────────────────────────────────────────────────────────────────
   GREATSCHOOLS / WALK SCORE / AI WIDGETS
   These are third-party embeds — frame them as cards so they don't
   stand out as un-styled blocks against the rest of the page.
   ───────────────────────────────────────────────────────────────── */
.IDX-page-listing #IDX-walkscoreContainer,
.IDX-page-listing #IDX-panel-walk-score,
.IDX-page-listing #IDX-panel-body-greatSchools,
.IDX-page-listing #gsWidget,
.IDX-page-listing #GS_schoolSearchWidget {
    background: #fff !important;
    padding: 12px !important;
}

.IDX-page-listing .GS_widget_innerBorder {
    border: 1px solid var(--color-line) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}


/* ─────────────────────────────────────────────────────────────────
   MOBILE TWEAKS
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .IDX-page-listing #IDX-detailsMain {
        padding: 24px 18px 48px !important;
    }
    .IDX-page-listing .IDX-pageHeader,
    .IDX-page-listing #IDX-detailsHeader {
        padding: 18px 18px !important;
    }
    .IDX-page-listing .IDX-detailsPageTitle,
    .IDX-page-listing #IDX-detailsAddressStreet {
        font-size: 1.2rem !important;
    }
    .IDX-page-listing #IDX-detailsSimilar {
        padding: 0 18px !important;
    }
    .IDX-page-listing #IDX-detailsCourtesy {
        padding: 18px !important;
    }
}

@media (max-width: 600px) {
    .IDX-page-listing .swiper-container {
        height: clamp(260px, 60vw, 380px) !important;
    }
    .IDX-page-listing .swiper-button-prev,
    .IDX-page-listing .swiper-button-next {
        width: 38px !important;
        height: 38px !important;
        margin-top: -19px !important;
    }
    .IDX-page-listing .IDX-panel-body {
        padding: 14px 16px !important;
    }
}