/*
Theme Name: Houzez Child
Theme URI: http://www.favethemes.com/
Author: Favethemes
Author URI: http://www.favethemes.com/
Description: Houzez is a premium WordPress theme for real estate agents where modern aesthetics are combined with tasteful simplicity, and where the ease of use is achieved without compromise in your ability to customise the design. Whether you are a real estate agent looking to build a website for your company or a web developer seeking a perfect WordPress theme for your next project, you are certain to appreciate the numerous features and benefits that our theme provides.
Version: 1.0
Tags: white, right-sidebar, left-sidebar, custom-colors, custom-menu, featured-images, post-formats, theme-options, translation-ready
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: houzez
Template: houzez
*/


@import url("../houzez/style.css");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap");


/* ==========================================================================
   PREMIUM UAE REAL ESTATE — Houzez Child Theme Custom Styles
   Palette inspired by Dubai luxury: navy, gold, sand, and clean white.
   All rules target existing Houzez classes — layout structure is untouched.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   Reusable colors, radii, and shadows. Change these to rebrand quickly.
   -------------------------------------------------------------------------- */
:root {
	--dl-gold: #c9a962;
	--dl-gold-light: #e8d5a3;
	--dl-gold-dark: #a8883f;
	--dl-navy: #0f1c2e;
	--dl-navy-soft: #1a2d45;
	--dl-charcoal: #2c3540;
	--dl-sand: #f7f4ef;
	--dl-sand-dark: #ebe6de;
	--dl-white: #ffffff;
	--dl-muted: #6b7280;
	--dl-border: rgba(15, 28, 46, 0.08);
	--dl-radius-sm: 8px;
	--dl-radius-md: 12px;
	--dl-radius-lg: 16px;
	--dl-radius-pill: 50px;
	--dl-shadow-soft: 0 4px 24px rgba(15, 28, 46, 0.06);
	--dl-shadow-card: 0 8px 32px rgba(15, 28, 46, 0.08);
	--dl-shadow-hover: 0 16px 48px rgba(15, 28, 46, 0.12);
	--dl-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* --------------------------------------------------------------------------
   2. GLOBAL TYPOGRAPHY & SPACING
   Cleaner body text, elegant headings, softer page background.
   -------------------------------------------------------------------------- */
body {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--dl-charcoal);
	background-color: var(--dl-sand);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: 0.01em;
	line-height: 1.65;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.listing-wrap .page-title,
.item-title,
.item-title a,
.property-grid-item .item-title {
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--dl-navy);
}

.page-title,
.listing-wrap .page-title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	margin-bottom: 0.5em;
}

p,
.item-address,
.item-author,
.item-date {
	color: var(--dl-muted);
}

.main-content-wrap,
.listing-wrap {
	padding-top: 8px;
}


/* --------------------------------------------------------------------------
   3. BUTTONS — rounded, refined, luxury feel
   Applies to all Houzez buttons without changing their size or layout.
   -------------------------------------------------------------------------- */
.btn,
.btn-item,
.btn-primary,
.btn-secondary,
.btn-primary-outlined,
.btn-secondary-outlined,
.btn-outline-primary,
.btn-outline-secondary,
.btn-light-grey-outlined,
.btn-grey-outlined,
.btn-call,
.btn-load-more,
.search-banner-wrap .btn,
.advanced-search-v3 .btn-apply {
	border-radius: var(--dl-radius-pill) !important;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: none;
	transition:
		background-color var(--dl-transition),
		border-color var(--dl-transition),
		color var(--dl-transition),
		box-shadow var(--dl-transition),
		transform var(--dl-transition);
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-load-more:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(15, 28, 46, 0.15);
}

.btn-primary,
.btn-secondary {
	box-shadow: 0 4px 14px rgba(15, 28, 46, 0.2);
}

.btn-primary-outlined,
.btn-outline-primary,
.btn-secondary-outlined,
.btn-outline-secondary {
	border-width: 1.5px;
}

.btn-slim,
.btn-item {
	border-radius: var(--dl-radius-sm) !important;
	letter-spacing: 0.03em;
}

.btn-item {
	padding: 0 16px;
	font-size: 13px;
}


/* --------------------------------------------------------------------------
   4. PROPERTY LISTING CARDS — grid view
   Modern card shape, soft shadow, smooth hover lift.
   -------------------------------------------------------------------------- */
.grid-view .item-wrap,
.item-wrap-v6 .item-wrap {
	border-radius: var(--dl-radius-lg);
	overflow: hidden;
	border: 1px solid var(--dl-border);
	background-color: var(--dl-white);
	box-shadow: var(--dl-shadow-soft);
	transition:
		box-shadow var(--dl-transition),
		transform var(--dl-transition),
		border-color var(--dl-transition);
}

.grid-view .item-listing-wrap,
.grid-view .item-listing-wrap-v4 {
	margin-bottom: 28px;
}

.grid-view .item-wrap:hover,
.item-wrap-v6 .item-wrap:hover {
	box-shadow: var(--dl-shadow-hover);
	transform: translateY(-4px);
	border-color: rgba(201, 169, 98, 0.25);
}

/* Rounded image corners on grid cards */
.grid-view .item-wrap.item-wrap-no-frame .hover-effect,
.item-wrap-v6 .item-header {
	border-top-left-radius: var(--dl-radius-lg);
	border-top-right-radius: var(--dl-radius-lg);
}

.grid-view .item-footer {
	border-top: 1px solid var(--dl-border);
	border-bottom-left-radius: var(--dl-radius-lg);
	border-bottom-right-radius: var(--dl-radius-lg);
	background-color: var(--dl-white);
}

.grid-view .item-body,
.item-wrap-v6 .item-body {
	padding: 22px 24px;
}

.item-body {
	padding: 22px 24px;
}


/* --------------------------------------------------------------------------
   5. PROPERTY LISTING CARDS — list view
   Horizontal cards with matching luxury styling.
   -------------------------------------------------------------------------- */
.list-view .item-wrap {
	border-radius: var(--dl-radius-lg);
	overflow: hidden;
	border: 1px solid var(--dl-border);
	background-color: var(--dl-white);
	box-shadow: var(--dl-shadow-soft);
	margin-bottom: 24px;
	transition:
		box-shadow var(--dl-transition),
		transform var(--dl-transition);
}

.list-view .item-wrap:hover {
	box-shadow: var(--dl-shadow-hover);
	transform: translateY(-2px);
}

.list-view .item-wrap.item-wrap-no-frame .hover-effect {
	border-top-left-radius: var(--dl-radius-lg);
	border-bottom-left-radius: var(--dl-radius-lg);
}

.list-view .item-body {
	padding: 24px 28px;
}

.list-view .item-footer {
	border-top: 1px solid var(--dl-border);
	padding: 16px 24px;
}


/* --------------------------------------------------------------------------
   6. CARD CONTENT — titles, prices, amenities
   Sharper hierarchy: large elegant titles, bold gold-accent prices.
   -------------------------------------------------------------------------- */
.item-title {
	font-size: 1.25rem;
	line-height: 1.35;
	margin-bottom: 6px;
}

.item-title a {
	text-decoration: none;
	transition: color var(--dl-transition);
}

.item-title a:hover {
	color: var(--dl-gold-dark);
}

.item-address {
	font-size: 13px;
	line-height: 1.5;
	margin-bottom: 12px;
}

.item-address i {
	color: var(--dl-gold);
	margin-right: 4px;
}

/* Price badge on card image */
.item-price-wrap {
	padding: 8px 14px;
	border-radius: var(--dl-radius-sm);
	background-color: rgba(15, 28, 46, 0.82);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.item-price-wrap .item-price {
	font-family: "Inter", sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: var(--dl-gold-light);
	letter-spacing: 0.02em;
}

.item-price-wrap .item-sub-price {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.75);
	margin-top: 3px;
}

/* Beds, baths, area icons row */
.item-amenities {
	font-size: 13px;
	font-weight: 500;
	color: var(--dl-muted);
	gap: 4px;
}

.item-amenities li {
	padding: 0 8px;
}

.item-amenities li:first-child {
	padding-left: 0;
}

.item-amenities i {
	font-size: 16px;
	color: var(--dl-gold);
}

.item-amenities .h-type span {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--dl-navy-soft);
}

/* Card footer: agent name and date */
.item-footer {
	padding: 16px 24px;
}

.item-author,
.item-date,
.item-author a {
	font-size: 12px;
	color: var(--dl-muted);
}


/* --------------------------------------------------------------------------
   7. LABELS & BADGES — Featured, For Sale, etc.
   Pill-shaped tags with gold accent for premium listings.
   -------------------------------------------------------------------------- */
.label,
.labels-wrap .label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 6px 12px;
	border-radius: var(--dl-radius-pill);
	background-color: rgba(15, 28, 46, 0.75);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.label-featured,
.item-header .label-featured,
.item-wrap-v3 .label-featured {
	background: linear-gradient(135deg, var(--dl-gold) 0%, var(--dl-gold-dark) 100%);
	color: var(--dl-navy);
	border: none;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(201, 169, 98, 0.35);
}


/* --------------------------------------------------------------------------
   8. CARD TOOLS — favourite, compare, photo count icons
   Circular glass-style buttons on property images.
   -------------------------------------------------------------------------- */
.item-tool > span {
	width: 36px;
	height: 36px;
	line-height: 36px;
	border-radius: 50%;
	font-size: 14px;
	background-color: rgba(15, 28, 46, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition:
		background-color var(--dl-transition),
		transform var(--dl-transition);
}

.item-tool > span:hover {
	background-color: var(--dl-gold);
	color: var(--dl-navy);
	transform: scale(1.08);
}


/* --------------------------------------------------------------------------
   9. PARALLAX / GRID MODULE CARDS
   Full-bleed overlay cards used in Houzez grid modules.
   -------------------------------------------------------------------------- */
.property-grid-item {
	border-radius: var(--dl-radius-lg);
	overflow: hidden;
}

.property-grid-item .item-inner-wrap {
	padding: 28px;
	background: linear-gradient(
		to top,
		rgba(15, 28, 46, 0.88) 0%,
		rgba(15, 28, 46, 0.4) 55%,
		transparent 100%
	);
}

.property-grid-item .item-title {
	font-size: 1.5rem;
	color: var(--dl-white);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.property-grid-item .item-amenities li {
	color: rgba(255, 255, 255, 0.85);
}

.property-grid-item .item-amenities i {
	color: var(--dl-gold-light);
}


/* --------------------------------------------------------------------------
   10. SEARCH BAR & FORMS
   Rounded inputs matching the luxury button style.
   -------------------------------------------------------------------------- */
.form-control,
.bootstrap-select > .dropdown-toggle,
.search-banner-wrap .form-control {
	border-radius: var(--dl-radius-sm);
	border-color: var(--dl-border);
	font-family: "Inter", sans-serif;
	font-size: 14px;
	transition:
		border-color var(--dl-transition),
		box-shadow var(--dl-transition);
}

.form-control:focus,
.bootstrap-select > .dropdown-toggle:focus {
	border-color: var(--dl-gold);
	box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.15);
}

.search-banner-wrap {
	border-radius: var(--dl-radius-lg);
	box-shadow: var(--dl-shadow-card);
}


/* --------------------------------------------------------------------------
   11. LISTING TABS & FILTERS
   Cleaner tab navigation on search results pages.
   -------------------------------------------------------------------------- */
.listing-tabs .nav-tabs .nav-link,
.property-tabs-module .nav-tabs .nav-link {
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 14px;
	border-radius: var(--dl-radius-pill);
	padding: 8px 20px;
	transition: all var(--dl-transition);
}

.listing-tabs .nav-tabs .nav-link.active {
	font-weight: 600;
}


/* --------------------------------------------------------------------------
   12. BREADCRUMBS & PAGE SECTIONS
   Subtle separators and section spacing.
   -------------------------------------------------------------------------- */
.breadcrumb {
	font-size: 13px;
	font-family: "Inter", sans-serif;
	padding: 12px 0;
}

.breadcrumb-item a {
	color: var(--dl-muted);
	transition: color var(--dl-transition);
}

.breadcrumb-item a:hover {
	color: var(--dl-gold-dark);
}

.block-wrap,
.lined-block {
	border-radius: var(--dl-radius-md);
	border-color: var(--dl-border);
}


/* --------------------------------------------------------------------------
   13. HEADER — subtle polish
   Light shadow and refined nav links; does not alter header layout.
   -------------------------------------------------------------------------- */
.header-main-wrap {
	box-shadow: 0 2px 20px rgba(15, 28, 46, 0.06);
}

.header-main-wrap .main-nav .nav-item > a,
.houzez-nav-menu-main .nav-item > a {
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.02em;
	transition: color var(--dl-transition);
}


/* --------------------------------------------------------------------------
   14. IMAGE HOVER EFFECT
   Smooth zoom on property photos — keeps Houzez overlay intact.
   -------------------------------------------------------------------------- */
.hover-effect img {
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.item-wrap:hover .hover-effect img,
.property-grid-item:hover .hover-effect img {
	transform: scale(1.05);
}


/* --------------------------------------------------------------------------
   15. MOBILE RESPONSIVE
   Tighter spacing and readable sizes on small screens.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.grid-view .item-listing-wrap,
	.grid-view .item-listing-wrap-v4 {
		margin-bottom: 20px;
	}

	.grid-view .item-body,
	.item-body,
	.item-wrap-v6 .item-body {
		padding: 18px 16px;
	}

	.list-view .item-body {
		padding: 18px 16px;
	}

	.item-title {
		font-size: 1.1rem;
	}

	.item-price-wrap .item-price {
		font-size: 15px;
	}

	.item-footer {
		padding: 14px 16px;
	}

	.btn,
	.btn-primary,
	.btn-secondary {
		font-size: 13px;
	}

	/* Prevent hover lift from feeling jumpy on touch devices */
	.grid-view .item-wrap:hover,
	.list-view .item-wrap:hover,
	.item-wrap-v6 .item-wrap:hover {
		transform: none;
	}
}

@media (max-width: 575.98px) {
	.page-title,
	.listing-wrap .page-title {
		font-size: 1.5rem;
	}

	.label,
	.labels-wrap .label {
		font-size: 9px;
		padding: 5px 10px;
	}
}