/*
 * RTL Support for Arabic Language
 * Ahmed Showky Portfolio Theme
 */

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

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

/* Navigation RTL */
html[dir="rtl"] .navbar-nav {
    direction: rtl;
}

html[dir="rtl"] .navbar-brand {
    margin-left: 1rem;
    margin-right: 0;
}

html[dir="rtl"] .navbar-toggler {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] .offcanvas-end {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}

html[dir="rtl"] .offcanvas.show {
    transform: translateX(0);
}

/* Language Switcher RTL */
html[dir="rtl"] .language-switcher {
    margin-left: 0;
    margin-right: 1rem;
}

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

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

html[dir="rtl"] .hero-portrait {
    text-align: left;
}

/* Typography RTL */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    text-align: right;
}

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

/* Buttons RTL */
html[dir="rtl"] .btn {
    text-align: center;
}

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

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

/* Forms RTL */
html[dir="rtl"] .form-control {
    text-align: right;
}

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

/* Lists RTL */
html[dir="rtl"] ul {
    padding-right: 0;
    padding-left: 2rem;
}

html[dir="rtl"] ol {
    padding-right: 0;
    padding-left: 2rem;
}

/* Social Media Icons RTL */
html[dir="rtl"] .social-icons {
    direction: rtl;
}

html[dir="rtl"] .social-icons a {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* Footer RTL */
html[dir="rtl"] .footer-menu {
    text-align: left;
}

html[dir="rtl"] .footer-menu .list-inline-item {
    margin-right: 0;
    margin-left: 1rem;
}

/* WhatsApp Button RTL */
html[dir="rtl"] .whatsapp-float {
    left: 30px;
    right: auto;
}

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

html[dir="rtl"] .whatsapp-tooltip::after {
    right: 100%;
    left: auto;
    border-color: transparent #333 transparent transparent;
}

/* Back to Top Button RTL */
html[dir="rtl"] #backToTopButton {
    left: 30px;
    right: auto;
}

/* Portfolio Grid RTL */
html[dir="rtl"] .portfolio-grid {
    direction: rtl;
}

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

/* Skills Grid RTL */
html[dir="rtl"] .skills-grid {
    direction: rtl;
}

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

/* Partners Carousel RTL */
html[dir="rtl"] .partners-carousel {
    direction: rtl;
}

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

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

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

/* Contact Form RTL */
html[dir="rtl"] .contact-form {
    text-align: right;
}

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

/* Bootstrap Overrides for RTL */
html[dir="rtl"] .me-3 {
    margin-left: 1rem !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .me-2 {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .ms-3 {
    margin-right: 1rem !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .ms-2 {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

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

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

html[dir="rtl"] .text-end {
    text-align: left !important;
}

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

/* Flexbox RTL */
html[dir="rtl"] .justify-content-end {
    justify-content: flex-start !important;
}

html[dir="rtl"] .justify-content-start {
    justify-content: flex-end !important;
}

/* Animation RTL */
html[dir="rtl"] [data-aos="fade-right"] {
    transform: translateX(-100px);
}

html[dir="rtl"] [data-aos="fade-left"] {
    transform: translateX(100px);
}

html[dir="rtl"] [data-aos="slide-right"] {
    transform: translateX(-100%);
}

html[dir="rtl"] [data-aos="slide-left"] {
    transform: translateX(100%);
}

/* Mobile RTL Adjustments */
@media (max-width: 768px) {
    html[dir="rtl"] .whatsapp-float {
        left: 20px;
        right: auto;
    }
    
    html[dir="rtl"] .whatsapp-tooltip {
        left: 60px;
        right: auto;
    }
    
    html[dir="rtl"] #backToTopButton {
        left: 20px;
        right: auto;
    }
}

@media (max-width: 480px) {
    html[dir="rtl"] .whatsapp-float {
        left: 15px;
        right: auto;
    }
    
    html[dir="rtl"] .whatsapp-tooltip {
        left: 55px;
        right: auto;
    }
    
    html[dir="rtl"] #backToTopButton {
        left: 15px;
        right: auto;
    }
    
    html[dir="rtl"] .language-switcher {
        margin-left: 0;
        margin-right: 5px;
    }
}

/* Custom RTL 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[dir="rtl"] .slide-in-right {
    animation: slideInRight 0.5s ease-out;
}

html[dir="rtl"] .slide-in-left {
    animation: slideInLeft 0.5s ease-out;
}

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

html[dir="rtl"] .hero-portrait {
    margin-right: auto;
    margin-left: 0;
}

html[dir="rtl"] .social-icons {
    justify-content: flex-end;
}

html[dir="rtl"] .call-to-action {
    justify-content: flex-end;
}

html[dir="rtl"] .call-to-action .btn {
    margin-right: 0;
    margin-left: 1rem;
}

/* Language Switcher RTL */
html[dir="rtl"] .language-switcher {
    margin-right: 0;
    margin-left: 1rem;
}

html[dir="rtl"] .language-toggle {
    direction: rtl;
}

html[dir="rtl"] .language-flag {
    margin-right: 0;
    margin-left: 8px;
}

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

/* Print RTL */
@media print {
    html[dir="rtl"] * {
        direction: rtl;
        text-align: right;
    }
}