/**
 * RTL (Right-to-Left) Styles for Arabic Store
 * Maintains EXACT same UI appearance - only text direction changes
 */

/* RTL Base Styles - Only for text direction, NOT layout */
html[dir="rtl"],
body[dir="rtl"] {
    direction: rtl;
}

/* Keep ALL layout elements exactly the same */
html[dir="rtl"] .list--horizontal,
body[dir="rtl"] .list--horizontal {
    flex-direction: row !important; /* Keep same direction */
}

html[dir="rtl"] .list__item--right,
body[dir="rtl"] .list__item--right {
    margin-left: auto !important; /* Keep same margin */
    margin-right: 0 !important;
}

html[dir="rtl"] .list__item--reverse,
body[dir="rtl"] .list__item--reverse {
    flex-direction: row-reverse !important; /* Keep same as LTR */
}

/* Header container - keep layout same, only text direction */
html[dir="rtl"] .header__container,
body[dir="rtl"] .header__container {
    direction: rtl; /* Only for text */
}

/* Dropdowns - keep exact same positioning */
html[dir="rtl"] .dropdown--right,
body[dir="rtl"] .dropdown--right {
    left: auto !important;
    right: 0 !important;
}

html[dir="rtl"] .dropdown--left,
body[dir="rtl"] .dropdown--left {
    left: 0 !important;
    right: auto !important;
}

/* Header wrapper - keep layout same */
html[dir="rtl"] .header__wrapper,
body[dir="rtl"] .header__wrapper {
    direction: rtl; /* Only for text */
    flex-direction: row !important; /* Keep same layout */
}

/* Top bar - keep layout same */
html[dir="rtl"] .top-bar__wrapper,
body[dir="rtl"] .top-bar__wrapper {
    direction: rtl; /* Only for text */
}

/* Text alignment - only for text content */
html[dir="rtl"] .list__content,
body[dir="rtl"] .list__content {
    text-align: right;
}

/* Icons - keep exact same positioning and spacing */
html[dir="rtl"] .list__icon,
body[dir="rtl"] .list__icon {
    margin: 0 !important; /* Keep same as LTR */
}

html[dir="rtl"] .list__icon-wrapper,
body[dir="rtl"] .list__icon-wrapper {
    margin: 0 !important; /* Keep same as LTR */
}

/* List link - keep exact same gap */
html[dir="rtl"] .list__link,
body[dir="rtl"] .list__link {
    gap: 0.3rem !important; /* Same as LTR */
    flex-direction: row !important; /* Keep same direction */
}

/* RTL for search and form elements */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
body[dir="rtl"] input,
body[dir="rtl"] textarea,
body[dir="rtl"] select,
.rtl input,
.rtl textarea,
.rtl select {
    text-align: right;
    direction: rtl;
}

/* RTL for buttons */
html[dir="rtl"] button,
body[dir="rtl"] button,
.rtl button {
    direction: rtl;
}

/* RTL adjustments for navigation */
html[dir="rtl"] .header__categories,
body[dir="rtl"] .header__categories,
.rtl .header__categories {
    direction: rtl;
}

/* RTL for cart and icons */
html[dir="rtl"] .header__cart-button,
body[dir="rtl"] .header__cart-button,
.rtl .header__cart-button {
    direction: rtl;
}

/* Header structure - keep layout exactly same */
html[dir="rtl"] .header,
body[dir="rtl"] .header {
    direction: rtl; /* Only for text */
}

html[dir="rtl"] .header__buttons,
body[dir="rtl"] .header__buttons {
    direction: rtl; /* Only for text */
    flex-direction: row !important; /* Keep same layout */
}

html[dir="rtl"] .header__search-wrapper,
body[dir="rtl"] .header__search-wrapper {
    direction: rtl; /* Only for text */
}

html[dir="rtl"] .header__cart-button,
body[dir="rtl"] .header__cart-button {
    direction: rtl; /* Only for text */
}

html[dir="rtl"] .header__main,
body[dir="rtl"] .header__main {
    direction: rtl; /* Only for text */
}

/* Ensure logo positioning stays consistent */
html[dir="rtl"] .logo,
body[dir="rtl"] .logo,
.rtl .logo {
    direction: ltr; /* Keep logo LTR for consistency */
}

/* Keep badge positioning same */
html[dir="rtl"] .badge,
body[dir="rtl"] .badge,
.rtl .badge {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
}

/* Ensure dropdowns maintain same appearance */
html[dir="rtl"] .dropdown,
body[dir="rtl"] .dropdown,
.rtl .dropdown {
    text-align: right;
}

/* Keep list item hover states consistent */
html[dir="rtl"] .list__item--hover:hover,
body[dir="rtl"] .list__item--hover:hover,
.rtl .list__item--hover:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* General RTL support */
html[dir="rtl"] *,
body[dir="rtl"] *,
.rtl * {
    unicode-bidi: embed;
}

html[dir="rtl"] bdi,
body[dir="rtl"] bdi,
.rtl bdi {
    unicode-bidi: bidi-override;
}

/* Ensure consistent spacing for all elements */
html[dir="rtl"] .list__content--with-icon,
body[dir="rtl"] .list__content--with-icon,
.rtl .list__content--with-icon {
    text-align: right;
}

/* Keep icon and text order exactly same as LTR */
html[dir="rtl"] .list__link > div:first-child,
body[dir="rtl"] .list__link > div:first-child {
    order: 0 !important; /* Keep natural order */
}

html[dir="rtl"] .list__link > div:last-child,
body[dir="rtl"] .list__link > div:last-child {
    order: 0 !important; /* Keep natural order */
}

/* Ensure top bar list maintains same order */
html[dir="rtl"] .top-bar .list--horizontal,
body[dir="rtl"] .top-bar .list--horizontal {
    flex-direction: row !important;
    justify-content: flex-start !important;
}

/* Keep all header elements in same position */
html[dir="rtl"] .header__wrapper--desktop,
body[dir="rtl"] .header__wrapper--desktop {
    flex-direction: row !important;
    justify-content: space-between !important;
}