s. */
.cs_hero_slider {
position: absolute;
inset: 0;
z-index: 0;
}
/* CSS percentage heights only resolve against an ancestor with an actual
(not auto) height — .cs_slider_container sits between the real-height
.cs_hero_slider (absolute + inset:0) and the slick-initialized
.cs_hero_slider_wrapper below, so it needs height:100% too or the
whole chain (.slick-list/.slick-track/.cs_hero_slide) collapses to its
content's natural (near-zero) height instead of filling the hero. */
.cs_hero_slider .cs_slider_container,
.cs_hero_slider .slick-list,
.cs_hero_slider .slick-track,
.cs_hero_slider .cs_hero_slider_wrapper {
height: 100%;
}
/* Slick wraps each slide in its OWN unstyled
(slick-slide > div >
.cs_hero_slide) when the slide isn't already a single element it can
use directly — that anonymous div is the last unbroken link in the
height:100% chain above; without this, .cs_hero_slide still collapses
to 1px despite every ancestor above resolving correctly. */
.cs_hero_slider .slick-slide > div {
height: 100%;
}
.cs_hero_slide {
height: 100%;
min-height: 1px;
background-size: cover;
background-position: center;
}
/* Respect prefers-reduced-motion for the background video — JS
(heroVideoReducedMotion()) also pauses/de-autoplays it; this CSS layer
is a no-JS-required fallback so the poster/background image behind the
video stays the only thing visible. */
@media (prefers-reduced-motion: reduce) {
.cs_hero_video_bg {
display: none;
}
}
/* Latest Listings Rent/Buy tab panels (own class, not the vendor's generic
.cs_tabs, to avoid any collision with a later page's own tab styling) */
.cs_latest_tab_panel {
display: none;
}
.cs_latest_tab_panel.active {
display: block;
}
/* Pagination arrow disabled state (first/last page) */
.cs_pagination_arrow.disabled {
opacity: 0.35;
pointer-events: none;
}
/* Mobile filter drawer trigger + off-canvas panel (property listing) */
.cs_filters_toggle_btn {
width: 100%;
}
@media (min-width: 992px) {
.cs_mobile_filters_modal {
display: none;
}
}
/* Empty state (no properties/areas/posts to show yet) */
.cs_empty_state {
padding: 60px 16px;
text-align: center;
opacity: 0.7;
}
/* Property detail gallery mosaic (replaces the old one-by-one Slick
gallery — see resources/views/public/properties/show.blade.php and
rimal-custom.js's propertyGalleryInit()). A CSS Grid main+3-stack on
desktop, degrading to a stacked mosaic on mobile. Uses logical
(inset-inline-*) properties for the gallery button so it mirrors
automatically under dir="rtl" with no separate rimal-rtl.css rule;
the grid's own left/right mirroring lives in rimal-rtl.css since
grid-template-areas isn't a logical property. */
.cs_property_gallery {
position: relative;
}
.cs_property_gallery_grid {
display: grid;
grid-template-areas: "main side";
gap: 12px;
border-radius: 20px;
overflow: hidden;
}
.cs_property_gallery_main {
grid-area: main;
position: relative;
min-width: 0;
min-height: 0;
}
.cs_property_gallery_side {
grid-area: side;
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.cs_property_gallery_item {
display: block;
overflow: hidden;
}
.cs_property_gallery_main .cs_property_gallery_item {
position: absolute;
inset: 0;
}
.cs_property_gallery_side_item {
position: relative;
flex: 1 1 0;
min-height: 0;
}
.cs_property_gallery_item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cs_property_gallery_more_overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.45);
color: #fff;
font-size: 15px;
font-weight: 600;
}
.cs_property_gallery_btn {
position: absolute;
inset-block-end: 16px;
inset-inline-end: 16px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border: none;
border-radius: 10px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 14px;
line-height: 1;
cursor: pointer;
transition: background-color 0.15s ease-in-out;
}
.cs_property_gallery_btn:hover {
background: rgba(0, 0, 0, 0.78);
}
.cs_property_gallery_btn i {
font-size: 15px;
}
/* For Sale / For Rent badge over the main gallery image. The vendor rule
(.cs_property_details .cs_property_banner .cs_property_badge) requires
a .cs_property_banner ancestor that the new mosaic markup doesn't have,
so the badge fell back to its static in-flow position — landing flush
at the image's top-left corner, half-clipped by the gallery grid's own
rounded overflow:hidden corner. This gives it its own explicit inset
(logical, so it mirrors correctly under dir="rtl") and a real pill
shape that always renders fully inside the rounded image. */
.cs_property_gallery_main .cs_property_badge {
top: 16px;
inset-inline-start: 16px;
z-index: 2;
padding: 6px 16px;
line-height: 1.4;
}
/* Desktop: large main image + 3-stack side column */
@media (min-width: 992px) {
.cs_property_gallery_grid {
height: clamp(460px, 42vw, 680px);
grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr);
}
.cs_property_gallery_grid.cs_gallery_count_1 {
grid-template-columns: 1fr;
grid-template-areas: "main";
}
}
/* Tablet: reduced version of the same desktop mosaic */
@media (min-width: 768px) and (max-width: 991.98px) {
.cs_property_gallery_grid {
height: clamp(360px, 46vw, 480px);
grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr);
}
.cs_property_gallery_grid.cs_gallery_count_1 {
grid-template-columns: 1fr;
grid-template-areas: "main";
}
}
/* Mobile: main image on top, a compact row of side thumbnails below —
never the desktop 75/25 grid squeezed into a narrow viewport. */
@media (max-width: 767.98px) {
.cs_property_gallery_grid {
grid-template-columns: 1fr;
grid-template-areas:
"main"
"side";
border-radius: 16px;
gap: 8px;
}
.cs_property_gallery_main {
height: clamp(260px, 62vw, 340px);
}
.cs_property_gallery_main .cs_property_gallery_item {
height: 100%;
}
.cs_property_gallery_side {
flex-direction: row;
height: 92px;
}
.cs_property_gallery_btn {
inset-block-end: 12px;
inset-inline-end: 12px;
padding: 8px 14px;
font-size: 13px;
}
.cs_property_gallery_more_overlay {
font-size: 13px;
}
}
/* Static Rimal contact card (property detail sidebar) — replaces the old
per-property broker/agent card. Deliberately avoids .cs_gray_color for
the subtitle: that utility is `color: #E2E2E2` in the light theme
(meant for text on the template's DARK sections, confirmed via
style.css's own variable definitions — see rimal-rtl.css's header
note), so on this white/gray3 card it would be nearly invisible. */
.cs_rimal_contact_avatar {
width: 88px;
height: 88px;
margin: 0 auto 14px;
border-radius: 50%;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.cs_rimal_contact_avatar img {
width: 68%;
height: 68%;
object-fit: contain;
}
.cs_rimal_contact_name {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.cs_rimal_verified_badge {
color: #1d9bf0;
font-size: 15px;
}
.cs_rimal_contact_subtitle {
color: rgba(29, 29, 29, 0.6);
}
.cs_rimal_contact_phone {
font-size: 16px;
}
/* Full-width Google Maps embed, shown on every public page above the
footer (see public/partials/map.blade.php). Edge-to-edge — deliberately
outside any .container, so it spans the full viewport width regardless
of the page's own content width. */
.cs_map_section {
width: 100%;
line-height: 0;
}
.cs_map_iframe {
display: block;
width: 100%;
height: 320px;
border: 0;
}
@media (min-width: 768px) {
.cs_map_iframe {
height: 420px;
}
}
@media (min-width: 1200px) {
.cs_map_iframe {
height: 480px;
}
}
/* Footer restructure (public/partials/footer.blade.php): 4-column grid
(Brand/Explore/Properties/Company) + a separate contacts row below,
bigger brand logo, and the updated copyright line's heart icon.
Plain CSS Grid/Flexbox — both mirror correctly under dir="rtl"
automatically (inline-axis direction follows the document), so no
separate rimal-rtl.css rules are needed for the layout itself. */
.cs_footer_grid {
display: grid;
grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
gap: 40px;
}
@media (max-width: 991.98px) {
.cs_footer_grid {
grid-template-columns: 1fr 1fr;
gap: 32px 24px;
}
}
@media (max-width: 575.98px) {
.cs_footer_grid {
grid-template-columns: 1fr;
gap: 32px;
}
}
/* Bigger, more prominent brand logo — was a flat 48px max-height inline
style. Scales up further on larger screens rather than one fixed size
everywhere, and the vendor's own 77px cs_logo margin-bottom (sized for
the old tiny logo) is trimmed to stay proportional now that the logo
itself carries more visual weight. */
.cs_footer_logo {
max-height: 72px;
width: auto;
}
@media (min-width: 992px) {
.cs_footer_logo {
max-height: 96px;
}
}
.cs_footer_grid .cs_logo {
margin-bottom: 28px;
}
/* Contacts row — a full-width row below the 4-column grid, horizontally
laid out on desktop (space-between so 1-3 items read as a deliberate
row rather than clumped together) and stacked on small screens. Reuses
the vendor's .cs_contact_list item styling (icon chip + text, li
display:flex) — only the LIST's own layout changes here, from a
vertical stack to a wrapping row. */
.cs_footer_contacts_row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 20px 40px;
margin-top: 56px;
padding-top: 36px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.cs_footer_contacts_row li {
margin-bottom: 0 !important;
}
.cs_footer_contacts_row .cs_contact_icon {
width: 40px;
height: 40px;
}
@media (max-width: 767.98px) {
.cs_footer_contacts_row {
flex-direction: column;
align-items: flex-start;
gap: 22px;
}
}
/* Copyright line heart icon */
.cs_footer_heart {
color: #ff5a7a;
margin: 0 2px;
}
.cs_footer_snapzone_link {
text-decoration: underline;
text-underline-offset: 2px;
}
.cs_footer_snapzone_link:hover {
color: var(--white-color);
}
/* The longer copyright line (now crediting Snapzone Media) wraps to two
lines on narrow screens — without this, the wrapped second line can
sit directly under style.css's .cs_scrollup_btn, which is
position:fixed at bottom:50px/right:30px regardless of scroll position
or document flow. This just reserves clear space below the footer's
own content so the button always floats over blank padding. */
@media (max-width: 767.98px) {
.cs_footer {
padding-bottom: 70px;
}
}