/**
 * RTL/LTR Direction Support Utilities
 * Provides automatic directional flipping for bilingual support
 */

/* ============================================
   Base Direction Selectors
============================================ */

/* Text alignment based on direction */
[dir="rtl"] .rtl\:text-right {
    text-align: right;
}

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

[dir="ltr"] .ltr\:text-right {
    text-align: right;
}

[dir="ltr"] .ltr\:text-left {
    text-align: left;
}

/* ============================================
   Spacing Utilities (Margin/Padding Start/End)
============================================ */

/* RTL: start = right, end = left */
[dir="rtl"] .ms-1 {
    margin-right: 0.25rem;
}

[dir="rtl"] .ms-2 {
    margin-right: 0.5rem;
}

[dir="rtl"] .ms-3 {
    margin-right: 0.75rem;
}

[dir="rtl"] .ms-4 {
    margin-right: 1rem;
}

[dir="rtl"] .ms-6 {
    margin-right: 1.5rem;
}

[dir="rtl"] .me-1 {
    margin-left: 0.25rem;
}

[dir="rtl"] .me-2 {
    margin-left: 0.5rem;
}

[dir="rtl"] .me-3 {
    margin-left: 0.75rem;
}

[dir="rtl"] .me-4 {
    margin-left: 1rem;
}

[dir="rtl"] .me-6 {
    margin-left: 1.5rem;
}

[dir="rtl"] .ps-1 {
    padding-right: 0.25rem;
}

[dir="rtl"] .ps-2 {
    padding-right: 0.5rem;
}

[dir="rtl"] .ps-3 {
    padding-right: 0.75rem;
}

[dir="rtl"] .ps-4 {
    padding-right: 1rem;
}

[dir="rtl"] .ps-6 {
    padding-right: 1.5rem;
}

[dir="rtl"] .pe-1 {
    padding-left: 0.25rem;
}

[dir="rtl"] .pe-2 {
    padding-left: 0.5rem;
}

[dir="rtl"] .pe-3 {
    padding-left: 0.75rem;
}

[dir="rtl"] .pe-4 {
    padding-left: 1rem;
}

[dir="rtl"] .pe-6 {
    padding-left: 1.5rem;
}

/* LTR: start = left, end = right */
[dir="ltr"] .ms-1 {
    margin-left: 0.25rem;
}

[dir="ltr"] .ms-2 {
    margin-left: 0.5rem;
}

[dir="ltr"] .ms-3 {
    margin-left: 0.75rem;
}

[dir="ltr"] .ms-4 {
    margin-left: 1rem;
}

[dir="ltr"] .ms-6 {
    margin-left: 1.5rem;
}

[dir="ltr"] .me-1 {
    margin-right: 0.25rem;
}

[dir="ltr"] .me-2 {
    margin-right: 0.5rem;
}

[dir="ltr"] .me-3 {
    margin-right: 0.75rem;
}

[dir="ltr"] .me-4 {
    margin-right: 1rem;
}

[dir="ltr"] .me-6 {
    margin-right: 1.5rem;
}

[dir="ltr"] .ps-1 {
    padding-left: 0.25rem;
}

[dir="ltr"] .ps-2 {
    padding-left: 0.5rem;
}

[dir="ltr"] .ps-3 {
    padding-left: 0.75rem;
}

[dir="ltr"] .ps-4 {
    padding-left: 1rem;
}

[dir="ltr"] .ps-6 {
    padding-left: 1.5rem;
}

[dir="ltr"] .pe-1 {
    padding-right: 0.25rem;
}

[dir="ltr"] .pe-2 {
    padding-right: 0.5rem;
}

[dir="ltr"] .pe-3 {
    padding-right: 0.75rem;
}

[dir="ltr"] .pe-4 {
    padding-right: 1rem;
}

[dir="ltr"] .pe-6 {
    padding-right: 1.5rem;
}

/* ============================================
   Positioning Utilities
============================================ */

/* RTL: start = right, end = left */
[dir="rtl"] .start-0 {
    right: 0;
    left: auto;
}

[dir="rtl"] .start-1 {
    right: 0.25rem;
    left: auto;
}

[dir="rtl"] .start-2 {
    right: 0.5rem;
    left: auto;
}

[dir="rtl"] .start-4 {
    right: 1rem;
    left: auto;
}

[dir="rtl"] .start-6 {
    right: 1.5rem;
    left: auto;
}

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

[dir="rtl"] .end-1 {
    left: 0.25rem;
    right: auto;
}

[dir="rtl"] .end-2 {
    left: 0.5rem;
    right: auto;
}

[dir="rtl"] .end-4 {
    left: 1rem;
    right: auto;
}

[dir="rtl"] .end-6 {
    left: 1.5rem;
    right: auto;
}

/* LTR: start = left, end = right */
[dir="ltr"] .start-0 {
    left: 0;
    right: auto;
}

[dir="ltr"] .start-1 {
    left: 0.25rem;
    right: auto;
}

[dir="ltr"] .start-2 {
    left: 0.5rem;
    right: auto;
}

[dir="ltr"] .start-4 {
    left: 1rem;
    right: auto;
}

[dir="ltr"] .start-6 {
    left: 1.5rem;
    right: auto;
}

[dir="ltr"] .end-0 {
    right: 0;
    left: auto;
}

[dir="ltr"] .end-1 {
    right: 0.25rem;
    left: auto;
}

[dir="ltr"] .end-2 {
    right: 0.5rem;
    left: auto;
}

[dir="ltr"] .end-4 {
    right: 1rem;
    left: auto;
}

[dir="ltr"] .end-6 {
    right: 1.5rem;
    left: auto;
}

/* ============================================
   Border Utilities
============================================ */

[dir="rtl"] .border-s {
    border-right-width: 1px;
}

[dir="rtl"] .border-s-2 {
    border-right-width: 2px;
}

[dir="rtl"] .border-s-4 {
    border-right-width: 4px;
}

[dir="rtl"] .border-e {
    border-left-width: 1px;
}

[dir="rtl"] .border-e-2 {
    border-left-width: 2px;
}

[dir="rtl"] .border-e-4 {
    border-left-width: 4px;
}

[dir="ltr"] .border-s {
    border-left-width: 1px;
}

[dir="ltr"] .border-s-2 {
    border-left-width: 2px;
}

[dir="ltr"] .border-s-4 {
    border-left-width: 4px;
}

[dir="ltr"] .border-e {
    border-right-width: 1px;
}

[dir="ltr"] .border-e-2 {
    border-right-width: 2px;
}

[dir="ltr"] .border-e-4 {
    border-right-width: 4px;
}

[dir="rtl"] .border-s-8 {
    border-right-width: 8px;
}

[dir="ltr"] .border-s-8 {
    border-left-width: 8px;
}

/* ============================================
   Arrow/Icon Rotation
============================================ */

/* Flip horizontal arrows for RTL */
[dir="rtl"] .rtl\:rotate-180 {
    transform: rotate(180deg);
}

[dir="rtl"] .rtl\:-scale-x-100 {
    transform: scaleX(-1);
}

/* ============================================
   Flexbox Direction Utilities
============================================ */

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

[dir="ltr"] .ltr\:flex-row-reverse {
    flex-direction: row-reverse;
}

/* ============================================
   Float Utilities
============================================ */

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

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

[dir="ltr"] .float-start {
    float: left;
}

[dir="ltr"] .float-end {
    float: right;
}

/* ============================================
   Rounded Corner Utilities
============================================ */

[dir="rtl"] .rounded-s {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

[dir="rtl"] .rounded-s-lg {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

[dir="rtl"] .rounded-s-xl {
    border-top-right-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

[dir="rtl"] .rounded-s-2xl {
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

[dir="rtl"] .rounded-e {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

[dir="rtl"] .rounded-e-lg {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

[dir="rtl"] .rounded-e-xl {
    border-top-left-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
}

[dir="rtl"] .rounded-e-2xl {
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

[dir="ltr"] .rounded-s {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

[dir="ltr"] .rounded-s-lg {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

[dir="ltr"] .rounded-s-xl {
    border-top-left-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
}

[dir="ltr"] .rounded-s-2xl {
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

[dir="ltr"] .rounded-e {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

[dir="ltr"] .rounded-e-lg {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

[dir="ltr"] .rounded-e-xl {
    border-top-right-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

[dir="ltr"] .rounded-e-2xl {
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

/* ============================================
   Gradient Direction for RTL
============================================ */

[dir="rtl"] .bg-gradient-to-r {
    background-image: linear-gradient(to left, var(--tw-gradient-stops));
}

[dir="rtl"] .bg-gradient-to-l {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

/* ============================================
   Font Family Per Language
============================================ */

[lang="ar"] {
    font-family: 'Cairo', 'Tajawal', 'Noto Sans Arabic', sans-serif;
}

[lang="en"] {
    font-family: 'Inter', 'Poppins', 'Outfit', sans-serif;
}