/* ===================================================================
   CAR MODELS AND PRODUCTS RTL STYLES
   ================================================================== */

/* ===================================================================
   1. CAR MODELS HERO SECTION RTL STYLES
   ================================================================== */

/* Hero section content alignment */
html[dir="rtl"] .car-models-hero {
    text-align: right !important;
    justify-content: flex-end !important;
}

html[dir="rtl"] .car-models-hero h1,
html[dir="rtl"] .car-models-hero h2,
html[dir="rtl"] .car-models-hero p {
    text-align: right !important;
}

/* Model hero section RTL styles */
html[dir="rtl"] .rtl-hero-content {
    text-align: right !important;
    direction: rtl !important;
}

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

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

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

/* Hero CTA buttons RTL styles */
html[dir="rtl"] .rtl-hero-cta-gap {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .rtl-hero-btn {
    direction: rtl !important;
}

/* Hero button skew adjustments for RTL */
html[dir="rtl"] .rtl-hero-btn {
    transform: skewX(12deg) !important;
}

html[dir="rtl"] .rtl-hero-btn span {
    transform: skewX(-12deg) !important;
}

/* Icon positioning in RTL hero buttons */
html[dir="rtl"] .rtl-hero-btn svg {
    order: 2 !important;
}

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

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

/* ===================================================================
   2. CAR MODELS NAVIGATION RTL STYLES
   ================================================================== */

/* Model tabs navigation */
html[dir="rtl"] .car-models-nav {
    flex-direction: row-reverse !important;
}

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

/* Mobile navigation arrows */
html[dir="rtl"] #mobile-prev {
    right: auto !important;
    left: 1rem !important;
}

html[dir="rtl"] #mobile-next {
    left: auto !important;
    right: 1rem !important;
}

/* Arrow icons mirroring */
html[dir="rtl"] .nav-arrow svg {
    transform: scaleX(-1) !important;
}

/* Mobile arrows in car models section */
html[dir="rtl"] .mobile-arrows {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] #mobile-prev,
html[dir="rtl"] #mobile-next {
    transform: scaleX(-1) !important;
}

/* Mobile arrows positioning in RTL */
html[dir="rtl"] .mobile-arrows .space-x-2 > * + * {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

/* Ensure mobile arrows maintain proper spacing in RTL */
html[dir="rtl"] .mobile-arrows.flex.justify-center.space-x-2 {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .mobile-arrows.flex.justify-center.space-x-2 > * + * {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

/* Panorama navigation arrows RTL fixes */
html[dir="rtl"] #prevArrow,
html[dir="rtl"] #nextArrow {
    transform: scaleX(-1) !important;
}

/* Interior navigation arrows RTL fixes */
html[dir="rtl"] #prev-arrow,
html[dir="rtl"] #next-arrow {
    transform: scaleX(-1) !important;
}

/* General nav-arrow class RTL fixes */
html[dir="rtl"] .nav-arrow {
    transform: scaleX(-1) !important;
}

/* Safety cards navigation RTL fixes */
html[dir="rtl"] #safetyPrevBtn,
html[dir="rtl"] #safetyNextBtn {
    transform: scaleX(-1) !important;
}

html[dir="rtl"] #safetyNavRow .flex.items-center.space-x-3 {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] #safetyNavRow .flex.items-center.space-x-3 > * + * {
    margin-left: 0 !important;
    margin-right: 0.75rem !important;
}

/* Hotspot sidebar RTL fixes */
html[dir="rtl"] .feature-sidebar {
    right: auto !important;
    left: 0 !important;
}

/* Hotspot sidebar close button RTL positioning */
html[dir="rtl"] .feature-sidebar #closeSidebar {
    right: auto !important;
    left: 1rem !important;
}

/* Hotspot sidebar navigation arrows RTL fixes */
html[dir="rtl"] .feature-sidebar [id^="prevBtn-"],
html[dir="rtl"] .feature-sidebar [id^="nextBtn-"] {
    transform: scaleX(-1) !important;
}

/* Hotspot sidebar content alignment */
html[dir="rtl"] .feature-sidebar .feature-content h3,
html[dir="rtl"] .feature-sidebar .feature-content p {
    text-align: right !important;
}

/* Hotspot sidebar navigation container */
html[dir="rtl"] .feature-sidebar .flex.space-x-3 {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .feature-sidebar .flex.space-x-24 {
    flex-direction: row-reverse !important;
}

/* Hotspot sidebar page indicator */
html[dir="rtl"] .feature-sidebar .flex.space-x-2 {
    flex-direction: row-reverse !important;
}

/* Mobile-specific RTL fixes */
@media (max-width: 768px) {
    /* Mobile hotspot sidebar RTL fixes */
    html[dir="rtl"] .feature-sidebar {
        right: auto !important;
        left: 0 !important;
        width: 100% !important;
    }
    
    /* Mobile navigation arrows positioning */
    html[dir="rtl"] .feature-sidebar .flex.space-x-3 {
        flex-direction: row-reverse !important;
        justify-content: flex-start !important;
    }
    
    html[dir="rtl"] .feature-sidebar .flex.space-x-24 {
        flex-direction: row-reverse !important;
        justify-content: flex-start !important;
    }
    
    /* Mobile close button positioning */
    html[dir="rtl"] .feature-sidebar #closeSidebar {
        right: auto !important;
        left: 1rem !important;
    }
    
    /* Mobile navigation arrows visual fixes */
    html[dir="rtl"] .feature-sidebar [id^="prevBtn-"],
    html[dir="rtl"] .feature-sidebar [id^="nextBtn-"] {
        transform: scaleX(-1) !important;
    }
    
    /* Mobile page indicator */
    html[dir="rtl"] .feature-sidebar .flex.space-x-2 {
        flex-direction: row-reverse !important;
        justify-content: flex-start !important;
    }
}

/* Additional mobile RTL fixes for all navigation arrows */
@media (max-width: 768px) {
    html[dir="rtl"] [id^="prevBtn-"],
    html[dir="rtl"] [id^="nextBtn-"] {
        transform: scaleX(-1) !important;
    }
    
    html[dir="rtl"] .flex.space-x-3 {
        flex-direction: row-reverse !important;
    }
    
    html[dir="rtl"] .flex.space-x-24 {
        flex-direction: row-reverse !important;
    }
    
    html[dir="rtl"] .flex.space-x-2 {
        flex-direction: row-reverse !important;
    }
}

/* ===================================================================
   3. CAR MODELS CONTENT RTL STYLES
   ================================================================== */

/* Model content alignment */
html[dir="rtl"] .car-model-content {
    text-align: right !important;
}

html[dir="rtl"] .car-model-title,
html[dir="rtl"] .car-model-description,
html[dir="rtl"] .car-model-price {
    text-align: right !important;
}

/* Color selection buttons */
html[dir="rtl"] .color-buttons {
    flex-direction: row-reverse !important;
}

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

/* ===================================================================
   4. EXTERIOR VIEW RTL STYLES
   ================================================================== */

/* Exterior container */
html[dir="rtl"] .car-exterior-wrapper {
    direction: rtl !important;
}

/* Interactive points positioning */
html[dir="rtl"] .interactive-point {
    transform: translateX(50%) !important;
}

/* Feature sidebar positioning */
html[dir="rtl"] .feature-sidebar {
    right: auto !important;
    left: 0 !important;
}

/* Feature content alignment */
html[dir="rtl"] .feature-content h3,
html[dir="rtl"] .feature-content p {
    text-align: right !important;
}

/* Close button positioning */
html[dir="rtl"] .close-feature {
    left: 1rem !important;
    right: auto !important;
}

/* ===================================================================
   5. INTERIOR VIEW RTL STYLES
   ================================================================== */

/* Interior section alignment */
html[dir="rtl"] .interior-section {
    text-align: right !important;
}

html[dir="rtl"] .interior-section h1,
html[dir="rtl"] .interior-section p {
    text-align: right !important;
}

/* Carousel navigation */
html[dir="rtl"] .carousel-nav {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .carousel-prev {
    right: auto !important;
    left: 1rem !important;
}

html[dir="rtl"] .carousel-next {
    left: auto !important;
    right: 1rem !important;
}

/* Carousel items */
html[dir="rtl"] .carousel-item {
    text-align: right !important;
}

/* Bootstrap Carousel RTL Fixes */
html[dir="rtl"] [data-carousel="slide"] {
    direction: ltr !important; /* Keep carousel direction LTR for proper functionality */
}

html[dir="rtl"] [data-carousel="slide"] .relative {
    direction: rtl !important; /* Content direction RTL */
}

/* Carousel navigation buttons RTL fixes */
html[dir="rtl"] [data-carousel-next],
html[dir="rtl"] [data-carousel-prev] {
    transform: scaleX(-1) !important; /* Flip navigation arrows */
}

/* Carousel indicators RTL fixes */
html[dir="rtl"] [data-carousel-slide-to] {
    direction: rtl !important;
}

/* Exterior carousel specific RTL fixes */
html[dir="rtl"] #exteriorNavigation-{{ model.id }} .flex.space-x-3 {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] #exteriorNavigation-{{ model.id }} .flex.space-x-2 {
    flex-direction: row-reverse !important;
}

/* Ensure carousel content flows properly in RTL */
html[dir="rtl"] [data-carousel-item] {
    direction: rtl !important;
}

/* Fix carousel wrapper overflow in RTL */
html[dir="rtl"] .relative.h-auto.overflow-hidden {
    direction: ltr !important;
}

/* Additional Bootstrap Carousel RTL Fixes */
html[dir="rtl"] [data-carousel="slide"] .absolute.inset-0 {
    direction: ltr !important;
}

html[dir="rtl"] [data-carousel="slide"] [data-carousel-item] {
    direction: rtl !important;
}

/* Fix carousel indicators positioning */
html[dir="rtl"] [data-carousel="slide"] .flex.space-x-2 {
    flex-direction: row-reverse !important;
}

/* Fix carousel navigation button positioning */
html[dir="rtl"] [data-carousel="slide"] .flex.space-x-3 {
    flex-direction: row-reverse !important;
}

/* Ensure carousel slides maintain proper order */
html[dir="rtl"] [data-carousel="slide"] .relative.h-auto.overflow-hidden > div {
    direction: ltr !important;
}

/* Fix carousel content alignment */
html[dir="rtl"] [data-carousel="slide"] .text-start {
    text-align: right !important;
}

/* Fix carousel navigation arrows for RTL */
html[dir="rtl"] [data-carousel="slide"] svg {
    transform: scaleX(-1) !important;
}

/* ===================================================================
   6. PANORAMIC VIEW RTL STYLES
   ================================================================== */

/* Panoramic container */
html[dir="rtl"] .panoramic-container {
    direction: rtl !important;
}

/* Mobile panoramic heading */
html[dir="rtl"] .mobile-panorama-heading {
    text-align: right !important;
}

/* Panoramic sidebar */
html[dir="rtl"] .panoramic-sidebar {
    right: auto !important;
    left: 0 !important;
}

/* Sidebar content alignment */
html[dir="rtl"] .sidebar-header h1,
html[dir="rtl"] .sidebar-header h3,
html[dir="rtl"] .feature-content h3,
html[dir="rtl"] .feature-content p {
    text-align: right !important;
}

/* Gallery navigation */
html[dir="rtl"] .gallery-navigation {
    flex-direction: row-reverse !important;
}

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

/* Interactive points in panoramic view */
html[dir="rtl"] .panoramic-point {
    transform: translateX(50%) !important;
}

/* ===================================================================
   7. PERFORMANCE SECTION RTL STYLES
   ================================================================== */

/* Performance content alignment */
html[dir="rtl"] .performance-section {
    text-align: right !important;
}

html[dir="rtl"] .performance-title,
html[dir="rtl"] .performance-description {
    text-align: right !important;
}

/* Performance stats */
html[dir="rtl"] .performance-stats {
    direction: rtl !important;
}

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

html[dir="rtl"] .stat-value,
html[dir="rtl"] .stat-label {
    text-align: right !important;
}

/* ===================================================================
   8. VIDEO SECTION RTL STYLES
   ================================================================== */

/* Video section content */
html[dir="rtl"] .video-section {
    text-align: right !important;
}

html[dir="rtl"] .video-title,
html[dir="rtl"] .video-description {
    text-align: right !important;
}

/* Video play button */
html[dir="rtl"] .video-play-button {
    transform: scaleX(-1) !important;
}

/* ===================================================================
   9. LED LIGHT SECTION RTL STYLES
   ================================================================== */

/* LED section content */
html[dir="rtl"] .led-section {
    text-align: right !important;
}

html[dir="rtl"] .led-section h1,
html[dir="rtl"] .led-section p {
    text-align: right !important;
}

/* ===================================================================
   10. SPARE PARTS RTL STYLES
   ================================================================== */

/* Spare parts grid */
html[dir="rtl"] .spare-parts-grid {
    direction: rtl !important;
}

/* Product cards */
html[dir="rtl"] .product-card {
    text-align: right !important;
}

html[dir="rtl"] .product-card h3,
html[dir="rtl"] .product-card p {
    text-align: right !important;
}

/* Add to cart button */
html[dir="rtl"] .add-to-cart-btn {
    transform: skewX(12deg) !important;
    border-right: none !important;
    border-left: 2px solid !important;
}

html[dir="rtl"] .add-to-cart-btn span {
    transform: skewX(-12deg) !important;
}

/* ===================================================================
   10. SAFETY SECTION RTL STYLES
   ================================================================== */

/* Safety mobile RTL styles */
html[dir="rtl"] .rtl-safety-mobile {
    text-align: right !important;
    direction: rtl !important;
}

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

html[dir="rtl"] .rtl-safety-kicker,
html[dir="rtl"] .rtl-safety-title,
html[dir="rtl"] .rtl-safety-desc {
    text-align: right !important;
    direction: rtl !important;
}

/* Safety desktop RTL styles */
html[dir="rtl"] .rtl-safety-desktop {
    flex-direction: row-reverse !important;
}

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

html[dir="rtl"] .rtl-safety-label,
html[dir="rtl"] .rtl-safety-title,
html[dir="rtl"] .rtl-safety-description {
    text-align: right !important;
    direction: rtl !important;
}

/* Safety button RTL positioning */
html[dir="rtl"] .rtl-safety-button {
    right: 5rem !important;
    left: auto !important;
}

/* ===================================================================
   11. LED LIGHT SECTION RTL STYLES
   ================================================================== */

/* LED mobile RTL styles */
html[dir="rtl"] .rtl-led-mobile {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .rtl-led-title,
html[dir="rtl"] .rtl-led-description {
    text-align: right !important;
    direction: rtl !important;
}

/* LED desktop RTL styles */
html[dir="rtl"] .rtl-led-desktop {
    text-align: right !important;
    direction: rtl !important;
}

/* LED icon RTL positioning */
html[dir="rtl"] .rtl-led-icon {
    right: 2rem !important;
    left: auto !important;
}

@media (min-width: 768px) {
    html[dir="rtl"] .rtl-led-icon {
        right: 6rem !important;
        left: auto !important;
    }
}

/* ===================================================================
   12. PANORAMA SECTION RTL STYLES
   ================================================================== */

/* Panorama desktop RTL styles */
html[dir="rtl"] .rtl-panorama-content {
    text-align: left !important;
    direction: rtl !important;
    left: 1rem !important;
    right: auto !important;
}

@media (min-width: 768px) {
    html[dir="rtl"] .rtl-panorama-content {
        left: 2rem !important;
        right: auto !important;
    }
}

html[dir="rtl"] .rtl-panorama-title,
html[dir="rtl"] .rtl-panorama-desc {
    text-align: left !important;
    direction: rtl !important;
}

html[dir="rtl"] .rtl-panorama-nav {
    justify-content: flex-start !important;
    flex-direction: row-reverse !important;
}

/* Panorama mobile RTL styles */
html[dir="rtl"] .rtl-panorama-mobile {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .rtl-panorama-mobile-title,
html[dir="rtl"] .rtl-panorama-mobile-desc {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .rtl-panorama-mobile-progress {
    direction: rtl !important;
}

html[dir="rtl"] .rtl-panorama-mobile-nav {
    flex-direction: row-reverse !important;
}

/* Video section RTL styles */
html[dir="rtl"] .rtl-video-icon {
    right: 2rem !important;
    left: auto !important;
}

@media (min-width: 768px) {
    html[dir="rtl"] .rtl-video-icon {
        right: 6rem !important;
        left: auto !important;
    }
}

/* ===================================================================
   13. SAFETY2 SECTION RTL STYLES
   ================================================================== */

/* Safety2 section RTL styles */
html[dir="rtl"] .rtl-safety2-section {
    direction: rtl !important;
}

html[dir="rtl"] .rtl-safety2-container {
    direction: rtl !important;
}

html[dir="rtl"] .rtl-safety2-cards {
    flex-direction: row-reverse !important;
    margin-right: 2rem !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .rtl-safety2-card {
    direction: rtl !important;
}

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

html[dir="rtl"] .rtl-safety2-title,
html[dir="rtl"] .rtl-safety2-desc {
    text-align: right !important;
    direction: rtl !important;
}

/* ===================================================================
   14. TEST DRIVE SECTION RTL STYLES
   ================================================================== */

/* Test drive section RTL styles */
html[dir="rtl"] .rtl-test-drive {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .rtl-test-drive-content {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .rtl-test-drive-title {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .rtl-test-drive-image {
    left: 6rem !important;
    right: auto !important;
}

html[dir="rtl"] .rtl-test-drive-button-container {
    right: 5rem !important;
    left: auto !important;
    justify-content: flex-end !important;
}

html[dir="rtl"] .rtl-test-drive-button {
    direction: rtl !important;
    transform: skewX(12deg) !important;
}

html[dir="rtl"] .rtl-test-drive-button span {
    transform: skewX(-12deg) !important;
}

/* ===================================================================
   15. RESPONSIVE RTL ADJUSTMENTS
   ================================================================== */

/* Mobile RTL adjustments */
@media (max-width: 768px) {
    html[dir="rtl"] .mobile-car-content {
        text-align: right !important;
    }

    html[dir="rtl"] .mobile-nav {
        flex-direction: row-reverse !important;
    }

    html[dir="rtl"] .mobile-feature-sidebar {
        right: auto !important;
        left: 0 !important;
    }

    /* Mobile hero adjustments */
    html[dir="rtl"] .rtl-hero-cta-gap {
        flex-direction: column !important;
        align-items: flex-end !important;
    }

    /* Mobile safety adjustments */
    html[dir="rtl"] .rtl-safety-mobile {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    /* Mobile LED adjustments */
    html[dir="rtl"] .rtl-led-mobile {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    /* Mobile panorama adjustments */
    html[dir="rtl"] .rtl-panorama-mobile-nav {
        justify-content: flex-start !important;
    }
}

/* Desktop RTL adjustments */
@media (min-width: 769px) {
    html[dir="rtl"] .desktop-car-layout {
        flex-direction: row-reverse !important;
    }

    html[dir="rtl"] .desktop-sidebar {
        right: auto !important;
        left: 0 !important;
    }

    /* Desktop hero button adjustments */
    html[dir="rtl"] .rtl-hero-cta-gap {
        justify-content: flex-end !important;
    }

    /* Desktop panorama content positioning */
    html[dir="rtl"] .rtl-panorama-content {
        left: 2rem !important;
        right: auto !important;
        text-align: left !important;
    }

    /* Desktop test drive image positioning */
    html[dir="rtl"] .rtl-test-drive-image {
        left: 6rem !important;
        right: auto !important;
    }
}

/* Tablet RTL adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    html[dir="rtl"] .rtl-panorama-content {
        left: 1rem !important;
        right: auto !important;
    }

    html[dir="rtl"] .rtl-test-drive-image {
        left: 3rem !important;
        right: auto !important;
    }

    html[dir="rtl"] .rtl-test-drive-button-container {
        right: 3rem !important;
        left: auto !important;
    }
}

/* ===================================================================
   12. GRID AND LAYOUT RTL ADJUSTMENTS
   ================================================================== */

/* Grid layouts */
html[dir="rtl"] .models-grid {
    direction: rtl !important;
}

/* Flex layouts */
html[dir="rtl"] .models-flex {
    flex-direction: row-reverse !important;
}

/* Two column layouts */
html[dir="rtl"] .models-two-column {
    flex-direction: row-reverse !important;
}

/* ===================================================================
   13. BUTTON AND CTA RTL STYLES
   ================================================================== */

/* CTA buttons */
html[dir="rtl"] .models-cta {
    text-align: center !important;
}

/* Button hover effects */
html[dir="rtl"] .models-btn:hover {
    transform: translateX(-2px) !important;
}

/* Button icons */
html[dir="rtl"] .models-btn svg {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
    transform: scaleX(-1) !important;
}

/* ===================================================================
   14. ANIMATION RTL ADJUSTMENTS
   ================================================================== */

/* Slide animations */
html[dir="rtl"] .models-slide-in-left {
    animation: slideInRight 0.6s ease-out !important;
}

html[dir="rtl"] .models-slide-in-right {
    animation: slideInLeft 0.6s ease-out !important;
}

/* Fade animations */
html[dir="rtl"] .models-fade-in-left {
    animation: fadeInRight 0.8s ease-out !important;
}

html[dir="rtl"] .models-fade-in-right {
    animation: fadeInLeft 0.8s ease-out !important;
}

/* ===================================================================
   15. INTERACTIVE ELEMENTS RTL STYLES
   ================================================================== */

/* Interactive points */
html[dir="rtl"] .interactive-point::before {
    right: 100% !important;
    left: auto !important;
}

/* Tooltips */
html[dir="rtl"] .tooltip {
    right: 0 !important;
    left: auto !important;
}

html[dir="rtl"] .tooltip-arrow {
    right: 1rem !important;
    left: auto !important;
    transform: scaleX(-1) !important;
}

/* ===================================================================
   16. TYPOGRAPHY RTL ADJUSTMENTS
   ================================================================== */

/* Headings */
html[dir="rtl"] .models-heading {
    text-align: right !important;
}

/* Paragraphs */
html[dir="rtl"] .models-paragraph {
    text-align: right !important;
}

/* Lists */
html[dir="rtl"] .models-list {
    text-align: right !important;
    padding-right: 1.5rem !important;
    padding-left: 0 !important;
}

/* ===================================================================
   17. SPECIFIC COMPONENT OVERRIDES
   ================================================================== */

/* Car image container */
html[dir="rtl"] .car-image-container {
    direction: rtl !important;
}

/* Feature overlay */
html[dir="rtl"] .feature-overlay {
    right: auto !important;
    left: 0 !important;
}

/* Navigation dots */
html[dir="rtl"] .nav-dots {
    flex-direction: row-reverse !important;
}

/* ===================================================================
   18. ACCESSIBILITY RTL IMPROVEMENTS
   ================================================================== */

/* Focus indicators */
html[dir="rtl"] .models-focus:focus {
    border-right: 2px solid #172154 !important;
    border-left: none !important;
}

/* Screen reader text */
html[dir="rtl"] .models-sr-only {
    direction: rtl !important;
}

/* ===================================================================
   19. PRINT STYLES RTL
   ================================================================== */

@media print {
    html[dir="rtl"] .models-print {
        direction: rtl !important;
        text-align: right !important;
    }
}