/* RTL Styles for Arabic Language */

[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* Assurer que le conteneur a le même padding des deux côtés en RTL */
[dir="rtl"] .container {
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
}

/* Assurer que toutes les sections s'étendent sur toute la largeur en RTL */
[dir="rtl"] .site-header,
[dir="rtl"] .site-main,
[dir="rtl"] .site-footer {
    width: 100%;
    box-sizing: border-box;
}

/* Alignement de la grille de produits en RTL */
[dir="rtl"] .product-grid {
    width: 100%;
    box-sizing: border-box;
}

[dir="rtl"] .section,
[dir="rtl"] .products-first {
    width: 100%;
    box-sizing: border-box;
}

[dir="rtl"] .header-inner {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .header-center-logo {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

[dir="rtl"] .nav {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .lang-switcher {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .hero-content {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .hero-visual {
    order: 2;
}

[dir="rtl"] .hero-actions {
    flex-direction: row-reverse;
}

[dir="rtl"] .hero-highlights {
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
}

[dir="rtl"] .hero-highlights li {
    text-align: right;
    justify-content: flex-end;
    flex-direction: row-reverse;
}

[dir="rtl"] .hero-card {
    text-align: right;
    direction: rtl;
    margin: 0 auto;
}

[dir="rtl"] .badge {
    align-self: flex-end;
}

/* Product detail RTL */
[dir="rtl"] .product-detail {
    display: flex;
    flex-direction: column;
    direction: rtl;
    gap: 24px;
    align-items: stretch;
}

[dir="rtl"] .product-detail-image {
    order: 1;
    animation: fadeInUp 0.8s ease-out;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

[dir="rtl"] .product-detail-info {
    order: 2;
    text-align: right;
    direction: rtl;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: fadeInUp 0.6s ease-out 0.4s both;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

[dir="rtl"] .product-description {
    text-align: right;
    direction: rtl;
    border-left: none;
    border-right: 4px solid #f97316;
    margin-bottom: 24px;
    margin-top: 0;
}

[dir="rtl"] .product-detail-info h1 {
    text-align: right;
    direction: rtl;
    margin-top: 0;
    margin-bottom: 8px;
    width: 100%;
}

[dir="rtl"] .product-detail-info p {
    text-align: right;
    direction: rtl;
    line-height: 1.7;
    color: #4b5563;
    margin: 0;
}

[dir="rtl"] .product-detail-info .price-container {
    text-align: right;
    direction: rtl;
    margin: 0;
    width: 100%;
    justify-content: flex-end;
}

[dir="rtl"] .product-detail-info .price-discounted,
[dir="rtl"] .product-detail-info .price-original {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .product-header {
    text-align: right;
    direction: rtl;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    width: 100%;
}

[dir="rtl"] .product-header h1 {
    text-align: right;
    direction: rtl;
    margin-top: 0;
    margin-bottom: 8px;
    width: 100%;
}

[dir="rtl"] .product-header .price-container {
    text-align: right;
    direction: rtl;
    margin: 0;
    width: 100%;
    justify-content: flex-end;
}

[dir="rtl"] .product-header .price-discounted,
[dir="rtl"] .product-header .price-original {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .product-meta {
    text-align: right;
    direction: rtl;
    padding: 24px;
    margin-bottom: 20px;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}

[dir="rtl"] .product-meta > div {
    text-align: right;
    direction: rtl;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

[dir="rtl"] .form-label {
    text-align: right;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

[dir="rtl"] .label-text {
    order: 1;
}

[dir="rtl"] .label-required {
    order: 2;
    margin-right: 4px;
    margin-left: 0;
}

[dir="rtl"] .color-pill {
    flex-direction: row-reverse;
}

[dir="rtl"] .color-pills {
    justify-content: flex-end;
}

[dir="rtl"] .option-pills {
    justify-content: flex-end;
}

[dir="rtl"] .add-to-cart-form {
    text-align: right;
    direction: rtl;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

[dir="rtl"] .checkout-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}

[dir="rtl"] .footer-content {
    direction: rtl;
}

[dir="rtl"] .footer-section {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .footer-section h3 {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .footer-section p {
    text-align: right;
    direction: rtl;
}

/* Boutons téléphone et email en RTL */
[dir="rtl"] .phone-button,
[dir="rtl"] .email-button {
    flex-direction: row-reverse;
    text-align: right;
    direction: rtl;
    justify-content: flex-end;
    width: fit-content;
    margin-right: 0;
    margin-left: auto;
}

[dir="rtl"] .phone-text,
[dir="rtl"] .email-text {
    direction: ltr;
    unicode-bidi: embed;
}

[dir="rtl"] .phone-icon,
[dir="rtl"] .email-icon {
    order: 2;
}

[dir="rtl"] .cart-actions {
    flex-direction: row-reverse;
}

/* Centrer la barre de catégories en RTL - Solution simple */
[dir="rtl"] .category-tabs-section {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

[dir="rtl"] .category-tabs {
    margin: 0 auto !important;
}

[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
    text-align: right;
}

[dir="rtl"] .product-info-header {
    flex-direction: column;
    align-items: flex-end;
}

[dir="rtl"] .product-categories {
    justify-content: flex-end;
}

[dir="rtl"] .cart-table th,
[dir="rtl"] .cart-table td {
    text-align: right;
}

[dir="rtl"] .cart-table th:last-child,
[dir="rtl"] .cart-table td:last-child {
    text-align: left;
}

[dir="rtl"] .product-description {
    text-align: right;
    direction: rtl;
    border-left: none;
    border-right: 4px solid #f97316;
    padding: 20px;
    margin-top: 0;
    margin-bottom: 24px;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

[dir="rtl"] .product-description p {
    text-align: right;
    direction: rtl;
    line-height: 1.7;
    margin: 0;
    padding: 0;
    color: #4b5563;
}

[dir="rtl"] .product-meta .form-label {
    text-align: right;
    flex-direction: row-reverse;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 8px;
}

[dir="rtl"] .product-meta .option-pills {
    justify-content: flex-end;
    width: 100%;
    gap: 10px;
}

[dir="rtl"] .product-meta .color-pills {
    justify-content: flex-end;
    width: 100%;
    gap: 10px;
}

/* Formulaire de commande intégré RTL */
[dir="rtl"] .order-form-section {
    text-align: right;
    direction: rtl;
    padding: 28px;
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
}

[dir="rtl"] .order-form-title {
    flex-direction: row-reverse;
    text-align: right;
    justify-content: flex-end;
}

[dir="rtl"] .form-icon {
    order: 2;
    margin-right: 0;
    margin-left: 12px;
}

[dir="rtl"] .order-badges {
    justify-content: flex-end;
    flex-direction: row-reverse;
}

[dir="rtl"] .customer-form-fields {
    text-align: right;
    direction: rtl;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

[dir="rtl"] .customer-form-fields .form-group {
    text-align: right;
    direction: rtl;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[dir="rtl"] .customer-form-fields .form-label {
    text-align: right;
    flex-direction: row-reverse;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 0;
}

[dir="rtl"] .customer-form-fields .form-input,
[dir="rtl"] .customer-form-fields .form-textarea {
    text-align: right;
    direction: rtl;
    width: 100%;
}

[dir="rtl"] .customer-form-fields .form-input::placeholder,
[dir="rtl"] .customer-form-fields .form-textarea::placeholder {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .form-note {
    text-align: center;
}

[dir="rtl"] .btn-checkout {
    flex-direction: row-reverse;
}

[dir="rtl"] .btn-checkout .btn-icon {
    order: 2;
}

[dir="rtl"] .btn-checkout .btn-text {
    order: 1;
}

[dir="rtl"] .order-success {
    text-align: right;
}

/* Product detail RTL amélioré */
[dir="rtl"] .product-detail-info {
    text-align: right;
}

[dir="rtl"] .product-header {
    text-align: right;
}

/* Hamburger menu RTL */
[dir="rtl"] .menu-toggle {
    order: -1;
}

/* Menu latéral RTL pour desktop */
@media (min-width: 769px) {
    [dir="rtl"] .nav {
        right: auto;
        left: -100%;
    }

    [dir="rtl"] .nav.active {
        left: 0;
        right: auto;
    }

    [dir="rtl"] .nav a {
        text-align: right;
    }

    [dir="rtl"] .nav .lang-switcher a {
        text-align: center;
    }
}

/* Promo banner RTL */
[dir="rtl"] .promo-banner {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .section-header {
    text-align: right;
    direction: rtl;
}

/* WhatsApp popup RTL */
[dir="rtl"] .whatsapp-float-button {
    left: 20px;
    right: auto;
}

[dir="rtl"] .whatsapp-popup {
    left: 20px;
    right: auto;
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .whatsapp-popup-content {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .whatsapp-popup-close {
    left: 12px;
    right: auto;
}

/* Mobile RTL */
@media (max-width: 768px) {
    [dir="rtl"] .hero {
        padding: 24px 20px;
        text-align: right;
        direction: rtl;
    }

    [dir="rtl"] .product-detail {
        gap: 20px;
    }

    [dir="rtl"] .product-detail-image {
        max-width: 100%;
    }

    [dir="rtl"] .product-description {
        max-width: 100%;
    }

    [dir="rtl"] .product-detail-info {
        max-width: 100%;
    }

    [dir="rtl"] .product-header {
        align-items: flex-start;
    }

    [dir="rtl"] .product-description {
        margin-bottom: 24px;
    }

    [dir="rtl"] .product-meta {
        padding: 16px;
        gap: 16px;
    }

    [dir="rtl"] .order-form-section {
        padding: 20px 16px;
        margin-top: 24px;
    }

    [dir="rtl"] .order-form-title {
        font-size: 1.2rem;
    }

    [dir="rtl"] .order-badges {
        flex-direction: column;
        gap: 8px;
    }

    [dir="rtl"] .whatsapp-float-button {
        left: 16px;
        right: auto;
    }

    [dir="rtl"] .whatsapp-popup {
        left: 16px;
        right: auto;
        width: calc(100% - 32px);
    }

    [dir="rtl"] .phone-button,
    [dir="rtl"] .email-button {
        width: 100%;
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    [dir="rtl"] .product-detail-info h1 {
        font-size: 1.5rem;
    }

    [dir="rtl"] .product-detail-info .price {
        font-size: 1.3rem;
    }

    [dir="rtl"] .product-description {
        padding: 16px;
    }

    [dir="rtl"] .product-meta {
        padding: 12px;
        gap: 12px;
    }

    [dir="rtl"] .order-form-section {
        padding: 16px 12px;
    }
}
