/* RTL overrides for frontend UI */
/* code comments in English only */

/* 1) Root direction */
html[dir="rtl"], html[dir="rtl"] body { direction: rtl; unicode-bidi: plaintext; text-align: right; }
/* Set font-family for all HTML tags except i, svg, and icon tags */
/* Use :not selector to exclude i, svg, and common icon tags */
html[dir="rtl"] body,
html[dir="rtl"] div,
html[dir="rtl"] span,
html[dir="rtl"] p,
html[dir="rtl"] a,
html[dir="rtl"] ul,
html[dir="rtl"] ol,
html[dir="rtl"] li,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] table,
html[dir="rtl"] tr,
html[dir="rtl"] th,
html[dir="rtl"] td,
html[dir="rtl"] form,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] button,
html[dir="rtl"] label,
html[dir="rtl"] select,
html[dir="rtl"] option,
html[dir="rtl"] section,
html[dir="rtl"] article,
html[dir="rtl"] nav,
html[dir="rtl"] header,
html[dir="rtl"] footer,
html[dir="rtl"] aside,
html[dir="rtl"] main,
html[dir="rtl"] figure,
html[dir="rtl"] figcaption,
html[dir="rtl"] blockquote,
html[dir="rtl"] pre,
html[dir="rtl"] code,
html[dir="rtl"] strong,
html[dir="rtl"] em,
html[dir="rtl"] small,
html[dir="rtl"] sub,
html[dir="rtl"] sup,
html[dir="rtl"] mark,
html[dir="rtl"] del,
html[dir="rtl"] ins,
html[dir="rtl"] details,
html[dir="rtl"] summary,
html[dir="rtl"] dt,
html[dir="rtl"] dd,
html[dir="rtl"] dl,
html[dir="rtl"] address,
html[dir="rtl"] time,
html[dir="rtl"] abbr,
html[dir="rtl"] bdi,
html[dir="rtl"] bdo,
html[dir="rtl"] cite,
html[dir="rtl"] q,
html[dir="rtl"] samp,
html[dir="rtl"] var,
html[dir="rtl"] kbd,
html[dir="rtl"] output,
html[dir="rtl"] progress,
html[dir="rtl"] meter,
html[dir="rtl"] canvas,
html[dir="rtl"] video,
html[dir="rtl"] audio,
html[dir="rtl"] map,
html[dir="rtl"] area,
html[dir="rtl"] object,
html[dir="rtl"] embed,
html[dir="rtl"] picture,
html[dir="rtl"] source,
html[dir="rtl"] track,
html[dir="rtl"] iframe,
html[dir="rtl"] fieldset,
html[dir="rtl"] legend,
html[dir="rtl"] hr,
html[dir="rtl"] br,
html[dir="rtl"] :not(i):not(svg):not([class*="icon"]):not([class*="fa"]):not([class*="la"]):not([class*="ti"]):not([class*="fi"]) {
    font-family: 'Roboto', sans-serif;
}
/* 2) Swap common utilities (Bootstrap-like) */
html[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: .25rem !important; }
html[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: .5rem !important; }
html[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
html[dir="rtl"] .ms-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
html[dir="rtl"] .ms-5 { margin-left: 0 !important; margin-right: 3rem !important; }
html[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: .25rem !important; }
html[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: .5rem !important; }
html[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
html[dir="rtl"] .me-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
html[dir="rtl"] .me-5 { margin-right: 0 !important; margin-left: 3rem !important; }
html[dir="rtl"] .ps-1 { padding-left: 0 !important; padding-right: .25rem !important; }
html[dir="rtl"] .ps-2 { padding-left: 0 !important; padding-right: .5rem !important; }
html[dir="rtl"] .pe-1 { padding-right: 0 !important; padding-left: .25rem !important; }
html[dir="rtl"] .pe-2 { padding-right: 0 !important; padding-left: .5rem !important; }
html[dir="rtl"] .text-start { text-align: right !important; }
html[dir="rtl"] .text-end { text-align: left !important; }

/* 3) Header, Navbar and main wrappers (example classes from template) */
html[dir="rtl"] .header-top .header-top__left { margin-right: 0; margin-left: auto; }
html[dir="rtl"] .header-top .header-top__right { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .header { direction: rtl; }

/* 4) Buttons and inputs border-radius flipping */
/* Primary buttons often have asymmetric radius like: border-radius: 0 6px 6px 0; */
/* Flip left/right radii for RTL */
/* Buttons/inputs asymmetric radius adjustments appear in specific rules below */

/* Input groups: place addon on left visually */
html[dir="rtl"] .input-group > .form-control { border-radius: 0 .25rem .25rem 0; }
html[dir="rtl"] .input-group > .input-group-text { border-radius: .25rem 0 0 .25rem; }
html[dir="rtl"] .input-group .btn { border-radius: .25rem 0 0 .25rem; }
/* If button is at the opposite edge in group */
html[dir="rtl"] .input-group > .btn:first-child { border-radius: 0 .25rem .25rem 0; }
html[dir="rtl"] .input-group > .btn:last-child { border-radius: .25rem 0 0 .25rem; }

/* Generic asymmetric button helper: if LTR had 6px on right corners, swap */
html[dir="rtl"] .btn-pill-start { border-radius: 0 .375rem .375rem 0 !important; }
html[dir="rtl"] .btn-pill-end { border-radius: .375rem 0 0 .375rem !important; }

/* 5) Icons direction: mirror common directional icons */
html[dir="rtl"] .fa-angle-right,
html[dir="rtl"] .fa-angle-left,
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .fa-chevron-left,
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .la-angle-right,
html[dir="rtl"] .la-angle-left,
html[dir="rtl"] .la-arrow-right,
html[dir="rtl"] .la-arrow-left {
	transform: scaleX(-1);
	display: inline-block;
}

/* 6) Dropdowns, Breadcrumbs, Pagination */
html[dir="rtl"] .dropdown-menu { left: auto; right: 0; text-align: right; }
html[dir="rtl"] .breadcrumb { direction: rtl; }
html[dir="rtl"] .pagination { direction: rtl; }

/* 7) Forms alignment and selects */
html[dir="rtl"] .form-check { padding-left: 0; padding-right: 1.5rem; }
html[dir="rtl"] .form-check .form-check-input { float: right; margin-left: .5rem; margin-right: 0; }
html[dir="rtl"] .form-select, html[dir="rtl"] select { background-position: left .75rem center, center right 2.25rem; }

/* 8) Cards/Widgets typical spacing swaps */
html[dir="rtl"] .card .card-header .card-title { padding-left: 0; padding-right: .5rem; }
html[dir="rtl"] .media > .media-body { margin-left: 0; margin-right: 1rem; }

/* 9) Sliders (slick/swiper) navigation alignment */
html[dir="rtl"] .slick-prev { right: auto; left: 10px; }
html[dir="rtl"] .slick-next { left: auto; right: 10px; }
html[dir="rtl"] .swiper-button-prev { right: auto; left: 10px; }
html[dir="rtl"] .swiper-button-next { left: auto; right: 10px; }

/* 10) Conversation/chat layout adjustments if present in frontend */
html[dir="rtl"] .conversation .message { text-align: right; }
html[dir="rtl"] .conversation .message .avatar { margin-right: 0; margin-left: .5rem; }

/* 11) Price tags / badges alignment */
html[dir="rtl"] .badge { margin-left: .25rem; margin-right: 0; }

/* 12) Tables */
html[dir="rtl"] table th, html[dir="rtl"] table td { text-align: right; }

/* 13) Misc */
html[dir="rtl"] .float-start { float: right !important; }
html[dir="rtl"] .float-end { float: left !important; }
@media screen and (max-width: 991px) {
    html[dir="rtl"] .order-1 {
        order: 4 !important;
    }
}
html[dir="rtl"] .search-form__btn {
    flex-grow: 1;
    padding: 0 16px;
    margin-left: -1px;
    white-space: nowrap;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-top-left-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
}
html[dir="rtl"] .footer-item__title::after {
    left: unset;
    right: 0;
}
html[dir="rtl"] .subscribe-form .btn {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
html[dir="rtl"] .subscribe-form .form--control {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
html[dir="rtl"] .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    padding-right: 20px;
    padding-left: 8px;
}
html[dir="rtl"] .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
    left: auto;
    right: 1px;
}
html[dir="rtl"] .breadcrumb__item:not(:last-child)::after {
    content: "\f104";
}
html[dir="rtl"] .widget-check-group label {
    padding-left: unset;
    padding-right: 8px;
}
html[dir="rtl"] .call-to-action__content {
    padding: 70px;
    text-align: right;
}
html[dir="rtl"] .proposition__list-heading .icon {
    margin-right: unset;
    margin-left: 15px;
}
html[dir="rtl"] section.testimonials .draggable {
    direction: ltr;
}
html[dir="rtl"] .brand__logos-wrapper .draggable {
    direction: ltr;
}
html[dir="rtl"] .testimonial-item .testi-quote {
    right: unset;
    left: 20px;
}
html[dir="rtl"] .testimonial-item__details {
    width: 133px;
}
html[dir="rtl"] .form--check .form-check-label {
    padding-left: unset;
    padding-right: 12px;
}
html[dir="rtl"] .fa-long-arrow-alt-right:before, .fa-right-long:before {
    content: "\f30a";
}
html[dir="rtl"] .blog-sidebar__title::before {
    left: unset;
    right: 0;
}
html[dir="rtl"] .latest-blog__content {
    width: calc(100% - 80px);
    padding-left: unset;
    padding-right: 15px;
}
html[dir="rtl"] .la-angle-right:before {
    content: "\f104";
}
html[dir="rtl"] .la-angle-left:before {
    content: "\f105";
}
html[dir="rtl"] .password-show-hide {
    position: absolute;
    right: unset;
    left: 20px;
}
html[dir="rtl"] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control, .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select, .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
html[dir="rtl"] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: -1px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
html[dir="rtl"] .btn-view {
    right: unset;
    left: 15px;
}
html[dir="rtl"] .dropdown-menu {
    left: 0;
    right: auto;
}
html[dir="rtl"] .dropdown--profile .dropdown-menu::after {
    right: unset;
    left: 20px;
}
html[dir="rtl"] .dropdown--profile span.icon {
    float: right;
}
html[dir="rtl"] .dropdown--profile span.text {
    font-size: 14px;
}
html[dir="rtl"] .order-details-tabs a:first-child {
    padding-left: unset;
    padding-right: 0px;
}
html[dir="rtl"] .order-details-tabs a:before {
    right: unset;
    left: -9px;
}
html[dir="rtl"] #saveAndContinue .la-angle-right:before {
    content: "\f105";
}
html[dir="rtl"] .user-info__right .notification {
    font-size: 20px;
    margin-right: unset;
    margin-left: 15px;
}
html[dir="rtl"] .user-info-dropdown span.icon {
    float: right;
}
html[dir="rtl"] .user-info-dropdown span.text {
    font-size: 14px;
}
html[dir="rtl"] .popular-categories__list .draggable {
    direction: ltr;
}
@media (max-width: 991px) {
    .header {
        background-color: #ffffff;
    }
}
@media only screen and (max-width: 991px) {
    html[dir="rtl"] .dropdown-menu {
        left: auto;
        right: unset;
    }
    html[dir="rtl"] .dropdown--profile .dropdown-menu::after {
        right: 20px;
        left: unset;
    }
}