/* ==========================================================================
   VisionPro Realty - Featured Deals
   Colors: Navy #12377A | Gold #FFD400 | Dark Navy #071A3A | BG #F8F8F5
   Fonts: Fraunces (headings) / Outfit (body)
   ========================================================================== */

:root {
	--vp-navy: #12377A;
	--vp-navy-dark: #071A3A;
	--vp-gold: #FFD400;
	--vp-bg: #F8F8F5;
	--vp-white: #FFFFFF;
	--vp-text-muted: #5B6472;
}

.vp-fd-section {
	background: var(--vp-bg);
	padding: 40px 5%;
	font-family: 'Outfit', sans-serif;
	box-sizing: border-box;
}
.vp-fd-section *, .vp-fd-section *::before, .vp-fd-section *::after { box-sizing: border-box; }

/* ---- Header ---- */
.vp-fd-header {
	max-width: 720px;
	margin: 0 auto 36px;
	text-align: center;
}
.vp-fd-eyebrow {
	display: inline-block;
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 2.5px;
	color: var(--vp-navy);
	background: rgba(18, 55, 122, 0.08);
	padding: 6px 16px;
	border-radius: 999px;
	margin-bottom: 18px;
}
.vp-fd-heading {
	font-family: 'Fraunces', serif;
	font-weight: 600;
	font-size: clamp(28px, 4vw, 42px);
	color: var(--vp-navy-dark);
	margin: 0 0 16px;
	line-height: 1.2;
}
.vp-fd-description {
	font-family: 'Outfit', sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: var(--vp-text-muted);
	line-height: 1.6;
	margin: 0;
}
.vp-fd-empty {
	text-align: center;
	color: var(--vp-text-muted);
	font-family: 'Outfit', sans-serif;
}

/* ---- Carousel shell ---- */
.vp-fd-carousel-wrap {
	position: relative;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 56px;
}
.vp-fd-swiper { overflow: hidden; padding: 8px 4px 44px; }

/* ---- Card ---- */
.vp-fd-card {
	background: var(--vp-white);
	border-radius: 18px;
	box-shadow: 0 10px 30px rgba(7, 26, 58, 0.08), 0 2px 8px rgba(7, 26, 58, 0.04);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform .35s ease, box-shadow .35s ease;
}
.vp-fd-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(7, 26, 58, 0.14);
}

.vp-fd-card-media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 18px 18px 0 0;
	background: #e7e7e2;
}
.vp-fd-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s ease;
}
.vp-fd-card:hover .vp-fd-card-media img { transform: scale(1.08); }
.vp-fd-card-media--placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #dcdcd6, #ececE7); }

.vp-fd-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(7,26,58,0) 45%, rgba(7,26,58,0.55) 100%);
	opacity: 0;
	transition: opacity .35s ease;
}
.vp-fd-card:hover .vp-fd-overlay { opacity: 1; }

.vp-fd-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--vp-gold);
	color: var(--vp-navy-dark);
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .5px;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
	z-index: 2;
}

/* Listing-type badge (For Sale / For Lease / To Rent...) sits opposite the
   category badge. Color varies by listing type so status is scannable at a
   glance across the carousel. */
.vp-fd-badge--type {
	left: auto;
	right: 14px;
	background: var(--vp-navy-dark);
	color: #fff;
}
.vp-fd-badge--for_sale    { background: #1E8E5A; color: #fff; }
.vp-fd-badge--for_lease   { background: var(--vp-navy); color: #fff; }
.vp-fd-badge--to_rent     { background: #C9720A; color: #fff; }
.vp-fd-badge--to_buy      { background: #1E8E5A; color: #fff; }
.vp-fd-badge--sold        { background: #8A8A82; color: #fff; }
.vp-fd-badge--under_offer { background: #B3261E; color: #fff; }

.vp-fd-card-body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
.vp-fd-card-title {
	font-family: 'Fraunces', serif;
	font-weight: 600;
	font-size: 18px;
	color: var(--vp-navy-dark);
	margin: 0 0 8px;
	line-height: 1.3;
}
/* NOTE: .vp-fd-card-project (old unlabeled Building line) removed - the
   Building field now renders as the first row inside .vp-fd-detail-list,
   using the same icon + label + value pattern as every other field. */

/* ---- Detail rows: circle icon + stacked label/value, matching the
   reference layout (icon, small uppercase label, bold value, divider) ---- */
.vp-fd-detail-list {
	display: flex;
	flex-direction: column;
	margin: 0 0 14px;
}
.vp-fd-detail-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid #ECECE6;
}
.vp-fd-detail-row:first-child { padding-top: 2px; }
.vp-fd-detail-row--last,
.vp-fd-detail-row:last-child { border-bottom: none; padding-bottom: 2px; }

.vp-fd-detail-icon {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--vp-navy-dark);
	position: relative;
	display: inline-block;
}
.vp-fd-detail-icon::before {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 13px;
	height: 13px;
	background-color: #fff;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}

.vp-fd-detail-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.vp-fd-detail-label {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 10px;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--vp-text-muted);
}
.vp-fd-detail-value {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--vp-navy-dark);
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.vp-fd-icon { width: 16px; height: 16px; flex: 0 0 16px; display: inline-block; background-color: var(--vp-navy); mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; }
.vp-fd-detail-icon.vp-fd-icon--building::before   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21V4a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v6h4a1 1 0 0 1 1 1v10h-6v-4h-2v4H4zm3-14h2v2H7V7zm4 0h2v2h-2V7zm-4 4h2v2H7v-2zm4 0h2v2h-2v-2zm-4 4h2v2H7v-2zm8-3h2v2h-2v-2zm0 4h2v2h-2v-2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21V4a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v6h4a1 1 0 0 1 1 1v10h-6v-4h-2v4H4zm3-14h2v2H7V7zm4 0h2v2h-2V7zm-4 4h2v2H7v-2zm4 0h2v2h-2v-2zm-4 4h2v2H7v-2zm8-3h2v2h-2v-2zm0 4h2v2h-2v-2z'/%3E%3C/svg%3E"); }
.vp-fd-detail-icon.vp-fd-icon--location::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
.vp-fd-detail-icon.vp-fd-icon--area::before       { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v2H5v6H3V3zm18 0v8h-2V5h-6V3h8zM3 13h2v6h6v2H3v-8zm18 8h-8v-2h6v-6h2v8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v2H5v6H3V3zm18 0v8h-2V5h-6V3h8zM3 13h2v6h6v2H3v-8zm18 8h-8v-2h6v-6h2v8z'/%3E%3C/svg%3E"); }
.vp-fd-detail-icon.vp-fd-icon--condition::before  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V8l9-6 9 6v13h-6v-7H9v7H3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V8l9-6 9 6v13h-6v-7H9v7H3z'/%3E%3C/svg%3E"); }
.vp-fd-detail-icon.vp-fd-icon--price::before      { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1H7.6c.12 2.19 1.76 3.42 3.7 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.9-4.4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1H7.6c.12 2.19 1.76 3.42 3.7 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.9-4.4z'/%3E%3C/svg%3E"); }

/* ---- CTA button ---- */
.vp-fd-cta {
	margin-top: auto;
	width: 100%;
	background: var(--vp-navy);
	color: #fff;
	font-family: 'Outfit', sans-serif;
	font-weight: 500;
	font-size: 14px;
	border: none;
	border-radius: 10px;
	padding: 11px 20px;
	cursor: pointer;
	transition: background .25s ease, color .25s ease, transform .2s ease;
}
.vp-fd-cta:hover {
	background: var(--vp-gold);
	color: var(--vp-navy-dark);
	transform: translateY(-2px);
}

/* ---- Nav arrows & pagination ---- */
.vp-fd-nav {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--vp-white);
	box-shadow: 0 6px 18px rgba(7,26,58,.15);
	cursor: pointer;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .25s ease;
}
.vp-fd-nav:hover { background: var(--vp-gold); }
.vp-fd-nav::after {
	content: '';
	width: 10px;
	height: 10px;
	border-top: 2px solid var(--vp-navy-dark);
	border-right: 2px solid var(--vp-navy-dark);
}
.vp-fd-nav-prev { left: 0; }
.vp-fd-nav-prev::after { transform: rotate(-135deg) translate(2px,-2px); }
.vp-fd-nav-next { right: 0; }
.vp-fd-nav-next::after { transform: rotate(45deg); }
.vp-fd-nav.swiper-button-disabled { opacity: .35; cursor: default; }

.vp-fd-pagination { text-align: center; margin-top: 8px; }
.vp-fd-pagination .swiper-pagination-bullet { background: var(--vp-navy); opacity: .3; }
.vp-fd-pagination .swiper-pagination-bullet-active { opacity: 1; background: var(--vp-gold); }

/* ---- Enquiry popup ---- */
.vp-fd-popup-overlay {
	position: fixed;
	inset: 0;
	background: rgba(7, 26, 58, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
	z-index: 99999;
	padding: 20px;
}
.vp-fd-popup-overlay.is-active { opacity: 1; visibility: visible; }

.vp-fd-popup {
	position: relative;
	background: #fff;
	width: 100%;
	max-width: 440px;
	max-height: 88vh;
	overflow-y: auto;
	border-radius: 16px;
	padding: 28px 28px;
	box-shadow: 0 30px 70px rgba(7,26,58,.35);
	transform: scale(.9);
	opacity: 0;
	transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
	font-family: 'Outfit', sans-serif;
}
.vp-fd-popup-overlay.is-active .vp-fd-popup { transform: scale(1); opacity: 1; }

.vp-fd-popup-close {
	position: absolute;
	top: 14px; right: 16px;
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	color: var(--vp-text-muted);
	cursor: pointer;
}
.vp-fd-popup-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 21px; color: var(--vp-navy-dark); margin: 0 0 4px; }
.vp-fd-popup-subtitle { font-size: 13px; color: var(--vp-text-muted); margin: 0 0 18px; }

.vp-fd-field-row { display: flex; gap: 14px; }
.vp-fd-field-row .vp-fd-field { flex: 1 1 50%; min-width: 0; }

.vp-fd-field { display: block; margin-bottom: 14px; }
.vp-fd-field span { display: block; font-size: 12px; font-weight: 500; color: var(--vp-navy-dark); margin-bottom: 5px; }
.vp-fd-field input, .vp-fd-field textarea {
	width: 100%;
	border: 1px solid #DADAD3;
	border-radius: 9px;
	padding: 10px 13px;
	font-family: 'Outfit', sans-serif;
	font-size: 14px;
	color: var(--vp-navy-dark);
	background: #FBFBF9;
	box-sizing: border-box;
}
.vp-fd-field textarea { resize: vertical; min-height: 50px; }
.vp-fd-field input:focus, .vp-fd-field textarea:focus { outline: none; border-color: var(--vp-navy); }
.vp-fd-field input[readonly] { background: #F1F1EC; color: var(--vp-text-muted); }

.vp-fd-submit {
	width: 100%;
	background: var(--vp-navy);
	color: #fff;
	font-weight: 500;
	font-size: 15px;
	border: none;
	border-radius: 9px;
	padding: 12px 20px;
	cursor: pointer;
	margin-top: 4px;
	transition: background .25s ease, color .25s ease;
}
.vp-fd-submit:hover { background: var(--vp-gold); color: var(--vp-navy-dark); }
.vp-fd-submit:disabled { opacity: .6; cursor: default; }

.vp-fd-popup-success-state { text-align: center; padding: 20px 0; }
.vp-fd-success-icon {
	width: 60px; height: 60px;
	border-radius: 50%;
	background: var(--vp-gold);
	color: var(--vp-navy-dark);
	font-size: 28px;
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 18px;
}
.vp-fd-popup-success-state h3 { font-family: 'Fraunces', serif; font-weight: 600; color: var(--vp-navy-dark); margin: 0 0 8px; }
.vp-fd-popup-success-state p { color: var(--vp-text-muted); font-size: 14px; margin: 0; }

/* ---- Responsive tweaks ---- */
@media (max-width: 782px) {
	.vp-fd-carousel-wrap { padding: 0 40px; }
	.vp-fd-nav { width: 38px; height: 38px; }
}
@media (max-width: 480px) {
	.vp-fd-section { padding: 32px 4%; }
	.vp-fd-carousel-wrap { padding: 0 32px; }
	.vp-fd-field-row { flex-direction: column; gap: 0; }
}