/* 📄 /assets/css/style-rtl.css */
/* * Ce fichier est inclus uniquement lorsque la page est en mode Right-to-Left (dir="rtl"),
 * notamment pour la langue arabe (ar). Il est prioritaire sur style.css.
 */

/* ========================
   1. Général et Polices
   ======================== */

body {
    /* Assure que l'alignement par défaut est à droite */
    text-align: right;
    /* Inclure une police adaptée à l'arabe. 
       Ex: Noto Sans Arabic ou Tajawal (si déjà chargé dans header.php) */
    font-family: 'Noto Sans Arabic', 'Tajawal', 'Inter', 'Segoe UI', Arial, sans-serif;
}

/* Forcer l'alignement du texte dans les inputs à droite */
input[type="text"], 
textarea, 
select {
    text-align: right;
}
/* Annuler l'alignement spécifique des inputs numériques si besoin (souvent LTR) */
input[type="number"] {
    text-align: left;
}


/* ========================
   2. Utilitaires de Marges (Inversion)
   ======================== */

/* Le LTR (style.css) a : 
   .ms-2 { margin-right: 0.75rem !important; } 
   .me-2 { margin-left: 0.75rem !important; } 
   
   En RTL, nous inversons la logique.
*/

/* ms-2 (margin-start) devient margin-left */
.ms-2 { margin-left: var(--padding-ms-2) !important; margin-right: 0 !important; } 
/* me-2 (margin-end) devient margin-right */
.me-2 { margin-right: var(--padding-me-2) !important; margin-left: 0 !important; }


/* ========================
   3. Header et Navigation (Inversion Flexbox)
   ======================== */

.soguify-header {
    /* Inverser l'ordre des sections (left, center, right) */
    flex-direction: row-reverse;
}

/* Section de recherche (center) */
.soguify-header .header-center {
    /* Maintenir les marges pour Flexbox */
    margin: 0 20px; 
}


/* --- Boutons d'icônes et Badges --- */

/* Déplacer l'alignement général des icônes à gauche si le contexte l'exige */
.soguify-header .header-right {
    /* Inverser le gap pour le RTL si nécessaire, ou le laisser par défaut (gap est symétrique) */
    gap: 14px; 
}

/* Inversion du badge de notification sur les icônes */
.icon-btn .badge {
    top: -6px;
    right: unset; /* Annuler right: -10px; du LTR */
    left: -10px; /* Placer le badge à gauche de l'icône */
}

/* --- Barre de recherche (si l'icône de recherche est à droite de l'input) --- */
.soguify-header .search-form {
    /* Le formulaire peut rester LTR à l'intérieur s'il s'agit juste d'un champ + bouton,
       mais on doit inverser le style des coins/bordures si c'est pertinent. */
    border-radius: 12px; /* Reste symétrique */
}
/* Le bouton de recherche est à droite de l'input en LTR, il doit rester à l'extrémité
   de son conteneur Flexbox parent (header-center). L'inversion par `flex-direction: row-reverse;` dans 
   .search-form pourrait être nécessaire si le bouton et l'input étaient inversés. Ici, le Flexbox 
   par défaut fonctionne car l'ordre HTML est correct. */


/* --- Menu déroulant (Dropdown) --- */

.dropdown-content {
    /* Le menu doit s'ouvrir vers la gauche du bouton sur RTL */
    left: unset; /* Annuler toute valeur 'left' */
    right: 0; /* Aligner le bord droit du menu avec le bord droit du conteneur */
    text-align: right;
}


/* ========================
   4. Mobile (Inversion Flexbox)
   ======================== */

@media (max-width: 767px) {
    /* Le header devient un conteneur simple avec des éléments positionnés */
    .soguify-header {
        /* L'ordre général a été inversé : 
           - hamburger (gauche)
           - logo (centre)
           - panier (droite) */
    }

    /* Inversion de la position des éléments positionnés */
    /* LTR: hamburger (left: 20px), panier (right: 40px) */

    /* Le hamburger doit aller à droite pour le menu mobile RTL */
    .hamburger-menu {
        left: unset !important; /* Annuler left: 20px */
        right: 20px !important; /* Placer le menu à droite */
    }

    /* Le panier doit aller à gauche */
    .soguify-header .header-right {
        right: unset !important; /* Annuler right: 40px */
        left: 40px !important; /* Placer le panier à gauche */
    }
    
    /* Le menu mobile doit s'ouvrir à droite */
    .mobile-nav {
        left: unset; /* Annuler left: 10px */
        right: 10px; /* Aligner le menu à droite */
        text-align: right;
    }
    .mobile-nav a {
        text-align: right; /* Assurer que les liens du menu sont alignés à droite */
    }
}