/* ======================================
   LTR Direction Overrides
   Applied when html[dir="ltr"]
   ====================================== */

/* Base direction and alignment */
[dir="ltr"] {
    text-align: left;
}

[dir="ltr"] body {
    direction: ltr;
}

/* Reset space-x-reverse (used for RTL flex spacing) */
[dir="ltr"] .space-x-reverse > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0 !important;
}

/* Flip text alignment */
[dir="ltr"] .text-right {
    text-align: left !important;
}

/* Swap margin-right to margin-left (common inline styles) */
[dir="ltr"] [style*="margin-right:14px"] {
    margin-right: 0 !important;
    margin-left: 14px !important;
}

[dir="ltr"] [style*="margin-left:14px"] {
    margin-left: 0 !important;
    margin-right: 14px !important;
}

/* Flip common margin utilities */
[dir="ltr"] .mr-auto { margin-right: unset !important; margin-left: auto !important; }
[dir="ltr"] .ml-auto { margin-left: unset !important; margin-right: auto !important; }
[dir="ltr"] .mr-1 { margin-right: unset !important; margin-left: 0.25rem !important; }
[dir="ltr"] .ml-1 { margin-left: unset !important; margin-right: 0.25rem !important; }
[dir="ltr"] .mr-2 { margin-right: unset !important; margin-left: 0.5rem !important; }
[dir="ltr"] .ml-2 { margin-left: unset !important; margin-right: 0.5rem !important; }
[dir="ltr"] .mr-3 { margin-right: unset !important; margin-left: 0.75rem !important; }
[dir="ltr"] .ml-3 { margin-left: unset !important; margin-right: 0.75rem !important; }
[dir="ltr"] .mr-4 { margin-right: unset !important; margin-left: 1rem !important; }
[dir="ltr"] .ml-4 { margin-left: unset !important; margin-right: 1rem !important; }

/* Flip common padding utilities */
[dir="ltr"] .pr-2 { padding-right: unset !important; padding-left: 0.5rem !important; }
[dir="ltr"] .pl-2 { padding-left: unset !important; padding-right: 0.5rem !important; }
[dir="ltr"] .pr-4 { padding-right: unset !important; padding-left: 1rem !important; }
[dir="ltr"] .pl-4 { padding-left: unset !important; padding-right: 1rem !important; }
[dir="ltr"] .pr-6 { padding-right: unset !important; padding-left: 1.5rem !important; }
[dir="ltr"] .pl-6 { padding-left: unset !important; padding-right: 1.5rem !important; }

/* Flip border-radius for rounded corners */
[dir="ltr"] .rounded-r-xl { border-radius: 0 !important; border-top-left-radius: 0.75rem !important; border-bottom-left-radius: 0.75rem !important; }
[dir="ltr"] .rounded-l-xl { border-radius: 0 !important; border-top-right-radius: 0.75rem !important; border-bottom-right-radius: 0.75rem !important; }

/* Flip positioning */
[dir="ltr"] .right-0:not(.left-0) { right: unset !important; left: 0 !important; }
[dir="ltr"] .left-0:not(.right-0) { left: unset !important; right: 0 !important; }
[dir="ltr"] .right-4:not(.left-4) { right: unset !important; left: 1rem !important; }
[dir="ltr"] .left-4:not(.right-4) { left: unset !important; right: 1rem !important; }

/* Flip flex direction for navigation items */
[dir="ltr"] .flex-row-reverse {
    flex-direction: row !important;
}

/* Navbar specific: flip the logo and nav order */
[dir="ltr"] nav .flex.items-center.justify-between {
    flex-direction: row !important;
}

/* Footer: flip text alignment */
[dir="ltr"] footer .text-right {
    text-align: left !important;
}

/* Flip border-right to border-left */
[dir="ltr"] .border-r-2 {
    border-right-width: 0 !important;
    border-left-width: 2px !important;
}

[dir="ltr"] .border-l-2 {
    border-left-width: 0 !important;
    border-right-width: 2px !important;
}

/* Icon spacing - common pattern: icon with ml-1/ml-2 in RTL needs mr-1/mr-2 in LTR */
[dir="ltr"] i.ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
[dir="ltr"] i.ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
[dir="ltr"] i.mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
[dir="ltr"] i.mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }

/* Search input - flip the icon position */
[dir="ltr"] .search-icon-right {
    right: unset !important;
    left: 0 !important;
}

/* Flip translate-x for decorative shapes */
[dir="ltr"] .translate-x-1\/3 { --tw-translate-x: -33.333333% !important; }
[dir="ltr"] .-translate-x-1\/3 { --tw-translate-x: 33.333333% !important; }

/* Dropdown menus: flip position */
[dir="ltr"] .dropdown-menu {
    right: unset !important;
    left: 0 !important;
}

/* Gap spacing is direction-independent, so no changes needed */

/* Smooth transition for direction change */
html {
    transition: direction 0s;
}

html * {
    transition-property: margin, padding, border-radius, left, right;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

/* Override transition for elements that shouldn't animate */
html img, html svg, html i, html .counter {
    transition-property: none !important;
}

/* ======================================
   Additional LTR overrides for Account
   and bilingual pages
   ====================================== */

/* Flip border-l-4 to border-r-4 in LTR */
[dir="ltr"] .border-l-4 {
    border-left-width: 0 !important;
    border-right-width: 4px !important;
}

[dir="ltr"] .border-r-4 {
    border-right-width: 0 !important;
    border-left-width: 4px !important;
}

/* Flip rounded-r-xl to rounded-l-xl in LTR */
[dir="ltr"] .rounded-r-xl {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 0.75rem !important;
    border-bottom-left-radius: 0.75rem !important;
}

[dir="ltr"] .rounded-l-xl {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 0.75rem !important;
    border-bottom-right-radius: 0.75rem !important;
}

/* LTR text alignment for lists */
[dir="ltr"] .text-right.list-inside,
[dir="ltr"] ul.text-right {
    text-align: left !important;
}

/* LTR: flip left/right positioning for password toggle buttons */
[dir="ltr"] .relative button.absolute.left-3 {
    left: unset !important;
    right: 0.75rem !important;
}

[dir="ltr"] .relative button.absolute.left-4 {
    left: unset !important;
    right: 1rem !important;
}

/* LTR: flip pr-10 for inputs with toggle buttons */
[dir="ltr"] input.pr-10 {
    padding-right: unset !important;
    padding-left: 2.5rem !important;
}

/* LTR: flip absolute positioned badges and icons */
[dir="ltr"] .absolute.top-4.left-4 {
    left: unset !important;
    right: 1rem !important;
}

[dir="ltr"] .absolute.top-4.right-4 {
    right: unset !important;
    left: 1rem !important;
}

/* LTR: flip right-6 and left-6 */
[dir="ltr"] .right-6:not(.left-6) { right: unset !important; left: 1.5rem !important; }
[dir="ltr"] .left-6:not(.right-6) { left: unset !important; right: 1.5rem !important; }

/* LTR: flip font to Inter/system for English */
[dir="ltr"] body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
}

/* LTR: ensure gradients flow correctly */
[dir="ltr"] .bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
}

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

/* LTR: flip space-x for flex containers */
[dir="ltr"] .space-x-reverse > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0 !important;
}

/* LTR: search icon flip */
[dir="ltr"] .fa-search.absolute.left-6 {
    left: unset !important;
    right: 1.5rem !important;
}

/* LTR: flip arrow icon direction for back links */
[dir="ltr"] .fa-arrow-right.group-hover\:-translate-x-1 {
    transform: scaleX(-1);
}

/* LTR: fix flex items-start for checkbox+label */
[dir="ltr"] .flex.items-start input[type="checkbox"] {
    margin-left: 0 !important;
    margin-right: 0.75rem !important;
}

/* LTR: fix gap direction in flex containers */
[dir="ltr"] .flex.items-center.gap-2 {
    flex-direction: row !important;
}

/* LTR: flip mr-auto in course cards */
[dir="ltr"] span.mr-auto {
    margin-right: unset !important;
    margin-left: auto !important;
}