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

/* 2nd-level pill nav row (matches Figma node 71:236)
   Full-width container with the 2px green strip, inner row keeps the
   horizontal padding so pills don't run flush to the viewport edge. */
.connect-2nd-nav-wrap {
    width: 100%;
    border-bottom: 2px solid var(--infine-green-lite-fade);
    background-color: var(--infine-green-lite-fade2);
}

.connect-2nd-nav {
    display: flex;
    align-items: center;
    gap: var(--mantine-spacing-xs);
    padding: 10px var(--mantine-spacing-xl);
    height: 64px;
}

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

.connect-2nd-nav .retailer-col {
    display: flex;
    align-items: center;
    gap: var(--mantine-spacing-sm);
}

.connect-2nd-nav .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; }

.connect-retailer-select { width: 280px; }

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