/**
 * Majoon RTL layer — loaded only for rtl_locales (ar).
 * All rules scoped under [dir="rtl"]. No inline direction styles in Blade.
 *
 * Principles (best practice):
 * 1. Trust html[dir=rtl] for flex/grid start/end — do NOT also row-reverse
 *    those same flex rows (that undoes the mirror).
 * 2. Prefer logical properties (margin-inline-*, inset-inline-*, padding-inline-*).
 * 3. Open9 uses physical left/right + float:left in places — those need
 *    explicit RTL overrides (floats do not follow direction the way flex does).
 * 4. row-reverse only when DOM order must change (e.g. sidebar-before-content).
 */

/* -------------------------------------------------------------------------- */
/* Typography — Tajawal (body/UI) + Lutfey (headings + buttons); icomoon      */
/* Open9 keeps html at 62.5% (1rem ≈ 10px). Never bump html font-size here —  */
/* that would scale the whole theme. Use px for UI that must read large.      */
/*                                                                            */
/* SYSTEMIC RULES:                                                            */
/* 1. --majoon-font-ar = Tajawal body stack (symbols fall back to Manrope).   */
/* 2. --majoon-font-ar-display = Lutfey for headings + Arabic button labels.  */
/* 3. Icomoon lock lives at the end of majoon-site.css (loads last).          */
/* 4. Never put icon- on a parent that also wraps Arabic text.                */
/* -------------------------------------------------------------------------- */

@font-face {
    font-family: "Lutfey Arabic";
    src: url("../fonts/lutfey/LutfeyArabicDEMO-Regular.woff2") format("woff2"),
         url("../fonts/lutfey/LutfeyArabicDEMO-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Map synthetic medium/bold requests to the single DEMO Regular file */
@font-face {
    font-family: "Lutfey Arabic";
    src: url("../fonts/lutfey/LutfeyArabicDEMO-Regular.woff2") format("woff2"),
         url("../fonts/lutfey/LutfeyArabicDEMO-Regular.otf") format("opentype");
    font-weight: 500 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tajawal";
    src: url("../fonts/tajawal/Tajawal-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tajawal";
    src: url("../fonts/tajawal/Tajawal-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tajawal";
    src: url("../fonts/tajawal/Tajawal-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tajawal";
    src: url("../fonts/tajawal/Tajawal-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

[dir="rtl"] {
    /*
     * Body/UI: Tajawal (full Arabic + Latin). Manrope/system fill rare symbols.
     * Headings + buttons/CTAs: Lutfey display face (DEMO Regular — weight 400).
     */
    --majoon-font-ar: "Tajawal", "Manrope", "Segoe UI Symbol", "Noto Sans Symbols", "Apple Symbols", sans-serif;
    --majoon-font-ar-display: "Lutfey Arabic", "Tajawal", "Manrope", sans-serif;
    --majoon-font-icon: "icomoon";
}

[dir="rtl"] body {
    font-family: var(--majoon-font-ar);
    line-height: 1.7;
}

/*
 * Body / UI copy — Tajawal. Do NOT force on bare `span` (Open9 multi-path icons).
 * Headings + buttons/CTAs use --majoon-font-ar-display below.
 */
[dir="rtl"] body,
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] a,
[dir="rtl"] label,
[dir="rtl"] small,
[dir="rtl"] .meta-info .item,
[dir="rtl"] .author .info span,
[dir="rtl"] .author .info h6,
[dir="rtl"] .tf-card-article .card-title p,
[dir="rtl"] .side-bar,
[dir="rtl"] .inner-content,
[dir="rtl"] .widget,
[dir="rtl"] .action__body,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] .price,
[dir="rtl"] .breadcrumbs,
[dir="rtl"] .footer-bottom {
    font-family: var(--majoon-font-ar) !important;
}

/*
 * Headings / display titles + Arabic button labels — Lutfey.
 * Includes card titles (.name / .name a — title text lives on the nested link),
 * header nav items, section widgets, hero, prose headings, and Open9 .tf-button.
 * Store download CTAs keep English brand names → Tajawal (see below).
 *
 * Note: [dir=rtl] a forces Tajawal for body links; .name a, blog card title
 * links, and nav selectors below must stay listed here so Lutfey wins.
 */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] .heading,
[dir="rtl"] .title-post,
[dir="rtl"] .title-post a,
[dir="rtl"] .title-widget,
[dir="rtl"] .name,
[dir="rtl"] .name a,
[dir="rtl"] .tf-card-box .name,
[dir="rtl"] .tf-card-box .name a,
[dir="rtl"] .action__body h2,
[dir="rtl"] .tf-card-article .card-title h5,
[dir="rtl"] .tf-card-article .card-title h5 a,
[dir="rtl"] .pages-title .content h1,
[dir="rtl"] .flat-pages-title .pages-title .content h1,
[dir="rtl"] .flat-title-page .heading,
[dir="rtl"] .discover-item .heading,
[dir="rtl"] .majoon-prose h2,
[dir="rtl"] .majoon-prose h3,
[dir="rtl"] .majoon-prose h4,
[dir="rtl"] .majoon-prose h5,
[dir="rtl"] .tf-button,
[dir="rtl"] button,
[dir="rtl"] #main-nav > ul > li > a,
[dir="rtl"] #main-nav .sub-menu li a,
[dir="rtl"] .inner-canvas-nav #main-nav > ul > li > a,
[dir="rtl"] .mobile-nav-wrap #menu-mobile-menu li a {
    font-family: var(--majoon-font-ar-display) !important;
    font-weight: 400 !important;
}

/*
 * Store / download CTAs — labels are Latin brand names ("Google Play",
 * "App Store") or mixed AR+EN. Lutfey looks odd on Latin; use Tajawal.
 */
[dir="rtl"] .majoon-slide-store,
[dir="rtl"] .majoon-store-label,
[dir="rtl"] .app-store-links .tf-button {
    font-family: var(--majoon-font-ar) !important;
    font-weight: 500 !important;
}

/*
 * Icons: only the icon element + its ::before/::after (and pathN children for
 * multi-tone glyphs). Do NOT style `[class^="icon-"] *` — that forced icomoon
 * onto Arabic labels inside icon-class parents (breadcrumbs Home link).
 */
[dir="rtl"] [class^="icon-"],
[dir="rtl"] [class*=" icon-"],
[dir="rtl"] [class^="icon-"]::before,
[dir="rtl"] [class*=" icon-"]::before,
[dir="rtl"] [class^="icon-"]::after,
[dir="rtl"] [class*=" icon-"]::after,
[dir="rtl"] i[class^="icon-"],
[dir="rtl"] i[class*=" icon-"],
[dir="rtl"] [class^="icon-"] [class^="path"],
[dir="rtl"] [class*=" icon-"] [class^="path"],
[dir="rtl"] [class^="icon-"] [class^="path"]::before,
[dir="rtl"] [class*=" icon-"] [class^="path"]::before {
    font-family: var(--majoon-font-icon) !important;
    font-weight: normal !important;
    font-style: normal !important;
}

[dir="rtl"] .infor-product > .text .icon-tick {
    margin-left: 0;
    margin-inline-start: 10px;
}

/* Body UI at Open9’s 16px/14px — bump px for nav/buttons (not rem; see note above) */
[dir="rtl"] #main-nav > ul > li > a {
    font-size: 18px;
    line-height: 24px;
}

[dir="rtl"] .tf-button {
    font-size: 16px;
}

[dir="rtl"] #footer .title-widget,
[dir="rtl"] #footer .widget-menu ul li a {
    font-size: 16px;
}

[dir="rtl"] .majoon-language-switcher .majoon-lang-toggle,
[dir="rtl"] .inner-canvas-nav #main-nav > ul > li > a {
    font-size: 18px;
}

/* -------------------------------------------------------------------------- */
/* Header chrome — Open9 pins logo / nav / wallet with physical coordinates    */
/* Mirror: logo + first menu item on the right; actions on the left.           */
/* -------------------------------------------------------------------------- */

[dir="rtl"] #site-logo-inner {
    left: auto;
    right: 15px;
}

[dir="rtl"] .flat-wallet {
    right: auto;
    left: 15px;
    /* dir=rtl already mirrors flex children; do not row-reverse */
    flex-direction: row;
}

[dir="rtl"] .majoon-lang-slot {
    margin-inline-end: 0;
    margin-inline-start: 0;
}

[dir="rtl"] .mobile-button {
    right: auto;
    left: 15px;
}

/*
 * Open9 (≥991) gives .flat-wallet margin-right:56px so the lang control
 * clears the burger on the right. Mirror that clearance on the left in RTL
 * or the burger sits on top of / beside the language switcher.
 */
@media (max-width: 991px) {
    [dir="rtl"] .flat-wallet {
        margin-right: 0;
        margin-left: 56px;
    }

    [dir="rtl"] .mobile-button {
        left: 15px;
        right: auto;
        z-index: 2;
    }
}

[dir="rtl"] .header_1 #main-nav {
    left: auto;
    right: 22.48%;
}

@media (max-width: 1024px) {
    [dir="rtl"] .header_1 #main-nav {
        left: auto;
        right: 20%;
    }
}

/*
 * Menu items: Open9 uses float:left, which keeps LTR packing even under dir=rtl.
 * float:right restores RTL reading order (first CMS item on the right).
 */
[dir="rtl"] #main-nav > ul {
    direction: rtl;
}

[dir="rtl"] #main-nav > ul > li {
    float: right;
}

[dir="rtl"] #main-nav > ul > li.menu-item-has-children > a {
    padding-right: 0;
    padding-left: 18px;
}

[dir="rtl"] #main-nav > .menu > li.menu-item-has-children > a::after {
    right: auto;
    left: 0;
}

[dir="rtl"] #main-nav .sub-menu,
[dir="rtl"] #main-nav .nav-sub-menu {
    text-align: right;
    left: auto;
    right: 0;
}

/* Drawers: Open9 already slides in from the right (= inline-start in RTL). Keep it. */

/* -------------------------------------------------------------------------- */
/* Icons / breadcrumbs                                                        */
/* -------------------------------------------------------------------------- */

[dir="rtl"] .breadcrumbs.flex {
    /* DOM: Home then section — reverse so Home sits on the right in RTL */
    flex-direction: row-reverse;
}

/*
 * Home crumb uses <li class="icon-keyboard_arrow_right"> for the chevron ::before.
 * Keep Tajawal on the label; icomoon only on the pseudo.
 */
[dir="rtl"] .breadcrumbs li,
[dir="rtl"] .breadcrumbs li a {
    font-family: var(--majoon-font-ar) !important;
    font-weight: 400 !important;
}

[dir="rtl"] .breadcrumbs .icon-keyboard_arrow_right::before {
    display: inline-block;
    transform: scaleX(-1);
    font-family: var(--majoon-font-icon) !important;
    font-weight: normal !important;
}

[dir="rtl"] .tf-button .icon-arrow-up-right2,
[dir="rtl"] .tf-card-article .link .icon-arrow-up-right2,
[dir="rtl"] a.link .icon-arrow-up-right2 {
    display: inline-block;
    transform: scaleX(-1);
}

/* -------------------------------------------------------------------------- */
/* Home hero — centered composition (Open9)                                   */
/* -------------------------------------------------------------------------- */

[dir="rtl"] .flat-pages-title .pages-title .content,
[dir="rtl"] .flat-pages-title .pages-title .content h1,
[dir="rtl"] .flat-pages-title .pages-title .content p {
    text-align: center;
}

[dir="rtl"] .flat-pages-title .pages-title .content h1 {
    font-size: clamp(44px, 6vw, 76px);
    line-height: 1.25;
}

[dir="rtl"] .flat-pages-title .pages-title .content p {
    margin-inline: auto;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.75;
    max-width: 46rem;
}

[dir="rtl"] .flat-pages-title .content .flat-button.flex {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
}

[dir="rtl"] .flat-pages-title .mr-16 {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

[dir="rtl"] .majoon-review-card__quote {
    text-align: start;
    font-style: normal;
}

[dir="rtl"] .majoon-reviews-prev i,
[dir="rtl"] .majoon-reviews-next i {
    transform: scaleX(-1);
}

/* -------------------------------------------------------------------------- */
/* Action banner                                                              */
/* LTR keeps Open9 (text left, cards right: 41px, rotate -32deg).             */
/* RTL mirrors the decorative plane only — do not touch LTR `right`.          */
/* -------------------------------------------------------------------------- */

[dir="rtl"] .action__body h2 {
    text-align: start;
}

[dir="rtl"] .action__body .action__actions,
[dir="rtl"] .tf-section.action .flat-button.flex {
    flex-direction: row;
    justify-content: flex-start;
    text-align: start;
}

[dir="rtl"] .action__body .bg-home7 {
    right: auto;
    left: 41px;
    transform: rotate(32deg);
}

/* -------------------------------------------------------------------------- */
/* Blog — sidebar is first in DOM; reverse so article leads in RTL            */
/* -------------------------------------------------------------------------- */

[dir="rtl"] .tf-grid-blog > .majoon-container > .row.flex,
[dir="rtl"] .tf-blog-detail > .majoon-container > .row {
    flex-direction: row-reverse;
}

[dir="rtl"] .tf-card-article,
[dir="rtl"] .tf-card-article .card-title,
[dir="rtl"] .tf-card-article .card-title h5,
[dir="rtl"] .tf-card-article .meta-info,
[dir="rtl"] .tf-card-article .author .info,
[dir="rtl"] .side-bar,
[dir="rtl"] .inner-content,
[dir="rtl"] .meta-post,
[dir="rtl"] .author,
[dir="rtl"] .title-post {
    text-align: right;
}

/*
 * meta-info: pack category + date at the start.
 * card-bottom: keep author and read-more arrow at opposite ends
 * (justify-between in Blade). flex-start was packing them together.
 */
[dir="rtl"] .tf-card-article .meta-info.flex {
    flex-direction: row;
    justify-content: flex-start;
}

[dir="rtl"] .tf-card-article .card-bottom.flex {
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
}

/*
 * Date/category icons: Open9 uses left:-22px + margin-left.
 * In RTL that was mirrored to right:-22px, which spilled past the card edge.
 * Keep the glyph inside the item via padding-inline-start instead.
 */
[dir="rtl"] .meta-info .item,
[dir="rtl"] .widget-related-posts .related-posts-item .item {
    margin-left: 0;
    margin-right: 0;
    margin-inline-start: 0;
    margin-inline-end: 14px;
    padding-inline-start: 26px;
    /*
     * Open9 sets Manrope + font-weight:500 on .item. Tajawal has real 500.
     */
    font-family: var(--majoon-font-ar) !important;
    font-weight: 500 !important;
}

[dir="rtl"] .meta-info .item::before,
[dir="rtl"] .widget-related-posts .related-posts-item .item::before {
    /* Parent .item uses Lutfey !important for Arabic date text — glyphs must stay icomoon */
    font-family: var(--majoon-font-icon) !important;
    left: auto;
    right: auto;
    inset-inline-start: 0;
}

[dir="rtl"] .author .avatar {
    /* Spacing comes from .author.flex gap in majoon-site.css (logical). */
    margin: 0;
}

/* Author / category rows: dir=rtl already places avatar/icon at inline-start */
[dir="rtl"] .author.flex {
    flex-direction: row;
}

[dir="rtl"] .widget-categories ul li,
[dir="rtl"] .widget-related-posts .related-posts-item:not(.main) {
    flex-direction: row;
    gap: 0; /* spacing comes from margin-inline-end on .card-media */
}

[dir="rtl"] .widget-related-posts .related-posts-item:not(.main) .card-media {
    margin-right: 0;
    margin-left: 0;
    margin-inline-end: 15px;
}

[dir="rtl"] .meta-post.flex,
[dir="rtl"] .bottom.flex {
    flex-direction: row;
}

/* -------------------------------------------------------------------------- */
/* Footer — desktop keeps Open9 column order (logo left); mobile follows RTL  */
/* -------------------------------------------------------------------------- */

[dir="rtl"] #footer .footer-content {
    direction: ltr;
    text-align: left;
}

[dir="rtl"] #footer .footer-content.flex {
    flex-direction: row;
}

[dir="rtl"] #footer .footer-content .widget,
[dir="rtl"] #footer .footer-content .widget-last,
[dir="rtl"] #footer .footer-content .title-widget,
[dir="rtl"] #footer .footer-content .widget-menu ul {
    direction: rtl;
    text-align: right;
}

/* Social row: keep Open9 icon packing (even 10px gaps). Do not rtl-force this ul. */
[dir="rtl"] #footer .footer-content .widget-social,
[dir="rtl"] #footer .footer-content .widget-social ul {
    direction: ltr;
    text-align: start;
}

[dir="rtl"] #footer .widget-logo,
[dir="rtl"] #footer .logo-footer {
    text-align: left;
    direction: ltr;
}

[dir="rtl"] #footer .footer-bottom {
    direction: rtl;
    text-align: right;
    flex-direction: row-reverse;
}

/* Mobile footer stacking for RTL lives in majoon-site.css (loads last). */

/* -------------------------------------------------------------------------- */
/* Pagination — numbers stay 1→2→3; Blade flips arrow icons for RTL           */
/* -------------------------------------------------------------------------- */

[dir="rtl"] .majoon-pagination,
[dir="rtl"] .widget-pagination ul {
    direction: ltr;
    flex-direction: row;
}

[dir="rtl"] .widget-pagination ul li.disabled > span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35);
    opacity: 1;
}

/* -------------------------------------------------------------------------- */
/* Shared prose (.majoon-prose) — blog + legal under RTL                        */
/* Body/UI: Tajawal. In-article headings: Lutfey (see display list above).     */
/* -------------------------------------------------------------------------- */

[dir="rtl"] .majoon-prose,
[dir="rtl"] .majoon-prose p,
[dir="rtl"] .majoon-prose li,
[dir="rtl"] .majoon-prose ul,
[dir="rtl"] .majoon-prose ol {
    font-family: var(--majoon-font-ar) !important;
    text-align: right;
}

[dir="rtl"] .majoon-prose h2,
[dir="rtl"] .majoon-prose h3,
[dir="rtl"] .majoon-prose h4,
[dir="rtl"] .majoon-prose h5 {
    font-family: var(--majoon-font-ar-display) !important;
    font-weight: 400 !important;
    text-align: right;
}

[dir="rtl"] .majoon-prose {
    font-size: 19px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.9);
}

[dir="rtl"] .majoon-prose p,
[dir="rtl"] .majoon-prose li {
    font-size: 1em;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.9);
}

[dir="rtl"] .majoon-prose h2 { font-size: 1.45em; }
[dir="rtl"] .majoon-prose h3 { font-size: 1.25em; }
[dir="rtl"] .majoon-prose h4 { font-size: 1.1em; }

[dir="rtl"] .majoon-prose ul,
[dir="rtl"] .majoon-prose ol {
    padding-inline-start: 1.5em;
    padding-inline-end: 0;
}

@media (max-width: 767px) {
    [dir="rtl"] .majoon-prose {
        font-size: 18px;
    }
}

/* -------------------------------------------------------------------------- */
/* Apps catalog / detail                                                       */
/* -------------------------------------------------------------------------- */

/*
 * Open9 pins Azeret Mono on detail rows / sale chrome — no Arabic glyphs.
 * Force Tajawal for app-detail UI copy under RTL.
 */
[dir="rtl"] .product-item.details .content .details-item span,
[dir="rtl"] .product-item.time-sales .content .text,
[dir="rtl"] .product-item.time-sales .content p,
[dir="rtl"] .product-item.description .content,
[dir="rtl"] .product-item.description .content p,
[dir="rtl"] .majoon-app-description,
[dir="rtl"] .app-store-links__platforms {
    font-family: var(--majoon-font-ar) !important;
}

[dir="rtl"] .majoon-app-header__title {
    font-family: var(--majoon-font-ar-display), var(--majoon-font-ar), sans-serif;
}

[dir="rtl"] .discover-item .heading,
[dir="rtl"] .flat-title-page .heading {
    text-align: center;
}

[dir="rtl"] .discover-item .tf-card-box .name,
[dir="rtl"] .discover-item .tf-card-box .author .info,
[dir="rtl"] .discover-item .tf-card-box .meta-info {
    text-align: start;
}

[dir="rtl"] .discover-item .tf-card-box .author.flex,
[dir="rtl"] .discover-item .tf-card-box .meta-info.flex {
    flex-direction: row;
}

[dir="rtl"] .text-center,
[dir="rtl"] .justify-center {
    text-align: center;
}

[dir="rtl"] .progress-wrap {
    left: 30px;
    right: auto;
}