/**
 * ZIN Fashion - RTL Support for Arabic
 * Location: /public_html/dev_staging/assets/css/rtl.css
 * Updated: Fixed phone number direction and contact/payment alignment
 */

/* ========================================
   General RTL Adjustments
   ======================================== */
html[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] body {
    font-family: 'Tajawal', 'Poppins', sans-serif;
}

/* ========================================
   Disable Animations Only for RTL
   ======================================== */
html[dir="rtl"] .animate-on-scroll,
html[dir="rtl"] .animate-fade-up,
html[dir="rtl"] .animate-fade-up-delay,
html[dir="rtl"] .animate-fade-up-delay-2 {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease !important;
}

/* Disable shimmer animations */
html[dir="rtl"] .newsletter-section::before,
html[dir="rtl"] .top-banner::before {
    animation: none !important;
    display: none !important;
}

/* Disable button gradient animations */
html[dir="rtl"] .btn::before,
html[dir="rtl"] .filter-btn::before {
    animation: none !important;
    transition: none !important;
}

/* Disable hero slider animations */
html[dir="rtl"] .glass-box {
    animation: none !important;
}

/* Disable parallax */
html[dir="rtl"] [data-parallax] {
    transform: none !important;
}

/* ========================================
   Layout Reversals
   ======================================== */
html[dir="rtl"] .container {
    direction: rtl;
}

/* Float reversals */
html[dir="rtl"] .float-left {
    float: right;
}

html[dir="rtl"] .float-right {
    float: left;
}

/* Text alignment */
html[dir="rtl"] .text-left {
    text-align: right;
}

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

/* ========================================
   Header RTL
   ======================================== */
html[dir="rtl"] .top-banner-content {
    flex-direction: row-reverse;
}

html[dir="rtl"] .banner-right {
    flex-direction: row-reverse;
}

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

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

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

html[dir="rtl"] .action-badge {
    right: auto;
    left: -8px;
}

/* Search Bar */
html[dir="rtl"] .search-form {
    flex-direction: row-reverse;
}

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

html[dir="rtl"] .search-form button {
    border-right: 1px solid var(--border-color);
    border-left: none;
}

/* Language Selector */
html[dir="rtl"] .lang-current {
    flex-direction: row-reverse;
}

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

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

/* Account Dropdown */
html[dir="rtl"] .account-dropdown {
    right: auto;
    left: 0;
}

html[dir="rtl"] .account-dropdown a:hover {
    padding-left: 20px;
    padding-right: 25px;
}

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

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

html[dir="rtl"] .nav-link i {
    margin-left: 0;
    margin-right: 5px;
}

/* Mega Menu */
html[dir="rtl"] .mega-menu {
    left: auto;
    right: 0;
}

html[dir="rtl"] .mega-menu-content {
    direction: rtl;
}

html[dir="rtl"] .mega-menu-column a:hover {
    transform: translateX(-5px);
}

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

/* ========================================
   Product Cards RTL
   ======================================== */
html[dir="rtl"] .product-badge {
    left: auto;
    right: 10px;
}

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

html[dir="rtl"] .product-price {
    flex-direction: row-reverse;
}

html[dir="rtl"] .btn-add-to-cart {
    flex-direction: row-reverse;
}

html[dir="rtl"] .btn-add-to-cart i {
    margin-right: 0;
    margin-left: 8px;
}

/* Disable hover transforms but keep other hover effects */
html[dir="rtl"] .product-card:hover {
    transform: none !important;
}

html[dir="rtl"] .product-card:hover .product-image img {
    transform: scale(1.1);
}

/* ========================================
   Categories RTL
   ======================================== */
html[dir="rtl"] .category-overlay {
    text-align: right;
}

/* Disable hover lift but keep image zoom */
html[dir="rtl"] .category-card:hover {
    transform: none !important;
}

html[dir="rtl"] .category-card:hover .category-image {
    transform: scale(1.1);
}

/* ========================================
   Features Section RTL
   ======================================== */
html[dir="rtl"] .features-grid {
    direction: rtl;
}

html[dir="rtl"] .feature-card:hover {
    transform: none !important;
}

html[dir="rtl"] .feature-card:hover .feature-icon {
    transform: rotate(360deg);
}

/* ========================================
   Newsletter RTL
   ======================================== */
html[dir="rtl"] .newsletter-form {
    flex-direction: row-reverse;
}

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

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

/* Social Links - align to the right */
html[dir="rtl"] .social-links {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

html[dir="rtl"] .footer-links a:hover {
    transform: translateX(-5px);
}

/* Updated Contact Items for better alignment */
html[dir="rtl"] .contact-info {
    text-align: right;
}

html[dir="rtl"] .contact-item {
    flex-direction: row-reverse;
    justify-content: flex-end;
    text-align: right;
}

html[dir="rtl"] .contact-item i {
    margin-right: 0;
    margin-left: 12px;
}

/* Keep phone numbers in LTR direction */
html[dir="rtl"] .contact-item a[href^="tel:"] {
    direction: ltr;
    unicode-bidi: embed;
    text-align: right;
    display: inline-block;
}

/* Payment Methods alignment */
html[dir="rtl"] .payment-methods {
    text-align: right;
}

html[dir="rtl"] .payment-methods h5 {
    text-align: right;
}

html[dir="rtl"] .payment-icons {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* ========================================
   Cart Sidebar RTL
   ======================================== */
html[dir="rtl"] .cart-sidebar {
    right: auto;
    left: -400px;
}

html[dir="rtl"] .cart-sidebar.active {
    left: 0;
}

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

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

html[dir="rtl"] .cart-item-remove {
    right: auto;
    left: 10px;
}

html[dir="rtl"] .cart-total {
    flex-direction: row-reverse;
}

/* ========================================
   Mobile Menu RTL
   ======================================== */
html[dir="rtl"] .mobile-menu {
    left: auto;
    right: -100%;
}

html[dir="rtl"] .mobile-menu.active {
    right: 0;
}

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

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

html[dir="rtl"] .mobile-search input {
    text-align: right;
}

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

html[dir="rtl"] .mobile-nav-toggle {
    transform: rotate(180deg);
}

html[dir="rtl"] .mobile-submenu {
    padding-left: 0;
    padding-right: 20px;
}

html[dir="rtl"] .mobile-account-link {
    flex-direction: row-reverse;
}

html[dir="rtl"] .mobile-account-link i {
    margin-right: 0;
    margin-left: 10px;
}

/* ========================================
   Product Filters RTL
   ======================================== */
html[dir="rtl"] .product-filters {
    flex-direction: row-reverse;
}

html[dir="rtl"] .filter-btn {
    flex-direction: row-reverse;
}

html[dir="rtl"] .filter-btn i {
    margin-right: 0;
    margin-left: 8px;
}

/* ========================================
   Modals RTL
   ======================================== */
html[dir="rtl"] .modal-close {
    right: auto;
    left: 15px;
}

html[dir="rtl"] .quick-view-content {
    direction: rtl;
}

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

/* ========================================
   Back to Top RTL
   ======================================== */
html[dir="rtl"] .back-to-top {
    right: auto;
    left: 30px;
}

/* ========================================
   Cookie Notice RTL
   ======================================== */
html[dir="rtl"] .cookie-content {
    flex-direction: row-reverse;
}

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

/* ========================================
   Forms RTL
   ======================================== */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
    direction: rtl;
}

/* Keep email and phone inputs in LTR */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"] {
    direction: ltr;
    text-align: left;
}

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

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

html[dir="rtl"] .btn i {
    margin-right: 0;
    margin-left: 8px;
}

html[dir="rtl"] .btn:hover {
    transform: translateY(-2px);
}

/* ========================================
   Spacing Adjustments RTL
   ======================================== */
html[dir="rtl"] .mr-10 { margin-right: 0; margin-left: 10px; }
html[dir="rtl"] .ml-10 { margin-left: 0; margin-right: 10px; }
html[dir="rtl"] .pr-10 { padding-right: 0; padding-left: 10px; }
html[dir="rtl"] .pl-10 { padding-left: 0; padding-right: 10px; }

html[dir="rtl"] .mr-20 { margin-right: 0; margin-left: 20px; }
html[dir="rtl"] .ml-20 { margin-left: 0; margin-right: 20px; }
html[dir="rtl"] .pr-20 { padding-right: 0; padding-left: 20px; }
html[dir="rtl"] .pl-20 { padding-left: 0; padding-right: 20px; }

/* ========================================
   Icons RTL
   ======================================== */
html[dir="rtl"] .fa-chevron-right:before {
    content: "\f053"; /* Replace with left chevron */
}

html[dir="rtl"] .fa-chevron-left:before {
    content: "\f054"; /* Replace with right chevron */
}

html[dir="rtl"] .fa-arrow-right:before {
    content: "\f060"; /* Replace with left arrow */
}

html[dir="rtl"] .fa-arrow-left:before {
    content: "\f061"; /* Replace with right arrow */
}

/* ========================================
   Arabic Typography
   ======================================== */
html[dir="rtl"] {
    font-family: 'Tajawal', 'Cairo', 'Amiri', sans-serif;
    letter-spacing: 0;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    font-family: 'Cairo', 'Tajawal', serif;
    letter-spacing: 0;
}

/* Adjust line height for Arabic text */
html[dir="rtl"] p,
html[dir="rtl"] li {
    line-height: 1.8;
}

/* ========================================
   Responsive RTL Adjustments
   ======================================== */
@media screen and (max-width: 767px) {
    html[dir="rtl"] .header-actions {
        flex-direction: row-reverse;
    }
    
    html[dir="rtl"] .mobile-menu-toggle {
        margin-left: 0;
        margin-right: auto;
    }
    
    html[dir="rtl"] .cart-sidebar {
        width: 100%;
        left: -100%;
    }
    
    html[dir="rtl"] .cart-sidebar.active {
        left: 0;
    }
}

@media screen and (max-width: 575px) {
    html[dir="rtl"] .hero-buttons {
        flex-direction: column;
    }
    
    html[dir="rtl"] .newsletter-form {
        flex-direction: column;
    }
    
    html[dir="rtl"] .cookie-content {
        flex-direction: column;
    }
    
    /* Mobile footer adjustments */
    html[dir="rtl"] .contact-info {
        text-align: right;
    }
    
    html[dir="rtl"] .payment-icons {
        justify-content: flex-end;
    }
}