/**
 * JetElements Audio Text Addon Styles
 */

/* Main flex container for audio + text layout */
.jet-audio-with-text {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

/* Player wrapper */
.jet-audio-with-text .jet-audio-player-wrap {
    min-width: 0;
}

.jet-audio-with-text .jet-audio-player-wrap .jet-audio {
    width: 100%;
}

/* Description text area */
.jet-audio-with-text .jet-audio-description {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Reset margins for paragraphs inside description */
.jet-audio-with-text .jet-audio-description p:first-child {
    margin-top: 0;
}

.jet-audio-with-text .jet-audio-description p:last-child {
    margin-bottom: 0;
}

/* Ensure proper width when in column layout */
.jet-audio-with-text[style*="column"] .jet-audio-player-wrap,
.jet-audio-with-text[style*="column"] .jet-audio-description {
    width: 100%;
    flex: none;
}

/* Responsive: Stack on smaller screens */
@media (max-width: 767px) {
    .jet-audio-with-text {
        flex-direction: column !important;
    }

    .jet-audio-with-text .jet-audio-player-wrap {
        width: 100% !important;
        flex: none !important;
        margin-bottom: 15px;
    }

    .jet-audio-with-text .jet-audio-description {
        width: 100%;
    }
}

/* ==============================================
   COMPACT MODE STYLES
   ============================================== */

/* Compact mode: Hide entire container until player is ready */
.jet-audio-compact-mode {
    opacity: 0;
    visibility: hidden;
}

/* Show container once player is initialized */
.jet-audio-compact-mode.jet-audio-player-ready {
    opacity: 1;
    visibility: visible;
}

/* Compact mode: Hide player controls initially (except play button) */
.jet-audio-compact-mode .mejs-time,
.jet-audio-compact-mode .mejs-currenttime-container,
.jet-audio-compact-mode .mejs-duration-container,
.jet-audio-compact-mode .mejs-time-rail,
.jet-audio-compact-mode .mejs-volume-button,
.jet-audio-compact-mode .mejs-horizontal-volume-slider,
.jet-audio-compact-mode .mejs-volume-slider,
.jet-audio-compact-mode .mejs-speed-button {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Compact mode: Adjust player wrap to only fit play button */
.jet-audio-compact-mode .jet-audio-player-wrap {
    width: auto !important;
    flex: 0 0 auto !important;
}

/* Compact mode: Ensure mejs container doesn't take full width */
.jet-audio-compact-mode .mejs-container {
    width: auto !important;
    min-width: auto !important;
}

.jet-audio-compact-mode .mejs-controls {
    width: auto !important;
}

/* ==============================================
   COMPACT MODE EXPANDED STATE (after play)
   ============================================== */

/* When expanded: Show all controls */
.jet-audio-compact-mode.jet-audio-expanded .mejs-time,
.jet-audio-compact-mode.jet-audio-expanded .mejs-currenttime-container,
.jet-audio-compact-mode.jet-audio-expanded .mejs-duration-container,
.jet-audio-compact-mode.jet-audio-expanded .mejs-time-rail,
.jet-audio-compact-mode.jet-audio-expanded .mejs-volume-button,
.jet-audio-compact-mode.jet-audio-expanded .mejs-horizontal-volume-slider,
.jet-audio-compact-mode.jet-audio-expanded .mejs-volume-slider,
.jet-audio-compact-mode.jet-audio-expanded .mejs-speed-button {
    display: block !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
}

/* When expanded: Hide description */
.jet-audio-compact-mode.jet-audio-expanded .jet-audio-description {
    display: none !important;
}

/* When expanded: Player wrap takes full width again */
.jet-audio-compact-mode.jet-audio-expanded .jet-audio-player-wrap {
    width: 100% !important;
    flex: 1 1 100% !important;
}

/* When expanded: Reset mejs container width */
.jet-audio-compact-mode.jet-audio-expanded .mejs-container {
    width: 100% !important;
}

.jet-audio-compact-mode.jet-audio-expanded .mejs-controls {
    width: 100% !important;
}