/* RTL Overrides for Arabic Locale */

/* General Direction */
body {
    direction: rtl;
    text-align: right;
}

/* Header Styles */
.header-wrapper {
    /* No direction change needed for wrapper background */
}

/* Logo and Location Group */
.col-auto.d-flex.align-items-center.mb-0 {
    /* Flex direction handles mirroring automatically in RTL usually, but margins need flipping */
}

.me-4 {
    margin-right: 0 !important;
    margin-left: 1.5rem !important;
    /* Bootstrap me-4 is 1.5rem */
}

.ms-1 {
    margin-left: 0 !important;
    margin-right: 0.25rem !important;
}

.ms-2 {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

.mx-3 {
    /* mx affects both sides, so no change needed unless asymmetric */
}

.mx-4 {
    /* mx affects both sides */
}

/* Search Bar */
.search-container {
    margin: 0 auto;
    /* Centered, no change */
}

.search-icon-wrapper {
    /* Justify content center handles inner icon */
}

/* Input padding/margins if any specific */

/* Right Actions (now Left Actions) */
.col-auto.d-flex.align-items-center.gap-4 {
    /* gap handles spacing between flex items */
}

/* Position fixes */
.start-0 {
    left: auto !important;
    right: 0 !important;
}

.translate-middle {
    transform: translate(-50%, -50%) !important;
    /* Translate middle is centered, but the offset 10px, -5px might need flipping */
}

/* Fix specific transform for badge */
/* style="font-size: 0.5rem; transform: translate(10px, -5px) !important;" */
/* We need to flip the X translation */
.badge.position-absolute {
    transform: translate(-10px, -5px) !important;
}

/* Hero Section */
.hero-bg-text {
    left: auto !important;
    right: 50% !important;
    transform: translate(50%, -50%) !important; 
    /* Flip X translate */
    letter-spacing: 0 !important;
    font-size: 12vw !important;
}

/* Logo Overlay */
.dr-raouf-logo-overlay {
    right: auto !important;
    left: 23% !important;
    /* Rotation might prefer flipping too? transform: rotate(12deg) ? */
    transform: rotate(12deg) !important;
}

/* Category Section */
/* No specific directional margins seen in provided CSS, mostly bootstrap grids */

/* Featured Brands */
/* Promo Cards */
/* Position absolute images */
.promo-box .promo-img-container.position-absolute {
    right: auto !important;
    left: 0 !important;
}

.bg-orange-soft .promo-img-container {
    margin-right: 0 !important;
    margin-left: -20px !important;
}

.promo-img {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 2rem !important;
}

/* Cereal Section */
.cereal-section .bg-warning {
    left: auto !important;
    right: 0 !important;
    /* Transformation scaleX doesn't need flipping usually if symmetrical, 
       but if it was transform-origin based it might. 
       Assuming center origin, scaleX(0.95) is fine. */
}

.cereal-section .bg-warning+div {
    left: auto !important;
    right: 0 !important;
}

/* Footer Section */
.text-start {
    text-align: right !important;
}

.col-md-6.d-flex.justify-content-md-end {
    justify-content: flex-start !important;
    /* Flip alignment */
}

/* Lists padding */
.list-unstyled {
    padding-right: 0 !important;
}

/* Icons in buttons */
.btn .bi {
    margin-left: 0.5rem !important;
    /* Add space on left of icon if it was on right? */
    /* Usually icon is on left of text. 
       LTR: Icon [space] Text
       RTL: Icon [space] Text 
       The visual order flips automatically in flex row.
       But margin/gap needs to be correct.
       Bootstrap gap-2 handles it.
    */
}

/* Download App Buttons content alignment */
/* .text-start matches .text-right above */

/* FAQ Chevron */
.faq-item.active .transition-transform {
    /* Rotate 180 is same in both directions */
}

/* Specific Bootstrap utilities overrides if used heavily */
.float-end {
    float: left !important;
}

.float-start {
    float: right !important;
}

.text-end {
    text-align: left !important;
}

/* Border Radius Flipping */
.rounded-end {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: var(--bs-border-radius) !important;
    border-bottom-left-radius: var(--bs-border-radius) !important;
}

.rounded-start {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
}

/* Cereal Card Border Radius Check */
/* border-top-left-radius: 2rem; border-top-right-radius: 2rem; -> Symmetrical */

.select-location {
    text-align: right !important;
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* Dropdown Menu RTL */
.dropdown-menu {
    text-align: right !important;
}

.dropdown-item {
    text-align: right !important;
}

/* Hero Banner RTL Alignment */
.hero-left-col {
    padding-left: 0 !important;
    padding-right: 50px !important;
    text-align: right !important;
}

.hero-upload-card {
    justify-content: flex-end !important;
}

.upload-card {
    margin-right: 0 !important;
    margin-left: 50px !important;
    margin-bottom: 30px !important;
}

.hero-icons-wrapper {
    left: auto !important;
    right: 50px !important;
}

@media(max-width: 575px) {
    .upload-card {
        margin-right: 20px !important;
        margin-left: 20px !important;
    }
}

@media(min-width: 575px) {
    .abcd {
        margin-top: 190px;
        padding-right: 5vw;
        padding-left: 0 !important;
    }

    .xyz {
        margin-top: 80px;
    }
}