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

.lifesolutions-custom-video-wrapper {
    position: relative;
    width: calc(100% + 100px);
    overflow: hidden;
    margin-top: 25px;
    margin-bottom: 25px;
    display: inline-block;
    vertical-align: top;
    border-radius: 20px;
}

.lifesolutions-video-poster {
    position: relative;
    width: 100%;
    aspect-ratio: 1000/562;
    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;
}

.lifesolutions-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    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;
}

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


.lifesolutions-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 */
.lifesolutions-custom-video-wrapper.playing .lifesolutions-video-poster {
    display: none;
}

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

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

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

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

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

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

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

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

/* Responsive Design */
@media (max-width: 1060px) {
    .lifesolutions-custom-video-wrapper {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .lifesolutions-video-overlay .lifesolutions-play-button svg {
        width: 50px;
        height: 50px;
    }

    .lifesolutions-video-poster {
        height: auto;
        aspect-ratio: 330/186;
    }
}

/* Error message */
.lifesolutions-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) {

    .lifesolutions-video-poster,
    .lifesolutions-video-overlay,
    .lifesolutions-video-overlay .lifesolutions-play-button {
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
    }

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