/* =========================================================
   3G REAL ESTATE — FRONTEND DESIGN
   Search form + property grid + property card + pagination
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
	--re-primary: #1f3d60;
	--re-primary-dark: #16314d;
	--re-gold: #c9a227;
	--re-gold-dark: #a9860f;
	--re-cream: #faf6ee;
	--re-cream-border: #e7dcc3;
	--re-success: #158a4d;
	--re-text: #16232f;
	--re-text-light: #74797f;
	--re-white: #ffffff;
	--re-radius: 18px;
	--re-radius-sm: 10px;
	--re-shadow: 0 10px 30px rgba(17, 33, 51, 0.09);
	--re-shadow-hover: 0 22px 48px rgba(17, 33, 51, 0.16);
	--re-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--re-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.threeg-re-grid,
.threeg-re-grid *,
.threeg-re-search-form,
.threeg-re-search-form *,
.threeg-property-card,
.threeg-property-card *,
.threeg-re-pagination,
.threeg-re-pagination *,
.threeg-re-archive,
.threeg-re-archive *,
.threeg-property-listing-page,
.threeg-property-listing-page * {
	box-sizing: border-box !important;
	font-family: var(--re-font-body) !important;
}


/* =========================================================
   PAGE / LISTING WRAPPERS
========================================================= */

.threeg-re-archive,
.threeg-property-listing-page {
	max-width: 1320px !important;
	margin: 0 auto !important;
	padding: 40px 20px 80px !important;
}

.threeg-re-archive__header {
	margin: 0 0 24px !important;
}

.threeg-re-archive__title {
	margin: 0 !important;
	font-family: var(--re-font-display) !important;
	font-size: 34px !important;
	font-weight: 800 !important;
	color: var(--re-primary) !important;
	letter-spacing: -0.3px !important;
}

.threeg-re-archive__search {
	margin: 0 0 8px !important;
}

.threeg-re-shortcode {
	display: block !important;
	width: 100% !important;
}

.threeg-re-shortcode.threeg-re-loading,
.threeg-re-shortcode[aria-busy="true"] {
	position: relative !important;
	opacity: 0.5 !important;
	pointer-events: none !important;
	transition: opacity 0.2s ease !important;
}


/* =========================================================
   SEARCH FORM
   Markup: form.threeg-re-search-form > div.threeg-re-search-field
   (order: keyword, developer, community, property_type,
   price_min, price_max, bedrooms, sorting) + button.threeg-re-search-submit
========================================================= */

.threeg-re-search-form {
	display: grid !important;
	grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
	grid-auto-flow: row dense !important;
	align-items: end !important;
	gap: 16px 14px !important;
	width: 100% !important;
	margin: 0 0 32px !important;
	padding: 22px !important;
	background: var(--re-white) !important;
	border: 1px solid var(--re-cream-border) !important;
	border-radius: 20px !important;
	box-shadow: var(--re-shadow) !important;
}

.threeg-re-search-field {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	min-width: 0 !important;
}

.threeg-re-search-field label {
	margin: 0 0 2px 2px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.6px !important;
	text-transform: uppercase !important;
	color: var(--re-text-light) !important;
}

.threeg-re-search-field input,
.threeg-re-search-field select {
	width: 100% !important;
	height: 46px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	background: var(--re-cream) !important;
	border: 1px solid var(--re-cream-border) !important;
	border-radius: 10px !important;
	color: var(--re-text) !important;
	font-size: 14px !important;
	font-family: inherit !important;
	line-height: 1.3 !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.threeg-re-search-field input::placeholder {
	color: #9a958a !important;
}

.threeg-re-search-field select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%231f3d60' d='M1 1l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	padding-right: 34px !important;
	cursor: pointer !important;
}

.threeg-re-search-field input:focus,
.threeg-re-search-field select:focus {
	outline: none !important;
	background: var(--re-white) !important;
	border-color: var(--re-primary) !important;
	box-shadow: 0 0 0 3px rgba(31, 61, 96, 0.12) !important;
}

/* Keyword field — search icon + wide */
.threeg-re-search-field:nth-child(1) {
	grid-column: span 4 !important;
	order: 1 !important;
}

.threeg-re-search-field:nth-child(1) input {
	padding-left: 40px !important;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a9860f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: left 14px center !important;
}

.threeg-re-search-field:nth-child(2) { grid-column: span 2 !important; order: 2 !important; }
.threeg-re-search-field:nth-child(3) { grid-column: span 2 !important; order: 3 !important; }
.threeg-re-search-field:nth-child(4) { grid-column: span 2 !important; order: 4 !important; }

.threeg-re-search-submit {
	grid-column: span 2 !important;
	order: 5 !important;
	height: 46px !important;
	margin: 0 !important;
	padding: 0 18px !important;
	background: var(--re-primary) !important;
	border: none !important;
	border-radius: 10px !important;
	color: var(--re-white) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.6px !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	transition: background 0.25s ease, transform 0.15s ease !important;
	white-space: nowrap !important;
}

.threeg-re-search-submit:hover {
	background: var(--re-primary-dark) !important;
}

.threeg-re-search-submit:active {
	transform: translateY(1px) !important;
}

.threeg-re-search-field:nth-child(5) { grid-column: span 3 !important; order: 6 !important; }
.threeg-re-search-field:nth-child(6) { grid-column: span 3 !important; order: 7 !important; }
.threeg-re-search-field:nth-child(7) { grid-column: span 3 !important; order: 8 !important; }
.threeg-re-search-field:nth-child(8) { grid-column: span 3 !important; order: 9 !important; }

/* Optional "advanced filters" / chip hooks already bound in JS */
.threeg-re-more-filters-toggle {
	grid-column: 1 / -1 !important;
	order: 10 !important;
	justify-self: start !important;
	margin-top: 2px !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	color: var(--re-gold-dark) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	text-decoration: underline !important;
}

.threeg-re-search-advanced {
	grid-column: 1 / -1 !important;
	display: none !important;
}

.threeg-re-filter-chip {
	display: inline-flex !important;
	align-items: center !important;
	padding: 8px 16px !important;
	margin: 0 8px 8px 0 !important;
	background: var(--re-cream) !important;
	border: 1px solid var(--re-cream-border) !important;
	border-radius: 30px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--re-text) !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

.threeg-re-filter-chip.is-active {
	background: var(--re-primary) !important;
	border-color: var(--re-primary) !important;
	color: var(--re-white) !important;
}


/* =========================================================
   PROPERTY GRID
========================================================= */

.threeg-re-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 28px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.threeg-re-grid--columns-1 { grid-template-columns: 1fr !important; }
.threeg-re-grid--columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.threeg-re-grid--columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.threeg-re-grid--columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }


/* =========================================================
   PROPERTY CARD
   Markup: article.threeg-property-card
     > a.threeg-property-card__image (img, __badges, __featured)
     > div.threeg-property-card__content
         (__developer, __title, __location, __price, __meta,
          __extra, __button)
========================================================= */

.threeg-property-card {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	min-width: 0 !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--re-white) !important;
	border: 1px solid #eef0f2 !important;
	border-radius: var(--re-radius) !important;
	overflow: hidden !important;
	box-shadow: var(--re-shadow) !important;
	transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.threeg-property-card:hover {
	transform: translateY(-5px) !important;
	box-shadow: var(--re-shadow-hover) !important;
}


/* ---- IMAGE ---- */

.threeg-property-card__image {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: 220px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	background: #eef0f2 !important;
	text-decoration: none !important;
}

.threeg-property-card__image img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: cover !important;
	transition: transform 0.4s ease !important;
}

.threeg-property-card:hover .threeg-property-card__image img {
	transform: scale(1.06) !important;
}

.threeg-property-card__image-placeholder {
	width: 100% !important;
	height: 100% !important;
	background: linear-gradient(135deg, #eef0f2, #e2e6ea) !important;
}


/* ---- BADGES (top-left of image) ---- */

.threeg-property-card__badges {
	position: absolute !important;
	top: 14px !important;
	left: 14px !important;
	z-index: 2 !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	flex-wrap: wrap !important;
}

.threeg-property-badge {
	display: inline-flex !important;
	align-items: center !important;
	min-height: 24px !important;
	margin: 0 !important;
	padding: 5px 11px !important;
	border-radius: 30px !important;
	font-size: 10.5px !important;
	line-height: 1 !important;
	font-weight: 700 !important;
	letter-spacing: 0.4px !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
}

.threeg-property-badge--launch {
	background: var(--re-gold) !important;
	color: #1c1c1c !important;
}

.threeg-property-badge--type {
	background: rgba(255, 255, 255, 0.95) !important;
	color: var(--re-primary) !important;
}

.threeg-property-card__featured {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	z-index: 2 !important;
	margin: 0 !important;
	padding: 5px 11px !important;
	border-radius: 30px !important;
	background: var(--re-primary) !important;
	color: var(--re-white) !important;
	font-size: 10.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.4px !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
}


/* ---- CONTENT ---- */

.threeg-property-card__content {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 !important;
	min-width: 0 !important;
	padding: 18px 20px 20px !important;
}


/* ---- DEVELOPER ---- */

.threeg-property-card__developer {
	margin: 0 0 6px !important;
	padding: 0 !important;
	color: var(--re-gold-dark) !important;
	font-size: 11px !important;
	line-height: 1.4 !important;
	font-weight: 700 !important;
	letter-spacing: 1.1px !important;
	text-transform: uppercase !important;
}


/* ---- TITLE ---- */

.threeg-property-card__title {
	margin: 0 0 8px !important;
	padding: 0 !important;
	font-family: var(--re-font-display) !important;
	font-size: 21px !important;
	line-height: 1.28 !important;
	font-weight: 700 !important;
	letter-spacing: 0.1px !important;
}

.threeg-property-card__title a {
	color: var(--re-primary) !important;
	text-decoration: none !important;
	transition: color 0.2s ease !important;
}

.threeg-property-card__title a:hover {
	color: var(--re-gold-dark) !important;
}


/* ---- LOCATION ---- */

.threeg-property-card__location {
	display: flex !important;
	align-items: center !important;
	gap: 5px !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	color: var(--re-text-light) !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	font-weight: 400 !important;
}

.threeg-property-card__icon {
	color: var(--re-gold-dark) !important;
	font-size: 14px !important;
	line-height: 1 !important;
}


/* ---- PRICE ---- */

.threeg-property-card__price {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	margin: 0 0 14px !important;
	padding: 12px 14px !important;
	background: var(--re-cream) !important;
	border: 1px solid var(--re-cream-border) !important;
	border-radius: var(--re-radius-sm) !important;
}

.threeg-property-card__price-label {
	color: var(--re-text-light) !important;
	font-size: 10.5px !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
	letter-spacing: 0.3px !important;
	text-transform: uppercase !important;
}

.threeg-property-card__price-value {
	color: var(--re-primary) !important;
	font-family: var(--re-font-display) !important;
	font-size: 19px !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
}


/* ---- META (beds / baths / sqft) ---- */

.threeg-property-card__meta {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin: 0 0 13px !important;
	padding: 0 !important;
}

.threeg-property-card__meta span {
	display: inline-flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 5px 13px !important;
	background: var(--re-white) !important;
	border: 1px solid var(--re-cream-border) !important;
	border-radius: 30px !important;
	color: var(--re-text) !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	font-weight: 600 !important;
}


/* ---- EXTRA (handover + roi) ---- */

.threeg-property-card__extra {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 6px 12px !important;
	min-height: 20px !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
	color: var(--re-text-light) !important;
	font-size: 12.5px !important;
	line-height: 1.4 !important;
	font-weight: 600 !important;
}

.threeg-property-card__extra span {
	display: inline-flex !important;
	align-items: center !important;
}

/* When both Handover and ROI are shown, ROI is always the second span
   (per the template's output order) — highlight only that one. When only
   a single span exists (either one alone), :nth-child(2) matches nothing,
   so it correctly stays neutral instead of being mislabeled as ROI. */
.threeg-property-card__extra span:nth-child(2) {
	color: var(--re-success) !important;
	font-weight: 700 !important;
}

.threeg-property-card__extra span:nth-child(2)::before {
	content: "" !important;
	display: inline-block !important;
	width: 10px !important;
	height: 10px !important;
	margin-right: 4px !important;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23158a4d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='20' x2='20' y2='4'/%3E%3Cpolyline points='7 4 20 4 20 17'/%3E%3C/svg%3E") !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}


/* ---- BUTTON ---- */

.threeg-property-card__button {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	width: 100% !important;
	min-height: 44px !important;
	margin-top: auto !important;
	padding: 12px 16px !important;
	background: var(--re-primary) !important;
	border: none !important;
	border-radius: 9px !important;
	color: var(--re-white) !important;
	font-size: 13px !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
	letter-spacing: 0.6px !important;
	text-transform: uppercase !important;
	text-align: center !important;
	text-decoration: none !important;
	transition: background 0.3s ease, letter-spacing 0.3s ease !important;
}

.threeg-property-card__button::after {
	content: "\2192" !important;
	display: inline-block !important;
	transition: transform 0.25s ease !important;
}

.threeg-property-card__button:hover {
	background: var(--re-primary-dark) !important;
	color: var(--re-white) !important;
}

.threeg-property-card__button:hover::after {
	transform: translateX(4px) !important;
}


/* =========================================================
   PAGINATION
   Markup: nav.threeg-re-pagination > button.__prev,
   span.__status, button.__next
========================================================= */

.threeg-re-pagination {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 18px !important;
	margin: 36px 0 10px !important;
}

.threeg-re-pagination__status {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--re-text-light) !important;
}

.threeg-re-pagination__prev,
.threeg-re-pagination__next {
	padding: 10px 20px !important;
	background: var(--re-white) !important;
	border: 1px solid var(--re-cream-border) !important;
	border-radius: 30px !important;
	color: var(--re-primary) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

.threeg-re-pagination__prev:hover:not(:disabled),
.threeg-re-pagination__next:hover:not(:disabled) {
	background: var(--re-primary) !important;
	border-color: var(--re-primary) !important;
	color: var(--re-white) !important;
}

.threeg-re-pagination__prev:disabled,
.threeg-re-pagination__next:disabled {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
}


/* =========================================================
   NO RESULTS
========================================================= */

.threeg-re-no-results {
	padding: 60px 20px !important;
	background: var(--re-cream) !important;
	border: 1px dashed var(--re-cream-border) !important;
	border-radius: var(--re-radius) !important;
	text-align: center !important;
	color: var(--re-text-light) !important;
	font-size: 15px !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {

	.threeg-re-grid,
	.threeg-re-grid--columns-3,
	.threeg-re-grid--columns-4 {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 1024px) {

	.threeg-re-grid,
	.threeg-re-grid--columns-3,
	.threeg-re-grid--columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.threeg-re-search-form {
		grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	}

	.threeg-re-search-field:nth-child(1) { grid-column: span 6 !important; }
	.threeg-re-search-field:nth-child(2) { grid-column: span 3 !important; }
	.threeg-re-search-field:nth-child(3) { grid-column: span 3 !important; }
	.threeg-re-search-field:nth-child(4) { grid-column: span 3 !important; }
	.threeg-re-search-submit { grid-column: span 3 !important; }
	.threeg-re-search-field:nth-child(5) { grid-column: span 3 !important; }
	.threeg-re-search-field:nth-child(6) { grid-column: span 3 !important; }
	.threeg-re-search-field:nth-child(7) { grid-column: span 3 !important; }
	.threeg-re-search-field:nth-child(8) { grid-column: span 3 !important; }
}

@media (max-width: 782px) {

	.threeg-re-grid,
	.threeg-re-grid--columns-1,
	.threeg-re-grid--columns-2,
	.threeg-re-grid--columns-3,
	.threeg-re-grid--columns-4 {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}

	.threeg-re-search-form {
		grid-template-columns: 1fr !important;
		padding: 18px !important;
	}

	.threeg-re-search-field:nth-child(1),
	.threeg-re-search-field:nth-child(2),
	.threeg-re-search-field:nth-child(3),
	.threeg-re-search-field:nth-child(4),
	.threeg-re-search-field:nth-child(5),
	.threeg-re-search-field:nth-child(6),
	.threeg-re-search-field:nth-child(7),
	.threeg-re-search-field:nth-child(8),
	.threeg-re-search-submit {
		grid-column: 1 / -1 !important;
	}

	.threeg-property-card__image {
		height: 200px !important;
	}

	.threeg-property-card__content {
		padding: 16px 18px 18px !important;
	}

	.threeg-property-card__title {
		font-size: 18px !important;
	}

	.threeg-re-archive,
	.threeg-property-listing-page {
		padding: 25px 15px 50px !important;
	}
}