/**
 * Custom Video Styles
 * Override WordPress video block with custom poster and play button
 */

 .cristal-custom-video-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: #000;
    margin-top: 62px;
    margin-bottom: 60px;
    display: inline-block;
    vertical-align: top;
    width: 100%;
}

.cristal-custom-video-wrapper,
.cristal-video-poster {
    position: relative;
    width: 100%;
    height: 452px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    opacity: 1;
    visibility: visible;
}

.cristal-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.cristal-video-overlay .cristal-play-button {
    border: none;
    cursor: pointer;
    padding: 0;
    background: none !important;
}


.cristal-video-player {
    width: 100%;
    height: auto;
    border-radius: 8px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    opacity: 1;
    visibility: visible;
}

/* Video playing state */
.cristal-custom-video-wrapper.playing .cristal-video-poster {
    display: none;
}

.cristal-custom-video-wrapper.playing .cristal-video-player {
    display: block !important;
}

/* Video paused state - show poster */
.cristal-custom-video-wrapper.paused .cristal-video-poster {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.cristal-custom-video-wrapper.paused .cristal-video-player {
    display: none;
}

/* Video ended state - show poster */
.cristal-custom-video-wrapper.ended .cristal-video-poster {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.cristal-custom-video-wrapper.ended .cristal-video-player {
    display: none;
}

/* Show play button when paused or ended */
.cristal-custom-video-wrapper.paused .cristal-video-overlay .cristal-play-button,
.cristal-custom-video-wrapper.ended .cristal-play-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/* Hide play button when playing */
.cristal-custom-video-wrapper.playing .cristal-video-overlay .cristal-play-button {
    display: none;
}

/* Loading state */
.cristal-custom-video-wrapper.loading .cristal-video-overlay .cristal-play-button {
    opacity: 0.7;
    pointer-events: none;
}

/* Responsive Design */
@media (max-width: 767.98px) {
    .cristal-video-overlay .cristal-play-button svg {
        width: 60px;
        height: 60px;
    }
}

/* Error message */
.cristal-video-error {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background: rgba(220, 53, 69, 0.9);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 6px;
    font-size: 0.9rem;
    text-align: center;
    z-index: 10;
    max-width: 80%;
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cristal-video-poster,
    .cristal-video-overlay,
    .cristal-video-overlay .cristal-play-button {
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
    }

    .cristal-video-overlay .cristal-play-button:hover {
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
    }
}