/**
 * Mementor TTS Player Preview Styles
 * These styles use CSS variables that are dynamically set by PHP
 */

/* Base styles for the admin player preview */
.mementor-tts-preview-player-wrapper {
    /* Styles for the overall wrapper if needed */
}

.mementor-tts-preview-player-wrapper .mementor-tts-preview-player {
    /* Define styles using CSS variables */
    color: var(--preview-player-text-color, #0e0e0f);
    max-width: var(--preview-player-max-width, 100%);
    width: var(--preview-player-width, 100%);
    margin: var(--preview-player-margin, 0 auto);

    font-size: var(--preview-player-font-size, 16px) !important;

    /* Add other base player styles here */
    position: relative; /* Needed for absolute positioning of children like info popup */
}

/* Style the actual player controls container within the preview */
.mementor-tts-preview-player-wrapper .mementor-tts-preview-player .mementor-tts-custom-controls {
    background-color: var(--preview-player-bg-color);
    border-radius: var(--preview-player-border-radius);
    padding: var(--preview-player-padding) !important;
    border: 1px solid var(--preview-player-border-color);
    box-shadow: var(--preview-player-shadow);
    /* Add display flex and alignment from original player if needed */
    display: flex;
    align-items: center;
    gap: 10px; /* Example gap */
}

input#mementor_tts_player_label {
    max-width: 100%;
}

/* Style specific elements within the player using variables */
.mementor-tts-preview-player .mementor-tts-player-label {
    /* Style for the player label */
    color: var(--preview-player-label-color, var(--preview-player-text-color));
    font-weight: var(--preview-player-label-weight, bold);
    display: var(--preview-player-label-display, block); /* Controlled by JS/PHP */
}

/* Increase specificity for preview */
.mementor-tts-preview-player-wrapper .mementor-tts-preview-player .mementor-tts-play-button {
    background-color: var(--preview-player-play-button-bg, var(--preview-player-accent-color, #2271b1)) !important;
    color: var(--preview-player-play-button-text, #ffffff) !important;
    /* Add other button styles */
}

/* Increase specificity & fix typo -> target correct element */
.mementor-tts-preview-player-wrapper .mementor-tts-preview-player .mementor-tts-progress-container {
    background-color: var(--preview-player-progress-bg, #e0e0e0) !important;
}

/* Waveform containers must stay transparent in the preview. The solid
   progress-bg rule above (higher specificity than the shared transparent rule)
   would otherwise cover the unplayed SVG wave bars, hiding the pattern until
   playback reveals the played bars. */
.mementor-tts-preview-player-wrapper .mementor-tts-preview-player .mementor-tts-progress-container.mementor-tts-waveform {
    background-color: transparent !important;
}

/* Increase specificity & target correct element */
.mementor-tts-preview-player-wrapper .mementor-tts-preview-player .mementor-tts-progress-bar {
    background-color: var(--preview-player-progress-fg, var(--preview-player-accent-color, #2271b1));
}

.mementor-tts-preview-player .mementor-tts-time {
    color: var(--preview-player-time-color, var(--preview-player-text-color));
}

/* Add more specific selectors and styles as needed for the preview */

/* Define the variables in a scope, :root or a specific container */
/* These initial values will be overridden by wp_add_inline_style in PHP */
.mementor-tts-preview-player-wrapper {
    --preview-player-bg-color: #f5eee9;
    --preview-player-text-color: #0e0e0f;
    --preview-player-accent-color: #2271b1;
    --preview-player-border-radius: 5px;
    --preview-player-padding: 10px;
    --preview-player-max-width: 100%;
    --preview-player-width: 100%;
    --preview-player-margin: 0 auto;
    --preview-player-border-color: transparent;
    --preview-player-shadow: none;
    --preview-player-font-family: inherit;
    --preview-player-font-size: 16px; /* Use pixel default */
    --preview-player-label-display: block;
    --preview-player-label-color: var(--preview-player-text-color);
    --preview-player-label-weight: bold;
    --preview-player-play-button-bg: var(--preview-player-accent-color);
    --preview-player-play-button-text: #ffffff;
    --preview-player-progress-bg: #e0e0e0;
    --preview-player-progress-fg: var(--preview-player-accent-color);
    --preview-player-time-color: var(--preview-player-text-color);
    --preview-player-play-icon-size: 24px; /* Add default */
    /* Add more variables as needed */
}

/* Increase specificity */
.mementor-tts-preview-player-wrapper .mementor-tts-preview-player .mementor-tts-time-display,
.mementor-tts-preview-player-wrapper .mementor-tts-preview-player .mementor-tts-duration-display {
    color: var(--preview-player-time-color) !important;
    font-size: var(--preview-player-font-size) !important; /* Apply preview font size */
}

.mementor-tts-preview-player .mementor-tts-volume-button,
.mementor-tts-preview-player .mementor-tts-speed-button,
.mementor-tts-preview-player .mementor-tts-download-button,
.mementor-tts-preview-player .mementor-tts-info-button {
    color: var(--preview-player-accent-color);
}

.mementor-tts-preview-player .mementor-tts-volume-button .dashicons,
.mementor-tts-preview-player .mementor-tts-speed-button .dashicons,
.mementor-tts-preview-player .mementor-tts-download-button .dashicons,
.mementor-tts-preview-player .mementor-tts-info-button .dashicons {
     color: var(--preview-player-accent-color);
}

/* Add rule for the play button dashicon */
.mementor-tts-preview-player .mementor-tts-play-button .dashicons {
    color: var(--preview-player-accent-color);
}

/* Add rule for the play button dashicon size */
.mementor-tts-preview-player-wrapper .mementor-tts-preview-player .mementor-tts-play-button .dashicons {
    /* Use !important to override potential conflicts */
    font-size: var(--preview-player-play-icon-size) !important; 
    /* Optionally set width/height too if needed for alignment */
     width: var(--preview-player-play-icon-size) !important;
     height: var(--preview-player-play-icon-size) !important;
}