body {
    direction : rtl;
    text-align : right;
    }

.right-0
{
    left: 0 !important;
    right:auto !important;
}

.oblique {
    transform: skewX(-10deg) !important;
    overflow: hidden;
    width: 60% ;
    left: -10rem !important;
    right: auto !important;
    border-bottom-right-radius: 0.75rem !important;
}

/* Glow Theme RTL Specific Styles */
html[dir="rtl"] #productModal {
    direction: rtl;
}

/* Fix Flowbite modal for RTL */
html[dir="rtl"] .fixed.inset-0 {
    right: 0;
    left: 0;
}

/* Center modal content properly */
html[dir="rtl"] #productModal > div {
    margin-left: auto;
    margin-right: auto;
}

/* Fix close button position in RTL */
html[dir="rtl"] #productModal button[onclick*="productModal.toggle()"] {
    right: auto !important;
    left: 1rem !important;
}

/* RTL text alignment in modal */
html[dir="rtl"] #productModal p,
html[dir="rtl"] #productModal label,
html[dir="rtl"] #productModal h1,
html[dir="rtl"] #productModal h2,
html[dir="rtl"] #productModal h3,
html[dir="rtl"] #productModal h4,
html[dir="rtl"] #productModal h5,
html[dir="rtl"] #productModal h6 {
    text-align: right !important;
}

/* Fix checkboxes in RTL */
html[dir="rtl"] .custom-control {
    padding-right: 1.5rem;
    padding-left: 0;
}

html[dir="rtl"] .custom-control-label {
    margin-right: 0;
    margin-left: 0;
}

html[dir="rtl"] .custom-control-label::before,
html[dir="rtl"] .custom-control-label::after {
    right: -1.5rem;
    left: auto;
}

/* Fix variant buttons in RTL */
html[dir="rtl"] #variants-area-inside .btn-group {
    flex-direction: row !important;
}

/* Fix Add to Cart button alignment */
html[dir="rtl"] .quantity-btn {
    text-align: right;
}

/* Ensure modal is properly centered on all screens */
@media (min-width: 768px) {
    html[dir="rtl"] #productModal:not(.hidden) {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* SIMPLE RTL Modal Fix - NO COMPLEX Z-INDEX */
html[dir="rtl"] #productModal:not(.hidden),
html[lang="ar"] #productModal:not(.hidden) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 50 !important; /* Simple z-index matching Tailwind */
    padding: 1rem !important;
}

html[dir="rtl"] #productModal > div,
html[lang="ar"] #productModal > div {
    position: relative !important;
    width: 100% !important;
    max-width: 28rem !important; /* 448px */
    margin: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
}

/* Fix close button for RTL */
html[dir="rtl"] #productModal button[onclick*="toggle"],
html[lang="ar"] #productModal button[onclick*="toggle"] {
    position: absolute !important;
    top: 1rem !important;
    left: 1rem !important;
    right: auto !important;
}

/* Mobile specific RTL modal fixes */
@media (max-width: 767px) {
    html[dir="rtl"] #productModal:not(.hidden),
    html[lang="ar"] #productModal:not(.hidden) {
        padding: 0.5rem !important;
    }
    
    html[dir="rtl"] #productModal > div,
    html[lang="ar"] #productModal > div {
        max-width: calc(100% - 1rem) !important;
        max-height: calc(100vh - 2rem) !important;
    }
}

/* Basic navigation adjustments when modal is open */
html[dir="rtl"] body:has(#productModal:not(.hidden)) .glow-mobile-nav,
html[dir="rtl"] body:has(#productModal:not(.hidden)) .tabbable.sticky,
html[dir="rtl"] body:has(#productModal:not(.hidden)) #glow-mobile-categories {
    z-index: 40 !important;
    opacity: 0.8 !important;
}

/* Fallback for browsers that don't support :has() */
html[dir="rtl"] body.modal-open .glow-mobile-nav,
html[dir="rtl"] body.modal-open .tabbable.sticky,
html[dir="rtl"] body.modal-open #glow-mobile-categories {
    z-index: 40 !important;
    opacity: 0.8 !important;
}