/* ==========================================================================
   RTL Home Page - Home Page Specific Styles for Right-to-Left Languages
   ========================================================================== */

/*
   Home page specific RTL styles
   - Hero/Carousel sections
   - Feature cards
   - Statistics sections
   - CTA sections
*/

/* ==========================================================================
   1. HERO & CAROUSEL SECTIONS
   ========================================================================== */

/* Hero/Carousel sections - Complete RTL carousel functionality */
[dir="rtl"] .carousel-slide {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    text-align: center;
    direction: rtl;
}

[dir="rtl"] .carousel-slide.active {
    display: block;
    opacity: 1;
}

/* Force center alignment for all carousel content - override base RTL rules */
[dir="rtl"] .carousel-slide h1,
[dir="rtl"] .carousel-slide h2,
[dir="rtl"] .carousel-slide h3,
[dir="rtl"] .carousel-slide p,
[dir="rtl"] .carousel-slide div,
[dir="rtl"] .carousel-slide span {
    text-align: center;
}

/* Carousel slide content container */
[dir="rtl"] .carousel-slide .animate-fade-in {
    text-align: center;
}

/* Carousel dots container - Target the specific dots container */
[dir="rtl"] .absolute.bottom-8.flex.space-x-3 {
    gap: 0.75rem;
}

[dir="rtl"] .absolute.bottom-8.flex.space-x-3 > * {
    margin: 0 !important;
}

[dir="rtl"] .absolute.bottom-8.flex.space-x-3 > * + * {
    margin-left: 0 !important;
}

/* Reset all margins on carousel dots */
[dir="rtl"] .carousel-dot {
    margin: 0 !important;
}

[dir="rtl"] .carousel-dot.active {
    background-color: white;
    transform: scale(1.2);
}

/* Ensure carousel container doesn't inherit problematic RTL styles */
[dir="rtl"] #hero-carousel {
    direction: ltr; /* Use LTR for carousel container functionality */
}

/* Carousel navigation arrows - Position and Direction Fix for RTL */
/* Swap positions: left button goes to right side, right button goes to left side */
[dir="rtl"] .absolute.left-4 {
    inset-inline-start: auto;
    inset-inline-end: 1rem; /* Left button (previousSlide) moves to right side */
}

[dir="rtl"] .absolute.right-4 {
    inset-inline-start: 1rem; /* Right button (nextSlide) moves to left side */
    inset-inline-end: auto;
}

/* Arrow directions for RTL domain - Keep logical directions */
[dir="rtl"] .absolute.left-4 svg {
    /* Left arrow (←) for previousSlide - correct direction */
}

[dir="rtl"] .absolute.right-4 svg {
    /* Right arrow (→) for nextSlide - correct direction */
}

/* Carousel dots container - don't interfere with spacing */
/* Let Tailwind handle the carousel dots spacing normally */

/* ==========================================================================
   2. FEATURE SECTIONS
   ========================================================================== */

/* Feature cards - Use actual HTML classes */
[dir="rtl"] .bg-gradient-to-br h3 {
    text-align: start; /* Feature titles right-aligned */
}

/* Blue gradient card p tags - no text-align styling as requested */
[dir="rtl"] .bg-gradient-to-br.from-blue-50 p {
    text-align: inherit !important; /* Override any center alignment rules */
}

/* Other gradient cards p tags - normal RTL alignment */
[dir="rtl"] .bg-gradient-to-br.from-green-50 p,
[dir="rtl"] .bg-gradient-to-br.from-purple-50 p {
    text-align: start !important; /* Override any center alignment rules */
}

/* ==========================================================================
   3. STATISTICS & COUNTERS
   ========================================================================== */

/* Statistics sections */
[dir="rtl"] .stats-section {
    direction: rtl;
}

[dir="rtl"] .stats-section p {
    text-align: center;
}

/* Statistics counter */
[dir="rtl"] .counter {
    direction: rtl;
    text-align: center;
}

/* Statistics cards */
[dir="rtl"] .stat-card {
    text-align: center;
}

[dir="rtl"] .stat-card p {
    text-align: center;
}

/* ==========================================================================
   4. CTA & BUTTON SECTIONS
   ========================================================================== */

/* CTA Banner */
[dir="rtl"] .cta-banner {
    text-align: center; /* Keep CTA centered for impact */
}

[dir="rtl"] .cta-banner p {
    text-align: center;
}

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

[dir="rtl"] .cta-buttons .btn {
    margin-inline-start: 1rem;
    margin-inline-end: 0;
}

[dir="rtl"] .cta-buttons .btn:first-child {
    margin-inline-start: 0;
}

[dir="rtl"] .cta-buttons .btn:last-child {
    margin-inline-end: 1rem;
}

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

/* ==========================================================================
   5. SECTION TITLES & CONTENT
   ========================================================================== */

/* Section titles - keep centered for visual impact */
[dir="rtl"] .section-title {
    text-align: center;
}

[dir="rtl"] .section-description {
    text-align: center;
}

/* Home page specific sections that need center-aligned paragraphs */
[dir="rtl"] section p.text-lg,
[dir="rtl"] section p.text-xl {
    text-align: center;
}

/* Statistics section - center align the labels */
[dir="rtl"] p.text-gray-300 {
    text-align: center;
}

/* Section descriptions under titles - center align */
[dir="rtl"] .text-center p {
    text-align: center;
}

/* Hero titles */
[dir="rtl"] .hero-title {
    text-align: center;
    direction: rtl;
}

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

/* Large typography */
[dir="rtl"] .text-5xl,
[dir="rtl"] .text-6xl,
[dir="rtl"] .text-7xl {
    text-align: center;
    direction: rtl;
}

/* ==========================================================================
   6. VIDEO & MEDIA SECTIONS
   ========================================================================== */

/* Video Modal */
[dir="rtl"] .video-modal {
    direction: rtl;
}

[dir="rtl"] .video-modal .close-btn {
    inset-inline-start: 0;
    inset-inline-end: auto;
}

/* ==========================================================================
   7. FLOATING ELEMENTS
   ========================================================================== */

/* Floating Elements */
[dir="rtl"] .floating-element.left {
    inset-inline-start: auto;
    inset-inline-end: 2.5rem;
}

[dir="rtl"] .floating-element.right {
    inset-inline-start: 2.5rem;
    inset-inline-end: auto;
}

/* ==========================================================================
   8. ANIMATIONS
   ========================================================================== */

/* Animation adjustments for RTL */
[dir="rtl"] .animate-float {
    animation-direction: reverse;
}

[dir="rtl"] .animate-float-delay {
    animation-direction: reverse;
}

/* ==========================================================================
   9. RESPONSIVE HOME PAGE
   ========================================================================== */

/* Mobile responsive RTL adjustments */
@media (max-width: 768px) {
    [dir="rtl"] .hero-buttons {
        flex-direction: column;
    }

    [dir="rtl"] .hero-buttons .btn {
        margin: 0.5rem 0;
    }

    [dir="rtl"] .cta-buttons {
        flex-direction: column;
    }

    [dir="rtl"] .cta-buttons .btn {
        margin: 0.5rem 0;
    }

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

    /* Hide carousel arrows on mobile */
    [dir="rtl"] .carousel-arrow {
        display: none;
    }

    /* Hero stats mobile */
    [dir="rtl"] .hero-stats {
        direction: rtl;
    }

    /* Statistics section mobile adjustments for RTL */
    [dir="rtl"] .grid.grid-cols-2.md\:grid-cols-4 {
        gap: 1rem;
        direction: rtl;
    }

    [dir="rtl"] .grid.grid-cols-2.md\:grid-cols-4 .text-center {
        padding: 1rem 0.5rem;
        text-align: center;
    }

    [dir="rtl"] .grid.grid-cols-2.md\:grid-cols-4 h3 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
        text-align: center;
    }

    [dir="rtl"] .grid.grid-cols-2.md\:grid-cols-4 p {
        font-size: 0.875rem;
        line-height: 1.25rem;
        text-align: center;
    }
}