/* ============================================
   Automatic RTL/LTR Support Based on HTML dir Attribute
   ============================================
   This CSS file automatically handles LTR/RTL swapping
   based on the HTML dir attribute, eliminating the need
   for conditional classes in Razor views.
   ============================================ */

/* ============================================
   Text Alignment
   ============================================ */
[dir="ltr"] {
    text-align: left;
    direction: ltr;
}

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

/* Auto-align text based on direction */
[dir="ltr"] .text-auto,
[dir="ltr"] [class*="text-auto"] {
    text-align: left !important;
}

[dir="rtl"] .text-auto,
[dir="rtl"] [class*="text-auto"] {
    text-align: right !important;
}

/* ============================================
   Flexbox Direction
   ============================================ */
[dir="ltr"] .flex-auto,
[dir="ltr"] [class*="flex-auto"] {
    flex-direction: row;
}

[dir="rtl"] .flex-auto,
[dir="rtl"] [class*="flex-auto"] {
    flex-direction: row-reverse;
}

/* Auto-reverse flex items */
[dir="ltr"] .flex-reverse-auto {
    flex-direction: row;
}

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

/* ============================================
   Positioning (left/right swap)
   ============================================ */
[dir="ltr"] .pos-left-auto {
    left: auto;
    right: 0;
}

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

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

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

/* ============================================
   Margins and Padding (logical properties)
   ============================================ */
[dir="ltr"] .margin-start-auto {
    margin-left: auto;
    margin-right: 0;
}

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

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

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

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

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

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

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

/* ============================================
   Transform and Translate
   ============================================ */
[dir="ltr"] .translate-x-auto {
    transform: translateX(0);
}

[dir="rtl"] .translate-x-auto {
    transform: translateX(0);
}

[dir="ltr"] .translate-x-positive-auto {
    transform: translateX(0.5rem);
}

[dir="rtl"] .translate-x-positive-auto {
    transform: translateX(-0.5rem);
}

[dir="ltr"] .translate-x-negative-auto {
    transform: translateX(-0.5rem);
}

[dir="rtl"] .translate-x-negative-auto {
    transform: translateX(0.5rem);
}

/* ============================================
   Border Radius (swap left/right corners)
   ============================================ */
[dir="ltr"] .rounded-start-auto {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0;
}

[dir="rtl"] .rounded-start-auto {
    border-top-left-radius: 0;
    border-top-right-radius: 0.5rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0.5rem;
}

[dir="ltr"] .rounded-end-auto {
    border-top-left-radius: 0;
    border-top-right-radius: 0.5rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0.5rem;
}

[dir="rtl"] .rounded-end-auto {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0;
}

/* ============================================
   Common Utility Classes
   ============================================ */

/* Auto-align content */
[dir="ltr"] .content-auto {
    text-align: left;
    justify-content: flex-start;
}

[dir="rtl"] .content-auto {
    text-align: right;
    justify-content: flex-end;
}

/* Auto-align buttons */
[dir="ltr"] .btn-auto {
    text-align: left;
    justify-content: flex-start;
}

[dir="rtl"] .btn-auto {
    text-align: right;
    justify-content: flex-end;
}

/* Auto-align badges */
[dir="ltr"] .badge-auto {
    text-align: left;
}

[dir="rtl"] .badge-auto {
    text-align: right;
}

/* ============================================
   Override Tailwind utilities for RTL
   ============================================ */
[dir="rtl"] .text-left {
    text-align: right !important;
}

[dir="rtl"] .text-right {
    text-align: left !important;
}

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

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

/* ============================================
   Flex justify-content
   ============================================ */
[dir="rtl"] .justify-start {
    justify-content: flex-end !important;
}

[dir="rtl"] .justify-end {
    justify-content: flex-start !important;
}

[dir="ltr"] .justify-start {
    justify-content: flex-start !important;
}

[dir="ltr"] .justify-end {
    justify-content: flex-end !important;
}

/* ============================================
   Absolute positioning helpers
   ============================================ */
[dir="ltr"] .absolute-left-auto {
    left: 0;
    right: auto;
}

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

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

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

/* ============================================
   Icon and Arrow Direction
   ============================================ */
[dir="ltr"] .arrow-left-auto::before,
[dir="ltr"] .arrow-left-auto::after {
    content: "←";
}

[dir="rtl"] .arrow-left-auto::before,
[dir="rtl"] .arrow-left-auto::after {
    content: "→";
}

[dir="ltr"] .arrow-right-auto::before,
[dir="ltr"] .arrow-right-auto::after {
    content: "→";
}

[dir="rtl"] .arrow-right-auto::before,
[dir="rtl"] .arrow-right-auto::after {
    content: "←";
}

/* ============================================
   Service Cards Auto-Alignment
   ============================================ */
[dir="ltr"] [data-uid="Wsd2StElkyqZVDeQ"] {
    text-align: left !important;
}

[dir="rtl"] [data-uid="Wsd2StElkyqZVDeQ"] {
    text-align: right !important;
}

[dir="ltr"] [data-uid="Wsd2StElkyqZVDeQ"] h3,
[dir="ltr"] [data-uid="Wsd2StElkyqZVDeQ"] p {
    text-align: left !important;
}

[dir="rtl"] [data-uid="Wsd2StElkyqZVDeQ"] h3,
[dir="rtl"] [data-uid="Wsd2StElkyqZVDeQ"] p {
    text-align: right !important;
}

[dir="ltr"] [data-uid="Rj3iJIgSM9vQzrNq"] {
    justify-content: flex-start !important;
    flex-direction: row-reverse;
}

[dir="rtl"] [data-uid="Rj3iJIgSM9vQzrNq"] {
    justify-content: flex-end !important;
    flex-direction: row-reverse;
}

/* ============================================
   Badge Auto-Alignment
   ============================================ */
[dir="ltr"] [data-uid="mabX7amgQjriVHwB"] {
    text-align: left !important;
}

[dir="rtl"] [data-uid="mabX7amgQjriVHwB"] {
    text-align: right !important;
}

[dir="ltr"] [data-uid="mabX7amgQjriVHwB"] span {
    flex-direction: row;
}

[dir="rtl"] [data-uid="mabX7amgQjriVHwB"] span {
    flex-direction: row-reverse;
}