/*
 * RTL (Right-to-Left) Style Overrides for Frontend
 * Applied when is_rtl = true (e.g., Arabic language)
 * Bootstrap 5.3.3 RTL handles most flipping automatically via dir="rtl"
 * This file provides overrides for custom frontend styles in main.css
 *
 * IMPORTANT: This file is loaded AFTER main.css and bootstrap.rtl.min.css
 */

/* Cairo Font — the gold standard for Arabic web typography */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap');

/* =============================================
   0. CRITICAL: Fix horizontal scrollbar & RTL base
   ============================================= */

html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    text-align: right;
    direction: rtl;
}

/* Override CSS variables for Arabic fonts */
[dir="rtl"] {
    --heading-font: 'Cairo', sans-serif;
    --body-font: 'Cairo', sans-serif;
}

/*
 * Arabic font — Cairo applied via body inheritance only.
 * DO NOT use *, div, span, a, i — these break icon fonts
 * (Font Awesome, Line Awesome). CSS inheritance from body
 * handles all visible text automatically.
 */
[dir="rtl"] body {
    font-family: 'Cairo', sans-serif;
}

/* Headings use --heading-font (Oswald) so need explicit override */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    font-family: 'Cairo', sans-serif;
}

/* Form elements & table cells don't inherit font in some browsers */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] button,
[dir="rtl"] .btn,
[dir="rtl"] th,
[dir="rtl"] td,
[dir="rtl"] label {
    font-family: 'Cairo', sans-serif;
}

/* =============================================
   1. Position Center Helper
   ============================================= */

.position--center {
    left: auto;
    right: 50%;
    transform: translate(50%, -50%);
}

/* =============================================
   2. Section Heading
   ============================================= */

.section__heading span img {
    right: auto;
    left: -34px;
}

@media screen and (max-width: 767px) {
    .section__heading span img {
        right: auto;
        left: -28px;
    }
}

/* =============================================
   3. Search Box
   ============================================= */

.search__box .form-control {
    padding-right: 20px;
    padding-left: 44px;
}

.search__box button {
    right: auto;
    left: 16px;
}

/* =============================================
   4. Sidebar Radio (flex-direction: row-reverse already, undo for RTL)
   ============================================= */

.sidebar__radio .form-radio {
    flex-direction: row;
}

/* =============================================
   5. WYG Lists
   ============================================= */

.wyg ul {
    padding-left: 0;
    padding-right: 32px;
}

.wyg ol {
    padding-left: 0;
    padding-right: 32px;
}

/* =============================================
   6. Forms
   ============================================= */

label.required:after {
    margin-left: 0;
    margin-right: 2px;
}

.form-control[type=file]::file-selector-button {
    margin-left: 0;
    margin-right: 10px;
}

/* Form Check */
.form-check {
    padding-left: 0;
    padding-right: 0;
}

/* Password field */
.password__field input {
    padding-right: 18px !important;
    padding-left: 40px !important;
}

.password-show-hide {
    right: auto;
    left: 12px;
}

/* =============================================
   7. Alert
   ============================================= */

.alert__content {
    padding-left: 0;
    padding-right: 32px;
}

@media screen and (max-width: 991px) {
    .alert__content {
        padding-left: 0;
        padding-right: 16px;
    }
}

@media screen and (max-width: 575px) {
    .alert__content {
        padding-right: 0;
    }
}

.alert__link::before {
    left: auto;
    right: 0;
}

/* =============================================
   8. Offcanvas
   ============================================= */

.offcanvas__area {
    left: auto;
    right: -100%;
    border-right: none;
    border-left: 1px solid hsl(var(--black)/0.03);
}

.offcanvas__area.active {
    left: auto;
    right: 0;
}

.offcanvas__area .offcanvas__main .offcanvas__menu ul li #collapseExample17 {
    padding-left: 0;
    padding-right: 24px;
}

/* =============================================
   9. Header
   ============================================= */

/* Header menu link underline decoration */
.header__area .header__menu ul li a::after {
    left: auto;
    right: 0;
    background-position: right bottom;
}

/* Header dropdown */
.header__area .header__menu ul li .header__dropdown {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

/* Header program hover shadow */
.header__program:hover {
    box-shadow: 3px 3px 0 0 hsl(var(--heading-color));
}

/* Header cart */
.header__cart a {
    padding-right: 0;
    padding-left: 12px;
}

.header__cart a span {
    right: auto;
    left: 0;
}

/* =============================================
   10. Footer
   ============================================= */

.footer__sp.fs1 {
    right: auto;
    left: 2%;
}

.footer__sp.fs2 {
    left: auto;
    right: 0;
}

.footer__sp.fs3 {
    right: auto;
    left: 0;
}

.footer__sp.fs4 {
    left: auto;
    right: 0;
}

.footer__single ul li a i {
    transform: rotate(225deg);
}

.footer__single ul li a:hover i {
    transform: rotate(180deg);
}

/* =============================================
   11. Hero Section
   ============================================= */

.hero__sp.sp2 {
    right: auto;
    left: 0;
}

.hero__sp.sp3 {
    left: auto;
    right: 0;
}

/* =============================================
   12. Menu Cards
   ============================================= */

.menu__card:hover .menu__img img,
.menu__card.active .menu__img img {
    margin-left: 0;
    margin-right: -42px;
}

.menu__img img {
    margin-left: 0;
    margin-right: -100px;
}

.menu__sp {
    left: auto;
    right: 6%;
}

.menu__card__topbar {
    left: auto;
    right: 0;
}

/* Menu info list items */
.menu__info ul li a {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid hsl(var(--body-color)/0.17);
}

.menu__info ul li:last-child a {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}

/* =============================================
   13. Menu Details
   ============================================= */

.md__inner ul {
    padding-left: 0;
    padding-right: 0;
}

/* Plus/Minus buttons */
.minus__btn {
    border-radius: 0 3px 3px 0;
}

.plus__btn {
    border-radius: 3px 0 0 3px;
}

/* =============================================
   14. Why Choose Section
   ============================================= */

.why__choose__img {
    margin-left: 0;
    margin-right: auto;
}

@media screen and (max-width: 991px) {
    .why__choose__img {
        margin-right: auto;
        margin-left: auto;
    }
}

/* =============================================
   15. Tutorial Section
   ============================================= */

.ts__sp {
    left: auto;
    right: -150px;
}

@media screen and (max-width: 1399px) {
    .ts__sp {
        left: auto;
        right: -135px;
    }
}

@media screen and (max-width: 1199px) {
    .ts__sp {
        left: auto;
        right: -120px;
    }
}

.ts__sp.sp2 {
    right: auto;
    left: 0;
}

.tutorial__line {
    right: auto;
    left: -120px;
}

@media screen and (max-width: 1199px) {
    .tutorial__line {
        left: -85px;
        right: auto;
    }
}

@media screen and (max-width: 767px) {
    .tutorial__line {
        left: -68px;
        right: auto;
    }
}

/* Flip the tutorial line arrow for RTL */
.tutorial__line img {
    transform: scaleX(-1);
}

/* =============================================
   16. Program Section
   ============================================= */

.program__content {
    left: auto;
    right: 0;
}

.program__sp {
    right: auto;
    left: 0;
}

.program__content a i {
    transform: rotate(225deg);
}

.program__content a:hover i {
    transform: rotate(180deg);
}

/* =============================================
   17. Program Details
   ============================================= */

.pd__desc ul {
    padding-left: 0;
    padding-right: 0;
}

.pd__rutine__desc ul {
    padding-left: 0;
    padding-right: 20px;
}

.pd__rutine__table .table tbody tr td:first-child {
    text-align: right;
    border-left: none;
    border-right: none;
    padding-right: 40px;
    padding-left: 20px;
}

.pd__rutine__table .table tbody tr td:last-child {
    border-right: none;
    border-left: none;
    padding-left: 20px;
    padding-right: 60px;
}

/* Dashboard version of the table */
.pd__rutine__table .table tbody tr td:first-child {
    border-right: none;
    border-left: 1px solid hsl(var(--black)/0.08);
}

/* =============================================
   18. Newsletter Section
   ============================================= */

.newsletter__form input {
    padding-right: 22px;
    padding-left: 60px;
}

@media screen and (max-width: 1399px) {
    .newsletter__form input {
        padding-right: 20px;
        padding-left: 60px;
    }
}

@media screen and (max-width: 991px) {
    .newsletter__form input {
        padding-right: 18px;
        padding-left: 60px;
    }
}

.newsletter__form button {
    right: auto;
    left: 18px;
}

/* Flip the send arrow for RTL */
.newsletter__form button img {
    transform: scaleX(-1);
}

.newsletter__form button:hover img {
    transform: scaleX(-1) rotate(45deg);
}

.newsletter__sp {
    right: auto;
    left: -20px;
}

.newsletter__sp.sp2 {
    left: auto;
    right: -120px;
}

/* =============================================
   19. FAQ Section
   ============================================= */

.faq__tomato {
    left: auto;
    right: 4%;
}

.faq__img {
    left: auto;
    right: 4%;
}

.faq__img.fq2 {
    right: auto;
    left: 0;
}

.faq__sp {
    right: auto;
    left: 0;
}

/* =============================================
   20. Blog Section
   ============================================= */

.blog__topbar .section__heading {
    margin-left: auto;
    margin-right: 0;
}

/* =============================================
   21. Team Section
   ============================================= */

.team__img img {
    margin-right: 0;
    margin-left: 20px;
}

/* =============================================
   22. Checkout Section
   ============================================= */

.checkout__method .form-radio {
    padding-left: 0;
    padding-right: 0;
}

.checkout__method .form-radio .form-check-label img {
    margin-left: 0;
    margin-right: 10px;
}

/* =============================================
   23. Contact Section
   ============================================= */

.contact__icon {
    margin-left: 0;
    margin-right: -60px;
}

.contact__icon i {
    padding-left: 0;
    padding-right: 30px;
}

.contact__sp {
    left: auto;
    right: 6px;
}

/* =============================================
   24. Policy Section
   ============================================= */

.policy__sp {
    right: auto;
    left: 0;
}

/* =============================================
   25. Auth Section
   ============================================= */

/* No major directional changes needed */

/* =============================================
   26. Dashboard Section
   ============================================= */

.dashboard__wrap {
    padding-left: 0;
    padding-right: 275px;
}

@media screen and (max-width: 991px) {
    .dashboard__wrap {
        padding-right: 0;
    }
}

.dashboard__sidebar {
    left: auto;
    right: 0;
}

@media screen and (max-width: 991px) {
    .dashboard__sidebar {
        left: auto;
        right: -100%;
    }

    .dashboard__sidebar.active {
        left: auto;
        right: 0;
    }
}

.sidebar__close {
    right: auto;
    left: 0;
}

/* Dashboard menu */
.dashboard__menu ul {
    padding-right: 0;
    padding-left: 14px;
}

.dashboard__menu ul li a {
    border-radius: 4px 0 0 4px;
}

.dashboard__menu ul li a::after {
    left: auto;
    right: -17px;
}

.dashboard__menu ul li a:hover::after {
    left: auto;
    right: -8px;
}

.dashboard__menu ul li a.active::after {
    left: auto;
    right: -8px;
}

.dashboard__menu ul li a[aria-expanded=true] {
    border-radius: 4px 0 0 4px;
}

.sidebar__dropdown {
    border-radius: 0 0 0 4px;
}

.sidebar__dropdown ul li a::after {
    left: auto !important;
    right: -6px !important;
}

.sidebar__dropdown ul li a.active::after {
    right: 0 !important;
}

.sidebar__dropdown ul li a:hover::after {
    right: 0 !important;
}

.dropdown__arrow {
    margin-left: 0;
    margin-right: auto;
}

/* Dashboard header widgets */
@media screen and (max-width: 767px) {
    .dashboard__header__widgets .upload__file {
        margin-right: 0;
        margin-left: auto;
    }
}

@media screen and (max-width: 470px) {
    .sidebar__open {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}

/* Notification count */
.notification__count {
    right: auto;
    left: -6px;
}

/* Upload button icon */
.upload__file .btn i {
    margin-right: 0;
    margin-left: 2px;
}

/* =============================================
   26a. Dashboard Cards (stat boxes)
   ============================================= */

.dashboard__card {
    text-align: right;
}

.dashboard__card h5,
.dashboard__card p {
    font-family: 'Cairo', sans-serif;
}

/* Flip the decorative image to the left side */
.dc__img {
    right: auto;
    left: 0;
}

/* =============================================
   26b. Dashboard Tables (Orders, Transactions, etc.)
   ============================================= */

/* Table header — flip first/last cell alignment & radius */
.table thead tr th {
    text-align: center;
}

.table thead tr th:first-child {
    text-align: right;
    border-radius: 0 8px 8px 0;
}

.table thead tr th:last-child {
    text-align: left;
    border-radius: 8px 0 0 8px;
}

/* Table body — flip first/last cell alignment & radius */
.table tbody tr td {
    text-align: center;
}

.table tbody tr td:first-child {
    text-align: right;
    border-radius: 0 8px 8px 0;
}

.table tbody tr td:last-child {
    text-align: left;
    border-radius: 8px 0 0 8px;
}

/* Active row box-shadow — flip direction */
.table tbody tr.active__tr {
    box-shadow: 1px 2px 10px hsl(var(--black)/0.08);
}

/* data-label pseudo-element for responsive tables */
.table tbody tr td::before {
    text-align: right;
}

/* Action buttons in last column — align to left */
.table tbody tr td:last-child .d-flex {
    justify-content: flex-start;
}

/* =============================================
   26c. Responsive Tables RTL
   ============================================= */

/* sm responsive */
@media screen and (max-width: 767px) {
    .table--responsive--sm .table__pt {
        flex-direction: row;
    }

    .table--responsive--sm tbody tr td {
        text-align: left;
    }

    .table--responsive--sm tbody tr td:first-child {
        text-align: left;
        border-radius: 0;
    }

    .table--responsive--sm tbody tr td::before {
        text-align: right;
    }
}

/* md responsive */
@media screen and (max-width: 991px) {
    .table--responsive--md .table__pt {
        flex-direction: row;
    }

    .table--responsive--md tbody tr td {
        text-align: left;
    }

    .table--responsive--md tbody tr td:first-child {
        text-align: left;
        border-radius: 0;
    }

    .table--responsive--md tbody tr td::before {
        text-align: right;
    }
}

/* lg responsive */
@media screen and (max-width: 1199px) {
    .table--responsive--lg .table__pt {
        flex-direction: row;
    }

    .table--responsive--lg tbody tr td {
        text-align: left;
    }

    .table--responsive--lg tbody tr td:first-child {
        text-align: left;
        border-radius: 0;
    }

    .table--responsive--lg tbody tr td::before {
        text-align: right;
    }
}

/* =============================================
   26d. Dashboard Title Bar
   ============================================= */

.dh__title {
    text-align: right;
}

.dh__title h5 {
    font-family: 'Cairo', sans-serif;
}

/* Table topbar (search, filter) */
.table__topbar__right {
    flex-direction: row-reverse;
}

@media screen and (max-width: 767px) {
    .table__topbar {
        flex-direction: column;
    }
}

/* Search box in table topbar */
.table__topbar__right .search__box .form-control {
    padding-right: 16px;
    padding-left: 44px;
}

/* Filter dropdown position */
@media screen and (max-width: 767px) {
    .table__topbar__right .filter__main {
        right: auto !important;
        left: -30px !important;
    }
}

/* =============================================
   26e. Dashboard Routine (Today Meals)
   ============================================= */

.dashboard__rutine__topbar {
    text-align: right;
}

.dashboard__rutine__topbar h5,
.dashboard__rutine__topbar p {
    font-family: 'Cairo', sans-serif;
}

/* Routine item — image + text */
.pd__rutine__item {
    flex-direction: row;
}

.pd__rutine__item img {
    margin-left: 12px;
    margin-right: 0;
}

.pd__inf {
    text-align: right;
}

/* =============================================
   26f. Dashboard Acco (accordion items)
   ============================================= */

.dashboard__acco__content {
    left: auto;
    right: 20px;
    text-align: right;
}

/* =============================================
   26g. Badges & Status Labels
   ============================================= */

.badge {
    font-family: 'Cairo', sans-serif;
}

/* =============================================
   26h. Pagination
   ============================================= */

.pagination {
    direction: rtl;
}

.pagination .page-item:first-child .page-link {
    border-radius: 0 8px 8px 0;
}

.pagination .page-item:last-child .page-link {
    border-radius: 8px 0 0 8px;
}

/* =============================================
   26i. Profile Settings Page
   ============================================= */

.profile__info {
    text-align: right;
}

.profile__upload label i {
    left: auto;
    right: 0;
}

/* =============================================
   26j. Support Ticket
   ============================================= */

.ticket__pg {
    flex-direction: row-reverse;
}

/* =============================================
   26k. User Data Forms
   ============================================= */

/* Make form labels align right */
.dashboard__wrapper .form-label,
.dashboard__wrapper label {
    text-align: right;
    display: block;
}

/* Text align for form text areas & inputs */
.dashboard__wrapper .form-control,
.dashboard__wrapper .form-select {
    text-align: right;
}

/* Phone input group — flip addon position */
.dashboard__wrapper .input-group .input-group-text {
    border-radius: 0 12px 12px 0;
}

.dashboard__wrapper .input-group .form-control {
    border-radius: 12px 0 0 12px;
}

/* =============================================
   27. CP (Current Plan) section
   ============================================= */

.cp__left ul li {
    border-right: none;
    border-left: 1px solid hsl(var(--black)/0.12);
    margin-right: 0;
    padding-right: 0;
    margin-left: 8px;
    padding-left: 8px;
}

.cp__left ul li:last-child {
    padding-left: 0;
    margin-left: 0;
    border-left: none;
}

/* =============================================
   28. Error Section
   ============================================= */

.error__sp {
    left: auto;
    right: 0;
}

.error__sp.sp-2 {
    right: auto;
    left: 0;
}

/* =============================================
   29. Cookies Card
   ============================================= */

.cookies-card {
    left: auto;
    right: 16px;
}

/* =============================================
   30. Scroll Reveal Adjustments
   ============================================= */

[data-sr-id] {
    direction: rtl;
}

/* =============================================
   31. Select2 RTL
   ============================================= */

.select2-container .select2-selection--single .select2-selection__rendered {
    text-align: right;
    padding-left: 0;
    padding-right: 10px;
}

.select2-container .select2-selection--single .select2-selection__arrow {
    left: 5px;
    right: auto;
}

.select2-results__option {
    text-align: right;
}

/* =============================================
   32. Breadcrumb
   ============================================= */

.breadcrumb-area .breadcrumb li+li::before {
    float: right;
    padding-left: 0.5rem;
    padding-right: 0;
}

/* =============================================
   33. Accordion (FAQ items)
   ============================================= */

.accordion-button::after {
    margin-left: 0;
    margin-right: auto;
}

.accordion-button:not(.collapsed)::after {
    margin-left: 0;
    margin-right: auto;
}

/* =============================================
   34. Dropdown Menus
   ============================================= */

.dropdown-menu {
    text-align: right;
}

/* =============================================
   35. Input Group (phone country code etc.)
   ============================================= */

.input-group .input-group-text {
    border-radius: 0 12px 12px 0;
}

.input-group .form-control {
    border-radius: 12px 0 0 12px;
}

.input-group .input-group-text:first-child {
    border-right: 1px solid hsl(var(--black)/0.08);
    border-left: none;
}

/* =============================================
   36. Footer arrow icons for links
   ============================================= */

[dir="rtl"] .fa-arrow-right::before {
    content: "\f060";
    /* Arrow left icon */
}

/* =============================================
   37. Misc. Global RTL Fixes
   ============================================= */

/* Ensure list-style bullets are on the right for content lists */
.pd__rutine__desc ul {
    list-style-position: inside;
}

/* Fix any remaining animations that use translateX */
[dir="rtl"] .hero__area::after {
    left: auto;
    right: 0;
}

/* =============================================
   Responsive RTL Adjustments
   ============================================= */

@media (max-width: 991px) {
    .header__area .header__menu ul li {
        float: none;
    }
}

@media (max-width: 480px) {
    .cookies-card {
        right: 5%;
        left: auto;
    }
}