/* Arabic RTL overrides for Borrow frontend */

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

[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] button,
[dir="rtl"] .form-control,
[dir="rtl"] .btn {
    font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
}

[dir="rtl"] .offcanvas__area {
    left: auto;
    right: -100%;
    border-right: 0;
    border-left: 1px solid hsl(var(--black) / 0.03);
}

[dir="rtl"] .offcanvas__area.active {
    left: auto;
    right: 0;
}

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

@media screen and (max-width: 991px) {
    [dir="rtl"] .dashboard__sidebar {
        left: auto;
        right: -100%;
    }

    [dir="rtl"] .dashboard__sidebar.active {
        left: auto;
        right: 0;
    }
}

[dir="rtl"] .dashboard__wrap {
    padding-left: 0;
    padding-right: 275px;
}

@media screen and (max-width: 991px) {
    [dir="rtl"] .dashboard__wrap {
        padding-right: 0;
    }
}

/* Keep the user dashboard inside the visual viewport on phones. */
@media screen and (max-width: 1199px) {
    html[dir="rtl"],
    html[dir="rtl"] body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    [dir="rtl"] .dashboard__wrap,
    [dir="rtl"] .dashboard__wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }
}

/* Fallback for phones whose browser reports a desktop-sized viewport. */
@media screen and (max-device-width: 991px) {
    [dir="rtl"] .dashboard__wrap {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    [dir="rtl"] .dashboard__wrapper {
        padding: 16px;
    }

    [dir="rtl"] .dashboard__sidebar {
        left: auto !important;
        right: -100% !important;
    }

    [dir="rtl"] .dashboard__sidebar.active {
        left: auto !important;
        right: 0 !important;
    }
}

@media screen and (max-device-width: 1199px) {
    [dir="rtl"] table.table--responsive--lg,
    [dir="rtl"] table.table--responsive--lg tbody,
    [dir="rtl"] .table--responsive--lg tbody tr {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    [dir="rtl"] .table--responsive--lg thead {
        display: none !important;
    }

    [dir="rtl"] .table--responsive--lg tbody tr td {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
    }
}

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

/* Prevent Air Datepicker's hidden off-screen element from widening RTL pages. */
[dir="rtl"] .datepickers-container .datepicker:not(.active) {
    left: 0 !important;
    visibility: hidden;
    pointer-events: none;
}

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

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

[dir="rtl"] .header__area .header__main form .form-control {
    padding-left: 16px;
    padding-right: 44px;
}

[dir="rtl"] .header__area .header__main form i,
[dir="rtl"] .header__area .header__main form .search-icon {
    left: auto;
    right: 16px;
}

[dir="rtl"] .breadcrumb__list,
[dir="rtl"] .breadcrumb__wrap ul,
[dir="rtl"] .menu,
[dir="rtl"] .main-menu,
[dir="rtl"] .footer__menu ul,
[dir="rtl"] .dashboard__menu ul {
    padding-right: 0;
}

[dir="rtl"] .breadcrumb__list li + li::before,
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    float: right;
    padding-left: 0.5rem;
    padding-right: 0;
}

[dir="rtl"] .fa-arrow-right::before {
    content: "\f060";
}

[dir="rtl"] .fa-arrow-left::before {
    content: "\f061";
}

[dir="rtl"] .fa-chevron-right::before {
    content: "\f053";
}

[dir="rtl"] .fa-chevron-left::before {
    content: "\f054";
}

[dir="rtl"] .fa-angle-right::before {
    content: "\f104";
}

[dir="rtl"] .fa-angle-left::before {
    content: "\f105";
}

[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: auto;
    left: 8px;
}

[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    text-align: right;
    padding-right: 12px;
    padding-left: 28px;
}

[dir="rtl"] .form-check {
    padding-right: 1.5em;
    padding-left: 0;
}

[dir="rtl"] .form-check .form-check-input {
    float: right;
    margin-right: -1.5em;
    margin-left: 0;
}

[dir="rtl"] .input-group > :not(:first-child) {
    margin-right: -1px;
    margin-left: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--bs-border-radius);
    border-bottom-left-radius: var(--bs-border-radius);
}

[dir="rtl"] .input-group > :not(:last-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
}

[dir="rtl"] .swiper-button-next {
    left: 10px;
    right: auto;
}

[dir="rtl"] .swiper-button-prev {
    right: 10px;
    left: auto;
}

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

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

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

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

[dir="rtl"] .ps-0 { padding-right: 0 !important; padding-left: initial !important; }
[dir="rtl"] .pe-0 { padding-left: 0 !important; padding-right: initial !important; }

[dir="rtl"] .dropdown-menu {
    text-align: right;
}

[dir="rtl"] .modal-header .btn-close {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .product__details__content .rating i,
[dir="rtl"] .review__item,
[dir="rtl"] .booking__timeline,
[dir="rtl"] .category__card,
[dir="rtl"] .blog__card,
[dir="rtl"] .footer__widget {
    text-align: right;
}

[dir="rtl"] .cookies-card {
    text-align: right;
}

[dir="rtl"] .dashboard__topbar,
[dir="rtl"] .top__header,
[dir="rtl"] .auth__wrapper {
    direction: rtl;
}

[dir="rtl"] table th,
[dir="rtl"] table td {
    text-align: right;
}

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