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