body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #CCFFFF;
    color: #333;
    direction: ltr; /* Overall page direction is LTR */
}

.container {
    max-width: 900px;
    margin: 20px auto;
    background: #CCFFFF;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1, h2 {
    text-align: center;
    color: #0056b3;
    margin-bottom: 25px;
}

.controls, .search-section {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Spacing between items */
    margin-bottom: 25px;
    align-items: center; /* Vertically align items in the middle */
    direction: ltr; /* Controls remain LTR */
}

/* Adjust width for the dropdowns (now only two in .controls) */
.controls .dropdown-group {
    flex-basis: calc(50% - 7.5px); /* Two items, taking roughly half each, accounting for half the gap on each side */
    min-width: 150px; /* Ensure they don't get too small */
}

/* For the edit page (2 dropdowns in .edit-controls), adjust width */
.edit-controls .dropdown-group {
    flex-basis: calc(50% - 7.5px);
    min-width: 150px;
}


label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
    flex-shrink: 0; /* Prevents label from shrinking in flex containers */
}

select, input[type="text"] {
    width: 100%; /* Default to 100% within their parent container */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    direction: ltr; /* Input values remain LTR */
}

button {
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s;
    flex-shrink: 0; /* Prevent button from shrinking */
}

button:hover {
    background-color: #0056b3;
}

/* --- NEW/MODIFIED SEARCH SECTION STYLES --- */
.search-section {
    justify-content: flex-start; /* Align items to the start of the line */
}

.search-section label[for="search-scope-select"] {
    margin-bottom: 0; /* Remove bottom margin for labels directly in flex row */
}

.search-section select#search-scope-select {
    flex-basis: 35%; /* Adjust as needed, makes it roughly one-third of the available space */
    min-width: 150px; /* Minimum width to ensure readability */
    width: auto; /* Allow flex-basis to control width */
}

.search-section input#search-input {
    flex-basis: 45%; /* Adjust as needed, makes it roughly half of the available space */
    min-width: 200px; /* Minimum width for input */
    width: auto; /* Allow flex-basis to control width */
}

/* --- END NEW/MODIFIED SEARCH SECTION STYLES --- */


/* --- BIBLE DISPLAY AREA STYLES (for index.php and edit_verse.php editor) --- */
.bible-display, #verse-editor-content {
    border-top: 1px solid #eee;
    padding-top: 25px;
    margin-top: 25px;
    background-color: #CCFFFF;
    padding: 20px;
    border-radius: 5px;
    min-height: 200px; /* Min-height for display */
    direction: ltr; /* Overall display block is LTR */
    text-align: left; /* Default alignment */
}

#verse-editor-content { /* Specific overrides for editor div */
    min-height: 400px;
    resize: vertical;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid #ccc;
    margin-bottom: 15px;
}


.bible-display h2, #verse-editor-content h2 {
    text-align: center; /* Center the chapter heading */
    margin-bottom: 20px;
    direction: ltr; /* Heading remains LTR */
}

/* --- NEW/MODIFIED VERSE-SPECIFIC STYLES --- */
/* Style for each verse paragraph container */
.verse-container { /* Changed from .bible-display p to a dedicated class for better targeting */
    margin-bottom: 10px;
    line-height: 1.8;
    padding: 5px 0; /* Add padding for highlight effect */
    display: flex; /* Use flexbox for better alignment of number, text, and buttons */
    align-items: flex-start; /* Align items to the top (especially for multi-line text) */
    direction: ltr; /* Each paragraph container is LTR */
    text-align: left; /* Aligns paragraph content to the left */
    transition: background-color 0.3s ease, border-left-color 0.3s ease; /* Smooth transition for highlight */
}

/* Highlight style for the active verse */
.verse-container.highlight {
    background-color: #f0f8ff; /* Light azure */
    border-left: 5px solid #4CAF50; /* Green border to indicate active verse */
    padding-left: 10px; /* Adjust padding to make space for the border */
    margin-left: -10px; /* Counteract padding to keep overall alignment */
}


/* Style for the verse number (strong tag) */
.verse-container strong { /* Target the strong inside .verse-container */
    font-weight: bold;
    direction: ltr;
    margin-right: 8px; /* Space after the number */
    white-space: nowrap; /* Prevent number from wrapping */
    flex-shrink: 0; /* Prevent the number from shrinking */
}

/* Style for the verse text (the span with class verse-text) */
.verse-container span.verse-text { /* Target the span specifically */
    flex-grow: 1; /* Allow text to take up remaining space and wrap */
    direction: ltr; /* Hindi text is LTR */
    text-align: left; /* Text should align left (its natural start) */
    unicode-bidi: normal; /* Reset to normal for LTR content */
}

/* Styles for individual verse play/stop buttons */
.play-verse-audio, .stop-audio-button {
    margin-left: 10px; /* Space from the verse text */
    padding: 3px 8px; /* Smaller padding for individual buttons */
    font-size: 0.85em; /* Slightly smaller font */
    cursor: pointer;
    border: 1px solid #000099; /* Consistent border color */
    border-radius: 4px; /* Consistent border radius */
    background-color: #3366F; /* Consistent background color */
    color: white; /* Consistent text color */
    transition: background-color 0.2s ease;
    flex-shrink: 0; /* Prevent buttons from shrinking */
}

.play-verse-audio:hover, .stop-audio-button:hover {
    background-color: #3366F; /* Darker blue on hover */
}
/* --- END NEW/MODIFIED VERSE-SPECIFIC STYLES --- */


/* --- NEW: Global Audio Controls (Play All/Stop All) --- */
.audio-controls {
    display: flex; /* Arrange buttons in a row */
    gap: 15px; /* Space between buttons */
    margin-top: 15px;
    margin-bottom: 2