/* =========================================================
   HOME PAGE, 2026 REDESIGN (loaded after home.css and services.css)
   Short photo banner, a search card overlapping its bottom edge,
   smaller sections, builders with "Show more", reviews in a row.
========================================================= */

/* ---------------- Banner ---------------- */
.ht-hero {
	min-height: 0;
	height: 360px;
	padding: 64px 0 56px;
	align-items: center;
}

.ht-hero-bg {
	background-image: url('../../images/hero-2026.jpg');
	background-position: right 45%;
	animation: none;
}

.ht-hero-overlay {
	background: linear-gradient(90deg, rgba(10, 30, 62, 0.95) 0%, rgba(10, 30, 62, 0.88) 38%,
		rgba(10, 30, 62, 0.25) 62%, rgba(10, 30, 62, 0) 100%);
}

.ht-hero-orb {
	display: none;
}

.ht-hero-lead {
	max-width: 560px;
	margin: 0;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.45;
	color: #ffffff;
}

.ht-hero-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.9rem;
	color: #e6edf4;
}

.ht-hero-trust i {
	margin-right: 4px;
	color: #f7a21c;
}

/* ---------------- Search card ---------------- */
.ht-search-wrap {
	position: relative;
	z-index: 6;
	margin-top: -56px;
	padding-bottom: 8px;
}

.ht-search-content {
	max-width: 780px;
	margin: 0 auto;
}

.ht-search-card {
	padding: 0;
	border-radius: 14px;
	background: #ffffff;
	box-shadow: 0 8px 28px rgba(10, 53, 87, 0.15);
	animation: none;
}

.ht-search-card::before {
	display: none;
}

.ht-search-card > * {
	animation: none;
}

/* Tabs with an orange underline (home.js still slides the "pill", which is now the underline) */
.ht-search-tabs {
	display: flex;
	align-items: stretch;
	gap: 4px;
	margin: 0;
	padding: 0 18px;
	border-radius: 14px 14px 0 0;
	border-bottom: 1px solid #eef0f3;
	background: transparent;
}

.ht-search-tab span {
	padding: 15px 14px;
	border-radius: 0;
	font-size: 0.95rem;
	color: #5b6573;
}

.ht-search-tab:hover span {
	color: #0a3557;
}

.ht-search-tab input:checked + span {
	color: #0a3557;
	font-weight: 700;
}

.ht-search-tab-pill {
	top: auto;
	bottom: -1px;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: #f7a21c;
	box-shadow: none;
}

.ht-tab-extra {
	font-style: normal;
	white-space: pre;
}

/* No icons in the tabs now, so no gap (it split "Plots" from " / Land") */
.ht-search-tab span {
	gap: 0;
}

.ht-search-post {
	margin: auto 0 auto auto;
	padding-left: 12px;
	color: #0a3557;
	font-size: 0.92rem;
	font-weight: 600;
	white-space: nowrap;
}

.ht-search-post small {
	margin-left: 4px;
	color: #d98a00;
	font-size: 0.75rem;
	font-weight: 600;
}

.ht-search-post:hover {
	color: #d98a00;
}

.ht-search-bar {
	padding: 12px 18px;
	border-radius: 0 0 14px 14px;
	box-shadow: none;
}

.ht-search-bar:focus-within {
	box-shadow: none;
}

.ht-search-filter-btn {
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid #e3e7ec;
	border-radius: 10px;
	background: #ffffff;
	color: #0a3557;
	font-weight: 600;
}

.ht-search-submit {
	padding: 12px 26px;
	border-radius: 8px;
	background: #0a3557;
	font-weight: 700;
}

.ht-search-submit:hover {
	background: #13497a;
}

/* Popular areas sit under the card on the light page now */
.ht-hero-popular {
	justify-content: center;
	margin-top: 16px;
}

.ht-hero-popular-label {
	color: #5b6573;
}

.ht-popular-chip {
	border: 1px solid #e3e7ec;
	background: #ffffff;
	color: #0a3557;
}

.ht-popular-chip:hover {
	border-color: #f7a21c;
	background: #fff8ec;
	color: #0a3557;
}

/* ---------------- Sections: smaller type and cards ---------------- */
#services.modern-grid-section,
.ht-sec {
	padding: 48px 0 56px;
}

#services .section-title,
.ht-sec .section-title {
	font-size: 1.65rem;
	font-weight: 800;
	color: #0a3557;
}

#services .section-desc,
.ht-sec .section-desc {
	margin-bottom: 28px;
	font-size: 0.92rem;
	color: #5b6573;
}

#services .sub-badge,
.ht-sec .sub-badge {
	background: #e8eef5;
	color: #0a3557;
}

#servicesGrid {
	max-width: 960px;
	margin: 0 auto;
	--bs-gutter-x: 1rem;
	--bs-gutter-y: 1rem;
}

#servicesGrid .service-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px 14px;
	border-radius: 14px;
}

#servicesGrid .icon-box {
	width: 46px;
	height: 46px;
	margin-bottom: 12px;
	border-radius: 12px;
	font-size: 18px;
}

#servicesGrid .service-card h3 {
	margin-bottom: 8px;
	font-size: 1rem;
	font-weight: 700;
	color: #0a3557;
}

#servicesGrid .service-card p {
	margin-bottom: 12px;
	font-size: 0.82rem;
}

#servicesGrid .service-more {
	margin-top: auto;
	font-size: 0.82rem;
}

/* ---------------- Builders ---------------- */
.ht-builders {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	max-width: 960px;
	margin: 0 auto;
}

.ht-builder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 18px 12px 14px;
	border: 1px solid #edf0f4;
	border-radius: 14px;
	background: #ffffff;
	font-family: inherit;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ht-builder:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(10, 53, 87, 0.1);
}

.ht-builder img {
	height: 46px;
	max-width: 140px;
	object-fit: contain;
}

.ht-builder b {
	display: flex;
	align-items: center;
	height: 46px;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: 0.5px;
	color: #0a3557;
}

.ht-builder span {
	padding: 4px 12px;
	border-radius: 999px;
	background: #f1f4f8;
	color: #5b6573;
	font-size: 0.75rem;
	font-weight: 600;
}

.ht-builders:not(.is-all) .is-more {
	display: none;
}

.ht-show-more {
	margin-top: 22px;
	padding: 9px 22px;
	border: 1.5px solid #0a3557;
	border-radius: 999px;
	background: #ffffff;
	color: #0a3557;
	font-size: 0.9rem;
	font-weight: 600;
}

.ht-show-more:hover {
	background: #0a3557;
	color: #ffffff;
}

/* ---------------- Reviews ---------------- */
.ht-reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	max-width: 960px;
	margin: 0 auto;
}

.ht-review {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 20px;
	border: 1px solid #edf0f4;
	border-radius: 14px;
	background: #ffffff;
}

.ht-review-stars {
	color: #f7a21c;
	font-size: 0.85rem;
	letter-spacing: 2px;
}

.ht-review blockquote {
	margin: 10px 0 16px;
	font-size: 0.9rem;
	line-height: 1.6;
	color: #33415c;
}

.ht-review figcaption {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
}

.ht-review-av {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #0a3557;
	color: #ffffff;
	font-size: 0.8rem;
	font-weight: 700;
}

.ht-review-av.is-alt {
	background: #f7a21c;
	color: #1a1a1a;
}

.ht-review figcaption b {
	display: block;
	font-size: 0.9rem;
	color: #0a3557;
}

.ht-review figcaption small {
	font-size: 0.75rem;
	color: #8a94a3;
}

/* ---------------- Phones and tablets ---------------- */
@media (max-width: 991px) {

	.ht-hero {
		height: 300px;
		padding: 64px 0 40px;
		align-items: flex-start;
	}

	.ht-hero-bg {
		background-position: 70% 45%;
	}

	.ht-hero-lead {
		max-width: 56%;
		margin-top: 14px;
		font-size: 0.8rem;
		line-height: 1.4;
	}

	.ht-hero-trust {
		flex-direction: column;
		gap: 3px;
		margin-top: 8px;
		font-size: 0.72rem;
	}

	.ht-search-wrap {
		margin-top: -36px;
	}

	/* Tabs fit edge to edge with equal space on both sides; Post property is in the navbar */
	.ht-search-tabs {
		justify-content: space-between;
		gap: 0;
		padding: 0 10px;
	}

	.ht-search-tab span {
		padding: 11px 1px;
		font-size: 0.8rem;
	}

	.ht-search-post {
		display: none;
	}

	/* One row: city, search box, filter icon, Search */
	.ht-search-bar {
		flex-wrap: nowrap;
		gap: 6px;
		padding: 8px 8px 8px 10px;
	}

	.ht-city,
	.ht-search-filter-btn {
		flex: none;
		order: 0;
	}

	.ht-search-city {
		height: 38px;
		padding: 0 8px 0 0;
		border: 0;
		border-right: 1px solid #eef0f3;
		border-radius: 0;
		box-shadow: none;
		font-size: 0.8rem;
	}

	.ht-search-city > .fa-location-dot {
		display: none;
	}

	.ht-search-field {
		flex: 1 1 auto;
		order: 0;
		min-width: 0;
		padding: 0 2px;
	}

	.ht-search-field > i {
		display: none;
	}

	.ht-search-input {
		font-size: 0.8rem;
	}

	.ht-search-filter-btn {
		width: auto;
		height: 34px;
		padding: 0 9px;
		border-radius: 8px;
	}

	.ht-search-filter-text,
	.ht-search-filter-caret {
		display: none !important;
	}

	.ht-search-submit {
		flex: none;
		order: 0;
		padding: 8px 12px;
		font-size: 0.8rem;
	}

	#servicesGrid .service-card {
		padding: 18px 12px;
	}

	#services .section-title,
	.ht-sec .section-title {
		font-size: 1.35rem;
	}

	#services .section-desc,
	.ht-sec .section-desc {
		margin-bottom: 22px;
		font-size: 0.8rem;
	}

	.ht-builders {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.ht-builder {
		gap: 8px;
		padding: 14px 8px 12px;
	}

	.ht-builder img,
	.ht-builder b {
		height: 34px;
	}

	.ht-builder img {
		max-width: 110px;
	}

	.ht-builder b {
		font-size: 0.82rem;
	}

	.ht-builders:not(.is-all) .is-m4 {
		display: none;
	}

	/* Reviews: swipe sideways, one card at a time */
	.ht-reviews {
		display: flex;
		gap: 12px;
		margin: 0 -12px;
		padding: 0 12px 6px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.ht-reviews::-webkit-scrollbar {
		display: none;
	}

	.ht-review {
		flex: 0 0 82%;
		padding: 16px;
		scroll-snap-align: center;
	}

	.ht-review blockquote {
		font-size: 0.82rem;
	}
}

@media (max-width: 400px) {

	.ht-search-tab span {
		font-size: 0.74rem;
	}

	.ht-tab-extra {
		display: none;
	}
}

/* =========================================================
   Exact match of the approved preview (sizes measured from design-previews/header.html)
========================================================= */
@media (min-width: 992px) {

	.ht-hero {
		height: calc(73px + 300px);
		padding: 73px 0 0;
	}

	.ht-hero-inner {
		max-width: none;
		padding: 0 60px;
	}

	.ht-hero-lead {
		max-width: none;
		font-size: 22px;
		font-weight: 600;
		line-height: 1.45;
		letter-spacing: 0.3px;
	}

	.ht-hero-trust {
		gap: 8px 18px;
		margin-top: 16px;
		font-size: 14px;
	}

	.ht-hero-trust i {
		display: none;
	}

	.ht-hero-trust li::before {
		content: "\2713";
		margin-right: 6px;
		color: #f7a21c;
		font-weight: 700;
	}

	.ht-search-content {
		max-width: 760px;
	}

	.ht-search-tabs {
		gap: 6px;
		padding: 0 20px;
	}

	.ht-search-tab span {
		padding: 16px 18px;
		font-size: 15px;
	}

	.ht-search-post {
		font-size: 15px;
	}

	.ht-search-post small {
		font-size: 12px;
	}

	.ht-search-bar {
		gap: 12px;
		padding: 14px 20px;
	}

	.ht-search-city {
		height: auto;
		line-height: normal;
		padding: 0 16px 0 0;
		border-right: 1px solid #eee;
		border-radius: 0;
		background: none;
		font-size: 16px;
		font-weight: 600;
		color: #0a3557;
	}

	.ht-search-city > .fa-location-dot {
		display: none;
	}

	.ht-search-field > i {
		color: #6b7480;
	}

	/* The preview's search box and Search button use the browser default font (Arial) */
	.ht-search-input {
		font-family: Arial, sans-serif;
		font-size: 15px;
	}

	.ht-search-filter-btn {
		height: auto;
		line-height: normal;
		padding: 10px 16px;
		border-radius: 10px;
		font-size: 15px;
		font-weight: 600;
	}

	.ht-search-submit {
		height: auto;
		line-height: normal;
		padding: 12px 28px;
		border-radius: 8px;
		font-family: Arial, sans-serif;
		font-size: 15px;
		font-weight: 700;
	}
}

/* ---------------- Sections below the search: preview spacing, colours and px sizes ---------------- */
#services.modern-grid-section,
.ht-sec {
	background: #f3f4f6;
}

body:has(.ht-search-wrap) {
	background: #f3f4f6;
}

#services .section-header,
.ht-sec .section-header {
	margin-bottom: 0;
}

#services .sub-badge,
.ht-sec .sub-badge {
	margin-bottom: 0;
	padding: 6px 14px;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 1.2px;
}

#services .section-title,
.ht-sec .section-title {
	margin: 14px 0 8px;
	line-height: 1.35;
}

#services .section-desc,
.ht-sec .section-desc {
	color: #5b6573;
}

/* Same 16px gap both ways as the preview (Bootstrap's row gutters were bigger) */
#servicesGrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0 auto;
}

#servicesGrid > * {
	width: auto;
	margin: 0;
	padding: 0;
}

#servicesGrid > .service-detail-col {
	grid-column: 1 / -1;
}

#servicesGrid .icon-box {
	background: #fff4e2;
	color: #f7a21c;
}

#servicesGrid .service-card p {
	color: #5b6573;
}

#servicesGrid .service-more {
	color: #0a3557 !important;
}

@media (min-width: 992px) {

	#services.modern-grid-section {
		padding: 44px 0 52px;
	}

	.ht-sec {
		padding: 8px 0 52px;
	}

	#services .section-title,
	.ht-sec .section-title {
		font-size: 26px;
	}

	#services .section-desc,
	.ht-sec .section-desc {
		margin: 0 0 28px;
		font-size: 14px;
		line-height: 19px;
	}

	#servicesGrid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
		max-width: 940px;
	}

	#servicesGrid .service-card p,
	#servicesGrid .service-more {
		font-size: 13px;
	}

	.ht-builders,
	.ht-reviews {
		max-width: 940px;
	}

	.ht-show-more {
		font-size: 14px;
	}

	.ht-review blockquote {
		font-size: 14px;
	}

	.ht-review-av {
		font-size: 13px;
	}
}

@media (min-width: 992px) {

	.ht-search-wrap {
		padding-bottom: 0;
	}
}

/* "+ Post property Free" in the search card: same padding as a tab, like the preview */
@media (min-width: 992px) {

	.ht-search-post {
		align-self: stretch;
		display: flex;
		align-items: center;
		margin: 0 0 0 auto;
		padding: 16px 18px;
		font-size: 15px;
		font-weight: 600;
		color: #0a3557;
	}

	.ht-search-post small {
		margin-left: 4px;
		font-size: 12px;
		font-weight: 600;
		color: #d98a00;
	}
}

/* City "Bangalore ▾", Filters and Search: flat, exactly like the preview */
@media (min-width: 992px) {

	.ht-search-city-caret {
		display: none !important;
	}

	.ht-search-city {
		gap: 0;
	}

	.ht-search-city::after {
		content: "\25BE";
		margin-left: 6px;
		font-size: 16px;
		color: #0a3557;
	}

	.ht-search-filter-btn {
		gap: 8px;
		border: 1px solid #e3e7ec;
		background: #ffffff;
		color: #0a3557;
		box-shadow: none;
	}

	.ht-search-filter-btn .fa-sliders {
		font-size: 17px;
		color: #0a3557;
	}

	.ht-search-filter-btn:hover {
		border-color: #cfd8e3;
		background: #f8fafc;
	}

	.ht-search-submit {
		background: #0a3557;
		box-shadow: none;
		transform: none;
	}

	.ht-search-submit:hover {
		background: #13497a;
		box-shadow: none;
		transform: none;
	}
}

/* Search tabs: blue text, and a small zoom when the mouse is on a tab */
.ht-search-tab span {
	color: #0a3557 !important;
	transition: transform 0.18s ease, color 0.18s ease;
}

.ht-search-tab:hover span {
	color: #0a3557;
	transform: scale(1.08);
}

/* City "Bangalore ▾": no grey background, small zoom when the mouse is on it */
.ht-search-city,
.ht-search-city:hover,
.ht-city.is-open .ht-search-city {
	background: transparent !important;
	box-shadow: none !important;
}

.ht-search-city {
	transition: transform 0.18s ease;
}

.ht-search-city:hover {
	transform: scale(1.08);
}

/* City list: no building icons, a thin line between cities */
.ht-city-option-icon {
	display: none !important;
}

.ht-city-option {
	padding: 11px 12px;
	border-radius: 0;
	border-bottom: 0.5px solid #e3e7ec;
}

.ht-city-option:last-child {
	border-bottom: 0;
}

/* City list: narrower box, city names line up under "Bangalore", tick closer */
.ht-city-menu {
	left: 0;
	min-width: 0;
	width: 175px;
	top: calc(100% + 6px);
}

.ht-city-menu-title,
.ht-city-option {
	padding-left: 6px;
	padding-right: 8px;
}

/* City list: left edge level with the search box; slim light-grey scroll bar */
@media (min-width: 992px) {
	.ht-city-menu {
		left: -20px;
		width: 195px;
	}

	.ht-city-menu-title,
	.ht-city-option {
		padding-left: 26px;
	}
}

.ht-city-menu {
	scrollbar-width: thin;
	scrollbar-color: #d6dbe2 transparent;
}

.ht-city-menu::-webkit-scrollbar {
	width: 4px;
}

.ht-city-menu::-webkit-scrollbar-thumb {
	background: #d6dbe2;
	border-radius: 4px;
}

.ht-city-menu::-webkit-scrollbar-track {
	background: transparent;
}

/* Short light-grey line between the search tabs (gap above and below) */
.ht-search-tab + .ht-search-tab::before {
	content: "";
	position: absolute;
	left: -2.5px;
	top: 30%;
	bottom: 30%;
	width: 1px;
	background: #dfe3e8;
}

/* Commercial on desktop: Filters open as a pop-up in the middle, page dimmed behind it */
@media (min-width: 992px) {
	body.filters-popup {
		overflow: hidden;
	}

	body.filters-popup .ht-hero {
		z-index: auto;
	}

	body.filters-popup .ht-search-wrap,
	body.filters-popup .ht-search-card {
		z-index: 1070;
	}

	body.filters-popup .ht-filter-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 2;
		background: rgba(10, 22, 42, 0.55);
		animation: htPopFade 0.25s ease;
	}

	body.filters-popup .ht-filter-panel.is-open {
		position: fixed;
		top: 50%;
		left: 50%;
		right: auto;
		z-index: 3;
		width: min(760px, calc(100vw - 48px));
		max-height: 85vh;
		overflow-y: auto;
		transform: translate(-50%, -50%);
		animation: htPopIn 0.3s ease;
	}

	body.filters-popup .floating-whatsapp {
		opacity: 0;
		pointer-events: none;
	}
}

@keyframes htPopFade {
	from { opacity: 0; }
}

@keyframes htPopIn {
	from { opacity: 0; transform: translate(-50%, -46%) scale(0.97); }
}