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


@import url("../houzez/style.css");

/* Your CSS code goes here
-------------------------------------- */

:root {
  --primary-color: #335b4c;
  --accent-gold: #CA9420;
  --bright-red: #ff3b3b;
  --bright-blue: #3399ff;
  --font-size-large: 30px;
  --font-size-medium: 16px;
  --font-size-small: 14px;
  --border-radius-large: 30px;
  --border-radius-medium: 16px;
  --border-radius-small: 10px;
  --shadow-light: 0 2px 5px rgba(0, 0, 0, 0.05);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.1);
}


/* Header Background */
#header-section {
  background: #ffffff;
}

/* Mobile Header Background */
.header-mobile {
  background: #ffffff;
}

/* Logo Styling */
.logo-desktop img,
.logo-mobile img {
  max-width: 100%;
  width: auto;
  height: clamp(36px, 4vw, 60px);
  object-fit: contain;
}

/* Tablet-specific logo sizing */
@media (max-width: 1200px) and (min-width: 768px) {
  .logo-desktop img {
    height: clamp(40px, 3.5vw, 50px);
  }
}

/* High-DPI displays (e.g., Retina) */
@media (-webkit-min-device-pixel-ratio: 2) {
  .logo-desktop img,
  .logo-mobile img {
    height: clamp(40px, 4.5vw, 64px);
  }
}

/* Desktop Menu */
#header-section .main-nav .nav-link {
  font-weight: 600;
  font-size: 17px;
  padding: 8px 14px;
  margin-top: 10px;
  line-height: normal;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  border-radius: 6px;
  background-color: transparent;
  color: var(--primary-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
#header-section .main-nav .nav-link:hover,
#header-section .main-nav .current-menu-item .nav-link {
  background-color: var(--accent-gold);
  color: #fff;
  border-radius: 8px;
  box-shadow: var(--shadow-light);
}

/* Mobile Menu */
.header-mobile .main-nav .nav-link {
  color: var(--primary-color);
  font-weight: 600;
  font-size: var(--font-size-medium);
  padding: 12px 16px;
  background: transparent;
  border-radius: 0;
}

/* Hide footer elements */
.site-footer-bottom,
.footer-bottom,
.footer-copyright,
.site-info,
.footer-bottom-wrap {
  display: none !important;
}


/* Item Title */
.item-title {
  word-spacing: 2px;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  display: box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  max-width: var(--title-max-width, 100%);
}
.item-title a {
  font-weight: 700;
}

/* Grid View */
.grid-view .item-wrap.item-wrap-no-frame .hover-effect {
  border-top-left-radius: var(--border-radius-small);
  border-top-right-radius: var(--border-radius-small);
}

/* Amenities Spacing */
.item-amenities .h-beds,
.item-amenities .h-baths,
.item-amenities .h-area {
  margin-right: 1rem;
}

/* Price Styling */
.item-price .price,
.item-price .price-postfix,
.item-sub-price .price,
.item-sub-price .price-postfix {
  font-weight: 700;
}
.item-price .price,
.item-price .price-postfix {
  color: var(--bright-red);
  font-size: var(--font-size-medium);
}
.item-sub-price .price,
.item-sub-price .price-postfix {
  color: var(--bright-blue);
  font-size: var(--font-size-small);
}

/* Single Property Price */
.single-property .property-price-wrap .item-price,
.single-property .property-price-wrap .item-price .price,
.single-property .property-price-wrap .item-price .price-postfix {
  font-size: var(--font-size-large);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 12px;
  color: var(--bright-red);
}
.single-property .property-price-wrap .item-sub-price,
.single-property .property-price-wrap .item-sub-price .price,
.single-property .property-price-wrap .item-sub-price .price-postfix {
  font-size: 20px;
  color: var(--bright-blue);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tags */
.labels-wrap .label-status,
.labels-wrap .hz-label {
  padding: 4px 10px;
  border-radius: 14px;
  font-weight: 500;
  font-size: 12px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.label-status.status-color-86 {
  background-color: #c41d1f;
  color: #ffffff;
}
.label-status.status-color-87 {
  background-color: #00bfff;
  color: #003A76;
}
.hz-label.label-color-93 {
  background-color: #4caf50;
  color: #ffffff;
}
.hz-label.label-color-94 {
  background-color: #00acc1;
  color: #ffffff;
}
.labels-wrap .label-status:hover,
.labels-wrap .hz-label:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: #003A76;
  box-shadow: var(--shadow-light);
}
@media (max-width: 767px) {
  .labels-wrap.mb-2.d-sm-none.d-md-block {
    display: none !important;
  }
}

#property-gallery-js {
    height: auto !important;
}
#property-gallery-js img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
}



/* 1) TẮT overlay/bóng đen mặc định của theme (đè mạnh bằng !important) */

/* Ngăn theme vẽ overlay mặc định ngay từ lúc render */
a.hover-effect::before,
a.hover-effect::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

.listing-image-wrap .houzez-listing-carousel .slide-img a.hover-effect::before,
.listing-image-wrap .houzez-listing-carousel .slide-img a.hover-effect::after {
  content: none !important;
  background: none !important;
  opacity: 0 !important;
  height: 0 !important;
}

.listing-image-wrap .houzez-listing-carousel .slide-img a.hover-effect img {
  filter: none !important;
  transition: none !important; /* tránh chớp nháy */
}

/* 2) OVERLAY MỚI: fade-in từ dưới lên khi hover */
.listing-image-wrap .houzez-listing-carousel .slide-img {
  position: relative;
  overflow: hidden;
}
.listing-image-wrap .houzez-listing-carousel .slide-img img {
  position: relative;
  z-index: 0;
}

/* Overlay chỉ phủ phần đáy ảnh (gradient đen ở dưới, trong suốt ở trên) */
.listing-image-wrap .houzez-listing-carousel .slide-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0) 60%);
  opacity: 0;                     /* mặc định tắt */
  transition: opacity .28s ease-in-out;  /* hiệu ứng fade-in */
  pointer-events: none;           /* không chặn hover của anchor */
  z-index: 1;                     /* nằm trên ảnh */
}

/* Khi hover -> overlay hiện ra mượt */
.listing-image-wrap .houzez-listing-carousel .slide-img:hover::after {
  opacity: 1;
}



/*Ẩn thanh gửi email Saler*/
.mobile-property-contact.w-100.d-block.d-lg-none {
    display: none !important;
}



.product-box {
    max-width: 100%; /* Ensure the box uses full available width */
    width: 100%; /* Ensure the box takes full width */
    overflow: hidden; /* Prevent overflow beyond the box */
}

.item-title {
    margin-bottom: 0.5rem; /* mb-2 equivalent */
    width: 100%; /* Ensure the title takes full width of the container */
    font-size: 1rem; /* Adjust font size to match the image */
    color: #000; /* Adjust color to match the image */
    word-wrap: break-word; /* Allow long words to break and wrap */
    line-height: 1.2; /* Improve readability with wrapped text */
    max-width: 75% !important; /* Adjustable value to control title length; start at 80% of parent */
}

/*Giảm độ dài Title ở trang SP chi tiết*/
.page-title.me-4 h1 {
    width: 85%; /* Ensure the title takes full width of the container */

}


/*Giảm cỡ chữ Title SP trên điện thoại*/
@media (max-width: 767px) {
  .item-title {
    max-width: 100% !important;
		font-size: 17px;
  }
}

.item-title a {
    color: inherit; /* Inherit the color from the parent */
    text-decoration: none; /* Remove underline if present */
    display: block; /* Ensure the link takes full width */
}



/* Mobile: Tăng kích cỡ tiêu đề */
@media only screen and (max-width: 767px) {
  .page-title h1 {
    font-size: 22px !important;
    line-height: 1.4em;
  }

  .block-title-wrap h2 {
    font-size: 22px !important;
    line-height: 1.4em;
  }
}

/* Desktop: Tăng kích cỡ cho Tổng quan và Mô tả chi tiết */
@media only screen and (min-width: 768px) {
  .block-title-wrap h2 {
    font-size: 24px !important;
    line-height: 1.5em;
  }
}

/* Gradient text cho tiêu đề trong block-title-wrap */
.block-title-wrap h2 {
  background: linear-gradient(90deg, #2A4A3E, #335B4C, #3F6E5C, #2A4A3E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}




/* Chỉnh hình ảnh Sidebar BDS đã xem */
#houzez_properties_viewed-1 .property-item-widget .left-property-item-widget-wrap img,
#houzez_properties_viewed-2 .property-item-widget .left-property-item-widget-wrap img {
    width: 160px !important;
    height: auto !important;
    min-width: 160px !important; /* Ensures width is at least 160px */
}



/* Quick Links */
.quick-links-wrapper {
  padding: var(--border-radius-medium);
  background: #fffaf0;
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-heavy);
}
.quick-links-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.quick-link {
  display: inline-block;
  padding: 12px 20px;
  font-size: var(--font-size-small);
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-gold), #e6b84e);
  border-radius: var(--border-radius-large);
  box-shadow: 0 4px 10px rgba(202, 148, 32, 0.3);
  transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  position: relative;
  overflow: hidden;
}
.shimmer-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.3), rgba(255,255,255,0));
  transform: skewX(-25deg);
  transition: left 0.5s ease;
}
.shimmer-effect:hover::before {
  left: 125%;
}
.quick-link:hover {
  background: linear-gradient(135deg, #e6b84e, var(--accent-gold));
  box-shadow: 0 6px 16px rgba(202, 148, 32, 0.5);
  color: #fff;
}

/* Contact Form */
#block-23.widget-wrap,
#block-23.widget,
#block-26.widget-wrap,
#block-26.widget {
  background: transparent;
  padding: 0;
  border: none !important;
  box-shadow: none;
}
#block-39.widget-wrap,
#block-39.widget
#block-70.widget-wrap,
#block-70.widget{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.contact-form-sidebar {
  border: none !important;
  background: #f0f5f3;
  padding: 24px;
  box-shadow: var(--shadow-heavy);
  border-radius: var(--border-radius-medium);
  font-family: 'Roboto', sans-serif;
  color: var(--primary-color);
}
.contact-form-sidebar h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 18px;
  text-align: center;
  color: var(--primary-color);
}
.contact-form-sidebar label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: var(--font-size-small);
  color: var(--primary-color);
}
.contact-form-sidebar input,
.contact-form-sidebar select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--primary-color);
  border-radius: 8px;
  background: #f7f9f8;
  font-size: var(--font-size-small);
  color: var(--primary-color);
  transition: border 0.3s ease, box-shadow 0.3s ease;
}
.contact-form-sidebar input::placeholder {
  color: #779488;
}
.contact-form-sidebar select option {
  color: var(--primary-color);
  background: #fff;
}
.contact-form-sidebar input:focus,
.contact-form-sidebar select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(51, 91, 76, 0.2);
  outline: none;
}
.contact-form-sidebar button {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, var(--primary-color), #558c77);
  color: #ffffff;
  font-weight: 600;
  font-size: var(--font-size-medium);
  border: none;
  border-radius: var(--border-radius-large);
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 10px rgba(51, 91, 76, 0.3);
  position: relative;
  overflow: hidden;
  margin-top: 20px; /* Increase space between the select and submit button */
}
.contact-form-sidebar button:hover {
  background: linear-gradient(135deg, #558c77, var(--primary-color));
  box-shadow: 0 6px 16px rgba(51, 91, 76, 0.5);
}

/* Desktop Search Bar */
#desktop-header-search {
  background: #fff7e6;
  padding: 20px 0;
  border-radius: var(--border-radius-small);
  position: sticky;
  top: 0;
  z-index: 999;
  transition: background 0.3s ease;
}
#desktop-header-search .container {
  max-width: 960px;
  margin: 0 auto;
}
#desktop-search-form .d-flex {
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
}
#desktop-search-form .form-group {
  margin-bottom: 0;
}
.fields-width {
  min-width: 200px;
  flex: 1;
}
.bootstrap-select .dropdown-toggle {
  background: #fff;
  border: 1px solid #d8b56c;
  height: 42px;
  border-radius: var(--border-radius-small);
  padding: 0 15px;
  font-size: 15px;
  color: #5c4414;
  transition: border 0.3s ease;
}
.bootstrap-select .dropdown-toggle:hover {
  border-color: var(--accent-gold);
}
.bootstrap-select .dropdown-menu {
  border-radius: 8px;
  box-shadow: var(--shadow-medium);
  font-size: var(--font-size-small);
}
.reset-search-btn,
.btn-search {
  height: 42px;
  border-radius: var(--border-radius-small);
  font-size: 15px;
  font-weight: 500;
  padding: 0 25px;
  transition: background 0.3s ease, color 0.3s ease;
  border: none;
}
.reset-search-btn {
  background: linear-gradient(145deg, #fceabb, #f8d778);
  color: #5c4414;
}
.reset-search-btn:hover {
  background: linear-gradient(145deg, #f5d36c, #f0c14b);
  color: #3b2a0f;
}
.btn-search {
  background: linear-gradient(145deg, #e3b23c, var(--accent-gold));
  color: #fff;
}
.btn-search:hover {
  background: linear-gradient(145deg, var(--accent-gold), #a67616);
  color: #fff;
}

/* Navigation Tabs */
.property-nav-tabs.nav-tabs {
  display: flex;
  border: none;
  justify-content: center;
  margin-bottom: 20px;
}
.property-nav-tabs .nav-link {
  font-size: var(--font-size-medium);
  font-weight: 600;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  border-radius: var(--border-radius-large);
  padding: 10px 28px;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  background: #f8f9f8;
  box-shadow: var(--shadow-light);
  cursor: pointer;
}
.property-nav-tabs .nav-link:hover {
  background: rgba(51, 91, 76, 0.08);
  color: var(--primary-color);
  box-shadow: var(--shadow-medium);
}
.property-nav-tabs .nav-link.active {
  background: linear-gradient(135deg, var(--primary-color), #2a4a3e);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.property-nav-tabs .nav-link i {
  margin-right: 8px;
  color: inherit;
}
.property-nav-tabs .tab-title {
  vertical-align: middle;
  color: inherit;
}
.property-nav-tabs.nav-tabs::after {
  content: none;
}

/* Avatar */
#header-section .navbar-logged-in-wrap img.rounded {
  border: 2px solid var(--accent-gold);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  transition: transform 0.3s ease;
}
#header-section .navbar-logged-in-wrap img.rounded:hover {
  transform: scale(1.05);
}

/* User Dropdown */
#header-section .logged-in-nav.dropdown-menu {
  background-color: #fff;
  border-radius: var(--border-radius-small);
  box-shadow: var(--shadow-medium);
  border: none;
}
#header-section .logged-in-nav.dropdown-menu a {
  color: #333;
  font-weight: 500;
}
#header-section,
.header-mobile {
  border-bottom: none !important;
}
/* Increase header height with padding */
#header-section {
  padding-top: 15px;
  padding-bottom: 15px
}

.header-mobile {
  padding-top: 15px;
  padding-bottom: 15px;
}
/* Footer */
.footer-top-wrap {
  background-color: var(--primary-color);
  padding: 60px 0;
  color: #ffffff;
}
.footer-bottom-wrap {
  background-color: var(--primary-color);
}
.footer-bottom-wrap a {
  color: #f9d98d;
}
footer .wp-block-image.size-full img {
  max-width: 100px;
  height: auto;
}

/* Breadcrumb */
ol.breadcrumb > li.breadcrumb-item:last-child {
  color: var(--bright-red);
  font-weight: bold;
}

/* Hide Elements */
/* Nút Sort SP */
button[data-id="sort_properties"][title="Default Order"],
#sort-label,
.listings-count.flex-grow-1 {
  display: none;
}
/*Nút Back to Top*/
.back-to-top-wrap {
	display: none;
}

/*Block Tool trang SP chi tiết*/
@media (min-width: 768px) {
    .mobile-property-tools {
        display: none !important;
    }
}


/* Taxonomy Description */
.taxonomy-description {
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

/* Mobile Search Bar */
.advanced-search.mobile-search-nav.mobile-search-trigger {
  position: sticky;
  top: 0;
  z-index: 999;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .page-title h1 {
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
  }
  .quick-links-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    justify-items: center;
  }
  .quick-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    font-size: 13px;
    font-weight: 600;
    padding: 0 8px;
    border-radius: 20px;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
  }
  .quick-links-wrapper {
    padding: 12px;
  }
  #desktop-search-form .d-flex {
    flex-direction: column;
  }
  .reset-search-btn-wrap,
  .btn-search {
    width: 100%;
    margin-top: 10px;
  }
}

@media (max-width: 1200px) and (min-width: 768px) {
  #header-section .main-nav .nav-link {
    margin-top: 14px;
    font-size: var(--font-size-small);
  }
}
/* Footer contact list styling */
.footer-contact ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 18px;
}

.footer-contact ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  white-space: wrap;        /* Keep items in 1 line on desktop */
}

.footer-contact ul li svg {
  width: 18px;
  height: 18px;
}

.footer-contact ul li span {
  font-weight: 500;           /* Bold text */
}

/* Responsive: allow wrap and smaller font on mobile */
@media (max-width: 768px) {
  .footer-contact ul {
    font-size: 16px;
  }
  .footer-contact ul li {
    white-space: normal !important;
    flex-wrap: wrap !important;          /* Allow icon + text to break nicely */
  }
  .footer-contact ul li span {
    font-size: 16px;
  }
}