body[dir="rtl"] {
    text-align: right;
    direction: rtl;
}

body[dir="ltr"] {
    text-align: left;
    direction: ltr;
}

/* Ensure footer stays at bottom */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Ensure footer has consistent height across all pages */
.footer {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    min-height: 60px;
    display: flex;
    align-items: center;
}

.footer .container {
    width: 100%;
}

/* Specific fix for quraan.php page */
body#main-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body#main-body main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

body#main-body .container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rtl .navbar {
    flex-direction: row-reverse;
}

.rtl .form-select {
    text-align: right;
}

.rtl .btn {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

.header-bg {
    background-color: #FF621F;
}

body[dir="rtl"] .form-check {
    text-align: right;
    direction: rtl;
    display: flex;
    align-items: center;
}

body[dir="rtl"] .form-check-input {
    margin-left: 0.5rem;
    margin-right: 0;
}

body[dir="rtl"] .form-check-label {
    text-align: right;
}

body[dir="rtl"] .select-verse {
    margin-right: 10px;
}

body[dir="rtl"] .language-dropdown {
    margin-left: 10px;
}

.modal-dialog {
    max-height: 90vh; /* Set max height relative to the viewport */
    display: flex;
    flex-direction: column;
}

.modal-content {
    overflow: hidden; /* Ensure the content doesn't overflow */
    display: flex;
    flex-direction: column;
    height: 100%; /* Take up the full height of the dialog */
}

.modal-body {
    overflow-y: auto; /* Allow vertical scrolling if the content is too tall */
    flex: 1; /* Make the body take up available space */
}

/* View Toggle Buttons */
.btn-group .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
    transition: all 0.3s ease;
}

.btn-group .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: white;
}

.btn-group .btn-outline-light.active {
    background-color: white;
    color: #FF621F;
    border-color: white;
}

.btn-group .btn-outline-light i {
    margin-right: 0.5rem;
}

/* RTL Support for View Toggle */
body[dir="rtl"] .btn-group .btn-outline-light i {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Ensure consistent footer across all pages */
.footer .btn-outline-light:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

/* RTL Support for footer */
body[dir="rtl"] .footer .text-md-end {
    text-align: left !important;
}

body[dir="rtl"] .footer .col-md-6:first-child {
    text-align: right;
}