/*
 * Styles for the homepage category boxes, the grouped "latest" sliders,
 * and the grouped search-results sections added on top of WpResidence.
 *
 * Colors are taken directly from the site's own homepage design (hero
 * search + section backgrounds) instead of introducing a new palette:
 *   #3A3A3A  - primary dark (buttons, active tabs, overlays)
 *   #C4C0BF  - secondary neutral (tab background, "Featured" section bg)
 *   #201F1F  - near-black accent (borders, hover)
 *   #F5F5F5  - light section background
 *   #FFFFFF  - white
 */

.ru-category-boxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 0 0 30px;
}

.ru-category-box {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 220px;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(32, 31, 31, 0.15);
}

.ru-category-box__image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    transition: transform 0.35s ease;
}

.ru-category-box__image--placeholder {
    background-color: #C4C0BF;
}

.ru-category-box:hover .ru-category-box__image {
    transform: scale(1.05);
}

.ru-category-box__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(58, 58, 58, 0.85) 0%, rgba(58, 58, 58, 0.15) 55%, rgba(58, 58, 58, 0) 100%);
}

.ru-category-box__label {
    position: relative;
    z-index: 1;
    padding: 18px 16px;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

@media (min-width: 992px) {
    .ru-category-box {
        min-height: 280px;
    }
}

/* Grouped "latest" sliders on the homepage */
.ru-grouped-latest .slider_container {
    margin-bottom: 10px;
}

/* Grouped search-results sections */
.ru-results-group {
    margin-bottom: 40px;
}

.ru-results-group__title {
    font-size: 22px;
    font-weight: 600;
    color: #3A3A3A;
    border-bottom: 2px solid #C4C0BF;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.ru-results-group__count {
    color: #201F1F;
    font-weight: 400;
    font-size: 16px;
}

.ru-results-group__more {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 24px;
    background-color: #3A3A3A;
    color: #FFFFFF;
    border: 1px solid #201F1F;
    border-radius: 3px;
    text-decoration: none;
    font-size: 14px;
}

.ru-results-group__more:hover {
    background-color: #201F1F;
    color: #FFFFFF;
}

.ru-no-results {
    padding: 30px 0;
    color: #3A3A3A;
    font-size: 16px;
}

/* Site-wide card border, using the site's own already-established
   near-black accent color. */
.property_listing,
.agency_unit {
    border: 1px solid #201F1F !important;
}

/* The theme leaves overflow:visible on the card, so its own
   hover-zoom image transform (scale(1.1)) spills the picture out past
   the card's own edges instead of staying clipped inside it. */
.property_listing {
    overflow: hidden !important;
}

/* Inset the card photo slightly so its square corners don't sit
   flush against the card's rounded border - a small gap avoids the
   image edge visually poking past the border curve. Applies to every
   property card type site-wide (grid, search results, sliders). */
.property_listing .listing-unit-img-wrapper {
    padding: 4px;
    box-sizing: border-box;
    background-color: #D9D9D9;
}

.property_listing .listing-unit-img-wrapper img {
    border-radius: 3px;
}

/* The theme glows cards with a blue box-shadow both by default and on
   hover (rgba(7,152,255,...)); recolor both states to match the card
   border instead of introducing a second, inconsistent accent color,
   and use an inset shadow so it reads inward from the edge rather
   than spreading outward past it. */
.property_listing.property_listing,
.agency_unit.agency_unit,
.slider_container .listing_wrapper .property_listing.property_listing,
.slider_container .property_listing_blog.property_listing_blog,
.user_role_unit.user_role_unit {
    box-shadow: inset 0 0 0 1px #201F1F, 0 4px 12px rgba(32, 31, 31, 0.35) !important;
}

.property_listing.property_listing:hover,
.agency_unit.agency_unit:hover,
.slider_container .listing_wrapper .property_listing.property_listing:hover,
.slider_container .property_listing_blog.property_listing_blog:hover,
.user_role_unit.user_role_unit:hover {
    box-shadow: inset 0 0 0 2px #201F1F, 0 6px 16px rgba(32, 31, 31, 0.45) !important;
}

/* Make agency/developer cards look like the property cards (vertical
   card: image on top, details below) instead of the original
   horizontal row layout, and keep their background on the site's
   established gray instead of white. */
.agency_unit.d-flex.flex-md-row {
    flex-direction: column !important;
}

.agency_unit {
    background-color: #D9D9D9;
    border-radius: 4px;
    overflow: hidden;
    /* Fill the full height of its (flex-stretched) .agency_unit_wrap
       parent so every card in a row matches height regardless of how
       much contact-detail text a given agency has. */
    height: 100%;
}

.agency_unit_wrapper {
    flex: 1 1 auto;
    /* Compact, consistent spacing so the card stays close to square
       instead of growing tall to fit every field. */
    padding: 8px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.agency_unit_wrapper h4 {
    margin: 0;
    font-size: 14px;
    line-height: 1.25;
    /* Clamp long agency names to 1 line instead of growing the card. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agency_unit_wrapper .agent_address {
    font-size: 12px;
    line-height: 1.3;
    /* Clamp long addresses to 1 line with an ellipsis instead of
       stretching every card in the row to match the longest one. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agency_unit_wrapper .agency_social-wrapper {
    margin: 0;
}

.agency_unit_wrapper .agent_detail {
    font-size: 12px;
    line-height: 1.4;
}

.agency_unit_img {
    max-width: 100% !important;
    width: 100%;
    height: 110px;
    padding: 10px;
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: hidden;
}

.agency_unit_img img {
    /* !important: the homepage "أحدث الشركات العقارية" slider (a Slick
       carousel, unlike the plain grid on /agencies/) loses the height to
       a same-specificity img{height:auto} reset from slick/bootstrap that
       wins the source-order tie, so the logo scales to its native aspect
       ratio at full slide width and only half fits in the clipped 110px
       tall wrapper. */
    height: 100% !important;
    width: 100% !important;
    object-fit: contain;
    /* Uploaded logos are real images with their own baked-in colors -
       some are pale/near-white and disappear against our gray card.
       A white backing keeps every logo visible regardless of its own
       background, which the wider "reject white" feedback wasn't
       about (that was full-section backgrounds mismatching the page,
       not a deliberate, localized logo tile). */
    background-color: #FFFFFF !important;
    border-radius: 3px;
}

/* The /agencies/ directory page (page-templates/agency_list.php) loops
   plain WP_Query results with no column classes at all, so cards stack
   one per row full-width. Lay them out as a responsive grid: 4 per row
   on desktop, 2 per row on phones. align-items: stretch (the flex
   default) makes every card in a row match the tallest one's height. */
#listing_ajax_container_agent {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0 -10px;
}

#listing_ajax_container_agent .agency_unit_wrap {
    width: 25%;
    padding: 0 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    #listing_ajax_container_agent .agency_unit_wrap {
        width: 50%;
    }
}

/* Rotating "latest" groups: only one of the four groups
   (agencies / commercial / chalets / property) is shown at a time,
   auto-advancing to the next non-empty group on a timer.
   Groups render normally at first (so the slider library measures
   correct, visible dimensions on init) and only get hidden once the
   rotation script is ready to take over. */
.slider_container.bottom-properties {
    transition: opacity 0.5s ease;
}

.slider_container.bottom-properties.ru-hidden {
    display: none;
    opacity: 0;
}

.slider_container.bottom-properties.ru-active {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .slider_container.bottom-properties {
        transition: none;
    }
}

/* Homepage spacer section between the agencies cards and the footer was
   still using the theme's old "second color" accent (#C4C0BF) as its
   Elementor-set background, instead of the site-wide gray - it doesn't
   read from wp_estate_content_area_back_color like the rest of the page
   chrome, since Elementor set it directly on this one section. */
.elementor-element-52ffa5f4 {
    background-color: #D9D9D9 !important;
}

/* The big homepage section spanning the 4 category boxes through the
   rotating "الأحدث" listings has its background hardcoded directly in
   Elementor's own generated page CSS (#F5F5F5, the site's original
   pre-redesign light gray) instead of following wp_estate_background_color
   like the rest of the page - so it stays visibly lighter than every
   other page (agencies, property listings) even though those all read
   the same theme option correctly. */
.elementor-element-44db4a7 {
    background-color: #D9D9D9 !important;
}