/* ==========================================================================
   v-bonus.css — design version for Bonus.com (CATENASITE=BONUS)

   Absorbed from the retired catena-unicorn-twilight child theme, the last
   child theme in the network.

   WHY THE TOKENS ARE SPLIT ACROSS :root AND .site-bonus
   unicorn-global.css is enqueued AFTER every v-*.css, so a token declared in
   both files resolves to the GLOBAL value (later wins at equal specificity).
   The child theme used to load dead last and therefore won outright. To keep
   that result, every token unicorn-global.css also declares lives on
   .site-bonus instead — a body-level declaration beats an inherited :root one
   regardless of source order. Same trick v-black.css uses via .site-gamingtoday.

   When editing:
     - token NOT declared in unicorn-global.css  ->  :root block
     - token ALSO declared in unicorn-global.css ->  .site-bonus block
   ========================================================================== */

:root {
    /* BLUE (Brand - Primary)*/
    --blue-50: #e9f0f7;
    --blue-100: #bad1e7;
    --blue-200: #99badc;
    --blue-300: #6b9bcc;
    --blue-400: #4e87c2;
    --blue-500: #2269b3;
    --blue-600: #1f60a3;
    --blue-700: #184b7f;
    --blue-800: #133a62;
    --blue-900: #0e2c4b;
    --orange-50: #fff3e6;
    --orange-100: #ffddb0;
    --orange-200: #ffc68a;
    --orange-300: #ffab54;
    --orange-400: #ff9b33;
    --orange-500: #ff8200;
    --orange-600: #e87600;
    --orange-700: #b55c00;
    --orange-800: #8c4800;
    --orange-900: #6b3700;
    --grey-50: #e8e8e8;
    --grey-100: #b9b8b7;
    --grey-200: #979594;
    --grey-300: #676564;
    --grey-400: #494745;
    --grey-500: #1c1917;
    --grey-600: #191715;
    --grey-700: #141210;
    --grey-800: #0f0e0d;
    --grey-900: #0c0b0a;
    --white: #ffffff;
    --black: #000000;
    --transparent: transparent;
    --surfaces-primary: var(--blue-500);
    --surfaces-secondary: var(--blue-700);
    --surface-cta: var(--orange-500);
    --surfaces-navigation: var(--white);
    --cta-primary: var(--orange-500);
    --surface-background: var(--white);
    --border-stroke: var(--grey-200);
    --positive-light: #f3fcf8;
    --positive-dark: #06c270;
    --negative-light: #fef5f5;
    --negative-dark: #dc2626;
    --text-primary: var(--grey-800);
    --text-secondary: var(--grey-400);
    --text-inactive: var(--grey-200);
    --text-inverted: var(--white);
    --text-link: var(--blue-500);

    /* general color vars */
    --cc-color-brand: var(--blue-400);
    --cc-color-brand-light: var(--blue-500);
    --cc-color-blue: var(--blue-500);
    --cc-color-blue-darker: var(--blue-700);
    --cc-color-blue-light: var(--blue-200);
    --cc-color-blue-deep: var(--blue-900);
    --cc-color-links: var(--blue-500);
    --cc-color-red-deep: var(--negative-dark);
    --cc-color-red-light: var(--negative-dark);
    --cc-color-green-light: var(--positive-dark);
    --cc-color-green: var(--positive-dark);
    --cc-color-green-medium: var(--positive-dark);
    --cc-color-navy: var(--blue-800);
    --cc-color-black-onyx: var(--grey-400);
    --cc-color-black-chinese: var(--grey-700);
    --cc-color-onyx-light: var(--grey-300);
    --cc-color-onyx: var(--grey-400);
    --cc-color-jet: var(--grey-600);
    --cc-widgets-link-color: var(--grey-500);
    --cc-color-indigo-gray: var(--grey-400);
    --cc-color-metal-saurus: var(--blue-300);
    --cc-color-cool-gray: var(--grey-200);
    --cc-color-gray-medium: var(--grey-200);
    --cc-color-gray-neutral: var(--grey-300);
    --cc-color-gray-dark: var(--grey-400);
    --cc-color-light-periwinkle: var(--grey-200);
    --cc-color-platinum: var(--blue-50);
    --cc-color-bright-gray: var(--grey-50);
    --cc-color-border: var(--blue-50);
    --cc-color-lite-background: var(--blue-50);
    --cc-color-light-1: var(--white);
    --cc-color-light-2: var(--grey-50);
    --cc-color-light-3: var(--grey-50);
    --cc-color-light-4: var(--grey-50);
    --cc-color-light-5: var(--grey-50);
    --cc-color-light-6: var(--blue-50);
    --cc-color-light-7: var(--blue-50);
    --cc-color-light-8: var(--grey-50);
    --cc-table-row-color: var(--blue-50);
    --cc-table-row-color-hover: var(--blue-50);
    --cc-table-color-1: var(--grey-50);
    --cc-table-color-2: var(--positive-light);
    --cc-table-color-3: var(--blue-50);
    --cc-table-color-4: var(--negative-light);
    --cc-table-color-5: var(--grey-50);
    --cc-category-label-background: var(--blue-50);
    --cc-category-label-color: var(--cc-color-blue);
    --cc-category-label-color-hover: var(--cc-color-blue);
    --cc-archive-read-more-color-hover: var(--cc-color-blue);

    /* star color vars */
    --cc-color-star-navy: var(--blue-800);
    --cc-color-star-yellow: var(--orange-400);
    --cc-color-star-green: var(--positive-dark);
    --cc-color-star-blue: var(--blue-900);

    /* Header v1 (white) color vars */
    --cc-header-bg-v1: var(--white);
    --cc-logo-aside-color-v1: var(--cc-color-brand);
    --cc-header-toggle-color-v1: var(--black);
    --cc-header-main-links-color-v1: var(--black);

    /* Header v2 (black) color vars */
    --cc-header-bg-v2: var(--white);
    --cc-logo-aside-color-v2: var(--white);
    --cc-header-toggle-color-v2: var(--cc-color-brand);
    --cc-header-main-links-color-v2: var(--black);

    /* Mega nav color vars */
    --cc-header-bg-mega: var(--white);
    --cc-logo-aside-color-mega: var(--cc-color-brand);
    --cc-header-toggle-color-mega: var(--cc-color-brand);
    --cc-header-main-links-color-mega: var(--black);
    --cc-header-top-links-desktop-color-mega: var(--black);
    --cc-meganav-border: var(--blue-100);

    /* Customer popup color vars */
    --cc-cs-popup-send-button-color: var(--white);
    --cc-cs-popup-send-button-bg: var(--blue-500);

    /* Breacking news block color vars */
    --cc-breacking-news-bg: var(--grey-50);
    --cc-breacking-news-link-arrow-color: var(--cc-color-brand);

    /* Homepage Banner block v2 color vars */
    --cc-homepage-banner-v2-arrow-icon-color: var(--cc-color-navy);

    /* Casino Review color vars */
    --cc-casino-review-btn-hover-color: var(--white);

    /* CTA banner block color vars */
    --cc-cta-banner-bg: #3d3c6fe0;
    /* keep (has opacity) */

    /* Image text cards block color vars */
    --cc-itc-bg: var(--cc-color-brand);

    /* Font-Family */
    --cc-primary-font: "Montserrat", sans-serif;
    --cc-font-weight-normal: 400;

    /*Footer vars */
    --cc-color-background-footer-bottom: var(--black);
    --cc-color-text-footer: var(--cc-color-white);

    /* Top Nav Caret color var */
    --menu-arrow-color: var(--grey-400);

    /* Bonus Harvester Frequency Colors */
    --bonus-harvester-weekly-border: #FB9D3B;
    --bonus-harvester-weekly-label-background: #FFE4C9;
    --bonus-harvester-event-border: #5F9DDE;
    --bonus-harvester-event-label-background: #D5EBFF;
    --bonus-harvester-always-on-border: #36D08D;
    --bonus-harvester-always-on-label-background: #E1FFF2;
    --bonus-harvester-one-time-border: #FFDD77;
    --bonus-harvester-daily-border: #FD7C7C;
    --cta-secondary: var(--blue-500);
    --cta-text-dark: var(--blue-500);
    --cta-secondary-hover: var(--blue-700);
    --text-brand: #162C59;

    /* GamiPress claim/redeem button accent — repeated identically across several
       components; Bonus-only, no PlayUSA equivalent. */
    --cta-claim-accent: #FF7A00;
    --cta-claim-accent-border: #B55C00;
    --cta-claim-accent-hover: #E66F00;
}

/* Tokens unicorn-global.css also declares — body-scoped so they still win.
   Tokens whose bonus value was byte-identical to the global default were
   dropped rather than restated; global already supplies them. */
.site-bonus {
    /* Bonus Harvester card vars — Bonus keeps its own orange CTA instead of the shared green. */
    --bonus-harvester-claim-hover: var(--cta-primary);
    --bonus-harvester-card-base: linear-gradient(135deg, #2269B3, #002D81);

    /* general color vars */
    --cc-color-scrollbar-track: var(--grey-50);
    --cc-color-scrollbar-thumb: var(--grey-100);

    /* star color vars */
    --cc-color-rating-back-star: var(--grey-100);
    --cc-color-rating-front-star: var(--orange-400);

    /* Sign Up button color vars with colorful header (v1) */
    --cc-sign-up-button-bg-color-v1: var(--cc-color-brand);
    --cc-sign-up-button-bg-color-hover-v1: var(--cc-color-blue-darker);
    --cc-sign-up-button-hover-icon-color-v1: var(--cc-color-blue-darker);
    --cc-sign-up-button-hover-icon-envelope-v1: var(--white);
    --cc-sign-up-button-hover-icon-part-v1: var(--white);

    /* Sign Up button color vars with white header (v2) */
    --cc-sign-up-button-bg-color-v2: var(--cc-color-brand-light);
    --cc-sign-up-button-bg-color-hover-v2: var(--cc-color-brand);
    --cc-sign-up-button-hover-icon-envelope-v2: var(--white);
    --cc-sign-up-button-hover-icon-part-v2: var(--white);
    --cc-sign-up-button-icon-envelope-v2: var(--white);

    /* Customer popup color vars */
    --cc-sign-up-button-color: var(--white);
    --cc-sign-up-button-hover-color: var(--white);
    --cc-sign-up-button-hide-bg: var(--cc-color-brand);
    --cc-sign-up-button-hide-hover-bg: var(--cc-color-brand-light);
    --cc-sign-up-button-hide-color: var(--black);
    --cc-sign-up-button-hide-hover-color: var(--white);
    --cc-cs-reloader-primary-color: var(--cc-color-brand);
    --cc-cs-reloader-secondary-color: var(--negative-dark);
    --cc-cs-popup-opener-icon-color: var(--cc-color-brand);
    --cc-cs-popup-opener-icon-envelope: var(--white);
    --cc-cs-popup-opener-icon-part: var(--cc-color-white);
    --cc-cs-popup-boreder-color: var(--grey-100);
    --cc-cs-popup-error-color: var(--negative-light);
    --cc-cs-popup-checkbox-active-color: var(--white);
    --cc-cs-popup-checkbox-active-bg: var(--black);

    /* Homepage Banner block v2 color vars */
    --cc-homepage-banner-v2-gradient: linear-gradient(180deg, var(--blue-500) 0%, #002D81 100%);
    --cc-homepage-banner-v2-image-gradient: linear-gradient(180deg, var(--cc-color-brand) 0%, #00000040 100%);

    /* Avoid Casino block color vars */
    --color-avoid-casinos-accent: var(--negative-dark);
    --color-avoid-casinos-border: var(--negative-dark);

    /* Jump links block color vars */
    --cc-jump-links-default-color: var(--cc-color-metal-saurus);

    /* Casino Review color vars */
    --cc-casino-review-btn-color: var(--white);
    --cc-casino-review-btn-bg: var(--orange-500);
    --cc-casino-review-btn--hover-bg: var(--orange-700);
    --cc-casino-review-textbox-bg: var(--negative-dark);

    /* Slots popup color vars */
    --cc-slots-popup-promo-bg: #3d3c6f0d;
    /* keep (has opacity) */
    --cc-slots-popup-bg: linear-gradient(to bottom, var(--negative-dark), var(--negative-dark));
    --cc-slots-popup-logo-wrap-bg: #3d3c6f0d;
    /* keep (has opacity) */
    --cc-slots-popup-rating-bg: #3d3c6f0d;
    /* keep (has opacity) */
    --cc-slots-popup-btn-bg: var(--negative-dark);
    --cc-slots-popup-btn-hover-bg: #b22435f2;
    /* keep (has opacity) */
    --cc-slots-popup-slots-bg: #0000008c;
    /* keep (has opacity) */

    /*Footer vars */
    --cc-color-background-footer: var(--blue-900);
    --cc-color-footer-divider: var(--surfaces-primary);
    /*Footer vars end*/

    /* See unicorn-global.css's Gamification section for the default values these re-point. */
    --gamification-header-primary: #1D70B8;
    --cta-gamification-nav-active: #1D70B8;
    --gamification-progress-track: #DBEAFE;
    --today-earned-pill-bg: #FFC107;
    --today-earned-pill-color: #0F0E0D;

    /* Steps block color vars */
    --cc-steps-background: linear-gradient(180deg, #2269B3 0%, #002D81 100%);

    /* Bonus Harvester Frequency Colors */
    --cta-3d-primary-hover: color-mix(in srgb, var(--cta-primary) 55%, black);

    /* ---------------------------------------------------------------------
       Carried over from v-purple.css. Bonus had no `case` in the CATENASITE
       switch, so it fell through to `default:` (purple) and silently used
       these — the child theme never re-pointed them. Preserved verbatim so
       this merge renders identically.
       FLAGGED FOR DESIGN REVIEW: several are purple-brand values sitting on a
       blue/orange site — most obviously --cta-primary-hover, a dark red hover
       on an orange CTA.
       --------------------------------------------------------------------- */
    --surfaces-background: #FFFFFF;
    --surfaces-background-light: #FFFFFF;
    --surfaces-background-dark: var(--surfaces-primary);
    --surfaces-footer: #181837;
    --surfaces-inactive: #E8E8E8;
    --text-inverted-secondary: #c2c2d9;
    --text-link-hover: #2A4EB8;
    --cta-text-light: #FFFFFF;
    --cta-primary-hover: #7E1A26;
    --cta-ghost: #ffffff00;
    --cta-ghost-hover: #3A3984;
    --cta-navigation: #FFFFFF;
    --cta-navigation-hover: #EBEBF3;
    --cta-navigation-ghost: #FFFFFF;
    --cta-navigation-ghost-hover: #EBEBF3;
    --cta-navigation-text: #3A3984;
    --cta-navigation-text-hover: #3A3984;
    --surfaces-category: #3377FF;
    --cta-accent--color: #B22435;

    --cta-3d-primary-surface: var(--orange-500);
    --review-hero-rating-color: var(--blue-500);
    --review-hero-sticky-banner-bg: var(--blue-500);
}

/* GamiPress PlayPerks/BonusPerks profile — moved out of component SCSS's
   body.site-bonus selectors per the token-in-component-CSS rule. */
.site-bonus .header-gamification__balance {
    color: var(--text-brand);
}

.site-bonus .header-gamification__chevron-icon {
    filter: none;
}

.site-bonus .header-gamification__avatar-streak-segment:not(.is-filled) {
    stroke: var(--text-brand);
}

.site-bonus .redeem-success-claim-button {
    background: var(--cta-claim-accent);
    border-color: var(--cta-claim-accent-border);
    box-shadow: 0 4px 0 0 var(--cta-claim-accent-border);
}

.site-bonus .redeem-success-claim-button:hover {
    background: var(--cta-claim-accent-hover);
}

.site-bonus .redeem-success-claim-button:active {
    box-shadow: 0 2px 0 0 var(--cta-claim-accent-border);
}

.site-bonus .reward-item-description .unicorn-button--buy {
    background: var(--cta-claim-accent) !important;
    border-color: var(--cta-claim-accent-border) !important;
    box-shadow: 0 4px 0 0 var(--cta-claim-accent-border) !important;
}

.site-bonus .reward-item-description .unicorn-button--buy:hover {
    background: var(--cta-claim-accent-hover) !important;
}

.site-bonus .reward-item-description .unicorn-button--buy:active {
    box-shadow: 0 2px 0 0 var(--cta-claim-accent-border) !important;
}

.site-bonus .reward-details-footer .reward-redeem-btn {
    background: var(--cta-claim-accent);
    border-color: var(--cta-claim-accent-border);
    box-shadow: 0 4px 0 0 var(--cta-claim-accent-border);
}

.site-bonus .reward-details-footer .reward-redeem-btn:hover {
    background: var(--cta-claim-accent-hover);
}

.site-bonus .reward-details-footer .reward-redeem-btn:active {
    box-shadow: 0 2px 0 0 var(--cta-claim-accent-border);
}

.site-bonus .profile-completion-module__cta {
    background: var(--cta-claim-accent) !important;
    border-color: var(--cta-claim-accent-border) !important;
}

.site-bonus .profile-completion-module__cta:hover,
.site-bonus .profile-completion-module__cta:active {
    background: var(--cta-claim-accent-hover) !important;
    border-color: var(--cta-claim-accent-border) !important;
    box-shadow: 0 1px 0 0 var(--cta-claim-accent-border) !important;
}

/* Also inherited from the v-purple default (see above) — kept for parity. */
.site-bonus .homepage-banner.is-design-4 .banner-block-right .banner-item {
    background-color: var(--white);
}

.site-bonus .homepage-banner.is-design-4 .banner-block-left p {
    color: var(--white);
}

/* ==========================================================================
   Component overrides — every selector scoped to .site-bonus.
   The child theme relied on load order (enqueued last, after every component
   stylesheet); as a design version this file loads early instead, so the extra
   class supplies the specificity that source order used to provide.
   ========================================================================== */

.site-bonus .cta-button-orange {
    border-radius: 8px; 
    border: none;
    outline: none!important;
    background-color: var(--orange-500);
    color: var(--white);
    font-size: var(--text-md);
    font-weight: var(--cc-font-weight-bold);
    text-transform: uppercase;
    line-height: var(--cc-line-height-lg);
    padding: 16px 32px;
}
.site-bonus .cta-button-orange:hover {
    background-color: var(--orange-700);
}
.site-bonus .cta-button-white-round {
    border-radius: 8px; 
    border: none;
    outline: none!important;
    background-color: var(--white);
    color: var(--black);
    font-size: var(--text-md);
    font-weight: var(--cc-font-weight-bold);
    cursor: pointer;
    border-radius: 50px;
    padding: 16px;
    padding-right: 40px;
    padding-left: 16px;
    box-shadow: 0px 0px 24px 0px #0E304F40;
    position: relative;    
    text-transform: uppercase;
    line-height: var(--cc-line-height-lg);
}

.site-bonus .cta-button-white-round:after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z' fill='currentColor'/%3E%3C/svg%3E");
    position: absolute;
    top: 50%;
    right: 16px;
    opacity: 1;
    transform: translateY(-50%);
    width: 16px;
    height: 18px;
}

body.site-bonus .homepage-banner.is-design-3:has(+.plain-text .nexus-container.cta-template)+.plain-text, body.site-bonus .homepage-banner.is-design-3:has(+.plain-text .cta)+.plain-text {
    margin-top: -130px;
}

@media (min-width: 1024px) {
    body.site-bonus .homepage-banner.is-design-3:has(+.plain-text .nexus-container.cta-template)+.plain-text, body.site-bonus .homepage-banner.is-design-3:has(+.plain-text .cta)+.plain-text {
        margin-top: -100px;
    }
}

@media screen and (max-width: 480px) {
    .site-bonus .cta-button-orange,
    .site-bonus .cta-button-white-round {
        font-size: var(--text-sm);
    }
}

.site-bonus .grid-items .grid .grid-item {
    box-shadow: 0px 0px 24px 0px #0E304F40;
}


/* Header Override */
@media (hover: hover) and (max-width: 1199.98px), (pointer: coarse) {
    body.site-bonus:has(.cc-signup-wrapper) .site-header--mega .cc-signup-wrapper {
        position: absolute !important;
        right: 50px;
    }
}
@media (hover: hover) and (max-width: 1023.98px), (pointer: coarse) {
    body.site-bonus:has(.cc-signup-wrapper) .site-header--mega .cc-signup-wrapper {
        position: absolute !important;
        right: 20px;
    }
}

/* The notifications bell is pinned at right: 20px, so the sign-up button is
   shifted left by the bell footprint (32px icon + 8px gap) whenever the bell is
   rendered - keeps the bell as the last (right-most) header element. */
@media (hover: hover) and (max-width: 1199.98px), (pointer: coarse) {
    body.site-bonus:has(.header-notifications):has(.cc-signup-wrapper) .site-header--mega .cc-signup-wrapper {
        right: 90px;
    }
}
@media (hover: hover) and (max-width: 1023.98px), (pointer: coarse) {
    body.site-bonus:has(.header-notifications):has(.cc-signup-wrapper) .site-header--mega .cc-signup-wrapper {
        right: 60px;
    }
}
body.site-bonus:has(.site-header--mega) .site-header .site-branding {
	justify-content: flex-end;
	gap: 20px;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1500px) {
	body.site-bonus:has(.cc-signup-wrapper) .site-header--mega .mega-nav {
        padding-left: 0px;
    }
	.site-bonus .site-header .site-branding>.site-header__actions {
		padding-left: 0;
	}
}
@media (min-width: 1199.98px) {
    .site-bonus .site-branding > .site-header__actions {
        padding-left: 0px!important;
    }
	
}
@media (max-width: 1199.98px) {
	.site-bonus .site-header .site-branding>.site-header__actions {
		position: absolute !important;
	}
	body.site-bonus:has(.site-header--mega) .site-header .site-branding {
		justify-content: start;
		flex-direction: row-reverse;
	}
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) and (max-width: 1499.98px) {
    .site-bonus .mega-nav {
/*         padding-left: 0px; */
    }
}
@media (hover: hover) and (pointer: fine) and (min-width:1200px) {
    .site-bonus .mega-nav li.first-level-item>a::after, .site-bonus .mega-nav li.first-level-item>span::after {
        background-color: var(--cc-color-brand);
        bottom: -24px;
    }
}

/* Customer Popup Override */

/* Sign up btn styles start */
.site-bonus .cc-signup-btn {
    background-color: var(--cc-sign-up-button-bg-color-v2, #fff);
    color: var(--cc-sign-up-button-color);
    border-radius: 100px;
    font-family: var(--cc-primary-font);
    font-weight: var(--cc-font-weight-bold);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    transition: background-color .3s ease-in-out;
    border: none;
    outline: none !important;
    font-size: 14px;
    line-height: 22px;
    padding: 7px 14px;
}

.site-bonus .cc-signup-btn:hover {
    color: var(--cc-sign-up-button-hover-color);
    text-decoration: none;
    background-color: var(--cc-sign-up-button-bg-color-hover-v2);
}

.site-bonus .cc-signup-btn svg {
    flex-shrink: 0;
    margin-right: 4px;
    width: 18px;
    height: 16px;
}

.site-bonus .cc-signup-btn > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;   
}

.site-bonus .cs-wrapper .cs-form-control .cs-form-input {
    font-size: var(--text-xs);
}

/* Start Slot Games Section Override */

.site-bonus .slot-games-section.content-block-filter-games .container, .site-bonus .slot-games-section.content-block-slot-games .container {
    padding: 0;
}

.site-bonus .slot-games-section.content-block-filter-games .container .slot-navigator__title, .site-bonus .slot-games-section.content-block-slot-games .container .slot-navigator__title {
    font-size: var(--text-lg);
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.site-bonus .v1_design .slot-navigator-content-wrap .slot-navigator-content, .site-bonus .v1_design.content-block-slot-games .slot-navigator-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-right: 0;
}
.site-bonus .v1_design.content-block-slot-games .slot-navigator-content {
    margin: 16px 0;
    padding-bottom: 0;
}
@media (min-width: 767px) {
    .site-bonus .v1_design .slot-navigator-content-wrap .slot-navigator-content, .site-bonus .v1_design.content-block-slot-games .slot-navigator-content {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .site-bonus .slot-games-section.content-block-filter-games .container .slot-navigator__title, .site-bonus .slot-games-section.content-block-slot-games .container .slot-navigator__title {
        font-size: var(--text-xl);

    }
}

.site-bonus .v1_design .slot-navigator-content-wrap .slot-navigator-content .game-card,
.site-bonus .v1_design.content-block-slot-games .slot-navigator-content .game-card {
    border-color: var(--grey-200);
}

.site-bonus .v1_design .slot-navigator-content-wrap .slot-navigator-content .game-card .game-card__content,
.v1_design.content-block-slot-games .slot-navigator-content .game-card .game-card__content
 {
    height: 124px;
}
.v2_design.content-block-slot-games .slot-navigator-content .game-card .game-card__content picture img
 {
    height: 65%;
}
.site-bonus .v2_design.content-block-filter-games .slot-navigator-content .game-card .game-card__content picture img {
    height: 75%;
}

@media (min-width: 1440px) {
    .site-bonus .v1_design .slot-navigator-content-wrap .slot-navigator-content .game-card .game-card__content,
    .v1_design.content-block-slot-games .slot-navigator-content .game-card .game-card__content
     {
        height: 168px;
    }
}

.site-bonus .v1_design .slot-navigator-content-wrap .slot-navigator-content .game-card .game-card__footer,
.v1_design.content-block-slot-games .slot-navigator-content .game-card .game-card__footer 
 {
    padding: 10px;
} 

.site-bonus .v1_design .game-card .catena-feed-rating {
    display: none;
}

.site-bonus .v2_design .game-card__footer {
    background: var(--surfaces-secondary) !important;
    filter: unset;
}
    
.site-bonus .v2_design .game-card__buttons a.slot-primary-btn, .site-bonus .v1_design .game-card a.slot-primary-btn {
    background: var(--surface-cta);
    border: none;
}
.site-bonus .v2_design .game-card__buttons a.slot-primary-btn, .site-bonus .v1_design .game-card a.slot-primary-btn:hover:not(:focus) {
    box-shadow: none;
}

    
.site-bonus .content-block-filter-games.v2_design .container > div:first-child {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 8px;
    gap: 8px;
}

.site-bonus .content-block-filter-games.v2_design .container > div:first-child .slot-navigator__title {
    order: 1;
    width: 100%;
    margin-bottom: 8px;
}

.site-bonus .content-block-filter-games.v2_design .container > div:first-child .new-filters-container {
    order: 3;
}

.site-bonus .content-block-filter-games.v2_design .container > div:first-child .slot-navigator-search-bar {
    order: 2;
    width: 100%;
}

.site-bonus .content-block-filter-games.v2_design .container .slot-navigator-content-wrap .slot-navigator-content {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
}

.site-bonus .content-block-filter-games.v2_design .container .slot-navigator-content-wrap .slot-navigator-content .game-card__footer {
    height: auto;
}
.site-bonus .content-block-slot-games.v2_design .container .slot-navigator-content {
    margin: 16px 0;   
}

@media (min-width: 767px) {
    .site-bonus .content-block-filter-games.v2_design .container > div:first-child {
        gap: 0;
        margin-bottom: 16px;
    }

    .site-bonus .content-block-filter-games.v2_design .container > div:first-child .slot-navigator__title {
        order: 1;
        width: 50%;
        font-size: 20px;
    }
    
    .site-bonus .content-block-filter-games.v2_design .container > div:first-child .new-filters-container {
        order: 2;
    }
    
    .site-bonus .content-block-filter-games.v2_design .container > div:first-child .slot-navigator-search-bar {
        order: 1;
        width: 50%;
    }
    
    .site-bonus .content-block-filter-games.v2_design .container > div:first-child .slot-navigator-search-bar div {
        max-width: unset;
    }

    .site-bonus .content-block-filter-games.v2_design .container .slot-navigator-content-wrap .slot-navigator-content {
        grid-template-columns: repeat(5, 1fr);
        grid-auto-rows: 158px;
    }

    .site-bonus .content-block-filter-games.v2_design .container .slot-navigator-content-wrap .slot-navigator-content .game-card__footer {
        height: 57px;
    }

    .site-bonus .content-block-slot-games.v2_design .container .slot-navigator-content {
        grid-template-columns: repeat(7, 1fr);
        grid-auto-rows: 158px;
    }

    .site-bonus .content-block-slot-games.v2_design .container .slot-navigator-content .game-card {
        width: 130px;
    }
}

@media (min-width: 1023px) {
    .site-bonus .content-block-filter-games.v2_design .container .slot-navigator-content-wrap .slot-navigator-content {
        grid-template-columns: repeat(7, 1fr);
        gap: 8px;
    }

}

@media (min-width: 1440px) {
    .site-bonus .content-block-filter-games.v2_design .container .slot-navigator-content-wrap .slot-navigator-content {
        grid-template-columns: repeat(9, 1fr);
        gap: 8px;
    }

    .site-bonus .content-block-slot-games.v2_design .container .slot-navigator-content {
        grid-template-columns: repeat(9, 1fr);
        grid-auto-rows: 158px;
    }

    .site-bonus .content-block-slot-games.v2_design .container .slot-navigator-content .game-card {
        width: unset;
    }
}

.site-bonus .content-block-filter-games.v2_design .container > div:first-child .slot-navigator-search-bar {
    margin: 0;
}

.site-bonus .content-block-filter-games.v2_design .container > div:first-child .slot-navigator-search-bar form {
    margin: 0;
}

/* End Slot Games Section Override */


.site-bonus .mega-nav li.first-level-item:has(svg)>span::after {
    width: calc(100% + 50px);
    left: -10px;
}
.site-bonus .mega-nav li.first-level-item>a::after, .site-bonus .mega-nav li.first-level-item>span::after {
    left: -10px;
    width: calc(100% + 20px);
}

.site-bonus .mega-nav li.first-level-item:has(svg)>a::after, .site-bonus .mega-nav li.first-level-item:has(svg)>span::after {
    width: calc(100% + 50px);
}

@media (min-width: 782px) and (max-width: 1023.98px) {
    body.site-bonus.logged-in.admin-bar .mega-nav {
        top: 86px;
    }
	body.site-bonus.logged-in .mega-nav {
        top: 54px;
    }
}

@media (min-width: 1200px) {
    .site-bonus .mega-nav li.first-level-item:hover {
        background: var(--blue-50);
    }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1400px) {
    .site-bonus .mega-nav li.first-level-item {
        padding-left: 10px;
        padding-right: 10px;
    }
    .site-bonus .mega-nav li.first-level-item:has(.mega-nav__submenu-opener.has_arrow) {
        padding-left: 10px;
        padding-right: 0px;
    }
    
}

@media (hover: hover) and (max-width: 1199.98px), (pointer: coarse) {
    .site-bonus .mega-nav li.second-level-item>ul {
        background: var(--blue-50);
    }
    .site-bonus .mega-nav ul.second-level-list, .site-bonus .mega-nav ul.second-level-list:has(.mega-nav__column) {
        padding-right: 0px;
        padding-left: 0px;
    }
    .site-bonus .mega-nav li.first-level-item.menu-item-has-children.is-opened {
        border-bottom: 0px solid var(--cc-color-brand);
        padding-bottom: 0px;
    }

    .site-bonus .mega-nav li.is-bold>a, .mega-nav li.is-bold>span,
    .site-bonus .mega-nav li.second-level-item>a, .mega-nav li.second-level-item>span,
    .site-bonus .mega-nav li.first-level-item>a, .site-bonus .mega-nav li.first-level-item>span {
        font-weight: var(--cc-font-weight-regular);
    }
    .site-bonus .mega-nav li.first-level-item.menu-item-has-children.is-opened>span {
        margin-bottom: 0px;
    }
    body.site-bonus:has(.site-header--mega) .site-header .mega-nav li span,
    body.site-bonus:has(.site-header--mega) .site-header .mega-nav li:not(.first-level-item) a,
    body.site-bonus:has(.site-header--mega) .site-header .mega-nav li:not(.first-level-item) span,
    body.site-bonus:has(.site-header--mega) .site-header .mega-nav li a {
        color: var(--grey-400);
    }

    .site-bonus .mega-nav li.first-level-item,
    .site-bonus .mega-nav ul.second-level-list>.mega-nav__column>.second-level-item {
        border-bottom: 0px solid var(--cc-color-platinum);
    }   
    
}

@media (max-width: 1199.98px) {
    .site-bonus .third-level-item > span:not(:has(img.custom-menu-image)),
    .site-bonus .third-level-item > a:not(:has(img.custom-menu-image)) {
        padding-left: 30px !important;
    }
    .site-bonus .third-level-item > span:has(img.custom-menu-image),
    .site-bonus .third-level-item > a:has(img.custom-menu-image) {
        padding-left: 0px !important;
    }
    .site-bonus .mega-nav li.second-level-item > a, .site-bonus .mega-nav li.second-level-item > span {
		padding-left: 30px !important;
	}
}

@media (hover: hover) and (pointer: fine) and (min-width: 1200px) {
    .site-bonus .mega-nav .mega-nav__dropdown ul.third-level-list .mega-nav__column {
        border-right: 0px!important;
    }
}

.site-bonus .site-content .content-area .sidebar-right .news-block h2 {
    position: relative;
    font-weight: var(--cc-font-weight-regular);
    text-transform: uppercase;
    padding: 0 0 6px !important;
    margin-bottom: 0 !important;
}
.site-bonus .site-content .content-area .sidebar-right .news-block .news-list .news-list-item {
    padding: 16px 0 13px !important;
}
.site-bonus .site-content .content-area .sidebar-right .news-block .news-list .news-list-item a {
    align-items: start !important;
    border-bottom-color: var(--cc-color-border) !important;
    display: flex;
}
.site-bonus .site-content .content-area .sidebar-right .news-block .news-list .news-list-item a .thumb img {
    width: 85px !important;
    height: 64px !important;
    object-fit: cover;
    filter: none !important;
    border: none !important;
}
.site-bonus .site-content .content-area .sidebar-right .news-block .news-list .news-list-item a .thumb {
	width: 85px;
}
.site-bonus .site-content .content-area .sidebar-right .news-block .news-list .news-list-item a .details {
    padding-left: 12px;
    width: calc(100% - 85px);
}
.site-bonus .site-content .content-area .sidebar-right .news-block .news-list .news-list-item a .details .title {
    font-size: var(--text-md);
	letter-spacing: .14px !important;
    font-weight: var(--cc-font-weight-regular);
    margin-top: 4px;
    margin-bottom: 11px !important;
}
.site-bonus .site-content .content-area .sidebar-right .news-block .news-list .news-list-item a .details .date {
    font-size: var(--text-sm);
}

body.site-bonus.archive {
	padding-top: 74px;
}

@media (max-width: 1023.98px) {
    body.site-bonus:has(.cc-signup-wrapper) .site-header:not(.site-header--mega) .cc-signup-wrapper {
        position: absolute;
        right: 20px;
    }
    body.site-bonus:has(.header-notifications):has(.cc-signup-wrapper) .site-header:not(.site-header--mega) .cc-signup-wrapper {
        right: 60px;
    }
    .site-bonus .site-header.site-header__news .site-branding {
        justify-content: flex-end;
        flex-direction: row-reverse;
        gap: 20px;
    }
	
	body.site-bonus.search .site-header .site-branding,
	body.site-bonus.archive .site-header .site-branding {
        justify-content: flex-end;
        flex-direction: row-reverse;
        gap: 20px;
    }
}

.site-bonus .site-header--mega {
    border-bottom: 3px solid var(--cc-color-brand);
}

/* Navigation arrow manual carousel color override */
.site-bonus .content-block.manual-carousel .manual-carousel__controls .catena-carousel-nav-prev::before,
.site-bonus .content-block.manual-carousel .manual-carousel__controls .catena-carousel-nav-next::before {
    background-color: var(--text-primary) !important;
}
.site-bonus .content-block.manual-carousel .manual-carousel__controls .catena-carousel-nav-prev,
.site-bonus .content-block.manual-carousel .manual-carousel__controls .catena-carousel-nav-next {
    background-color: var(--surfaces-navigation) !important;
}


/* Author BIO */
.site-bonus .site-content .author-view-all-btn-dt:hover, .site-bonus .site-content .author-view-all-btn-mb:hover {
    background: var(--cc-sign-up-button-bg-color-v2, #fff);
    color: var(--cta-text-light);
    border-color: var(--cc-sign-up-button-bg-color-v2, #fff);
}

.site-bonus .site-content .author-view-all-btn-dt {
	    max-width: 240px;
}

.site-bonus .site-content .author-inner-wrapper {
    --border-stroke: var(--blue-100);
}

.site-bonus .site-content .author-header-title {
    --bgColor : var(--blue-500);
}

.site-bonus .site-content .author-view-all-btn-dt {
    --border-stroke: var(--grey-900);
}
.site-bonus .site-content .author-view-all-btn-dt:hover {
    --bgColor: var(--blue-500);
    --cta-ghost-hover: var(--blue-500);
}

/* Gamification overrides */
.site-bonus .header-gamification__secondary-btn--logged-out:not(:where(.header-gamification__cta-group *)) {
    color: var(--black);
    border: 2px solid var(--black, #000);
}

.site-bonus .header-gamification__secondary-btn--logged-out:not(:where(.header-gamification__cta-group *)):hover {
    background-color: var(--blue-500);
    color: var(--white);
    border: 2px solid var(--blue-500);
}

.site-bonus .header-gamification__auth-button--join {
    background-color: var(--blue-500);
    color: var(--white);
}

.site-bonus .js-gamification-trigger {
    background-color: var(--blue-50);
    color: var(--black);
}

.site-bonus .header-gamification__chevron-icon {
    filter: brightness(0) saturate(100%);
}

.site-bonus .profile-navigation .unicorn-button.unicorn-button--tab.is-active,
.site-bonus .unicorn-button--tab.is-active {
    background: var(--blue-500);
    color: var(--white);
}

.site-bonus .profile-navigation .unicorn-button--tab:hover,
.site-bonus .unicorn-button--tab:hover {
    background: var(--blue-700);
    color: var(--white);
}

.site-bonus .user-profile-sections #user-registration .user-registration-profile-fields .unicorn-button--ghost,
.site-bonus .referral-modal__button .referral-copy-link {
    border-color: var(--grey-900);
    color: var(--grey-900);
}

.site-bonus .user-profile-sections #user-registration .user-registration-profile-fields .unicorn-button--ghost:hover,
.site-bonus .referral-modal__button .unicorn-button--ghost:hover {
    border-color: var(--blue-500);
    color: var(--white);
    background: var(--blue-500);
}

.site-bonus #redeem-success-modal .close-button {
    border-color: var(--grey-900);
    color: var(--grey-900);
}

.site-bonus #redeem-success-modal .close-button:hover {
    border-color: var(--blue-500);
    color: var(--white);
    background: var(--blue-500);
}

.site-bonus #reward-details-modal .reward-details-content h4,
.site-bonus #reward-details-modal .reward-details-content span {
    color: var(--text-primary);
}

.site-bonus #reward-details-modal .reward-details-content svg path {
    fill: var(--text-primary);
}

.site-bonus #reward-details-modal .reward-details-footer .reward-redeem-restriction {
    color: var(--text-secondary);
}

.site-bonus #redeem-success-modal .redeem-success-content-code {
    color: var(--text-secondary);
}

.site-bonus #redeem-success-modal .close-button {
    border-color: var(--grey-900);
    color: var(--grey-900);
}

.site-bonus .rewards-wrapper .coin-balance span {
    color: var(--text-primary);
}

.site-bonus .collect-coins-wrap {
    color: var(--white);
}

.site-bonus .collect-coins-wrap::after {
    background: var(--blue-700);
}

.site-bonus .collect-coins-subtext svg path {
    fill: var(--white);
}

.site-bonus .collect-coins-wrap .collect-coins-footer .collect-coins-restrictions p {
    color: var(--text-inactive);
}

.site-bonus .modal .c-user-modal-content#modal-content .bonus-codes .rewards-list .reward-item .reward-container h4 {
    color: var(--text-brand);
}

.site-bonus .header-gamification__coin-toast-text {
    color: var(--white) !important;
}

@media (max-width: 1199.98px) {
	.site-bonus .header-gamification {
        position: absolute;
        right: 20px;
    }
}