/* RTL Support Styles for Arabic Language */

/* Global RTL Adjustments */
[dir="rtl"] {
    text-align: right;
}

[dir="rtl"] body {
    font-family: 'Cairo', 'Tajawal', 'Roboto', sans-serif;
}

/* Navbar RTL */
[dir="rtl"] .navbar-start {
    margin-right: 0;
    margin-left: auto;
}

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

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

/* Button Icon Spacing RTL */
[dir="rtl"] .btn i,
[dir="rtl"] .button i {
    margin-right: 0;
    margin-left: 0.5rem;
}

[dir="rtl"] .mr-2 {
    margin-right: 0;
    margin-left: 0.5rem;
}

[dir="rtl"] .ml-2 {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* Dropdown RTL */
[dir="rtl"] .dropdown-content {
    right: auto;
    left: 0;
}

[dir="rtl"] .dropdown-end .dropdown-content {
    right: 0;
    left: auto;
}

/* Grid and Flex RTL */
[dir="rtl"] .grid-flow-col {
    direction: ltr;
}

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

/* Badge RTL */
[dir="rtl"] .badge {
    margin-right: 0;
    margin-left: 0.5rem;
}

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

[dir="rtl"] input,
[dir="rtl"] textarea {
    text-align: right;
    direction: rtl;
}

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

/* Timeline RTL */
[dir="rtl"] .timeline::after {
    right: 50%;
    left: auto;
    margin-right: -3px;
    margin-left: 0;
}

[dir="rtl"] .timeline-item {
    padding: 10px 40px 10px 40px;
}

[dir="rtl"] .timeline-item.left {
    right: 0;
    left: auto;
}

[dir="rtl"] .timeline-item.right {
    right: 50%;
    left: auto;
}

[dir="rtl"] .timeline-item::after {
    left: -17px;
    right: auto;
}

[dir="rtl"] .timeline-item.right::after {
    right: -16px;
    left: auto;
}

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

/* Social Icons RTL - Keep LTR for icon layout */
[dir="rtl"] .social-icons {
    direction: ltr;
}

/* Animated Cards RTL */
[dir="rtl"] .animated-card {
    text-align: center;
}

/* Profile Image Container RTL */
[dir="rtl"] .profile-image-container {
    margin-right: 0;
    margin-left: auto;
}

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

[dir="rtl"] .hero .text-center {
    text-align: center !important;
}

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

[dir="rtl"] .project-card .flex {
    justify-content: flex-start;
}

/* Tooltip RTL */
[dir="rtl"] .tooltip-container {
    direction: ltr;
}

/* Share Button Text RTL */
[dir="rtl"] .text {
    margin-right: 0;
    margin-left: 12px;
}

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

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

/* Language Toggle Active State */
.lang-option.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* Smooth Transition for Direction Change */
html {
    transition: direction 0.3s ease;
}

body {
    transition: all 0.3s ease;
}

/* Mobile RTL Adjustments */
@media (max-width: 768px) {
    [dir="rtl"] .timeline::after {
        right: 31px;
        left: auto;
    }
    
    [dir="rtl"] .timeline-item {
        padding-right: 70px;
        padding-left: 25px;
    }
    
    [dir="rtl"] .timeline-item::after {
        right: 15px;
        left: auto;
    }
    
    [dir="rtl"] .timeline-item.right {
        right: 0;
        left: auto;
    }
}

/* Arabic Font Import */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&family=Tajawal:wght@300;400;500;700&display=swap');

/* Better Arabic Typography */
[dir="rtl"] {
    font-family: 'Cairo', 'Tajawal', sans-serif;
    letter-spacing: normal;
}

[dir="rtl"] .text-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fix for flex items in RTL */
[dir="rtl"] .flex {
    direction: rtl;
}

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

/* Navigation links alignment */
[dir="rtl"] .menu a {
    text-align: right;
}

/* Contact form button icon */
[dir="rtl"] #submitBtn i {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Success/Error message icons */
[dir="rtl"] .success-message i,
[dir="rtl"] .error-message i {
    margin-right: 0;
    margin-left: 0.5rem;
}