/* Collapsible Sections for Property Details Page */

/* Main collapsible section wrapper */
.collapsible-section {
    margin-bottom: 20px !important;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
    position: relative;
    z-index: 1;
    clear: both;
}

/* Collapsible header/title */
.collapsible-header {
    background: #2077ba;
    color: white;
    padding: 12px 20px;
    cursor: pointer;
    position: relative;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(32, 119, 186, 0.3);
}

.collapsible-header:hover {
    background: #2c91ce;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(32, 145, 206, 0.35);
}

.collapsible-header:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3);
}

/* Arrow icon */
.collapsible-arrow {
    font-size: 14px;
    transition: transform 0.3s ease;
    margin-left: 10px;
}

.collapsible-header.collapsed .collapsible-arrow {
    transform: rotate(-90deg);
}

.collapsible-header:not(.collapsed) .collapsible-arrow {
    transform: rotate(0deg);
}

/* Content area */
.collapsible-content {
    padding: 20px;
    background: #fff;
    border-top: 1px solid #e0e6ed;
    overflow: hidden;
    max-height: none;
}

/* Bootstrap collapse integration */
.collapsible-content.collapse {
    padding: 0;
}

.collapsible-content.collapse.show {
    padding: 20px;
}

.collapsible-content.collapsing {
    padding-left: 20px;
    padding-right: 20px;
}

/* Section-specific styling */
.section-description .collapsible-content {
    line-height: 1.6;
    color: #333;
}

.section-offers .collapsible-content {
    padding: 0;
}

.section-offers .modern-offer-card {
    margin: 0;
    border-radius: 0;
}

.section-amenities .collapsible-content {
    padding: 15px 20px;
    max-height: 600px;
    overflow-y: auto;
}

.section-map .collapsible-content {
    padding: 0;
}

.section-map #map {
    width: 100%;
    height: 400px;
    border: none;
    display: block;
    position: relative;
}

.section-map iframe {
    width: 100%;
    height: 600px; /* Allow taller embedded iframes (e.g., Google Maps embed) */
    border: none;
    display: block;
    position: relative;
}

/* Ensure map container is visible when section is expanded */
.section-map .collapsible-content.show #map {
    visibility: visible;
    opacity: 1;
    min-height: 400px;
}

/* Fix for Google Maps grey tiles */
.section-map #map {
    background-color: #f5f5f5;
}

/* Ensure proper sizing even when initially hidden */
.section-map .collapsible-content #map {
    width: 100% !important;
    height: 400px !important;
}

/* Prevent CSS transforms on map that can cause grey tiles */
.section-map #map,
.section-map #map * {
    transform: none !important;
    transition: none !important;
}

/* Ensure map images load properly */
.section-map #map img {
    max-width: none !important;
    max-height: none !important;
}

.section-reviews .collapsible-content {
    padding: 20px;
}

/* ---------------------------------------------
   Responsive embeds for Reviews/More and Widgets
   Ensures YouTube/Vimeo or any iframe/embed fills
   the width with a comfortable, responsive height.
   This overrides the generic iframe height:auto rule.
---------------------------------------------- */
.section-more .collapsible-content iframe,
.section-more .collapsible-content .wp-embedded-content,
.section-more .collapsible-content video,
.section-more .collapsible-content object,
.section-more .collapsible-content embed,
#collapseWidgets iframe,
#collapseWidgets .wp-embedded-content {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    /* Use a fluid 16:9 height with sensible bounds */
    height: clamp(240px, 56.25vw, 70vh) !important;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* Explicitly target common video providers anywhere in the listing content,
   except the dedicated map section which has its own sizing. */
.single-content.listing-content :not(.section-map) iframe[src*="youtube"],
.single-content.listing-content :not(.section-map) iframe[src*="vimeo"],
.single-content.listing-content :not(.section-map) iframe[src*="dailymotion"],
.single-content.listing-content :not(.section-map) iframe[src*="player.vimeo"] {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(240px, 56.25vw, 70vh) !important;
    aspect-ratio: 16 / 9;
    border: 0;
}

@media (max-width: 768px) {
    .section-more .collapsible-content iframe,
    .section-more .collapsible-content .wp-embedded-content,
    .section-more .collapsible-content video,
    .section-more .collapsible-content object,
    .section-more .collapsible-content embed,
    #collapseWidgets iframe,
    #collapseWidgets .wp-embedded-content {
        height: clamp(200px, 56.25vw, 60vh) !important;
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .collapsible-header {
        padding: 12px 20px;
        font-size: 16px;
    }
    
    .collapsible-content {
        padding: 15px;
    }
    
    .collapsible-content.collapse.show {
        padding: 15px;
    }
    
    .collapsible-content.collapsing {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .section-map #map,
    .section-map iframe {
        height: 300px;
    }
}

/* Animation improvements */
.collapsible-section {
    transition: all 0.3s ease;
}

.collapsible-section:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Icons for different sections */
.section-description .collapsible-header::before {
    content: "\f036";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.section-offers .collapsible-header::before {
    content: "\f02b";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.section-amenities .collapsible-header::before {
    content: "\f0ca";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.section-map .collapsible-header::before {
    content: "\f279"; /* fa-map */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.section-cancellation .collapsible-header::before {
    content: "\f1c2"; /* fa-file-contract */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.section-details .collapsible-header::before {
    content: "\f236"; /* fa-bed */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.section-more .collapsible-header::before {
    content: "\f05a"; /* fa-info-circle */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.section-reviews .collapsible-header::before {
    content: "\f005";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.section-details .collapsible-header::before {
    content: "\f05a";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.section-cancellation .collapsible-header::before {
    content: "\f05e";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

/* Smooth transitions for content */
.collapse {
    transition: height 0.35s ease;
}

.collapsing {
    transition: height 0.35s ease;
}

/* Ensure proper spacing between sections */
.collapsible-sections-container .collapsible-section:last-child {
    margin-bottom: 20px;
}

/* Force consistent spacing for all sections when closed */
.collapsible-section.collapsed {
    margin-bottom: 20px !important;
}

/* Specific spacing fixes for problematic sections */
.section-description {
    margin-bottom: 20px !important; /* Consistent with other sections */
    margin-top: 0 !important;
}

/* Consistent spacing between all sections */
.collapsible-section + .collapsible-section {
    margin-top: 0 !important;
}

.section-amenities {
    margin-bottom: 20px !important;
    margin-top: 0 !important;
}

.section-cancellation {
    margin-bottom: 20px !important;
    margin-top: 0 !important;
}

.section-offers {
    margin-bottom: 20px !important;
    margin-top: 0 !important;
}

.section-details {
    margin-bottom: 20px !important;
    margin-top: 0 !important;
}

.section-map {
    margin-bottom: 20px !important;
    margin-top: 0 !important;
}

.section-more {
    margin-bottom: 20px !important;
    margin-top: 0 !important;
}

/* Clear floats that might affect spacing */
.collapsible-section::before,
.collapsible-section::after {
    content: "";
    display: table;
    clear: both;
}

/* Prevent margin collapse between sections */
.collapsible-section + .collapsible-section {
    margin-top: 0 !important;
}

/* Loading state */
.collapsible-content.loading {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.collapsible-content.loading::before {
    content: "\f110";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    animation: fa-spin 2s infinite linear;
    margin-right: 10px;
}