/*
Theme Name:  Listeo ChildTheme
Template:    listeo
Version:     1.1.9
*/

/* ============================================
   WHATSAPP BUTTON - POSITION ADJUSTMENT
   ============================================ */
.listing-item { 
    position: relative !important; 
}

/* Some category/list layouts use the "listing-item-container" + "listing-item-image"
   structure (instead of the `*-nl` new-card layout). If the WhatsApp circle is
   positioned outside the image area, it can appear only after hover (because the
   card moves up). Make sure those containers don't clip it. */
.listing-item-container {
    position: relative !important;
    overflow: visible !important;
    z-index: 1;
}

.listing-item-image,
.listing-item-container .listing-item-image {
    overflow: visible !important;
}

/* The new cards layout uses these classes; make them positioning parents
   so the absolute WhatsApp wrapper doesn't end up relative to some other
   ancestor (which can make it appear/disappear depending on hover transforms). */
.listing-card-container-nl {
    position: relative !important;
    z-index: 1;
    /* Create a consistent stacking context so the WhatsApp floating button
       doesn't only appear when hover triggers the theme's transform. */
    transform: translateY(0);
    overflow: visible !important;
}

.listing-card-nl {
    position: relative !important;
    overflow: visible !important;
}

.listing-whatsapp-wrapper {
    position: absolute !important;
    /* Clear the price/footer row; label now sits below the icon */
    bottom: 85px !important;
    right: 15px !important;
    z-index: 9999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
}

/* Keep title/location text from running under the WhatsApp column (LTR) */
.listing-card-container-nl .details-main-col-nl,
.listing-item-container .listing-item-content {
    padding-top: 25px;
    padding-right: 58px;
    padding-bottom: 25px;
    padding-left: 10px;
}

/* Arabic only (TranslatePress): move WhatsApp button to the LEFT on listing cards.
   We avoid relying on `body.rtl` so this triggers only for Arabic language pages. */
body.trp-language-ar .listing-card-container-nl .listing-whatsapp-wrapper,
body.trp-language-ar .listing-item-container .listing-whatsapp-wrapper,
body.trp-language-ar .listing-item .listing-whatsapp-wrapper,
html[lang="ar"] body .listing-card-container-nl .listing-whatsapp-wrapper,
html[lang="ar"] body .listing-item-container .listing-whatsapp-wrapper,
html[lang="ar"] body .listing-item .listing-whatsapp-wrapper {
    right: auto !important;
    left: 15px !important;
}

body.trp-language-ar .listing-card-container-nl .details-main-col-nl,
body.trp-language-ar .listing-item-container .listing-item-content,
body.translatepress-ar .listing-card-container-nl .details-main-col-nl,
body.translatepress-ar .listing-item-container .listing-item-content,
html[lang="ar"] body .listing-card-container-nl .details-main-col-nl,
html[lang="ar"] body .listing-item-container .listing-item-content {
    /* RTL text sits on the right; 10px edge spacing.
       Left padding reserves space for the WhatsApp button. */
    padding-top: 25px;
    padding-right: 10px;
    padding-bottom: 25px;
    padding-left: 58px;
}

/*
 * Arabic listing cards inside Slick carousels inherit direction:ltr from
 * .slick-slider (required for slide mechanics). Restore RTL on card content
 * so titles, badges, and locations align to the right.
 */
body.trp-language-ar .slick-slider .listing-card-container-nl,
body.trp-language-ar .simple-slick-carousel .listing-card-container-nl,
body.translatepress-ar .slick-slider .listing-card-container-nl,
body.translatepress-ar .simple-slick-carousel .listing-card-container-nl,
html[lang="ar"] body .slick-slider .listing-card-container-nl,
html[lang="ar"] body .simple-slick-carousel .listing-card-container-nl {
    direction: rtl;
    text-align: right;
}

body.trp-language-ar .slick-slider .listing-item-container .listing-item-content,
body.translatepress-ar .slick-slider .listing-item-container .listing-item-content,
html[lang="ar"] body .slick-slider .listing-item-container .listing-item-content {
    direction: rtl;
    text-align: right;
}

/* Keep in-card photo sliders LTR (matches Listeo rtl.css). */
body.trp-language-ar .listing-card-container-nl .slider-wrapper-nl,
body.translatepress-ar .listing-card-container-nl .slider-wrapper-nl,
html[lang="ar"] body .listing-card-container-nl .slider-wrapper-nl {
    direction: ltr;
}

body.trp-language-ar .listing-card-container-nl .listing-location-nl::before,
body.translatepress-ar .listing-card-container-nl .listing-location-nl::before,
html[lang="ar"] body .listing-card-container-nl .listing-location-nl::before {
    margin-right: 0;
    margin-left: 6px;
}

.listing-whatsapp-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 42px; /* Slightly smaller for a cleaner fit on cards */
    height: 42px;
    padding: 0 !important;
    background: #25D366 !important;
    color: #fff !important;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    opacity: 1 !important;
    visibility: visible !important;
}

/* Bigger WhatsApp icon inside the circle */
.listing-whatsapp-button i {
    font-size: 28px !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
}

/* Always-visible "WhatsApp" label (centered below the icon) */
.listing-whatsapp-button {
    position: relative !important;
    overflow: visible !important;
}

.listing-whatsapp-button::after {
    content: "WhatsApp";
    position: absolute;
    left: 50%;
    top: calc(100% + 5px);
    transform: translateX(-50%);
    background: transparent !important;
    color: #25D366 !important;
    border: 2px solid #25D366 !important;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    white-space: nowrap;
    line-height: 1;
    pointer-events: none;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.listing-whatsapp-button::before {
    /* Remove tail (it was the "weird square") */
    content: none !important;
}

/* Ensure price area remains readable on mobile */
@media (max-width: 480px) {
    .listing-whatsapp-wrapper {
        bottom: 80px !important;
        right: 10px !important;
    }

    body.trp-language-ar .listing-card-container-nl .listing-whatsapp-wrapper,
    body.trp-language-ar .listing-item-container .listing-whatsapp-wrapper,
    body.trp-language-ar .listing-item .listing-whatsapp-wrapper,
    html[lang="ar"] body .listing-card-container-nl .listing-whatsapp-wrapper,
    html[lang="ar"] body .listing-item-container .listing-whatsapp-wrapper,
    html[lang="ar"] body .listing-item .listing-whatsapp-wrapper {
        right: auto !important;
        left: 10px !important;
    }
}

/* Safety overrides (theme may hide/show contact buttons on hover).
   Keep WhatsApp visible permanently without removing the icon. */
.listing-links li a.listing-links-whatsapp,
.widget_listing_owner a.send-message-to-owner.button.button.whatsapp-profile,
.listing-details-sidebar li a.whatsapp-profile {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/*
 * Listeo rtl.css mirrors header floats and pins .mmenu-trigger to the left.
 * Force the same header geometry as English (LTR) when the site is in Arabic.
 * Language switcher: use TranslatePress floater only (no duplicate markup here).
 */
body.rtl #header-container .left-side {
	float: left;
}
body.rtl #header-container .right-side {
	float: right;
}
body.rtl #header-container #logo,
body.rtl #header-container #navigation {
	float: left;
}
body.rtl #header-container .mmenu-trigger {
	left: auto;
	right: auto;
	position: relative;
	float: right;
}
body.rtl #header-container #navigation > ul {
	float: left;
}
body.rtl #header-container #navigation > ul > li {
	float: left;
}

/* ============================================
   HEADER "ADD LISTING" BUTTON (desktop + mobile)
   ============================================ */
.foyer-header-center-cta{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	display:flex;
	align-items:center;
	justify-content:center;
	z-index: 2;
	pointer-events:none; /* let header interactions pass through */
}
.foyer-header-center-cta .foyer-add-property-btn{
	pointer-events:auto; /* but keep the button clickable */
}

.foyer-add-property-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	height:42px;
	padding:0 14px;
	border-radius:999px;
	background:#f91942;
	color:#fff !important;
	font-weight:700;
	font-size:14px;
	line-height:1;
	text-decoration:none !important;
	white-space:nowrap;
	box-shadow:0 8px 18px rgba(249,25,66,.22);
}
.foyer-add-property-btn:hover{
	filter:brightness(.95);
	color:#fff !important;
}

/* Default: desktop version is shown, mobile version hidden */
.foyer-add-property-btn--mobile{ display:none; }

/* Fullwidth header has icon cluster; keep button compact there */
#header-container.fullwidth .mobile-nav-icons{
	display:flex;
	align-items:center;
	gap:10px;
}

/* Mobile: show the compact button in header icon row */
@media (max-width: 1024px){
	.foyer-header-center-cta{
		/* On small screens we rely on the mobile icon-row button */
		display:none;
	}

	/* Normal header: keep the desktop button visible but smaller */
	.foyer-add-property-btn--desktop{
		height:36px;
		padding:0 12px;
		font-size:13px;
		box-shadow:none;
	}

	/* Fullwidth header: prefer the dedicated mobile button placed in the icon row */
	#header-container.fullwidth .foyer-add-property-btn--desktop{ display:none; }
	#header-container.fullwidth .foyer-add-property-btn--mobile{
		display:inline-flex;
		height:36px;
		padding:0 12px;
		font-size:13px;
		box-shadow:none;
	}
}

/* ============================================
   MOBILE MENU SOCIAL ICONS (tap targets + spacing)
   ============================================ */
.foyer-side-social-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.foyer-side-social-icons__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	box-sizing: border-box;
}
.foyer-side-social-icons__link i {
	line-height: 1;
}

/* ============================================
   MOBILE SCROLL SAFETY OVERRIDE
   ============================================ */
@media (max-width: 1023px) {
	body.mobile-nav-open {
		/* Parent theme can leave this class stuck after cached loads */
		overflow: visible !important;
		overflow-y: auto !important;
	}
}

/* ============================================
   CATEGORY ICON BLEED FIX (desktop + mobile)
   ============================================ */
.category-small-box-alt,
.category-small-box {
	/* Clip oversized SVG/icon art to card bounds */
	overflow: hidden !important;
}

.category-small-box-alt .listeo-svg-icon-box-grid svg,
.category-small-box .listeo-svg-icon-box-grid svg {
	max-width: 100%;
}