/* ========================================
   RTL (Right-to-Left) Styles for Arabic
   IClinic - Dr. Ramy Elghoneimi
======================================== */

/* Font Override for Arabic */
html[dir="rtl"] {
    --font-primary: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Base RTL */
html[dir="rtl"] body {
    text-align: right;
    direction: rtl;
}

/* ========================================
   Navigation - RTL Fixed (Desktop Only)
======================================== */
@media (min-width: 769px) {
    /* In RTL mode, flex items naturally flow right-to-left */
    /* So we use row (not row-reverse) to keep logo on right */
    [dir="rtl"] .navbar .container.nav-container,
    html[dir="rtl"] .navbar .nav-container,
    html[dir="rtl"] .nav-container {
        flex-direction: row !important;
    }

    [dir="rtl"] .navbar .nav-menu,
    html[dir="rtl"] .navbar .nav-menu,
    html[dir="rtl"] .nav-menu {
        flex-direction: row !important;
    }

    [dir="rtl"] .lang-switch,
    html[dir="rtl"] .lang-switch {
        margin-left: 0;
        margin-right: 16px;
    }

    html[dir="rtl"] .nav-menu li {
        display: flex;
        align-items: center;
    }

    html[dir="rtl"] .nav-link {
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
    }

    html[dir="rtl"] .nav-cta {
        white-space: nowrap;
    }

    html[dir="rtl"] .nav-phone {
        direction: ltr;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
    }

    html[dir="rtl"] .nav-phone i {
        margin-left: 8px;
        margin-right: 0;
    }

    html[dir="rtl"] .nav-toggle {
        left: 16px;
        right: auto;
    }
}

/* ========================================
   Hero Section
======================================== */
html[dir="rtl"] .hero-content {
    text-align: center;
}

html[dir="rtl"] .hero-cta {
    justify-content: center;
}

html[dir="rtl"] .trust-item {
    direction: rtl;
}

html[dir="rtl"] .trust-item i {
    margin-left: 10px;
    margin-right: 0;
}

html[dir="rtl"] .hero-scroll {
    bottom: 30px;
}

/* ========================================
   Buttons
======================================== */
html[dir="rtl"] .btn {
    flex-direction: row-reverse;
}

html[dir="rtl"] .btn i {
    margin-left: 0;
    margin-right: 12px;
}

/* ========================================
   Section Headers
======================================== */
html[dir="rtl"] .section-header {
    text-align: center;
}

html[dir="rtl"] .section-header.text-right {
    text-align: right;
}

html[dir="rtl"] .section-header.text-left {
    text-align: right;
}

/* ========================================
   About Section
======================================== */
html[dir="rtl"] .about-content {
    direction: rtl;
}

html[dir="rtl"] .about-text {
    text-align: right;
}

html[dir="rtl"] .credential-card ul {
    padding-right: 0;
    padding-left: 0;
}

html[dir="rtl"] .credential-card li {
    text-align: right;
}

html[dir="rtl"] .credential-card li::before {
    margin-left: 8px;
    margin-right: 0;
}

html[dir="rtl"] .value-statement {
    text-align: right;
}

html[dir="rtl"] .value-statement i {
    margin-left: 12px;
    margin-right: 0;
}

html[dir="rtl"] .doctor-social {
    direction: ltr;
}

/* Experience Badge */
html[dir="rtl"] .experience-badge {
    left: -20px;
    right: auto;
}

/* Memberships */
html[dir="rtl"] .membership-badge {
    text-align: center;
}

/* ========================================
   Services
======================================== */
html[dir="rtl"] .service-card {
    text-align: right;
}

html[dir="rtl"] .service-link {
    flex-direction: row-reverse;
}

html[dir="rtl"] .service-link i {
    margin-right: 0;
    margin-left: 8px;
    transform: rotate(180deg);
}

html[dir="rtl"] .service-link:hover i {
    transform: translateX(4px) rotate(180deg);
}

/* ========================================
   Why IClinic
======================================== */
html[dir="rtl"] .why-content {
    direction: rtl;
}

html[dir="rtl"] .why-text {
    text-align: right;
}

html[dir="rtl"] .why-list li {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .why-icon {
    margin-left: 20px;
    margin-right: 0;
}

html[dir="rtl"] .why-item-content {
    text-align: right;
}

/* ========================================
   Journey Timeline
======================================== */
html[dir="rtl"] .journey-step {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .step-number {
    margin-left: 20px;
    margin-right: 0;
}

html[dir="rtl"] .step-content {
    text-align: right;
}

html[dir="rtl"] .journey-timeline::before {
    left: auto;
    right: 24px;
}

/* ========================================
   FAQ
======================================== */
html[dir="rtl"] .faq-question {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .faq-question span {
    text-align: right;
}

html[dir="rtl"] .faq-question i {
    margin-right: auto;
    margin-left: 0;
}

html[dir="rtl"] .faq-answer {
    text-align: right;
}

/* ========================================
   Testimonials
======================================== */
html[dir="rtl"] .testimonial-card {
    text-align: right;
}

html[dir="rtl"] .testimonial-author {
    direction: rtl;
}

html[dir="rtl"] .author-avatar {
    margin-left: 16px;
    margin-right: 0;
}

html[dir="rtl"] .author-info {
    text-align: right;
}

html[dir="rtl"] .testimonials-stats {
    direction: rtl;
}

/* ========================================
   Contact Section
======================================== */
html[dir="rtl"] .contact-content {
    direction: rtl;
}

html[dir="rtl"] .booking-form-container {
    text-align: right;
}

html[dir="rtl"] .form-header {
    text-align: right;
}

html[dir="rtl"] .form-group {
    text-align: right;
}

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

html[dir="rtl"] .form-group input,
html[dir="rtl"] .form-group select,
html[dir="rtl"] .form-group textarea {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .form-group input[type="tel"],
html[dir="rtl"] .form-group input[type="email"] {
    direction: ltr;
    text-align: left;
}

html[dir="rtl"] .contact-card-large {
    text-align: right;
}

html[dir="rtl"] .contact-link {
    flex-direction: row-reverse;
}

html[dir="rtl"] .contact-link i {
    margin-right: 0;
    margin-left: 8px;
    transform: rotate(180deg);
}

html[dir="rtl"] .contact-card-large p a {
    direction: ltr;
    unicode-bidi: embed;
}

/* ========================================
   Footer
======================================== */
html[dir="rtl"] .footer {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .footer-content {
    direction: rtl;
}

html[dir="rtl"] .footer-brand,
html[dir="rtl"] .footer-links,
html[dir="rtl"] .footer-services,
html[dir="rtl"] .footer-contact {
    text-align: right;
}

/* Footer contact - use auto direction to let phone numbers display correctly */
html[dir="rtl"] .footer-contact p {
    direction: ltr;
    text-align: right;
}

html[dir="rtl"] .footer-contact i {
    margin-left: 8px;
    margin-right: 0;
}

html[dir="rtl"] .footer-bottom {
    text-align: center;
}

/* ========================================
   Floating Elements
======================================== */
html[dir="rtl"] .whatsapp-float {
    left: 32px;
    right: auto;
}

html[dir="rtl"] .whatsapp-tooltip {
    left: 70px;
    right: auto;
}

html[dir="rtl"] .whatsapp-tooltip::after {
    left: -6px;
    right: auto;
    border-left-color: transparent;
    border-right-color: var(--white);
}

html[dir="rtl"] .back-to-top {
    left: 32px;
    right: auto;
}

/* ========================================
   Mobile CTA
======================================== */
html[dir="rtl"] .mobile-cta {
    direction: rtl;
}

/* ========================================
   Cookie Consent
======================================== */
html[dir="rtl"] .cookie-consent {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .cookie-consent-content {
    direction: rtl;
}

html[dir="rtl"] .cookie-consent-text {
    text-align: right;
}

/* ========================================
   Preloader
======================================== */
html[dir="rtl"] .preloader-text {
    direction: rtl;
}

/* ========================================
   Mobile Responsive RTL
======================================== */
@media (max-width: 1024px) {
    html[dir="rtl"] .about-content,
    html[dir="rtl"] .why-content,
    html[dir="rtl"] .contact-content {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    /* Mobile RTL Navigation */
    html[dir="rtl"] .navbar .nav-container,
    html[dir="rtl"] .nav-container {
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        height: 70px !important;
    }

    html[dir="rtl"] .navbar .logo,
    html[dir="rtl"] .logo {
        position: absolute !important;
        right: 16px !important;
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    html[dir="rtl"] .navbar .nav-toggle,
    html[dir="rtl"] .nav-toggle {
        position: absolute !important;
        left: 16px !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* Language switcher for RTL mobile - styled like English version */
    html[dir="rtl"] .lang-switch {
        position: absolute !important;
        top: 50% !important;
        left: 60px !important;
        right: auto !important;
        transform: translateY(-50%) !important;
        z-index: 1001 !important;
        margin: 0 !important;
        display: flex !important;
        width: 36px !important;
        height: 36px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        color: #fff !important;
        border-radius: 50% !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        backdrop-filter: blur(10px) !important;
    }

    html[dir="rtl"] .navbar.scrolled .lang-switch {
        background: var(--primary-soft) !important;
        color: var(--primary) !important;
    }

    /* Mobile menu slides from RIGHT in RTL */
    html[dir="rtl"] .navbar .nav-menu,
    html[dir="rtl"] .nav-menu {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        left: auto !important;
        width: 300px !important;
        height: 100vh !important;
        transform: none !important;
        text-align: right !important;
        flex-direction: column !important;
        background: #ffffff !important;
        padding: 110px 36px 40px !important;
        gap: 4px !important;
        box-shadow: -5px 0 20px rgba(0,0,0,0.1) !important;
        z-index: 9999 !important;
        transition: right 0.3s ease !important;
        overflow-y: auto !important;
    }

    html[dir="rtl"] .navbar .nav-menu.active,
    html[dir="rtl"] .nav-menu.active {
        right: 0 !important;
        left: auto !important;
    }

    html[dir="rtl"] .nav-menu li {
        width: 100% !important;
        display: block !important;
    }

    html[dir="rtl"] .nav-menu .nav-link {
        width: 100% !important;
        padding: 16px 20px !important;
        display: block !important;
        text-align: right !important;
        color: var(--text-dark) !important;
        border-radius: 12px !important;
    }

    html[dir="rtl"] .nav-menu .nav-link:hover {
        background: var(--off-white) !important;
        color: var(--primary) !important;
    }

    html[dir="rtl"] .nav-menu .nav-phone {
        width: 100% !important;
        padding: 16px 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        direction: ltr !important;
        color: var(--text-dark) !important;
        border-radius: 12px !important;
    }

    html[dir="rtl"] .nav-menu .nav-phone:hover {
        background: var(--off-white) !important;
        color: var(--primary) !important;
    }

    /* Hide hero scroll on mobile RTL - not enough space */
    html[dir="rtl"] .hero-scroll {
        display: none !important;
    }

    html[dir="rtl"] .whatsapp-float {
        display: none !important;
    }

    html[dir="rtl"] .back-to-top {
        left: 20px !important;
        right: auto !important;
    }

    html[dir="rtl"] .footer-content {
        flex-direction: column;
        text-align: center;
    }

    html[dir="rtl"] .footer-brand,
    html[dir="rtl"] .footer-links,
    html[dir="rtl"] .footer-services,
    html[dir="rtl"] .footer-contact {
        text-align: center;
    }

    /* Fix experience badge on mobile RTL */
    html[dir="rtl"] .experience-badge {
        right: auto !important;
        left: 5px !important;
    }
}

@media (max-width: 480px) {
    html[dir="rtl"] .hero-cta {
        flex-direction: column;
    }

    html[dir="rtl"] .form-row {
        flex-direction: column;
    }
}