/* ============================================================
   NextMerce-style footer (scoped to .footer--nm)
   4 columns (Help & Support / Account / Quick Links / Download App)
   + a gray bottom bar (copyright · payments · region selectors).
   ============================================================ */

.footer--nm {
    /* Dark footer palette. The whole footer is driven by these six variables, so
       re-theming here flips every part (titles, text, links, icons, borders, bottom
       bar) at once. The footer carries its own dark surface, so it renders correctly
       on both light and dark pages. */
    --nm-blue: #7B8AFF;          /* accent / icons / hover — lightened for contrast on dark */
    --nm-dark: #FFFFFF;          /* headings, social icons, strong text → light on dark */
    --nm-dark-3: #9AA3BD;        /* muted text (copyright, labels) */
    --nm-gray-1: #151D38;        /* bottom-bar surface (slightly deeper than the footer) */
    --nm-text: #B6BED2;          /* body text & links */
    --nm-border: #2A3556;        /* dividers / outlines */
    display: block;
    /* Override the global `footer { position:absolute; bottom:0 }` (common.css)
       which pulls the footer out of flow and overlaps page content. Keep it in
       normal flow so it always sits below the content on every page. */
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    background: #1C274C;         /* dark footer surface (brand navy) */
    border-top: 1px solid var(--nm-border);
    color: var(--nm-text);
    font-family: 'DM Sans', sans-serif;
}

/* Same container as the header / homepage: max-w-7xl (1280px) + a flat 16px gutter. */
.footer--nm .nmf-container {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding-inline: 16px;
}
@media (min-width: 1280px) {
    .footer--nm .nmf-container { padding-inline: 0; }
}

/* ---- top: columns ---- */
.footer--nm .nmf-top {
    padding: 60px 0 40px;
}

.footer--nm .nmf-cols {
    display: grid;
    /* Mobile / tablet: two columns — Help & Support and Account share the top row,
       Quick Links wraps to the next row (instead of Help taking the whole width). */
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
    align-items: start;
}

/* From the fold/tablet width up: all three columns fit on one row. Equal 1fr side
   columns push the auto-width middle column (Account) to the exact horizontal centre,
   so it sits centered between Help & Support (left) and Quick Links (right). */
@media (min-width: 600px) {
    .footer--nm .nmf-cols {
        grid-template-columns: 1fr auto 1fr;
        gap: 24px;
    }
    .footer--nm .nmf-cols > .nmf-col-support { justify-self: start; }
    /* Account block sits centered between the other two columns, but its own
       text (title + links) stays left-aligned. */
    .footer--nm .nmf-cols > .nmf-col:nth-child(2) { justify-self: center; }
    .footer--nm .nmf-cols > .nmf-col:nth-child(3) { justify-self: end; }
}

@media (min-width: 768px) {
    .footer--nm .nmf-cols { gap: 40px; }
}

@media (min-width: 1280px) {
    .footer--nm .nmf-cols { gap: 76px; }
}

.footer--nm .nmf-col-support {
    max-width: 330px;
}

.footer--nm .nmf-title {
    margin: 0 0 28px;
    color: var(--nm-dark);
    font-size: 20px;
    font-weight: 500;
}

/* contact list */
.footer--nm .nmf-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer--nm .nmf-contact li {
    display: flex;
    gap: 12px;
    align-items: center;
    line-height: 1.4;
}

.footer--nm .nmf-contact a {
    display: flex;
    gap: 12px;
    align-items: center;
    color: var(--nm-text);
    text-decoration: none;
    transition: color .2s ease;
}

.footer--nm .nmf-contact a:hover {
    color: var(--nm-blue);
    opacity: 1;
}

.footer--nm .nmf-ico {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--nm-blue);
}

.footer--nm .nmf-ico svg {
    display: block;
}

/* socials */
.footer--nm .nmf-social {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 28px;
}

.footer--nm .nmf-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--nm-dark);
    transition: color .2s ease;
}

.footer--nm .nmf-social a svg {
    display: block;
}

.footer--nm .nmf-social a:hover {
    color: var(--nm-blue);
    opacity: 1;
}

/* link columns */
.footer--nm .nmf-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer--nm .nmf-links a {
    color: var(--nm-text);
    text-decoration: none;
    cursor: pointer;
    transition: color .2s ease;
}

.footer--nm .nmf-links a:hover {
    color: var(--nm-blue);
    opacity: 1;
}

/* download app column */
.footer--nm .nmf-col-app {
    width: auto;
}

@media (min-width: 1024px) {
    .footer--nm .nmf-col-app {
        margin-left: auto;
        text-align: right;
    }
}

.footer--nm .nmf-app-desc {
    margin: 0 0 16px;
    font-size: 14px;
}

.footer--nm .nmf-app {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 1024px) {
    .footer--nm .nmf-app {
        align-items: flex-end;
    }
}

.footer--nm .nmf-app-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 9px 28px 9px 16px;
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    transition: opacity .2s ease;
}

.footer--nm .nmf-app-btn:hover {
    opacity: .92;
    color: #fff;
}

.footer--nm .nmf-app-btn.is-ios {
    /* --nm-dark is white on the dark footer, so pin the iOS pill to a dark surface
       (keeps its white label readable). */
    background: #0F1830;
    border: 1px solid var(--nm-border);
}

.footer--nm .nmf-app-btn.is-android {
    background: var(--nm-blue);
}

.footer--nm .nmf-app-btn svg {
    flex-shrink: 0;
}

.footer--nm .nmf-app-btn small {
    display: block;
    font-size: 11px;
    line-height: 1.3;
}

.footer--nm .nmf-app-btn b {
    font-weight: 500;
    font-size: 15px;
}

/* ---- bottom bar ---- */
.footer--nm .nmf-bottom {
    background: var(--nm-gray-1);
    padding: 22px 0;
}

.footer--nm .nmf-bottom-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.footer--nm .nmf-copy {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--nm-dark-3);
}

.footer--nm .nmf-copy a {
    color: var(--nm-dark);
    text-decoration: none;
}

/* Who runs the site (Views/Shared/_CompanyInfo.cshtml): one muted line under the bottom row. */
.footer--nm .nmf-company {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--nm-dark-3);
}

.footer--nm .nmf-company span[aria-hidden] {
    margin: 0 6px;
}

.footer--nm .nmf-bottom-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.footer--nm .nmf-accept {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.footer--nm .nmf-accept-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--nm-dark-3);
}

.footer--nm .nmf-accept img {
    height: 20px;
    width: auto;
    display: block;
}

/* region selectors (country + language) */
.footer--nm .nmf-region {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer--nm .nmf-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.footer--nm .nmf-region select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 36px;
    border: 1px solid var(--nm-border);
    border-radius: 9999px;
    background: #1F2A50;
    color: var(--nm-dark);
    font-size: 13px;
    font-weight: 500;
    padding: 0 30px 0 14px;
    cursor: pointer;
    outline: none;
    transition: border-color .15s ease;
}

.footer--nm .nmf-region select:hover {
    border-color: var(--nm-blue);
}

.footer--nm .nmf-select-wrap::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.6px solid var(--nm-dark-3);
    border-bottom: 1.6px solid var(--nm-dark-3);
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}

.footer--nm .nmf-region .iti__flag {
    flex-shrink: 0;
}

@media (max-width: 575px) {
    .footer--nm .nmf-top {
        padding: 40px 0 28px;
    }

    .footer--nm .nmf-col-app {
        text-align: left;
    }

    .footer--nm .nmf-app {
        align-items: flex-start;
    }
}

/* ---- "Open in the app" strip (#nmfOpenApp in _footer.cshtml, shown by deeplinks.js on phones on taqqsit.com only).
   Fixed to the bottom, under the header (z-index 1000) and every dialog. While it shows (body.nmf-has-openapp) the page
   gets the same room at its end, and the WhatsApp and scroll-up buttons move up above it.

   ONE steady size (owner 2026-10-07: on a phone the strip showed an empty navy band under its text and changed height
   while the page scrolled). _Layout.cshtml sets viewport-fit=cover, so the page runs under the phone's bottom system UI
   (Chrome 135+ edge-to-edge on Android 15+: the gesture or 3-button nav bar; iPhone: the home indicator) and
   env(safe-area-inset-bottom) is the LIVE height of that UI: the browser rewrites it while the page scrolls (Chrome's
   chin, Safari's toolbar). The strip's bottom padding and the page's room were built from that live value, so both
   re-sized on every change. Now the constant-box pattern of Chrome's edge-to-edge guide
   (developer.chrome.com/docs/css-ui/edge-to-edge), two constants:
     --nmf-openapp-h    the room for the strip's content, 3.5rem (56px at the 16px root);
     --nmf-openapp-max  the LARGEST bottom inset the browser can report: env(safe-area-max-inset-bottom) where the browser
                        has it (Chrome 135+), else 36px, the guide's fallback (iPhone home indicator 34px).
   The box is h + max tall with max in its bottom padding; the page's room and the two buttons use the same constants.
   Only the strip's `bottom` reads the live inset (bottom = live - max): the box never changes size, it only slides, its
   controls always end 8px above the live inset (clear of the nav bar / home indicator), and the rest of its padding
   sits off screen or under the system bar.
   Large text: rem and a min-height, no line clamp. Page zoom or a larger default font grows the box with the text; where
   only the glyphs grow (Android text scaling / Samsung Internet text size at 130-150%) the box grows to fit the whole
   message instead of cutting it. Either way its size never depends on the inset, so it never changes while scrolling.
   Desktop never shows the strip (phones only); the two variables do nothing there. */
:root {
    --nmf-openapp-h: 3.5rem;
    --nmf-openapp-max: env(safe-area-max-inset-bottom, 36px);
}

.nmf-openapp {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0; /* a browser without env() */
    bottom: calc(env(safe-area-inset-bottom, 0px) - var(--nmf-openapp-max));
    z-index: 998;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    min-height: calc(var(--nmf-openapp-h) + var(--nmf-openapp-max));
    padding: 8px 12px calc(8px + var(--nmf-openapp-max));
    background: #1C274C;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 1.3;
    box-shadow: 0 -4px 16px rgba(16, 16, 16, 0.18);
}

/* display:flex above would beat the [hidden] attribute on its own; keep the strip hidden until deeplinks.js shows it,
   whatever other stylesheet or later rule the page loads: !important, so it never depends on Bootstrap's [hidden]. */
.nmf-openapp[hidden] {
    display: none !important;
}

/* Two lines of 14px text (2 x 18.2px) fit the 40px between the 8px paddings of the 3.5rem room. No line clamp: a bigger
   text grows the strip (min-height above) rather than losing the end of the message. */
.nmf-openapp .nmf-openapp-text {
    flex: 1 1 auto;
    min-width: 0;
}

.nmf-openapp .nmf-openapp-btn {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 9999px;
    background: #3C50E0;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.nmf-openapp .nmf-openapp-btn:hover,
.nmf-openapp .nmf-openapp-btn:focus-visible {
    background: #2a3bbf;
    color: #fff;
}

.nmf-openapp .nmf-openapp-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #B6BED2;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.nmf-openapp .nmf-openapp-close:focus-visible {
    outline: 2px solid #7B8AFF;
    outline-offset: 2px;
}

/* Phones narrower than 360px (iPhone SE 1st gen and the like): a little tighter, so the English text still takes two
   lines and the strip keeps its 3.5rem room rather than growing a third line. */
@media (max-width: 359.98px) {
    .nmf-openapp {
        gap: 6px;
        padding-inline: 10px;
        font-size: 13px;
    }

    .nmf-openapp .nmf-openapp-btn {
        padding-inline: 12px;
    }

    .nmf-openapp .nmf-openapp-close {
        width: 28px;
    }
}

/* The page's room at its end and the two buttons use the strip's two constants, never the live inset: the room is the
   box's height (h + max), so nothing at the page's end hides behind the strip, whose top edge is h + live <= h + max;
   the WhatsApp (site.css: bottom 60px) and scroll-up (style.css: bottom 30px) buttons stay put while the page scrolls,
   at least their own gap above the strip's top edge. */
body.nmf-has-openapp {
    padding-bottom: calc(var(--nmf-openapp-h) + var(--nmf-openapp-max));
}

body.nmf-has-openapp .whatsapp-icon {
    bottom: calc(var(--nmf-openapp-h) + var(--nmf-openapp-max) + 60px);
}

body.nmf-has-openapp #scrollUp {
    bottom: calc(var(--nmf-openapp-h) + var(--nmf-openapp-max) + 30px);
}

/* Firefox for Android (deeplinks.js insetUnreliable adds body.nmf-openapp-noinset there). It never draws the page under
   the nav bar, yet at load it can report env(safe-area-inset-bottom) = the 3-button bar's 48px (0 on other loads and
   after the first scroll) and it has no safe-area-max, so the box above came out 92px tall, 12px off the bottom: an
   empty navy band under the text until the page scrolled (owner 2026-10-07, S24 Ultra, Firefox 157). There the strip
   ignores the inset: no extra room, flush with the bottom, 56px on every load and every scroll. */
body.nmf-openapp-noinset {
    --nmf-openapp-max: 0px;
}

body.nmf-openapp-noinset .nmf-openapp {
    bottom: 0;
}

/* Firefox for Android while the strip shows (deeplinks.js useScrollRoot, owner 2026-10-09): Firefox moves bottom-fixed
   elements only after its sliding toolbar has moved, so the strip and the WhatsApp button jumped 40-90px on every change
   of scroll direction. Here the document never scrolls - <html> and <body> are exactly the screen - and the page scrolls
   inside #nmfScrollRoot, so the toolbar stays put and nothing jumps. The scroller has no transform: fixed elements inside
   it (header, strip, buttons, dialogs) stay fixed to the screen, in the same stacking order as before. */
html.nmf-ff-scroll,
html.nmf-ff-scroll body {
    height: 100%;
    overflow: hidden;
}

html.nmf-ff-scroll body,
html.nmf-ff-scroll body.nmf-has-openapp {
    margin: 0;
    padding-bottom: 0;
}

html.nmf-ff-scroll #nmfScrollRoot {
    position: fixed;
    inset: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* The page's room under its end moves from <body> to the scroller. */
html.nmf-ff-scroll body.nmf-has-openapp #nmfScrollRoot {
    padding-bottom: calc(var(--nmf-openapp-h) + var(--nmf-openapp-max));
}

/* The page stays put behind an open dialog or drawer (Bootstrap's body.modal-open; home.js lockBodyScroll's
   body.mobile-menu-open, also used by shop.js's filter drawer). hidden keeps the scroll offset. */
html.nmf-ff-scroll body.modal-open #nmfScrollRoot,
html.nmf-ff-scroll body.mobile-menu-open #nmfScrollRoot {
    overflow-y: hidden;
}

/* Pull-to-refresh on the scroller (deeplinks.js pullToRefresh; Firefox's own pulls only the document). A round arrow
   comes out from under the header (.sticky-bar.stick, z-index 1000; the strip is 998) as the page is pulled down at its
   top, turns as it comes, is full colour once letting go reloads, and spins while the page reloads. */
html.nmf-ff-scroll .nmf-ptr {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 999;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(16, 16, 16, 0.25);
    opacity: 0;
    transform: translateY(calc(var(--nmf-pull, 0px) - 48px));
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
    pointer-events: none;
}

html.nmf-ff-scroll .nmf-ptr.is-pulling {
    opacity: 1;
    transition: none;
}

html.nmf-ff-scroll .nmf-ptr::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 2.5px solid #3C50E0;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: 0.45;
    transform: rotate(var(--nmf-pull-turn, 0deg));
}

html.nmf-ff-scroll .nmf-ptr.is-ready::before,
html.nmf-ff-scroll .nmf-ptr.is-refreshing::before {
    opacity: 1;
}

html.nmf-ff-scroll .nmf-ptr.is-refreshing::before {
    animation: nmf-ptr-spin 0.8s linear infinite;
}

@keyframes nmf-ptr-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---- /app dialog, "Get the app" (#ModalGetApp in _footer.cshtml, opened by footer-apps.js on /?getapp=1: at once for a
   computer, and for a phone only when the page is still showing APP_FALLBACK_MS after the store-app link). footer-apps.js
   moves it under <body>, so none of the .footer--nm rules reach it: the badges repeat them here. No .modal-dialog-scrollable: site.css:839 turns that into a full-screen sheet. */
.nmf-app-modal .modal-dialog {
    max-width: 440px;
    margin-inline: auto;
    padding-inline: 16px;
}

/* common.css makes every .modal-content transparent; this dialog brings its own white panel. */
.nmf-app-modal .modal-content {
    border: 0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(16, 16, 16, 0.22), 0 2px 8px rgba(16, 16, 16, 0.08);
    color: #111214;
    overflow: hidden;
}

.nmf-app-modal .modal-header {
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid #ECEEF1;
}

.nmf-app-modal .modal-title {
    margin: 0;
    color: #111214;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}

[dir="rtl"] .nmf-app-modal .btn-close {
    margin: -0.5rem auto -0.5rem -0.5rem;
}

.nmf-app-modal .modal-body {
    padding: 20px 24px 24px;
}

.nmf-app-modal .nmf-app-text {
    margin: 0 0 16px;
    color: #4A4F57;
    font-size: 15px;
    line-height: 1.45;
}

.nmf-app-modal .nmf-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.nmf-app-modal .nmf-badge {
    display: inline-block;
    line-height: 0;
    border-radius: 8px;
    transition: transform .2s ease;
}

.nmf-app-modal .nmf-badge img {
    display: block;
    height: 48px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.nmf-app-modal .nmf-badge:hover {
    transform: translateY(-2px);
}

.nmf-app-modal .nmf-badge:focus {
    outline: none;
}

.nmf-app-modal .nmf-badge:focus-visible {
    outline: 2px solid var(--nm-blue, #2E7BE5) !important;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .nmf-app-modal .nmf-badge { transition: none; }
    .nmf-app-modal .nmf-badge:hover { transform: none; }
}


/* ---- "Get the app": store badges (Views/Shared/_footer.cshtml + assets/js/footer-apps.js) ----
   The column is rendered [hidden]; footer-apps.js fills it, adds .nmf-cols--apps to the grid and shows it only
   when at least one store link exists. Without a link none of the rules below apply: the three columns above
   stay exactly as they are. The badge PNG IS the button (official artwork, transparent outside the badge):
   no box, no background. Grid and flex follow the page direction, so the column mirrors in Arabic.
     < 600px      2 x 2 grid: the column takes the free cell next to Quick Links; badges stack.
     600-1023px   the three columns keep their row; the column gets a full-width row below, badges side by side.
     >= 1024px    four columns on one row, spread edge to edge; badges stacked. */
.footer--nm .nmf-col-getapp[hidden] {
    display: none;
}

.footer--nm .nmf-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

.footer--nm .nmf-badge {
    display: inline-block;
    line-height: 0;
    border-radius: 8px;
    transition: transform .2s ease;
}

.footer--nm .nmf-badge img {
    display: block;
    height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.footer--nm .nmf-badge:hover {
    transform: translateY(-2px);
    opacity: 1;
}

.footer--nm .nmf-badge:focus {
    outline: none;
}

.footer--nm .nmf-badge:focus-visible {
    outline: 2px solid var(--nm-blue) !important;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .footer--nm .nmf-badge { transition: none; }
    .footer--nm .nmf-badge:hover { transform: none; }
}

@media (min-width: 600px) {
    .footer--nm .nmf-cols--apps > .nmf-col-getapp {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    .footer--nm .nmf-cols.nmf-cols--apps {
        grid-template-columns: repeat(4, auto);
        justify-content: space-between;
    }

    .footer--nm .nmf-cols--apps > .nmf-col-getapp {
        grid-column: auto;
    }

    .footer--nm .nmf-col-getapp .nmf-badges {
        flex-direction: column;
    }
}

@media (max-width: 575px) {
    .footer--nm .nmf-badge img {
        height: 36px;
    }
}