/* ==========================================================================
   Adar Hotels — Custom CSS
   --------------------------------------------------------------------------
   קובץ ה-CSS המרכזי של האתר. כל התאמה ידנית נכנסת לכאן,
   ולא ל-Custom CSS של ווידג'ט בודד באלמנטור.

   תוכן עניינים
   ------------
   0.  משתנים גלובליים
   1.  עמוד הבית — קרוסלת "דילים ומבצעים" (מובייל בלבד)
   ========================================================================== */


/* ==========================================================================
   0. משתנים גלובליים
   ========================================================================== */

:root {
	/* מרווח הצד של התוכן במובייל — תואם ל-padding_mobile של הקונטיינרים */
	--adar-mobile-gutter: 20px;
}


/* ==========================================================================
   1. עמוד הבית — קרוסלת "דילים ומבצעים" (מובייל בלבד)
   --------------------------------------------------------------------------
   ווידג'ט: jet-listing-grid — #posts-carousel (elementor element 7eb0d1e)

   הכל עטוף ב-max-width: 767px. דסקטופ וטאבלט לא מושפעים.

   גיליון בואר השיטה: הערכים ל-slidesPerView שעוברים דרך ה-PHP filter (jet-engine/listing/grid/slider-options)
   לא השפיעו בפועל על הרוחב המצויר. לכן עברנו להשבית את מנגנון המיקום של
   Swiper (transform על ה-swiper-wrapper) ולתת לדפדפן לגלול בעצמו (native scroll + scroll-snap).
   כך אין פער בין הרוחב שקובע ב-CSS לבין המיקום שמחשב Swiper.

   קובץ PHP נלווה: wp-content/novamira-sandbox/adar-deals-carousel-mobile.php (או functions.php)
   ========================================================================== */

@media (max-width: 767px) {

	#posts-carousel {
		/* כמה הקרוסלה גולשת שמאלה מעבר לגבול התוכן.
		   ברירת המחדל מביאה אותה עד קצה המסך ממש. */
		--adar-deals-bleed: var(--adar-mobile-gutter);
	}

	/* --- 1.1 גלישה שמאלה --- */
	#posts-carousel {
		width: calc(100% + var(--adar-deals-bleed));
		max-width: calc(100% + var(--adar-deals-bleed)); /* דורס את .e-con>.elementor-widget{max-width:100%} של Elementor בסיס */
		margin-left: calc(var(--adar-deals-bleed) * -1);
	}

	/* חיתוך בצדדים של הקרוסלה — מונע סקרול אופקי כשהתוכן גולש מהמסך */
	#posts-carousel .jet-listing-grid__slider.swiper {
		overflow: hidden;
		touch-action: pan-x !important; /* הכלל מקורי על ה-.swiper עצמו (כיתה swiper-pointer-events) — דורסים גם כאן */
	}

	/* --- 1.2 רוחב השקופיות + מעבר לגלילה טבעית (native scroll) --- */
	/* מנטרלים את ה-transform של-Swiper (עם !important, דורס גם inline style) ונותנים לדפדפן
	   לגלול בעצמו. כך הרוחב שאנחנו קובעים ב-CSS הוא גם המיקום בפועל, בלי קונפליקט
	   עם חישוב ה-JS של Swiper. חצים ונקודות מוסתרים בלאו כך שזה לא משנה לבעיה. */
	#posts-carousel .swiper-wrapper {
		transform: none !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-x !important; /* Swiper קובע pan-y כברירת מחדל (כדי שה-JS שלו יטפל בגלילה) — זה חוסם את המגע האופקי של הדפדפן בעצמו */

		/* מסתיר את סרגל הגלילה הטבעי (מופיע כשיש עכבר לנייטיב scroll רגילה במקום JS) */
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* ישן Edge */
	}
	#posts-carousel .swiper-wrapper::-webkit-scrollbar {
		display: none; /* Chrome / Safari */
	}

	#posts-carousel .jet-listing-grid__item {
		scroll-snap-align: start;
		width: 86% !important;
		flex: 0 0 86% !important;
	}

	/* --- 1.3 הסתרת חצים ונקודות --- */
	/* ה-switcher של החצים/נקודות ב-JetEngine אינו רספונסיבי, לכן ההסתרה כאן.
	   ה-!important נדרש: ה-Custom CSS של הווידג'ט מגדיר display: flex !important */
	#posts-carousel .jet-listing-grid__slider-icon.swiper-arrow,
	#posts-carousel .jet-engine-swiper-pagination-wrapper {
		display: none !important;
	}

}