/* ============================================
   RTL (Right-to-Left) Support for Arabic
   ConnectPay / Cash Misr
   ============================================ */

/* Import Google Fonts - Cairo for Arabic */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

/* RTL Base Styles */
[dir="rtl"] {
    /* Typography for Arabic */
    --font-primary: 'Cairo', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

[dir="rtl"] body {
    font-family: var(--font-primary);
    text-align: right;
}

/* Direction flip utilities */
[dir="rtl"] .text-left {
    text-align: right !important;
}

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

/* ============================================
   Header RTL
   ============================================ */
[dir="rtl"] .header .container {
    flex-direction: row;
}

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

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

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

[dir="rtl"] .nav-link::before {
    right: auto;
}

[dir="rtl"] .nav-cta {
    margin-left: 0;
    margin-right: var(--space-lg);
}

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

/* ============================================
   Hero Section RTL
   ============================================ */
[dir="rtl"] .hero .container {
    flex-direction: row-reverse;
}

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

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

[dir="rtl"] .hero-badge .pulse-dot {
    margin-right: 0;
    margin-left: var(--space-sm);
}

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

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

[dir="rtl"] .hero-stat {
    text-align: right;
    border-left: none;
    border-right: 1px solid var(--dark-500);
    padding-left: 0;
    padding-right: var(--space-xl);
    margin-left: 0;
    margin-right: var(--space-xl);
}

[dir="rtl"] .hero-stat:first-child {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
}

/* Phone Mockup RTL */
[dir="rtl"] .hero-phone {
    transform: rotateY(5deg);
}

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

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

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

[dir="rtl"] .phone-transaction-info {
    text-align: right;
    margin-left: 0;
    margin-right: var(--space-md);
}

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

/* Floating Cards RTL */
[dir="rtl"] .float-card-1 {
    left: auto;
    right: -30px;
}

[dir="rtl"] .float-card-2 {
    right: auto;
    left: -40px;
}

[dir="rtl"] .float-card-3 {
    right: auto;
}

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

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

/* ============================================
   Metrics Section RTL
   ============================================ */
[dir="rtl"] .metrics-grid {
    direction: rtl;
}

[dir="rtl"] .metric-card::after {
    right: auto;
    left: 0;
}

[dir="rtl"] .metric-card:last-child::after {
    display: none;
}

/* ============================================
   Services Section RTL
   ============================================ */
[dir="rtl"] .services-grid {
    direction: rtl;
}

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

[dir="rtl"] .service-number {
    right: auto;
    left: var(--space-lg);
}

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

[dir="rtl"] .service-link svg {
    margin-left: 0;
    margin-right: var(--space-sm);
    transform: rotate(180deg);
}

/* ============================================
   Features Section RTL
   ============================================ */
[dir="rtl"] .features-content {
    flex-direction: row-reverse;
}

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

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

[dir="rtl"] .feature-item {
    flex-direction: row;
    text-align: right;
}

[dir="rtl"] .feature-item-icon {
    margin-right: 0;
    margin-left: var(--space-lg);
}

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

/* ============================================
   Partners Section RTL
   ============================================ */
[dir="rtl"] .partners-grid {
    direction: rtl;
}

/* ============================================
   CTA Section RTL
   ============================================ */
[dir="rtl"] .cta {
    text-align: center;
}

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

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

[dir="rtl"] .footer-brand .logo {
    justify-content: flex-start;
    flex-direction: row;
}

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

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

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

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

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

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

[dir="rtl"] .btn svg {
    margin-left: 0;
    margin-right: var(--space-sm);
    transform: rotate(180deg);
}

[dir="rtl"] .btn-icon {
    margin-left: 0;
    margin-right: var(--space-sm);
}

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

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

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

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

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

/* ============================================
   About Page RTL
   ============================================ */
[dir="rtl"] .about-content {
    flex-direction: row-reverse;
}

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

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

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

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

[dir="rtl"] .vm-icon {
    margin-right: 0;
    margin-left: var(--space-md);
}

[dir="rtl"] .values-grid {
    direction: rtl;
}

[dir="rtl"] .timeline::before {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

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

[dir="rtl"] .timeline-item:nth-child(odd) {
    flex-direction: row;
}

[dir="rtl"] .timeline-item:nth-child(odd) .timeline-content {
    text-align: left;
}

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

[dir="rtl"] .team-grid {
    direction: rtl;
}

/* ============================================
   Services Page RTL
   ============================================ */
[dir="rtl"] .service-detail .features-content {
    flex-direction: row-reverse;
}

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

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

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

[dir="rtl"] .service-features svg {
    margin-right: 0;
    margin-left: var(--space-sm);
}

/* ============================================
   Partners Page RTL
   ============================================ */
[dir="rtl"] .categories-grid {
    direction: rtl;
}

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

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

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

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

[dir="rtl"] .testimonial-info {
    text-align: right;
    margin-left: 0;
    margin-right: var(--space-md);
}

/* ============================================
   Store Page RTL
   ============================================ */
[dir="rtl"] .apps-features {
    direction: rtl;

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

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

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

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

[dir="rtl"] .app-features svg {
    margin-right: 0;
    margin-left: var(--space-sm);
}

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

[dir="rtl"] .devices-grid {
    direction: rtl;
}

/* ============================================
   Contact Page RTL
   ============================================ */
[dir="rtl"] .faq-grid {
    direction: rtl;
}

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

/* ============================================
   Page Header RTL
   ============================================ */
[dir="rtl"] .page-header {
    text-align: center;
}

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

[dir="rtl"] .breadcrumb span {
    margin: 0 var(--space-sm);
}

/* ============================================
   Utilities RTL
   ============================================ */
[dir="rtl"] .text-center {
    text-align: center !important;
}

[dir="rtl"] .mt-2, [dir="rtl"] .mt-3 {
    margin-top: inherit;
}

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

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

/* ============================================
   Language Switcher RTL Overrides
   ============================================ */
[dir="rtl"] .lang-switcher {
    margin-left: var(--space-md);
    margin-right: auto;
}

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

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

/* Mobile Language Switcher RTL */
@media (max-width: 992px) {
    [dir="rtl"] .lang-switcher {
        right: auto;
        left: var(--space-xl);
        margin: 0;
    }
    
    [dir="rtl"] .lang-dropdown {
        right: auto;
        left: 0;
    }
}

/* ============================================
   Smooth Transition for Language Switch
   ============================================ */
.lang-transitioning * {
    transition: none !important;
}

body.lang-fade {
    opacity: 0;
    transition: opacity 0.2s ease;
}

body.lang-fade-in {
    opacity: 1;
}

/* ============================================
   Mobile Navigation RTL
   ============================================ */
@media (max-width: 992px) {
    [dir="rtl"] .nav-menu {
        left: -100%;
        right: auto;
        border-left: none;
        border-right: 1px solid var(--dark-600);
    }
    
    [dir="rtl"] .nav-menu.active {
        left: 0;
        right: auto;
    }
    
    [dir="rtl"] .nav-link {
        text-align: right;
    }
}

/* ============================================
   Background Effects RTL
   ============================================ */
[dir="rtl"] .bg-glow-1 {
    right: auto;
    left: -200px;
}

[dir="rtl"] .bg-glow-2 {
    left: auto;
    right: -200px;
}

/* ============================================
   Accordion RTL
   ============================================ */
[dir="rtl"] .accordion-header {
    flex-direction: row-reverse;
}

[dir="rtl"] .accordion-icon {
    margin-left: 0;
    margin-right: var(--space-md);
}

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

/* ============================================
   Back to Top Button RTL
   ============================================ */
[dir="rtl"] .back-to-top {
    right: auto;
    left: var(--space-xl);
}

/* ============================================
   Loading Screen RTL
   ============================================ */
[dir="rtl"] .loading-text {
    font-family: 'Cairo', sans-serif;
}

/* ============================================
   Notification RTL
   ============================================ */
[dir="rtl"] .notification {
    right: auto;
    left: var(--space-xl);
    flex-direction: row-reverse;
}

[dir="rtl"] .notification-close {
    margin-left: 0;
    margin-right: var(--space-md);
}