/* ==========================================
   RTL MODE & FOCUS MODE STYLES
   Landing Page Checkout - RTL Natif
   ========================================== */

/* ========== MODE FOCUS - Afficher SEULEMENT #content/.site-content ========== */
html.landing-focus {
    background: white;
    overflow-y: auto;
}

body.landing-focus-mode {
    background: white;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible;
}

/* Masquer l'admin bar WordPress */
.landing-focus-mode #wpadminbar {
    display: none !important;
}

/* Afficher SEULEMENT #content, .site-content, #main avec tout ce qu'il contient */
body.landing-focus-mode #content,
body.landing-focus-mode .site-content,
body.landing-focus-mode #main {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: auto !important;
}

/* Forcer TOUT ce qui est à l'intérieur visible */
body.landing-focus-mode #content *,
body.landing-focus-mode .site-content *,
body.landing-focus-mode #main * {
    visibility: visible !important;
    opacity: 1 !important;
    display: inherit !important;
    position: relative !important;
    z-index: auto !important;
}

/* Le landing container reste visible */
body.landing-focus-mode .landing-checkout-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* ========== RTL NATIVE - Mirroring des Layouts ========== */

[dir="rtl"] .landing-checkout-container {
    direction: rtl;
    text-align: right;
}

/* Inverser la grille produit pour RTL */
[dir="rtl"] .landing-product-display {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;
}

/* Inverser l'ordre visuel des colonnes */
[dir="rtl"] .product-image-section {
    order: 2;
}

[dir="rtl"] .product-details {
    order: 1;
    padding-right: 40px;
    padding-left: 0;
}

/* ========== FORMULAIRE RTL ========== */

[dir="rtl"] .shipping-fields {
    direction: rtl;
    text-align: right;
}

/* Inverser padding/margin pour inputs RTL */
[dir="rtl"] .shipping-field {
    text-align: right;
    padding: 14px 16px;
    direction: rtl;
}

[dir="rtl"] .field-group label {
    text-align: right;
    padding-right: 2px;
    padding-left: 0;
}

[dir="rtl"] .field-hint {
    text-align: right;
    display: block;
    margin-top: 5px;
}

/* ========== SÉLECTEURS RTL ========== */

[dir="rtl"] .color-swatches {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

[dir="rtl"] .size-options {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* Inverser direction des checkboxes/radios RTL */
[dir="rtl"] .shipping-method-option {
    flex-direction: row-reverse;
}

[dir="rtl"] .shipping-method-option input[type="radio"] {
    margin-right: 0;
    margin-left: 12px;
}

[dir="rtl"] .shipping-method-cost {
    margin-left: 0;
    margin-right: 15px;
}

/* ========== PANIER COMPACT RTL ========== */

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

[dir="rtl"] .cart-item-image {
    margin-right: 0;
    margin-left: 10px;
}

[dir="rtl"] .cart-item-remove {
    margin-left: 0;
    margin-right: auto;
}

/* ========== TEXTE RTL - Justification ========== */

[dir="rtl"] .landing-offer-header {
    text-align: center;
}

[dir="rtl"] .product-name,
[dir="rtl"] .offer-title {
    text-align: right;
}

[dir="rtl"] .variation-price,
[dir="rtl"] .stock-status {
    text-align: right;
}

/* ========== BOUTONS RTL ========== */

[dir="rtl"] .add-to-cart-btn,
[dir="rtl"] .checkout-btn,
[dir="rtl"] .sticky-cta-button {
    direction: rtl;
}

/* ========== ANIMATION RTL ========== */

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

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

[dir="rtl"] .landing-notification {
    animation: slideInLeftRTL 0.4s ease;
}

/* ========== ESPACEMENT RTL - Inverser left/right ========== */

[dir="rtl"] {
    --margin-start: margin-right;
    --margin-end: margin-left;
    --padding-start: padding-right;
    --padding-end: padding-left;
}

/* ========== MOBILE OPTIMISATION RTL ========== */

@media (max-width: 768px) {
    [dir="rtl"] .landing-product-display {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    [dir="rtl"] .product-image-section {
        order: 1;
        position: static;
    }
    
    [dir="rtl"] .product-details {
        order: 2;
        padding-right: 0;
    }
    
    /* Assurer que le formulaire occupe toute la largeur */
    [dir="rtl"] .shipping-fields {
        width: 100%;
    }
    
    /* Inputs 50px pour mobile friendly */
    [dir="rtl"] .shipping-field {
        min-height: 50px;
        font-size: 16px; /* Empêcher zoom sur iOS */
    }
}

/* ========== STICKY CTA RTL ========== */

[dir="rtl"] .sticky-cta-bar {
    direction: rtl;
    text-align: right;
}

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

[dir="rtl"] .sticky-cta-total {
    margin-right: auto;
    margin-left: 0;
}

[dir="rtl"] .sticky-cta-button {
    margin-left: 10px;
    margin-right: 0;
}

/* ========== COMPATIBILITÉ THÈMES MAJEURS RTL ========== */

/* Astra RTL */
[dir="rtl"] .ast-container {
    direction: rtl;
}

[dir="rtl"] .content-align-wide {
    direction: rtl;
}

/* OceanWP RTL */
[dir="rtl"] .ocean-container {
    direction: rtl;
}

[dir="rtl"] .container {
    direction: rtl;
}

/* GeneratePress RTL */
[dir="rtl"] .inside-container {
    direction: rtl;
}

/* ========== CORRECTION LAYOUT GRILLE WILAYA/COMMUNE ========== */

[dir="rtl"] .location-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 100%;
}

@media (max-width: 600px) {
    [dir="rtl"] .location-fields {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* ========== TEXTE CONDITIONNEL RTL ========== */

[lang="ar"] {
    font-family: 'Segoe UI', 'Arial Unicode MS', Arial, sans-serif;
    letter-spacing: 0.5px;
}

[lang="ar"] input::placeholder,
[lang="ar"] select option,
[lang="ar"] textarea::placeholder {
    font-family: 'Segoe UI', 'Arial Unicode MS', Arial, sans-serif;
}

/* ========== Z-INDEX RTL STICKY CTA ========== */

[dir="rtl"] .sticky-cta-bar {
    z-index: 9999;
}