/* RTL Support for Arabic Language */
/* Smart RTL: Only applies to Arabic content, not entire layout */

/* Base Direction - Keep layout structure, only text direction changes */
html[lang="ar"] {
    /* Don't apply global RTL to maintain layout consistency */
    /* direction: rtl; -- REMOVED to prevent full layout flip */
}

/* Arabic Content Specific */
html[lang="ar"] .content-text,
html[lang="ar"] p,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] .ar-text {
    direction: rtl;
    text-align: right;
}

/* Typography - Arabic-friendly fonts */
html[lang="ar"] {
    font-family: 'Inter', 'Segoe UI Arabic', 'Arial', 'Tahoma', sans-serif;
}

/* Keep container layout but allow content to be RTL */
html[lang="ar"] .container {
    /* Don't flip container, just content inside */
    /* direction: rtl; -- REMOVED */
}

/* Navigation Bar - Keep consistent layout */
html[lang="ar"] .navbar {
    /* Keep navigation in familiar positions */
    /* Logo stays left, menu stays right for consistency */
}

/* Only flip text alignment in nav items, not layout */
html[lang="ar"] .nav-link {
    /* Text can be RTL but position stays same */
}

/* For full Arabic sites, use this class to flip navigation */
html[lang="ar"].rtl-layout .nav-wrapper {
    flex-direction: row-reverse;
}

html[lang="ar"].rtl-layout .nav-menu {
    flex-direction: row-reverse;
    margin-right: auto;
    margin-left: 0;
}

html[lang="ar"].rtl-layout .nav-actions {
    flex-direction: row-reverse;
    margin-left: 0;
    margin-right: var(--space-6);
}

/* Buttons */
html[lang="ar"] .btn svg {
    margin-left: 0;
    margin-right: var(--space-2);
}

html[lang="ar"] .btn-icon + span {
    margin-left: 0;
    margin-right: var(--space-2);
}

/* Forms - Smart RTL for input fields */
html[lang="ar"] input[type="text"],
html[lang="ar"] input[type="search"],
html[lang="ar"] textarea {
    text-align: right;
    direction: rtl;
}

/* Keep email, number, tel in LTR */
html[lang="ar"] input[type="email"],
html[lang="ar"] input[type="number"],
html[lang="ar"] input[type="tel"],
html[lang="ar"] input[type="url"] {
    text-align: left;
    direction: ltr;
}

html[lang="ar"] .form-group label {
    text-align: right;
}

html[lang="ar"] .input-group {
    flex-direction: row-reverse;
}

html[lang="ar"] .input-icon {
    left: auto;
    right: var(--space-4);
}

html[lang="ar"] .input-with-icon {
    padding-left: var(--space-4);
    padding-right: var(--space-12);
}

/* Cards */
html[lang="ar"] .card {
    text-align: right;
}

html[lang="ar"] .card-header {
    flex-direction: row-reverse;
}

html[lang="ar"] .card-actions {
    margin-left: 0;
    margin-right: auto;
}

/* Hero Section */
html[lang="ar"] .hero-content {
    text-align: right;
}

html[lang="ar"] .hero-actions {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

html[lang="ar"] .trust-badge {
    flex-direction: row-reverse;
}

html[lang="ar"] .trust-badge svg {
    margin-right: 0;
    margin-left: var(--space-2);
}

/* Search Box */
html[lang="ar"] .search-box {
    flex-direction: row-reverse;
}

html[lang="ar"] .search-input {
    padding-left: var(--space-12);
    padding-right: var(--space-6);
}

html[lang="ar"] .search-submit {
    left: auto;
    right: 4px;
}

/* Services Grid */
html[lang="ar"] .service-card {
    text-align: right;
}

html[lang="ar"] .service-header {
    flex-direction: row-reverse;
}

html[lang="ar"] .service-icon {
    margin-right: 0;
    margin-left: var(--space-4);
}

html[lang="ar"] .service-meta {
    flex-direction: row-reverse;
}

html[lang="ar"] .price-tag {
    margin-left: var(--space-3);
    margin-right: 0;
}

/* Product Cards */
html[lang="ar"] .product-card {
    text-align: right;
}

html[lang="ar"] .product-badge {
    left: auto;
    right: var(--space-3);
}

html[lang="ar"] .product-actions {
    flex-direction: row-reverse;
}

/* Footer */
html[lang="ar"] .footer {
    text-align: right;
}

html[lang="ar"] .footer-content {
    flex-direction: row-reverse;
}

html[lang="ar"] .footer-section {
    text-align: right;
}

html[lang="ar"] .footer-links {
    text-align: right;
}

html[lang="ar"] .social-links {
    flex-direction: row-reverse;
}

html[lang="ar"] .social-link {
    margin-left: var(--space-3);
    margin-right: 0;
}

html[lang="ar"] .social-link:first-child {
    margin-left: 0;
}

/* Dropdown Menus */
html[lang="ar"] .dropdown {
    left: auto;
    right: 0;
}

html[lang="ar"] .user-dropdown {
    left: auto;
    right: 0;
}

html[lang="ar"] .dropdown-item {
    text-align: right;
    flex-direction: row-reverse;
}

html[lang="ar"] .dropdown-item svg {
    margin-left: var(--space-3);
    margin-right: 0;
}

/* Language Switcher */
html[lang="ar"] .language-switcher {
    direction: rtl;
}

html[lang="ar"] .language-switcher-btn {
    flex-direction: row-reverse;
}

html[lang="ar"] .current-lang-flag {
    margin-left: var(--space-2);
    margin-right: 0;
}

html[lang="ar"] .dropdown-arrow {
    margin-left: 0;
    margin-right: var(--space-2);
    transform: rotate(180deg);
}

html[lang="ar"] .language-dropdown {
    left: auto;
    right: 0;
}

html[lang="ar"] .language-option {
    flex-direction: row-reverse;
    text-align: right;
}

html[lang="ar"] .lang-flag {
    margin-left: var(--space-2);
    margin-right: 0;
}

html[lang="ar"] .check-icon {
    margin-left: 0;
    margin-right: auto;
}

/* Cart */
html[lang="ar"] .cart-item {
    flex-direction: row-reverse;
}

html[lang="ar"] .cart-item-image {
    margin-left: var(--space-4);
    margin-right: 0;
}

html[lang="ar"] .cart-item-actions {
    margin-left: 0;
    margin-right: auto;
}

/* Checkout */
html[lang="ar"] .checkout-section {
    text-align: right;
}

html[lang="ar"] .checkout-form .form-row {
    flex-direction: row-reverse;
}

/* Dashboard */
html[lang="ar"] .dashboard-header {
    flex-direction: row-reverse;
}

html[lang="ar"] .dashboard-actions {
    flex-direction: row-reverse;
}

html[lang="ar"] .stat-card {
    text-align: right;
}

html[lang="ar"] .stat-icon {
    float: left;
}

html[lang="ar"] .stat-trend {
    flex-direction: row-reverse;
}

html[lang="ar"] .stat-trend svg {
    margin-left: var(--space-2);
    margin-right: 0;
}

/* Tables */
html[lang="ar"] table {
    text-align: right;
}

html[lang="ar"] th,
html[lang="ar"] td {
    text-align: right;
}

html[lang="ar"] .table-actions {
    flex-direction: row-reverse;
}

/* Pagination */
html[lang="ar"] .pagination {
    flex-direction: row-reverse;
}

html[lang="ar"] .pagination-prev {
    margin-left: var(--space-2);
    margin-right: 0;
}

html[lang="ar"] .pagination-next {
    margin-left: 0;
    margin-right: var(--space-2);
}

/* Modals */
html[lang="ar"] .modal-content {
    text-align: right;
}

html[lang="ar"] .modal-header {
    flex-direction: row-reverse;
}

html[lang="ar"] .modal-close {
    margin-left: 0;
    margin-right: auto;
}

/* Alerts and Notifications */
html[lang="ar"] .alert {
    text-align: right;
    flex-direction: row-reverse;
}

html[lang="ar"] .alert-icon {
    margin-left: var(--space-3);
    margin-right: 0;
}

html[lang="ar"] .notification {
    text-align: right;
}

html[lang="ar"] .notification-close {
    left: var(--space-3);
    right: auto;
}

/* Breadcrumbs */
html[lang="ar"] .breadcrumb {
    flex-direction: row-reverse;
}

html[lang="ar"] .breadcrumb-item:not(:last-child)::after {
    content: '\\';
    margin: 0 var(--space-2);
    transform: scaleX(-1);
}

/* Timeline */
html[lang="ar"] .timeline-item {
    flex-direction: row-reverse;
}

html[lang="ar"] .timeline-marker {
    margin-left: var(--space-4);
    margin-right: 0;
}

/* Progress Bars */
html[lang="ar"] .progress {
    direction: ltr; /* Progress bars should fill from left to right even in RTL */
}

/* Tooltips */
html[lang="ar"] .tooltip-left {
    left: auto;
    right: 100%;
}

html[lang="ar"] .tooltip-right {
    right: auto;
    left: 100%;
}

/* Icons - Directional Flips */
html[lang="ar"] .icon-arrow-right {
    transform: scaleX(-1);
}

html[lang="ar"] .icon-arrow-left {
    transform: scaleX(-1);
}

html[lang="ar"] .icon-chevron-right {
    transform: scaleX(-1);
}

html[lang="ar"] .icon-chevron-left {
    transform: scaleX(-1);
}

/* Animations */
@keyframes slideInRightRTL {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInLeftRTL {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

html[lang="ar"] .slide-in-right {
    animation: slideInRightRTL 0.3s ease-out;
}

html[lang="ar"] .slide-in-left {
    animation: slideInLeftRTL 0.3s ease-out;
}

/* Flexbox Utilities */
html[lang="ar"] .flex-row {
    flex-direction: row-reverse;
}

html[lang="ar"] .justify-start {
    justify-content: flex-end;
}

html[lang="ar"] .justify-end {
    justify-content: flex-start;
}

html[lang="ar"] .text-left {
    text-align: right;
}

html[lang="ar"] .text-right {
    text-align: left;
}

/* Margin and Padding Utilities */
html[lang="ar"] .ml-auto {
    margin-left: 0;
    margin-right: auto;
}

html[lang="ar"] .mr-auto {
    margin-right: 0;
    margin-left: auto;
}

html[lang="ar"] .pl-4 {
    padding-left: 0;
    padding-right: var(--space-4);
}

html[lang="ar"] .pr-4 {
    padding-right: 0;
    padding-left: var(--space-4);
}

/* Float Utilities */
html[lang="ar"] .float-left {
    float: right;
}

html[lang="ar"] .float-right {
    float: left;
}

/* Border Utilities */
html[lang="ar"] .border-l {
    border-left: none;
    border-right: 1px solid var(--color-gray-800);
}

html[lang="ar"] .border-r {
    border-right: none;
    border-left: 1px solid var(--color-gray-800);
}

/* Arabic-specific Font Adjustments */
html[lang="ar"][lang="ar"] {
    font-size: 1.05em; /* Slightly larger for Arabic readability */
    line-height: 1.8; /* More line height for Arabic text */
}

html[lang="ar"][lang="ar"] h1,
html[lang="ar"][lang="ar"] h2,
html[lang="ar"][lang="ar"] h3,
html[lang="ar"][lang="ar"] h4,
html[lang="ar"][lang="ar"] h5,
html[lang="ar"][lang="ar"] h6 {
    font-weight: 600; /* Adjust weight for Arabic headings */
}