/**
 * Minimal Text to Speech Player CSS
 * 
 * This file contains only essential styles for the player to function
 * without interfering with quiz plugins or form elements.
 * 
 * @package Mementor_TTS
 * @since 1.4.1
 */

/* Basic player container - no pointer-events manipulation */
.mementor-tts-player-container {
    margin: 10px 0;
    clear: both;
}

/* Basic player styling */
.mementor-tts-player {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Play button - minimal styling */
.mementor-tts-play-button {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.mementor-tts-play-button:hover {
    background: #f0f0f0;
}

/* Progress bar container */
.mementor-tts-progress-container {
    flex: 1;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
}

/* Progress bar */
.mementor-tts-progress-bar {
    height: 100%;
    background: #2271b1;
    border-radius: 3px;
    width: 0;
    transition: width 0.1s;
}

/* Time display */
.mementor-tts-time {
    font-size: 12px;
    color: #666;
    min-width: 80px;
    text-align: right;
}

/* Loading state - no pointer-events blocking */
.mementor-tts-player.mementor-tts-loading {
    opacity: 0.7;
}

/* Hide elements that might interfere */
.mementor-tts-info-popup,
.mementor-tts-tooltip {
    display: none !important;
}

/* Ensure player doesn't block form elements */
.mementor-tts-player-container * {
    position: static;
    z-index: auto;
}

/* Responsive */
@media (max-width: 480px) {
    .mementor-tts-player {
        flex-wrap: wrap;
    }
    
    .mementor-tts-progress-container {
        width: 100%;
        order: 3;
    }
}