@layer infine.components {
/* ===========================================================
   Connect module
   =========================================================== */

/* The band Connect's pill nav sits in is the one every module draws; its rules
   are in module-band.css. What follows is what only Connect puts in that band. */

.connect-nav-divider-icon {
    color: var(--infine-blue-light);
    flex-shrink: 0;
}

.connect-nav-pills {
    display: flex;
    align-items: center;
    gap: var(--mantine-spacing-xs);
    /* The scope control gives way first; a pill that shrank would wrap its label onto two lines. */
    flex-shrink: 0;
}

/* The retailer card is absolute, so nothing in the band knows it covers the band's right end.
   Reserving its width here is what makes a wide scope control shrink rather than push the
   last pill under the card. */
.connect-content .module-band {
    padding-right: calc(var(--connect-rail-width) + 2 * var(--mantine-spacing-xl));
}

.module-band .retailer-col {
    display: flex;
    align-items: center;
    gap: var(--mantine-spacing-sm);
}

.module-band .retailer-col .label {
    font-family: var(--mantine-font-family-headings);
    font-weight: 700;
    font-size: 14px;
    color: var(--infine-blue);
    white-space: nowrap;
}

.connect-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--mantine-spacing-xs);
    padding: var(--infine-spacing-xxs) var(--mantine-spacing-sm);
    border-radius: 4px;
    font-family: var(--mantine-font-family-headings);
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: var(--infine-blue);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.connect-nav-pill:hover {
    background-color: var(--infine-blue-light-fade);
}

.connect-nav-pill--active {
    background-color: var(--infine-blue);
    color: white;
    font-weight: 700;
}

.connect-nav-pill--active:hover {
    background-color: var(--infine-blue);
}

.connect-nav-spacer { flex: 1 0 auto; }

/* Retailer combination-logo card — white rounded card anchored top-right of
   the Connect shell, centred on the 2nd-level-nav / content boundary. Absolute,
   so it never pushes content down. */
.connect-retailer-logo {
    position: absolute;
    /* Anchored straddling the 2nd-level-nav / content boundary (the 64px nav
       top edge is at 0 within the shell). 84px keeps the card clear of the
       title bar's Single/Grid toggle below. */
    top: 15px;
    right: var(--mantine-spacing-xl);
    z-index: 5;                 /* above the title bar */
    /* Pinned to the right-hand rail (Single/Grid toggle + marginalia column
       below) so all three line up. The logo image scales to fit (see below). */
    width: var(--connect-rail-width);
    height: 84px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--mantine-spacing-xl);
    background: white;
    border: 1px solid var(--infine-green-lite-fade);
    border-radius: var(--mantine-radius-md);
    /* Purely decorative — don't trap clicks over the nav / content beneath. */
    pointer-events: none;
}

.connect-retailer-logo img {
    /* Scale to the now-fixed card width, capped at the original 49px so it
       never grows; lets the wide combination logo stay contained when the
       rail narrows to 280px at ≤1280. */
    width: 100%;
    height: auto;
    max-height: 49px;
    display: block;
}
}