/*
 * Details Page Responsive CSS
 * Mobile-first approach for super responsive design across all devices
 */

/* ============================================
   MOBILE FIRST BASE STYLES
   ============================================ */

/* Reset and base responsive styles */
.details-page {
    width: 100%;
    overflow-x: hidden;
}

/* ============================================
   FORCE MOBILE FULL WIDTH - CRITICAL OVERRIDES
   ============================================ */

/* FORCE all Bootstrap column classes to be full width on mobile */
@media (max-width: 767.98px) {
    /* Amenities - Force full width on mobile */
    .amenitieslistclass .listing_detail,
    .amenitieslistclass .listing_detail.col-12,
    .amenitieslistclass .listing_detail.col-sm-6,
    .amenitieslistclass .listing_detail.col-md-4,
    .amenitieslistclass .col-12.col-sm-6.col-md-4,
    .listing_detail.feature_block_others.amenitieslistclass .listing_detail,
    .panel-body .amenitieslistclass .listing_detail,
    .panel-body .amenitieslistclass .col-12,
    .panel-body .amenitieslistclass .col-sm-6,
    .panel-body .amenitieslistclass .col-md-4,
    .features_wrapper .amenitieslistclass .listing_detail {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: block !important;
        float: none !important;
        clear: both !important;
        box-sizing: border-box !important;
    }
    
    /* Similar Listings - Force full width on mobile */
    .similar_listings_wrapper_flex .listing_wrapper,
    .similar_listings_wrapper_flex .listing_wrapper.col-12,
    .similar_listings_wrapper_flex .listing_wrapper.col-sm-6,
    .similar_listings_wrapper_flex .listing_wrapper.col-md-4,
    .similar_listings_wrapper_flex .col-12.col-sm-6.col-md-4,
    .similar_listings_wrapper_flex .property_unit_v1,
    .similar_listings_wrapper_flex .property_flex,
    .similar_listings .listing_wrapper,
    .similar_listings .col-12,
    .similar_listings .col-sm-6,
    .similar_listings .col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: block !important;
        float: none !important;
        clear: both !important;
        box-sizing: border-box !important;
    }
    
    /* Force containers to not use flexbox on mobile */
    .amenitieslistclass .row {
        display: block !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .similar_listings_wrapper_flex {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ============================================
   OFFERS SECTION RESPONSIVE
   ============================================ */

/* Modern Offer Card - Mobile First */
.modern-offer-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 16px !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
    overflow: hidden !important;
    position: relative !important;
    border: none !important;
    width: 100% !important;
    max-width: none !important;
}

/* Offer Header - Responsive */
.modern-offer-card > div:first-child {
    padding: 20px 15px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Offer Content Area */
.modern-offer-card > div:last-child {
    background: white !important;
    padding: 20px 15px !important;
    position: relative !important;
}

/* Offer Details Grid - Mobile Stack */
.offer-details-grid {
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

.offer-detail-card {
    padding: 15px !important;
    border-radius: 12px !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    width: 100% !important;
    flex: none !important;
    color: white !important;
}

.offer-detail-card.discount-card {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
}

.offer-detail-card.date-card {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
}

.offer-card-bg-pattern {
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
    width: 60px !important;
    height: 60px !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 50% !important;
}

.offer-card-content {
    position: relative !important;
    z-index: 2 !important;
}

.offer-card-header {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 8px !important;
}

.offer-card-header i {
    font-size: 18px !important;
    margin-right: 10px !important;
    opacity: 0.9 !important;
}

.offer-card-header span {
    font-size: 13px !important;
    opacity: 0.9 !important;
    font-weight: 500 !important;
}

.offer-card-value {
    font-size: 18px !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

.modern-offer-card .row {
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

.modern-offer-card .row > div {
    padding: 15px !important;
    border-radius: 12px !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    width: 100% !important;
    flex: none !important;
}

/* Description and Terms sections */
.modern-offer-card [style*="background: #f8f9fa"],
.modern-offer-card [style*="background: #fff3cd"] {
    padding: 15px !important;
    border-radius: 10px !important;
    margin-bottom: 15px !important;
}

/* Book Now Button - Mobile Friendly */
.modern-offer-card button {
    width: 100% !important;
    padding: 15px 20px !important;
    border-radius: 25px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
    border: none !important;
    margin-top: 10px !important;
}

/* ============================================
   AMENITIES SECTION RESPONSIVE - ULTRA SPECIFIC
   ============================================ */

/* Override Bootstrap classes with highest specificity */
.amenitieslistclass,
.listing_detail.feature_block_others.amenitieslistclass,
.panel-body .amenitieslistclass {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.amenitieslistclass .row,
.listing_detail.feature_block_others.amenitieslistclass .row,
.panel-body .amenitieslistclass .row {
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    width: 100% !important;
}

/* MOBILE: Ultra-specific selectors for amenities */
.amenitieslistclass .listing_detail,
.amenitieslistclass .listing_detail.col-12,
.amenitieslistclass .listing_detail.col-sm-6,
.amenitieslistclass .listing_detail.col-md-4,
.amenitieslistclass .col-12.col-sm-6.col-md-4,
.listing_detail.feature_block_others.amenitieslistclass .listing_detail,
.panel-body .amenitieslistclass .listing_detail,
.features_wrapper .amenitieslistclass .listing_detail {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 20px 15px !important;
    margin: 0 0 20px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    display: block !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

.amenitieslistclass .listing_detail:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

/* Amenities Sub-items */
.amenitieslistclass ul,
.amenitieslistclass .listing_detail ul {
    list-style: none !important;
    margin: 15px 0 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.amenitieslistclass li,
.amenitieslistclass .listing_detail li {
    padding: 8px 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    position: relative !important;
    min-height: 20px !important;
}

/* Font Awesome icons - consistent alignment */
.amenitieslistclass li i,
.amenitieslistclass .listing_detail li i,
.amenitieslistclass i {
    width: 16px !important;
    height: 16px !important;
    margin-right: 12px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    vertical-align: baseline !important;
    line-height: 1 !important;
    position: static !important;
}

/* Image icons - consistent alignment and sizing */
.amenitieslistclass li img,
.amenitieslistclass .listing_detail li img,
.amenitieslistclass img {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin-right: 12px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    vertical-align: baseline !important;
    line-height: 1 !important;
    object-fit: contain !important;
    object-position: center !important;
    position: static !important;
}

/* Main amenities container - ensure proper flex layout */
.amenitieslistclass .listing_detail {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* Ensure text content is properly aligned */
.amenitieslistclass li span,
.amenitieslistclass .boldtext span {
    padding-left: 0 !important;
    margin-left: 0 !important;
    line-height: 1.4 !important;
    flex: 1 !important;
    vertical-align: baseline !important;
}

/* Amenities main text - proper icon alignment */
.amenitieslistclass .boldtext {
    font-weight: 600 !important;
    color: #333 !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    font-size: 16px !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    line-height: 1.3 !important;
    min-height: 20px !important;
}

/* Ensure icons in boldtext are properly aligned */
.amenitieslistclass .boldtext i,
.amenitieslistclass .boldtext img {
    margin-right: 12px !important;
    flex-shrink: 0 !important;
    vertical-align: baseline !important;
}

/* JavaScript-generated amenities with absolute positioning - override to use flex */
.amenitieslistclass div[style*="position: relative"] {
    display: flex !important;
    align-items: center !important;
    padding-left: 0 !important;
    margin-bottom: 8px !important;
}

.amenitieslistclass div[style*="position: relative"] i,
.amenitieslistclass div[style*="position: relative"] img,
.amenitieslistclass div[style*="position: relative"] span {
    position: static !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

.amenitieslistclass div[style*="position: relative"] label {
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
}

/* Show More Links */
.amenitieslistclass .mainshowmore {
    color: #007bff !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    padding: 8px 0 !important;
    display: inline-block !important;
}

/* ============================================
   SIMILAR LISTINGS RESPONSIVE - ULTRA SPECIFIC
   ============================================ */

/* Similar Listings Container */
.similar_listings_wrapper {
    width: 100% !important;
    padding: 0 15px !important;
    margin: 0 !important;
}

.similar_listings {
    width: 100% !important;
    max-width: none !important;
}

/* Similar Listings Title */
.agent_listings_title_similar {
    font-size: 24px !important;
    margin-bottom: 30px !important;
    text-align: center !important;
    color: #333 !important;
    font-weight: 600 !important;
}

/* MOBILE: Ultra-specific selectors for similar listings */
/* Base similar listings wrapper - mobile first approach */
.similar_listings_wrapper_flex {
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ultra-specific override to ensure 3-column layout works */
.content_wrapper .similar_listings_wrapper .similar_listings .similar_listings_wrapper_flex {
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important;
}

/* Force tablet and desktop to use row layout with maximum specificity */
@media (min-width: 768px) {
    .content_wrapper .similar_listings_wrapper .similar_listings .similar_listings_wrapper_flex,
    .full_width_row .similar_listings_wrapper .similar_listings .similar_listings_wrapper_flex,
    div.similar_listings_wrapper_flex {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 20px !important;
        justify-content: flex-start !important;
    }
    
    .content_wrapper .similar_listings_wrapper .similar_listings .similar_listings_wrapper_flex .listing_wrapper,
    .full_width_row .similar_listings_wrapper .similar_listings .similar_listings_wrapper_flex .listing_wrapper,
    div.similar_listings_wrapper_flex .listing_wrapper {
        width: calc(33.333% - 14px) !important;
        flex: 0 0 calc(33.333% - 14px) !important;
        max-width: calc(33.333% - 14px) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }
}

/* Override Bootstrap classes for individual listing items - Mobile Only */
@media (max-width: 767.98px) {
    .similar_listings_wrapper_flex .listing_wrapper,
    .similar_listings_wrapper_flex .listing_wrapper.col-12,
    .similar_listings_wrapper_flex .listing_wrapper.col-sm-6,
    .similar_listings_wrapper_flex .listing_wrapper.col-md-4,
    .similar_listings_wrapper_flex .col-12.col-sm-6.col-md-4,
    .similar_listings .listing_wrapper,
    .similar_listings .col-12.col-sm-6.col-md-4 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: none !important;
        display: block !important;
    }
}

.similar_listings_wrapper_flex .property_listing {
    background: white !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-bottom: 25px !important;
}

.similar_listings_wrapper_flex .property_listing:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
}

/* Listing Image */
.listing-unit-img-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 220px !important;
    overflow: hidden !important;
}

.listing-unit-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
}

.listing-unit-img-wrapper:hover img {
    transform: scale(1.05) !important;
}

/* Price Unit */
.similar_listings_wrapper_flex .price_unit {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    background: rgba(0,0,0,0.8) !important;
    color: white !important;
    padding: 8px 14px !important;
    border-radius: 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    backdrop-filter: blur(10px) !important;
}

/* Title Container */
.similar_listings_wrapper_flex .title-container {
    padding: 20px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.similar_listings_wrapper_flex .title-container .price_unit {
    position: static !important;
    background: transparent !important;
    color: #007bff !important;
    padding: 0 !important;
    font-size: 18px !important;
    margin-bottom: 12px !important;
    backdrop-filter: none !important;
    font-weight: 600 !important;
}

/* Category Name and Links */
.similar_listings_wrapper_flex .category_name {
    flex: 1 !important;
}

.similar_listings_wrapper_flex .listing_title_unit {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    display: block !important;
    margin-bottom: 10px !important;
}

.similar_listings_wrapper_flex .listing_title_unit:hover {
    color: #007bff !important;
    text-decoration: none !important;
}

.similar_listings_wrapper_flex .category_tagline {
    font-size: 14px !important;
    color: #666 !important;
    margin-bottom: 8px !important;
    line-height: 1.5 !important;
}

.similar_listings_wrapper_flex .category_tagline a {
    color: inherit !important;
    text-decoration: none !important;
}

.similar_listings_wrapper_flex .category_tagline a:hover {
    color: #007bff !important;
}

/* ============================================
   TABLET RESPONSIVE (768px and up)
   ============================================ */

@media (min-width: 768px) {
    /* Offers Section - Tablet */
    .modern-offer-card > div:first-child {
        padding: 25px 20px !important;
    }
    
    .modern-offer-card > div:last-child {
        padding: 25px 20px !important;
    }
    
    .offer-details-grid {
        flex-direction: row !important;
        gap: 20px !important;
    }
    
    .offer-detail-card {
        width: calc(50% - 10px) !important;
        flex: 1 !important;
    }
    
    .modern-offer-card .row {
        flex-direction: row !important;
        gap: 20px !important;
    }
    
    .modern-offer-card .row > div {
        width: calc(50% - 10px) !important;
        flex: 1 !important;
    }
    
    .modern-offer-card button {
        width: auto !important;
        min-width: 200px !important;
        padding: 15px 30px !important;
    }
    
    /* Amenities Section - Tablet: Allow flex layout */
    .amenitieslistclass .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    
    .amenitieslistclass .listing_detail,
    .amenitieslistclass .listing_detail.col-12,
    .amenitieslistclass .listing_detail.col-sm-6,
    .amenitieslistclass .listing_detail.col-md-4 {
        flex: 0 0 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
        width: calc(50% - 10px) !important;
        margin-right: 20px !important;
        margin-bottom: 20px !important;
    }
    
    .amenitieslistclass .listing_detail:nth-child(even) {
        margin-right: 0 !important;
    }
    
    /* Similar Listings - Tablet: Allow flex layout with 3 cards per row */
    .similar_listings_wrapper_flex {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 20px !important;
        justify-content: flex-start !important;
    }
    
    .similar_listings_wrapper_flex .listing_wrapper,
    .similar_listings_wrapper_flex .listing_wrapper.col-12,
    .similar_listings_wrapper_flex .listing_wrapper.col-sm-6,
    .similar_listings_wrapper_flex .listing_wrapper.col-md-4 {
        width: calc(33.333% - 14px) !important;
        flex: 0 0 calc(33.333% - 14px) !important;
        max-width: calc(33.333% - 14px) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }
    
    .listing-unit-img-wrapper {
        height: 180px !important;
    }
}

/* ============================================
   DESKTOP RESPONSIVE (1024px and up)
   ============================================ */

@media (min-width: 1024px) {
    /* Offers Section - Desktop */
    .modern-offer-card > div:first-child {
        padding: 30px 25px !important;
    }
    
    .modern-offer-card > div:last-child {
        padding: 30px 25px !important;
    }
    
    /* Amenities Section - Desktop */
    .amenitieslistclass .listing_detail,
    .amenitieslistclass .listing_detail.col-12,
    .amenitieslistclass .listing_detail.col-sm-6,
    .amenitieslistclass .listing_detail.col-md-4 {
        flex: 0 0 calc(33.333% - 14px) !important;
        max-width: calc(33.333% - 14px) !important;
        width: calc(33.333% - 14px) !important;
        margin-right: 20px !important;
    }
    
    .amenitieslistclass .listing_detail:nth-child(3n) {
        margin-right: 0 !important;
    }
    
    .amenitieslistclass .listing_detail:nth-child(even) {
        margin-right: 20px !important;
    }
    
    /* Similar Listings - Desktop: 3 cards per row */
    .similar_listings_wrapper_flex {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 20px !important;
        justify-content: flex-start !important;
    }
    
    .similar_listings_wrapper_flex .listing_wrapper,
    .similar_listings_wrapper_flex .listing_wrapper.col-12,
    .similar_listings_wrapper_flex .listing_wrapper.col-sm-6,
    .similar_listings_wrapper_flex .listing_wrapper.col-md-4 {
        width: calc(33.333% - 14px) !important;
        flex: 0 0 calc(33.333% - 14px) !important;
        max-width: calc(33.333% - 14px) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }
    
    .listing-unit-img-wrapper {
        height: 200px !important;
    }
}

/* ============================================
   LARGE DESKTOP (1200px and up)
   ============================================ */

@media (min-width: 1200px) {
    .similar_listings_wrapper_flex {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 25px !important;
        justify-content: flex-start !important;
    }
    
    .similar_listings_wrapper_flex .listing_wrapper,
    .similar_listings_wrapper_flex .listing_wrapper.col-12,
    .similar_listings_wrapper_flex .listing_wrapper.col-sm-6,
    .similar_listings_wrapper_flex .listing_wrapper.col-md-4 {
        width: calc(33.333% - 17px) !important;
        flex: 0 0 calc(33.333% - 17px) !important;
        max-width: calc(33.333% - 17px) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }
    
    .listing-unit-img-wrapper {
        height: 220px !important;
    }
}

/* ============================================
   MAIN LAYOUT RESPONSIVE FIXES
   ============================================ */

/* Main Content Area */
#middleContent {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#middleContent .container-fluid {
    padding: 0 15px !important;
    max-width: none !important;
}

#middleContent .row {
    margin: 0 !important;
    width: 100% !important;
}

#middleContent .col-12 {
    padding: 0 !important;
    width: 100% !important;
}

/* Main Content and Sidebar Layout */
@media (max-width: 1199.98px) {
    #middleContent .col-lg-8,
    #middleContent .col-lg-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
    }
    
    #middleContent .col-lg-4 {
        margin-top: 30px !important;
    }
}

@media (min-width: 1200px) {
    #middleContent .col-lg-8 {
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
        padding-right: 20px !important;
        padding-left: 15px !important;
    }
    
    #middleContent .col-lg-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        padding-left: 10px !important;
        padding-right: 15px !important;
    }
}

/* ============================================
   GENERAL RESPONSIVE IMPROVEMENTS
   ============================================ */

/* Typography Responsive */
@media (max-width: 767.98px) {
    .entry-title {
        font-size: 22px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }
    
    .agent_listings_title_similar {
        font-size: 20px !important;
        margin-bottom: 15px !important;
    }
}

/* Button Improvements */
.btn {
    min-height: 44px !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

/* Form Elements */
.form-control {
    min-height: 44px !important;
    padding: 12px 15px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    margin-bottom: 15px !important;
}

/* Panel Wrappers */
.panel-wrapper {
    margin-bottom: 15px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

.panel-title {
    padding: 15px 20px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    background: #f8f9fa !important;
    border: none !important;
    margin: 0 !important;
}

.panel-body {
    padding: 20px !important;
}

/* Map Responsive */
/* Scope styles to the map container so generic iframes (e.g., SML map iframe)
   are not forced to a fixed height/size here. Those iframes manage their own
   sizing via more specific CSS (e.g., #iframe_map iframe in maps-fix.css). */
#map {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 8px !important;
    margin: 0 !important;
}

@media (max-width: 767.98px) {
    #map {
        height: 250px !important;
    }
}

@media (min-width: 768px) {
    #map {
        height: 400px !important;
    }
}

/* Gallery Responsive Improvements */
.gallery_container {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

@media (max-width: 767.98px) {
    .gallery_container {
        margin: 0 -15px !important;
    }
}

/* Breadcrumb Responsive */
.breadcrumb {
    font-size: 14px !important;
    padding: 10px 15px !important;
    margin-bottom: 20px !important;
    background: #f8f9fa !important;
    border-radius: 6px !important;
}

@media (max-width: 575.98px) {
    .breadcrumb {
        font-size: 12px !important;
        padding: 8px 12px !important;
        margin-bottom: 15px !important;
    }
}

/* Property Details Sidebar */
.widget-area-sidebar {
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1) !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
}

/* Listing Details */
.listing_detail {
    padding: 10px 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.listing_detail:last-child {
    border-bottom: none !important;
}

.item_head {
    font-weight: 600 !important;
    color: #333 !important;
    margin-right: 8px !important;
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Focus styles for keyboard navigation */
button:focus,
.btn:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
}

/* High contrast for better readability */
.modern-offer-card,
.similar_listings_wrapper_flex .property_listing,
.panel-wrapper {
    border: 1px solid rgba(0,0,0,0.1) !important;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .modern-offer-card,
    .similar_listings_wrapper_flex .property_listing {
        break-inside: avoid !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
    
    .gallery_container,
    #map {
        display: none !important;
    }
    
    .amenitieslistclass .listing_detail {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* GPU acceleration for animations */
.modern-offer-card,
.similar_listings_wrapper_flex .property_listing,
.listing-unit-img-wrapper img {
    transform: translateZ(0) !important;
    will-change: transform !important;
}

/* Optimize repaints */
.modern-offer-card button,
.btn {
    contain: layout style paint !important;
}

/* ============================================
   BOOTSTRAP OVERRIDE - NEUTRALIZE GRID SYSTEM
   ============================================ */

/* Override Bootstrap grid system completely for similar listings */
.similar_listings_wrapper_flex .listing_wrapper,
.similar_listings_wrapper_flex .similar-listing-item {
    /* Neutralize all Bootstrap col classes */
    -webkit-box-flex: unset !important;
    -ms-flex: unset !important;
    flex: unset !important;
    -webkit-box-flex: unset !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    max-width: unset !important;
    -ms-flex-preferred-size: unset !important;
    flex-basis: unset !important;
    -webkit-box-flex: unset !important;
    -ms-flex-positive: unset !important;
    flex-grow: unset !important;
    -ms-flex-negative: unset !important;
    flex-shrink: unset !important;
}

/* ============================================
   FINAL OVERRIDE - SIMILAR LISTINGS 3 COLUMNS
   ============================================ */

/* This is the final word on similar listings layout - it overrides everything */
@media (min-width: 768px) {
    body .similar_listings_wrapper_flex,
    html body .similar_listings_wrapper_flex,
    html body .content_wrapper .similar_listings_wrapper_flex,
    html body .full_width_row .similar_listings_wrapper_flex {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 20px !important;
        justify-content: flex-start !important;
    }
    
    body .similar_listings_wrapper_flex .listing_wrapper,
    html body .similar_listings_wrapper_flex .listing_wrapper,
    html body .content_wrapper .similar_listings_wrapper_flex .listing_wrapper,
    html body .full_width_row .similar_listings_wrapper_flex .listing_wrapper,
    .similar_listings_wrapper_flex .similar-listing-item {
        width: calc(33.333% - 14px) !important;
        flex: 0 0 calc(33.333% - 14px) !important;
        max-width: calc(33.333% - 14px) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        float: none !important;
    }
}

@media (min-width: 1200px) {
    body .similar_listings_wrapper_flex,
    html body .similar_listings_wrapper_flex,
    html body .content_wrapper .similar_listings_wrapper_flex,
    html body .full_width_row .similar_listings_wrapper_flex {
        gap: 25px !important;
    }
    
    body .similar_listings_wrapper_flex .listing_wrapper,
    html body .similar_listings_wrapper_flex .listing_wrapper,
    html body .content_wrapper .similar_listings_wrapper_flex .listing_wrapper,
    html body .full_width_row .similar_listings_wrapper_flex .listing_wrapper,
    .similar_listings_wrapper_flex .similar-listing-item {
        width: calc(33.333% - 17px) !important;
        flex: 0 0 calc(33.333% - 17px) !important;
        max-width: calc(33.333% - 17px) !important;
    }
}

/* ============================================
   THUMBNAIL STRIP RESPONSIVE STYLES
   ============================================ */

/* Responsive thumb sizing */
.thumb-strip-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
}

.thumb-strip-item {
    flex: 0 0 auto;
    width: clamp(56px, 10vw, 96px);   /* scales with viewport */
    outline: none;                    /* rely on focus styles below */
}

.thumb-strip-item:focus {
    outline: 2px solid currentColor;  /* visible keyboard focus */
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .thumb-strip-item { width: clamp(64px, 8vw, 110px); }
}
@media (min-width: 992px) {
    .thumb-strip-item { width: clamp(72px, 6.5vw, 120px); }
}