/**
 * Majoon site layer on top of the public theme.
 * Shared LTR+RTL tweaks only. Arabic type/layout mirrors live in majoon-rtl.css.
 * Prefer classes here over inline styles in Blade.
 * Accent color: majoon-brand.css → --majoon-accent (do not hardcode).
 */

/* -------------------------------------------------------------------------- */
/* Header / logos                                                             */
/* -------------------------------------------------------------------------- */

/* Nav active/hover — Open9 used a second lime (#E2FE26); force brand accent */
#main-nav > ul > li:hover > a,
#main-nav > .menu > li:hover > a::after,
#main-nav > .menu > li.current-menu-item > a::after,
#main-nav > ul > li.current-menu-item > a,
.inner-canvas-nav #main-nav > ul > li:hover > a,
.inner-canvas-nav #main-nav > ul > li.current-menu-item > a,
.mobile-nav-wrap #menu-mobile-menu li.current-menu-item > a,
.mobile-nav-wrap #menu-mobile-menu li a:hover,
.mobile-nav-wrap #menu-mobile-menu li.current-item a {
    color: var(--majoon-accent);
}

/* Majoon wordmark (wide 3:1) needs a taller header than Open9’s compact mark */
.header_1,
.header_1.is-fixed,
.header_1.is-fixed.is-small,
#site-logo {
    height: 88px;
}

#site-header-inner .wrap-box {
    min-height: 88px;
    align-items: center;
}

#site-logo-inner .main-logo img,
#site-header-inner .main-logo img,
.majoon-logo--header {
    max-height: 72px;
    width: auto;
    max-width: min(280px, 42vw);
    height: auto;
    object-fit: contain;
    display: block;
}

/* Room under the taller header so content isn’t tucked under the bar */
#page.pt-40 {
    padding-top: 100px;
}

.canvas-nav-wrap .main-logo img,
.mobile-nav-wrap .main-logo img,
.majoon-logo--drawer {
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
}

#logo-footer img,
.logo-footer img,
.majoon-logo--footer {
    max-height: 64px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* -------------------------------------------------------------------------- */
/* Language switcher                                                          */
/* -------------------------------------------------------------------------- */

.majoon-lang-slot {
    display: flex;
    align-items: center;
    margin-inline-end: 12px;
}

.majoon-language-switcher {
    position: relative;
    z-index: 10050;
}

.majoon-language-switcher .majoon-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
}

.majoon-language-switcher .majoon-lang-toggle::after {
    display: none;
}

.majoon-language-switcher .flag {
    border-radius: 2px;
    object-fit: cover;
}

.majoon-language-switcher .dropdown-menu {
    background: #1f1f2c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    min-width: 110px;
    padding: 6px 0;
    z-index: 10060;
}

.majoon-language-switcher.show > .dropdown-menu,
.majoon-language-switcher .dropdown-menu.show {
    display: block;
}

.majoon-language-switcher .dropdown-item {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.majoon-language-switcher .dropdown-item:hover,
.majoon-language-switcher .dropdown-item.active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* Mobile header: keep lang control clear of the burger (Open9 margin is LTR-only) */
@media (max-width: 991px) {
    .majoon-lang-slot {
        margin-inline-end: 0;
    }

    .majoon-language-switcher .majoon-lang-toggle {
        min-height: 44px;
        padding: 10px 12px;
    }
}

/*
 * Open9 sizes only #footer .widget — the trailing .widget-last (Company + social)
 * stayed shrink-wrapped, so tablet/phone footers looked uneven. Match widths.
 */
@media (max-width: 991px) {
    #footer .widget-last {
        width: 48%;
    }
}

@media (max-width: 700px) {
    #footer .widget-last {
        width: 100%;
    }

    #footer .footer-content {
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
    }

    #footer .widget,
    #footer .widget-last,
    #footer .widget-logo {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }
}

/* Arabic phone/tablet: stack footer columns (loads after majoon-rtl.css) */
@media (max-width: 991px) {
    [dir="rtl"] #footer .footer-content {
        direction: rtl;
        text-align: right;
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
    }

    [dir="rtl"] #footer .widget-logo,
    [dir="rtl"] #footer .logo-footer {
        text-align: right;
        direction: rtl;
        width: 100%;
    }

    [dir="rtl"] #footer .widget,
    [dir="rtl"] #footer .widget-last {
        width: 100%;
        margin: 0;
        text-align: right;
    }

    [dir="rtl"] #footer .footer-bottom {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

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

/* -------------------------------------------------------------------------- */
/* Media fills — replace former Blade inline styles                           */
/* -------------------------------------------------------------------------- */

.author .avatar img,
.tf-card-box .card-media img:not(.majoon-app-screenshot),
.widget-related-posts .related-posts-item .card-media img,
.tf-card-article .card-media img,
.tf-blog-detail .inner-content .related-post .action img {
    object-fit: cover;
}

.author .avatar img,
.widget-related-posts .related-posts-item .card-media img,
.tf-card-article .card-media img {
    width: 100%;
    height: 100%;
}

/*
 * Open9 uses margin-right on .author .avatar — that sticks text to the icon in RTL.
 * Flex gap is direction-safe for LTR and Arabic.
 */
.author.flex {
    gap: 12px;
}

.author .avatar {
    margin-right: 0;
    margin-left: 0;
}

/* Blog listing footer: keep “posted by” and arrow from colliding */
.tf-card-article .card-bottom.flex {
    gap: 12px;
}

/*
 * Sidebar popular posts: Open9 uses margin-right on the thumb.
 * In RTL that pads the outer edge and text sits flush against the image.
 */
.widget-related-posts .related-posts-item:not(.main) .card-media {
    margin-right: 0;
    margin-left: 0;
    margin-inline-end: 15px;
}

.widget-related-posts .related-posts-item:not(.main) .card-content {
    min-width: 0;
    flex: 1;
}

/*
 * Blog dates (loads after majoon-rtl): Tajawal body stack. Theme’s
 * .meta-info .item uses Manrope + weight 500 — Tajawal has a real 500.
 */
html[dir="rtl"] .meta-info .item,
html[dir="rtl"] .meta-info .item.date,
html[dir="rtl"] .meta-info .item.art,
html[dir="rtl"] .widget-related-posts .related-posts-item .item,
html[dir="rtl"] .widget-related-posts .related-posts-item .item.date {
    font-family: var(--majoon-font-ar) !important;
    font-weight: 500 !important;
}

/*
 * Date/category icons: use real <i class="icon-time|icon-file"> in Blade.
 * Pseudo ::before + Lutfey !important on .item made Arabic show a blank/wrong glyph.
 */
.meta-info .item:has(> i[class*="icon-"])::before,
.widget-related-posts .related-posts-item .item:has(> i[class*="icon-"])::before {
    content: none !important;
    display: none !important;
}

.meta-info .item:has(> i[class*="icon-"]),
.widget-related-posts .related-posts-item .item:has(> i[class*="icon-"]) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 0;
    margin-right: 14px;
    margin-inline-start: 0;
    margin-inline-end: 14px;
    padding-inline-start: 0;
}

.meta-info .item > i[class*="icon-"],
.widget-related-posts .related-posts-item .item > i[class*="icon-"] {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.meta-info .item > .icon-file::before,
.meta-info .item > .icon-time::before,
.widget-related-posts .related-posts-item .item > .icon-file::before,
.widget-related-posts .related-posts-item .item > .icon-time::before {
    color: inherit;
}

html[dir="rtl"] .meta-info .item > i[class*="icon-"],
html[dir="rtl"] .widget-related-posts .related-posts-item .item > i[class*="icon-"],
html[dir="rtl"] .meta-info .item > i[class*="icon-"]::before,
html[dir="rtl"] .widget-related-posts .related-posts-item .item > i[class*="icon-"]::before {
    font-family: var(--majoon-font-icon, "icomoon") !important;
    font-weight: normal !important;
}

/* Home coverflow — keep square crop (Open9 3d slider) */
.swiper-3d-7 .tf-card-box .card-media img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/*
 * Coverflow first paint: before Swiper finishes transforms, a neighbor can
 * stack above the centered slide. Hide non-active until .is-ready, then
 * keep active on top via z-index.
 */
.swiper-3d-7:not(.is-ready) .swiper-slide:not(.swiper-slide-active) {
    opacity: 0;
}

.swiper-3d-7.is-ready .swiper-slide {
    opacity: 1;
    transition: opacity 0.2s ease;
}

.swiper-3d-7 .swiper-slide {
    z-index: 1;
}

.swiper-3d-7 .swiper-slide-active {
    z-index: 5;
}

.swiper-3d-7 .swiper-slide-active .tf-card-box {
    position: relative;
    z-index: 2;
}

/* Soften side cards on phones so the carousel reads as multi-item */
@media (max-width: 499px) {
    .flat-pages-title .swiper-3d-7 .swiper-slide:not(.swiper-slide-active) .tf-card-box {
        opacity: 0.9;
    }
}

/*
 * Store CTAs on card hover — reuse Open9 .button-place-bid fade-in slot,
 * but with Google Play + App Store side by side (home coverflow + related).
 */
.majoon-store-hover.button-place-bid {
    width: auto;
    max-width: calc(100% - 16px);
    height: auto;
    transform: translateX(-50%);
}

.majoon-store-hover__row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.majoon-slide-store {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(22, 22, 22, 0.88);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.majoon-slide-store .majoon-store-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.majoon-slide-store .majoon-store-icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

.majoon-slide-store--play {
    border-color: rgba(var(--majoon-accent-rgb), 0.55);
}

.majoon-slide-store--ios {
    border-color: rgba(255, 255, 255, 0.35);
}

.majoon-slide-store:hover,
.majoon-slide-store:focus-visible {
    color: var(--majoon-accent-ink);
}

.majoon-slide-store--play:hover,
.majoon-slide-store--play:focus-visible {
    background: var(--majoon-accent);
    border-color: var(--majoon-accent);
}

.majoon-slide-store--ios:hover,
.majoon-slide-store--ios:focus-visible {
    background: #fff;
    border-color: #fff;
}

html[dir="rtl"] .majoon-slide-store {
    font-family: var(--majoon-font-ar);
    font-weight: 500;
}

@media (max-width: 767px) {
    .majoon-store-hover__row {
        gap: 6px;
    }

    .majoon-slide-store {
        min-height: 36px;
        padding: 6px 10px;
        font-size: 11px;
        gap: 5px;
    }

    .majoon-slide-store .majoon-store-icon,
    .majoon-slide-store .majoon-store-icon svg {
        width: 14px;
        height: 14px;
    }
}

.inner-content .image img,
.inner-content .image-box img {
    max-width: 100%;
    height: auto;
}

/* -------------------------------------------------------------------------- */
/* Social icons — Open9 used margin-right: 10px; gap keeps LTR/RTL even        */
/* -------------------------------------------------------------------------- */

.widget-social ul.flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.widget-social ul li,
.widget-social ul li:last-child {
    margin-right: 0;
    margin-left: 0;
}

/* -------------------------------------------------------------------------- */
/* Shared long-form prose — blog articles + legal/privacy (one class)         */
/* Blade: .majoon-prose on blog .inner-post and terms .legal-content           */
/* Arabic type (Rakkas) overrides live in majoon-rtl.css                       */
/* -------------------------------------------------------------------------- */

.majoon-prose {
    max-width: 42rem;
    font-family: 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.86);
    letter-spacing: 0.01em;
}

.majoon-prose > *:first-child {
    margin-top: 0;
}

.majoon-prose p,
.majoon-prose li {
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
    color: inherit;
}

.majoon-prose p {
    margin-bottom: 1.15em;
}

.majoon-prose p.mb-0 {
    margin-bottom: 0;
}

/* Seeded CMS HTML often carries Bootstrap utilities */
.majoon-prose .text-white,
.majoon-prose p.text-white,
.majoon-prose li.text-white,
.majoon-prose ul.text-white {
    color: rgba(255, 255, 255, 0.86) !important;
}

.majoon-prose ul,
.majoon-prose ol {
    margin: 0 0 1.35em;
    padding-inline-start: 1.35em;
    color: inherit;
}

.majoon-prose ul {
    list-style-type: disc;
}

.majoon-prose ol {
    list-style-type: decimal;
}

.majoon-prose li {
    list-style: inherit;
    display: list-item;
    padding-block: 0.28em;
    padding-inline: 0;
}

.majoon-prose li::marker {
    color: var(--majoon-accent);
}

.majoon-prose ul ul,
.majoon-prose ol ol,
.majoon-prose ul ol,
.majoon-prose ol ul {
    margin-top: 0.35em;
    margin-bottom: 0.35em;
}

.majoon-prose strong,
.majoon-prose b {
    color: #fff;
    font-weight: 700;
}

.majoon-prose a {
    color: var(--majoon-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.majoon-prose a:hover {
    color: #fff;
}

.majoon-prose h2,
.majoon-prose h3,
.majoon-prose h4,
.majoon-prose h5 {
    color: #fff;
    font-family: inherit;
    font-weight: 800;
    line-height: 1.3;
    margin: 1.6em 0 0.55em;
    letter-spacing: -0.01em;
}

.majoon-prose h2 { font-size: 1.55em; }
.majoon-prose h3 { font-size: 1.28em; }
.majoon-prose h4 { font-size: 1.1em; }
.majoon-prose h5 { font-size: 1em; }

/* Seeded posts often use <p><strong>Section</strong></p> as a heading */
.majoon-prose p > strong:only-child,
.majoon-prose p > b:only-child {
    display: inline-block;
    font-size: 1.12em;
    font-weight: 800;
    color: #fff;
    margin-top: 0.35em;
}

.majoon-prose img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1.5em 0;
}

.majoon-prose hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: 2em 0;
}

.majoon-prose blockquote {
    margin: 1.5em 0;
}

.majoon-prose blockquote p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.05em;
    line-height: 1.65;
}

@media (max-width: 767px) {
    .majoon-prose {
        font-size: 16px;
        line-height: 1.75;
    }
}

/* Legal page chrome only — body copy is .majoon-prose */
.majoon-legal {
    padding: 60px 0 100px;
}

/*
 * Wider than blog prose (42rem): privacy/terms are denser reference text,
 * and Arabic lines need more horizontal room before wrapping awkwardly.
 */
.majoon-legal .legal-wrapper {
    max-width: 52rem;
    margin: 0 auto;
}

.majoon-legal .legal-wrapper .majoon-prose {
    max-width: none;
}

.majoon-legal .legal-updated {
    display: block;
    margin-bottom: 32px;
    opacity: 0.7;
    font-size: 14px;
    font-family: 'Azeret Mono', monospace;
    letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------------- */
/* Pagination                                                                 */
/* -------------------------------------------------------------------------- */

.widget-pagination {
    margin-top: 48px;
}

.widget-pagination ul.majoon-pagination,
.majoon-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget-pagination ul li.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.widget-pagination ul li.disabled > span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

/* -------------------------------------------------------------------------- */
/* App detail store buttons                                                   */
/* -------------------------------------------------------------------------- */

.app-store-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.app-store-links .tf-button {
    text-decoration: none;
    /* Default .tf-button is only 116×42 — Arabic store CTAs wrap. Size to content. */
    width: auto;
    min-width: 190px;
    height: 54px;
    padding: 0 22px;
    gap: 8px;
    white-space: nowrap;
    font-size: 15px;
    line-height: 1.2;
}

html[dir="rtl"] .app-store-links .tf-button {
    /* Mixed AR + Latin store names — Tajawal (not Lutfey) via majoon-rtl.css */
    min-width: 210px;
    padding: 0 26px;
    font-size: 16px;
}

.app-store-links__actions {
    flex-wrap: wrap;
    gap: 12px;
}

.app-store-links__platforms {
    margin: 0;
    opacity: 0.7;
}

/* Open9 used margin-right on section icons — collapses against Arabic text in RTL */
.product-item > h6 i {
    margin-right: 0;
    margin-inline-end: 7px;
}

/* -------------------------------------------------------------------------- */
/* App detail header — square icon + title (store listing, not NFT avatar row) */
/* -------------------------------------------------------------------------- */

.majoon-app-header {
    margin-bottom: 8px;
}

.majoon-app-header__row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
}

.majoon-app-header__icon {
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
}

.majoon-app-header__icon img,
.majoon-app-header__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.majoon-app-header__copy {
    flex: 1 1 auto;
    min-width: 0;
}

.majoon-app-header__title {
    margin: 0;
    padding: 0;
    text-align: start;
    font-size: 28px;
    line-height: 1.25;
    word-break: break-word;
}

.majoon-app-header__copy .meta {
    margin-top: 8px;
}

.majoon-app-description {
    white-space: normal;
    line-height: 1.7;
}

@media (max-width: 767px) {
    .app-store-links {
        flex-direction: column;
        align-items: stretch;
    }

    .app-store-links__actions .tf-button {
        width: 100%;
        justify-content: center;
    }

    .majoon-app-header__icon {
        flex-basis: 72px;
        width: 72px;
        height: 72px;
        border-radius: 16px;
    }

    .majoon-app-header__title {
        font-size: 22px;
    }

    .majoon-app-header__row {
        gap: 12px;
    }
}

/*
 * Related-apps carousel on app detail: square icons in a real Swiper row
 * (needs .swiper-container — without it slides stacked full-width and looked broken).
 */
.majoon-related-apps {
    overflow: hidden;
    padding-bottom: 8px;
}

.majoon-related-apps .swiper-slide {
    height: auto;
    width: 132px;
}

.featured-item .majoon-related-card {
    margin: 0;
    height: 100%;
}

.featured-item .majoon-related-card .card-media {
    max-height: none;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: none;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
}

.featured-item .majoon-related-card .card-media img {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    object-fit: cover;
    display: block;
}

.featured-item .majoon-related-card .meta-info {
    padding-top: 10px;
}

.featured-item .majoon-related-card .name {
    font-size: 13px;
    line-height: 1.35;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .majoon-related-apps .swiper-slide {
        width: 160px;
    }
}

@media (min-width: 1200px) {
    .majoon-related-apps .swiper-slide {
        width: 180px;
    }
}

/* -------------------------------------------------------------------------- */
/* App detail screenshots — phone frames, not full-bleed NFT art              */
/* -------------------------------------------------------------------------- */

.majoon-app-screenshots {
    margin-block: 12px 8px;
}

.majoon-app-screenshots .swiper-slide {
    width: auto;
}

.majoon-app-screenshots .tf-card-box.style-6 {
    width: min(220px, 58vw);
    margin-top: 0;
    margin-bottom: 24px;
    padding: 0;
}

.majoon-app-screenshots .card-media {
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.majoon-app-screenshots .card-media img,
.majoon-app-screenshots img.majoon-app-screenshot {
    display: block;
    width: 100%;
    height: auto;
    max-height: 440px;
    object-fit: contain;
    object-position: top center;
}

@media (min-width: 768px) {
    .majoon-app-screenshots .tf-card-box.style-6 {
        width: 240px;
    }

    .majoon-app-screenshots .card-media img,
    .majoon-app-screenshots img.majoon-app-screenshot {
        max-height: 480px;
    }
}

@media (min-width: 1200px) {
    .majoon-app-screenshots .tf-card-box.style-6 {
        width: 260px;
    }

    .majoon-app-screenshots .card-media img,
    .majoon-app-screenshots img.majoon-app-screenshot {
        max-height: 520px;
    }
}

/* -------------------------------------------------------------------------- */
/* Home hero CTAs + mint action banner                                        */

/*
 * Hero floating décor — all SVG (never stretch Open9’s 5–35px PNGs).
 * Glow / spark / star replace item1 / item2 / item5; blob + stripe keep
 * Majoon shapes 7 + 46. Display size is set here; HTML width/height match.
 *
 * Open9 hides .icon-background under 1024px — keep décor visible on home.
 * SVGs must be well-formed XML or <img> will paint nothing (HTTP 200 still).
 */
.home-1 .flat-pages-title .icon-background {
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.home-1 .flat-pages-title .pages-title > .content,
.home-1 .flat-pages-title .pages-title > #apps {
    position: relative;
    z-index: 3;
}

.flat-pages-title .icon-background .hero-deco {
    display: block;
    height: auto;
    max-width: none;
    pointer-events: none;
    user-select: none;
    z-index: 2;
}

.flat-pages-title .icon-background .hero-deco--glow {
    width: 48px;
}

.flat-pages-title .icon-background .hero-deco--spark {
    width: 40px;
}

.flat-pages-title .icon-background .hero-deco--star {
    width: 40px;
}

.flat-pages-title .icon-background .hero-deco--blob {
    width: 110px;
}

.flat-pages-title .icon-background .hero-deco--stripe {
    width: 88px;
}

@media (max-width: 767px) {
    .flat-pages-title .icon-background .hero-deco--glow {
        width: 36px;
    }

    .flat-pages-title .icon-background .hero-deco--spark,
    .flat-pages-title .icon-background .hero-deco--star {
        width: 28px;
    }

    .flat-pages-title .icon-background .hero-deco--blob {
        width: 72px;
    }

    .flat-pages-title .icon-background .hero-deco--stripe {
        width: 56px;
    }

    /* Pull side décor inward so absolute left/right positions stay on-screen */
    .flat-pages-title .icon-background .item1 {
        left: 12px;
        top: 120px;
    }

    .flat-pages-title .icon-background .item2 {
        left: 24px;
        top: 48px;
    }

    .flat-pages-title .icon-background .item3 {
        left: 8px;
        top: 200px;
    }

    .flat-pages-title .icon-background .item4 {
        left: auto;
        right: 8px;
        top: 260px;
    }

    .flat-pages-title .icon-background .item5 {
        right: 16px;
        top: 180px;
    }

    .flat-pages-title .icon-background .item6 {
        right: 28px;
        top: 90px;
    }
}

/* EN sizes stay Open9 defaults. Banner plane: LTR right:41px (Open9);        */
/* RTL mirrored only in majoon-rtl.css.                                        */
/* -------------------------------------------------------------------------- */

.hero-actions {
    gap: 16px;
    flex-wrap: wrap;
}

.action__body .action__actions {
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.action__body .action__btn {
    width: auto;
    min-width: 190px;
    padding-inline: 22px;
    box-sizing: border-box;
}

.action__body .action__btn--wide {
    min-width: 230px;
}

.action__body .bg-home7 img.majoon-action-app {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 28px;
    background: rgba(0, 0, 0, 0.25);
}

.action__body .majoon-action-net {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.action__body .majoon-action-net canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Below-fold home CTA — defer layout work until near viewport */
.tf-section.action {
    content-visibility: auto;
    contain-intrinsic-size: 480px;
}

/* -------------------------------------------------------------------------- */
/* Home store-review cards                                                    */
/* -------------------------------------------------------------------------- */

.tf-section.majoon-reviews {
    padding-top: 20px;
    padding-bottom: 80px;
    content-visibility: auto;
    contain-intrinsic-size: 900px;
}

.majoon-reviews__title {
    margin: 0 0 36px;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    color: #fff;
}

.majoon-reviews__carousel {
    display: flex;
    align-items: center;
    gap: 8px;
}

.majoon-reviews-viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    touch-action: pan-y;
}

.majoon-reviews-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.majoon-reviews-track:not(.is-ready) > .majoon-review-card:nth-child(n + 7) {
    display: none;
}

.majoon-reviews-track.is-ready {
    display: flex;
    gap: 0;
    will-change: transform;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.majoon-reviews-track.is-dragging {
    transition: none;
}

.majoon-reviews-page {
    flex: 0 0 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.majoon-reviews-prev,
.majoon-reviews-next {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.majoon-reviews-prev:hover,
.majoon-reviews-next:hover,
.majoon-reviews-prev:focus-visible,
.majoon-reviews-next:focus-visible {
    background: var(--majoon-accent);
    color: var(--majoon-accent-ink);
}

.majoon-reviews-prev.swiper-button-disabled,
.majoon-reviews-next.swiper-button-disabled,
.majoon-reviews-prev:disabled,
.majoon-reviews-next:disabled {
    opacity: 0.28;
    cursor: default;
    pointer-events: none;
}

.majoon-reviews-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    min-height: 44px;
    margin-top: 16px;
}

.majoon-reviews-pagination__dot {
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.majoon-reviews-pagination__dot::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.28;
}

.majoon-reviews-pagination__dot.is-active::after {
    background: var(--majoon-accent);
    opacity: 1;
    width: 10px;
    height: 10px;
}

.majoon-review-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    padding: 24px;
    border-radius: 20px;
    background: #1e1e1e;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
    .majoon-review-card:hover,
    .majoon-review-card:focus-within {
        transform: translateY(-8px);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
    }
}

.majoon-review-card:active {
    transform: translateY(-3px);
}

.majoon-review-card__stars {
    display: flex;
    gap: 4px;
    font-size: 16px;
    line-height: 1;
}

.majoon-review-card__stars .icon-star {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.majoon-review-card__stars .icon-star.is-filled {
    color: var(--majoon-star);
}

.majoon-review-card__stars .icon-star.is-empty {
    color: rgba(255, 255, 255, 0.22);
}

.majoon-review-card__quote {
    margin: 0;
    flex: 1 1 auto;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.7;
    color: #fff;
    text-align: start;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
}

.majoon-review-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.majoon-review-card__author {
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
}

.majoon-review-card__app {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 13px;
    font-weight: 700;
    color: var(--majoon-accent);
}

.majoon-review-card__app:hover,
.majoon-review-card__app:focus-visible {
    color: #fff;
}

.majoon-review-card__store {
    margin-inline-start: auto;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 991px) {
    .majoon-reviews-track,
    .majoon-reviews-page {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .majoon-reviews-track:not(.is-ready) > .majoon-review-card:nth-child(n + 5) {
        display: none;
    }
}

@media (max-width: 767px) {
    .majoon-reviews-track,
    .majoon-reviews-page {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .majoon-reviews-track:not(.is-ready) > .majoon-review-card:nth-child(n + 3) {
        display: none;
    }

    .majoon-reviews-prev,
    .majoon-reviews-next {
        display: none;
    }

    .majoon-review-card {
        padding: 20px;
    }

    .majoon-review-card__quote {
        -webkit-line-clamp: 5;
        font-size: 15px;
    }

    .tf-section.majoon-reviews {
        padding-bottom: 56px;
        contain-intrinsic-size: 720px;
    }
}

@media (max-width: 575px) {
    .majoon-reviews__title {
        font-size: 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wow {
        visibility: visible !important;
        animation: none !important;
    }

    .swiper-3d-7,
    .bg-home7 .swiper-wrapper {
        transition: none !important;
        transform: none !important;
    }

    .majoon-reviews-track {
        transition: none !important;
    }
}

/* -------------------------------------------------------------------------- */
/* Arabic icon lock (loads AFTER majoon-rtl)                                  */
/*                                                                            */
/* One rule for the whole site: icomoon wins over Lutfey !important on a/p/h. */
/* Do not add per-icon overrides — extend this block if a new pattern appears. */
/* Exception: breadcrumbs put icon- on <li> wrapping text; label stays Arabic */
/* via the breadcrumb rules in majoon-rtl.css.                                */
/* -------------------------------------------------------------------------- */

html[dir="rtl"] [class^="icon-"],
html[dir="rtl"] [class*=" icon-"],
html[dir="rtl"] [class^="icon-"]::before,
html[dir="rtl"] [class*=" icon-"]::before,
html[dir="rtl"] [class^="icon-"]::after,
html[dir="rtl"] [class*=" icon-"]::after,
html[dir="rtl"] i[class^="icon-"],
html[dir="rtl"] i[class*=" icon-"],
html[dir="rtl"] a[class^="icon-"],
html[dir="rtl"] a[class*=" icon-"],
html[dir="rtl"] [class^="icon-"] [class^="path"],
html[dir="rtl"] [class*=" icon-"] [class^="path"],
html[dir="rtl"] [class^="icon-"] [class^="path"]::before,
html[dir="rtl"] [class*=" icon-"] [class^="path"]::before {
    font-family: var(--majoon-font-icon, "icomoon") !important;
    font-weight: normal !important;
    font-style: normal !important;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}