/* Container for all slides */
.mr-slides-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 2px solid #4CAF50;
    border-radius: 10px;
    background-color: #f9f9f9;
}

/* Individual slide styling */
.mr-slide {
    position: relative; /* Required for absolute positioning of image and additional text */
    display: none; /* Hide all slides by default */
    text-align: center;
    padding: 20px;
    border: 2px solid #9C27B0;
    border-radius: 10px;
    background-color: #fff;
}

/* Show only the first slide initially */
.mr-slide:first-child {
    display: block;
}

/* Main text area for the slide */

/* Slide number styling */
.mr-slide-number {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

/* Media buttons (BT1, BT2, etc.) */
.mr-media-buttons {
    margin-top: 20px;
}

.mr-media-button {
    background-color: #ff4c4c;
    color: white;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    display: inline-block;
    font-size: 16px;
    border: 2px solid #e60000;
}

.mr-media-button:hover {
    background-color: #e60000;
}

/* Image Area - Positioned to cover the main text area */
.mr-image-area {
    position: absolute;
    top: 20px; /* Place it over the main text area */
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10; /* Ensure the image is above the main text */
    display: none; /* Hidden by default, shown when media button is clicked */
}

/* Image inside the image area */
.mr-image-area img {
    max-width: 100%;
    height: auto;
    opacity: 0.8; /* Slight transparency to give a layered look */
}

/* Popup text area (Additional text) */
.mr-popup-text {
    position: absolute;
    top: -50px; /* Adjust this value to place it just above the main text */
    left: 0;
    right: 0;
    background-color: #e6e7b4;
    color: #e71111;
    border: 1px solid #5c12e6;
    padding: 10px;
    z-index: 20; /* Ensure it's above the image */
    display: none; /* Hidden by default, shown when media button is clicked */
    font-size: 18px;
}

/* Main text area for the slide */
.mr-main-text {
    font-size: 20px;
    color: #9C27B0; /* Ensure this is not blending with the background */
    margin-bottom: 20px;
    padding: 10px;
    border: 2px solid #9C27B0;
    border-radius: 5px;
    position: relative;
    z-index: 1; /* Main text should be behind the image and additional text when displayed */
    margin-top: 40px; /* Add some top margin to create space for the additional text */
}

/* Audio player is hidden but plays in the background */
audio {
    display: none; /* Hidden audio, only plays in the background */
}

/* Transparent audio pause button over the main text or image */
.mr-audio-pause {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5); /* Transparent background */
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    z-index: 30; /* Ensure the pause button is always on top */
}

/* Navigation buttons */
.mr-navigation {
    margin-top: 30px;
}

.mr-prev, .mr-next {
    background-color: #008CBA;
    color: white;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    border: none;
}

.mr-prev:hover, .mr-next:hover {
    background-color: #006994;
}

/* Disabled button styles */
.mr-prev:disabled, .mr-next:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* Highlight the spoken word with more visibility */
.highlight {
    background-color: black !important;
    color: rgb(71, 10, 240) !important;
    font-weight: bold;
}





/* Styling for Post Title */
.post-title {
    font-size: 36px;
    text-align: center;
    margin-bottom: 20px;
}

/* Big Green Button Styling */
.big-green-btn {
    background-color: #28a745;
    color: white;
    padding: 15px 30px;
    font-size: 18px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 20px;
}

.big-green-btn:hover {
    background-color: #218838;
}

/* Move the Start Reading Button below the settings */
.start-reading-btn-container {
    text-align: center;
    margin-top: 10px;
}

/* Initially hide navigation buttons */
.mr-navigation {
    display: none; /* Hide navigation buttons until reading starts */
}

/* Adjust styling for buttons if needed */

.floating-playpause-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(255, 255, 255, 0.6); /* Semi-transparent */
    border: none;
    padding: 10px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
}

.floating-playpause-btn:hover {
    background-color: rgba(255, 255, 255, 0.8); /* Slightly more visible on hover */
}