/* ==========================================================================
   Bonus modal backdrop and card
   ========================================================================== */
.bm-back {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: radial-gradient(120% 120% at 50% 0%,rgba(12,16,24,.82),rgba(3,5,9,.92));
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .32s ease,visibility 0s linear .32s;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

.bm-back.bm-on {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .32s ease,visibility 0s;
}

.bm-card {
    position: relative;
    width: 100%;
    max-width: 494px;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(168deg,#161922 0%,#0e1017 46%,#090b10 100%);
    box-shadow: 0 40px 90px -20px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.08);
    transform: translateY(20px) scale(.965);
    opacity: 0;
    transition: transform .42s cubic-bezier(.16,1,.3,1),opacity .34s ease;
}

.bm-back.bm-on .bm-card {
    transform: none;
    opacity: 1;
}

.bm-aura {
    position: absolute;
    top: -52%;
    left: 50%;
    width: 130%;
    height: 80%;
    transform: translateX(-50%);
    pointer-events: none;
    filter: blur(46px);
    opacity: .5;
    background: radial-gradient(closest-side,rgba(64,120,255,.4),transparent 72%);
}

/* ==========================================================================
   Bonus modal header
   ========================================================================== */
.bm-head {
    position: relative;
    z-index: 2;
    padding: 24px 24px 18px;
    text-align: center;
}

.bm-head::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
}

.bm-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #7ee0a8;
    text-transform: uppercase;
    margin-bottom: 11px;
    padding: 5px 11px;
    border-radius: 99px;
    background: rgba(126,224,168,.09);
    border: 1px solid rgba(126,224,168,.24);
}

.bm-kicker::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 7px currentColor;
    animation: bmPulse 1.5s ease-in-out infinite;
}

.bm-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: #fff;
}

.bm-head p {
    margin: 7px 0 0;
    font-size: 12px;
    color: #7b8494;
    letter-spacing: .1px;
}

.bm-x {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 3;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(0,0,0,.35);
    color: #9aa2b1;
    font-size: 16px;
    line-height: 1;
    transition: all .2s ease;
}

.bm-x:hover {
    background: rgba(255,255,255,.13);
    color: #fff;
    transform: rotate(90deg);
    border-color: rgba(255,255,255,.3);
}

.bm-x:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ==========================================================================
   Brand rows and footer
   ========================================================================== */
.bm-list {
    position: relative;
    z-index: 2;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: min(58vh,430px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.16) transparent;
}

.bm-list::-webkit-scrollbar {
    width: 5px;
}

.bm-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.16);
    border-radius: 9px;
}

.bm-list::-webkit-scrollbar-track {
    background: transparent;
}

.bm-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 13px;
    border-radius: 13px;
    text-decoration: none;
    isolation: isolate;
    background: rgba(255,255,255,.032);
    border: 1px solid rgba(255,255,255,.06);
    opacity: 0;
    transform: translateY(8px);
    animation: bmRow .5s cubic-bezier(.16,1,.3,1) forwards;
    transition: border-color .2s ease,transform .2s ease,background .2s ease;
}

.bm-row::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 13px;
    z-index: -1;
    opacity: 0;
    background: radial-gradient(120% 160% at 0% 50%,var(--c) 0%,transparent 58%);
    transition: opacity .25s ease;
}

.bm-row:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb,var(--c) 45%,transparent);
    background: rgba(255,255,255,.055);
}

.bm-row:hover::before {
    opacity: .11;
}

.bm-row:active {
    transform: translateY(0);
}

.bm-row:focus-visible {
    outline: 2px solid var(--c);
    outline-offset: 2px;
}

.bm-logo {
    width: 76px;
    height: 28px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

.bm-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}

.bm-txt {
    flex: 1;
    min-width: 0;
}

.bm-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bm-offer {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--c);
    line-height: 1.28;
    letter-spacing: -.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bm-tag {
    flex-shrink: 0;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .7px;
    padding: 2.5px 6px;
    border-radius: 4px;
    color: var(--c);
    background: color-mix(in srgb,var(--c) 15%,transparent);
    border: 1px solid color-mix(in srgb,var(--c) 35%,transparent);
}

.bm-sub {
    display: block;
    font-size: 10.8px;
    color: #767f8f;
    margin-top: 2.5px;
    letter-spacing: .1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bm-cta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .6px;
    color: #0a0c11;
    background: var(--c);
    padding: 9px 13px;
    border-radius: 8px;
    box-shadow: 0 4px 14px color-mix(in srgb,var(--c) 32%,transparent);
    transition: gap .2s ease;
}

.bm-row:hover .bm-cta {
    gap: 8px;
}

.bm-cta svg {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
}

.bm-foot {
    position: relative;
    z-index: 2;
    padding: 12px;
    text-align: center;
    font-size: 9.5px;
    letter-spacing: .2px;
    color: #565e6c;
    border-top: 1px solid rgba(255,255,255,.055);
    background: rgba(0,0,0,.28);
}

.bm-foot b {
    color: #828b99;
    font-weight: 700;
}

/* ==========================================================================
   Motion and responsive behavior
   ========================================================================== */
@keyframes bmRow {
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes bmPulse {
    0%,100% {
        opacity: 1;
    }

    50% {
        opacity: .28;
    }
}

@media (max-width: 520px) {
    .bm-card { max-width: 100%; border-radius: 16px; }
    .bm-head { padding: 20px 20px 15px; }
    .bm-head h2 { font-size: 17px; }
    .bm-list { padding: 11px; gap: 6px; }
    .bm-row { gap: 10px; padding: 10px 11px; }
    .bm-logo { width: 60px; height: 24px; }
    .bm-offer { font-size: 12.2px; }
    .bm-sub { font-size: 10px; }
    .bm-cta { padding: 8px 10px; font-size: 9.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .bm-card,.bm-row {
        transition: none;
        animation: none;
        opacity: 1;
        transform: none;
    }

    .bm-back {
        transition: none;
    }

    .bm-kicker::before {
        animation: none;
    }
}