#ifi-promotions {
    box-sizing: border-box;
    width: min(990px, calc(100% - 32px));
    max-width: none;
    max-height: 90vh;
    max-height: 90dvh;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: #182f43;
    box-shadow: 0 20px 70px rgb(0 0 0 / 35%);
    font: 16px/1.4 system-ui, sans-serif;
    overflow: hidden;
}

#ifi-promotions:not([open]) { display: none; }
#ifi-promotions[open] { display: flex; flex-direction: column; }
#ifi-promotions:has(.ifi-promotions-carousel[data-count="1"]) { max-width: 600px; }
#ifi-promotions::backdrop { background: rgb(0 0 0 / 65%); }
html.ifi-promotions-open { overflow: hidden; }

@keyframes ifi-promotions-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

#ifi-promotions[open],
#ifi-promotions[open]::backdrop {
    animation: ifi-promotions-fade-in 180ms ease-out both;
}

#ifi-promotions .ifi-promotions-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
    padding: 6px 12px;
}

#ifi-promotions .ifi-promotions-close {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 6px;
    background: #edf2f6;
    color: #182f43;
    font: 32px/1 system-ui, sans-serif;
    cursor: pointer;
}

#ifi-promotions .ifi-promotions-close:hover { background: #dce6ed; }
#ifi-promotions .ifi-promotions-body { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 0 12px 12px; }

/* Spotlight carousel: the active card sits centered at full size; the ring
   neighbours (data-position ±1) peek from the dialog edges, scaled and
   dimmed, and are clipped by the dialog's own overflow: hidden. */
#ifi-promotions .ifi-promotions-carousel { position: relative; display: flex; flex-direction: column; }
#ifi-promotions .ifi-promotions-track { position: relative; display: grid; grid-template-areas: "stack"; place-items: center; padding: 0 12px; }
#ifi-promotions .ifi-promotions-card {
    grid-area: stack;
    display: block;
    width: min(570px, 100%);
    min-width: 0;
    margin: 0;
    border-radius: 4px;
    color: #075d9d;
    background: #f3f6f9;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    transition: transform 600ms ease, opacity 600ms ease, filter 600ms ease;
}
#ifi-promotions .ifi-promotions-card[data-position="0"] { z-index: 2; opacity: 1; transform: translateX(0) scale(1); }
#ifi-promotions .ifi-promotions-card[data-position="1"] { z-index: 1; opacity: 0.6; filter: saturate(0.8); transform: translateX(88%) scale(0.78); }
#ifi-promotions .ifi-promotions-card[data-position="-1"] { z-index: 1; opacity: 0.6; filter: saturate(0.8); transform: translateX(-88%) scale(0.78); }
/* The strip is linear: cards two steps out park off-canvas and stop the
   rotation instead of wrapping around to the far side. */
#ifi-promotions .ifi-promotions-card[data-position="2"] { z-index: 0; opacity: 0; pointer-events: none; transform: translateX(150%) scale(0.7); }
#ifi-promotions .ifi-promotions-card[data-position="-2"] { z-index: 0; opacity: 0; pointer-events: none; transform: translateX(-150%) scale(0.7); }
#ifi-promotions .ifi-promotions-card[data-position="1"]:hover,
#ifi-promotions .ifi-promotions-card[data-position="-1"]:hover { opacity: 0.9; filter: none; }

#ifi-promotions .ifi-promotions-arrow {
    position: absolute;
    top: calc(50% - 23px);
    z-index: 5;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0 0 4px;
    border: 0;
    border-radius: 50%;
    background: rgb(237 242 246 / 92%);
    color: #182f43;
    font: 34px/1 system-ui, sans-serif;
    cursor: pointer;
}
#ifi-promotions .ifi-promotions-arrow:hover { background: #dce6ed; }
#ifi-promotions .ifi-promotions-arrow[disabled] { opacity: 0.35; cursor: default; }
#ifi-promotions .ifi-promotions-prev { left: 10px; }
#ifi-promotions .ifi-promotions-next { right: 10px; }
#ifi-promotions .ifi-promotions-carousel[data-count="1"] .ifi-promotions-arrow { display: none; }

#ifi-promotions .ifi-promotions-dots { display: flex; justify-content: center; gap: 10px; padding: 14px 0 4px; }
#ifi-promotions .ifi-promotions-dot {
    width: 12px;
    height: 12px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: #c8d5e0;
    cursor: pointer;
}
#ifi-promotions .ifi-promotions-dot[aria-current="true"] { background: #075d9d; }

#ifi-promotions .ifi-promotions-image { display: block; width: 100%; max-width: 100%; height: auto; margin: 0; padding: 0; border: 0; }
#ifi-promotions .ifi-promotions-label { display: block; padding: 10px 12px; font-weight: 600; text-align: center; }
#ifi-promotions .ifi-promotions-card:hover .ifi-promotions-label { text-decoration: underline; }
#ifi-promotions :focus-visible { outline: 3px solid #005ea8; outline-offset: -3px; }

@media (max-width: 799px) {
    #ifi-promotions { width: calc(100% - 24px); }
    /* Phones keep only a narrow sliver of the ring neighbours so the active
       card owns the view; tapping the sliver rotates it to the center. */
    #ifi-promotions .ifi-promotions-card[data-position="1"] { transform: translateX(64%) scale(0.66); }
    #ifi-promotions .ifi-promotions-card[data-position="-1"] { transform: translateX(-64%) scale(0.66); }
    #ifi-promotions .ifi-promotions-arrow { width: 38px; height: 38px; top: calc(50% - 60px); font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    #ifi-promotions[open],
    #ifi-promotions[open]::backdrop { animation: none; }
    #ifi-promotions .ifi-promotions-card { transition: none; }
}