/**
 * AA/AWS Hero Video Widget Styles
 * Version: 1.0.0
 *
 * CSS Custom Properties (set via inline style on container):
 * --aa-hero-height: Container height in pixels (default 450px)
 * --aa-hero-mobile-bp: Mobile breakpoint in pixels (default 768px)
 */

.aa-hero-video-container {
    position: relative;
    width: 100%;
    height: var(--aa-hero-height, 450px);
    aspect-ratio: 1920 / 450;
    overflow: hidden;
    background-color: #000;
    z-index: 0;
}

/* Place hero video behind header elements (menu, search, logo) */
.elementor-widget-aa-aws-hero-video {
    z-index: -1 !important;
    position: relative;
}

.aa-hero-video-container video,
.aa-hero-video-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.aa-hero-video-container .hero-poster {
    z-index: 1;
    display: block;
}

.aa-hero-video-container video {
    z-index: 0;
    opacity: 0;
    transition: opacity 200ms ease;
}

.aa-hero-video-container.video-playing video {
    z-index: 1;
    opacity: 1;
}

.aa-hero-video-container.video-playing .hero-poster {
    opacity: 0;
    transition: opacity 150ms ease;
}

/* Loading state - uses data attribute for custom loading text */
.aa-hero-video-container.loading::after {
    content: attr(data-loading-text);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 18px;
    z-index: 2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Fallback if data-loading-text is empty */
.aa-hero-video-container.loading:not([data-loading-text])::after,
.aa-hero-video-container.loading[data-loading-text=""]::after {
    content: 'Loading...';
}