/* ============================================================
   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;
}

.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;
    }
}

/* ---- /app dialog, "Get the app" (#ModalGetApp in _footer.cshtml, opened by footer-apps.js on /?getapp=1 for a computer; a
   phone goes on to its store). 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;
    }
}