/* RTL Support for Khusm Website */

/* Language Switcher Styles */
#language-switcher {
    position: relative !important;
    z-index: 1000 !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
    border: 2px solid rgba(255,255,255,0.5) !important;
    text-decoration: none !important;
    font-weight: bold !important;
    min-width: 80px !important;
    text-align: center !important;
    padding: 8px 12px !important;
    border-radius: 5px !important;
    transition: all 0.3s ease !important;
}

#language-switcher:hover {
    transform: translateY(-1px) !important;
}

#language-switcher:hover #lang-text {
    color: #66BB6A !important;
    transform: scale(1.1) !important;
}

#language-switcher:hover #lang-label {
    color: white !important;
}

#language-switcher i {
    margin-right: 5px !important;
}

/* Ensure header buttons are visible */
.header .d-flex {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* RTL Base Styles */
.rtl {
    direction: rtl;
    text-align: right;
}

.rtl .container,
.rtl .container-fluid {
    direction: rtl;
}

/* Navigation RTL */
.rtl .navmenu ul {
    text-align: right;
}

.rtl .navmenu ul li {
    text-align: right;
}

/* Hero Section RTL */
.rtl .hero-content {
    text-align: right;
}

.rtl .hero-buttons {
    text-align: right;
}

/* About Section RTL */
.rtl .about-content {
    text-align: right;
}

.rtl .contact-info {
    text-align: right;
}

/* Features Section RTL */
.rtl .feature-item.text-end {
    text-align: left !important;
}

.rtl .feature-item:not(.text-end) {
    text-align: right !important;
}

/* Pricing Section RTL */
.rtl .pricing-card {
    text-align: right;
}

.rtl .features-list {
    text-align: right;
}

/* Form Elements RTL */
.rtl .form-label {
    text-align: right;
}

.rtl .form-control,
.rtl .form-select {
    text-align: right;
}

.rtl .input-group {
    direction: rtl;
}

.rtl .input-group .form-control {
    text-align: right;
}

/* Card Elements RTL */
.rtl .card-body {
    text-align: right;
}

.rtl .provider-card {
    text-align: right;
}

.rtl .provider-name {
    text-align: right;
}

/* Footer RTL */
.rtl .footer-about {
    text-align: right;
}

.rtl .footer-links {
    text-align: right;
}

.rtl .footer-links ul {
    text-align: right;
}

/* Button RTL */
.rtl .btn {
    text-align: center;
}

/* Language Switcher RTL */
.rtl #language-switcher {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* FAQ RTL */
.rtl .faq-title {
    text-align: right;
}

.rtl .faq-item h3 {
    text-align: right;
}

.rtl .faq-content {
    text-align: right;
}

/* Search Container RTL */
.rtl .search-container i {
    right: 15px;
    left: auto;
}

.rtl #searchInput {
    padding-right: 40px;
    padding-left: 15px;
    text-align: right;
}

/* Categories RTL */
.rtl .categories-wrapper {
    justify-content: center;
}

/* Distance and Location RTL */
.rtl .distance {
    text-align: right;
}

.rtl .distance i {
    margin-left: 5px;
    margin-right: 0;
}

/* Modal RTL */
.rtl .modal-header {
    text-align: right;
}

.rtl .modal-body {
    text-align: right;
}

/* Responsive RTL Adjustments */
@media (max-width: 768px) {
    .rtl .hero-content {
        text-align: center;
    }
    
    .rtl .about-content {
        text-align: center;
    }
    
    .rtl .feature-item {
        text-align: center !important;
    }
}

/* Animation adjustments for RTL */
.rtl [data-aos="fade-right"] {
    animation-name: fadeLeft;
}

.rtl [data-aos="fade-left"] {
    animation-name: fadeRight;
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
