/* ==========================================
   VIDEO STYLES - CICARIAS REAL ESTATE
   ========================================== */

/* Video en cards de propiedades */
.property-card video,
.desarrollo-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Indicador de play en videos */
.video-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    color: white;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    pointer-events: none;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.property-card:hover .video-indicator,
.desarrollo-card:hover .video-indicator {
    opacity: 0.6;
}

/* Video en modal */
.modal-media {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
}

#modal-image {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
}

/* Videos en thumbnails */
.thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

/* Wrapper para media (imagen o video) */
.media-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.media-wrapper .video-play-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: white;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    pointer-events: none;
    z-index: 2;
}

/* Controles de video personalizados */
video::-webkit-media-controls {
    opacity: 0;
    transition: opacity 0.3s ease;
}

video:hover::-webkit-media-controls {
    opacity: 1;
}

/* Video en fullscreen */
.fullscreen-modal video {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
}

/* Loading spinner para videos */
video:not([poster]) {
    background: #000;
}

/* Optimización para móviles */
@media (max-width: 768px) {
    .video-indicator {
        font-size: 3rem;
    }
    
    .media-wrapper .video-play-indicator {
        font-size: 2rem;
    }
    
    #modal-image,
    .modal-media {
        max-height: 50vh;
    }
}

/* Asegurar que los videos no se desborden */
.property-image video,
.property-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Estado de pausa/play visual */
.property-card video[paused] {
    filter: brightness(0.8);
}

.property-card video:not([paused]) {
    filter: brightness(1);
}