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 {
    /* Existing flex properties are inherited from the general .controls, .search-section rule */
    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 */
}

/* Remove this specific rule as flex-grow is handled by flex-basis now */
/* #search-input {
    flex-grow: 1;
} */
/* --- END NEW/MODIFIED SEARCH SECTION STYLES --- */


/* --- BIBLE DISPLAY AREA STYLES (for index.php and edit_verse.php editor) --- */
.bible-display, #verse-editor-content { /* Apply to both display and editor */
    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 */
}

/* Style for each verse paragraph */
.bible-display p, #verse-editor-content p {
    margin-bottom: 10px;
    line-height: 1.8;
    overflow: hidden; /* Creates BFC, contains float */
    direction: ltr; /* Each paragraph container is LTR */
    text-align: left; /* Aligns paragraph content to the left */
}

/* Style for the verse number (strong tag) */
.bible-display p strong, #verse-editor-content p strong {
    font-weight: bold;
    direction: ltr; /* Number is LTR */
    float: left; /* Float the number to the left */
    margin-right: 8px; /* Space after the number */
    white-space: nowrap; /* Prevent number from wrapping */
}

/* Style for the verse text (the part after the strong tag) */
.bible-display p span.verse-text, #verse-editor-content p span.verse-text {
    direction: ltr; /* Hindi text is LTR */
    text-align: left; /* Text should align left (its natural start) */
    display: block; /* Make it a block to take full width and wrap properly */
    /* This margin-left needs to be slightly more than the combined width of the verse number + its margin-right */
    margin-left: 35px; /* Adjusted to account for a two-digit number and spacing */
    unicode-bidi: normal; /* Reset to normal for LTR content */
    vertical-align: top; /* Align to top if multi-line */
}

.error {
    color: #dc3545;
    font-weight: bold;
}

.info {
    color: #6c757d;
}

/* New styles for password input (from edit_verse.php) */
.password-group {
    margin-top: 20px;
    margin-bottom: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}
.password-group label {
    margin-bottom: 5px;
}
.password-group input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .controls, .search-section {
        flex-direction: column; /* Stack items vertically */
        align-items: stretch; /* Make them stretch to full width */
    }
    
    /* Ensure all form elements within controls/search take full width */
    .controls .dropdown-group,
    .edit-controls .dropdown-group,
    .search-section select, /* Target the new search select */
    .search-section input[type="text"],
    .search-section button {
        flex-basis: auto; /* Remove fixed basis on small screens */
        width: 100%; /* Force full width */
        min-width: unset; /* Remove min-width constraints */
    }

    .bible-display p span.verse-text, #verse-editor-content p span.verse-text {
        margin-left: 25px; /* Slightly less margin for smaller screens */
    }
}