/* =========================================================
       BONUS PAGE
       step successivo
       ========================================================= */

    .bonus-page-shell {
        position: relative;
        min-height: calc(100vh - 6.25rem);
        padding: 1.75rem 0 3.5rem;
        overflow: hidden;
    }

    .bonus-page-bg-orb {
        position: absolute;
        width: 26.25rem;
        height: 26.25rem;
        border-radius: 62.4375rem;
        filter: blur(6.875rem);
        opacity: .10;
        pointer-events: none;
        z-index: 0;
    }

    .bonus-page-bg-orb-left {
        top: 1.25rem;
        left: -8.75rem;
        background: var(--color1);
    }

    .bonus-page-bg-orb-right {
        top: 2.5rem;
        right: -8.75rem;
        background: var(--color3);
    }

    .bonus-page-container {
        position: relative;
        z-index: 1;
        max-width: 96.25rem;
        margin: 0 auto;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .bonus-page-hero {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .bonus-page-hero-left {
        min-width: 0;
        flex: 1 1 auto;
    }

    .bonus-page-hero-right {
        flex: 0 0 auto;
    }

    .bonus-page-kicker {
        display: inline-block;
        margin-bottom: .375rem;
        color: var(--color1);
        font-size: .75rem;
        line-height: 1.2;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .bonus-page-title {
        margin: 0 0 .5rem;
        color: var(--color2);
        font-size: 2.375rem;
        line-height: 1.04;
        font-weight: 900;
        letter-spacing: -.03em;
    }

    .bonus-page-subtitle {
        margin: 0;
        max-width: 52rem;
        color: rgba(255,255,255,.74);
        font-size: .9375rem;
        line-height: 1.55;
        font-weight: 500;
    }

    .bonus-hero-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.875rem;
        padding: 0 1rem;
        border-radius: .875rem;
        text-decoration: none;
        font-size: .875rem;
        font-weight: 800;
        transition: .18s ease;
    }

    .bonus-hero-btn:hover {
        text-decoration: none;
        transform: translateY(-.0625rem);
    }

    .bonus-hero-btn-secondary {
        background: rgba(255,255,255,.06);
        color: var(--color2);
        border: 1px solid rgba(255,255,255,.10);
    }

    /* ===== shared cards ===== */

    .bonus-summary-card,
    .bonus-global-progress-card,
    .bonus-filters-card,
    .bonus-card,
    .bonus-vip-card,
    .bonus-card-modern,
    .bonus-empty-state {
        background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
        border: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 1.125rem 3.125rem rgba(0,0,0,.22);
        backdrop-filter: blur(.625rem);
    }

    .bonus-summary-card,
    .bonus-global-progress-card,
    .bonus-filters-card,
    .bonus-card,
    .bonus-vip-card,
    .bonus-card-modern,
    .bonus-empty-state {
        border-radius: 1.5rem;
    }

    /* ===== summary ===== */

    .bonus-summary-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .bonus-summary-card {
        padding: 1rem 1.125rem;
    }

    .bonus-summary-label {
        margin-bottom: .5rem;
        color: rgba(255,255,255,.64);
        font-size: .75rem;
        line-height: 1.35;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .bonus-summary-value {
        color: var(--color2);
        font-size: 1.75rem;
        line-height: 1;
        font-weight: 900;
        letter-spacing: -.02em;
    }

    .bonus-global-progress-card {
        padding: 1.125rem;
        margin-bottom: 1.125rem;
    }

    .bonus-global-progress-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: .75rem;
        margin-bottom: .75rem;
    }

    .bonus-global-progress-title {
        margin-bottom: .25rem;
        color: var(--color2);
        font-size: 1.25rem;
        line-height: 1.1;
        font-weight: 900;
        letter-spacing: -.02em;
    }

    .bonus-global-progress-subtitle {
        color: rgba(255,255,255,.70);
        font-size: .8125rem;
        line-height: 1.45;
    }

    .bonus-global-progress-percentage {
        color: var(--color1);
        font-size: 2rem;
        line-height: 1;
        font-weight: 900;
        letter-spacing: -.03em;
        flex: 0 0 auto;
    }

    /* ===== filters ===== */

    .bonus-filters-card {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .bonus-filters-grid {
        display: grid;
        grid-template-columns: 13.75rem 13.75rem minmax(0, 1fr);
        gap: .875rem;
    }

    .bonus-filter-box label {
        display: block;
        margin-bottom: .5rem;
        color: var(--color2);
        font-size: .75rem;
        font-weight: 800;
        line-height: 1.2;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .bonus-filter-select,
    .bonus-filter-input {
        width: 100%;
        height: 2.875rem;
        border-radius: .875rem;
        border: 1px solid rgba(255,255,255,.10);
        background: rgba(255,255,255,.045);
        color: var(--color2);
        outline: none;
        padding: 0 .875rem;
        font-size: .875rem;
        font-weight: 600;
        transition: .18s ease;
    }

    .bonus-filter-select:focus,
    .bonus-filter-input:focus {
        border-color: color-mix(in srgb, var(--color1) 50%, white 10%);
        box-shadow: 0 0 0 .1875rem rgba(255,255,255,.03);
    }

    .bonus-filter-input::placeholder {
        color: rgba(255,255,255,.42);
    }

    /* ===== progress ===== */

    .bonus-progress-section,
    .bonus-progress-section-modern {
        margin-bottom: .875rem;
    }

    .bonus-progress-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .75rem;
        margin-bottom: .5rem;
        color: rgba(255,255,255,.82);
        font-size: .75rem;
        font-weight: 700;
    }

    .bonus-progress-bar {
        width: 100%;
        height: .75rem;
        border-radius: 62.4375rem;
        overflow: hidden;
        background: rgba(255,255,255,.08);
    }

    .bonus-progress-bar-big {
        height: .875rem;
    }

    .bonus-progress-fill {
        height: 100%;
        border-radius: 62.4375rem;
        background: linear-gradient(90deg, var(--color1), color-mix(in srgb, var(--color3) 70%, white 30%));
        box-shadow: 0 0 1rem color-mix(in srgb, var(--color1) 35%, transparent);
    }

    /* ===== generic lower cards ===== */

    .bonus-cards-grid,
    .bonus-cards-grid-modern {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .bonus-card,
    .bonus-card-modern,
    .bonus-vip-card {
        position: relative;
        overflow: hidden;
    }

    .bonus-card-freespins,
    .bonus-card-modern-freespins {
        background:
                radial-gradient(circle at top right, rgba(255,196,0,.08), transparent 30%),
                radial-gradient(circle at bottom left, rgba(0,174,255,.08), transparent 25%),
                linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    }

    .bonus-card-topline,
    .bonus-vip-card-topline {
        height: .25rem;
        width: 100%;
        background: linear-gradient(90deg, var(--color1), var(--color3));
    }

    .bonus-card-inner,
    .bonus-vip-card-inner,
    .bonus-card-modern-inner {
        padding: 1.25rem;
    }

    /* ===== main bonus card ===== */

    .bonus-card-head {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
        margin-bottom: 1rem;
    }

    .bonus-card-image {
        overflow: hidden;
        background: rgba(255,255,255,.05);
        border: 1px solid rgba(255,255,255,.06);
        box-shadow: inset 0 .0625rem 0 rgba(255,255,255,.06);
    }

    .bonus-card-image-promo {
        width: 5.75rem;
        min-width: 5.75rem;
        height: 5.75rem;
        border-radius: 1.125rem;
    }

    .bonus-card-image-game {
        width: 6.875rem;
        min-width: 6.875rem;
        height: 6.875rem;
        border-radius: 1.25rem;
        box-shadow: 0 1rem 2.125rem rgba(0,0,0,.30);
    }

    .bonus-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .bonus-card-head-main {
        flex: 1;
        min-width: 0;
    }

    .bonus-card-head-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: .75rem;
        margin-bottom: .625rem;
    }

    .bonus-card-name {
        margin-bottom: .375rem;
        color: var(--color2);
        font-size: 1.5rem;
        line-height: 1.08;
        font-weight: 900;
        letter-spacing: -.02em;
    }

    .bonus-card-code {
        color: rgba(255,255,255,.68);
        font-size: .75rem;
        line-height: 1.4;
        font-weight: 600;
    }

    .bonus-card-fs-game-line {
        margin-top: .5rem;
        font-size: .75rem;
        color: rgba(255,255,255,.82);
        display: flex;
        flex-wrap: wrap;
        gap: .25rem;
        align-items: center;
        line-height: 1.45;
    }

    .bonus-card-fs-game-label,
    .bonus-card-fs-provider {
        color: rgba(255,255,255,.55);
        font-weight: 700;
    }

    .bonus-inline-link {
        color: var(--color1);
        font-weight: 800;
        text-decoration: none;
    }

    .bonus-inline-link:hover {
        text-decoration: underline;
    }

    .bonus-card-badges,
    .bonus-card-modern-badges {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: .5rem;
        flex: 0 0 auto;
    }

    .bonus-badge,
    .bonus-badge-type,
    .bonus-vip-card-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2rem;
        padding: 0 .75rem;
        border-radius: 62.4375rem;
        font-size: .6875rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .03em;
        line-height: 1;
        white-space: nowrap;
        text-align: center;
    }

    .bonus-badge-type {
        background: rgba(255,255,255,.07);
        color: var(--color2);
        border: 1px solid rgba(255,255,255,.10);
        padding: 0 .875rem;
    }

    .promo-status-active {
        background: color-mix(in srgb, var(--color3) 28%, transparent);
        color: #a7f3d0;
        border: 1px solid color-mix(in srgb, var(--color3) 45%, transparent);
    }

    .promo-status-pending {
        background: color-mix(in srgb, var(--color1) 20%, transparent);
        color: #fde68a;
        border: 1px solid color-mix(in srgb, var(--color1) 38%, transparent);
    }

    .promo-status-redeemed {
        background: rgba(59,130,246,.16);
        color: #93c5fd;
        border: 1px solid rgba(59,130,246,.26);
    }

    .promo-status-expired {
        background: rgba(239,68,68,.16);
        color: #fca5a5;
        border: 1px solid rgba(239,68,68,.26);
    }

    .promo-status-canceled {
        background: rgba(148,163,184,.16);
        color: #cbd5e1;
        border: 1px solid rgba(148,163,184,.26);
    }

    .bonus-card-short-description,
    .bonus-card-modern-description {
        font-size: .875rem;
        line-height: 1.55;
        color: rgba(255,255,255,.76);
    }

    .bonus-pending-banner {
        display: flex;
        gap: .875rem;
        align-items: flex-start;
        background: rgba(255,255,255,.045);
        border: 1px solid rgba(255,255,255,.07);
        border-radius: 1rem;
        padding: .875rem 1rem;
        margin-bottom: 1rem;
    }

    .bonus-pending-icon {
        width: 1.75rem;
        height: 1.75rem;
        min-width: 1.75rem;
        border-radius: 62.4375rem;
        background: var(--color1);
        color: #111827;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        font-size: .75rem;
    }

    .bonus-pending-title {
        margin-bottom: .25rem;
        color: var(--color2);
        font-size: .875rem;
        line-height: 1.3;
        font-weight: 900;
    }

    .bonus-pending-text {
        font-size: .75rem;
        line-height: 1.5;
        color: rgba(255,255,255,.72);
    }

    /* ===== metric cards ===== */

    .bonus-freespins-highlight-grid,
    .bonus-metrics-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .75rem;
        margin-bottom: 1rem;
    }

    .bonus-freespins-highlight-card,
    .bonus-metric-card,
    .bonus-meta-card,
    .bonus-vip-inline-card,
    .bonus-card-modern-stat,
    .bonus-details-mini-card {
        background: rgba(255,255,255,.035);
        border: 1px solid rgba(255,255,255,.06);
        box-shadow: inset 0 .0625rem 0 rgba(255,255,255,.03);
    }

    .bonus-freespins-highlight-card,
    .bonus-metric-card,
    .bonus-meta-card,
    .bonus-vip-inline-card,
    .bonus-card-modern-stat,
    .bonus-details-mini-card {
        border-radius: 1rem;
        padding: .875rem;
    }

    .bonus-freespins-highlight-label,
    .bonus-metric-label,
    .bonus-meta-label,
    .bonus-vip-inline-label,
    .bonus-card-modern-stat-label,
    .bonus-details-mini-label {
        margin-bottom: .375rem;
        color: rgba(255,255,255,.62);
        font-size: .6875rem;
        line-height: 1.35;
        text-transform: uppercase;
        letter-spacing: .04em;
        font-weight: 800;
    }

    .bonus-freespins-highlight-value,
    .bonus-metric-value,
    .bonus-vip-inline-value,
    .bonus-card-modern-stat-value {
        color: var(--color2);
        font-size: 1rem;
        line-height: 1.2;
        font-weight: 900;
    }

    .bonus-meta-value,
    .bonus-details-mini-value {
        color: var(--color2);
        font-size: .875rem;
        line-height: 1.35;
        font-weight: 800;
    }

    .bonus-vip-inline-sep,
    .bonus-card-modern-sep {
        display: inline-block;
        margin: 0 .375rem;
        color: rgba(255,255,255,.34);
    }

    .bonus-meta-grid,
    .bonus-meta-grid-freespins {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .875rem;
        margin-bottom: 1rem;
    }

    .bonus-details-mini-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .75rem;
        margin-bottom: .875rem;
    }

    /* ===== tags / sections ===== */

    .bonus-section-block {
        margin-bottom: .875rem;
    }

    .bonus-section-title,
    .bonus-details-title {
        display: flex;
        align-items: center;
        gap: .5rem;
        margin-bottom: .625rem;
        color: rgba(255,255,255,.64);
        font-size: .6875rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .08em;
        line-height: 1.2;
    }

    .bonus-section-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.375rem;
        height: 1.375rem;
        border-radius: 62.4375rem;
        padding: 0 .375rem;
        background: rgba(255,255,255,.08);
        color: var(--color2);
        font-size: .625rem;
    }

    .bonus-tags,
    .bonus-card-modern-tags,
    .bonus-vip-categories-row {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }

    .bonus-vip-categories-row {
        margin-bottom: .875rem;
    }

    .bonus-tag,
    .bonus-vip-category-tag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2rem;
        padding: 0 .75rem;
        border-radius: 62.4375rem;
        background: rgba(255,255,255,.06);
        color: var(--color2);
        font-size: .75rem;
        font-weight: 700;
        border: 1px solid rgba(255,255,255,.05);
        text-decoration: none;
    }

    /* ===== buttons rows ===== */

    .bonus-actions-row,
    .bonus-actions-row-modern {
        display: flex;
        flex-wrap: wrap;
        gap: .625rem;
        margin-top: .375rem;
        align-items: center;
    }

    .bonus-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.875rem;
        padding: 0 1rem;
        border-radius: .875rem;
        text-decoration: none;
        font-size: .875rem;
        font-weight: 900;
        border: 0;
        cursor: pointer;
        transition: .18s ease;
    }

    .bonus-btn:hover {
        text-decoration: none;
        transform: translateY(-.0625rem);
    }

    .bonus-btn-secondary {
        background: rgba(255,255,255,.07);
        color: var(--color2);
        border: 1px solid rgba(255,255,255,.10);
    }

    .bonus-btn-accent {
        background: linear-gradient(135deg, var(--color1), color-mix(in srgb, var(--color1) 70%, white 30%));
        color: #111827;
    }

    .bonus-btn-outline {
        background: transparent;
        color: var(--color2);
        border: 1px solid rgba(255,255,255,.14);
    }

    /* ===== details ===== */

    .bonus-details-panel,
    .bonus-details-panel-modern {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255,255,255,.08);
    }

    .bonus-details-block + .bonus-details-block {
        margin-top: 1rem;
    }

    .bonus-details-content {
        color: rgba(255,255,255,.86);
        font-size: .875rem;
        line-height: 1.65;
    }

    .bonus-detail-list {
        display: grid;
        gap: .625rem;
    }

    .bonus-detail-row {
        display: flex;
        justify-content: space-between;
        gap: .75rem;
        padding: .625rem 0;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .bonus-detail-row:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .bonus-detail-key {
        color: rgba(255,255,255,.60);
        font-weight: 700;
        font-size: .8125rem;
    }

    .bonus-detail-value {
        color: var(--color2);
        font-weight: 800;
        text-align: right;
        font-size: .8125rem;
    }

    .bonus-meta-label-info-wrap {
        display: flex;
        align-items: center;
        gap: .4375rem;
    }

    .bonus-info-icon {
        width: 1.125rem;
        height: 1.125rem;
        min-width: 1.125rem;
        border-radius: 62.4375rem;
        background: rgba(255,255,255,.12);
        color: var(--color2);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: .6875rem;
        font-weight: 900;
        cursor: pointer;
        transition: .15s ease;
    }

    .bonus-info-icon:hover {
        background: var(--color1);
        color: #111827;
    }

    /* ===== vip section ===== */

    .bonus-vip-section {
        margin-bottom: 1.625rem;
    }

    .bonus-vip-section-head {
        margin-bottom: .875rem;
    }

    .bonus-vip-section-title {
        margin: 0 0 .5rem;
        color: var(--color2);
        font-size: 1.875rem;
        line-height: 1.08;
        font-weight: 900;
        letter-spacing: -.02em;
    }

    .bonus-vip-section-subtitle {
        margin: 0;
        color: rgba(255,255,255,.74);
        font-size: .875rem;
        line-height: 1.55;
    }

    .bonus-vip-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .bonus-vip-card {
        background:
                radial-gradient(circle at top left, rgba(255,255,255,.05), transparent 34%),
                linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
    }

    .bonus-vip-card-inner {
        position: relative;
    }

    .bonus-vip-info-btn {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 1.875rem;
        height: 1.875rem;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.16);
        background: rgba(255,255,255,.06);
        color: rgba(255,255,255,.88);
        font-size: .875rem;
        font-weight: 900;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: .18s ease;
        z-index: 2;
    }

    .bonus-vip-info-btn:hover {
        background: rgba(255,255,255,.11);
        border-color: rgba(255,255,255,.22);
    }

    .bonus-vip-card-head {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
        padding-right: 3.25rem;
    }

    .bonus-vip-card-image {
        width: 5rem;
        min-width: 5rem;
        height: 5rem;
        border-radius: 1.125rem;
        overflow: hidden;
        background: rgba(255,255,255,.04);
    }

    .bonus-vip-card-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: .625rem;
    }

    .bonus-vip-card-head-main {
        flex: 1;
        min-width: 0;
    }

    .bonus-vip-card-title {
        margin-bottom: .3125rem;
        color: var(--color2);
        font-size: 1.25rem;
        line-height: 1.08;
        font-weight: 900;
        letter-spacing: -.02em;
    }

    .bonus-vip-card-subtitle {
        color: rgba(255,255,255,.72);
        font-size: .8125rem;
        line-height: 1.45;
    }

    .bonus-vip-status-tracking {
        background: rgba(255,255,255,.07);
        color: var(--color2);
        border: 1px solid rgba(255,255,255,.10);
    }

    .bonus-vip-status-locked {
        background: rgba(255,255,255,.07);
        color: #fcd34d;
        border: 1px solid rgba(255,255,255,.10);
    }

    .bonus-vip-status-claimable {
        background: rgba(34,197,94,.16);
        color: #86efac;
        border: 1px solid rgba(34,197,94,.28);
    }

    .bonus-vip-status-claimed {
        background: rgba(59,130,246,.16);
        color: #93c5fd;
        border: 1px solid rgba(59,130,246,.26);
    }

    .bonus-vip-status-expired {
        background: rgba(239,68,68,.16);
        color: #fca5a5;
        border: 1px solid rgba(239,68,68,.26);
    }

    .bonus-vip-inline-grid {
        display: grid;
        grid-template-columns: 1.3fr 1fr;
        gap: .875rem;
        margin-bottom: .75rem;
    }

    .bonus-vip-action-box {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
    }

    .bonus-vip-claim-btn {
        min-width: 10rem;
    }

    .bonus-vip-countdown {
        color: rgba(255,255,255,.72);
        font-size: .75rem;
        line-height: 1.45;
        font-weight: 700;
    }

    .bonus-vip-countdown-label {
        color: rgba(255,255,255,.62);
        margin-right: .375rem;
    }

    .bonus-vip-countdown-value {
        color: var(--color2);
        font-weight: 900;
    }

    .bonus-vip-claim-btn[disabled],
    .bonus-vip-claim-btn.disabled {
        background: rgba(255,255,255,.06) !important;
        color: rgba(255,255,255,.38) !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        box-shadow: none !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
        opacity: 1 !important;
    }

    .bonus-vip-claim-btn[disabled]:hover,
    .bonus-vip-claim-btn.disabled:hover {
        transform: none !important;
        filter: none !important;
    }

    /* ===== modern lower area ===== */

    .bonus-card-modern-head {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: .875rem;
    }

    .bonus-card-modern-image,
    .bonus-card-modern-freespins .bonus-card-modern-image {
        width: 7rem;
        min-width: 7rem;
        height: 7rem;
        border-radius: 1.125rem;
        overflow: hidden;
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(255,255,255,.06);
        box-shadow: inset 0 .0625rem 0 rgba(255,255,255,.03);
    }

    .bonus-card-modern-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .bonus-card-modern-main {
        flex: 1;
        min-width: 0;
    }

    .bonus-card-modern-toprow {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: .5rem;
    }

    .bonus-card-modern-titlewrap {
        min-width: 0;
        flex: 1;
    }

    .bonus-card-modern-title,
    .bonus-card-modern-freespins .bonus-card-modern-title {
        color: var(--color2);
        font-size: 1.25rem;
        line-height: 1.1;
        font-weight: 900;
        margin-bottom: .375rem;
        letter-spacing: -.02em;
    }

    .bonus-card-modern-subtitle {
        color: rgba(255,255,255,.70);
        font-size: .8125rem;
        line-height: 1.45;
    }

    .bonus-card-modern-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .875rem;
        margin-bottom: .875rem;
    }

    /* ===== empty ===== */

    .bonus-empty-state {
        text-align: center;
        padding: 3.25rem 1.5rem;
    }

    .bonus-empty-state-icon {
        font-size: 2.25rem;
        margin-bottom: .625rem;
    }

    .bonus-empty-state h3 {
        margin: 0 0 .625rem;
        color: var(--color2);
        font-size: 1.75rem;
        line-height: 1.12;
        font-weight: 900;
    }

    .bonus-empty-state p {
        margin: 0;
        color: rgba(255,255,255,.72);
        font-size: .875rem;
        line-height: 1.5;
    }

    /* ===== swal claim popup ===== */

    .bonus-claim-popup {
        border-radius: 1.5rem !important;
        background:
                radial-gradient(circle at top center, rgba(255,196,0,.10), transparent 28%),
                linear-gradient(180deg, #0f141b 0%, #0b1016 100%) !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        box-shadow: 0 1.5rem 4.375rem rgba(0,0,0,.45) !important;
        color: #fff !important;
        padding: 1.75rem 1.5rem 1.5rem !important;
        overflow: hidden;
    }

    .bonus-claim-popup .swal2-title {
        color: var(--color2) !important;
        font-size: 1.875rem !important;
        line-height: 1.05 !important;
        font-weight: 900 !important;
        margin-bottom: .5rem !important;
        letter-spacing: -.03em;
    }

    .bonus-claim-popup .swal2-html-container {
        color: rgba(255,255,255,.82) !important;
        font-size: .875rem !important;
        line-height: 1.55 !important;
        margin-top: 0 !important;
    }

    .bonus-claim-top-icon {
        width: 5.125rem;
        height: 5.125rem;
        margin: 0 auto 1.125rem;
        border-radius: 62.4375rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(255,255,255,.08);
        box-shadow: inset 0 .0625rem 0 rgba(255,255,255,.05);
    }

    .bonus-claim-top-icon svg {
        width: 2.75rem;
        height: 2.75rem;
        display: block;
    }

    .bonus-claim-summary {
        display: flex;
        gap: 1.125rem;
        align-items: center;
        margin: 1.125rem 0 1rem;
        padding: 1rem;
        border-radius: 1.25rem;
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(255,255,255,.06);
        text-align: left;
    }

    .bonus-claim-game-thumb {
        width: 6rem;
        height: 6rem;
        border-radius: 1.125rem;
        display: block;
        object-fit: cover;
        box-shadow: 0 .625rem 1.75rem rgba(0,0,0,.30);
        border: 1px solid rgba(255,255,255,.08);
        flex: 0 0 6rem;
    }

    .bonus-claim-summary-main {
        flex: 1;
        min-width: 0;
    }

    .bonus-claim-game-name {
        margin-bottom: .25rem;
        color: var(--color2);
        font-size: 1.25rem;
        line-height: 1.15;
        font-weight: 900;
    }

    .bonus-claim-provider {
        margin-bottom: .625rem;
        color: rgba(255,255,255,.60);
        font-size: .8125rem;
        line-height: 1.4;
    }

    .bonus-claim-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .625rem;
    }

    .bonus-claim-stat {
        padding: .625rem .75rem;
        border-radius: .875rem;
        background: rgba(255,255,255,.045);
        border: 1px solid rgba(255,255,255,.06);
    }

    .bonus-claim-stat-label {
        display: block;
        margin-bottom: .25rem;
        color: rgba(255,255,255,.58);
        font-size: .6875rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        font-weight: 800;
    }

    .bonus-claim-stat-value {
        display: block;
        color: var(--color2);
        font-size: .9375rem;
        line-height: 1.15;
        font-weight: 900;
    }

    .bonus-claim-play-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 3rem;
        padding: 0 1.375rem;
        border-radius: .875rem;
        background: linear-gradient(135deg, var(--color1), color-mix(in srgb, var(--color1) 70%, white 30%));
        color: #111827 !important;
        font-size: .875rem;
        font-weight: 900;
        text-decoration: none !important;
        margin-top: .25rem;
        transition: .18s ease;
    }

    .bonus-claim-play-btn:hover {
        transform: translateY(-.0625rem);
        text-decoration: none !important;
        color: #111827 !important;
    }

    /* =========================================================
       RESPONSIVE
       ========================================================= */

    @media screen and (max-width: 1280px) {
        .bonus-summary-grid,
        .bonus-freespins-highlight-grid,
        .bonus-metrics-grid,
        .bonus-meta-grid,
        .bonus-vip-grid,
        .bonus-cards-grid,
        .bonus-cards-grid-modern {
            grid-template-columns: 1fr 1fr;
        }

        .bonus-filters-grid {
            grid-template-columns: 1fr 1fr;
        }

        .bonus-filter-box-search {
            grid-column: 1 / -1;
        }

        .bonus-details-mini-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media screen and (max-width: 767px) {
        .bonus-page-shell {
            min-height: auto;
            padding: .875rem 0 5.5rem;
        }

        .bonus-page-container {
            padding-left: .625rem;
            padding-right: .625rem;
        }

        .bonus-page-bg-orb {
            display: none;
        }

        .bonus-page-hero {
            display: block;
            margin-bottom: .875rem;
        }

        .bonus-page-kicker {
            font-size: .6875rem;
            margin-bottom: .25rem;
        }

        .bonus-page-title {
            font-size: 1.5rem;
            line-height: 1.1;
            margin: 0 0 .375rem;
        }

        .bonus-page-subtitle {
            font-size: .8125rem;
            line-height: 1.45;
            margin-bottom: .75rem;
            color: rgba(255,255,255,.72);
        }

        .bonus-page-hero-right {
            width: 100%;
        }

        .bonus-hero-btn {
            min-height: 2.625rem;
            padding: 0 1rem;
            border-radius: .875rem;
            font-size: .875rem;
            width: auto;
        }

        .bonus-summary-grid {
            grid-template-columns: 1fr 1fr;
            gap: .625rem;
            margin-bottom: .75rem;
        }

        .bonus-summary-card,
        .bonus-global-progress-card,
        .bonus-filters-card,
        .bonus-card,
        .bonus-vip-card,
        .bonus-card-modern,
        .bonus-empty-state {
            border-radius: 1.125rem;
        }

        .bonus-summary-card {
            padding: .875rem .875rem .75rem;
        }

        .bonus-summary-label {
            font-size: .625rem;
            margin-bottom: .375rem;
            line-height: 1.3;
        }

        .bonus-summary-value {
            font-size: 1.375rem;
            line-height: 1.05;
        }

        .bonus-global-progress-card {
            padding: .875rem;
            margin-bottom: .75rem;
        }

        .bonus-global-progress-head {
            display: block;
            margin-bottom: .625rem;
        }

        .bonus-global-progress-title {
            font-size: 1rem;
            margin-bottom: .25rem;
        }

        .bonus-global-progress-subtitle {
            font-size: .75rem;
            line-height: 1.45;
            margin-bottom: .5rem;
        }

        .bonus-global-progress-percentage {
            font-size: 1.375rem;
            line-height: 1;
        }

        .bonus-progress-bar-big {
            height: .625rem;
        }

        .bonus-filters-card {
            padding: .875rem;
            margin-bottom: .875rem;
        }

        .bonus-filters-grid {
            grid-template-columns: 1fr;
            gap: .75rem;
        }

        .bonus-filter-box label {
            margin-bottom: .375rem;
            font-size: .6875rem;
        }

        .bonus-filter-select,
        .bonus-filter-input {
            height: 2.625rem;
            border-radius: .8125rem;
            font-size: .875rem;
            padding: 0 .75rem;
        }

        .bonus-cards-grid,
        .bonus-cards-grid-modern,
        .bonus-vip-grid {
            grid-template-columns: 1fr;
            gap: .875rem;
        }

        .bonus-card-inner,
        .bonus-vip-card-inner,
        .bonus-card-modern-inner {
            padding: .875rem;
        }

        .bonus-card-head,
        .bonus-card-modern-head {
            display: block;
            margin-bottom: .75rem;
        }

        .bonus-card-image-game,
        .bonus-card-image-promo,
        .bonus-card-modern-image,
        .bonus-card-modern-freespins .bonus-card-modern-image {
            width: 100%;
            min-width: 100%;
            height: 10rem;
            border-radius: 1rem;
            margin-bottom: .75rem;
        }

        .bonus-card-head-row,
        .bonus-card-modern-toprow {
            display: block;
            margin-bottom: .5rem;
        }

        .bonus-card-name,
        .bonus-card-modern-title,
        .bonus-card-modern-freespins .bonus-card-modern-title,
        .bonus-vip-card-title {
            font-size: 1.1875rem;
            line-height: 1.12;
            margin-bottom: .25rem;
        }

        .bonus-card-code,
        .bonus-card-fs-game-line,
        .bonus-card-modern-subtitle,
        .bonus-card-modern-description,
        .bonus-card-short-description,
        .bonus-vip-card-subtitle {
            font-size: .75rem;
        }

        .bonus-card-badges,
        .bonus-card-modern-badges {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
            gap: .375rem;
        }

        .bonus-badge,
        .bonus-badge-type,
        .bonus-vip-card-status {
            min-height: 1.75rem;
            padding: 0 .625rem;
            font-size: .625rem;
        }

        .bonus-pending-banner {
            gap: .625rem;
            padding: .75rem;
            border-radius: .875rem;
            margin-bottom: .75rem;
        }

        .bonus-pending-icon {
            width: 1.5rem;
            height: 1.5rem;
            min-width: 1.5rem;
            font-size: .6875rem;
        }

        .bonus-pending-title {
            font-size: .8125rem;
        }

        .bonus-pending-text {
            font-size: .75rem;
            line-height: 1.4;
        }

        .bonus-freespins-highlight-grid,
        .bonus-metrics-grid {
            grid-template-columns: 1fr 1fr;
            gap: .625rem;
            margin-bottom: .75rem;
        }

        .bonus-freespins-highlight-card,
        .bonus-metric-card,
        .bonus-meta-card,
        .bonus-vip-inline-card,
        .bonus-card-modern-stat,
        .bonus-details-mini-card {
            border-radius: .875rem;
            padding: .75rem;
        }

        .bonus-freespins-highlight-label,
        .bonus-metric-label,
        .bonus-meta-label,
        .bonus-vip-inline-label,
        .bonus-card-modern-stat-label,
        .bonus-details-mini-label {
            font-size: .625rem;
            margin-bottom: .25rem;
        }

        .bonus-freespins-highlight-value,
        .bonus-metric-value,
        .bonus-vip-inline-value,
        .bonus-card-modern-stat-value {
            font-size: .9375rem;
            line-height: 1.2;
        }

        .bonus-progress-section,
        .bonus-progress-section-modern {
            margin-bottom: .75rem;
        }

        .bonus-progress-head {
            font-size: .6875rem;
            margin-bottom: .375rem;
        }

        .bonus-progress-bar {
            height: .625rem;
        }

        .bonus-meta-grid,
        .bonus-meta-grid-freespins,
        .bonus-vip-inline-grid {
            grid-template-columns: 1fr;
            gap: .625rem;
            margin-bottom: .75rem;
        }

        .bonus-meta-value,
        .bonus-details-mini-value {
            font-size: .8125rem;
            line-height: 1.3;
        }

        .bonus-info-icon {
            width: 1rem;
            height: 1rem;
            min-width: 1rem;
            font-size: .625rem;
        }

        .bonus-section-block {
            margin-bottom: .75rem;
        }

        .bonus-section-title,
        .bonus-details-title {
            font-size: .625rem;
            margin-bottom: .5rem;
        }

        .bonus-section-count {
            min-width: 1.25rem;
            height: 1.25rem;
            font-size: .625rem;
        }

        .bonus-tags,
        .bonus-card-modern-tags,
        .bonus-vip-categories-row {
            gap: .375rem;
        }

        .bonus-tag,
        .bonus-vip-category-tag {
            min-height: 1.75rem;
            padding: 0 .625rem;
            font-size: .6875rem;
            max-width: 100%;
        }

        .bonus-actions-row,
        .bonus-actions-row-modern {
            gap: .5rem;
            margin-top: .25rem;
        }

        .bonus-btn {
            min-height: 2.5rem;
            padding: 0 .875rem;
            font-size: .8125rem;
            border-radius: .8125rem;
            flex: 1 1 calc(50% - .25rem);
        }

        .bonus-actions-row-modern .bonus-btn,
        .bonus-vip-claim-btn {
            width: 100%;
            min-width: 0;
        }

        .bonus-details-panel,
        .bonus-details-panel-modern {
            margin-top: .875rem;
            padding-top: .875rem;
        }

        .bonus-details-block + .bonus-details-block {
            margin-top: .75rem;
        }

        .bonus-details-content {
            font-size: .75rem;
            line-height: 1.55;
        }

        .bonus-detail-row {
            display: block;
            padding: .5rem 0;
        }

        .bonus-detail-key,
        .bonus-detail-value {
            display: block;
            text-align: left;
            font-size: .75rem;
        }

        .bonus-detail-value {
            margin-top: .1875rem;
        }

        .bonus-empty-state {
            padding: 2.125rem 1.125rem;
        }

        .bonus-empty-state-icon {
            font-size: 2rem;
        }

        .bonus-empty-state h3 {
            font-size: 1.375rem;
            margin-bottom: .5rem;
        }

        .bonus-empty-state p {
            font-size: .8125rem;
            line-height: 1.45;
        }

        .bonus-vip-section {
            margin-bottom: 1rem;
        }

        .bonus-vip-section-head {
            margin-bottom: .75rem;
        }

        .bonus-vip-section-title {
            font-size: 1.5rem;
            line-height: 1.12;
            margin: 0 0 .375rem;
        }

        .bonus-vip-section-subtitle {
            font-size: .8125rem;
            line-height: 1.45;
        }

        .bonus-vip-info-btn {
            top: .75rem;
            right: .75rem;
            width: 1.75rem;
            height: 1.75rem;
            font-size: .8125rem;
        }

        .bonus-vip-card-head {
            gap: .75rem;
            margin-bottom: .75rem;
            padding-right: 2.375rem;
        }

        .bonus-vip-card-image {
            width: 4.25rem;
            min-width: 4.25rem;
            height: 4.25rem;
            border-radius: 1rem;
        }

        .bonus-vip-countdown {
            font-size: .75rem;
        }

        .bonus-claim-popup {
            border-radius: 1.25rem !important;
            padding: 1.25rem 1rem 1.125rem !important;
        }

        .bonus-claim-popup .swal2-title {
            font-size: 1.5rem !important;
        }

        .bonus-claim-summary {
            display: block;
            padding: .875rem;
            margin: .875rem 0;
        }

        .bonus-claim-game-thumb {
            width: 5.75rem;
            height: 5.75rem;
            border-radius: 1.125rem;
            margin: 0 auto .75rem;
        }

        .bonus-claim-summary-main {
            text-align: center;
        }

        .bonus-claim-game-name {
            font-size: 1.125rem;
        }

        .bonus-claim-provider {
            margin-bottom: .625rem;
        }

        .bonus-claim-stats {
            grid-template-columns: 1fr 1fr;
        }

        .bonus-claim-play-btn {
            min-height: 2.75rem;
            width: 100%;
        }
    }