/* =========================================================
   SRE Custom Fixes
   Version: 2026-04-18-1
   Notes:
   - Central home for all custom CSS fixes
   - Move Code Snippets CSS here gradually
   - Keep sections grouped by feature / page
========================================================= */


/* =========================================
   SRE EXCLUSIVE SLIDER - FINAL STYLES
   ========================================= */

/* 1. LAYOUT & SPACING (Desktop) */
.sre-exclusive-slider { 
    margin-bottom: 40px; 
    padding: 0 20px; /* Give room for arrows on desktop */
}
.sre-exclusive-slider .item-listing-wrap { 
    padding: 0 10px; /* Gap between cards */
}
.sre-exclusive-slider .item-header img { 
    height: 220px !important; 
    object-fit: cover !important; 
    width: 100% !important; 
    border-radius: 4px 4px 0 0; 
}

/* 2. PRICE VISIBILITY */
body .sre-exclusive-slider .item-price-wrap.sre-price-show,
body .sre-exclusive-slider .item-price-wrap.hide-on-list {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    margin-top: 10px !important;
    width: 100% !important;
    color: #333 !important;
    align-items: center;
    flex-wrap: wrap;
}

/* Price Label */
.sre-exclusive-slider .item-price-label {
    font-size: 13px !important;
    color: #777 !important;
    font-weight: 600 !important;
    list-style: none !important;
    margin-right: 5px !important;
    display: block !important;
}

/* Price Number */
.sre-exclusive-slider .item-price {
    font-size: 17px !important;
    color: #8a0516 !important; /* Brand Red */
    font-weight: 800 !important;
    list-style: none !important;
    display: block !important;
}

/* 3. CARD BODY - Updated with Padding */
.sre-exclusive-slider .item-title { 
    margin: 0 0 5px 0; 
    padding: 0 10px; /* Adds space on the left and right */
    font-size: 18px; 
    font-weight: 700; 
    line-height: 1.3; 
    min-height: 46px; 
}

/* Also add padding to the Price area so it aligns with the title */
.sre-exclusive-slider .item-price-wrap.sre-price-show {
    padding: 0 10px 10px 10px !important;
}

/* 4. NEON STATUS */
.cstm-force-top-left { 
    position: absolute !important; top: 10px !important; left: 10px !important; 
    right: auto !important; bottom: auto !important; z-index: 10; 
}
.cstm-neon-status { 
    background-color: rgba(0,0,0,0.7) !important; 
    color: #39ff14 !important; 
    font-weight: 800 !important; 
    text-transform: uppercase; 
    font-size: 13px !important; 
    padding: 5px 10px; 
    border-radius: 3px; 
    text-shadow: 0 0 5px rgba(57, 255, 20, 0.5); 
}

/* 5. SLIDER ARROWS (Centered Fix) */
.sre-exclusive-slider .slick-prev,
.sre-exclusive-slider .slick-next {
    background-color: #8a0516 !important; /* Brand Red */
    width: 30px;
    height: 30px;
    border-radius: 4px;
    z-index: 10;
    opacity: 1;
    
    /* FLEXBOX CENTERING (The Fix) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    padding: 0 !important; /* Remove internal padding */
    line-height: 0 !important;
}

/* Ensure the icon/text inside has no extra margin */
.sre-exclusive-slider .slick-prev:before,
.sre-exclusive-slider .slick-next:before {
    line-height: 0 !important;
    display: block !important;
    margin: 0 !important;
}

.sre-exclusive-slider .slick-prev { left: -15px; }
.sre-exclusive-slider .slick-next { right: -15px; }

/* =========================================
   6. MOBILE FIXES (100% Width & Visible Arrows)
   ========================================= */
@media (max-width: 767px) {
    
    /* Remove Container Padding so image touches edges */
    .sre-exclusive-slider {
        padding: 0 !important;
    }
    
    /* Remove Gap between slides */
    .sre-exclusive-slider .item-listing-wrap {
        padding: 0 !important;
    }
    
    /* Make Image Taller/Full Width */
    .sre-exclusive-slider .item-header img {
        width: 100% !important;
        border-radius: 0 !important; /* Square corners look better full width */
    }

    /* Bring Arrows INSIDE the screen */
    .sre-exclusive-slider .slick-prev { 
        left: 10px !important; /* Move inside from left */
    }
    .sre-exclusive-slider .slick-next { 
        right: 10px !important; /* Move inside from right */
    }
    
    /* Add Shadow to arrows so they pop over the image */
    .sre-exclusive-slider .slick-prev,
    .sre-exclusive-slider .slick-next {
        box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
        top: 35% !important; /* Position over image center */
    }
}

/* =========================================
   6. MOBILE ONLY FIXES (< 767px)
   - Full Width Images
   - Visible Arrows (Inside Image)
   ========================================= */
@media (max-width: 767px) {
    
    /* 1. Full Width Container (Remove Gaps) */
    .sre-exclusive-slider {
        padding: 0 !important;
        margin-bottom: 30px !important;
    }
    
    .sre-exclusive-slider .item-listing-wrap {
        padding: 0 !important;
    }
    
    /* 2. Force Arrows Visible & Inside Screen */
    .sre-exclusive-slider .slick-arrow {
        display: flex !important; /* Force show */
        z-index: 50 !important;   /* Sit on top of image */
        top: 110px !important;    /* Position at center of 220px image */
        transform: translateY(-50%) !important;
        width: 35px !important;
        height: 35px !important;
        
        /* Add Shadow so they pop against the image */
        box-shadow: 0 0 5px rgba(0,0,0,0.5) !important;
        border: 1px solid white !important;
    }
    
    /* Move Left Arrow Inside */
    .sre-exclusive-slider .slick-prev {
        left: 10px !important; 
    }
    
    /* Move Right Arrow Inside */
    .sre-exclusive-slider .slick-next {
        right: 10px !important; 
    }
}

/* =========================================================
   Property Gallery Slider Height Fix
========================================================= */

.single-property .property-banner .lSSlideOuter,
.single-property .property-banner .lSSlideWrapper {
  height: auto !important;
  max-height: none !important;
}

.single-property .property-banner #property-gallery,
.single-property .property-banner .lightSlider {
  height: auto !important;
  max-height: none !important;
}

.single-property .property-banner .lightSlider > li,
.single-property .property-banner .sre-gallery-slide,
.single-property .property-banner .sre-aspect-tall {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-bottom: 0 !important;
}

.single-property .property-banner .lightSlider img,
.single-property .property-banner .sre-gallery-slide img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
}

.single-property .property-banner .lSPager.lSGallery {
  margin-top: 10px !important;
  position: relative !important;
  top: 0 !important;
}

.single-property .property-banner .lSAction > a {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* =========================================================
   Property Gallery FINAL Fix (kills fake height)
========================================================= */

.single-property .property-banner .sre-aspect-tall::before {
  content: none !important;
  display: none !important;
}

.single-property .property-banner .sre-aspect-tall {
  padding-bottom: 0 !important;
  height: auto !important;
}

.single-property .property-banner .lSSlideOuter,
.single-property .property-banner .lSSlideWrapper,
.single-property .property-banner .lightSlider,
.single-property .property-banner #property-gallery {
  height: auto !important;
  max-height: none !important;
}

/* =========================================================
   Property Gallery Mobile Fix Only
========================================================= */

@media (max-width: 767px) {
  .single-property .property-banner .sre-gallery-slide.sre-aspect-tall::before,
  .single-property .property-banner .sre-aspect-tall::before {
    content: none !important;
    display: none !important;
  }

  .single-property .property-banner .sre-gallery-slide.sre-aspect-tall,
  .single-property .property-banner .sre-aspect-tall {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 0 !important;
  }

  .single-property .property-banner .lSSlideOuter,
  .single-property .property-banner .lSSlideWrapper,
  .single-property .property-banner #property-gallery,
  .single-property .property-banner .lightSlider {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .single-property .property-banner .lightSlider > li,
  .single-property .property-banner .sre-gallery-slide {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .single-property .property-banner img.houzez-gallery-image,
  .single-property .property-banner .sre-gallery-slide img,
  .single-property .property-banner .lightSlider img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }

  .single-property .property-banner .lSPager.lSGallery {
    margin-top: 10px !important;
    top: 0 !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .single-property .property-banner .lSAction > a {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}