/* RTL Styles for Arabic Version */

/* General RTL adjustments */
html[lang="ar"] {
    direction: rtl;
    text-align: right;
}

/* Header and Navigation */
html[lang="ar"] .header-container {
    flex-direction: row-reverse;
}

html[lang="ar"] .nav-menu {
    padding-right: 0;
}

html[lang="ar"] .language-switcher {
    float: left !important;
    margin-left: 20px !important;
    margin-right: 0 !important;
}

html[lang="ar"] .dropdown-content {
    left: auto;
    right: 0;
    text-align: right;
}

/* Form Elements */
html[lang="ar"] .form-check-input {
    margin-right: 0;
    margin-left: 10px;
}

html[lang="ar"] .service-radio {
    margin-right: 0;
    margin-left: 10px;
}

/* Buttons and Icons */
html[lang="ar"] .btn-secondary {
    margin-right: 0;
    margin-left: 10px;
}

html[lang="ar"] .fa-arrow-right,
html[lang="ar"] .fa-arrow-left {
    transform: rotate(180deg);
}

/* Lists and Content */
html[lang="ar"] .values-list li {
    padding-left: 0;
    padding-right: 30px;
}

html[lang="ar"] .values-list li::before {
    left: auto;
    right: 0;
}

html[lang="ar"] .summary-item span:first-child {
    margin-right: 0;
    margin-left: 10px;
}

/* Booking Steps */
html[lang="ar"] .booking-step:not(:last-child)::after {
    left: auto;
    right: 50%;
}

/* Footer */
html[lang="ar"] .footer-container {
    text-align: right;
}

html[lang="ar"] .social-links {
    justify-content: flex-start;
}

/* Service Cards and Features */
html[lang="ar"] .service-feature-item i {
    margin-right: 0;
    margin-left: 10px;
}

html[lang="ar"] .package-features i {
    margin-right: 0;
    margin-left: 10px;
}

/* Font Settings */
html[lang="ar"] body,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] p,
html[lang="ar"] a,
html[lang="ar"] span,
html[lang="ar"] li,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea,
html[lang="ar"] button {
    font-family: 'Baloo Bhaijaan 2', Arial, sans-serif;
}

/* Mobile Menu */
@media (max-width: 768px) {
    html[lang="ar"] .mobile-menu-btn {
        right: auto;
        left: 20px;
    }
    
    html[lang="ar"] .nav-menu.active {
        right: 0;
        left: auto;
    }
}