body,
h1,
h2,
h3,
h4,
h5,
h6,
#map-leaflet {
	font-family: "Poppins", "Prompt" !important;
}

#navigation.style-1 ul li:hover {
	background-color: #08692e;
	color: #08692e;
}

#sponsor-logo {
	position: absolute;
	bottom: 0px;
	z-index: 9;
	display: flex;
}

#sponsor-logo img {
	width: 50px;
	height: auto;
	display: block;
}

.listing-window-image:before {
	background-color: #08692e;
}

.map-popup-content,
.leaflet-popup-content {
	height: auto;
}

.leaflet-popup-content-wrapper {
	border-radius: 10px;
}

.leaflet-popup-content {
	background-color: unset;
}

.listing-window-image {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.leaflet-container a.leaflet-popup-close-button {
	top: 3px;
	right: 1px;
}

.listing-window-content p {
	white-space: normal;
}

.go-up,
.homepage-4 section.featured.rec-pro {
	background: #08692e !important;
}

.section.popular.portfolio,
.section.popular-places,
.section.blog-section {
	background: #fff6ea !important;
}

#section-grey h2,
#section-grey p,
#section-grey span {
	color: #000000 !important;
}

.slick-dots li.slick-active {
	box-shadow: inset 0 0 0 6px #08692e;
}

.slick-dots li {
	box-shadow: inset 0 0 0 2px #08692e;
}

.slick-dots li:after {
	background-color: #08692e;
}

.first-footer .contactus ul li .fa,
.first-footer .netsocials a .fa-facebook,
.first-footer .netsocials a .fa-twitter,
.first-footer .netsocials a .fa-google-plus,
.first-footer .netsocials a .fa-youtube {
	color: #08692e;
}

.first-footer .widget h3::after,
.first-footer .widget h3::after,
.first-footer .newsletters h3::after {
	background-color: #08692e;
}

#section-counter {
	background: none;
	background-color: #08692e !important;
}

#section-counter p,
#section-counter h3 {
	color: #fff;
}

.counterup .countr .far,
.counterup .countr .fas {
	font-size: 3rem;
	border-radius: 5px;
	margin-right: 1.5rem;
}

.counterup .countr .fa,
.counterup .countr .far,
.counterup .countr .fas {
	color: #ff9acb;
}

.sc-2-detail .sc-jb-title {
	font-weight: 400;
}

.small-category-2-thumb .fas {
	color: #08692e;
	font-size: 3.1rem;
}

.show-num {
	font-size: 24px;
	font-weight: 800;
	color: #08692e;
}

.pt-10 {
	padding-top: 10px;
}

.pb-10 {
	padding-bottom: 10px;
}

.homes-list {
	width: 100%;
}

.popular .homes-content h3:hover,
.popular .homes-content .homes-list li i,
.inner-pages .blog .homes-content.details-2 .fa,
.inner-pages .listing-title-bar .fa-map-marker,
.widget-boxed-header h4 .fa,
.widget-boxed-header h4 .far,
.widget-boxed-header h4 .fa-luggage-cart,
.widget-boxed-header h4 .fa-home,
.agent-contact-form-sidebar .far,
.sidebar-widget .author__contact li span i,
.inner-pages .blog .homes-content.details .fa {
	color: #08692e;
}

.inner-pages span.category-tag {
	color: #08692e;
	border: 1px solid #08692e;
}

.inner-pages .blog .homes-content h5::after,
.inner-pages .blog .blog-info.details h5::after,
.inner-pages .blog .property-location h5::after,
.inner-pages .carousel h5:after,
.inner-pages .blog .team.assigned h5::after,
.inner-pages .similar-property h5:after {
	color: #08692e;
	background-color: #08692e;

}


/* ================popup================== */

#popup {
	font-family: "Poppins", "Prompt" !important;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
}

#popup-content {
	position: relative;
}

#popup-close {
	height: 40px;
	width: 40px;
	text-align: center;
	position: absolute;
	top: 5%;
	right: 0;
	font-size: 28px;
	color: #ffffff;
	cursor: pointer;
	border-radius: 50%;
	background-color: #08692e;

}

@media (max-width: 950px) {
	#popup {
		padding-left: 10px;
		padding-right: 10px;
	}

	#popup-close {
		top: 0;
	}
}


/* ============legend============= */

.info.legend.leaflet-control {
	background: #ffffff !important;
	padding: 10px;
	box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.4);
	border-radius: 5px;
}

.icon-legend {
	width: 24px;
	height: 24px;
	margin-right: 5px;
	vertical-align: middle;
}

/* -------------------------------------- */
/* สไตล์สำหรับไอคอนใน Legend */
/* -------------------------------------- */
.icon-legend {
	width: 24px;
	/* กำหนดขนาด Icon ให้เหมาะสม */
	height: 24px;
	margin-right: 5px;
	vertical-align: middle;
	/* จัดตำแหน่งกึ่งกลาง */
}

/* -------------------------------------- */
/* สไตล์สำหรับมือถือ: เมื่อหน้าจอมีความกว้างสูงสุด 768px */
/* -------------------------------------- */
@media (max-width: 768px) {

	/* -------------------------------------- */
	/* 1. สไตล์สถานะยุบ (Collapsed State) */
	/* -------------------------------------- */
	/* 💡 เพิ่ม .leaflet-control.info เพื่อเพิ่มความจำเพาะเจาะจง */
	.leaflet-control.info.legend-collapse {
		width: 30px;
		height: 30px;
		line-height: 30px;
		padding: 0;
		overflow: hidden !important;
		/* ยืนยันว่าถูกซ่อน */
		cursor: pointer;
		transition: all 0.2s ease-in-out;
		white-space: nowrap;
		z-index: 1000;
	}

	/* 2. ซ่อนเนื้อหาด้านในทั้งหมด */
	/* 💡 ใช้ Selector ที่จำเพาะเจาะจงมากขึ้น */
	.leaflet-control.info.legend-collapse>* {
		display: none !important;
	}

	/* 3. แสดงไอคอน '☰' */
	.leaflet-control.info.legend-collapse:before {
		content: "☰";
		display: block;
		text-align: center;
		font-size: 18px;
		line-height: 30px;
		width: 100%;
	}

	/* -------------------------------------- */
	/* 4. สไตล์เมื่อ Legend ถูก "ขยาย" (Expanded State) */
	/* -------------------------------------- */
	/* 💡 เพิ่มความจำเพาะเจาะจง */
	.leaflet-control.info.legend-collapse.expanded {
		max-width: 200px;
		width: auto;
		height: auto;
		overflow: visible !important;
		/* ยืนยันว่ามองเห็น */
		white-space: normal;
		padding: 18px 8px 6px 8px;
		z-index: 1001;
	}

	/* 5. แสดงเนื้อหาทั้งหมดกลับมาเมื่อขยาย */
	/* 💡 ใช้ Selector ที่จำเพาะเจาะจงมากขึ้น */
	.leaflet-control.info.legend-collapse.expanded>* {
		display: block !important;
		white-space: normal;
		/* **สำคัญ** ยกเลิก white-space: nowrap; */
	}

	/* 6. เปลี่ยนไอคอนเป็น "✕" */
	.leaflet-control.info.legend-collapse.expanded:before {
		content: "✕";
		float: right;
		text-align: right;
		padding-right: 5px;
		line-height: 1;
		font-size: 14px;
		margin: 0 0 5px 5px;
		position: absolute;
		top: 7px;
		right: 5px
	}

	/* 💡 การจัดเรียงรายการ (ถ้าข้อความยาวเกิน 200px) */
	.leaflet-control.info.legend-collapse.expanded img.icon-legend {
		float: left;
		margin-right: 8px;
	}

	/* 💡 เพิ่มเพื่อให้ข้อความไม่ติดขอบด้านขวา */
	.leaflet-control.info.legend-collapse.expanded span {
		display: block;
		overflow: hidden;
		/* ทำให้ข้อความอยู่ทางขวาของ float icon */
	}

	.leaflet-control.info.legend-collapse.expanded strong {
		/* 💡 การแก้ไข: ลบ Margin/Padding ด้านบนออกหากมี เพื่อให้ชิดขอบมากขึ้น */
		margin-top: 0;
		padding-top: 0;

		/* ... สไตล์อื่น ๆ ... */
		display: block !important;
		font-size: 1em;
	}

}

@media (max-width: 768px) {

	/* -------------------------------------- */
	/* 1. จัดการปุ่มไอคอน Toggle */
	/* -------------------------------------- */
	.leaflet-control-layers-toggle {
		background-image: url('../images/icons/quoe.png') !important;
	}


	/* -------------------------------------- */
	/* 2. จัดการกล่อง Control หลักที่ยุบแล้ว */
	/* -------------------------------------- */
	/* เมื่อ Layer Control ถูกสร้างด้วย collapsed: true, มันจะใช้คลาสนี้ */
	.leaflet-control-layers-collapsed {
		/* ให้แน่ใจว่าพื้นหลังโปร่งใสและไม่มีเงาที่ไม่ต้องการ */
		background-color: transparent !important;
		box-shadow: none !important;
	}

	/* 3. ลบโค้ด CSS เก่าที่เคยใช้บังคับยุบตัว (ถ้ามี) */
	/* หากคุณเคยใช้ .leaflet-control-layers:not(.leaflet-control-layers-expanded) ให้ลบทิ้ง 
       เพราะตอนนี้ JS จัดการการยุบตัวแล้ว */
}

.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url('../images/icons/quoe.png') !important;
	background-size: 26px 26px;
}