/* ---- from legacy property-detail.php, lines 145-644 ---- */
/* ============================================================
   PROPERTY DETAIL PAGE — PROFESSIONAL REDESIGN
   ============================================================ */

section.gray-simple { background: #f4f6fb !important; }

/* ===== UNIFIED HERO CARD — single card: title/badges, location/price/ID,
   metric pills. Replaces the old thumbnail+content flex-row layout. ===== */
.cp-hero-card {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 16px !important;
	padding: 24px !important;
	box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
}
.cp-hero-top-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.cp-hero-title {
	font-size: 22px !important;
	font-weight: 800 !important;
	color: #0f172a !important;
	margin: 0 !important;
	line-height: 1.35 !important;
	flex: 1 1 320px;
}
.cp-hero-badges-col { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
@media (max-width: 767px) { .cp-hero-badges-col { align-items: flex-start; width: 100%; } }

.cp-badge-row {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 8px !important;
	margin: 0 !important;
}
@media (max-width: 767px) { .cp-badge-row { justify-content: flex-start !important; } }
.prt-types.sale {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	position: static !important;
	width: auto !important;
	background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 20px !important;
	padding: 7px 15px !important;
	font-size: 11.5px !important;
	font-weight: 800 !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
	margin: 0 !important;
	box-shadow: 0 3px 10px rgba(0,0,0,0.16) !important;
	line-height: 1.3 !important;
	vertical-align: middle !important;
}
/* All four badges (For Sale, Verified, New Listing, Sold/Available) share
   one solid-gradient, white-text pill family. */
span.cp-status-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 11.5px !important;
	font-weight: 800 !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
	color: #fff !important;
	border: none !important;
	padding: 7px 15px !important;
	border-radius: 20px !important;
	margin: 0 !important;
	vertical-align: middle !important;
	box-shadow: 0 3px 10px rgba(0,0,0,0.16);
}
.cp-badge-verified { background: linear-gradient(135deg, #197003, #197003) !important; }
.cp-badge-new { background: linear-gradient(135deg, #f59e0b, #d97706) !important; }
.cp-badge-sold { background: linear-gradient(135deg, #ef4444, #b91c1c) !important; }
.cp-badge-available { background: linear-gradient(135deg, #197003, #197003) !important; }

/* ---- "Listed in <category>" chip ---- */
.cp-category-chip {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 14px !important;
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 10px !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: #475569 !important;
}
.cp-category-chip i { color: #197003 !important; font-size: 13px !important; }
.cp-category-chip strong { color: #ea580c !important; font-weight: 800 !important; }

/* ---- Middle row: location / price / ID ---- */
.cp-hero-mid-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin: 18px 0;
	padding: 16px 0;
	border-top: 1px solid #f1f5f9;
	border-bottom: 1px solid #f1f5f9;
}
.cp-hero-loc {
	font-size: 14.5px !important;
	font-weight: 600 !important;
	color: #475569 !important;
}
.cp-hero-loc i { color: #197003 !important; margin-right: 5px; }
.cp-hero-price-block { text-align: right; }
@media (max-width: 767px) { .cp-hero-price-block { text-align: left; } }
.cp-hero-price {
	display: block;
	font-size: 28px !important;
	font-weight: 900 !important;
	color: #197003 !important;
	line-height: 1.3 !important;
}
.cp-hero-id {
	display: block;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	color: #475569 !important;
	margin-top: 2px;
}

/* ---- Bottom row: integrated metric pills ---- */
.cp-hero-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
}
.cp-hero-metric-pill {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #f8fafc;
	border-radius: 12px;
	padding: 12px 16px;
	/* Grid items default to min-width:auto — without this, a pill's icon
	   (38px, flex-shrink:0) + label/value content refused to shrink below
	   its own intrinsic width, forcing the 2-column mobile grid wider than
	   the viewport instead of letting .cp-hm-value's own text-overflow:
	   ellipsis do its job. That's what was pushing the 2nd column's pill
	   (icon and all) off the right edge of the screen. */
	min-width: 0;
}
.cp-hm-icon {
	width: 38px; height: 38px;
	border-radius: 10px;
	background: rgba(25, 112, 3,0.1);
	color: #197003;
	display: flex; align-items: center; justify-content: center;
	font-size: 15px;
	flex-shrink: 0;
}
.cp-hm-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.cp-hm-label { font-size: 11px !important; color: #475569 !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.3px; }
.cp-hm-value { font-size: 14.5px !important; color: #0f172a !important; font-weight: 800 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 767px) {
	.cp-hero-card { padding: 18px !important; }
	/* Single column, not 2 — values like "Commercial Land / Plot" or a
	   full district name need more than half a narrow phone's width to
	   read without truncating; the min-width:0 fix above stops the
	   overflow either way, but full-width rows also mean nothing gets
	   ellipsis-cut in the first place. */
	.cp-hero-metrics { grid-template-columns: 1fr; }
}

/* ===== SECTION BLOCKS (style-2) — clean white card, dark bold heading ===== */
.property_block_wrap.style-2 {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 16px !important;
	box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
	margin-bottom: 26px !important;
	overflow: hidden !important;
}
.property_block_wrap.style-2 .property_block_wrap_header {
	position: relative !important;
	background: #ffffff !important;
	padding: 0 !important;
	border-bottom: 1px solid #f1f5f9 !important;
	overflow: hidden !important;
}
.property_block_wrap_header a {
	text-decoration: none !important;
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	padding: 18px 24px !important;
	position: relative;
	z-index: 2;
}
.property_block_wrap.style-2 .property_block_wrap_header h4.property_block_title {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	color: #0f172a !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	margin: 0 !important;
	letter-spacing: normal;
	text-transform: none;
}
.property_block_wrap_header h4.property_block_title i {
	flex-shrink: 0;
	width: 38px; height: 38px;
	display: inline-flex !important;
	align-items: center; justify-content: center;
	background: rgba(25, 112, 3,0.1) !important;
	border: none !important;
	border-radius: 10px !important;
	font-size: 15px !important;
	color: #197003 !important;
}
.property_block_wrap_header:hover h4.property_block_title i {
	background: rgba(25, 112, 3,0.18) !important;
	transform: scale(1.06);
	transition: all 0.25s ease;
}
.property_block_wrap.style-2 .property_block_wrap_header h4:after {
	background: #f1f5f9 !important;
	color: #475569 !important;
}

/* Feature list: 2-column grid */
ul.deatil_features {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
ul.deatil_features li {
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	padding: 12px 20px !important;
	border-bottom: 1px solid #f0f3f7 !important;
	font-size: 13.5px !important;
	color: #1e293b !important;
	font-weight: 500 !important;
	display: flex !important;
	gap: 8px !important;
	align-items: baseline;
}
ul.deatil_features li:nth-child(odd) { border-right: 1px solid #f0f3f7 !important; }
ul.deatil_features li strong {
	color: #475569 !important;
	font-weight: 700 !important;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Amenities: icon card grid */
ul.avl-features {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	list-style: none !important;
	padding: 18px !important;
	margin: 0 !important;
	gap: 12px !important;
}
ul.avl-features.third li {
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 !important;
	background: #F4F1EA !important;
	border: 1.5px solid #F4F1EA !important;
	border-radius: 12px !important;
	padding: 12px 14px !important;
	font-size: 13px !important;
	color: #1a2c4e !important;
	font-weight: 600 !important;
	transition: all 0.25s ease !important;
}
ul.avl-features.third li:hover {
	background: #F4F1EA !important;
	border-color: #197003 !important;
	transform: translateY(-2px);
	box-shadow:none;
}
ul.avl-features.third li::before {
	content: '\f00c';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	flex-shrink: 0;
	width: 26px; height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: #197003;
	background: rgba(25, 112, 3,0.12);
	border-radius: 50%;
}
@media (max-width: 767px) {
	ul.avl-features { grid-template-columns: repeat(1, 1fr) !important; }
}

/* Generic Amenities & Features items — each with its own icon, not the shared checkmark */
ul.avl-features.third li.cp-amenity-item::before { content: none !important; }
ul.avl-features.third li.cp-amenity-item .cp-amenity-ic {
	flex-shrink: 0;
	width: 26px; height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: #197003;
	background: rgba(25, 112, 3,0.12);
	border-radius: 50%;
}

.block-body p { font-size: 14px !important; line-height: 1.85 !important; color: #1e293b !important; font-weight: 500 !important; }

/* ===== SIDEBAR ===== */
@media (min-width: 992px) {
	.details-sidebar {
		position: sticky !important;
		top: 100px !important;
		align-self: flex-start !important;
	}
}
/* Like/Share/Print/Save row: base theme assumes 2 buttons (flex:0 0 50%), we render 3 */
.like_share_list {
	flex-wrap: wrap !important;
}
.like_share_list li {
	flex: 0 0 33.333% !important;
	width: 33.333% !important;
}
.like_share_list li a {
	padding: 10px 8px !important;
	font-size: 12.5px !important;
	white-space: nowrap;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 5px !important;
}
.like_share_list li a i { margin-right: 0 !important; }
@media (max-width: 420px) {
	.like_share_list li a { font-size: 11.5px !important; padding: 9px 4px !important; }
}
.sides-widget {
	background: #fff !important;
	border-radius: 14px !important;
	box-shadow: 0 6px 28px rgba(0,0,0,0.10) !important;
	border: none !important;
	overflow: hidden !important;
	margin-bottom: 24px !important;
}
.sides-widget-header {
	background: linear-gradient(135deg, #197003 0%, #135402 100%) !important;
	padding: 20px !important;
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
}
.sides-widget-header .agent-photo img {
	width: 58px !important; height: 58px !important;
	border-radius: 50% !important;
	border: 3px solid rgba(255,255,255,0.4) !important;
	object-fit: cover;
}
.sides-widget-header .sides-widget-details h4 a {
	color: #fff !important; font-size: 15px !important; font-weight: 700 !important; text-decoration: none !important;
}
.sides-widget-header .sides-widget-details span {
	color: rgba(255,255,255,0.85) !important; font-size: 13px !important;
	display: flex !important; align-items: center !important; gap: 5px !important; margin-top: 5px !important;
}
.sides-widget-body.simple-form { padding: 22px !important; }
.sides-widget-body .form-group { margin-bottom: 14px !important; }
.sides-widget-body .form-group label {
	font-size: 11px !important; font-weight: 700 !important; color: #1a2c4e !important;
	text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px !important; display: block;
}
.sides-widget-body .form-control {
	border-radius: 9px !important; border: 1.5px solid #dde2ec !important;
	font-size: 13px !important; padding: 10px 14px !important;
	background: #f9fafb !important; transition: all 0.2s ease !important;
}
.sides-widget-body .form-control:focus {
	border-color: #197003 !important;
	box-shadow:none !important;
	background: #fff !important; outline: none !important;
}
.sides-widget-body input[type=submit] {
	background: #197003 !important;
	color: #fff !important; border: none !important; border-radius: 10px !important;
	font-weight: 700 !important; font-size: 14px !important;
	padding: 13px 20px !important; width: 100% !important; display: block !important;
	box-shadow:none !important;
	transition: all 0.22s ease !important; cursor: pointer; margin-top: 6px;
}
.sides-widget-body input[type=submit]:hover {
	background: linear-gradient(135deg, #135402, #135402) !important;
	box-shadow:none !important;
	transform: translateY(-1px);
}
.like_share_wrap {
	background: #fff !important; border-radius: 12px !important;
	padding: 10px 18px !important; margin-bottom: 18px !important;
	box-shadow: 0 2px 14px rgba(0,0,0,0.08) !important; border: none !important;
}
/* Share / Print / Save — was a mint-outline pair + a mismatched peach-outline
   third button (theme default). Each action now gets its own solid gradient
   with white text/icon, matching the "Save" pink already used site-wide for
   wishlist buttons elsewhere (bookmark icons, card actions, etc). */
/* "ul." prefix matches (and beats) the base theme's `ul.like_share_list li a`
   selector specificity — without it, the theme's !important text-color
   (green/orange) was still winning over white despite our own !important. */
ul.like_share_list li a {
	background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 10px !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	letter-spacing: 0.2px !important;
	box-shadow: 0 3px 10px rgba(37,99,235,0.28) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
ul.like_share_list li a i { color: #fff !important; }
ul.like_share_list li a:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 16px rgba(37,99,235,0.4) !important;
	color: #fff !important;
	text-decoration: none !important;
}
ul.like_share_list li:nth-child(2) a {
	background: linear-gradient(135deg, #64748b, #475569) !important;
	box-shadow: 0 3px 10px rgba(71,85,105,0.28) !important;
}
ul.like_share_list li:nth-child(2) a:hover {
	box-shadow: 0 6px 16px rgba(71,85,105,0.4) !important;
}
ul.like_share_list li:last-child a {
	background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 3px 10px rgba(244,63,94,0.28) !important;
}
ul.like_share_list li:last-child a:hover {
	box-shadow: 0 6px 16px rgba(244,63,94,0.4) !important;
}
.sidebar-widgets {
	background: #fff; border-radius: 14px;
	box-shadow: 0 4px 22px rgba(0,0,0,0.09); padding: 20px 20px 8px;
}
.sidebar-widgets h4 {
	font-size: 15px; font-weight: 800; color: #1a2c4e;
	margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2.5px solid #197003;
}
.sides_list_property {
	display: flex !important; gap: 12px !important;
	padding: 12px 0 !important; border-bottom: 1px solid #f0f3f7 !important; align-items: center !important;
}
.sides_list_property:last-child { border-bottom: none !important; padding-bottom: 4px !important; }
.sides_list_property_thumb img {
	width: 80px !important; height: 70px !important;
	object-fit: cover !important; border-radius: 10px !important; display: block;
}
.sides_list_property_detail h4 {
	font-size: 13px !important; font-weight: 700 !important;
	line-height: 1.45 !important; margin: 0 0 4px !important;
}
.sides_list_property_detail h4 a { color: #1a2c4e !important; text-decoration: none !important; }
.sides_list_property_detail h4 a:hover { color: #197003 !important; }
.sides_list_property_detail span { font-size: 12px !important; color: #888 !important; }
.property_types_vlix.sale {
	display: inline-block; font-size: 11px; font-weight: 700;
	background: #fff0f0; color: #E81C28; border: 1px solid #f5c6c6;
	border-radius: 20px; padding: 2px 10px; margin-top: 5px;
}

@media (max-width: 991px) {
	ul.deatil_features { grid-template-columns: 1fr !important; }
	ul.deatil_features li:nth-child(odd) { border-right: none !important; }
}

/* ---- from legacy dslider.php, lines 7-88 ---- */
/* ── Carousel Container ──────────────────────────────────────── */
.cp-carousel{position:relative;width:100%;max-width:1400px !important;margin:14px auto;border-radius:18px;overflow:hidden;background:#0e1a2b;box-shadow:0 10px 40px rgba(0,0,0,.22)}
.cp-carousel-track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1);will-change:transform}
.cp-carousel-slide{min-width:100%;position:relative}
.cp-carousel-slide img{display:block;width:100%;height:280px;object-fit:contain;background:#0e1a2b;object-position:center;cursor:zoom-in;-webkit-user-drag:none;image-rendering:auto}

/* ── Zoom hint — subtle magnifier badge, appears on hover to invite clicking ── */
.cp-zoom-hint{position:absolute;bottom:16px;right:16px;z-index:9;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;opacity:0;transform:scale(.85);transition:opacity .2s,transform .2s;pointer-events:none;backdrop-filter:blur(4px)}
.cp-carousel:hover .cp-zoom-hint{opacity:1;transform:scale(1)}
@media(max-width:768px){.cp-zoom-hint{width:34px;height:34px;font-size:14px;bottom:12px;right:12px}}

/* ── Arrow Buttons ───────────────────────────────────────────── */
.cp-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:48px;height:48px;border:none;border-radius:50%;background:rgba(255,255,255,.85);color:#1a2c4e;font-size:22px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,.18);transition:all .2s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);line-height:1}
.cp-arrow:hover{background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.25);transform:translateY(-50%) scale(1.08)}
.cp-arrow-prev{left:16px}
.cp-arrow-next{right:16px}
.cp-arrow svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.5;fill:none}

/* ── Dots ────────────────────────────────────────────────────── */
.cp-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10;padding:6px 14px;border-radius:20px;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cp-dot{width:10px;height:10px;border-radius:50%;border:2px solid rgba(255,255,255,.7);background:transparent;cursor:pointer;transition:all .25s;padding:0}
.cp-dot.active{background:#fff;border-color:#fff;transform:scale(1.15)}
.cp-dot:hover{background:rgba(255,255,255,.5)}

/* ── Image Counter Badge ─────────────────────────────────────── */
.cp-counter{position:absolute;top:16px;left:16px;z-index:10;background:rgba(0,0,0,.5);color:#fff;font-size:13px;font-weight:600;padding:5px 14px;border-radius:20px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);letter-spacing:.3px;pointer-events:none}

/* ── Watermark Text Overlay ──────────────────────────────────── */
.cp-watermark{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);z-index:9;color:rgba(255,255,255,.45);font-size:20px;font-weight:800;font-family:'Montserrat','Poppins','Inter','Segoe UI',sans-serif;letter-spacing:1.5px;text-transform:lowercase;text-shadow:1px 1px 3px rgba(0,0,0,.55),0 0 8px rgba(0,0,0,.35);pointer-events:none;white-space:nowrap;user-select:none;-webkit-user-select:none}

/* ── Lightbox (fullscreen) ───────────────────────────────────── */
.cp-lightbox{display:none;position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.92);align-items:center;justify-content:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cp-lightbox.open{display:flex}
.cp-lightbox img{max-width:92vw;max-height:90vh;object-fit:contain;border-radius:8px;box-shadow:0 0 60px rgba(0,0,0,.5)}
.cp-lightbox-close{position:absolute;top:20px;right:28px;z-index:10;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:28px;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.cp-lightbox-close:hover{background:rgba(255,255,255,.3)}
.cp-lb-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:52px;height:52px;border:none;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.cp-lb-arrow:hover{background:rgba(255,255,255,.25)}
.cp-lb-prev{left:20px}
.cp-lb-next{right:20px}

/* ── Thumbnail Strip ─────────────────────────────────────────── */
.cp-thumb-strip{display:flex;gap:10px;max-width:1400px;margin:10px auto 0;padding:0 4px;overflow-x:auto;scrollbar-width:thin}
.cp-thumb{flex:0 0 90px;width:90px;height:66px;border-radius:10px;overflow:hidden;cursor:pointer;border:2.5px solid transparent;opacity:1;transition:all .2s ease;position:relative}
.cp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cp-thumb:hover{transform:translateY(-2px)}
.cp-thumb.active{border-color:#197003;box-shadow:none;gap:8px}
  .cp-thumb{flex-basis:70px;width:70px;height:52px;border-radius:8px}
}

/* ── Responsive ──────────────────────────────────────────────── */
@media(max-width:1024px){
  .cp-carousel-slide img{height:230px}
  .cp-carousel{border-radius:14px}
  .cp-arrow{width:42px;height:42px;font-size:18px}
  .cp-watermark{font-size:17px}
}
@media(max-width:768px){
  .cp-carousel{margin:10px 4px !important;border-radius:12px}
  .cp-carousel-slide img{height:195px}
  .cp-arrow{width:38px;height:38px}
  .cp-arrow-prev{left:10px}
  .cp-arrow-next{right:10px}
  .cp-dots{bottom:12px;gap:6px;padding:5px 10px}
  .cp-dot{width:8px;height:8px}
  .cp-counter{top:10px;left:10px;font-size:11px;padding:4px 10px}
  .cp-watermark{font-size:14px;bottom:40px}
  .cp-thumb-strip{margin-left:4px;margin-right:4px}
}
@media(max-width:480px){
  .cp-carousel{margin:6px 3px !important;border-radius:10px}
  .cp-carousel-slide img{height:165px}
  .cp-arrow{width:32px;height:32px;font-size:16px}
  .cp-arrow svg{width:14px;height:14px}
  .cp-dots{bottom:10px;padding:4px 8px}
  .cp-dot{width:7px;height:7px}
  .cp-counter{font-size:10px;padding:3px 8px}
  .cp-watermark{font-size:11px;bottom:34px}
  .cp-thumb-strip{margin-left:3px;margin-right:3px}
}

/* ---- from legacy property-detail.php, lines 1340-1381 ---- */
							.cp-desc-text {
								font-size: 15px;
								line-height: 1.85;
								color: #40495e;
								letter-spacing: 0.1px;
								word-wrap: break-word;
								overflow-wrap: break-word;
							}
							.cp-desc-text p { margin-bottom: 14px; }
							.cp-desc-wrap {
								position: relative;
								max-height: 165px;
								overflow: hidden;
								transition: max-height 0.35s ease;
							}
							.cp-desc-wrap.cp-desc-expanded { max-height: 4000px; }
							.cp-desc-fade {
								position: absolute;
								left: 0; right: 0; bottom: 0;
								height: 60px;
								background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 90%);
								pointer-events: none;
								transition: opacity 0.25s ease;
							}
							.cp-desc-wrap.cp-desc-expanded .cp-desc-fade { opacity: 0; }
							.cp-desc-toggle {
								margin-top: 14px;
								background: rgba(25, 112, 3,0.08);
								color: #197003;
								border: none;
								padding: 9px 20px;
								border-radius: 30px;
								font-size: 13px;
								font-weight: 700;
								cursor: pointer;
								transition: all 0.25s ease;
							}
							.cp-desc-toggle:hover { background: #197003; color: #fff; }
							.cp-desc-toggle i { margin-left: 4px; transition: transform 0.25s ease; }
							.cp-desc-toggle.cp-desc-open i { transform: rotate(180deg); }

/* ---- from legacy property-detail.php, lines 1731-1748 ---- */
								.cp-map-container {
									position: relative;
									width: 100%;
									padding-bottom: 45%;
									border-radius: 12px;
									overflow: hidden;
									box-shadow: 0 6px 22px rgba(0,0,0,0.08);
								}
								.cp-map-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
								.cp-map-address {
									margin-top: 14px;
									font-size: 13.5px;
									color: #40495e;
									font-weight: 600;
								}
								.cp-map-address i { color: #197003; margin-right: 6px; }

/* ---- from legacy property-detail.php, lines 2122-2145 ---- */
								.cp-emi-widget{ margin-top:18px; }
								.cp-emi-row{ margin-bottom:16px; }
								.cp-emi-label-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
								.cp-emi-label-row label{ font-size:13px; font-weight:600; color:#475569; margin:0; }
								.cp-emi-value{ font-size:14px; font-weight:800; color:#197003; font-family:'Outfit','Poppins',sans-serif; }
								.cp-emi-slider{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; background:#e2e8f0; outline:none; cursor:pointer; }
								.cp-emi-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:#197003; box-shadow:none; cursor:pointer; border:3px solid #fff; }
								.cp-emi-slider::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:#197003; box-shadow:none; cursor:pointer; border:3px solid #fff; }
								.cp-emi-result{ background:#f7fafc; border-radius:12px; padding:16px; margin-top:6px; }
								.cp-emi-result-main{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
								.cp-emi-result-main span{ font-size:13px; color:#64748b; font-weight:600; }
								.cp-emi-result-main strong{ font-size:24px; font-weight:800; color:#1a2c4e; font-family:'Outfit','Poppins',sans-serif; }
								.cp-emi-bar{ height:8px; border-radius:999px; background:#fbbf24; overflow:hidden; margin-bottom:10px; }
								.cp-emi-bar span{ display:block; height:100%; background:#197003; border-radius:999px 0 0 999px; }
								.cp-emi-breakdown{ display:flex; justify-content:space-between; font-size:12px; color:#475569; margin-bottom:8px; }
								.cp-emi-breakdown b{ color:#1a2c4e; }
								.cp-emi-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }
								.cp-emi-dot-principal{ background:#197003; }
								.cp-emi-dot-interest{ background:#fbbf24; }
								.cp-emi-total{ font-size:12.5px; color:#64748b; padding-top:8px; border-top:1px solid #e2e8f0; }
								.cp-emi-total b{ color:#1a2c4e; }
								.cp-emi-disclaimer{ font-size:11px; color:#94a3b8; margin:10px 0 0; font-style:italic; }

/* ---- from legacy property-detail.php, lines 2319-2498 ---- */
			.cp-similar-section { padding: 10px 0 40px; }

			/* Desktop/tablet only: single-line horizontal carousel (was a 4-col grid
			   that would wrap once more than 4 items were queried). Mobile keeps its
			   own compact list-card layout below, untouched. */
			@media (min-width: 768px) {
				.cp-similar-carousel { position: relative; padding: 0 46px; }
				.cp-similar-section .row.list-layout {
					display: flex !important;
					flex-wrap: nowrap !important;
					align-items: stretch !important;
					overflow-x: auto;
					scroll-behavior: smooth;
					gap: 20px;
					margin: 0 !important;
					padding-bottom: 4px;
					-ms-overflow-style: none;
					scrollbar-width: none;
				}
				.cp-similar-section .row.list-layout::-webkit-scrollbar { display: none; }
				/* 3 per view (was 4) — 25%-wide cards were too cramped for the
				   image + title + price/button footer to breathe properly. */
				.cp-similar-section .row.list-layout > [class*="col-"] {
					flex: 0 0 calc((100% - 40px) / 3);
					max-width: calc((100% - 40px) / 3);
					padding: 0 !important;
					margin: 0 !important;
					display: flex !important;
				}
				/* Column is now a flex box (default align-items:stretch) so the
				   card itself fills the row's full height — every card in view
				   ends at the same bottom edge regardless of title length. */
				.cp-similar-section .row.list-layout > [class*="col-"] > .property-listing.property-1 {
					width: 100% !important;
				}
			}
			.cp-similar-arrow {
				position: absolute;
				top: calc(50% - 12px);
				transform: translateY(-50%);
				width: 40px;
				height: 40px;
				border-radius: 50%;
				background: #fff;
				border: 1px solid #e5e7eb;
				box-shadow: 0 4px 14px rgba(0,0,0,0.14);
				display: flex;
				align-items: center;
				justify-content: center;
				color: #197003;
				font-size: 15px;
				cursor: pointer;
				z-index: 5;
				transition: all 0.2s ease;
			}
			.cp-similar-arrow:hover { background: #197003; color: #fff; box-shadow:none; }
			.cp-similar-prev { left: 0; }
			.cp-similar-next { right: 0; }
			@media (max-width: 767px) {
				.cp-similar-arrow { display: none; }
			}

			/* Mobile-only: compact horizontal list-card for Similar Properties (desktop untouched).
			   Selectors are prefixed with .cp-similar-section .property-listing.property-1 so they
			   out-specificity the shared card rules in header.php (which use .property-listing.property-1 X). */
			@media (max-width: 767px) {
				.cp-similar-section .property-listing.property-1 {
					display: flex !important;
					flex-direction: row !important;
					align-items: stretch !important;
					height: auto !important;
					min-height: 0 !important;
					max-height: none !important;
					border-radius: 12px !important;
					overflow: hidden !important;
				}
				.cp-similar-section .property-listing.property-1 .listing-img-wrapper {
					flex: 0 0 112px !important;
					width: 112px !important;
					height: auto !important;
					align-self: stretch !important;
				}
				.cp-similar-section .property-listing.property-1 .listing-img-wrapper a,
				.cp-similar-section .property-listing.property-1 .listing-img-wrapper img {
					width: 112px !important;
					height: 100% !important;
					min-height: 100% !important;
					max-height: none !important;
					object-fit: cover !important;
				}
				.cp-similar-section .property-listing.property-1 .listing-img-wrapper .cp-card-fabs {
					top: 6px !important;
					right: 6px !important;
					gap: 5px !important;
					width: auto !important;
					height: auto !important;
				}
				.cp-similar-section .property-listing.property-1 .listing-img-wrapper .cp-fab-btn {
					width: 22px !important;
					height: 22px !important;
					min-height: 0 !important;
					max-height: none !important;
					font-size: 10px !important;
				}
				.cp-similar-section .property-listing.property-1 .listing-content {
					flex: 1 1 auto !important;
					min-width: 0 !important;
					height: auto !important;
					min-height: 0 !important;
					padding: 10px 12px !important;
				}
				.cp-similar-section .property-listing.property-1 .cp-card-row {
					flex-direction: column !important;
					align-items: stretch !important;
					gap: 0 !important;
					width: 100% !important;
				}
				.cp-similar-section .property-listing.property-1 .cp-card-stack {
					width: 100% !important;
					min-width: 0 !important;
					gap: 3px !important;
				}
				.cp-similar-section .property-listing.property-1 .cp-card-stack .cp-badge-top,
				.cp-similar-section .property-listing.property-1 .cp-card-stack .prt-types.sale {
					font-size: 10px !important;
					padding: 3px 9px !important;
					margin: 0 0 2px !important;
				}
				.cp-similar-section .property-listing.property-1 .cp-card-stack .listing-name,
				.cp-similar-section .property-listing.property-1 .listing-name {
					font-size: 13px !important;
					line-height: 1.3 !important;
					margin: 0 !important;
					display: -webkit-box !important;
					-webkit-line-clamp: 1 !important;
					-webkit-box-orient: vertical !important;
					overflow: hidden !important;
					white-space: normal !important;
				}
				.cp-similar-section .property-listing.property-1 .cp-status-pill {
					display: none !important;
				}
				.cp-similar-section .property-listing.property-1 .cp-location {
					font-size: 11px !important;
					white-space: nowrap !important;
					overflow: hidden !important;
					text-overflow: ellipsis !important;
					display: block !important;
					max-width: 100% !important;
				}
				.cp-similar-section .property-listing.property-1 .cp-card-cta {
					flex-direction: row !important;
					align-items: center !important;
					justify-content: space-between !important;
					width: 100% !important;
					min-height: 0 !important;
					margin-top: 6px !important;
					padding-top: 6px !important;
					border-top: 1px solid #f1f5f9 !important;
					gap: 8px !important;
				}
				.cp-similar-section .property-listing.property-1 .cp-card-cta .cp-card-id {
					display: none !important;
				}
				.cp-similar-section .property-listing.property-1 .cp-card-cta .cp-card-price {
					font-size: 15px !important;
					margin: 0 !important;
					padding: 0 !important;
					order: 0 !important;
					text-align: left !important;
				}
				.cp-similar-section .property-listing.property-1 .cp-card-cta .more-btn {
					order: 1 !important;
					padding: 6px 16px !important;
					font-size: 11px !important;
					display: inline-block !important;
				}
			}

/* ---- from legacy property-detail.php, lines 2628-2657 ---- */
.cp-mobile-contact-bar{ display:none; }
@media (max-width: 768px){
	.cp-mobile-contact-bar{
		display:flex; position:fixed; left:0; right:0; bottom:0; z-index:99999;
		background:#fff; box-shadow:0 -4px 20px rgba(0,0,0,.15);
		padding:8px 8px calc(8px + env(safe-area-inset-bottom));
		gap:8px;
	}
	.cp-mcb-btn{
		flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
		gap:2px; padding:8px 4px; min-height:44px; border-radius:10px; font-size:11px; font-weight:700;
		text-decoration:none !important; color:#fff !important; box-sizing:border-box;
	}
	.cp-mcb-btn i{ font-size:16px; }
	.cp-mcb-call{ background:linear-gradient(135deg,#1565C0,#1E88E5); }
	.cp-mcb-wa{ background:#25D366; }
	.cp-mcb-enquire{ background:#197003; }
	/* This page has its own purpose-built Call/WhatsApp bar above, so the
	   site-wide floating FABs (z-index 9999) AND the site-wide app-style
	   bottom tab bar (.cp-bottom-nav, z-index 99998) would otherwise stack
	   on top of it — all three are `position:fixed;bottom:0`, so without
	   this they'd overlap each other at the exact same screen position.
	   Hide both site-wide bars here and let this page's own bar win
	   (z-index 99999, above .cp-bottom-nav's 99998). */
	.fab-stack{ display:none !important; }
	.cp-bottom-nav{ display:none !important; }
	#main-wrapper, body{ padding-bottom:64px; }
}