/* Style for the main item container */
.detail-body--item {
    margin-bottom: 2rem;
    /* Removed padding/border from here, apply to inner container if needed */
}

/* Container for the gallery/swiper elements */
.gallery {
    margin-bottom: 1rem;
}

/* --- MODIFIED --- */
/* Swiper container - acts as the positioning context */
.swiper-container {
    position: relative; /* *** REQUIRED for absolute positioning of children *** */
    width: 100%;
    border-radius: 8px;
    overflow: hidden; /* Keep content within rounded corners */
    background-color: #000; /* Background color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    /* Define the shape - Aspect Ratio is recommended */
    aspect-ratio: 16 / 9;
    /* OR Fixed Height (less responsive) */
    /* height: 450px; */
}

/* --- MODIFIED --- */
/* Styling for the thumbnail preview container - NOW ABSOLUTE */
.thumbnail-preview {
    position: absolute; /* *** Make it overlay *** */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* *** Place it above the video (z-index > 1) *** */
    cursor: pointer; /* Indicate it's clickable */
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out; /* For smooth hiding */
    border-radius: 8px; /* Match container rounding */
    overflow: hidden;
}

/* Styling for the thumbnail image itself */
.thumbnail-preview img {
    display: block;
    width: 100%;
    height: 100%; /* Make image fill the absolute container */
    object-fit: cover; /* Cover the area without stretching */
    /* max-height removed as height is now 100% */
}

/* --- ADDED: Play Button Overlay (Recommended) --- */
.play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px; /* Adjust size as needed */
    height: 48px;
    z-index: 3; /* Above the thumbnail */
    pointer-events: none; /* Click passes through to thumbnail */
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out; /* For smooth hiding */
}
/* Add SVG or Font Awesome icon inside this div in your HTML */
/* Example HTML addition inside .swiper-container: */
/* <div class="play-button-overlay"> <i class="fas fa-play-circle fa-4x"></i> </div> */


/* --- MODIFIED --- */
/* Common styling for both iframe and video */
.card-iframe,
.card-video {
    display: block;
    width: 100%;
    height: 100%; /* Make video/iframe fill the container */
    border: none;
    background-color: #000;
    position: absolute; /* Can also be absolute */
    top: 0;
    left: 0;
    z-index: 1; /* *** Place it below the thumbnail *** */
    /* Remove aspect-ratio from here if set on container */
}

/* --- ADDED: CSS for the 'playing' state --- */
/* Add this class to .swiper-container via JS when thumbnail is clicked */
.swiper-container.video-playing .thumbnail-preview,
.swiper-container.video-playing .play-button-overlay {
    opacity: 0;
    visibility: hidden; /* Hides element and removes from accessibility tree */
    pointer-events: none; /* Disable further interaction */
}


/* Style for the fallback text in video (less relevant with overlay) */
.card-video {
    color: #fff;
    text-align: center;
    /* padding: 20px; */
    font-size: 0.9em;
}

/* --- Keep previous styles for .detail-sidebar, .sidebar-item, .sidebar-title, .detail-others, .item, .content, .title --- */

/* Styling for the thumbnail container */
.detail-others .thumbnail {
    position: relative; /* REQUIRED for absolute positioning of the icon */
    width: 100px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 6px;
    /* overflow: hidden; */
    background-color: #e0e0e0;
}

/* Styling for the main thumbnail image */
.detail-others .main-thumbnail-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- MODIFIED/REPLACED --- */
/* Styling for the SVG Play Icon Overlay */
.play-icon-overlay {
    position: absolute;
    top: 0; /* Position from top */
    left: 0; /* Position from left */
    width: 100%; /* Take full width of thumbnail */
    height: 100%; /* Take full height of thumbnail */
    z-index: 2; /* Ensure it's above the main image */

    display: flex; /* Use flexbox for centering */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */

    background-color: rgba(0, 0, 0, 0.3); /* Optional: Darken thumbnail slightly */
    transition: opacity 0.2s ease-in-out; /* Smooth fade effect */
}

/* Style the SVG element itself within the overlay */
.play-icon-overlay svg {
    width: 35%; /* Control the size of the SVG relative to the overlay */
    height: auto; /* Maintain aspect ratio */
    max-width: 40px; /* Optional: Set a max pixel size */
    max-height: 40px; /* Optional: Set a max pixel size */
}

/* Show the overlay on hover of the parent item */
.detail-others .item:hover .play-icon-overlay {
    opacity: 1; /* Make it visible on hover */
}

@media screen and (max-width: 430px) {
    .custom-video .gallery .main-slider {
        width: 400px;
        height: 225px;
    }
}
.video-detail .detail-body .detail-body--item {
    margin-bottom: 20px;
}