/* Multilingual CSS with RTL/LTR Support */

/* Base styles for both directions */
html {
    font-size: 16px;
    line-height: 1.6;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    transition: all 0.3s ease;
}

/* Arabic font support */
html[lang="ar-SA"] body {
    font-family: 'Tahoma', 'Arial Unicode MS', 'Lucida Sans Unicode', sans-serif;
    direction: rtl;
    text-align: right;
}

/* English (default) */
html[lang="en-US"] body {
    direction: ltr;
    text-align: left;
}

/* Navigation styles */
.navbar {
    transition: all 0.3s ease;
}

.navbar-nav {
    transition: all 0.3s ease;
}

/* RTL specific navigation */
/*html[lang="ar-SA"] .navbar-nav {
    flex-direction: row-reverse;
}*/

html[lang="ar-SA"] .navbar-brand {
    margin-right: 0;
    margin-left: 1rem;
}
 
/* Button and form controls */
.btn {
    transition: all 0.3s ease;
}

/* RTL specific button alignment */
html[lang="ar-SA"] .btn {
    text-align: center;
}

/* Form controls */
.form-control {
    transition: all 0.3s ease;
}

html[lang="ar-SA"] .form-control {
    text-align: right;
}

/* Container and layout */
.container {
    transition: all 0.3s ease;
}

/* Text alignment utilities */
.text-start {
    text-align: start !important;
}

.text-end {
    text-align: end !important;
}

/* RTL specific text alignment */
html[lang="ar-SA"] .text-left {
    text-align: right !important;
}

html[lang="ar-SA"] .text-right {
    text-align: left !important;
}

/* Margin and padding utilities for RTL */
html[lang="ar-SA"] .ms-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

html[lang="ar-SA"] .me-auto {
    margin-right: 0 !important;
    margin-left: auto !important;
}

html[lang="ar-SA"] .ps-3 {
    padding-left: 0 !important;
    padding-right: 1rem !important;
}

html[lang="ar-SA"] .pe-3 {
    padding-right: 0 !important;
    padding-left: 1rem !important;
}

/* Language switcher */
.language-switcher {
    position: relative;
    display: inline-block;
    margin-right: 1.2rem;
}

    .language-switcher select {
        background: var(--main-color);
        border: 1px solid var(--main-color);
        border-radius: 4px;
        padding: 0.375rem 1.75rem;
        font-size: 0.875rem;
        transition: all 0.3s ease;
        appearance: none; /* For modern browsers */
        -webkit-appearance: none; /* For Safari/Chrome */
        -moz-appearance: none; /* For Firefox */
        width: 90px;
        cursor: pointer;
    
    }

html[lang="en-US"] .language-switcher select {
    padding: 0.375rem 0 0.375rem 1.75rem;
} 

.language-switcher select:focus {
    border-color: var(--main-color);
    box-shadow: 0 0 0 0.2rem rgba(68, 162, 169, 0.25);
    outline: 0;
}

/* Card components */
.card {
    transition: all 0.3s ease;
}

html[lang="ar-SA"] .card-body {
    text-align: right;
}

/* List styles */
html[lang="ar-SA"] ul,
html[lang="ar-SA"] ol {
    padding-right: 2rem;
    padding-left: 0;
}

/* Table styles */
html[lang="ar-SA"] table {
    direction: rtl;
}

html[lang="ar-SA"] th,
html[lang="ar-SA"] td {
    text-align: right;
}

/* Footer styles */
.footer {
    transition: all 0.3s ease;
}

html[lang="ar-SA"] .footer {
    text-align: right;
}

/* Responsive design */
@media (max-width: 768px) {
    html[lang="ar-SA"] .navbar-nav {
        text-align: right;
    }
    
    html[lang="ar-SA"] .navbar-toggler {
        margin-left: 0;
        margin-right: auto;
    }
}

/* Animation for language switching */
.fade-transition {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fade-transition.show {
    opacity: 1;
}

/* Custom styles for better Arabic text rendering */
html[lang="ar-SA"] h1,
html[lang="ar-SA"] h2,
html[lang="ar-SA"] h3,
html[lang="ar-SA"] h4,
html[lang="ar-SA"] h5,
html[lang="ar-SA"] h6 {
    font-weight: bold;
    line-height: 1.4;
}

html[lang="ar-SA"] p {
    line-height: 1.8;
}

/* Flexbox utilities for RTL */
/*html[lang="ar-SA"] .d-flex {
    flex-direction: row-reverse;
}

html[lang="ar-SA"] .justify-content-start {
    justify-content: flex-end !important;
}

html[lang="ar-SA"] .justify-content-end {
    justify-content: flex-start !important;
}
*/
/* Grid system adjustments */
/*html[lang="ar-SA"] .row {
    flex-direction: row-reverse;
}*/

/* Icon adjustments for RTL */
html[lang="ar-SA"] .icon-before {
    margin-left: 0.5rem;
    margin-right: 0;
}

html[lang="ar-SA"] .icon-after {
    margin-right: 0.5rem;
    margin-left: 0;
}

/* Breadcrumb adjustments */
html[lang="ar-SA"] .breadcrumb {
/*    flex-direction: row-reverse;*/
}

html[lang="ar-SA"] .breadcrumb-item + .breadcrumb-item::before {
    content: "\\";
    transform: scaleX(-1);
    padding-right: .5rem;
}

/* Modal adjustments */
html[lang="ar-SA"] .modal-header {
    text-align: right;
}

html[lang="ar-SA"] .modal-body {
    text-align: right;
}

html[lang="ar-SA"] .modal-footer {
    justify-content: flex-start;
}

/* Dropdown adjustments */
html[lang="ar-SA"] .dropdown-menu {
    text-align: right;
}

/* Progress bar adjustments */
html[lang="ar-SA"] .progress-bar {
    direction: ltr;
}

/* Tooltip adjustments */
html[lang="ar-SA"] .tooltip {
    direction: ltr;
}

/* Custom animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

html[lang="ar-SA"] .slide-in {
    animation: slideInRight 0.5s ease-out;
}

html[lang="en-US"] .slide-in {
    animation: slideInLeft 0.5s ease-out;
}