/* ============================================================
   U.S. Prime Realty — IDX Broker widget theme
   ------------------------------------------------------------
   This file is loaded locally from index.html (NOT pasted into
   IDX Broker's Custom CSS panel). Every selector is scoped
   under `#idx-rental-showcase`, so these rules ONLY apply to
   the IDX widget rendered on this landing page. Widgets used
   elsewhere (main website, other pages, wrapper pages on the
   IDX subdomain) are untouched.
   ------------------------------------------------------------
   Palette we're matching:
     background   #050505 / #0A0A0B / #121214
     accent       #D4AF37 (+ gold gradient)
     text         #ffffff / #d1d5db
     fonts        'Outfit' (headings), 'Inter' (body)
           — both already loaded by index.html
   ------------------------------------------------------------
   The !important flags are deliberate: IDX Broker's widget JS
   injects its own stylesheet at runtime and often wins on
   specificity. The #idx-rental-showcase scope + !important
   combination is the minimum needed to reliably override.
   ============================================================ */

/* ---- Widget canvas: transparent so our glass-panel shows through ---- */
#idx-rental-showcase .IDX-widgetContainer,
#idx-rental-showcase .IDX-showcase,
#idx-rental-showcase .IDX-resultsCell,
#idx-rental-showcase .IDX-gridResultContent,
#idx-rental-showcase .IDX-listResultContent {
    background: transparent !important;
    color: #e5e7eb !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}

/* ---- Mobile safety net: keep widget contents inside their container ---- */
#idx-rental-showcase,
#idx-rental-showcase * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#idx-rental-showcase img,
#idx-rental-showcase iframe,
#idx-rental-showcase video,
#idx-rental-showcase table {
    max-width: 100% !important;
    height: auto !important;
}

@media (max-width: 640px) {
    #idx-rental-showcase .IDX-resultsPrice {
        font-size: 1.25rem !important;
        padding: 0.75rem 0.875rem 0 !important;
    }
    #idx-rental-showcase .IDX-resultsAddress,
    #idx-rental-showcase .IDX-resultsAddressNumber,
    #idx-rental-showcase .IDX-resultsAddressName,
    #idx-rental-showcase .IDX-resultsCityStateZip {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }
    #idx-rental-showcase .IDX-resultsBedBathSqft,
    #idx-rental-showcase .IDX-resultsCell .IDX-field {
        padding: 0.5rem 0.875rem !important;
    }
    #idx-rental-showcase .IDX-resultsDetailsLink,
    #idx-rental-showcase .IDX-resultsCell a.IDX-btn,
    #idx-rental-showcase .IDX-resultsCell .IDX-resultsLinks a {
        margin: 0.75rem 0.875rem 0.875rem !important;
    }
}

/* ---- Listing cards: dark glass-panel vibe ---- */
#idx-rental-showcase .IDX-resultsCell,
#idx-rental-showcase .IDX-showcaseContainer > .IDX-resultsCell {
    background: rgba(18, 18, 20, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    transition: border-color .3s, transform .3s, box-shadow .3s !important;
    padding: 0 !important;
}

#idx-rental-showcase .IDX-resultsCell:hover {
    border-color: rgba(212, 175, 55, 0.3) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.1) !important;
}

/* ---- Listing image: fill card, scale on hover ---- */
#idx-rental-showcase .IDX-resultsPhoto,
#idx-rental-showcase .IDX-resultsCell .IDX-resultsPhotoWrapper {
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

#idx-rental-showcase .IDX-resultsPhoto img {
    transition: transform .8s !important;
}

#idx-rental-showcase .IDX-resultsCell:hover .IDX-resultsPhoto img {
    transform: scale(1.08) !important;
}

/* ---- Price: gold gradient text ---- */
#idx-rental-showcase .IDX-resultsPrice,
#idx-rental-showcase .IDX-resultsCell .IDX-resultsPrice {
    background: linear-gradient(135deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    margin: 0 0 .25rem 0 !important;
    padding: 1rem 1.25rem 0 !important;
}

/* ---- Address ---- */
#idx-rental-showcase .IDX-resultsAddress,
#idx-rental-showcase .IDX-resultsAddressNumber,
#idx-rental-showcase .IDX-resultsAddressName,
#idx-rental-showcase .IDX-resultsCityStateZip {
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    padding: 0 1.25rem !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
}

#idx-rental-showcase .IDX-resultsCityStateZip {
    color: #9ca3af !important;
    font-weight: 400 !important;
    font-size: .875rem !important;
    margin-top: .25rem !important;
    padding-bottom: .5rem !important;
}

/* ---- Bed / bath / sqft meta row ---- */
#idx-rental-showcase .IDX-resultsBedBathSqft,
#idx-rental-showcase .IDX-resultsCell .IDX-field {
    color: #d1d5db !important;
    font-size: .8125rem !important;
    padding: .5rem 1.25rem !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

#idx-rental-showcase .IDX-resultsCell .IDX-field strong,
#idx-rental-showcase .IDX-resultsBedBathSqft strong {
    color: #D4AF37 !important;
    font-weight: 600 !important;
}

/* ---- "View Details" / action links ---- */
#idx-rental-showcase .IDX-resultsDetailsLink,
#idx-rental-showcase .IDX-resultsCell a.IDX-btn,
#idx-rental-showcase .IDX-resultsCell .IDX-resultsLinks a {
    display: block !important;
    margin: .75rem 1.25rem 1.25rem !important;
    padding: .75rem 1rem !important;
    background: transparent !important;
    border: 1px solid rgba(212, 175, 55, 0.5) !important;
    color: #D4AF37 !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: .75rem !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    border-radius: .25rem !important;
    transition: all .3s !important;
    text-decoration: none !important;
}

#idx-rental-showcase .IDX-resultsDetailsLink:hover,
#idx-rental-showcase .IDX-resultsCell a.IDX-btn:hover,
#idx-rental-showcase .IDX-resultsCell .IDX-resultsLinks a:hover {
    background: #D4AF37 !important;
    color: #000000 !important;
    border-color: #D4AF37 !important;
}

/* ---- "Status" badge (Active, Pending, etc.) ---- */
#idx-rental-showcase .IDX-resultsCell .IDX-field-propStatus,
#idx-rental-showcase .IDX-status {
    background: rgba(212, 175, 55, 0.1) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    color: #D4AF37 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: .625rem !important;
    font-weight: 700 !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
    padding: .25rem .5rem !important;
    border-radius: .25rem !important;
}

/* ---- Pagination / carousel arrows ---- */
#idx-rental-showcase .IDX-carousel-prev,
#idx-rental-showcase .IDX-carousel-next,
#idx-rental-showcase .IDX-pager a,
#idx-rental-showcase .IDX-pager span {
    background: rgba(18, 18, 20, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #D4AF37 !important;
    border-radius: 9999px !important;
    transition: all .3s !important;
}

#idx-rental-showcase .IDX-carousel-prev:hover,
#idx-rental-showcase .IDX-carousel-next:hover,
#idx-rental-showcase .IDX-pager a:hover {
    background: #D4AF37 !important;
    color: #000000 !important;
    border-color: #D4AF37 !important;
}

/* ---- Headings inside widget (e.g. "Featured Listings") ---- */
#idx-rental-showcase .IDX-showcaseHeader,
#idx-rental-showcase .IDX-widgetHeader,
#idx-rental-showcase .IDX-showcase h2,
#idx-rental-showcase .IDX-showcase h3 {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
}