/* ==========================================================================
   RTL (Right-to-Left) Styles for Arabic
   ========================================================================== */

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

/* Navigation */

[dir="rtl"] .nav-links a::after {
    left: auto;
    right: 0;
}

/* Hero Section */
[dir="rtl"] .hero-grid {
    direction: ltr !important;
}

[dir="rtl"] .hero-image {
    order: -1;
}

[dir="rtl"] .hero-image-decoration {
    right: auto;
    left: -20px;
}

[dir="rtl"] .hero-content {
    order: 2;
    direction: rtl;
    text-align: right;
    align-items: flex-start;
}

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

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

[dir="rtl"] .hero-stats {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

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

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

/* About Section */
[dir="rtl"] .about-grid {
    direction: ltr; /* Keep grid direction LTR so columns swap visually */
}

[dir="rtl"] .about-image {
    order: 2; /* Image on left (end) for RTL */
}

[dir="rtl"] .about-content {
    order: 1; /* Content on right (start) for RTL */
    direction: rtl; /* Text flows RTL */
}

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

[dir="rtl"] .about-content .gold-line {
    margin-left: auto;
    margin-right: 0;
}

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

[dir="rtl"] .about-image::before {
    left: -20px;
    right: 20px;
}

[dir="rtl"] .about-features {
    direction: rtl;
}

[dir="rtl"] .about-features li {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    text-align: right;
}

/* Products */
[dir="rtl"] .product-badge {
    right: auto;
    left: var(--spacing-sm);
}

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

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

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

/* Contact */
[dir="rtl"] .contact-grid {
    direction: ltr; /* Keep grid direction LTR so columns swap visually */
}

[dir="rtl"] .contact-info {
    order: 1; /* Contact info on right (start) for RTL */
    direction: rtl;
}

[dir="rtl"] .contact-map {
    order: 2; /* Map on left (end) for RTL */
}

[dir="rtl"] .contact-info .section-title {
    text-align: right;
}

[dir="rtl"] .contact-info .gold-line {
    margin-left: auto;
    margin-right: 0;
}

[dir="rtl"] .contact-details {
    direction: rtl;
}

[dir="rtl"] .contact-item {
    display: flex;
    flex-direction: row;
    text-align: right;
    gap: var(--spacing-sm);
}

[dir="rtl"] .contact-item > div {
    text-align: right;
}

[dir="rtl"] .contact-item .contact-icon {
    flex-shrink: 0;
}

/* Footer */
[dir="rtl"] .footer-grid {
    direction: rtl;
}

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

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

/* Mobile menu */
[dir="rtl"] .mobile-menu-btn {
    order: -1;
}

/* Lists */
[dir="rtl"] ul,
[dir="rtl"] ol {
    padding-right: var(--spacing-md);
    padding-left: 0;
}

/* General RTL adjustments */
[dir="rtl"] .text-left {
    text-align: right;
}

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

/* Icon positioning */
[dir="rtl"] .icon-text {
    flex-direction: row-reverse;
}

/* Button groups */
[dir="rtl"] .btn-group {
    flex-direction: row-reverse;
}

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

/* Form inputs (if added later) */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
    text-align: right;
}

/* Contact Form RTL Styles */
[dir="rtl"] .contact-form-wrapper {
    order: 2;
}

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

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

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

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

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

/* Margins and paddings that need reversing */
[dir="rtl"] .ml-auto {
    margin-left: 0;
    margin-right: auto;
}

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