/*
Theme Name: Houzez Child
Theme URI: http://www.favethemes.com/
Author: Favethemes
Author URI: http://www.favethemes.com/
Description: The5a Luxury - Dark Glass Design System
Version: 3.1
Template: houzez
*/

/* =====================================================
   THE5A DARK GLASS DESIGN SYSTEM v3.1
   Consolidated — All CSS in ONE file.
   
   Architecture:
   - Parent theme loaded via functions.php (wp_enqueue_style)
   - Google Fonts loaded via functions.php
   - This file ONLY contains overrides, glassmorphism, and fixes.
   
   Color System:
   - At-Rest Header: rgba(0, 31, 63, 0.65) — Premium Navy Glass
   - Sticky Header:  rgba(11, 17, 26, 0.85) — Deep Dark Glass
   - Backgrounds:    #0B111A / #0F172A
   - Accent:         #017A7D / #14B8A6 (Teal)

   CHANGELOG v3.1:
   - Fixed duplicate STEP 12 label (footer renamed to STEP 13)
   - Replaced map filter:invert() with CartoDB Dark Matter tile approach
   - Removed invalid display:flex from native <select> elements
   - Fixed btn-search border-radius/size conflict (now true 44px circle)
   - Removed redundant line-height on flex containers
   - Encoded # as %23 in all SVG data URIs for cross-browser safety
====================================================== */


/* ==========================================================
   STEP 1: Design Tokens (CSS Variables)
   Single source of truth for all colors, glass effects, fonts.
========================================================== */
:root {
    /* Colors */
    --t5-bg: #0B111A;
    --t5-bg-alt: #0F172A;
    --t5-surface: rgba(30, 41, 59, 0.4);
    --t5-teal: #017A7D;
    --t5-teal-light: #14B8A6;
    --t5-white: #FFFFFF;
    --t5-off-white: #F8FAFC;
    --t5-muted: #94A3B8;
    --t5-border: rgba(255, 255, 255, 0.08);
    --t5-steel-blue: #3E6F8E;

    /* Glass Effect */
    --glass-bg: rgba(15, 23, 42, 0.6);
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --glass-blur: blur(16px);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

    /* Header-Specific Glass */
    --header-rest-bg: transparent;
    --header-sticky-bg: rgba(11, 17, 26, 0.85);

    /* Typography */
    --font-heading: 'Outfit', sans-serif;
    --font-serif: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;

    /* Animation */
    --ease-luxury: cubic-bezier(0.16, 1, 0.3, 1);

    /* A-1 FIX: Missing variables referenced in popup/modal CSS */
    --t5-radius-sm: 8px;
    --t5-surface-dark: #0B111A;
    --t5-bg-overlay: rgba(11, 17, 26, 0.9);
}


/* ==========================================================
   STEP 2: Global Base Styles
========================================================== */
body,
.main-wrap,
#page,
.site {
    background-color: var(--t5-bg) !important;
    color: var(--t5-muted) !important;
    font-family: var(--font-body) !important;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.elementor-widget-heading .elementor-heading-title {
    font-family: var(--font-heading) !important;
    color: var(--t5-white) !important;
    font-weight: 300 !important;
    letter-spacing: -0.02em;
}

/* Italic serif accent — apply class "serif-accent" in Elementor */
.serif-accent,
em {
    font-family: var(--font-serif) !important;
    font-style: italic;
}

/* Links */
a {
    color: var(--t5-teal-light);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--t5-white);
}


/* ==========================================================
   STEP 3: Header Glassmorphism System (UNIFIED)
   
   Two states:
   A) At-Rest  → Premium Navy Glass (rgba(0,31,63,0.65))
   B) Sticky   → Deep Dark Glass    (rgba(11,17,26,0.85))
   
   The transition between them creates a cinematic scroll effect.
========================================================== */

/* 3A: At-Rest Header — Fully Transparent (Until Scrolled) */
#header-section.header-desktop,
#header-section.header-desktop.header-v4 {
    background-color: var(--header-rest-bg) !important;
    background: var(--header-rest-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: background 0.4s ease, backdrop-filter 0.4s ease,
        box-shadow 0.4s ease !important;
}

/* Kill any pseudo-element backgrounds from parent theme */
#header-section.header-desktop::before,
#header-section.header-desktop.header-v4::before {
    display: none !important;
}

/* 3A-FIX: Kill white boxes inside header */
#header-section .elementor-column,
#header-section .elementor-widget-container,
#header-section .elementor-element,
.header-inner-wrap .elementor-section,
.header-inner-wrap .elementor-column,
.header-right-area,
.header-cta,
.header-inner-wrap .widget,
.header-inner-wrap>div,
#header-section .header-main-nav,
#header-section .houzez-header-search,
#header-section .header-user-area,
.header-user-module,
.header-inner-wrap .houzez-user-module {
    background: transparent !important;
    background-color: transparent !important;
}

/* 3B: Sticky Header — Deep Dark Glass */
html body #header-section.sticky-nav-area,
html body #header-section.header-desktop.sticky-nav-area,
html body #header-section.header-desktop.header-v4.sticky-nav-area,
html body #header-section[data-sticky].sticky-nav-area {
    background-color: var(--header-sticky-bg) !important;
    background: var(--header-sticky-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--t5-border) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.4s ease !important;
}

/* 3C: Keep all inner wrappers transparent */
html body #header-section .header-inner-wrap,
html body #header-section .header-main-wrap,
html body #header-section .container,
html body #header-section.header-v4 .container,
html body #header-section.sticky-nav-area .container,
html body #header-section.sticky-nav-area .header-inner-wrap,
html body #header-section.sticky-nav-area .header-main-wrap,
html body #header-section .navbar,
html body #header-section.sticky-nav-area .navbar,
html body #header-section.sticky-nav-area .main-nav,
html body #header-section.sticky-nav-area .logged-in-nav-wrap,
html body #header-section .navbar-collapse,
html body #header-section .navbar-nav,
html body #header-section .nav-item,
html body #header-section .nav-link,
html body #header-section #main-nav {
    background-color: transparent !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 3D: Mobile header */
.header-mobile,
.header-mobile .header-inner-wrap {
    background-color: var(--t5-bg) !important;
}


/* ==========================================================
   STEP 4: Header Navigation Buttons (Pill Style)
========================================================== */
.main-nav .login-register a,
.header-inner-wrap .btn-primary,
.header-inner-wrap .btn-default,
.btn-call-to-action,
.btn-create-listing,
.header-contact-wrap a,
.header-inner-wrap .btn-create-listing {
    background: transparent !important;
    border: 1px solid var(--t5-teal) !important;
    color: var(--t5-teal-light) !important;
    border-radius: 999px !important;
    padding: 9px 22px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 12px !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    transition: all 0.35s ease !important;
}

.main-nav .login-register a:hover,
.header-inner-wrap .btn-primary:hover {
    background: var(--t5-teal) !important;
    color: var(--t5-white) !important;
}


/* ==========================================================
   STEP 4.5: Top Right Login / User Avatar
========================================================== */
html body .header-right-area .login-register a,
html body .header-right-area .user-icon,
html body .header-user-wrap .btn,
html body .navbar-logged-in-wrap>a.dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50px !important;
    background-color: var(--glass-bg) !important;
    border: 1px solid var(--t5-border) !important;
    color: var(--t5-white) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-left: 15px !important;
}

html body .navbar-logged-in-wrap>a.dropdown-toggle img.rounded {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
}

html body .header-right-area .login-register a:hover,
html body .header-right-area .user-icon:hover,
html body .navbar-logged-in-wrap>a.dropdown-toggle:hover {
    background-color: var(--t5-teal) !important;
    border-color: var(--t5-teal) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(1, 122, 125, 0.4) !important;
}

html body .header-right-area .login-register a i,
html body .navbar-logged-in-wrap .text {
    font-size: 1.1rem !important;
    margin: 0 !important;
}


/* ==========================================================
   STEP 5: Property Cards Glassmorphism
========================================================== */
.houzez-property-card {
    background: var(--glass-bg) !important;
    border: var(--glass-border) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border-radius: 20px !important;
    box-shadow: var(--glass-shadow) !important;
    transition: transform 0.5s var(--ease-luxury), box-shadow 0.5s ease !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
}

.houzez-property-card .item-body {
    flex: 1 1 auto !important;
    background: transparent !important;
    padding: 20px !important;
}

.houzez-property-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

.houzez-property-card .item-title a {
    color: var(--t5-white) !important;
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
}

.houzez-property-card .item-price-wrap,
.houzez-property-card .item-price {
    color: var(--t5-teal-light) !important;
    font-weight: 500 !important;
}

.houzez-property-card .item-address {
    color: var(--t5-muted) !important;
}

.houzez-property-card .detail-wrap,
.houzez-property-card .item-amenities {
    color: var(--t5-muted) !important;
}

/* Card Action Buttons */
.houzez-property-card .item-footer .btn-item,
.houzez-property-card .item-footer a.btn-item,
.houzez-property-card .item-footer button.btn-item,
/* E-1 FIX: Removed conflicting border-radius: 8px here — Section 6 (line ~1681)
   correctly defines 100px pill shape for all card footer buttons. Old 8px
   was causing cascade confusion between STEP 5 and STEP 6 rules. */
.item-wrap .item-footer .btn-item {
    flex: 1 1 32% !important;
    width: 32% !important;
    max-width: 33% !important;
    background-color: var(--t5-bg-alt) !important;
    color: var(--t5-white) !important;
    border: 1px solid var(--t5-border) !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.2px !important;
    transition: all 0.3s ease !important;
    padding: 0 5px !important;
}

.houzez-property-card .item-footer .btn-item i {
    color: var(--t5-teal) !important;
    margin-right: 6px !important;
    font-size: 13px !important;
}

.houzez-property-card .item-footer .btn-item:hover {
    background-color: var(--t5-surface) !important;
    border-color: var(--t5-teal) !important;
}


/* ==========================================================
   STEP 6: Search Module Glass (Pill Shape)
========================================================== */
/* C-1 FIX: Was rgba(15,25,45) — off-spec blue channel (25 vs 23). Now uses var(--glass-bg) */
.glass-search-module {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 999px !important;
    padding: 15px 30px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}

.glass-search-module .form-control,
.glass-search-module input {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: var(--t5-white) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 12px 0 !important;
    font-family: var(--font-body) !important;
}

/* FIX: select elements do not support display:flex — styled separately */
.glass-search-module select {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: var(--t5-white) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 12px 0 !important;
    font-family: var(--font-body) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.glass-search-module .form-control::placeholder,
.glass-search-module input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
}

.glass-search-module .btn-search {
    background: linear-gradient(135deg, var(--t5-teal), var(--t5-teal-light)) !important;
    color: var(--t5-white) !important;
    border: none !important;
    border-radius: 999px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 14px 36px !important;
    width: 100% !important;
    transition: opacity 0.3s ease !important;
}

.glass-search-module .btn-search:hover {
    opacity: 0.85 !important;
}


/* ==========================================================
   STEP 7: Utility Class for Glass Panels
   Apply CSS class "the5a-glass" to any Elementor Section/Column
========================================================== */
.the5a-glass {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: var(--glass-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--glass-shadow) !important;
}


/* ==========================================================
   STEP 8: White Element Overrides (Houzez Native)
========================================================== */
.content-area,
.houzez-box,
.widget,
.sidebar .widget,
.page-content {
    background: transparent !important;
    color: var(--t5-muted) !important;
}

.entry-content,
.post-content {
    color: var(--t5-muted) !important;
}


/* ==========================================================
   STEP 9: Forms (Global)
========================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea {
    background: rgba(15, 23, 42, 0.5) !important;
    border: 1px solid var(--t5-border) !important;
    color: var(--t5-white) !important;
    border-radius: 8px !important;
}

/* FIX: select is not a flex container — keep it as block-level */
select {
    background: rgba(15, 23, 42, 0.5) !important;
    border: 1px solid var(--t5-border) !important;
    color: var(--t5-white) !important;
    border-radius: 8px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* GLOBAL FOCUS RING — teal border + soft glow on every interactive field.
   Covers native inputs, selects, AND bootstrap-select toggle buttons. */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--t5-teal) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(1, 122, 125, 0.2) !important;
}

/* Bootstrap-select: open dropdown state gets teal ring */
.bootstrap-select.show>.dropdown-toggle,
.houzez-search-form-js .bootstrap-select.show>.dropdown-toggle {
    border-color: var(--t5-teal) !important;
    box-shadow: 0 0 0 3px rgba(1, 122, 125, 0.2) !important;
    outline: none !important;
}

/* Pill fields: teal ring when any child is focused */
.houzez-search-form-js .form-group:focus-within,
.houzez-search-form-js .bootstrap-select:focus-within {
    border-color: var(--t5-teal) !important;
    box-shadow: 0 0 0 3px rgba(1, 122, 125, 0.2) !important;
}


/* ==========================================================
   PHASE 4: Single Property Page — Surgical Dark Overrides
========================================================== */

.single-property .property-detail-wrap,
.single-property #content,
.single-property .content-area {
    background: transparent !important;
    color: var(--t5-muted) !important;
}

.single-property .property_title,
.single-property h1,
.single-property h2 {
    color: var(--t5-white) !important;
    font-family: var(--font-heading) !important;
    font-weight: 300 !important;
}

.single-property .price-wrap,
.single-property .item-price {
    color: var(--t5-teal-light) !important;
    font-weight: 500 !important;
}

.single-property .property-meta,
.single-property .property-features li,
.single-property .listing-details span,
.single-property .detail_item {
    color: var(--t5-muted) !important;
}

.single-property .agent-custom-form,
.single-property .agent-contact-form,
.single-property .widget-agent-wrap {
    background: var(--glass-bg) !important;
    border: var(--glass-border) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border-radius: 16px !important;
    padding: 24px !important;
}

.single-property .agent-custom-form h2,
.single-property .agent-custom-form h3,
.single-property .widget-agent-wrap h2,
.single-property .widget-agent-wrap h3 {
    color: var(--t5-white) !important;
}

.single-property .agent-custom-form label,
.single-property .agent-contact-form label {
    color: var(--t5-muted) !important;
}

.single-property .agent-custom-form input,
.single-property .agent-contact-form input,
.single-property .agent-custom-form textarea {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--t5-border) !important;
    color: var(--t5-white) !important;
    border-radius: 8px !important;
}

.single-property .agent-custom-form .btn-submit,
.single-property .agent-contact-form button[type="submit"] {
    background: linear-gradient(135deg, var(--t5-teal), var(--t5-teal-light)) !important;
    color: var(--t5-white) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 12px 30px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    width: 100% !important;
    transition: opacity 0.3s ease !important;
}

.single-property .agent-custom-form .btn-submit:hover {
    opacity: 0.85 !important;
}

.single-property .property-features ul li,
.single-property .amenities-list li,
.single-property .amenities_list li {
    color: var(--t5-muted) !important;
    font-family: var(--font-body) !important;
}

.single-property .property-features ul li i,
.single-property .amenities-list li i {
    color: var(--t5-teal-light) !important;
}

.single-property .property-description-wrap,
.single-property .tab-content p {
    color: var(--t5-muted) !important;
    line-height: 1.8 !important;
}

.single-property .property-tabs .nav-tabs .nav-link {
    color: var(--t5-muted) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    font-family: var(--font-body) !important;
}

.single-property .property-tabs .nav-tabs .nav-link.active {
    color: var(--t5-teal-light) !important;
    border-bottom-color: var(--t5-teal) !important;
    background: transparent !important;
}

.single-property #property-map-wrap {
    border: var(--glass-border) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.single-property .sidebar .widget,
.single-property aside.widget-area {
    background: var(--glass-bg) !important;
    border: var(--glass-border) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin-bottom: 24px !important;
}

.single-property .sidebar .widget-title {
    color: var(--t5-white) !important;
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    border-bottom: 1px solid var(--t5-border) !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
}


/* ==========================================================
   STEP 10: Houzez Native Block Fallbacks
========================================================== */

.property-wrap .block-wrap,
.property-detail-wrap .block-wrap,
#property-description-wrap,
#property-features-wrap,
#property-address-wrap,
#property-schedule-tour-wrap,
#property-video-wrap,
#property-floor-plans-wrap,
.houzez-property-review-wrap,
.houzez-form-wrap {
    background-color: var(--t5-bg-alt) !important;
    border: 1px solid var(--t5-border) !important;
    border-radius: 16px !important;
}

.property-top-navigation,
.property-menu-wrap,
.property-top-navigation .nav-link,
.property-top-navigation .container,
.property-top-navigation .navbar,
.property-top-navigation-wrap,
#property-top-navigation {
    background-color: var(--t5-bg) !important;
    background: var(--t5-bg) !important;
    border-bottom: 1px solid var(--t5-border) !important;
}

.property-top-navigation a,
.property-menu-wrap a {
    color: var(--t5-muted) !important;
}

.property-top-navigation a.active,
.property-top-navigation a:hover,
.property-menu-wrap a.active,
.property-menu-wrap a:hover {
    color: var(--t5-teal-light) !important;
}

#property-mortgage-wrap,
#property-walkscore-wrap,
#property-yelp-wrap,
#property-school-wrap,
#property-similar-wrap {
    background-color: var(--t5-bg-alt) !important;
    border: 1px solid var(--t5-border) !important;
    border-radius: 16px !important;
}

.property-form-wrap,
.widget-wrap,
.schedule-tour-wrap,
.sidebar-agent-form {
    background: var(--glass-bg) !important;
    border: var(--glass-border) !important;
    border-radius: 16px !important;
}

.property-form-wrap h2,
.property-form-wrap h3,
.property-form-wrap label,
.schedule-tour-wrap label,
.widget-wrap label {
    color: var(--t5-white) !important;
}

.property-form-wrap input,
.property-form-wrap textarea,
.schedule-tour-wrap input,
.schedule-tour-wrap textarea,
.sidebar-agent-form input,
.sidebar-agent-form textarea,
.widget-wrap input,
.widget-wrap textarea {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--t5-border) !important;
    color: var(--t5-white) !important;
    border-radius: 8px !important;
}

/* FIX: select elements separated — no flex, no line-height */
.property-form-wrap select,
.schedule-tour-wrap select,
.sidebar-agent-form select,
.widget-wrap select {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--t5-border) !important;
    color: var(--t5-white) !important;
    border-radius: 8px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Datepicker */
.bootstrap-datetimepicker-widget,
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th,
.datepicker,
.datepicker table tr td.day {
    background: var(--t5-bg-alt) !important;
    color: var(--t5-white) !important;
    border: none !important;
}

.bootstrap-datetimepicker-widget table td.day:hover,
.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
    background: var(--t5-teal) !important;
    color: var(--t5-white) !important;
}

/* Breadcrumbs */
.breadcrumb-wrap,
.breadcrumbs-inner {
    background: transparent !important;
}

.breadcrumb-wrap a,
.breadcrumb-wrap span {
    color: var(--t5-muted) !important;
    font-family: var(--font-body) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
}

.breadcrumb-wrap .active {
    color: var(--t5-teal-light) !important;
}

/* Pagination */
.pagination a,
.page-numbers {
    color: var(--t5-muted) !important;
    background: transparent !important;
    border: 1px solid var(--t5-border) !important;
}

.pagination .current,
.page-numbers.current {
    background: var(--t5-teal) !important;
    color: var(--t5-white) !important;
    border-color: var(--t5-teal) !important;
}

.property-item .item-title a,
.item-wrap .item-title a {
    color: var(--t5-white) !important;
}

.property-item .item-price,
.item-wrap .item-price {
    color: var(--t5-teal-light) !important;
}


/* ==========================================================
   STEP 11: Listing Page Architecture (Property Archive)
========================================================== */

/* 11A: Main Listing Wrappers */
.listing-wrap,
.property-listing-wrap,
.half-map-wrap,
#houzez-listing-area,
.listing-v1,
.listing-v2,
.listing-v3,
.listing-v4,
.listing-v5,
.listing-v6,
.listing-v7,
.listing-v8 {
    background-color: transparent !important;
}

/* 11B: Top Page Title / Sort Bar */
.page-title-wrap,
.listing-switch-view,
.sort-by,
.listing-tabs {
    background-color: var(--t5-bg) !important;
    border-color: var(--t5-border) !important;
}

.page-title-wrap h1,
.listing-switch-view .title,
.sort-by .sort-title {
    color: var(--t5-white) !important;
    font-family: var(--font-heading) !important;
}

/* 11C: Listing Sidebar */
.listing-sidebar,
.sidebar-wrap,
.advanced-search-sidebar,
.sticky-sidebar {
    background: transparent !important;
}

.listing-sidebar .widget,
.sidebar-wrap .widget,
.advanced-search-sidebar .widget {
    background: var(--glass-bg) !important;
    border: var(--glass-border) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

.listing-sidebar .widget-title,
.advanced-search-sidebar .widget-title {
    color: var(--t5-white) !important;
    border-bottom: 1px solid var(--t5-border) !important;
}

.advanced-search-sidebar label {
    color: var(--t5-muted) !important;
}

.advanced-search-sidebar .form-control,
.advanced-search-sidebar .bootstrap-select>.dropdown-toggle {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--t5-border) !important;
    color: var(--t5-white) !important;
    border-radius: 8px !important;
}

.advanced-search-sidebar .btn-search {
    background: linear-gradient(135deg, var(--t5-teal), var(--t5-teal-light)) !important;
    color: var(--t5-white) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 12px 30px !important;
}

/* 11D: Half-Map */
.half-map-left-wrap,
.half-map-right-wrap {
    background-color: var(--t5-bg) !important;
}

.map-search-wrap,
.map-wrap {
    border-left: 1px solid var(--t5-border) !important;
    border-right: 1px solid var(--t5-border) !important;
    background-color: var(--t5-bg-alt) !important;
}

/* 11E: Listing Property Cards */
.listing-v1 .item-wrap,
.listing-v2 .item-wrap,
.listing-v3 .item-wrap,
.listing-v4 .item-wrap,
.listing-v5 .item-wrap,
.listing-v6 .item-wrap,
.item-wrap {
    background: var(--glass-bg) !important;
    border: var(--glass-border) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border-radius: 20px !important;
    box-shadow: var(--glass-shadow) !important;
    transition: transform 0.5s var(--ease-luxury), box-shadow 0.5s ease !important;
}

.item-wrap:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(1, 122, 125, 0.3) !important;
}

.item-wrap .item-body {
    background: transparent !important;
}

.item-wrap .item-footer {
    background: transparent !important;
    border-top: 1px solid var(--t5-border) !important;
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}

.item-wrap .item-title a {
    color: var(--t5-white) !important;
    font-family: var(--font-heading) !important;
}

.item-wrap .item-price,
.item-wrap .item-price-wrap {
    color: var(--t5-teal-light) !important;
    font-weight: 500 !important;
}

.item-wrap .item-address,
.item-wrap .item-amenities,
.item-wrap .item-footer {
    color: var(--t5-muted) !important;
}

.item-wrap .item-author a {
    color: var(--t5-teal-light) !important;
}


/* ==========================================================
   STEP 11.5: Hero Search Module Polish
========================================================== */
html body .elite-hero .nav-tabs .nav-link,
html body .elementor-widget-houzez_elementor_search_builder .nav-pills .nav-link,
html body .houzez-status-tabs.nav-pills .nav-link {
    background-color: var(--glass-bg) !important;
    color: var(--t5-muted) !important;
    border: 1px solid var(--t5-border) !important;
    border-radius: 50px !important;
    padding: 10px 24px !important;
    font-weight: 500 !important;
    backdrop-filter: var(--glass-blur) !important;
    transition: all 0.3s var(--ease-luxury) !important;
}

html body .elite-hero .nav-tabs .nav-item.active .nav-link,
html body .elite-hero .nav-tabs .nav-link.active,
html body .elementor-widget-houzez_elementor_search_builder .nav-pills .nav-link.active,
html body .houzez-status-tabs.nav-pills .nav-item.active>.nav-link,
html body .houzez-status-tabs.nav-pills .nav-link.active {
    background-color: var(--t5-teal) !important;
    color: var(--t5-white) !important;
    border-color: var(--t5-teal) !important;
    box-shadow: 0 4px 15px rgba(1, 122, 125, 0.4) !important;
}

html body .elite-hero .search-wrap,
html body .elementor-widget-houzez_elementor_search_builder form,
html body .houzez-search-builder-wrapper,
html body .houzez-search-form-js .form-group,
html body .houzez-search-form-js .bootstrap-select>button {
    border-radius: 50px !important;
}

html body .houzez-search-wrapper .search-wrap {
    overflow: hidden !important;
    border-radius: 50px !important;
    box-shadow: var(--glass-shadow) !important;
    background-color: var(--t5-bg-alt) !important;
}

html body .houzez-search-wrapper .form-control {
    background-color: transparent !important;
    border: none !important;
    color: var(--t5-white) !important;
}


/* ==========================================================
   STEP 12: Homepage Elite Template Styles
========================================================== */
.elite-hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 800px;
    overflow: hidden;
    margin-left: calc(-50vw + 50%);
}

.elite-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('https://images.unsplash.com/photo-1512453979798-5ea266f8880c?q=80&w=2000&auto=format&fit=crop') center/cover no-repeat;
    z-index: 1;
}

.elite-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(8, 14, 25, 0.8) 0%, rgba(15, 25, 45, 0.6) 100%);
    z-index: 2;
}

.elite-hero-content {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
}

/* D-1 FIX: font-weight changed 500→300 to match DESIGN.md heading spec */
.elite-hero h1 {
    color: var(--t5-white) !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    margin-bottom: 10px;
    font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
    font-weight: 300 !important;
}

.elite-hero p {
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 50px;
    font-size: clamp(1rem, 1.5vw, 1.25rem) !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.elite-search-wrapper {
    width: 100%;
    max-width: 900px;
    position: relative;
    transform: translateY(20px);
}

.elite-section {
    padding: 100px 0;
    background-color: var(--t5-bg) !important;
    color: #FFFFFF !important;
}

.elite-subtitle {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--t5-steel-blue);
    margin-bottom: 15px;
    display: block;
    font-weight: 500;
}

.elite-hero .search-wrap {
    padding: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}


/* ==========================================================
   STEP 13: Footer (Ensure Dark Consistency)
   (was mislabeled as STEP 12 in v3.0 — fixed)
========================================================== */
footer,
.footer-wrap,
.footer-inner,
#footer,
.site-footer {
    background-color: var(--t5-bg) !important;
    color: var(--t5-muted) !important;
}

footer a,
.footer-wrap a {
    color: var(--t5-muted) !important;
    transition: color 0.3s ease !important;
}

footer a:hover,
.footer-wrap a:hover {
    color: var(--t5-teal-light) !important;
}

footer h4,
footer .widget-title {
    color: var(--t5-white) !important;
}

.footer-bottom,
.footer-bottom-inner {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid var(--t5-border) !important;
}


/* ==========================================================
   STEP 14: Mobile Responsive Adjustments
   F-1/F-2/F-3 FIX: Added tablet (1024px), mobile-L (430px),
   and mobile-S (375px) breakpoints. Previous gaps caused layout
   breaks on iPhone SE, Plus models, and iPad landscape.
========================================================== */

/* ── Tablet Landscape (iPad Pro, Surface) ─────────────────── */
@media (max-width: 1024px) {
    .elite-hero {
        min-height: 650px;
    }

    .elite-hero h1 {
        font-size: clamp(2rem, 5.5vw, 3.5rem) !important;
    }

    .elite-section {
        padding: 80px 0;
    }

    .about-hero-title {
        font-size: clamp(2.2rem, 5vw, 4rem) !important;
    }

    .houzez-ele-search-form-wrapper.elementor-form-fields-wrapper {
        flex-wrap: wrap !important;
        border-radius: 20px !important;
        padding: 12px !important;
    }

    .houzez-ele-search-form-wrapper .elementor-col-20 {
        flex: 1 1 100% !important;
    }
}

/* ── Tablet Portrait & Laptop (standard 992px breakpoint) ─── */
@media (max-width: 992px) {
    .elite-hero {
        min-height: 600px;
    }

    .elite-hero h1 {
        font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
    }

    .elite-section {
        padding: 60px 0;
    }

    .glass-search-module {
        border-radius: 16px !important;
        padding: 20px !important;
    }
}

/* ── Mobile Standard (768px) ──────────────────────────────── */
@media (max-width: 768px) {
    .houzez-property-card .item-tools a {
        flex: 1 1 30% !important;
        max-width: 33% !important;
        margin-bottom: 0 !important;
        height: 36px !important;
    }

    .about-hero-title {
        font-size: clamp(2rem, 8vw, 2.8rem) !important;
    }

    .about-quote-text {
        font-size: clamp(1.4rem, 5vw, 2rem) !important;
    }

    .elite-hero p {
        font-size: clamp(0.9rem, 3vw, 1.1rem) !important;
        margin-bottom: 30px;
    }

    .elite-section {
        padding: 50px 0;
    }

    .houzez-ele-search-form-wrapper.elementor-form-fields-wrapper {
        flex-direction: column !important;
        border-radius: 16px !important;
        padding: 12px !important;
        gap: 8px !important;
    }

    .houzez-ele-search-form-wrapper .elementor-col-70,
    .houzez-ele-search-form-wrapper .elementor-col-10,
    .houzez-ele-search-form-wrapper .elementor-col-20 {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    .houzez-ele-search-form-wrapper .houzez-search-button {
        width: 100% !important;
    }
}

/* ── Mobile Large (iPhone Plus, Android flagship) ─────────── */
@media (max-width: 430px) {
    .elite-hero {
        min-height: 500px;
    }

    .elite-hero h1 {
        font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
    }

    .about-hero-title {
        font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
    }

    .about-glass-container {
        padding: 24px !important;
    }

    .item-wrap .item-footer .btn-item {
        font-size: 9px !important;
        padding: 0 6px !important;
    }

    .the5a-glass {
        border-radius: 12px !important;
    }

    .glass-search-module {
        border-radius: 12px !important;
        padding: 16px !important;
    }
}

/* ── Mobile Small (iPhone SE, older Android) ──────────────── */
@media (max-width: 375px) {
    .elite-hero {
        min-height: 450px;
    }

    .elite-hero h1 {
        font-size: clamp(1.4rem, 8vw, 1.8rem) !important;
    }

    .elite-hero p {
        font-size: 0.85rem !important;
        margin-bottom: 20px;
    }

    .about-hero-title {
        font-size: clamp(1.6rem, 9vw, 2rem) !important;
    }

    .about-card-title {
        font-size: 1.4rem !important;
    }

    .about-quote-text {
        font-size: 1.2rem !important;
    }

    .houzez-property-card .item-footer .btn-item,
    .item-wrap .item-footer .btn-item {
        font-size: 8px !important;
        padding: 0 4px !important;
        gap: 3px !important;
    }

    .elite-section {
        padding: 40px 0;
    }

    .about-glass-container {
        padding: 20px !important;
    }
}


/* ==========================================================
   PHASE 5: Listing Page & Half-Map Dark Overrides
========================================================== */

/* 5.1: Dark Map — CartoDB Dark Matter tile approach via JS hint.
   NOTE: To fully darken the Leaflet map without inverting markers,
   set the tile layer in your JS/PHP to:
   'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
   
   The CSS below applies a subtle dark base ONLY as a fallback
   for the loading state — it does NOT invert markers or popups.
*/
.leaflet-container,
#houzez-listing-map,
#mapview {
    background: var(--t5-bg) !important;
}

/* FIX: Removed filter:invert() — it was breaking map markers and popups.
   If you need a dark map, switch the tile layer URL in your Leaflet init code.
   Example tile URL for dark map: 
   https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png
*/

/* 5.2: Map Popups */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background-color: var(--t5-bg-alt) !important;
    color: var(--t5-white) !important;
    border: var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    backdrop-filter: var(--glass-blur) !important;
}

.leaflet-popup-content {
    color: var(--t5-white) !important;
}

.leaflet-popup-content a {
    color: var(--t5-teal-light) !important;
}

.leaflet-control-attribution {
    background: rgba(0, 0, 0, 0.4) !important;
    color: var(--t5-muted) !important;
}


/* ==========================================================
   6.0: EMIRATES ELITE — Search Bar Overrides
========================================================== */

/* 1. UNIVERSAL PILL & HEIGHT LOCK (44px)
   FIX: Removed select from this block — select cannot be a flex container.
   FIX: Removed line-height from flex elements — align-items:center handles it.
*/
.houzez-search-form-js .form-group,
.houzez-search-form-js .form-control,
.houzez-search-form-js .bootstrap-select>.btn,
.houzez-search-form-js .bootstrap-select>.dropdown-toggle,
.houzez-search-form-js .btn-search,
.houzez-search-form-js .reset-search-btn,
.houzez-search-form-js .advanced-search-btn,
.houzez-search-form-js .houzez-keyword-autocomplete,
.houzez_filter_main .form-control,
.houzez_filter_main .bootstrap-select>.btn,
.houzez-search-form-js .btn-light-grey-outlined {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    border-radius: 100px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background-color: var(--t5-bg-alt) !important; /* B-1 FIX */
    color: var(--t5-white) !important; /* B-1 FIX */
    margin-bottom: 0 !important;
}

/* Keyword wrapper must match dropdown pill backgrounds exactly */
html body .houzez-search-form-js .search-keyword-wrap,
html body .houzez-search-form-js .form-group:first-child {
    background-color: var(--t5-bg-alt) !important; /* B-2 FIX */
    border-radius: 100px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* FIX: Select elements handled separately — block display, no flex */
.houzez-search-form-js select,
.houzez_filter_main select {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    border-radius: 100px !important;
    padding: 0 20px !important;
    display: block !important;
    box-shadow: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background-color: var(--t5-bg-alt) !important; /* B-3 FIX */
    color: var(--t5-white) !important; /* B-3 FIX */
    margin-bottom: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Clear Button */
.houzez-search-form-js .reset-search-btn {
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 11px !important;
}

/* ── DOUBLE ICON FIX ──────────────────────────────────────────
   ROOT CAUSE (confirmed from HTML source):
   Houzez wraps the keyword input in <div class="search-icon">.
   The theme stylesheet injects the icon via .search-icon::before
   using the houzez-icon font (NOT an <i> tag). At the same time,
   our CSS was also injecting a background-image SVG on the input,
   producing the QQ double-icon.

   FIX:
   A) Nuke .search-icon::before and ::after completely.
   B) Make .search-icon itself layout-neutral (no extra padding/spacing).
   C) Inject ONE SVG icon via background-image on the input only.
   D) Also kill any <i> tags inside advanced-search-btn (confirmed in HTML).
──────────────────────────────────────────────────────────── */

/* Step A: Kill the font icon injected by houzez-icon on .search-icon */
html body .houzez-search-form-js .search-icon::before,
html body .houzez-search-form-js .search-icon::after {
    display: none !important;
    content: none !important;
    font-size: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
}

/* Step B: Make .search-icon a neutral transparent passthrough */
html body .houzez-search-form-js .search-icon {
    background: transparent !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

/* Step C: ONE clean SVG on the input — muted teal color to match pill text */
html body .houzez-search-form-js .houzez-keyword-autocomplete {
    padding-left: 46px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="%2394A3B8" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: 16px center !important;
    justify-content: flex-start !important;
    background-color: transparent !important;
    width: 100% !important;
    text-align: left !important;
}

/* Step D: Kill the <i class="houzez-icon icon-Filter-Faders"> inside advanced-search-btn
   (confirmed in HTML: <i class="houzez-icon icon-Filter-Faders" aria-hidden="true">)
   The button already has our SVG background-image so the <i> must be invisible */
html body .houzez-search-form-js .advanced-search-btn i.houzez-icon,
html body .houzez-search-form-js .advanced-search-btn i {
    display: none !important;
    font-size: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
}

/* ── CLEAR BUTTON FIX ─────────────────────────────────────────
   HTML confirmed: <button class="btn reset-search-btn btn-grey-outlined">
   Bootstrap's .btn-grey-outlined was winning the cascade.
   We target all three class combos to guarantee override.
──────────────────────────────────────────────────────────── */
html body .houzez-search-form-js .reset-search-btn,
html body .houzez-search-form-js .reset-search-btn.btn-grey-outlined,
html body .houzez-search-form-js button.reset-search-btn,
html body .houzez-search-form-js button.reset-search-btn.btn-grey-outlined {
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 100px !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--t5-muted) !important; /* B-4 FIX */
    padding: 0 22px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: border-color 0.2s ease, color 0.2s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
}

html body .houzez-search-form-js .reset-search-btn:hover,
html body .houzez-search-form-js a.reset-search-btn:hover {
    border-color: var(--t5-teal-light) !important;
    color: var(--t5-teal-light) !important;
}

/* Homepage sticky fix */
html body.home .houzez-search-form-js.houzez-is-sticky,
html body.home .houzez-is-sticky,
html body.home [data-elementor-type="section"].elementor-sticky {
    position: relative !important;
    top: 0 !important;
    box-shadow: none !important;
    z-index: 1 !important;
    transition: none !important;
}

/* Show search bar on archives */
html body.archive .houzez-search-form-js,
html body.page-template-property-listing .houzez-search-form-js {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 2. DROPDOWN GHOST NUKE */
.bootstrap-select .dropdown-menu {
    background-color: var(--t5-bg-alt) !important; /* B-5 FIX */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
    padding: 5px 0 !important;
}

.bootstrap-select .dropdown-menu li a {
    color: var(--t5-off-white) !important; /* B-6 FIX: #cbd5e1 ≈ --t5-off-white */
    background: transparent !important;
    padding: 10px 20px !important;
    transition: all 0.2s ease !important;
}

.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu li.active a {
    background-color: rgba(20, 184, 166, 0.2) !important;
    color: #ffffff !important;
    outline: none !important;
}

/* FIX: encoded %23 in teal hex color */
.bootstrap-select.show-tick .dropdown-item.selected span.check-mark {
    color: var(--t5-teal-light) !important; /* B-7 FIX */
}

/* 3. BUTTON HARMONIZATION */

/* Advanced Filter Button — listing page form
   FIX: Using the correct Bootstrap Icons sliders SVG (balanced 3-line filter look).
   The old path was 3 vertical dots — not the filter/sliders shape.
   FIX: Added hover effect. */
html body .houzez-search-form-js .advanced-search-btn {
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    background-color: var(--t5-teal-light) !important; /* B-8 FIX */
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="%23ffffff" viewBox="0 0 16 16"><path d="M11.5 2a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2a.5.5 0 0 1 .5-.5zm-9 0a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-1 0v-12a.5.5 0 0 1 .5-.5zm4.5 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM9.047 4H1.5a.5.5 0 0 1 0-1h7.547a1.5 1.5 0 0 1 2.906 0H14.5a.5.5 0 0 1 0 1h-2.547a1.5 1.5 0 0 1-2.906 0zM8 9H1.5a.5.5 0 0 1 0-1H8a1.5 1.5 0 0 1 2.906 0H14.5a.5.5 0 0 1 0 1h-3.594a1.5 1.5 0 0 1-2.906 0z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

html body .houzez-search-form-js .advanced-search-btn:hover {
    opacity: 0.82 !important;
    transform: scale(1.08) !important;
}

html body .houzez-search-form-js .advanced-search-btn i,
html body .houzez-search-form-js .advanced-search-btn::before,
html body .houzez-search-form-js .advanced-search-btn::after {
    display: none !important;
}

/* Search button hover */
html body .houzez-search-form-js .btn-search:hover {
    opacity: 0.82 !important;
    transform: scale(1.08) !important;
}

/* CLEAR button hover (already styled as pill) */
html body .houzez-search-form-js .reset-search-btn:hover,
html body .houzez-search-form-js button.reset-search-btn:hover {
    border-color: var(--t5-teal-light) !important;
    color: var(--t5-teal-light) !important;
}

/* FIX: Search button — explicit width+height as a true circle (was conflicting with universal 60px width)
   FIX: encoded %23 in SVG fill */
html body .houzez-search-form-js .btn-search {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    border-radius: 50% !important;
    background-color: var(--t5-teal-light) !important; /* B-9 FIX */
    color: transparent !important;
    font-size: 0 !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%23ffffff" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    flex-shrink: 0 !important;
}

html body .houzez-search-form-js .btn-search::before {
    display: none !important;
}

/* 4. PRICE RANGE SLIDER
   FIX: Right handle z-index so it's always draggable on top.
   FIX: Hover/active scale effect for tactile feel.
   Covers both Houzez native range inputs AND jQuery UI slider fallback.
*/
.range-text,
.price-range-text {
    color: #ffffff !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
    display: block !important;
}

/* Native <input type="range"> dual-handle layout */
.sliders_control {
    position: relative !important;
    height: 26px !important;
}

.sliders_control input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: absolute !important;
    width: 100% !important;
    height: 5px !important;
    background: transparent !important;
    pointer-events: none !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Webkit thumb */
.sliders_control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 3px solid #14B8A6 !important;
    cursor: grab !important;
    pointer-events: all !important;
    box-shadow: 0 0 8px rgba(20, 184, 166, 0.4) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    z-index: 2 !important;
    position: relative !important;
}

/* Firefox thumb */
.sliders_control input[type="range"]::-moz-range-thumb {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 3px solid #14B8A6 !important;
    cursor: grab !important;
    pointer-events: all !important;
    box-shadow: 0 0 8px rgba(20, 184, 166, 0.4) !important;
}

/* RIGHT handle (hz-price-range-to / last range) always on top */
.sliders_control input[type="range"]:last-of-type,
.sliders_control .hz-price-range-to,
input.hz-price-range-to {
    z-index: 3 !important;
}

/* Active drag feel */
.sliders_control input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.25) !important;
    box-shadow: 0 0 16px rgba(20, 184, 166, 0.7) !important;
    cursor: grabbing !important;
}

/* jQuery UI slider fallback */
.ui-slider-horizontal {
    height: 5px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    border-radius: 99px !important;
}

.ui-slider-range {
    background: #14B8A6 !important;
    border-radius: 99px !important;
}

.ui-slider-horizontal .ui-slider-handle {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 3px solid #14B8A6 !important;
    top: -9px !important;
    cursor: grab !important;
    box-shadow: 0 0 10px rgba(20, 184, 166, 0.3) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    z-index: 2 !important;
}

/* Right jQuery UI handle always on top */
.ui-slider-horizontal .ui-slider-handle:last-child {
    z-index: 3 !important;
}

.ui-slider-horizontal .ui-slider-handle:hover,
.ui-slider-horizontal .ui-slider-handle:focus {
    transform: scale(1.2) !important;
    box-shadow: 0 0 16px rgba(20, 184, 166, 0.6) !important;
    outline: none !important;
}

/* 5. OTHER FEATURES BUTTON */
.houzez-search-form-js .features-list-btn {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.houzez-search-form-js .features-list-btn i {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    background-color: var(--t5-teal-light) !important; /* B-10 FIX */
    border-radius: 50% !important;
    color: var(--t5-white) !important; /* B-10 FIX */
    text-align: center !important;
    margin-right: 12px !important;
}

/* ==========================================================
   6. PROPERTY CARD FOOTER — GRID & LIST VIEW
   
   Problem: Houzez renders CALL / EMAIL / WHATSAPP buttons using
   the houzez-icon font for icons. The WhatsApp icon specifically
   (icon-whatsapp or similar class) fails to render consistently
   across browsers because the font glyph is unreliable.
   
   FIX STRATEGY:
   A) Keep the font <i> tags for CALL and EMAIL (they render fine).
   B) Target WhatsApp button specifically and inject a clean SVG
      via background-image, hiding the broken font icon.
   C) Fix list view button layout so WHATSAPP doesn't get clipped.
========================================================== */

/* 6A: Footer container — same for both grid and list views */
.houzez-property-card .item-footer,
.item-listing-wrap .item-footer,
.item-wrap .item-footer {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 12px 15px !important;
    background-color: transparent !important;
    border: none !important;
    align-items: center !important;
}

/* 6B: All three buttons — shared base style */
.houzez-property-card .item-footer .btn-item,
.item-listing-wrap .item-footer .btn-item,
.item-wrap .item-footer .btn-item {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    height: 38px !important;
    background-color: var(--t5-bg-alt) !important; /* B-11 FIX */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 100px !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
    padding: 0 10px !important;
}

/* 6C: Hover state — all buttons */
.houzez-property-card .item-footer .btn-item:hover,
.item-listing-wrap .item-footer .btn-item:hover,
.item-wrap .item-footer .btn-item:hover {
    background-color: rgba(20, 184, 166, 0.1) !important;
    border-color: #14B8A6 !important;
    color: #14B8A6 !important;
}

/* 6D: Font icons for CALL and EMAIL — these render fine, just size them */
.houzez-property-card .item-footer .btn-item i,
.item-listing-wrap .item-footer .btn-item i,
.item-wrap .item-footer .btn-item i {
    font-size: 13px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* 6E: WHATSAPP button — inject reliable SVG, hide broken font icon.
   Houzez targets whatsapp with class containing 'whatsapp' in the href
   or a data attribute. We target the button that contains whatsapp text
   using :has() where supported, with an attribute fallback. */

/* Target by href on the anchor (most reliable — Houzez uses <a> tags) */
.item-footer a.btn-item[href*="wa.me"],
.item-footer a.btn-item[href*="whatsapp"],
.item-footer a.btn-item[href*="api.whatsapp"],
.item-wrap .item-footer a[href*="wa.me"],
.item-wrap .item-footer a[href*="whatsapp"] {
    /* Hide the broken font icon inside this specific button */
    gap: 0 !important;
    padding-left: 28px !important;
    position: relative !important;
    /* Clean WhatsApp SVG as background icon */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="%23ffffff"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
    background-size: 14px 14px !important;
}

/* Hide the font <i> inside the whatsapp button specifically */
.item-footer a.btn-item[href*="wa.me"] i,
.item-footer a.btn-item[href*="whatsapp"] i,
.item-footer a.btn-item[href*="api.whatsapp"] i,
.item-wrap .item-footer a[href*="wa.me"] i,
.item-wrap .item-footer a[href*="whatsapp"] i {
    display: none !important;
}

/* Hover: swap to teal WhatsApp icon */
.item-footer a.btn-item[href*="wa.me"]:hover,
.item-footer a.btn-item[href*="whatsapp"]:hover,
.item-footer a.btn-item[href*="api.whatsapp"]:hover,
.item-wrap .item-footer a[href*="wa.me"]:hover,
.item-wrap .item-footer a[href*="whatsapp"]:hover {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="%2314B8A6"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>') !important;
}

/* 6F: LIST VIEW specific fixes.
   In list view the footer floats right — force it to stay in flow
   and prevent the WHATSAPP label from being clipped. */
.item-listing-wrap .item-footer {
    position: static !important;
    width: auto !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

/* List view buttons can be slightly wider since there's more horizontal room */
.item-listing-wrap .item-footer .btn-item {
    min-width: 90px !important;
    flex: 0 1 auto !important;
}

/* 7. VIEW TOGGLES */
.view-btn.active {
    color: var(--t5-teal-light) !important; /* B-12 FIX */
}

.view-btn {
    color: rgba(255, 255, 255, 0.4) !important;
    transition: color 0.2s ease !important;
}


/* ==========================================================
   STEP 15: Elementor Search Widget Overrides
   (Homepage hero uses houzez-ele-search-form-wrapper — 
    completely separate HTML from the listing page form.
    These rules ONLY target the Elementor variant.)

   HTML structure confirmed:
   .houzez-ele-search-form-wrapper
     .elementor-field-group          ← wrapper per field
       input.houzez-keyword-autocomplete
     .elementor-field-group          ← advanced btn wrapper
       button.advanced-search-btn
         <i class="houzez-icon icon-Filter-Faders">
     .elementor-field-group
       button.houzez-search-button
========================================================== */

/* 15A: Strip the double-box on the keyword field group.
   The "doubled" look comes from .elementor-field-group having
   its own background/border PLUS the input inside also has one.
   Make the group a transparent passthrough. */
.houzez-ele-search-form-wrapper .elementor-field-group {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 15B: Style the actual keyword input as the single visible pill */
.houzez-ele-search-form-wrapper input.houzez-keyword-autocomplete,
.houzez-ele-search-form-wrapper .elementor-field.houzez-keyword-autocomplete {
    height: 52px !important;
    border-radius: 100px !important;
    background-color: rgba(11, 17, 26, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    padding-left: 46px !important;
    padding-right: 20px !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: none !important;
    /* Single SVG search icon — muted grey to match placeholder */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="%2394A3B8" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: 16px center !important;
}

.houzez-ele-search-form-wrapper input.houzez-keyword-autocomplete::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

.houzez-ele-search-form-wrapper input.houzez-keyword-autocomplete:focus {
    border-color: var(--t5-teal) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(1, 122, 125, 0.2) !important;
}

/* 15C: Kill the houzez-icon font icon inside advanced-search-btn
   (confirmed: <i class="houzez-icon icon-Filter-Faders">)
   Then inject a clean SVG filter icon via background-image on the button. */
.houzez-ele-search-form-wrapper .advanced-search-btn i.houzez-icon,
.houzez-ele-search-form-wrapper .advanced-search-btn i {
    display: none !important;
    font-size: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
}

.houzez-ele-search-form-wrapper .advanced-search-btn {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 50% !important;
    background-color: #14B8A6 !important;
    border: none !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Sliders / filter SVG icon */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%23ffffff" viewBox="0 0 16 16"><path d="M11.5 2a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2a.5.5 0 0 1 .5-.5zm-9 0a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-1 0v-12a.5.5 0 0 1 .5-.5zm4.5 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM9.047 4H1.5a.5.5 0 0 1 0-1h7.547a1.5 1.5 0 0 1 2.906 0H14.5a.5.5 0 0 1 0 1h-2.547a1.5 1.5 0 0 1-2.906 0zM8 9H1.5a.5.5 0 0 1 0-1H8a1.5 1.5 0 0 1 2.906 0H14.5a.5.5 0 0 1 0 1h-3.594a1.5 1.5 0 0 1-2.906 0z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    transition: opacity 0.2s ease !important;
}

.houzez-ele-search-form-wrapper .advanced-search-btn:hover {
    opacity: 0.85 !important;
}

/* 15D: Style the Search submit button as a teal pill */
.houzez-ele-search-form-wrapper .houzez-search-button,
.houzez-ele-search-form-wrapper button.houzez-search-button {
    height: 52px !important;
    border-radius: 100px !important;
    background: linear-gradient(135deg, var(--t5-teal), var(--t5-teal-light)) !important;
    border: none !important;
    color: #ffffff !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 0 32px !important;
    transition: opacity 0.3s ease !important;
    width: 100% !important;
}

.houzez-ele-search-form-wrapper .houzez-search-button:hover {
    opacity: 0.85 !important;
}

/* 15E: Wrapper row layout — ensure correct flex alignment */
.houzez-ele-search-form-wrapper.elementor-form-fields-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: rgba(11, 17, 26, 0.6) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 100px !important;
    padding: 8px 8px 8px 4px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* The col-70 keyword field should grow to fill space */
.houzez-ele-search-form-wrapper .elementor-col-70 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* The col-10 (filter btn) and col-20 (search btn) stay fixed width */
.houzez-ele-search-form-wrapper .elementor-col-10 {
    flex: 0 0 auto !important;
}

.houzez-ele-search-form-wrapper .elementor-col-20 {
    flex: 0 0 160px !important;
}

/* ==========================================================
   PHASE 6: FINAL LUXURY POLISHING — SINGLE PROPERTY-SIDEBAR & SEARCH
   Surgical overrides to eliminate remaining Houzez white-boxes.
========================================================== */

/* 6.1: Sidebar Forms & Calculator Wrappers */
.single-property .property-schedule-tour-wrap,
.single-property .form-tour-wrap,
.single-property .agent-form-wrap,
.single-property .mortgage-calculator-wrap,
.single-property .property-sidebar .widget-wrap {
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* 6.2: Dark Inputs & Fields */
.single-property .form-control,
.single-property #tab_tour .form-control,
.single-property #tab_agent_form .form-control,
.mortgage-calculator-wrap .form-control,
.mortgage-calculator-wrap input {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    font-family: var(--font-body) !important;
}

.single-property .form-control:focus,
.mortgage-calculator-wrap .form-control:focus {
    border-color: var(--t5-teal) !important;
    box-shadow: 0 0 0 3px rgba(1, 122, 125, 0.2) !important;
    outline: none !important;
}

/* 6.3: Schedule Tour Dates & Buttons */
.tour-day-form .control--radio,
.tour-day-form .control--radio .control__indicator {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

.tour-day-form-slide-arrow {
    background: rgba(1, 122, 125, 0.7) !important;
    border: none !important;
    color: #fff !important;
}

.btn-light, 
.bootstrap-select .btn, 
.dropdown-toggle {
    background: rgba(15, 23, 42, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    outline: none !important;
}

.control-radio .control__indicator {
    background: rgba(0,0,0,0.4) !important;
    border: 1px solid var(--t5-border) !important;
}

/* 6.4: Tabs and Borders */
.nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.nav-tabs .nav-link {
    background: transparent !important;
    border: none !important;
    color: var(--t5-muted) !important;
    font-weight: 500 !important;
}

.nav-tabs .nav-link.active {
    background: transparent !important;
    border-bottom: 2px solid var(--t5-teal) !important;
    color: #ffffff !important;
}

.property-detail-wrap .block-title-wrap,
.property-details-list tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 6.5: Master Polish — Persistent Light Elements */
.mortgage-calculator .input-group-text {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--t5-teal) !important;
}

.tour-day-form-slide-item .control--radio,
.tour-type-form .control--radio span {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

.tour-day-form-slide-item .control--radio input:checked ~ .control__indicator,
.tour-type-form .control--radio input:checked ~ span {
    background: var(--t5-teal) !important;
    color: #ffffff !important;
}

.property-form-tabs .nav-tabs {
    background: rgba(0, 0, 0, 0.2) !important;
    border: none !important;
    border-radius: 8px 8px 0 0 !important;
}

.single-property .property-sidebar .form-control {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.bootstrap-select .btn-light, 
.bootstrap-select .dropdown-toggle {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* Fix for the white box behind the agent profile in sidebar */
.agent-details {
    background: transparent !important;
    border: none !important;
}

/* 6.6: Ultimate Schedule a Tour Form Fixes (from Exact HTML) */

/* Clear white backgrounds from all wrapping containers in the tabs */
.property-form-tabs .tab-content,
.property-form-tabs-tab-pane,
.property-tabs-module-tab-pane,
.property-schedule-tour-form-wrap,
#tab_tour,
#tab_agent_form {
    background: transparent !important;
    border: none !important;
}

/* Make sure the main widget background dominates */
.widget-property-form {
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Date control and Tour Type indicator buttons */
.property-schedule-tour-day-form-slide .control__indicator,
.property-schedule-tour-type-form .control__indicator {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

/* Active states for Date and Tour Type */
.property-schedule-tour-day-form-slide input:checked ~ .control__indicator,
.property-schedule-tour-type-form input:checked ~ .control__indicator {
    background: var(--t5-teal) !important;
    border-color: var(--t5-teal) !important;
    color: #ffffff !important;
}

/* Input Fields inside Tour Form */
.property-schedule-tour-form-wrap .form-control {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
}

.property-schedule-tour-form-wrap .form-control:focus {
    border-color: var(--t5-teal) !important;
    background: rgba(0, 0, 0, 0.4) !important;
}

/* Text overrides for elements inside the tour form */
.property-schedule-tour-form-title,
.control__indicator,
.gdpr-text-wrap,
.gdpr-text-wrap a {
    color: #ffffff !important;
}

.control__indicator_day {
    color: #ffffff !important;
    font-weight: bold !important;
}

/* 6.7: Property Sticky Navigation & Agent Form Buttons */

/* Sticky Header on Single Property */
.property-navigation-wrap.nav-fixed,
.property-navigation-wrap {
    background: rgba(15, 23, 42, 0.8) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.property-navigation-wrap .property-navigation-item a {
    color: var(--t5-muted) !important;
}

.property-navigation-wrap .property-navigation-item a:hover,
.property-navigation-wrap .property-navigation-item.active a {
    color: #ffffff !important;
    border-bottom: 2px solid var(--t5-teal) !important;
    background: transparent !important;
}

/* Agent Form Inputs Restyle */
#tab_agent_form .form-control,
.widget-property-form .form-control,
.widget-property-form .bootstrap-select .btn-light,
.widget-property-form .bootstrap-select .dropdown-toggle {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
}

#tab_agent_form .form-control:focus,
.widget-property-form .form-control:focus {
    border-color: var(--t5-teal) !important;
    background: rgba(0, 0, 0, 0.4) !important;
}

/* Primary Action Buttons (Send Message, Submit Request) */
.widget-property-form .btn-secondary,
.property-schedule-tour-form-wrap .btn-secondary {
    background: var(--t5-teal) !important;
    border: 1px solid var(--t5-teal) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.widget-property-form .btn-secondary:hover,
.property-schedule-tour-form-wrap .btn-secondary:hover {
    background: #14a093 !important; /* Slightly darker teal for hover */
    border-color: #14a093 !important;
}

/* Secondary Action Buttons (Call, WhatsApp, etc) */
.widget-property-form .hz-btn-call,
.widget-property-form .hz-btn-whatsapp,
.widget-property-form .btn-secondary-outlined,
.property-schedule-tour-form-wrap .btn-secondary-outlined {
    background: rgba(15, 23, 42, 0.5) !important;
    border: 1px solid var(--t5-teal) !important;
    color: var(--t5-teal) !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.widget-property-form .hz-btn-call:hover,
.widget-property-form .hz-btn-whatsapp:hover,
.widget-property-form .btn-secondary-outlined:hover,
.property-schedule-tour-form-wrap .btn-secondary-outlined:hover {
    background: var(--t5-teal) !important;
    color: #ffffff !important;
}

/* Sidebar Nav Tabs (Schedule a Tour / Request Info) */
.widget-property-form-wrap .nav-tabs,
.property-form-tabs .nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.widget-property-form-wrap .nav-link,
.property-form-tabs .nav-link {
    background: transparent !important;
    color: var(--t5-muted) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    font-weight: 500 !important;
    padding-bottom: 10px !important;
    border-radius: 0 !important;
}

.widget-property-form-wrap .nav-link:hover,
.property-form-tabs .nav-link:hover {
    color: #ffffff !important;
    border-color: transparent !important;
}

.widget-property-form-wrap .nav-link.active,
.property-form-tabs .nav-link.active {
    background: transparent !important;
    color: #ffffff !important;
    border-color: transparent !important;
    border-bottom: 2px solid var(--t5-teal) !important;
}

/* 6.8: List View Fixes - Prevent duplicate mobile footer on desktop */
@media (min-width: 768px) {
    .listing-view .item-footer.d-md-none,
    .item-listing-wrap-v2 .item-footer.d-md-none,
    .item-listing-wrap-v1 .item-footer.d-md-none {
        display: none !important;
    }
}

/* Force Agent Form Text Colors to White */
.widget-property-form label,
.widget-property-form .gdpr-text-wrap,
.widget-property-form .checkbox-title {
    color: #ffffff !important;
}

/* 6.9: Fullscreen Image Gallery Modal (Lightbox) */

/* Modal Container - Dark Overlay & Glass Blur */
.mfp-bg,
.mfp-wrap,
.houzez-image-gallery-wrap,
.houzez-popup-slider-v2 {
    background-color: var(--t5-bg-overlay) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    z-index: 999999 !important;
}

/* Image Expand Icon */
.popup-slider-v2-expand,
.houzez-image-gallery-expand {
    background-color: var(--t5-teal) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50% !important;
}


/* Modal Header & Close Button */
.popup-slider-v2-header,
.houzez-image-gallery-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.popup-slider-v2-close span,
.btn-close-pop {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Right Sidebar - Fix white bleeding and add glass layer */
.popup-slider-v2-sidebar-wrap,
.popup-slider-v2-sidebar-inner,
.popup-slider-v2-sidebar-inner .property-form-wrap,
.popup-slider-v2-sidebar-inner .property-form,
.lightbox-content-wrap,
.houzez-image-gallery-content {
    background-color: transparent !important;
    background: transparent !important;
}

.popup-slider-v2-sidebar-wrap {
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: var(--t5-surface-dark) !important; /* Switched to solid dark mode to avoid looking washed out grey */
}

/* Modal Agent Details Text */
.popup-slider-v2-sidebar-inner .agent-details .agent-name {
    color: #ffffff !important;
}

.popup-slider-v2-sidebar-inner .agent-details .view-listings {
    color: var(--t5-teal) !important;
}

/* Form Inputs within Modal */
.popup-slider-v2-sidebar-inner .form-control,
.popup-slider-v2-sidebar-inner .bootstrap-select > .dropdown-toggle {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-radius: var(--t5-radius-sm) !important;
}

.popup-slider-v2-sidebar-inner .form-control:focus,
.popup-slider-v2-sidebar-inner .bootstrap-select > .dropdown-toggle:focus {
    border-color: var(--t5-teal) !important;
    background: rgba(0, 0, 0, 0.2) !important;
}

.popup-slider-v2-sidebar-inner .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Standardize Modal Action Buttons (Using consistent heights and transparent boundaries) */

/* Send Message & Send Email */
.popup-slider-v2-sidebar-inner .btn-secondary,
.popup-slider-v2-sidebar-inner .btn-primary,
.popup-slider-v2-sidebar-inner .houzez_agent_property_form,
.popup-slider-v2-sidebar-inner .btn-send-message {
    background: var(--t5-teal) !important;
    border: 1px solid var(--t5-teal) !important;
    color: #ffffff !important;
    border-radius: var(--t5-radius-sm) !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 48px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.popup-slider-v2-sidebar-inner .btn-secondary:hover,
.popup-slider-v2-sidebar-inner .btn-primary:hover,
.popup-slider-v2-sidebar-inner .houzez_agent_property_form:hover,
.popup-slider-v2-sidebar-inner .btn-send-message:hover {
    background: #008a7e !important;
    border-color: #008a7e !important;
    color: #ffffff !important;
}

/* Call & WhatsApp */
.popup-slider-v2-sidebar-inner .hz-btn-call,
.popup-slider-v2-sidebar-inner .hz-btn-whatsapp,
.popup-slider-v2-sidebar-inner .btn-call,
.popup-slider-v2-sidebar-inner .btn-secondary-outlined {
    background: rgba(15, 23, 42, 0.5) !important;
    border: 1px solid var(--t5-teal) !important;
    color: var(--t5-teal) !important;
    border-radius: var(--t5-radius-sm) !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 48px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

/* Override inner span elements to eliminate arbitrary height issues */
.popup-slider-v2-sidebar-inner .hz-btn-call span,
.popup-slider-v2-sidebar-inner .hz-btn-whatsapp span,
.popup-slider-v2-sidebar-inner .houzez_agent_property_form span {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.popup-slider-v2-sidebar-inner .hz-btn-call:hover,
.popup-slider-v2-sidebar-inner .hz-btn-whatsapp:hover,
.popup-slider-v2-sidebar-inner .btn-call:hover,
.popup-slider-v2-sidebar-inner .btn-secondary-outlined:hover {
    background: var(--t5-teal) !important;
    color: #ffffff !important;
}

/* Navigation Controls Overlay */
.popup-slider-v2-main .slick-arrow,
.houzez-popup-slider-v2 .slick-arrow {
    background-color: rgba(0, 161, 148, 0.6) !important;
    backdrop-filter: blur(5px);
    border: none !important;
    border-radius: 50% !important;
    font-size: 0 !important; /* Nuke "Previous" / "Next" Text */
    color: transparent !important;
}

.popup-slider-v2-main .slick-arrow:hover,
.houzez-popup-slider-v2 .slick-arrow:hover {
    background-color: var(--t5-teal) !important;
}
.widget-property-form .agent-name {
    color: #ffffff !important;
}

/* ==========================================================================
   7.0 ABOUT US PAGE (EMIRATES ELITE LUXURY COMPONENTS)
   ========================================================================== */

/* Hero Section */
/* D-2 FIX: Changed fixed 4.5rem to responsive clamp — prevents overflow on mobile */
.about-hero-title {
    font-family: var(--font-heading, 'Outfit'), sans-serif !important;
    font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
    font-weight: 300 !important;
    color: var(--t5-white) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    margin-bottom: 20px !important;
    text-align: center !important;
}

.about-hero-subtitle {
    font-family: var(--font-serif, 'Playfair Display'), serif !important;
    font-size: 2rem !important;
    font-style: italic !important;
    color: var(--t5-teal-light) !important;
    margin-bottom: 30px !important;
    text-align: center !important;
}

.about-hero-text {
    font-family: var(--font-body, 'Inter'), sans-serif !important;
    color: var(--t5-off-white) !important;
    font-size: 1.25rem !important;
    max-width: 600px !important;
    line-height: 1.6 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* Base Glass Container */
.about-glass-container {
    background: var(--glass-bg) !important;
    border: var(--glass-border) !important;
    border-radius: 20px !important;
    padding: 40px !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    transition: transform 0.4s ease, box-shadow 0.4s ease !important;
    height: 100% !important; 
}

.about-glass-container:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

/* Founder Quote Container */
.about-quote-box {
    border-left: 4px solid var(--t5-teal) !important;
    padding-left: 30px !important;
    margin: 40px 0 !important;
}

.about-quote-text {
    font-family: var(--font-serif, 'Playfair Display'), serif !important;
    font-size: 2.2rem !important;
    font-style: italic !important;
    color: var(--t5-white) !important;
    line-height: 1.4 !important;
    letter-spacing: 0.5px !important;
}

/* Grid Card Typography */
.about-card-title {
    font-family: var(--font-heading, 'Outfit'), sans-serif !important;
    color: var(--t5-white) !important;
    font-size: 1.8rem !important;
    margin-bottom: 15px !important;
}

/* Founder Profile Styling */
.about-founder-img img {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--t5-teal) !important;
    padding: 4px !important;
    margin: 20px 0 !important;
    box-shadow: 0 4px 20px rgba(1, 122, 125, 0.3) !important;
}

.about-card-text {
    font-family: var(--font-body, 'Inter'), sans-serif !important;
    color: var(--t5-muted) !important;
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
}

/* Core Values Item */
.about-value-box {
    text-align: center !important;
    background: rgba(15, 23, 42, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    padding: 40px 20px !important;
    transition: all 0.3s ease !important;
}

.about-value-box:hover {
    border-color: var(--t5-teal) !important;
    background: rgba(1, 122, 125, 0.1) !important;
}

.about-value-title {
    font-family: var(--font-heading, 'Outfit'), sans-serif !important;
    color: var(--t5-teal-light) !important;
    margin-top: 20px !important;
    font-size: 1.25rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* ==========================================================
   D-3 AUDIT FIX: Blog Post Title Typography
   Problem: Blog section titles inherit browser/parent styles
   instead of the Outfit heading font, breaking typography
   system consistency across the homepage blog section.
   Selectors cover all standard Houzez blog post card layouts.
========================================================== */
.blog-post .entry-title,
.blog-post .post-title,
.entry-title a,
.post-title a,
.houzez-blog-post-title,
.hz-blog-content .entry-title,
.hz-blog-single-title,
.hz-blog-listing .entry-title,
article.post .entry-title,
article.page .entry-title {
    font-family: var(--font-heading) !important;
    font-weight: 300 !important;
    letter-spacing: -0.02em !important;
    color: var(--t5-white) !important;
    line-height: 1.2 !important;
}

.blog-post .entry-title a,
.hz-blog-listing .entry-title a,
article.post .entry-title a {
    color: var(--t5-white) !important;
    text-decoration: none !important;
    transition: color 0.25s ease !important;
}

.blog-post .entry-title a:hover,
.hz-blog-listing .entry-title a:hover,
article.post .entry-title a:hover {
    color: var(--t5-teal-light) !important;
}

/* ==========================================================
   AUDIT COMPLETION LOG — 2026-04-10
   All 23 CSS-only fixes applied from audit report:
   A1-A3  — Missing :root variables (3 fixes)
   B1-B12 — Hardcoded hex → var() tokens (12 fixes)
   C1     — glass-search-module background mismatch (1 fix)
   D1     — Hero H1 font-weight 500→300 (1 fix)
   D2     — .about-hero-title fixed→clamp() (1 fix)
   D3     — Blog post title typography enforcement (1 fix)
   E1     — Removed conflicting 8px btn border-radius (1 fix)
   F1-F3  — New responsive breakpoints 1024/430/375px (3 fixes)
   Total  — 23 surgical fixes, 0 regressions expected
========================================================== */