/* Portrait promotion cards using the site's own campaign artwork. */
.site-v4 #bonus-page { width: calc(100% + var(--v4-page-gutter) * 2); margin-inline: calc(-1 * var(--v4-page-gutter)); background: transparent; }
.site-v4 #bonus-page .bonus-list-section { padding: 32px 16px 48px; }
.site-v4 #bonus-page .bonus-list-container { width: 100%; max-width: 1276px; margin-inline: auto; }
.site-v4 #bonus-page .bonus-promotion-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.site-v4 #bonus-page .bonus-card { position: relative; min-width: 0; height: 600px; isolation: isolate; overflow: hidden; border: 1px solid color-mix(in srgb, var(--site-border) 12.55%, transparent); border-radius: 18px; background: radial-gradient(ellipse at 50% 0%,color-mix(in srgb, var(--site-raised) 70.20%, transparent),transparent 55%),linear-gradient(160deg,var(--site-panel),var(--site-background) 65%); box-shadow: none; transition: border-color .2s, transform .2s; }
.site-v4 #bonus-page .bonus-card:hover { border-color: rgb(var(--site-accent-ebff00) / .6); transform: translateY(-2px); }
.site-v4 #bonus-page .bonus-card-open { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.site-v4 #bonus-page .bonus-card-open:focus-visible { outline: 2px solid var(--v4-accent); outline-offset: -4px; }
.site-v4 #bonus-page .bonus-art { position: absolute; inset: 170px 0 0; overflow: hidden; background: transparent; }
.site-v4 #bonus-page .bonus-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; transition: transform .35s; }
.site-v4 #bonus-page .bonus-card:hover .bonus-art img { transform: scale(1.035); }
.site-v4 #bonus-page .bonus-art::after { position: absolute; inset: 0; content: ''; background: linear-gradient(180deg,var(--site-panel) 0%,color-mix(in srgb, var(--site-panel) 70.20%, transparent) 12%,transparent 38% 76%,color-mix(in srgb, var(--site-background) 72.94%, transparent)); pointer-events: none; }
.site-v4 #bonus-page .bonus-art-fallback { display: grid; place-items: center; height: 100%; color: rgb(var(--site-accent-ebff00) / .7); font-size: 150px; background: radial-gradient(ellipse at center,rgb(var(--site-accent-ebff00) / .2),transparent 70%); }
.site-v4 #bonus-page .bonus-card-content { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; align-items: stretch; padding: 36px 18px 20px; pointer-events: none; }
.site-v4 #bonus-page .bonus-promotion-title { margin: 0; color: var(--site-text); font-family: V4Display,Arial,sans-serif; font-size: 30px; font-weight: 700; line-height: 1.08; text-align: center; text-transform: uppercase; overflow-wrap: anywhere; }
.site-v4 #bonus-page .bonus-promotion-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 12px 0 0; color: color-mix(in srgb, var(--site-text) 94.90%, transparent); font-size: 13px; line-height: 23px; text-align: center; }
.site-v4 #bonus-page .bonus-actions { display: flex; gap: 8px; margin-top: auto; padding: 0; border: 0; pointer-events: auto; }
.site-v4 #bonus-page .bonus-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 40px; padding: 8px; border: 1px solid color-mix(in srgb, var(--site-border) 14.90%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--site-panel) 87.45%, transparent); color: var(--site-text); font-size: 12px; font-weight: 600; backdrop-filter: blur(8px); }
.site-v4 #bonus-page .bonus-actions .bonus-claim-btn { border-color: var(--v4-accent); background: var(--v4-accent); color: var(--site-accent_text); }
.site-v4 #bonus-page .bonus-actions button:disabled { opacity: .65; cursor: not-allowed; }
.site-v4 #bonus-page .bonus-hero { padding: 48px 20px; border: 1px solid var(--v4-line); border-radius: 18px; background: var(--v4-panel); }
.site-v4 #bonusModal { z-index: 6000; }
.site-v4 #bonusModal .bonus-modal-panel { background: linear-gradient(145deg,var(--v4-raised),var(--v4-panel)); }
@media (min-width: 576px) { .site-v4 #bonus-page .bonus-promotion-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 992px) { .site-v4 #bonus-page .bonus-promotion-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (min-width: 1200px) {
    .site-v4 #bonus-page .bonus-list-section { padding-inline: max(82px,calc((100vw - 1276px)/2)); }
    .site-v4 #bonus-page .bonus-promotion-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (hover: hover) and (pointer: fine) {
    .site-v4 #bonus-page .bonus-actions { opacity: 0; transform: translateY(8px); transition: opacity .2s,transform .2s; }
    .site-v4 #bonus-page .bonus-card:hover .bonus-actions,
    .site-v4 #bonus-page .bonus-card:focus-within .bonus-actions { opacity: 1; transform: none; }
}
@media (max-width: 359px) { .site-v4 #bonus-page .bonus-promotion-title { font-size: 27px; } }
@media (min-width: 1200px) {
    .site-v4 #bonus-page { width: auto; margin-inline: -104px; transition: margin .4s ease; }
    .site-v4:has(#desktopSidebar.is-expanded) #bonus-page { margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce) { .site-v4 #bonus-page,.site-v4 #bonus-page .bonus-card,.site-v4 #bonus-page .bonus-art img,.site-v4 #bonus-page .bonus-actions { transition: none; } }