/* ==========================================================================
   Site header with mega menu (header.inc.php + the HTML_HEADER_MENU translation)
   Measured from the 1920 prints: a 68px white bar with the logo, a pill-shaped
   group of menu triggers and the account links; each trigger opens a full-width
   panel under the bar, laid out on the 1320px grid. Behaviour: js/mega-menu.js.
   Panel variants:
     .mm-panel--feature  three columns + a highlight card   (Receber pagamentos)
     .mm-panel--grid     4-column grid of single-line links (Meios de pagamento)
     .mm-panel--cols-3   three columns                      (Integrações, Para o seu negócio)
     .mm-panel--cols-2   two columns                        (Empresa)
   Any panel can end with a .mm-footer "Ver todos" link.
   Desktop from 1200px (tightened between 1200 and 1359px). Below that the bar
   shows the logo and a menu button, which opens the same menu as a full-screen
   drawer (390 print): accordion rows, then Suporte, the account buttons and the
   languages ("Drawer" section at the end).
   ========================================================================== */

/* The pages' <nav class="navbar ..."> wrapper: no padding of its own (some pages set it
   inline), above the page content so the panels can overlap it */
nav.navbar:has(> .mm-header) {
    position: relative;
    z-index: 1000;
    display: block;
    min-height: 68px; /* keeps the page in place while the open drawer takes the header out of the flow */
    padding: 0 !important;
    background: #fff;
}

.mm-header {
    --mm-ink: #031E1C;         /* titles, "Entrar" */
    --mm-text: #45556C;        /* menu triggers, card text */
    --mm-muted: #526178;       /* link descriptions */
    --mm-blue: #3B90FF;
    --mm-blue-soft: #EFF6FF;   /* active trigger, icon circles, badge */
    --mm-line: #E2E8F0;
    --mm-card: #F8F9FB;

    position: relative;
    width: 100%;
    background: #fff;
    font-family: "ProximaNova-Regular", sans-serif;
}

.mm-header *,
.mm-header *::before,
.mm-header *::after {
    box-sizing: border-box;
}

.mm-header a {
    text-decoration: none;
}

.mm-header ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mm-header li {
    padding: 0;
}

.mm-header p {
    margin: 0;
}

.mm-header svg {
    display: block;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mm-header .mm-container {
    width: min(1320px, 100% - 40px);
    max-width: none;
    margin: 0 auto;
    padding: 0;
}

.mm-header :focus-visible {
    outline: 2px solid var(--mm-blue);
    outline-offset: 2px;
}


/* ---- Bar ---------------------------------------------------------------- */

.mm-bar {
    display: flex;
    align-items: center;
    height: 68px;
}

.mm-logo {
    display: block;
    flex: none;
    margin: 0;
    padding: 0;
}

.mm-header .mm-logo img {
    display: block;
    width: 157px;
    height: auto;
}

/* header-partner.inc.php: the partner's logo after Eupago's */
.mm-header .mm-partner-logo {
    width: auto;
    height: 28px;
    margin-left: 16px;
}

/* Below 1200px: logo + menu button (opens the drawer) */
.mm-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--mm-line);
    border-radius: 999px;
    background: #fff;
    color: var(--mm-ink);
    cursor: pointer;
}

.mm-burger svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.8;
}

.mm-menu {
    display: none;
}

/* Menu triggers (and the plain "Preçário" link) */
.mm-header .mm-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 36px;
    margin: 0;
    padding: 0 12px 0 15px; /* 15px before the label; the chevron's 12px box + 12px gives 15px after */
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--mm-text);
    font-family: "FontsFree-Net-Proxima-Nova-Sbold", sans-serif;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: -.012em; /* the design's labels run ~1.5% narrower than the browser draws them */
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.mm-header a.mm-trigger {
    padding-right: 15px;
}

.mm-trigger svg {
    width: 12px;
    height: 12px;
    stroke-width: 2;
    transition: transform .2s ease;
}

.mm-header .mm-trigger:hover {
    color: var(--mm-blue);
}

.mm-header .mm-trigger[aria-expanded="true"] {
    background: var(--mm-blue-soft);
    color: var(--mm-blue);
}

.mm-trigger[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Account links */
.mm-actions {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.mm-header .mm-support {
    margin-right: 14px;
    color: var(--mm-text);
    font-family: "FontsFree-Net-Proxima-Nova-Sbold", sans-serif;
    font-size: 13.5px;
}

.mm-header .mm-support:hover {
    color: var(--mm-blue);
}

.mm-header .mm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--mm-line);
    border-radius: 999px;
    background: #fff;
    color: var(--mm-ink);
    font-family: "FontsFree-Net-Proxima-Nova-Sbold", sans-serif;
    font-size: 13.5px;
    line-height: 1;
    white-space: nowrap;
    transition: border-color .2s ease, background-color .2s ease;
}

.mm-header .mm-btn:hover {
    border-color: var(--mm-blue);
    color: var(--mm-ink);
}

.mm-header .mm-btn--primary {
    margin-left: 13px;
    border-color: var(--mm-blue);
    background: var(--mm-blue);
    color: #fff;
}

.mm-header .mm-btn--primary:hover {
    border-color: #1F7BF2;
    background: #1F7BF2;
    color: #fff;
}

/* Language selector */
.mm-lang {
    position: relative;
    margin-left: 23px;
}

.mm-header .mm-lang__button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 5.5px 0 0;
    border: 0;
    background: none;
    color: #64748B;
    font-family: "FontsFree-Net-Proxima-Nova-Sbold", sans-serif;
    font-size: 13.5px;
    cursor: pointer;
}

.mm-lang__button .mm-lang__globe {
    width: 13px;
    height: 13px;
    stroke-width: 1.6;
}

.mm-lang__button .mm-lang__chevron {
    width: 9px;
    height: 9px;
    margin-left: 1px;
    stroke-width: 2.2;
}

.mm-lang__list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 2;
    min-width: 132px;
    padding: 6px;
    border: 1px solid var(--mm-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(16, 32, 70, .1);
}

.mm-lang__list[hidden] {
    display: none;
}

.mm-header .mm-lang__list a {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--mm-ink);
    font-family: "FontsFree-Net-Proxima-Nova-Sbold", sans-serif;
    font-size: 13px;
}

.mm-header .mm-lang__list a:hover,
.mm-header .mm-lang__list a[aria-current="true"] {
    background: var(--mm-blue-soft);
    color: var(--mm-blue);
}


/* ---- Panels ------------------------------------------------------------- */

/* Full-width white panel under the bar */
.mm-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 32px 0;
    border-top: 1px solid #F1F4F8;
    border-bottom: 1px solid var(--mm-line);
    background: #fff;
    box-shadow: 0 24px 32px -16px rgba(16, 32, 70, .12);
    animation: mm-panel-in .16s ease-out;
}

.mm-panel[hidden] {
    display: none;
}

@keyframes mm-panel-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.mm-cols {
    display: grid;
}

/* Columns are split by a 1px rule, the next one starting 24px after it */
.mm-col {
    padding-bottom: 7px;
}

.mm-col + .mm-col {
    padding-left: 24px;
}

.mm-col:not(:last-child) {
    border-right: 1px solid var(--mm-line);
}

.mm-panel--feature .mm-cols {
    grid-template-columns: minmax(0, 331fr) minmax(0, 355fr) minmax(0, 355fr) minmax(0, 279fr);
}

.mm-panel--cols-3 .mm-cols {
    grid-template-columns: minmax(0, 424fr) minmax(0, 448fr) minmax(0, 448fr);
}

.mm-panel--cols-2 .mm-cols {
    grid-template-columns: minmax(0, 648fr) minmax(0, 672fr);
}

.mm-header .mm-col__title {
    margin-bottom: 32px;
    color: var(--mm-ink);
    font-family: "Proxima Nova Bold", sans-serif;
    font-size: 15px;
    line-height: 18px;
}

.mm-links {
    display: grid;
    gap: 27px;
}

.mm-header .mm-link {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-left: 12px;
}

.mm-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mm-blue-soft);
    color: var(--mm-blue);
}

.mm-icon svg {
    width: 13px;
    height: 13px;
}

/* The two wider icons of the design set keep their own proportions */
.mm-icon svg:has(use[href="#i-split"]) {
    width: 20px;
    height: 16px;
}

.mm-icon svg:has(use[href="#i-euro-e"]) {
    width: 13px;
    height: 16px;
}

.mm-link__text {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.mm-link__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mm-ink);
    font-family: "FontsFree-Net-Proxima-Nova-Sbold", sans-serif;
    font-size: 13px;
    line-height: 16px;
    transition: color .15s ease;
}

/* Links that leave the site (documentation) */
.mm-link__title svg {
    width: 10px;
    height: 10px;
    color: #A3AFC0;
    stroke-width: 2;
}

.mm-link__desc {
    color: var(--mm-muted);
    font-size: 11px;
    line-height: 14px;
}

.mm-header .mm-link:hover .mm-link__title,
.mm-header .mm-link:focus-visible .mm-link__title {
    color: var(--mm-blue);
}

/* Highlight card: 12px after the third column's rule, 7px lower than the columns */
.mm-col.mm-feature-cell {
    padding-left: 12px;
    padding-bottom: 0;
}

.mm-feature {
    position: relative;
    overflow: hidden;
    height: 100%;
    margin-top: 7px;
    padding: 19px 20px 24px;
    border-radius: 12px;
    background: var(--mm-card);
}

.mm-feature__body {
    position: relative;
    z-index: 1;
    max-width: 155px; /* the design's line breaks: "Aceite pagamentos com / cartão físicos e digitais / ..." */
}

.mm-header .mm-feature__badge {
    display: inline-flex;
    align-items: center;
    height: 23px;
    padding: 0 8px;
    border: 1px solid #D6E8FE;
    border-radius: 4px;
    background: var(--mm-blue-soft);
    color: var(--mm-blue);
    font-family: "FontsFree-Net-Proxima-Nova-Sbold", sans-serif;
    font-size: 10px;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.mm-header .mm-feature__title {
    margin-top: 12px;
    color: var(--mm-ink);
    font-family: "Proxima Nova Bold", sans-serif;
    font-size: 18px;
    line-height: 23px;
}

.mm-header .mm-feature__text {
    margin-top: 6px;
    color: var(--mm-text);
    font-size: 14px;
    line-height: 20px;
}

.mm-header .mm-feature__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 11px;
    color: var(--mm-blue);
    font-family: "FontsFree-Net-Proxima-Nova-Sbold", sans-serif;
    font-size: 13px;
    line-height: 18px;
}

.mm-feature__link::after {
    content: "";
    width: 20px;
    height: 1px;
    background: currentColor;
    transition: width .2s ease;
}

.mm-header .mm-feature__link:hover {
    color: #1F7BF2;
}

.mm-feature__link:hover::after {
    width: 28px;
}

/* The hand holding the TPA, cut off by the card's right and bottom edges */
.mm-feature__img {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: 100%;
    /* blends the photo's own background into the card's */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px);
}

/* Meios de pagamento: four columns of single-line links */
.mm-panel--grid {
    padding-top: 44px;
}

.mm-panel--grid .mm-links {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 8px;
}

.mm-header .mm-panel--grid .mm-link {
    gap: 11px;
    padding-left: 13px;
}

/* "Ver todos" link under a panel */
.mm-footer {
    margin-top: 20px;
    padding-top: 22.5px;
    border-top: 1px solid var(--mm-line);
}

.mm-panel--grid .mm-footer {
    margin-top: 36px;
}

.mm-panel:has(.mm-footer) {
    padding-bottom: 31.5px;
}

.mm-header .mm-footer__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--mm-blue);
    font-family: "FontsFree-Net-Proxima-Nova-Sbold", sans-serif;
    font-size: 13px;
    line-height: 18px;
}

.mm-footer__link svg {
    width: 12px;
    height: 12px;
    stroke-width: 2;
    transition: transform .2s ease;
}

.mm-header .mm-footer__link:hover {
    color: #1F7BF2;
}

.mm-footer__link:hover svg {
    transform: translateX(3px);
}


/* ---- Desktop ------------------------------------------------------------ */

@media (min-width: 1200px) {
    .mm-burger {
        display: none;
    }

    .mm-menu {
        display: flex;
        flex: 1;
        align-items: center;
        min-width: 0;
    }

    /* The pill-shaped group: 788 x 46 at 1920, 24px after the logo */
    .mm-header .mm-nav {
        display: flex;
        align-items: center;
        gap: 3px;
        height: 46px;
        margin-left: 24px;
        padding: 0 4px;
        border: 1px solid var(--mm-line);
        border-radius: 999px;
    }
}

/* 1200-1359px: the same bar, tightened to fit (the design needs the full 1320px) */
@media (min-width: 1200px) and (max-width: 1359.98px) {
    .mm-header .mm-logo img {
        width: 132px;
    }

    .mm-header .mm-nav {
        gap: 0;
        margin-left: 16px;
    }

    .mm-header .mm-trigger {
        padding: 0 8px 0 11px;
    }

    .mm-header a.mm-trigger {
        padding-right: 11px;
    }

    .mm-header .mm-support {
        display: none;
    }

    .mm-lang {
        margin-left: 14px;
    }
}

/* Labels that differ between the desktop bar and the drawer ("Registo" / "Criar conta grátis",
   "Português" / "PT") */
.mm-mobile-only {
    display: none;
}

.mm-burger__close {
    display: none !important;
}


/* ---- Drawer (below 1200px), from the 390 print ------------------------------ */

@media (max-width: 1199.98px) {
    html.mm-locked,
    html.mm-locked body {
        overflow: hidden;
    }

    .mm-desktop-only {
        display: none;
    }

    .mm-mobile-only {
        display: inline;
    }

    /* Open: the header is pinned to the top and the menu fills the rest of the screen */
    .mm-header.mm-open {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1100;
        border-bottom: 1px solid #EEF1F5;
    }

    .mm-header.mm-open .mm-burger {
        margin-right: -8px; /* the cross sits 28px from the edge */
        border-color: transparent;
    }

    .mm-header.mm-open .mm-burger__open {
        display: none;
    }

    .mm-header.mm-open .mm-burger__close {
        display: block !important;
        width: 15px;
        height: 15px;
        stroke-width: 2;
    }

    .mm-header.mm-open .mm-menu {
        position: fixed;
        top: 69px;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 10.7px 20px 48px;
        background: #fff;
    }

    /* Top-level rows: 48px, 13px semibold, a rule under each */
    .mm-header .mm-nav > li {
        border-bottom: 1px solid var(--mm-line);
    }

    .mm-header .mm-nav > li:has(> .mm-trigger[aria-expanded="true"]) {
        padding-bottom: 4px;
    }

    .mm-header .mm-trigger,
    .mm-header a.mm-trigger,
    .mm-header .mm-support {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 47.2px;
        min-height: 0;
        margin: 0;
        padding: 0;
        border-radius: 0;
        color: var(--mm-ink);
        font-size: 13px;
        letter-spacing: 0;
    }

    .mm-header .mm-trigger[aria-expanded="true"] {
        background: none;
    }

    /* The chevron points right, and down when the row is open */
    .mm-trigger svg {
        width: 13px;
        height: 13px;
        stroke-width: 1.8;
        transform: rotate(-90deg);
    }

    .mm-trigger[aria-expanded="true"] svg {
        transform: none;
    }

    /* Plain link rows (Preçário) get the same chevron */
    .mm-header a.mm-trigger::after {
        content: "";
        width: 6px;
        height: 6px;
        margin-right: 4px;
        border-right: 1.4px solid currentColor;
        border-bottom: 1.4px solid currentColor;
        transform: rotate(-45deg);
    }

    /* Panels open in place, one column under the other */
    .mm-panel {
        position: static;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }

    .mm-panel:has(.mm-footer) {
        padding-bottom: 0;
    }

    .mm-header .mm-panel .mm-container {
        width: auto;
    }

    .mm-cols {
        display: block;
    }

    .mm-col,
    .mm-col + .mm-col {
        padding: 0;
        border: 0 !important;
    }

    .mm-col + .mm-col {
        margin-top: 33.5px;
    }

    .mm-header .mm-col__title {
        margin-bottom: 21.5px;
        padding-left: 3px;
        font-size: 12.5px;
        line-height: 15px;
    }

    .mm-links {
        gap: 24px;
    }

    .mm-header .mm-link {
        gap: 11px;
        padding-left: 8px;
    }

    .mm-link__title {
        font-size: 12.2px;
    }

    .mm-link__desc {
        font-size: 10.5px;
        line-height: 13px;
    }

    /* Meios de pagamento: two columns of single-line links */
    .mm-panel--grid {
        padding-top: 4px;
    }

    .mm-panel--grid .mm-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 8px;
    }

    .mm-header .mm-panel--grid .mm-link {
        padding-left: 8px;
    }

    .mm-footer,
    .mm-panel--grid .mm-footer {
        margin-top: 22px;
        padding-top: 16px;
    }

    /* Highlight card: full width, white with a hairline, the hand on the right */
    .mm-col.mm-feature-cell {
        margin-top: 19.5px;
        padding: 0;
    }

    .mm-feature {
        margin-top: 0;
        padding: 14px 19px 17.5px;
        border: 1px solid var(--mm-line);
        background: #fff;
    }

    .mm-feature__body {
        max-width: 245px;
    }

    .mm-header .mm-feature__badge {
        height: 22px;
        font-size: 9.5px;
    }

    .mm-header .mm-feature__title {
        margin-top: 9.5px;
        font-size: 17px;
        line-height: 22px;
    }

    .mm-header .mm-feature__text {
        margin-top: 4.3px;
        font-size: 13.3px;
        line-height: 19.5px;
    }

    .mm-header .mm-feature__link {
        margin-top: 12.8px;
        font-size: 12px;
    }

    /* Suporte as the last row, then the account buttons and the languages */
    .mm-actions {
        display: block;
    }

    .mm-header .mm-support {
        height: 48.2px;
        border-bottom: 1px solid var(--mm-line);
        color: #64748B;
    }

    .mm-header .mm-support::after {
        content: "";
        width: 13px;
        height: 13px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") center / contain no-repeat;
        opacity: .8;
    }

    .mm-header .mm-btn,
    .mm-header .mm-btn--primary {
        display: flex;
        width: 100%;
        height: 45px;
        margin: 22px 0 0;
        font-size: 13px;
    }

    .mm-header .mm-btn--primary {
        height: 43px;
        margin-top: 12px;
    }

    .mm-lang {
        margin: 23px 0 0;
    }

    .mm-header .mm-lang__button {
        display: none;
    }

    /* Always shown here (Bootstrap hides [hidden] with !important) */
    .mm-lang__list,
    .mm-lang__list[hidden] {
        position: static;
        display: flex !important;
        align-items: center;
        min-width: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .mm-lang__list li + li::before {
        content: "/";
        margin: 0 9px;
        color: #CBD5E1;
        font-size: 12px;
    }

    .mm-lang__list li {
        display: flex;
        align-items: center;
    }

    .mm-header .mm-lang__list a {
        display: grid;
        place-items: center;
        min-width: 31px;
        height: 28px;
        padding: 0 7px;
        border-radius: 999px;
        color: var(--mm-text);
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mm-header *,
    .mm-header *::after {
        animation: none !important;
        transition: none !important;
    }
}