/**
 * Video Tracking Styles
 *
 * Styles for tracked video shortcode
 */

.tracked-video-container {
    position: relative;
    margin: 20px 0;
    border-radius: 8px;
    overflow: hidden;
}

.tracked-video {
    width: 100%;
    height: auto;
    display: block;
}

.tracked-video:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* Responsive video container */
.tracked-video-container video {
    max-width: 100%;
    height: auto;
}

/* Tap to play/pause functionality */
.tracked-video.tap-controls {
    cursor: pointer;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .tracked-video-container {
        margin: 15px 0;
        border-radius: 6px;
    }
}


/* Fade out animation */
.tracked-video-container.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Error state */
.tracked-video-error {
    padding: 20px;
    text-align: center;
    color: #666;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.tracked-video-error::before {
    content: "⚠️";
    display: block;
    font-size: 24px;
    margin-bottom: 10px;
}