/* Banner and Carousel Base Styles */
.banner-showcase {
    margin-bottom: var(--spacing-l);
    overflow: hidden;
    width: 100%;
}

.banner-showcase.loading {
    background: #f8f9fa;
}

.banner-showcase.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

/* Carousel Structure */
.carousel {
    width: 100%;
}

.carousel.loaded {
    opacity: 1;
}

.carousel-inner {
    overflow: hidden;
}

/* Carousel Items */
.carousel-item {
    position: relative;
    transition: transform .6s ease-in-out;
}

.carousel-item.loading {
    opacity: 0;
}

.carousel-item picture {
    display: block;
    width: 100%;
}

.carousel-item img,
.carousel-item video {
    width: 100%;
    height: auto;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.carousel-item img.loaded,
.carousel-item video.loaded {
    opacity: 1;
}

/* Carousel Controls */
.carousel-control-prev,
.carousel-control-next {
    width: 5%;
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
}

/* Carousel Indicators */
.carousel-indicators,
.carouselIndicators {
    position: absolute;
    bottom: var(--spacing-lg);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.carousel-indicators [data-bs-target],
.carouselIndicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--white);
    opacity: 0.5;
    margin: 0 6px;
    transition: all var(--transition-fast);
}

.carousel-indicators .active {
    opacity: 1;
}

/* Video Styles */
.banner-video-wrapper {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-touch-callout: none !important;
    height: 100%;
    width: 100%;
}

.banner-video-wrapper video,
.banner-video-wrapper picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-drag: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Hide all video controls */
.banner-video-wrapper video {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    outline: none !important;
    pointer-events: none !important;
}

.banner-video-wrapper video::-webkit-media-controls,
.banner-video-wrapper video::-webkit-media-controls-panel,
.banner-video-wrapper video::-webkit-media-controls-play-button,
.banner-video-wrapper video::-webkit-media-controls-start-playback-button,
.banner-video-wrapper video::-webkit-media-controls-panel-container,
.banner-video-wrapper video::-webkit-media-controls-status-display,
.banner-video-wrapper video::-webkit-media-controls-timeline-container,
.banner-video-wrapper video::-webkit-media-controls-current-time-display,
.banner-video-wrapper video::-webkit-media-controls-time-remaining-display,
.banner-video-wrapper video::-webkit-media-controls-timeline,
.banner-video-wrapper video::-webkit-media-controls-volume-slider-container,
.banner-video-wrapper video::-webkit-media-controls-volume-slider,
.banner-video-wrapper video::-webkit-media-controls-seek-back-button,
.banner-video-wrapper video::-webkit-media-controls-seek-forward-button,
.banner-video-wrapper video::-webkit-media-controls-fullscreen-button,
.banner-video-wrapper video::-webkit-media-controls-rewind-button,
.banner-video-wrapper video::-webkit-media-controls-return-to-realtime-button,
.banner-video-wrapper video::-webkit-media-controls-toggle-closed-captions-button,
.banner-video-wrapper video::-internal-media-controls-download-button,
.banner-video-wrapper video::-webkit-media-controls-overflow-button {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.banner-video-wrapper video::-webkit-media-controls-container,
.banner-video-wrapper video::-webkit-media-controls-enclosure {
    opacity: 0 !important;
    pointer-events: none !important;
    display: none !important;
}

/* Force hide native controls */
.banner-video-wrapper video::-webkit-media-controls {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    -webkit-appearance: none !important;
}

/* Prevent any interaction */
.banner-video-wrapper {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-touch-callout: none !important;
}


.carousel-item {
    height: 300px;
}
.carousel-item img {
    height: 300px;
}

#homeBannerCarousel .carousel-item {
    height: 800px;
}
#homeBannerCarousel .carousel-item img {
    height: 800px;
}

/* Responsive Styles */
/* Large devices (desktops) */
@media (min-width: 1200px) {
    .carousel-item {
        height: 300px;
    }
    .carousel-item img {
        height: 300px;
    }

    #homeBannerCarousel .carousel-item {
        height: 800px;
    }
    #homeBannerCarousel .carousel-item img {
        height: 800px;
    }
}

/* Medium devices (tablets) */
@media (min-width: 768px) and (max-width: 1199px) {
    .carousel-item {
        height: 300px;
    }
    .carousel-item img {
        height: 300px;
    }
    #homeBannerCarousel .carousel-item {
        height: 600px;
    }
    #homeBannerCarousel .carousel-item img {
        height: 600px;
    }
}

/* Small devices (phones) */
@media (max-width: 767px) {
    #homeBannerCarousel .carousel-item {
        height: 300px;
    }
    #homeBannerCarousel .carousel-item img {
        height: 300px;
    }
}

/* Animations */
@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}