/* RTL (Right-to-Left) Override for Arabic Language
 * Loaded conditionally when lang=ar
 * Forces RTL layout for all elements
 */

/* Force RTL for Arabic - Highest Priority */
html, body {
    direction: rtl !important;
    text-align: right !important;
}

* {
    direction: inherit !important;
}

.container, .container-fluid, .row, div, p, h1, h2, h3, h4, h5, h6, span, a, button, label {
    text-align: right !important;
}

/* Fix flexbox direction */
.d-flex, .flex-row {
    flex-direction: row-reverse !important;
}

/* Fix Bootstrap grid */
.row {
    direction: rtl !important;
}

/* Fix forms */
.form-control, .form-select, .form-label, input, textarea, select {
    text-align: right !important;
}

/* Fix buttons */
.btn {
    text-align: center !important;
}

/* Fix modals */
.modal-header, .modal-body, .modal-footer {
    text-align: right !important;
}

/* Fix cards */
.card, .card-body, .card-header, .card-footer {
    text-align: right !important;
}

/* Fix search header border-radius */
#searchInput {
    border-radius: 0 6px 6px 0 !important;
}

#searchPlaceBtn {
    border-radius: 6px 0 0 6px !important;
}

#searchNearbyBtn {
    border-radius: 6px 0 0 6px !important;
}

/* Fix map loading indicator position */
#MapMapLoader {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
}

/* Fix header actions alignment */
.header-actions {
    margin-right: auto !important;
    margin-left: 0 !important;
}

/* Header content layout */
.header-content {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    width: 100% !important;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* About link in top-bar positioned at far right for LTR */
.about-link-topbar {
    margin-left: auto !important;
    margin-right: 10px !important;
    display: flex !important;
    align-items: center !important;
}

/* About link in top-bar positioned at far left for RTL */
[dir="rtl"] .about-link-topbar {
    margin-left: 10px !important;
    margin-right: auto !important;
}

/* Fix dropdowns and select elements alignment */
.form-select, select.form-control, select {
    text-align: right !important;
    padding-right: 0.75rem !important;
    padding-left: 2.25rem !important;
    background-position: left 0.75rem center !important;
    direction: rtl !important;
}

/* Force select options to stay within viewport */
select option {
    direction: rtl !important;
    text-align: right !important;
}

/* Fix specific modals and containers */
#addStoryModal .form-select,
#addStoryModal select {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Fix tab content alignment */
.tab-pane {
    direction: rtl !important;
}

/* CRITICAL FIX: Force select elements to stay within bounds */
#addStoryGroup,
#content-groups select,
.modal select.form-select {
    position: relative !important;
    right: 0 !important;
    left: 0 !important;
    transform: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Fix modal body padding for RTL */
#addStoryModal .modal-body,
#addStoryModal .tab-pane {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    overflow-x: hidden !important;
}

/* Fix tab content container */
#content-groups {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

#content-groups .p-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}

/* Fix dropdown menus */
.dropdown-menu {
    right: 0 !important;
    left: auto !important;
    text-align: right !important;
}

/* Fix list groups */
.list-group-item {
    text-align: right !important;
}

/* Fix autocomplete/suggestions */
.autocomplete-results, .autocomplete-container {
    text-align: right !important;
    right: 0 !important;
    left: auto !important;
}

/* Fix input groups for RTL */
.input-group {
    flex-direction: row-reverse !important;
}

.input-group > :not(:first-child) {
    margin-left: 0 !important;
    margin-right: -1px !important;
}