/*
 * Custom Dark Theme - Real Estate Website
 * Based on design mockup with dark background and gold accents
 * Version: 1.0.0
 */

/* ============================================
   Raleway Font Import
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800&display=swap');

/* Global Font Family */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
li,
.main-nav,
.houzez-nav-menu-main,
.navbar-nav,
.btn,
.form-control,
input,
select,
textarea,
.item-title,
.property-title,
.item-price,
.property-price,
.block-title-wrap,
.widget-title,
.modal-title {
    font-family: 'Raleway', sans-serif !important;
}

/* ============================================
   CSS Variables (Custom Properties)
   ============================================ */
:root {
    /* Primary Colors */
    --primary-gold: #c9a961;
    --primary-gold-hover: #d4b574;
    --primary-gold-dark: #b89550;

    /* Background Colors */
    --bg-dark-primary: #1a1a1a;
    --bg-dark-secondary: #2a2a2a;
    --bg-dark-tertiary: #252525;
    --bg-dark-hover: #303030;

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-muted: #888888;
    --text-dark: #000000;

    /* Border Colors */
    --border-dark: #3a3a3a;
    --border-light: #4a4a4a;
    --border-gold: #c9a961;

    /* Shadow Colors */
    --shadow-light: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.5);
    --shadow-dark: rgba(0, 0, 0, 0.7);
    --shadow-gold: rgba(201, 169, 97, 0.3);
}

/* ============================================
   Global Styles
   ============================================ */

/* Body & Main Containers */
body,
.main-wrap,
.houzez-main-wrap-v1,
.houzez-main-wrap-v2 {
    background-color: var(--bg-dark-primary) !important;
    color: var(--text-primary) !important;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.item-title,
.property-title,
.page-title,
.block-title-wrap h2,
.block-title-wrap h3 {
    color: var(--text-primary) !important;
}

/* Links */
a {
    color: var(--primary-gold) !important;
    transition: color 0.3s ease;
}

a:hover,
a:focus {
    color: var(--primary-gold-hover) !important;
}

/* ============================================
   Header Styles
   ============================================ */
.header-main-wrap,
.header-inner-wrap,
.header-v1,
.header-v2,
.header-v3,
.header-v4,
.header-v5,
.header-v6,
.top-bar-wrap {
    background-color: var(--bg-dark-primary) !important;
    border-bottom: 1px solid var(--border-dark) !important;
}

/* Navigation */
.main-nav .nav-link,
.houzez-nav-menu-main .nav-link,
.navbar-nav .nav-link {
    color: var(--text-primary) !important;
}

.main-nav .nav-link:hover,
.houzez-nav-menu-main .nav-link:hover,
.navbar-nav .nav-link:hover {
    color: var(--primary-gold) !important;
}

/* Dropdown Menus */
.dropdown-menu {
    background-color: var(--bg-dark-secondary) !important;
    border-color: var(--border-dark) !important;
}

.dropdown-item {
    color: var(--text-primary) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bg-dark-hover) !important;
    color: var(--primary-gold) !important;
}

/* ============================================
   Button Styles
   ============================================ */

/* Primary Buttons */
.btn-primary,
.btn-search,
.houzez-search-button,
.houzez-submit-button {
    background-color: var(--primary-gold) !important;
    border-color: var(--primary-gold) !important;
    color: var(--text-dark) !important;
    font-weight: 600 !important;
}

.btn-primary:hover,
.btn-search:hover,
.houzez-search-button:hover,
.houzez-submit-button:hover {
    background-color: var(--primary-gold-hover) !important;
    border-color: var(--primary-gold-hover) !important;
    color: var(--text-dark) !important;
}

/* Secondary Buttons */
.btn-secondary {
    background-color: var(--bg-dark-secondary) !important;
    border-color: var(--border-dark) !important;
    color: var(--text-primary) !important;
}

.btn-secondary:hover {
    background-color: var(--bg-dark-hover) !important;
    border-color: var(--primary-gold) !important;
    color: var(--primary-gold) !important;
}

/* Outlined Buttons */
.btn-primary-outlined {
    background-color: transparent !important;
    border-color: var(--primary-gold) !important;
    color: var(--primary-gold) !important;
}

.btn-primary-outlined:hover {
    background-color: var(--primary-gold) !important;
    border-color: var(--primary-gold) !important;
    color: var(--text-dark) !important;
}

/* ============================================
   Property Cards & Listings
   ============================================ */

/* Property Item Wrapper */
.item-wrap,
.property-item,
.item-listing-wrap,
.property-grid-item,
.list-view .item-wrap {
    background-color: var(--bg-dark-secondary) !important;
    border: none !important;
    transition: all 0.3s ease;
}

/* Hover effect for property cards - COMMENTED OUT
.item-wrap:hover,
.property-item:hover,
.item-listing-wrap:hover {
    background-color: var(--bg-dark-tertiary) !important;
    border-color: var(--primary-gold) !important;
    box-shadow: 0 4px 12px var(--shadow-gold) !important;
}
*/

/* Property Title */
.item-title a,
.property-title a {
    color: var(--text-primary) !important;
}

.item-title a:hover,
.property-title a:hover {
    color: var(--primary-gold) !important;
}

/* Property Price */
.item-price,
.item-price-wrap,
.property-price,
.price {
    color: var(--primary-gold) !important;
    font-weight: 700 !important;
}

/* Property Meta Info */
.item-amenities,
.property-meta,
.item-address,
.property-address {
    color: var(--text-secondary) !important;
}

/* Property Labels */
.label-featured,
.label-status,
.badge-primary {
    background-color: var(--primary-gold) !important;
    color: var(--text-dark) !important;
}

/* ============================================
   Content Blocks & Sections
   ============================================ */

/* Block Wrappers */
.block-wrap,
.detail-wrap,
.lined-block,
.property-overview-wrap,
.property-detail-wrap {
    background-color: var(--bg-dark-secondary) !important;
    border: 1px solid var(--border-dark) !important;
}

/* Widget Wrappers */
.widget-wrap,
.sidebar .widget {
    background-color: var(--bg-dark-secondary) !important;
    border: 1px solid var(--border-dark) !important;
}

.widget-title,
.widget h3 {
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--primary-gold) !important;
}

/* ============================================
   Forms & Inputs
   ============================================ */

/* Form Controls */
.form-control,
.bootstrap-select .btn,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    background-color: var(--bg-dark-secondary) !important;
    border-color: var(--border-dark) !important;
    color: var(--text-primary) !important;
}

.form-control:focus,
.bootstrap-select .btn:focus,
input:focus,
textarea:focus,
select:focus {
    background-color: var(--bg-dark-hover) !important;
    border-color: var(--primary-gold) !important;
    color: var(--text-primary) !important;
}

/* Placeholder Text */
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
}

/* ============================================
   Search Forms
   ============================================ */

/* Advanced Search */
.advanced-search,
.search-banner-wrap,
.overlay-search-advanced-module {
    background-color: var(--bg-dark-secondary) !important;
    border: 1px solid var(--border-dark) !important;
}

.search-expandable {
    background-color: var(--bg-dark-primary) !important;
}

/* ============================================
   Footer Styles
   ============================================ */
.footer-wrap,
.footer-top-wrap,
.footer-bottom-wrap {
    background-color: var(--bg-dark-primary) !important;
    border-top: 1px solid var(--border-dark) !important;
    color: var(--text-secondary) !important;
}

.footer-wrap a {
    color: var(--text-secondary) !important;
}

.footer-wrap a:hover {
    color: var(--primary-gold) !important;
}

/* ============================================
   Tables
   ============================================ */
.table,
.property-table,
.dashboard-table {
    background-color: var(--bg-dark-secondary) !important;
    color: var(--text-primary) !important;
}

.table thead th,
.property-table thead th {
    background-color: var(--bg-dark-primary) !important;
    border-color: var(--border-dark) !important;
    color: var(--primary-gold) !important;
}

.table tbody td,
.property-table tbody td {
    border-color: var(--border-dark) !important;
    color: var(--text-primary) !important;
}

.table tbody tr:hover,
.property-table tbody tr:hover {
    background-color: var(--bg-dark-hover) !important;
}

/* ============================================
   Pagination
   ============================================ */
.page-link {
    background-color: var(--bg-dark-secondary) !important;
    border-color: var(--border-dark) !important;
    color: var(--text-primary) !important;
}

.page-link:hover {
    background-color: var(--primary-gold) !important;
    border-color: var(--primary-gold) !important;
    color: var(--text-dark) !important;
}

.page-item.active .page-link {
    background-color: var(--primary-gold) !important;
    border-color: var(--primary-gold) !important;
    color: var(--text-dark) !important;
}

/* ============================================
   Tabs & Navigation
   ============================================ */
.nav-tabs .nav-link {
    background-color: var(--bg-dark-secondary) !important;
    border-color: var(--border-dark) !important;
    color: var(--text-secondary) !important;
}

.nav-tabs .nav-link:hover {
    background-color: var(--bg-dark-hover) !important;
    color: var(--primary-gold) !important;
}

.nav-tabs .nav-link.active {
    background-color: var(--bg-dark-primary) !important;
    border-bottom-color: var(--primary-gold) !important;
    color: var(--primary-gold) !important;
}

/* ============================================
   Modals & Popups
   ============================================ */
.modal-content {
    background-color: var(--bg-dark-secondary) !important;
    border-color: var(--border-dark) !important;
}

.modal-header {
    background-color: var(--bg-dark-primary) !important;
    border-bottom-color: var(--border-dark) !important;
}

.modal-title {
    color: var(--text-primary) !important;
}

.modal-body {
    color: var(--text-primary) !important;
}

.modal-footer {
    background-color: var(--bg-dark-primary) !important;
    border-top-color: var(--border-dark) !important;
}

.close {
    color: var(--text-primary) !important;
}

.close:hover {
    color: var(--primary-gold) !important;
}

/* ============================================
   Breadcrumbs
   ============================================ */
.breadcrumb {
    background-color: var(--bg-dark-secondary) !important;
    padding: 10px;
    border-radius: 10px
}

.breadcrumb-item {
    color: var(--text-secondary) !important;
}

.breadcrumb-item.active {
    color: var(--primary-gold) !important;
}

.breadcrumb-item a {
    color: var(--text-secondary) !important;
}

.breadcrumb-item a:hover {
    color: var(--primary-gold) !important;
}

/* ============================================
   Alerts & Notifications
   ============================================ */
.alert {
    background-color: var(--bg-dark-secondary) !important;
    border-color: var(--border-dark) !important;
    color: var(--text-primary) !important;
}

.alert-success {
    border-left: 4px solid var(--primary-gold) !important;
}

/* ============================================
   Property Detail Page
   ============================================ */
.property-detail-v1,
.property-detail-v2,
.property-detail-v3,
.property-detail-v4,
.property-detail-v5,
.property-detail-v6 {
    background-color: var(--bg-dark-primary) !important;
}

.property-banner {
    background-color: var(--bg-dark-secondary) !important;
}

/* ============================================
   Agent & Agency Cards
   ============================================ */
.agent-card,
.agent-item,
.agency-card,
.agency-item {
    background-color: var(--bg-dark-secondary) !important;
    border: 1px solid var(--border-dark) !important;
}

.agent-card:hover,
.agency-card:hover {
    border-color: var(--primary-gold) !important;
    box-shadow: 0 4px 12px var(--shadow-gold) !important;
}

.agent-name,
.agency-name {
    color: var(--text-primary) !important;
}

.agent-position,
.agency-location {
    color: var(--text-secondary) !important;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 991px) {
    .mobile-nav {
        background-color: var(--bg-dark-primary) !important;
    }

    .mobile-nav .nav-link {
        color: var(--text-primary) !important;
        border-bottom: 1px solid var(--border-dark) !important;
    }
}

/* ============================================
   Utility Classes
   ============================================ */
.text-gold {
    color: var(--primary-gold) !important;
}

.bg-dark-primary {
    background-color: var(--bg-dark-primary) !important;
}

.bg-dark-secondary {
    background-color: var(--bg-dark-secondary) !important;
}

.border-gold {
    border-color: var(--primary-gold) !important;
}

/* ============================================
   Scrollbar Styling
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-gold);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-gold-hover);
}

/* ============================================
   Selection Styling
   ============================================ */
::selection {
    background-color: var(--primary-gold);
    color: var(--text-dark);
}

::-moz-selection {
    background-color: var(--primary-gold);
    color: var(--text-dark);
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    body {
        background-color: white !important;
        color: black !important;
    }
}

/* ============================================
   Item Footer Styles
   ============================================ */
.item-footer,
.item-footer.items-btns-count-3 {
    background-color: #252525 !important;
}

/* ============================================
   Archive Page - Property Listing Styles
   ============================================ */



/* ============================================
   Sidebar Styles (Archive)
   ============================================ */
.bt-sidebar-wrap .sidebar-wrap {
    background-color: var(--bg-dark-secondary) !important;
    border: 1px solid var(--border-dark) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Agent Contact Widget */
.widget-property-form,
.widget-agent-form {
    background-color: var(--bg-dark-secondary) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid var(--border-dark) !important;
}

.widget-property-form .agent-form-header,
.agent-contact-form-wrap .agent-info {
    background: linear-gradient(135deg, var(--bg-dark-tertiary) 0%, var(--bg-dark-primary) 100%) !important;
    padding: 25px !important;
    text-align: center !important;
    border-bottom: 1px solid var(--border-dark) !important;
}

.agent-form-header .agent-picture,
.agent-info .agent-picture {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    margin: 0 auto 15px !important;
    border: 3px solid var(--primary-gold) !important;
    overflow: hidden !important;
}

.agent-form-header .agent-picture img,
.agent-info .agent-picture img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.agent-form-header .agent-name,
.agent-info .agent-name {
    color: var(--text-primary) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
}

.agent-form-header .agent-position,
.agent-info .agent-position {
    color: var(--text-secondary) !important;
    font-size: 13px !important;
}

/* Agent Contact Buttons */
.agent-contact-btns,
.agent-info-btns {
    display: flex !important;
    gap: 10px !important;
    padding: 15px !important;
    background-color: var(--bg-dark-tertiary) !important;
}

.agent-contact-btns a,
.agent-info-btns a {
    flex: 1 !important;
    padding: 12px !important;
    border-radius: 8px !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.agent-contact-btns .btn-call,
.agent-info-btns .btn-call {
    background-color: #25D366 !important;
    color: var(--text-primary) !important;
}

.agent-contact-btns .btn-email,
.agent-info-btns .btn-email {
    background-color: var(--primary-gold) !important;
    color: var(--text-dark) !important;
}

.agent-contact-btns .btn-whatsapp,
.agent-info-btns .btn-whatsapp {
    background-color: #128C7E !important;
    color: var(--text-primary) !important;
}

/* Contact Form in Sidebar */
.agent-contact-form-wrap form,
.widget-property-form form {
    padding: 20px !important;
    background-color: var(--bg-dark-secondary) !important;
}

.agent-contact-form-wrap .form-group,
.widget-property-form .form-group {
    margin-bottom: 15px !important;
}

.agent-contact-form-wrap .form-control,
.widget-property-form .form-control {
    background-color: var(--bg-dark-tertiary) !important;
    border: 1px solid var(--border-dark) !important;
    color: var(--text-primary) !important;
    padding: 12px 15px !important;
    border-radius: 8px !important;
}

.agent-contact-form-wrap .form-control:focus,
.widget-property-form .form-control:focus {
    border-color: var(--primary-gold) !important;
    box-shadow: 0 0 0 3px var(--shadow-gold) !important;
}

.agent-contact-form-wrap .btn-submit,
.widget-property-form .btn-submit,
.widget-property-form button[type="submit"] {
    background: linear-gradient(135deg, var(--primary-gold) 0%, var(--primary-gold-dark) 100%) !important;
    color: var(--text-dark) !important;
    border: none !important;
    width: 100% !important;
    padding: 14px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
}

.agent-contact-form-wrap .btn-submit:hover,
.widget-property-form .btn-submit:hover,
.widget-property-form button[type="submit"]:hover {
    background: linear-gradient(135deg, var(--primary-gold-hover) 0%, var(--primary-gold) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px var(--shadow-gold) !important;
}

/* Sidebar Widgets */
.bt-sidebar-wrap .widget {
    background-color: var(--bg-dark-secondary) !important;
    border: 1px solid var(--border-dark) !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
}

.bt-sidebar-wrap .widget-title,
.bt-sidebar-wrap .widget h3 {
    background-color: var(--bg-dark-tertiary) !important;
    color: var(--text-primary) !important;
    padding: 15px 20px !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--primary-gold) !important;
}

.bt-sidebar-wrap .widget-body,
.bt-sidebar-wrap .widget>ul,
.bt-sidebar-wrap .widget>div:not(.widget-title):not(.widget h3) {
    padding: 20px !important;
}



/* ============================================
   Empty/No Results State
   ============================================ */
.no-results-wrap,
.item-none {
    background-color: var(--bg-dark-secondary) !important;
    border: 1px solid var(--border-dark) !important;
    border-radius: 12px !important;
    padding: 60px 40px !important;
    text-align: center !important;
}

.no-results-wrap h3,
.item-none h3 {
    color: var(--text-primary) !important;
    margin-bottom: 15px !important;
}

.no-results-wrap p,
.item-none p {
    color: var(--text-secondary) !important;
}

/* ============================================
   Archive Animations
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.listing-view .item-listing-wrap {
    animation: fadeInUp 0.5s ease forwards;
}

.listing-view .item-listing-wrap:nth-child(1) {
    animation-delay: 0.05s;
}

.listing-view .item-listing-wrap:nth-child(2) {
    animation-delay: 0.1s;
}

.listing-view .item-listing-wrap:nth-child(3) {
    animation-delay: 0.15s;
}

.listing-view .item-listing-wrap:nth-child(4) {
    animation-delay: 0.2s;
}

.listing-view .item-listing-wrap:nth-child(5) {
    animation-delay: 0.25s;
}

.listing-view .item-listing-wrap:nth-child(6) {
    animation-delay: 0.3s;
}

.listing-view .item-listing-wrap:nth-child(7) {
    animation-delay: 0.35s;
}

.listing-view .item-listing-wrap:nth-child(8) {
    animation-delay: 0.4s;
}