/*
 Theme Name:   Houzez Child
 Theme URI:    https://pinacolada.property
 Description:  Houzez Child Theme for Pinacolada Property
 Author:       Pinacolada Team
 Template:     houzez
 Version:      1.0.1
 Text Domain:  houzez-child
*/

/* ==========================================================================
   Custom Styles — Pinacolada Property
   ========================================================================== */

/* ==========================================================================
   1. PROPERTY LISTING CARDS — General Improvements
   ========================================================================== */

/* Consistent image aspect ratio across all cards */
.item-listing-wrap .item-header .item-image img,
.item-listing-wrap .item-header .hz-image-cover {
   object-fit: cover;
   width: 100%;
   aspect-ratio: 4 / 3;
}

/* Tighter property card for cleaner look */
.item-listing-wrap .item-body {
   padding: 12px 15px;
}

/* Property title in cards — prevent excessive wrapping */
.item-listing-wrap .item-title h2,
.item-listing-wrap .item-title h3 {
   font-size: 15px;
   line-height: 1.35;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}

/* Amenities row in cards — consistent alignment */
.item-amenities {
   gap: 6px !important;
   margin-bottom: 8px !important;
}

.item-amenities li {
   font-size: 13px;
   white-space: nowrap;
}

/* Property type badge */
.item-amenities li.h-type {
   background: rgba(212, 175, 55, 0.1);
   border-radius: 4px;
   padding: 2px 8px;
   color: #D4AF37;
   font-weight: 600;
   font-size: 12px;
}

/* ==========================================================================
   2. SINGLE PROPERTY PAGE — Desktop & General
   ========================================================================== */

/* Tighter breadcrumb section */
.page-title-wrap {
   padding: 10px 0;
}

/* Better property header spacing */
.property-header-wrap {
   margin-top: 8px !important;
}

/* Overview/details section — cleaner boxes */
.property-overview-data .hz-figure {
   font-weight: 700;
}

/* Description text readability */
.property-overview-data,
.block-content-wrap {
   font-size: 15px;
   line-height: 1.7;
   color: #444;
}

/* ==========================================================================
   3. MOBILE RESPONSIVE — Tablets (≤ 991px)
   ========================================================================== */

@media (max-width: 991px) {

   /* Property cards in grid — better use of space */
   .item-listing-wrap .item-body {
      padding: 10px 12px;
   }

   /* Amenities — allow wrapping */
   .item-amenities {
      flex-wrap: wrap !important;
      gap: 4px 10px !important;
   }

   .item-amenities li {
      font-size: 12px;
   }
}

/* ==========================================================================
   4. MOBILE RESPONSIVE — Phones (≤ 767px)
   ========================================================================== */

@media (max-width: 767px) {
   /* ---- Listing Cards ---- */

   /* Card images — consistent proportions on mobile */
   .item-listing-wrap .item-header .item-image img,
   .item-listing-wrap .item-header .hz-image-cover {
      aspect-ratio: 16 / 10;
      max-height: 260px;
   }

   /* Card titles — smaller on mobile */
   .item-listing-wrap .item-title h2,
   .item-listing-wrap .item-title h3 {
      font-size: 14px;
      -webkit-line-clamp: 2;
      line-clamp: 2;
   }

   /* Card address */
   .item-listing-wrap .item-address {
      font-size: 12px;
      color: #888;
   }

   /* Amenities in cards — compact row */
   .item-amenities {
      flex-wrap: wrap !important;
      gap: 3px 8px !important;
      margin-bottom: 6px !important;
   }

   .item-amenities li {
      font-size: 11px;
      margin-right: 0 !important;
   }

   .item-amenities .hz-figure {
      font-size: 12px;
      font-weight: 700;
   }

   /* Card footer (agent + date) — tighter */
   .item-listing-wrap .item-footer {
      padding: 8px 12px;
   }

   .item-listing-wrap .item-footer img {
      width: 28px !important;
      height: 28px !important;
   }

   /* Price in cards */
   .item-price-wrap .item-price {
      font-size: 15px;
   }

   /* ---- Single Property Page — Mobile ---- */

   /* Mobile title block — reduce excessive padding */
   .mobile-top-wrap .mobile-property-title {
      padding: 12px 15px !important;
   }

   .mobile-top-wrap .mobile-property-title .page-title-mobile {
      font-size: 20px;
      line-height: 1.3;
      word-break: break-word;
   }

   /* Mobile price */
   .mobile-top-wrap .item-price-wrap {
      margin-top: 6px;
   }

   .mobile-top-wrap .item-price-wrap .item-price {
      font-size: 22px;
   }

   /* Property detail blocks — reduce spacing */
   .property-view .block-wrap {
      margin-bottom: 15px !important;
      padding: 12px !important;
   }

   .property-view .block-title-wrap h2 {
      font-size: 17px;
   }

   /* Property overview boxes (beds/baths/area) on single property */
   .single-property-overview .property-overview-data {
      flex-wrap: wrap;
   }

   .single-property-overview .property-overview-data>div,
   .detail-overview .property-overview-data>div {
      flex: 0 0 33.333% !important;
      max-width: 33.333% !important;
      padding: 8px 5px;
      text-align: center;
      font-size: 12px;
   }

   .single-property-overview .property-overview-data .hz-figure,
   .detail-overview .property-overview-data .hz-figure {
      font-size: 16px;
      font-weight: 700;
      display: block;
   }

   /* Description — better readability on mobile */
   .block-content-wrap,
   .property-overview-data {
      font-size: 14px;
      line-height: 1.65;
   }

   /* Contact form — not too wide */
   .property-sidebar-contact-form {
      margin-bottom: 15px;
   }

   /* Similar/related properties section */
   .similar-properties .item-listing-wrap .item-header .item-image img {
      aspect-ratio: 4 / 3;
      max-height: 200px;
   }

   /* ---- Map / Listing toggle button — prevent chat widget overlap ---- */
   .houzez-listing-map-switch,
   .map-list-switch-wrap {
      bottom: 80px !important;
      z-index: 999 !important;
   }

   /* ---- Search/filter area — compact on mobile ---- */
   .houzez-search-wrap .form-group {
      margin-bottom: 8px;
   }
}

/* ==========================================================================
   5. CHAT WIDGET — Prevent overlap with navigation
   ========================================================================== */

/* NextBot chat widget — move higher to not block Map/List toggle */
@media (max-width: 767px) {

   /* NextBot widget container — adjust position */
   #nextbot-chat-widget,
   [id*="nextbot"],
   .nextbot-widget-container {
      bottom: 85px !important;
      z-index: 998 !important;
   }

   /* Auto-invite message — smaller on mobile */
   .nextbot-auto-invite,
   [class*="auto-invite"] {
      max-width: 250px !important;
      font-size: 13px !important;
      bottom: 140px !important;
   }
}

/* ==========================================================================
   6. MOBILE PROPERTY CONTACT BAR (bottom sticky bar)
   ========================================================================== */

@media (max-width: 767px) {
   .mobile-property-contact {
      z-index: 1000 !important;
   }
}

/* ==========================================================================
   7. SMALL PHONES (≤ 374px) — Extra compact
   ========================================================================== */

@media (max-width: 374px) {

   .item-listing-wrap .item-title h2,
   .item-listing-wrap .item-title h3 {
      font-size: 13px;
   }

   .item-amenities li {
      font-size: 10px;
   }

   .mobile-top-wrap .mobile-property-title .page-title-mobile {
      font-size: 18px;
   }

   .single-property-overview .property-overview-data>div,
   .detail-overview .property-overview-data>div {
      flex: 0 0 50% !important;
      max-width: 50% !important;
   }
}
/* ==========================================================================
   8. POPULAR AREAS GRID (Custom)
   ========================================================================== */

.pd{ border-radius:12px; color:#fff; margin-bottom: 40px; width: 100%; position: relative; }
.pd__title{ font-size:44px; line-height:1.1; margin:0 0 14px; font-weight:700; color: #0A1528 !important; }
.pd__panel{ margin:0 auto; position:relative; }
.pd__track{ 
  display:flex !important; 
  gap:22px; 
  overflow-x: auto; 
  padding-bottom: 20px; 
  -webkit-overflow-scrolling: touch;
}
.pd__card{
  flex:0 0 360px; height:260px;
  border-radius:10px; overflow:hidden; position:relative;
  text-decoration:none; color:#fff;
  background-image:var(--img);
  background-size:cover; background-position:center;
  display: flex !important;
}
.pd__card::before{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,0.35);
}
.pd__card-inner{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  text-align:center; z-index:1;
  padding:14px;
}
.pd__card-title{ font-size:40px; font-weight:700; letter-spacing:0.2px; color: #fff !important; }
.pd__card-sub{ font-size:18px; color:#d8b36a !important; margin-top:10px; font-weight:700; }

@media (max-width: 820px){
  .pd__title{ font-size:32px; }
  .pd__card{ flex:0 0 78vw; }
}

/* ==========================================================================
   9. HIDDEN SECTIONS — Temporarily hidden from frontend
   ========================================================================== */

/* Hide "Meet Our Team of Local Experts" + Agents Grid section */
/* To show again: remove or comment out this rule */
.elementor-element-84f1dce {
   display: none !important;
}