/*
 * promotunis - red on ink.
 *
 * Overrides the brand tokens the build ships. Loaded after the vendor
 * stylesheets, so these win on source order without needing !important,
 * except where the original rule used it. The Growth Pack (GROWTH_THEME=site)
 * reads --primary-color, --header-bgColor and --footer-bgColor from here.
 *
 * Palette (brand sheet):
 *   #FF1744  Primary Red    main buttons, active navigation, highlights
 *   #D90429  Deep Red       hover states, gradients, emphasis
 *   #FF526F  Glow Red       neon glow, borders, badges
 *   #FFFFFF  Pure White     logo text, headings, primary text
 *   #121216  Main Bg        page background, navigation
 *   #222228  Card Bg        game cards, panels, sections
 *   #35353D  Border Gray    subtle borders, separators
 *   #BFC0C8  Secondary Text descriptions, timestamps, metadata
 *
 * Semantic colours are untouched: green still means a win.
 */

:root, :root[data-theme=dark], :root[data-theme=light], html body, html.dark body, html.light body {
    --primary-color: #FF1744;
    --primary-active-color: #D90429;
    --casino-menu-search-button-icon-color: #FF526F;
    --casino-menu-search-button-mobile-icon-color: #FF526F;
    --primaryDark: #FF1744;
    --footerTextColorDark: #FF1744;
    --fillButton: #FF1744;
    --darkLightSwitchButtonDark: #FF526F;
    --searchPrimaryDark: #FF1744;
    --headerMobilePlayerIdColor: #FF1744;
    --agentToolPrimary: #FF526F;
    --agentToolPrimaryButton: #FF526F;
    --modalSecondaryTextColorDark: #FF1744;
    --outlineButtonSecondaryDark: #FF526F;
    --swiperButtonIconDark: #FF1744;
    --swiperButtonIconHoverDark: #FF1744;
    --accountDropdownItemHoverDark: #FF1744;
    --backButtonBgHoverDark: #FF526F;
    --favoritesIconEnabled: #FF526F;
    --primaryLight: #FF1744;
    --footerTextColorLight: #FF1744;
    --searchPrimaryLight: #FF1744;
    --fillButtonLight: #FF1744;
    --modalSecondaryTextColorLight: #FF1744;
    --swiperButtonIconLight: #FF1744;
    --swiperButtonIconHoverLight: #FF1744;
    --accountDropdownItemHoverLight: #FF1744;
    --datePickerSelectedBgLLight: #FF1744;
}

.rdp-root {
    --primary-color: #FF1744;
    --primary-active-color: #D90429;
    --casino-menu-search-button-icon-color: #FF526F;
    --casino-menu-search-button-mobile-icon-color: #FF526F;
    --primaryDark: #FF1744;
    --footerTextColorDark: #FF1744;
    --fillButton: #FF1744;
    --darkLightSwitchButtonDark: #FF526F;
    --searchPrimaryDark: #FF1744;
    --headerMobilePlayerIdColor: #FF1744;
    --agentToolPrimary: #FF526F;
    --agentToolPrimaryButton: #FF526F;
    --modalSecondaryTextColorDark: #FF1744;
    --outlineButtonSecondaryDark: #FF526F;
    --swiperButtonIconDark: #FF1744;
    --swiperButtonIconHoverDark: #FF1744;
    --accountDropdownItemHoverDark: #FF1744;
    --backButtonBgHoverDark: #FF526F;
    --favoritesIconEnabled: #FF526F;
    --primaryLight: #FF1744;
    --footerTextColorLight: #FF1744;
    --searchPrimaryLight: #FF1744;
    --fillButtonLight: #FF1744;
    --modalSecondaryTextColorLight: #FF1744;
    --swiperButtonIconLight: #FF1744;
    --swiperButtonIconHoverLight: #FF1744;
    --accountDropdownItemHoverLight: #FF1744;
    --datePickerSelectedBgLLight: #FF1744;
}

/* Rules that hardcoded the purple instead of reading a token. */
.accountMenuItem:hover { background-color: #FF1744; }
.customDropdown ul.localeOptions li:hover { background-color: #FF1744; }
.bonusOptionsList > div.bonusOptionSelected { background-color: #FF1744 !important; }
.promoCardContentSubtitle { color: #FF526F !important; }
.promotionDetailSubtitle { color: #FF526F; }

/*
 * A pressed state the original had no token for. Buttons went from base
 * straight back to base on :active, which reads as an unresponsive tap on
 * a phone - the one place this theme adds to the system rather than
 * rotating it.
 */
.fillButton:active,
.primaryBtn:active,
button.primaryBtn:active { background-color: #D90429; }

/* Surfaces, text and the build's leftover blue-greys and purple glow. */
:root, :root[data-theme=dark], html body, html.dark body {
    --header-bgColor: #121216;
    --footer-bgColor: #0c0c0f;
    --secondary-color: #ffffff;
    --primary-font-color: #ffffff;

    --contentBgDark: #121216;
    --modalBgDark: #121216;
    --secondaryModalBgDark: #121216;
    --headerBgDark: #121216;
    --headerModalBgColorDark: #121216;
    --sidebarMenuBgDark: #121216;
    --footerBgDark: #0c0c0f;
    --footerBgAltDark: #18181d;

    --secondaryDark: #222228;
    --tabsBgDark: #222228;
    --promotionsCardBgDark: #222228;
    --providersBgDark: #222228;
    --popularCompetitionBgDark: #222228;
    --tabsSelectedBgDark: #35353D;
    --casinoMenuItemDark: #35353D;
    --outlineButtonDark: #35353D;
    --accountLogoutButtonDark: #35353D;
    --gamesButtonBgHoverDark: #35353D;
    --gamesButtonIconHoverDark: #35353D;
    --darkLightSwitcherBgDark: #222228;
    --darkLightSwitcherIconActiveDark: #35353D;
    --darkLightSwitcherIconDark: #BFC0C8;
    --phoneCountriesDropdownTextDark: #35353D;

    --headerTextDark: #BFC0C8;
    --paymentInfoTextDark: #BFC0C8;
    --footerTextDark: #BFC0C8;

    --headerMenuActiveDark: #FF1744;
    --headerMenuHoverDark: #D90429;
    --casinoMenuItemHoverDark: #FF1744;
    --homeSliderButtonDark: #FF1744;
    --homeSliderButtonHoverDark: #D90429;
    --accountDepositButtonBgDark: #FF1744;
    --accountDepositButtonBgHoverDark: #D90429;
    --profileModalButtonBgDark: #FF1744;
    --profileModalButtonBgHoverDark: #D90429;
    --phoneCountriesDropdownHighlightDark: #FF1744;
    --outlineButtonHoverSecondaryDark: #FF526F;
    --shadowDark: #FF526F;
}

/* Recommended gradient: white -> Glow Red -> Deep Red, for highlight bars and the pressed CTA glow. */
.fillButton, .primaryBtn, button.primaryBtn { box-shadow: 0 0 0 rgba(255, 82, 111, 0); transition: box-shadow .15s; }
.fillButton:hover, .primaryBtn:hover, button.primaryBtn:hover { box-shadow: 0 0 14px rgba(255, 82, 111, .45); }

/* Leftover build purples: hover tokens, provider names under game tiles, expanded filter borders. */
:root, :root[data-theme=dark], html body, html.dark body, .rdp-root {
    --primary-hover-color: #D90429;
    --agentToolPrimaryButtonHover: #D90429;
}
.casinoGamesRowContainer .swiper-wrapper .providerName, .casinoGamesContainer .providerName, .providerContainer .providerName, .searchProviderName, .intermediateScreenContainer .providerName { color: #BFC0C8 !important; }
.providerFilter button.expanded, .headerDropdownBtn.expanded, .headerBalanceBtnMobile.expanded, .sortFilter button.expanded { border: 1px solid #FF526F !important; }

/*
 * Home category tiles on phones: two per row (secondary_sliders_per_row_mobile "2" in the skin config).
 * The bundle sets each tile's flex-basis to calc((100% / n - (gap / n * (n - 1))) - one ")" short, so the
 * browser drops it and the tiles take their image width and overflow the screen. Same width, valid.
 */
.thumbnailSliderContainer .thumbnailSliderMobile { gap: 0.75rem; }
.thumbnailSliderContainer .thumbnailSliderMobile > .homeSliderItem {
    flex: 0 0 calc(50% - 0.375rem) !important;
    max-width: calc(50% - 0.375rem);
    min-width: 0;
}
.thumbnailSliderContainer .thumbnailSliderMobile > .homeSliderItem img { width: 100%; height: auto; }