/* ── Navbar ─────────────────────────────────────────────── */
#navbar {
	transition: box-shadow 0.2s ease;
}
#navbar.nav-scrolled {
	box-shadow: var(--shadow-nav);
}

.nav-item-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: var(--navbar-height);
	padding: 0 14px;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 700;
	color: var(--color-dark);
	white-space: nowrap;
	text-decoration: none;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	transition:
		color 0.15s ease,
		border-color 0.15s ease,
		background 0.15s ease;
}
@media (min-width: 1280px) {
	.nav-item-btn {
		padding: 0 16px;
	}
}

.nav-item-btn:hover,
.nav-item-btn.active {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
	background: rgba(245, 247, 250, 0.6);
}
.nav-item-btn .chevron {
	transition: transform 0.2s ease;
}
.nav-item-btn.active .chevron {
	transform: rotate(180deg);
}

/* ── Mega Menu ───────────────────────────────────────────── */
.mega-panel {
	display: none;
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
	transition:
		opacity 0.2s ease,
		transform 0.2s ease;
}
.mega-panel.open {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.mega-accent {
	height: 3px;
	background: linear-gradient(
		90deg,
		var(--color-primary) 0%,
		rgba(31, 79, 216, 0.45) 55%,
		transparent 100%
	);
}
.sec-icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 8px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
}
.mega-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--radius-xl);
	font-size: 14px;
	font-weight: 500;
	color: #4b5563;
	text-decoration: none;
	transition:
		color 0.15s ease,
		background 0.15s ease,
		box-shadow 0.15s ease;
}
.mega-link:hover {
	color: var(--color-primary);
	background: var(--color-white);
	box-shadow: 0 1px 4px 0 rgba(11, 26, 51, 0.08);
}
.link-icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 8px;
	background: var(--color-white);
	border: 1px solid rgba(224, 224, 224, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}
.mega-link:hover .link-icon {
	border-color: rgba(31, 79, 216, 0.3);
	box-shadow: 0 1px 4px 0 rgba(31, 79, 216, 0.1);
}

/* ── Badges ──────────────────────────────────────────────── */
.badge {
	display: inline-flex;
	align-items: center;
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 4px 12px;
	border-radius: 6px;
	white-space: nowrap;
}
.badge-new {
	background: var(--color-green);
	color: #fff;
}
.badge-hot {
	background: var(--color-orange);
	color: #fff;
}
.badge-featured {
	background: var(--color-accent);
	color: #fff;
}
.badge-verified {
	background: var(--color-primary);
	color: #fff;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	background: var(--color-primary);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	border-radius: var(--radius-xl);
	border: none;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 4px 14px 0 rgba(31, 79, 216, 0.25);
	transition:
		background 0.15s ease,
		transform 0.15s ease,
		box-shadow 0.15s ease;
}
.btn-primary:hover {
	background: #1541b8;
	transform: translateY(-1px);
}
.btn-primary:active {
	transform: scale(0.97);
}

.btn-accent {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	background: var(--color-accent);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	border-radius: var(--radius-xl);
	border: none;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 4px 14px 0 rgba(229, 57, 53, 0.25);
	transition:
		background 0.15s ease,
		transform 0.15s ease;
}
.btn-accent:hover {
	background: #d32f2f;
	transform: scale(1.03);
}
.btn-accent:active {
	transform: scale(0.97);
}

.btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 22px;
	background: transparent;
	color: var(--color-primary);
	font-weight: 700;
	font-size: 14px;
	border-radius: var(--radius-xl);
	border: 2px solid var(--color-primary);
	cursor: pointer;
	text-decoration: none;
	transition:
		background 0.15s ease,
		color 0.15s ease;
}
.btn-outline:hover {
	background: var(--color-primary);
	color: #fff;
}

.btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	color: var(--color-primary);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	text-decoration: none;
	padding: 0;
	transition: gap 0.15s ease;
}
.btn-ghost:hover {
	gap: 10px;
}

/* ── Property Card ───────────────────────────────────────── */
.property-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-2xl);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition:
		box-shadow 0.3s ease,
		transform 0.3s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
}
.property-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-4px);
}
.property-card-img {
	position: relative;
	height: 200px;
	overflow: hidden;
}
.property-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.property-card:hover .property-card-img img {
	transform: scale(1.08);
}

/* ── Spotlight card (in mega menus) ─────────────────────── */
.feat-card {
	transition: box-shadow 0.2s ease;
}
.feat-card:hover {
	box-shadow: var(--shadow-card-hover);
}
.feat-img-wrap {
	position: relative;
	height: 144px;
	overflow: hidden;
}
.feat-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.feat-card:hover .feat-img-wrap img {
	transform: scale(1.05);
}

/* ── Blog Card ───────────────────────────────────────────── */
.blog-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-2xl);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition:
		box-shadow 0.2s ease,
		transform 0.2s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.blog-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

/* ── Section headers ─────────────────────────────────────── */
.sec-eyebrow {
	color: var(--color-accent);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 8px;
}
.sec-title {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--color-dark);
}
.sec-accent {
	color: var(--color-primary);
}

/* ── Form inputs ─────────────────────────────────────────── */
.form-input {
	width: 100%;
	padding: 12px 16px;
	background: var(--color-surface);
	border: 1px solid transparent;
	border-radius: var(--radius-xl);
	font-size: 14px;
	color: var(--color-dark);
	outline: none;
	transition:
		border-color 0.15s ease,
		background 0.15s ease,
		box-shadow 0.15s ease;
}
.form-input::placeholder {
	color: var(--color-muted);
}
.form-input:focus {
	border-color: var(--color-primary);
	background: var(--color-white);
	box-shadow: 0 0 0 3px rgba(31, 79, 216, 0.1);
}
.form-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: var(--color-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 8px;
}

/* ── Custom dropdown ─────────────────────────────────────── */
.dropdown-wrapper {
	position: relative;
}
.dropdown-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 16px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	font-size: 14px;
	font-weight: 700;
	color: var(--color-dark);
	cursor: pointer;
	text-align: left;
	transition:
		border-color 0.15s ease,
		background 0.15s ease,
		box-shadow 0.15s ease;
}
.dropdown-trigger:hover {
	background: #eaecef;
}
.dropdown-trigger.open {
	border-color: var(--color-primary);
	background: var(--color-white);
	box-shadow: 0 0 0 3px rgba(31, 79, 216, 0.1);
}
.dropdown-trigger .icon-left {
	color: var(--color-primary);
	flex-shrink: 0;
}
.dropdown-trigger .chevron-icon {
	color: var(--color-primary);
	flex-shrink: 0;
	transition: transform 0.2s ease;
}
.dropdown-trigger.open .chevron-icon {
	transform: rotate(180deg);
}
.dropdown-menu {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-card-hover);
	z-index: 100;
	overflow: hidden;
	padding: 4px;
}
.dropdown-menu.open {
	display: block;
}
.dropdown-item {
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-dark);
	cursor: pointer;
	border-radius: 8px;
	transition:
		background 0.1s ease,
		color 0.1s ease;
}
.dropdown-item:hover {
	background: var(--color-surface);
	color: var(--color-primary);
}
.dropdown-item.selected {
	color: var(--color-primary);
	background: rgba(31, 79, 216, 0.05);
}

/* ── Mobile drawer ───────────────────────────────────────── */
#mobile-drawer {
	transform: translateX(-100%);
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
#mobile-drawer.open {
	transform: translateX(0);
}
.mob-sub {
	display: none;
}
.mob-sub.open {
	display: block;
}
.mob-acc .acc-icon {
	transition: transform 0.2s ease;
}

/* ── WhatsApp button ─────────────────────────────────────── */
.wa-float {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 999;
	background: var(--color-whatsapp);
	color: #fff;
	border-radius: 9999px;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 20px 0 rgba(37, 211, 102, 0.4);
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
	text-decoration: none;
	cursor: pointer;
	border: none;
}
.wa-float:hover {
	transform: scale(1.1);
	box-shadow: 0 8px 28px 0 rgba(37, 211, 102, 0.5);
}
.wa-tooltip {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%);
	background: var(--color-white);
	color: var(--color-dark);
	font-size: 13px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 8px;
	box-shadow: var(--shadow-card-hover);
	border: 1px solid var(--color-border);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}
.wa-float:hover .wa-tooltip {
	opacity: 1;
}

/* ── Hero blob ───────────────────────────────────────────── */
.hero-blob {
	position: absolute;
	border-radius: 9999px;
	filter: blur(100px);
	pointer-events: none;
}

/* ── Sidebar filters ─────────────────────────────────────── */
.filter-chip {
	padding: 6px 14px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 700;
	border: 1px solid var(--color-border);
	background: var(--color-white);
	color: #6b7280;
	cursor: pointer;
	transition: all 0.15s ease;
}
.filter-chip:hover,
.filter-chip.active {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

/* ── Area size chips (Aana filter) ─────────────────────────── */
.area-chip {
	background: var(--color-white);
	border: 2px solid transparent;
	border-radius: 1rem;
	padding: 1.25rem;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.area-chip:hover {
	transform: translateY(-4px);
	border-color: rgba(31, 79, 216, 0.5);
}
.area-chip.active {
	border-color: var(--color-primary);
}
.area-chip.active .area-chip-icon {
	background: var(--color-primary) !important;
	color: white !important;
}
.area-chip-icon {
	transition: all 0.2s ease;
}

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
	font-weight: 500;
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 6px 16px;
	border-radius: var(--radius-xl);
}
.breadcrumb-pill a:hover {
	color: #fff;
}
.breadcrumb-pill span.current {
	color: #fff;
}

/* ── Tool card ───────────────────────────────────────────── */
.tool-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-3xl);
	box-shadow: var(--shadow-card);
	padding: 32px;
}
.tool-result-box {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding: 20px 24px;
	text-align: center;
}
.tool-result-value {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 32px;
	color: var(--color-primary);
	line-height: 1;
}
.tool-result-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--color-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-top: 6px;
}

/* ── Range slider ────────────────────────────────────────── */
input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 99px;
	background: var(--color-border);
	outline: none;
	cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--color-primary);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(31, 79, 216, 0.3);
	cursor: pointer;
	transition: transform 0.15s ease;
}
input[type="range"]::-webkit-slider-thumb:hover {
	transform: scale(1.15);
}

/* ── Pagination ──────────────────────────────────────────── */
.page-btn {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-xl);
	font-size: 14px;
	font-weight: 700;
	border: 1px solid var(--color-border);
	background: var(--color-white);
	color: var(--color-dark);
	cursor: pointer;
	transition: all 0.15s ease;
}
.page-btn:hover {
	background: var(--color-surface);
}
.page-btn.active {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
	box-shadow: 0 4px 10px rgba(31, 79, 216, 0.3);
}
.page-btn.accent {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
}

/* ── Tab filter bar ──────────────────────────────────────── */
.tab-pill {
	padding: 10px 24px;
	border-radius: 9999px;
	font-size: 14px;
	font-weight: 700;
	border: 1px solid var(--color-border);
	background: var(--color-white);
	color: #6b7280;
	cursor: pointer;
	transition: all 0.15s ease;
	box-shadow: var(--shadow-card);
}
.tab-pill:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}
.tab-pill.active {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

/* ── FAQ Accordion ───────────────────────────────────────── */
.faq-body {
	max-height: 0;
	overflow: hidden;
	transition:
		max-height 0.3s ease,
		opacity 0.3s ease;
	opacity: 0;
}
.faq-body.open {
	max-height: 600px;
	opacity: 1;
}

/* ── Skeleton loader ─────────────────────────────────────── */
.skeleton {
	background: linear-gradient(
		90deg,
		var(--color-surface) 25%,
		#e8eaf0 50%,
		var(--color-surface) 75%
	);
	background-size: 200% 100%;
	animation: shimmer 1.4s ease-in-out infinite;
	border-radius: 8px;
}
@keyframes shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* ── Line clamp utilities ────────────────────────────────── */
.line-clamp-1 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.line-clamp-2 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.line-clamp-3 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* ── Utility: scroll snap ────────────────────────────────── */
.snap-x {
	scroll-snap-type: x mandatory;
}
.snap-center {
	scroll-snap-align: center;
}
.ags-multi-heading span {
	background: linear-gradient(to right, #4481eb, #04befe);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* ── Enhanced Skeleton Loaders ──────────────────────────── */

.skeleton-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-2xl);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	height: 100%;
}

.skeleton-card-image {
	width: 100%;
	height: 200px;
	background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
	background-size: 200% 100%;
	animation: skeleton-loading 1.5s infinite;
}

.skeleton-card-content {
	padding: 20px;
	space-y: 12px;
}

.skeleton-line {
	height: 12px;
	background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
	background-size: 200% 100%;
	animation: skeleton-loading 1.5s infinite;
	border-radius: 4px;
	margin-bottom: 12px;
}

.skeleton-line.short {
	width: 40%;
}

.skeleton-line.full {
	width: 100%;
}

.skeleton-heading {
	height: 20px;
	margin-bottom: 16px;
}

@keyframes skeleton-loading {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}
/* Gutenberg Right Sidebar - Resizable Left Edge */

#ags-sidebar-resize-handle {
	cursor: col-resize;
	transition: background 0.15s ease;
}

#ags-sidebar-resize-handle:hover {
	background: rgba(0, 86, 204, 0.2) !important;
}
.admin-ui-navigable-region.interface-interface-skeleton__sidebar, .interface-complementary-area.editor-sidebar{
overflow: scroll !important;
min-width: 500px !important;
max-width: 800px !important;
}