@everymatrix/casino-bonuses-controller 1.22.5

package/src/component/CasinoBonusCard.svelte

@@ -0,0 +1,1154 @@
+<svelte:options tag={null} />
+<script lang="ts">
+  import {onMount} from 'svelte';
+  import moment from 'moment';
+  import './CasinoBonusProgress.svelte';
+  import {BonusControllerTranslations} from '../translation';
+  import { _, addNewMessages, setLocale } from '../i18n';
+  import { getCurrencySymbol } from '../base';
+  export let rawbonus: string = '';
+  export let lang: string ='en';
+  export let status: string = '';
+  export let clientstyling: string = '';
+  export let clientstylingurl: string = '';
+  export let cmsendpoint: string = '';
+  export let translationurl: srting = '';
+
+  let bonus: any;
+  let levels = [];
+  let levelCount: number;
+  let showDataSection: boolean = true;
+  let showActionSection: boolean = false;
+  let showAdditionalSection: boolean = false;
+  let showAdditionalSectionContent: boolean = false;
+  let showTermsSectionContent: boolean = false;
+  let isButtonClickable: boolean = true;
+  let showTerms: boolean = false;
+  let claimBonusError: boolean = false;
+  let bonusDescription: object = {};
+  let currencySymbol: string;
+  let expiryTime: string;
+  let endTime: string = '';
+  let timeForInterval: number = 1000 * 30;
+  let customStylingContainer: HTMLElement;
+  let tcurl: string = '';
+  let isMounted: boolean = false;
+  let hover: boolean = false;
+  let hoverIndex: number;
+  let games: Array<any> = [];
+  let sliderOffset: number = 0;
+  
+  const setTranslationUrl = (): void => {
+    let url:string = translationurl;
+
+    fetch(url).then((res:any) => res.json())
+    .then((res) => {
+      Object.keys(res).forEach((item:any):void => {
+        addNewMessages(item, res[item]);
+      });
+    }).catch((err:any) => {
+      console.log(err);
+    });
+  }
+  Object.keys(BonusControllerTranslations).forEach((item:any) => {
+    addNewMessages(item, BonusControllerTranslations[item]);
+  });
+  $:{
+    if(status === 'claimable' ){
+      showActionSection = true;
+    }
+    if(status === 'active'){
+      showActionSection = true;
+    }
+  }
+  onMount(() => {
+    window.addEventListener('message', messageHandler, false);
+    isMounted = true;
+    return () => {
+      window.removeEventListener('message', messageHandler);
+      isMounted = false;
+    }
+  })
+  const init = (): void =>{
+    try {
+      bonus = JSON.parse(rawbonus);
+    } catch (e){
+    }
+
+    if(!bonus) return;
+    if(bonus.type === 'wagering'){
+      showAdditionalSection = true;
+    }
+    
+    currencySymbol = getCurrencySymbol(bonus.currency);
+    levels = getLevels(bonus.levels);
+    if(bonus.type === 'freeRound'){
+      games = getGames(bonus.freeSpin);
+    }
+    setIntervalTime()
+  }
+  const getGames = (freeSpin: any): void =>{
+    if(!freeSpin || !freeSpin.vendorGamesDetail) return [];
+    let array = [];
+    if(Object.keys(freeSpin.vendorGamesDetail).length > 0){
+      Object.keys(freeSpin.vendorGamesDetail).forEach((vendor)=>{
+        array = freeSpin.vendorGamesDetail[vendor];
+      });
+    }
+    return array;
+  }
+  const getLevels = (sourceLevels : Array<any>): Array<any> => {
+    if(!sourceLevels) return [];
+    const levels = []
+    let infiniteFlag = false;
+    sourceLevels.map((l,i)=> {
+      const { maxRepeats, completedTime, ...rest } = l;
+      if(maxRepeats === 0){
+        infiniteFlag = true;
+      }
+      for(let i = 0; i < maxRepeats; i++) {
+        levels.push({
+          ...rest,
+        })
+      }
+    });
+    if(infiniteFlag) {
+      levelCount = 0
+    }else{
+      levelCount = levels.length;
+    }
+    return levels
+  }
+
+  const eventClaimBonus = (): void =>{
+    isButtonClickable = false;
+    claimBonusError = false;
+    window.postMessage({type:'OnBonusClaimed',bonusCode:bonus.code});
+  }
+
+  const eventForfeitBonus = (): void =>{
+    isButtonClickable = false;
+    window.postMessage({type:'OnBonusForfeit',bonus:bonus});
+  }
+
+  const messageHandler = (e:any): void =>{
+    switch (e.data.type) {
+      case 'OnBonusClaimedDone':
+        isButtonClickable = true;
+        break;
+      case 'OnBonusForfeitedDone':
+        isButtonClickable = true;
+      case 'OnBonusClaimError':
+        if(e.data.bonusCode === bonus.code){
+          claimBonusError = true;
+        }
+        break;
+      default:
+        break;
+    }
+  }
+  const getModAndRemainder = (n: number, m: number): any => ({
+    remainder: n % m,
+    quotient: Math.floor(n/m)
+  })
+
+  const diffRawFromNow = (rawtime: number | string | Date): number => {
+    
+    const timeNow = new Date();
+    const time = new Date(rawtime);
+    
+    const diff = (time.getTime() - timeNow.getTime());
+    
+    return diff;
+  }
+  
+  const getTextFormated = (rawtime: number | string | Date): string => {
+    
+    const diff = diffRawFromNow(rawtime) / (1000 * 60);
+
+    const { quotient: day, remainder: diffInDay } = getModAndRemainder(diff, 1440);
+    const { quotient: hour, remainder: diffInHour } = getModAndRemainder(diffInDay, 60);
+    const minute = Math.floor(diffInHour);
+
+    const grace = (value) => Math.abs(value) < 10 ? `0${value}` : value;
+
+    const units = [
+      {
+        value: day,
+        symbol: 'd'
+      },
+      {
+        value: hour,
+        symbol: 'h'
+      },
+      {
+        value: minute,
+        symbol: 'm'
+      },
+    ];
+    
+    return units
+      .map(unit => grace(unit.value) + unit.symbol)
+      .join(' ');
+
+  }
+  const timeIntervalSetter = (time: Date, timeForInterval: number, setterExpired: () => void, setter: (text: string) => void) => {
+    const timeRaw = diffRawFromNow(time);
+    if(timeRaw < 0){
+      setterExpired();
+    }else{
+      setter(getTextFormated(time));
+      // check if bonus will expire
+      if(timeRaw < timeForInterval){
+        setTimeout(() => {
+          window.postMessage({ type: 'OnWageringBonusExpired' });
+        }, timeRaw);
+      }
+    }
+  }
+  const setIntervalTime = (): void => {
+    if(!bonus) return;
+    if(bonus.endTime || bonus.trigger && bonus.trigger.endTime){
+      timeIntervalSetter(bonus.endTime || bonus.trigger.endTime, timeForInterval,() => endTime = 'Expired',(text: string) => endTime = text);
+    }
+    if(bonus.expiryDate){
+      timeIntervalSetter(bonus.expiryDate, timeForInterval,() => expiryTime = 'Expired',(text: string) => expiryTime = text);
+    }
+  }
+  
+  const getWagered = (bonus: any): number=>{
+    let wagered = (bonus.initialWagerRequirementAmount * 10 - bonus.remainingWagerRequirementAmount * 10) / 10;
+    if(bonus.status === 'released'){
+      wagered += bonus.remainingAmount;
+    }
+    return wagered;
+  }
+
+  const getWageringWagered = (bonus: any): number => {
+    return((bonus.wageringProgress?.currentLevelIncrement * 10 - bonus.wageringProgress?.gap * 10) / 10).toFixed(1);
+  }
+
+  const getProgressValue = (bonus: any): number => {
+    let wageredAmount;
+    let denominator;
+    if(bonus.type === 'wagering' && bonus.status === 'active' && bonus.wageringType === 'money'){
+      denominator = bonus.wageringProgress?.currentLevelIncrement;
+      if(denominator != 0){
+        wageredAmount = (((bonus.wageringProgress?.currentLevelIncrement - bonus.wageringProgress?.gap) / denominator) * 100).toFixed(1);
+      }
+    }else if(bonus.status == 'released'){
+      wageredAmount = 100;
+    }else{
+      denominator = bonus.initialWagerRequirementAmount;
+      if(denominator != 0){
+        wageredAmount = (((bonus.initialWagerRequirementAmount - bonus.remainingWagerRequirementAmount)  / denominator) * 100).toFixed(1);
+      }
+    }
+    return Number(wageredAmount);
+  }
+
+  const getTimeFormat = (time: string): string=> {
+    return moment(time).format('YYYY-MM-DD hh:mm:ss');
+  }
+
+  const getValidity = (bonus: any): string=>{
+    if(!bonus.wallet) return;
+    let validity = bonus.wallet.validityMinutes;
+    return  validity === 0 ? 'infinite' : Math.round(validity / 1440) + ' days';
+  }
+
+  const getProduct = (bonus: any): string=>{
+    if(bonus.products){
+      return bonus.products;
+    }else{
+      let result = [];
+      if(bonus.wallet){
+        if(bonus.wallet.casino){
+          result.push('Casino');
+        }
+
+        if(bonus.wallet.sports){
+          result.push('Sports');
+        }
+      }
+      return result;
+    }
+    
+  }
+
+  const levelBonusMapperCommon = (_level: any, levelBonus): string => {
+    let text: string
+    text = $_(`bonusType.${levelBonus.type}`);
+
+    const currencyShown: string = getCurrencySymbol(Object.keys(_level.increment)[0])
+
+    if(levelBonus.mode === 'percentage'){
+      return `${levelBonus.bonusAmount * 100}% up to ${currencyShown}${levelBonus.capAmount} ${text}`
+    }
+
+    if(levelBonus.mode === 'fixed'){
+      return `${currencyShown}${levelBonus.bonusAmount} ${text}`
+    }
+  }
+
+  const levelBonusMapper = (_level: any, levelBonus): string => {
+    switch(levelBonus.type){
+      case 'standard':
+      case 'freeBet':
+        return levelBonusMapperCommon(_level, levelBonus);
+      
+      case 'freeRound':
+        return `${levelBonus.freespinNumber} Free Spins`;
+      
+      case 'tournamentTicket':
+        return `Enroll to Tournament Ticket`;
+      case 'oddsBoost':
+        return `Enroll to Odds Boost`;
+      case 'cashBack':
+        return `Enroll to Cash Back`;
+      case 'stakeBack':
+        return `Enroll to Stake Back`;
+    }
+  }
+
+  type Reward = {
+    label: string;
+    desc: string;
+  }
+  
+  const getRewards = (bonus, levels): Reward[] => {
+
+    const index = bonus.wageringProgress?.currentLevel - 1
+
+    const lastIndex = levels.length - 1
+
+    const renderx = (arr): Reward[] => arr
+      .filter(line => line.index >= 0 && line.index <= lastIndex)
+      .map(line => {
+        const _level = levels[line.index]
+        return {
+          label: line.label,
+          desc: _level.bonuses.map(levelBonus => levelBonusMapper(_level,levelBonus))
+        }
+      });
+
+    if(bonus.status === 'active'){
+      return renderx([
+        {
+          label: 'current',
+          index: index,
+        },{
+          label: 'next',
+          index: index + 1
+        }]
+      )
+      
+    }else if(!bonus.status){
+        return renderx([
+          {
+            label: 'first',
+            index: 0,
+          },
+          {
+            label: 'next',
+            index: 1,
+          }
+        ])
+    }else{
+      return renderx([
+          {
+            label: 'last',
+            index: lastIndex,
+          },
+          {
+            label: 'previous',
+            index: lastIndex - 1
+          }
+      ]) 
+    }
+  }
+  const getBonusUrl = (bonus: any): void =>{
+    tcurl = bonus.url ? bonus.url : bonus.presentation?.url?.content;
+  }
+
+  const classWithPart = (partAndClass: any, extraClass: string = ''): void => ({
+    part: partAndClass,
+    class: [partAndClass, extraClass].join(' '),
+  });
+  const gameClicked = (game:any): void => {
+    window.postMessage({ type: 'BonusGameAction', gameId: game.id, name: game.name, gameLaunchUrl: game.href }, window.location.href);
+  }
+  const enter = (index: number): void => {
+    hover = true;
+    hoverIndex = index;
+  }
+
+  const leave = (): void => {
+    hover = false;
+    hoverIndex = -1;
+  }
+  const getDataFromCMS = (bonusID: string): void => {
+    fetch(`${cmsendpoint}/${lang}/bonuses-information/${bonusID}`)
+      .then((res: any) => res.json())
+      .then((data: any) => {
+        if(data && data[bonusID]){
+          showTerms = true;
+          bonusDescription = data[bonusID];
+        }
+      });
+  }
+  const setContent = (element: HTMLElement, content: any): void => {
+    let htmlContent = document.createElement("div");
+    htmlContent.innerHTML = content;
+    element.append(htmlContent);
+  }
+  const setClientStyling = (): void => {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    customStylingContainer.appendChild(sheet);
+  }
+
+  const setClientStylingURL = (): void => {
+    let url:URL = new URL(clientstylingurl);
+    let cssFile:HTMLElement = document.createElement('style');
+
+    fetch(url.href)
+      .then((res:any) => res.text())
+      .then((data:any) => {
+        cssFile.innerHTML = data
+
+        setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
+      });
+  }
+  $: initialLoad = rawbonus && lang && status;
+  $: initialLoad && init();
+  $: {
+    if(initialLoad && bonus){
+      if(lang){
+        setLocale(lang);
+      }
+      if(cmsendpoint){
+        getDataFromCMS(bonus.id);
+      }else{
+        getBonusUrl(bonus);
+      }
+    } 
+  }
+  $: clientstyling && customStylingContainer && setClientStyling();
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
+  $: translationurl && setTranslationUrl();
+</script>
+
+{#if bonus}
+<div {...classWithPart('BonusCard')} bind:this={customStylingContainer}>
+  <div {...classWithPart('BonusCardInfo')}>
+    <div {...classWithPart('BonusCardHeader')}>
+      <p {...classWithPart('BonusCardRowTitle')}>
+        <span {...classWithPart('TitleIcon')}>
+          {#if getProduct(bonus).indexOf('Casino') > -1}
+            <svg {...classWithPart('CasinoIcon')} viewBox="0 0 41 41">
+              <path d="M21.2942 0V5.23421C24.916 5.42484 28.1964 6.86246 30.7301 9.14994L34.4393 5.44072C30.9525 2.22394 26.3616 0.190624 21.2942 0Z" fill="black"/>
+              <path d="M30.7301 31.8501C28.2043 34.1296 24.916 35.5752 21.2942 35.7658V41C26.3616 40.8094 30.9525 38.7761 34.4313 35.5593L30.7221 31.8501H30.7301Z" fill="black"/>
+              <path d="M35.7658 21.2943C35.5752 24.9162 34.1376 28.1965 31.8501 30.7302L35.5593 34.4394C38.7761 30.9605 40.8094 26.3697 41 21.3023H35.7658V21.2943Z" fill="black"/>
+              <path d="M19.7056 35.7658C16.0838 35.5752 12.8035 34.1376 10.2698 31.8501L6.56055 35.5593C10.0394 38.7761 14.6382 40.8094 19.6977 41V35.7658H19.7056Z" fill="black"/>
+              <path d="M31.8501 10.2698C34.1296 12.7955 35.5752 16.0838 35.7658 19.7056H41C40.8094 14.6382 38.7761 10.0474 35.5593 6.56848L31.8501 10.2777V10.2698Z" fill="black"/>
+              <path d="M19.7058 0C14.6383 0.190624 10.0395 2.22394 6.5686 5.44072L10.2778 9.14994C12.8036 6.8704 16.0918 5.42484 19.7137 5.23421V0H19.7058Z" fill="black"/>
+              <path d="M9.14994 30.7302C6.8704 28.2044 5.42484 24.9162 5.23421 21.2943H0C0.190624 26.3617 2.22394 30.9526 5.44072 34.4315L9.14994 30.7222V30.7302Z" fill="black"/>
+              <path d="M5.23421 19.7058C5.42484 16.0839 6.86246 12.8036 9.14994 10.2699L5.44072 6.56067C2.22394 10.0475 0.190624 14.6384 0 19.7058H5.23421Z" fill="black"/>
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 31.825C26.7547 31.825 31.825 26.7547 31.825 20.5C31.825 14.2454 26.7547 9.17505 20.5 9.17505C14.2454 9.17505 9.17505 14.2454 9.17505 20.5C9.17505 26.7547 14.2454 31.825 20.5 31.825ZM20.5 33.825C27.8592 33.825 33.825 27.8592 33.825 20.5C33.825 13.1409 27.8592 7.17505 20.5 7.17505C13.1409 7.17505 7.17505 13.1409 7.17505 20.5C7.17505 27.8592 13.1409 33.825 20.5 33.825Z" fill="black"/>
+              <path d="M21.6173 27.6413V28.7H19.3741V27.6413C17.3997 27.3092 16.3999 26.0428 16.3999 24.0707V23.0742H18.996V24.216C18.996 25.254 19.5421 25.6276 20.4159 25.6276C21.2897 25.6276 21.8358 25.254 21.8358 24.216C21.8442 21.2266 16.4755 21.0813 16.4755 16.9294C16.4755 14.978 17.4501 13.7325 19.3741 13.3795V12.3H21.6173V13.3795C23.5665 13.7117 24.5663 14.9573 24.5663 16.9294V17.3861H21.9702V16.7841C21.9702 15.7461 21.4745 15.3517 20.6007 15.3517C19.727 15.3517 19.2313 15.7461 19.2313 16.7841C19.2313 19.7735 24.5999 19.9188 24.5999 24.0707C24.5999 26.0428 23.5749 27.3092 21.6257 27.6413H21.6173Z" fill="black"/>
+              <circle cx="28.1874" cy="21.0125" r="1.5375" fill="black"/>
+              <circle cx="12.8124" cy="21.0125" r="1.5375" fill="black"/>
+            </svg>
+          {/if}
+          {#if getProduct(bonus).indexOf('Sports') > -1}
+            
+            <svg {...classWithPart('SportsIcon')} viewBox="0 0 43 40">
+              <path d="M23 0C11.9555 0 3 8.95539 3 20C3 31.0446 11.9555 40 23 40C34.0454 40 43 31.0444 43 20C43 8.95558 34.0452 0 23 0ZM26.9568 37.9018C25.6574 38.1573 24.0408 38.3044 22.7261 38.3297C21.4806 38.3119 20.2402 38.1672 19.0241 37.8977C18.8058 37.8415 18.5877 37.7846 18.3698 37.7268L16.022 31.435L17.911 27.6923H28.0892L28.144 27.7958L30.0037 31.5315L27.7327 37.7125C27.4755 37.7813 27.2168 37.8444 26.9568 37.9018ZM16.6133 2.81538L22.1346 6.59385V12.1849L15.308 17.9606L10.5577 15.7962L10.157 15.6136L8.00971 9.45788C10.126 6.4575 13.1191 4.11827 16.6133 2.81538ZM37.9581 9.42952L35.8012 15.6298L30.6096 17.9748L23.7692 12.1849V6.59385L29.3073 2.80394C32.8037 4.10039 35.8366 6.43394 37.9581 9.42952ZM4.74462 21.6744L9.91346 17.2015L14.6768 19.3745L14.7306 19.399L16.6265 26.8305L14.6618 30.5352L7.94452 30.4472C6.18029 27.9126 5.03933 24.9139 4.74462 21.6744ZM31.3384 30.5351L29.3736 26.8304L31.2728 19.3865L36.0802 17.1961L41.2554 21.6744C40.9607 24.9139 39.8196 27.9126 38.0557 30.4471L31.3384 30.5351Z" fill="black"/>
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M23 39C23 39.5523 22.5523 40 22 40L6 40C5.44772 40 5 39.5523 5 39C5 38.4477 5.44772 38 6 38L22 38C22.5523 38 23 38.4477 23 39Z" fill="black"/>
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M9 36C9 36.5523 8.55228 37 8 37L1 37C0.447715 37 -3.91405e-08 36.5523 -8.74228e-08 36C-1.35705e-07 35.4477 0.447715 35 1 35L8 35C8.55228 35 9 35.4477 9 36Z" fill="black"/>
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M3 39C3 39.5523 2.55228 40 2 40L1 40C0.447715 40 3.91405e-08 39.5523 8.74228e-08 39C1.35705e-07 38.4477 0.447715 38 1 38L2 38C2.55228 38 3 38.4477 3 39Z" fill="black"/>
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M23 38C32.9411 38 41 29.9411 41 20C41 10.0589 32.9411 2 23 2C13.0589 2 5 10.0589 5 20C5 29.9411 13.0589 38 23 38ZM23 40C34.0457 40 43 31.0457 43 20C43 8.9543 34.0457 0 23 0C11.9543 0 3 8.9543 3 20C3 31.0457 11.9543 40 23 40Z" fill="black"/>
+            </svg>
+              
+          {/if}
+        </span>
+        {bonus.name || bonus.presentation?.name.content}
+
+      </p>
+      {#if status === 'active'}
+        <span {...classWithPart('BonusCardTitleSub')}>
+          <svg width="24" height="28" viewBox="0 0 24 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16 0H8V2.66667H16V0ZM10.6667 17.3333H13.3333V9.33333H10.6667V17.3333ZM21.3667 8.51333L23.2667 6.61333C22.6933 5.92667 22.0667 5.3 21.38 4.72667L19.48 6.62667C17.3568 4.92342 14.7153 3.99668 11.9933 4C5.36 4 0 9.37333 0 16C0 22.6267 5.36 28 11.9933 28C18.6267 28 24 22.6267 24 16C24 13.1667 23.0133 10.5667 21.3667 8.51333ZM12 25.3333C6.84667 25.3333 2.66667 21.1533 2.66667 16C2.66667 10.8467 6.84667 6.66667 12 6.66667C17.1533 6.66667 21.3333 10.8467 21.3333 16C21.3333 21.1533 17.1533 25.3333 12 25.3333Z" fill="#6D6D6D"/>
+          </svg>
+          {expiryTime}
+        </span>
+      {:else if status === 'completed'}
+        <p {...classWithPart('BonusCardTitleSub')}>{bonus.status}</p>
+      {/if}
+    </div>
+    {#if showDataSection}
+      <div {...classWithPart('BonusCardData')}>
+        <div {...classWithPart('BonusCardDataContent')}>
+          {#if status === 'claimable'}
+            <p {...classWithPart('BonusCardRow')}>
+              <span {...classWithPart('BonusCardLabel')}>{$_(`bonusCard.bonusType`)}:</span>
+              <span {...classWithPart('BonusCardRowText','Type')}>{$_(`bonusType.${bonus.type}`)} </span>
+            </p>
+            
+            {#if bonus.type === 'wagering'}
+              <p {...classWithPart('BonusCardRow')}>
+                <span {...classWithPart('BonusCardLabel')}>{$_(`bonusCard.levels`)}:</span>
+                <span {...classWithPart('BonusCardRowText')}>
+                  {#if levelCount > 0}
+                    {levelCount}
+                  {:else}
+                    &#8734
+                  {/if}  
+                </span>
+              </p>
+            {/if}
+
+            <p {...classWithPart('BonusCardRow')}>
+              <span {...classWithPart('BonusCardLabel')}>{$_(`bonusCard.validity`)}:</span>
+              <span {...classWithPart('BonusCardRowText')}>{getValidity(bonus)}</span>
+            </p>
+          {:else}
+            <p {...classWithPart('BonusCardRow')}>
+              <span {...classWithPart('BonusCardLabel')}>{$_(`bonusCard.bonusStatus`)}:</span>
+              <span {...classWithPart('BonusCardRowText')} 
+                class:StatusActive={status === 'active'}
+                class:StatusCompleted={status === 'completed'}
+                class:StatusClaimable={status === 'claimable'}>
+                {#if status === 'active'}
+                  {status}
+                {:else}
+                  {bonus.status}
+                {/if}
+              </span>
+            </p>
+            <p {...classWithPart('BonusCardRow')}>
+              <span {...classWithPart('BonusCardLabel')}>{$_(`bonusCard.bonusType`)}:</span>
+              <span {...classWithPart('BonusCardRowText','Type')}>{$_(`bonusType.${bonus.type}`)} </span>
+            </p>
+            {#if bonus.type === 'standard'}
+              <p {...classWithPart('BonusCardRow')}>
+                <span {...classWithPart('BonusCardLabel')} >{$_(`bonusCard.bonusAmount`)}:</span>
+                <span {...classWithPart('BonusCardRowText')}>
+                  <span class:BonusAmount={status==='active'}>{bonus.remainingAmount}{currencySymbol}</span> /
+                  <span class:Amount={status==='active'}>{bonus.amount}{currencySymbol}</span>
+                </span>
+              </p>
+              <p {...classWithPart('BonusCardRow')}>
+                <span {...classWithPart('BonusCardLabel')}>{$_(`bonusCard.wageredAmount`)}:</span>
+                <span {...classWithPart('BonusCardRowText')}>
+                  {getWagered(bonus) + currencySymbol} /
+                  {#if bonus.initialWagerRequirementAmount >= 2147483647}
+                    &#8734
+                  {:else}
+                    {bonus.initialWagerRequirementAmount + currencySymbol}
+                  {/if}
+                </span>
+              </p>
+            {/if}
+            {#if bonus.type === 'freeBet'}
+              <p {...classWithPart('BonusCardRow')}>
+                <span {...classWithPart('BonusCardLabel')}>{$_(`bonusCard.bonusAmount`)}:</span>
+                <span {...classWithPart('BonusCardRowText')}>
+                  <span class:BonusAmount={status==='active'}>{bonus.remainingAmount}{currencySymbol}</span>
+                </span>
+              </p>
+            {/if}
+            {#if bonus.type === 'freeRound'}
+              {#if bonus.status === 'active'}
+                <p {...classWithPart('BonusCardRow')}>
+                  <span {...classWithPart('BonusCardLabel')}>{$_(`bonusCard.roundNumber`)}:</span>
+                  <span {...classWithPart('BonusCardRowText')}>{bonus.numberOfFreeSpin}</span>
+                </p>
+
+                <div {...classWithPart('BonusCardRow')}>
+                  <div {...classWithPart('BonusCardLabel')}>{$_(`bonusCard.game`)}:</div>
+                  <div {...classWithPart('BonusCardRowText')}>
+                    <div class="BonusGamesSlider">
+                      <button class="SliderNavButton" part="SliderNavButton" class:Hide={games.length <= 3} disabled={sliderOffset==0} on:click="{() => sliderOffset += 300}">
+                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+                        </svg>
+                      </button>
+                      <div class="Main">
+                        <span class="Games" style="transform: translateX({sliderOffset}px);">
+                        {#each games as game, i}
+                          <span class="Game" part="Game" on:click={() => gameClicked(game)} on:mouseenter={() => enter(i)} on:mouseleave={() => leave()}>
+                            <span class="PlayNowButton {hover && hoverIndex == i ? 'ItemHover' : ''}" part="PlayNowButton {hover && hoverIndex == i ? 'itemHover' : ''}">{$_('bonusCard.playNow')}</span>
+                            <img src={game.thumbnail} width="100px" height="75px" alt={game.name} title={game.name}/>
+                          </span>
+                        {/each}
+                        </span>
+                      </div>
+                      <button class="SliderNavButton" part="SliderNavButton" class:Hide={games.length <= 3} disabled={sliderOffset <= -(games.length-3) * 100} on:click="{() => sliderOffset -= 300}">
+                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              {/if}
+              
+            {/if}
+            {#if bonus.type === 'wagering'}
+                <p {...classWithPart('BonusCardRow')}>
+                  <span {...classWithPart('BonusCardLabel')}>{$_(`bonusCard.wageringType`)}:</span>
+                  <span {...classWithPart('BonusCardRowText')}>{$_(`bonusCard.${bonus.wageringType}`)}</span>
+                </p>
+                <p {...classWithPart('BonusCardRow')}>
+                  <span {...classWithPart('BonusCardLabel')}>{$_(`bonusCard.wagered`)}:</span>
+                  <span {...classWithPart('BonusCardRowText')}>
+                    
+                    {#if bonus.wageringType === 'money'}
+                      {#if status === 'active'}
+                        {getWageringWagered(bonus)} {currencySymbol} / 
+                        {bonus.wageringProgress?.currentLevelIncrement} {currencySymbol}
+                      {:else}
+                        {getWagered(bonus) + currencySymbol} /
+                        {#if bonus.initialWagerRequirementAmount >= 2147483647}
+                          &#8734
+                        {:else}
+                          {bonus.initialWagerRequirementAmount + currencySymbol}
+                        {/if}
+                      {/if}
+                    {:else}
+
+                    {/if}
+                    
+                  </span>
+                </p>
+            {/if}
+            {#if bonus.endTime && status === 'active' && bonus.type !== 'wagering'}
+              <p {...classWithPart('BonusCardRow')}>
+                <span {...classWithPart('BonusCardLabel')}>{$_(`bonusCard.validUntil`)}:</span>
+                <span {...classWithPart('BonusCardRowText')}>{getTimeFormat(bonus.endTime)}</span>
+              </p>
+            {/if}
+          {/if}
+        </div>
+        {#if status === 'active' || status === 'completed'}
+          {#if bonus.type === 'standard'}
+            <div {...classWithPart('BonusCardProgress')}>
+              <casino-bonus-progress {...classWithPart('CircularProgress')} value={getProgressValue(bonus)} status={status} clientstyling={clientstyling} clientstylingurl={clientstylingurl}/>
+            </div>
+          {/if}
+
+          {#if bonus.type === 'wagering'}
+            <div {...classWithPart('BonusCardProgress')}>
+              <casino-bonus-progress {...classWithPart('CircularProgress')} value={getProgressValue(bonus)} status={status} clientstyling={clientstyling} clientstylingurl={clientstylingurl}/>
+              <div {...classWithPart('CircularProgressText')}>{$_(`bonusCard.level`)}: {bonus.wageringProgress?.currentLevel || 1} / 
+                {#if levelCount > 0}
+                  {levelCount}
+                {:else}
+                  &#8734
+                {/if}
+              </div>
+            </div>
+          {/if}
+        {/if}
+      </div>
+    {/if}
+    <div {...classWithPart('BonusCardFooter')} class:Active={showAdditionalSectionContent || showTermsSectionContent}>
+      {#if showAdditionalSection}
+        <div {...classWithPart('BonusCardAdditional')} >
+          <div {...classWithPart('BonusCardAdditionalHeader')} class:Active={showAdditionalSectionContent} on:click={() => {showAdditionalSectionContent = !showAdditionalSectionContent}}>
+            <span {...classWithPart('BonusCardAdditionalTitle')}>
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M18 5.97075H14.885C15.3396 5.74285 15.7565 5.44638 16.121 5.09175C16.6824 4.52865 16.9977 3.76592 16.9977 2.97075C16.9977 2.17558 16.6824 1.41285 16.121 0.84975C14.987 -0.28325 13.013 -0.28325 11.879 0.84975C10.243 2.48675 10.02 5.56775 10 5.91375C9.98 5.56775 9.757 2.48675 8.121 0.85075C6.987 -0.28225 5.011 -0.28125 3.879 0.85075C3.312 1.41675 3 2.16975 3 2.97075C3 3.77175 3.312 4.52575 3.878 5.09175C4.24311 5.4461 4.66027 5.74253 5.115 5.97075H2C0.897 5.97075 0 6.86875 0 7.97075V10.9707C0 11.236 0.105357 11.4903 0.292893 11.6779C0.48043 11.8654 0.734784 11.9707 1 11.9707V17.9708C1 19.0738 1.897 19.9708 3 19.9708H17C18.103 19.9708 19 19.0738 19 17.9708V11.9707C19.2652 11.9707 19.5196 11.8654 19.7071 11.6779C19.8946 11.4903 20 11.236 20 10.9707V7.97075C20 6.86875 19.103 5.97075 18 5.97075ZM6 17.9708H3V11.9707H6V17.9708ZM6 9.97075H2V7.97075H6V9.97075ZM5.293 3.67775C5.19982 3.58514 5.12595 3.47497 5.07565 3.35361C5.02536 3.23225 4.99964 3.10212 5 2.97075C4.99947 2.83933 5.02498 2.7091 5.07506 2.58759C5.12514 2.46608 5.1988 2.3557 5.29177 2.26281C5.38475 2.16993 5.49521 2.09639 5.61677 2.04643C5.73833 1.99647 5.86858 1.97109 6 1.97175C6.268 1.97175 6.519 2.07575 6.708 2.26475C7.298 2.85375 7.642 3.91275 7.826 4.79475C6.945 4.60975 5.88 4.26475 5.293 3.67775ZM12 17.9708H8V11.9707H12V17.9708ZM12 9.97075H8V7.97075H12V9.97075ZM13.293 2.26475C13.482 2.07575 13.733 1.97175 14 1.97175C14.267 1.97175 14.518 2.07575 14.707 2.26375C14.8945 2.45128 14.9998 2.70559 14.9998 2.97075C14.9998 3.23591 14.8945 3.49022 14.707 3.67775C14.117 4.26975 13.058 4.61375 12.175 4.79875C12.358 3.91375 12.703 2.85475 13.293 2.26475ZM17 17.9708H14V11.9707H17V17.9708ZM18 9.97075H14V7.97075H18V9.97075Z" fill="black"/>
+              </svg>
+              {$_(`bonusCard.rewards`)}</span>
+            <span {...classWithPart('BonusCardAdditionalButton')}>
+              {#if !showAdditionalSectionContent}
+                <svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M2 2.07104L9.07107 9.14211L16.1421 2.07104" stroke="black" stroke-width="3" stroke-linecap="round"/>
+                </svg>
+              {:else}
+                <svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M16.1422 10.071L9.07108 2.99998L2.00002 10.071" stroke="black" stroke-width="3" stroke-linecap="round"/>
+                </svg>
+              {/if}
+            </span>
+          </div>
+          {#if showAdditionalSectionContent}
+          <div {...classWithPart('BonusCardAdditionalContent')} >
+            {#if bonus.type === 'wagering'}
+              {#if bonus.status}
+                {#each (getRewards(bonus, levels)) as item }
+                  <p {...classWithPart("BonusRewardsLevelsItem")}>
+                    <span {...classWithPart("BonusRewardsLevelsItemPosition")}>
+                      {$_(`bonusCard.${item.label}`)} {$_(`bonusCard.level`)}:
+                    </span>
+                    <span>
+                      {#each item.desc as description}
+                        {description}
+                      {/each}
+                    </span>
+                  </p>
+                {/each}
+              {:else}
+                {#each bonus.levels as level, index}
+                <p {...classWithPart("BonusRewardsLevelsItem")}>
+
+                  <span {...classWithPart("BonusRewardsLevelsItemPosition")}>
+                    {$_(`bonusCard.level`)}
+                    {level.maxRepeats > 1 ? `${index + 1}-${index + 1 + level.maxRepeats - 1}` : index + 1}:
+                  </span>
+                  <span>
+                    {#each level.bonuses as levelBonus}
+                      {levelBonusMapper(level, levelBonus)}
+                    {/each}
+                  </span>
+                </p>
+                {/each}
+              {/if}
+              <a {...classWithPart("BonusAllRewardsLink")} href={"javascript:void(0)"} on:click={() => window.postMessage({type: 'OnWageringBonusAllRewardsClick', bonusWalletID: bonus.id})}>
+                {$_(`bonusCard.allRewards`)}
+              </a>
+            {/if}
+          </div>
+          {/if}
+        </div>
+      {/if}
+      {#if showTerms}
+        <div {...classWithPart('BonusCardTerms')} >
+          <div {...classWithPart('BonusCardTermsHeader')} class:Active={showTermsSectionContent} on:click={() => {showTermsSectionContent = !showTermsSectionContent}}>
+            <span {...classWithPart('BonusCardTermsTitle')}>
+              <svg width="19" height="21" viewBox="0 0 19 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 3.675C0.5 1.64535 2.14535 0 4.175 0H14.675C16.7046 0 18.35 1.64535 18.35 3.675V13.4312C18.35 14.4319 17.9419 15.3893 17.2201 16.0823L13.164 19.9761C12.4796 20.6331 11.5676 21 10.6189 21H4.175C2.14536 21 0.5 19.3546 0.5 17.325V3.675ZM4.175 2.1C3.30515 2.1 2.6 2.80515 2.6 3.675V17.325C2.6 18.1948 3.30515 18.9 4.175 18.9H10.6189C11.0255 18.9 11.4164 18.7428 11.7097 18.4612L15.7657 14.5674C16.0751 14.2704 16.25 13.86 16.25 13.4312V3.675C16.25 2.80515 15.5448 2.1 14.675 2.1H4.175Z" fill="black"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.775 14.9625L12.575 14.9625C12.1401 14.9625 11.7875 15.3151 11.7875 15.75L11.7875 19.95L10.2125 19.95L10.2125 15.75C10.2125 14.4452 11.2703 13.3875 12.575 13.3875L16.775 13.3875L16.775 14.9625Z" fill="black"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.27502 4.9875C6.27502 4.55258 6.6276 4.2 7.06252 4.2H11.7875C12.2224 4.2 12.575 4.55258 12.575 4.9875C12.575 5.42242 12.2224 5.775 11.7875 5.775H7.06252C6.6276 5.775 6.27502 5.42242 6.27502 4.9875Z" fill="black"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.70001 8.1375C4.70001 7.70258 5.05259 7.35 5.48751 7.35H13.3625C13.7974 7.35 14.15 7.70258 14.15 8.1375C14.15 8.57242 13.7974 8.925 13.3625 8.925H5.48751C5.05259 8.925 4.70001 8.57242 4.70001 8.1375Z" fill="black"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.70001 11.8125C4.70001 11.3776 5.05259 11.025 5.48751 11.025H13.3625C13.7974 11.025 14.15 11.3776 14.15 11.8125C14.15 12.2474 13.7974 12.6 13.3625 12.6H5.48751C5.05259 12.6 4.70001 12.2474 4.70001 11.8125Z" fill="black"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.70001 15.4875C4.70001 15.0526 5.05259 14.7 5.48751 14.7H8.11251C8.54744 14.7 8.90001 15.0526 8.90001 15.4875C8.90001 15.9224 8.54744 16.275 8.11251 16.275H5.48751C5.05259 16.275 4.70001 15.9224 4.70001 15.4875Z" fill="black"/>
+              </svg>
+                
+              {$_(`bonusCard.terms`)}
+            </span>
+            <span {...classWithPart('BonusCardTermsButton')}>
+              {#if !showTermsSectionContent}
+                <svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M2 2.07104L9.07107 9.14211L16.1421 2.07104" stroke="black" stroke-width="3" stroke-linecap="round"/>
+                </svg>
+              {:else}
+                <svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M16.1422 10.071L9.07108 2.99998L2.00002 10.071" stroke="black" stroke-width="3" stroke-linecap="round"/>
+                </svg>
+              {/if}
+            </span>
+          </div>
+          {#if showTermsSectionContent}
+            <div {...classWithPart('BonusCardTermsContent')} use:setContent={bonusDescription.terms_and_conditions}>
+            </div>
+          {/if}
+        </div>
+      {:else}
+        <div {...classWithPart('BonusCardTerms')}>
+          
+          <a {...classWithPart('BonusCardTermsLink')} href={tcurl} target="__blank">
+            <svg width="19" height="21" viewBox="0 0 19 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 3.675C0.5 1.64535 2.14535 0 4.175 0H14.675C16.7046 0 18.35 1.64535 18.35 3.675V13.4312C18.35 14.4319 17.9419 15.3893 17.2201 16.0823L13.164 19.9761C12.4796 20.6331 11.5676 21 10.6189 21H4.175C2.14536 21 0.5 19.3546 0.5 17.325V3.675ZM4.175 2.1C3.30515 2.1 2.6 2.80515 2.6 3.675V17.325C2.6 18.1948 3.30515 18.9 4.175 18.9H10.6189C11.0255 18.9 11.4164 18.7428 11.7097 18.4612L15.7657 14.5674C16.0751 14.2704 16.25 13.86 16.25 13.4312V3.675C16.25 2.80515 15.5448 2.1 14.675 2.1H4.175Z" fill="black"/>
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M16.775 14.9625L12.575 14.9625C12.1401 14.9625 11.7875 15.3151 11.7875 15.75L11.7875 19.95L10.2125 19.95L10.2125 15.75C10.2125 14.4452 11.2703 13.3875 12.575 13.3875L16.775 13.3875L16.775 14.9625Z" fill="black"/>
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M6.27502 4.9875C6.27502 4.55258 6.6276 4.2 7.06252 4.2H11.7875C12.2224 4.2 12.575 4.55258 12.575 4.9875C12.575 5.42242 12.2224 5.775 11.7875 5.775H7.06252C6.6276 5.775 6.27502 5.42242 6.27502 4.9875Z" fill="black"/>
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M4.70001 8.1375C4.70001 7.70258 5.05259 7.35 5.48751 7.35H13.3625C13.7974 7.35 14.15 7.70258 14.15 8.1375C14.15 8.57242 13.7974 8.925 13.3625 8.925H5.48751C5.05259 8.925 4.70001 8.57242 4.70001 8.1375Z" fill="black"/>
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M4.70001 11.8125C4.70001 11.3776 5.05259 11.025 5.48751 11.025H13.3625C13.7974 11.025 14.15 11.3776 14.15 11.8125C14.15 12.2474 13.7974 12.6 13.3625 12.6H5.48751C5.05259 12.6 4.70001 12.2474 4.70001 11.8125Z" fill="black"/>
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M4.70001 15.4875C4.70001 15.0526 5.05259 14.7 5.48751 14.7H8.11251C8.54744 14.7 8.90001 15.0526 8.90001 15.4875C8.90001 15.9224 8.54744 16.275 8.11251 16.275H5.48751C5.05259 16.275 4.70001 15.9224 4.70001 15.4875Z" fill="black"/>
+            </svg>
+            {$_(`bonusCard.terms`)}
+          </a>
+        </div>
+      {/if}
+    </div>
+  </div>
+  {#if showActionSection}
+    <div {...classWithPart('BonusCardAction')} >
+      <div {...classWithPart('BonusCardActionContent')} >
+        {#if status === 'claimable'}
+          <div {...classWithPart('BonusCardJoinWrapper')}>
+            {#if claimBonusError === true}
+              <span {...classWithPart('BonusCardJoinError')}>{$_(`bonusCard.error`)}</span>
+            {/if}
+            <span {...classWithPart('BonusCardJoinCountdown')}>
+              <svg width="24" height="28" viewBox="0 0 24 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M16 0H8V2.66667H16V0ZM10.6667 17.3333H13.3333V9.33333H10.6667V17.3333ZM21.3667 8.51333L23.2667 6.61333C22.6933 5.92667 22.0667 5.3 21.38 4.72667L19.48 6.62667C17.3568 4.92342 14.7153 3.99668 11.9933 4C5.36 4 0 9.37333 0 16C0 22.6267 5.36 28 11.9933 28C18.6267 28 24 22.6267 24 16C24 13.1667 23.0133 10.5667 21.3667 8.51333ZM12 25.3333C6.84667 25.3333 2.66667 21.1533 2.66667 16C2.66667 10.8467 6.84667 6.66667 12 6.66667C17.1533 6.66667 21.3333 10.8467 21.3333 16C21.3333 21.1533 17.1533 25.3333 12 25.3333Z" fill="#6D6D6D"/>
+              </svg>
+              {endTime}
+            </span>
+            <button {...classWithPart('BonusJoinButton')} type="button" on:click={eventClaimBonus} disabled={!isButtonClickable}>
+              {$_(`bonusCard.join`)}
+            </button>
+          </div>
+        {/if}
+        {#if status === 'active' && bonus.status === 'active'}
+          <button {...classWithPart('BonusForfeitButton')} type="button" on:click={eventForfeitBonus} disabled={!isButtonClickable}>
+            {$_(`bonusCard.forfeit`)}
+          </button>
+        {/if}
+      </div>
+    </div>
+  {/if}
+
+  
+</div>
+{/if}
+
+<style lang="scss">
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+  .BonusCard {
+    background-color: #F4F4F4;
+    padding: 10px 20px 20px;
+    border-radius: 5px;
+    font-size: 18px;
+    font-weight: 500;
+    color: var(--emfe-w-bonus-card-text,var(--emfe-w-color-gray-300, #6D6D6D));
+  }
+
+  .BonusCardHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #D1D1D1;
+    
+    &:nth-child(even) {
+      background-color: var(--emfe-w-bonus-card-bg,var(--emfe-w-color-gray-50, #F9F8F8));
+    }
+  }
+  .BonusCardRow {
+    display: flex;
+    padding: 11px 0;
+    margin: 0;
+    align-items: center;
+  }
+  .BonusCardLabel {
+    flex: 3;
+  }
+  .BonusCardRowTitle {
+    color: var(--emfe-w-bonus-card-black,var(--emfe-w-color-black, #000000));
+    font-weight: 700;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    text-indent: 10px;
+    span {
+      font-weight: 400;
+      color: var(--emfe-w-bonus-card-span,var(--emfe-w-color-primary, #00AEEF));
+    }
+  }
+  .BonusCardTitleSub {
+    display: flex;
+    font-size: 16px;
+    text-indent: 10px;
+    align-items: center;
+    font-weight: 400;
+  }
+  .BonusCardRowText {
+    flex:2;
+    color: #9C9C9C;
+    text-transform: capitalize;
+    &.BonusCardStatus {
+      font-weight: 700;
+      color: var(--emfe-w-bonus-card-title,var(--emfe-w-color-black, #000000));
+    }
+    &.StatusActive {
+      color: var(--emfe-w-bonus-card-green,var(--emfe-w-color-green, #53B65A));
+    }
+    &.Type {
+      color: var(--emfe-w-bonus-card-black,var(--emfe-w-color-black, #000000));
+    }
+    &.StatusExpired {
+      color: var(--emfe-w-bonus-card-red,var(--emfe-w-color-red, #FD2839));
+    }
+    &.StatusCompleted {
+      color: var(--emfe-w-bonus-card-yellow,var(--emfe-w-color-yellow, #F39C12));
+    }
+    &.TextCapitalize {
+      text-transform: capitalize;
+    }
+
+    .BonusAmount {
+      color: var(--emfe-w-bonus-card-black,var(--emfe-w-color-black, #000000));
+    }
+    .Amount {
+      color: var(--emfe-w-bonus-card-green,var(--emfe-w-color-green, #53B65A));
+    }
+  }
+  .BonusCardAction{
+    margin: 20px 0 0;
+    padding: 10px 5px 0 0;
+    display: flex;
+    justify-content: end;
+  }
+  .BonusCardAdditional ,.BonusCardTerms {
+    border: 1px solid var(--emfe-w-bonus-card-border,var(--emfe-w-color-gray-100, #E6E6E6));
+    background:  var(--emfe-w-bonus-card-white,var(--emfe-w-color-white, #FFFFFF));
+    color: var(--emfe-w-bonus-card-black,var(--emfe-w-color-black, #000000));
+    padding: 12px;
+    border-radius: 4px;
+    position: relative;
+    margin-top:10px;
+    font-size: 16px;
+    transition: height 0.3s ease;
+    will-change: height;
+    &.active{
+      transition: height 0.3s ease;
+    }
+  }
+  .BonusCardAdditionalTitle, .BonusCardTermsTitle {
+    display: flex;
+    align-items: center;
+    text-indent: 10px;
+  }
+  .BonusCardAdditionalButton {
+    font-weight: 700;
+    font-size: 30px;
+    position: absolute;
+    top: 0;
+    right: 10px;
+    cursor: pointer;
+  }
+  .BonusCardTermsButton {
+    font-weight: 700;
+    font-size: 30px;
+    position: absolute;
+    top: 0;
+    right: 10px;
+    cursor: pointer;
+  }
+  .BonusCardTermsLink {
+    display: flex;
+    align-items: center;
+    color: #000;
+    text-indent: 10px;
+    cursor: pointer;
+  }
+  .BonusCardJoinError {
+    color: var(--emfe-w-bonus-card-red,var(--emfe-w-color-red, #FF0000));
+    align-self: center;
+  }
+  .BonusCardJoinCountdown {
+    display: flex;
+    align-items: center;
+    text-indent: 10px;
+    font-size: 16px;
+    font-weight: 400;
+  }
+  .BonusCardJoinWrapper {
+    display: flex;
+    gap: 30px;
+  }
+  .BonusJoinButton {
+    background: var(--emfe-w-bonus-card-green,var(--emfe-w-color-green, #53B65A));
+    outline: 5px solid var(--emfe-w-bonus-card-green,var(--emfe-w-color-green, rgba(83, 182, 90, 0.3)));
+    border-radius: 9px;
+    border: 0;
+    width: 180px;
+    height: 38px;
+    font-size: 18px;
+    font-weight: 400;
+    text-align: center;
+    transition-duration: 0.5s;
+    box-sizing: border-box;
+    cursor: pointer;
+    color: var(--emfe-w-bonus-card-white,var(--emfe-w-color-white, #FFFFFF));
+    &[disabled] {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+    &.ClaimBonusButtonMobile {
+      width: 100%;
+    }
+    &:hover {
+      background: var(--emfe-w-bonus-card-green,var(--emfe-w-color-green, #25982D));
+      outline: 0;
+    }
+    &:active {
+      background: var(--emfe-w-bonus-card-green,var(--emfe-w-color-green, #25982D));
+      outline-color: rgba(83, 182, 90, 0.6);
+    }
+  }
+  .BonusForfeitButton {
+    background: var(--emfe-w-bonus-card-red,var(--emfe-w-color-red, #F32013));
+    outline: 5px solid var(--emfe-w-bonus-card-red,var(--emfe-w-color-red, rgba(243, 32, 19, 0.3)));
+    border-radius: 9px;
+    border: 0;
+    width: 180px;
+    height: 38px;
+    font-size: 18px;
+    font-weight: 400;
+    text-align: center;
+    transition-duration: 0.5s;
+    box-sizing: border-box;
+    cursor: pointer;
+    color: var(--emfe-w-color-white, #FFFFFF);
+    &[disabled] {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+    &.ClaimBonusButtonMobile {
+      width: 100%;
+    }
+    &:hover {
+      background: var(--emfe-w-bonus-card-red,var(--emfe-w-color-red, #C70C00));
+      outline: 0;
+    }
+    &:active {
+      background: var(--emfe-w-bonus-card-red,var(--emfe-w-color-red, #C70C00));
+      outline-color: var(--emfe-w-bonus-card-red,var(--emfe-w-color-red, rgba(243, 32, 19, 0.6)));
+    }
+  }
+  .BonusCardActionCountdown {
+    margin-bottom: 5px;
+  }
+  .BonusCardData {
+    display: flex;
+  }
+  .BonusCardDataContent{
+    flex:3;
+    height: 260px;
+  }
+  .BonusCardFooter {
+    height: 100px;
+    &.Active {
+      height: auto;
+    }
+  }
+  .BonusCardProgress {
+    flex: 1;
+    max-width: 147px;
+    .CircularProgress {
+      display: flex;
+      margin: 15px;
+      position: relative;
+    }
+    .CircularProgressText {
+      text-align: center;
+    }
+    --progress-track-color: var(--emfe-w-bonus-card-blue,var(--emfe-w-color-blue, #00AEEF));
+  }
+  .BonusActionWagering {
+    display: flex;
+    height: 100px;
+  }
+  .BonusWageringInfo {
+    flex: 60%;
+  }
+  .BonusWageringButton {
+    flex: 40%;
+  }
+  .TitleIcon {
+    display: flex;
+    max-width: 83px;
+    min-width: 43px; 
+    height: 41px;
+  }
+  .CasinoIcon,.SportsIcon { fill: none;}
+  .BonusGamesSlider {
+    display: flex;
+  }
+  .SliderNavButton {
+    border: 0px;
+    width: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    svg{
+      width: 20px;
+    }
+    &.Hide {
+      display: none;
+    }
+  }
+  .Main {
+    max-width: 300px;
+    overflow: hidden;
+  }
+  .Games {
+    display: flex;
+    transition: transform 0.4s ease-in-out;
+    transform: translateX(0px);
+  }
+  .Game {
+    min-width: 100px;
+    height: 75px;
+    margin: 0;
+    color: var(--emfe-w-bonus-card-white,var(--emfe-w-color-white, #FFFFFF));
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    font-size: 10rem;
+    user-select: none;
+    overflow: hidden;
+  }
+
+  .PlayNowButton {
+    position: absolute;
+    background: var(--emfe-w-bonus-card-green,var(--emfe-w-color-green, #48952a));
+    display: block;
+    box-sizing: border-box;
+    padding: 0.8rem .5rem;
+    color: var(--emfe-w-bonus-card-white,var(--emfe-w-color-white, #FFFFFF));
+    text-transform: uppercase;
+    text-align: center;
+    font-weight: 600;
+    font-size: 0.7rem;
+    cursor: pointer;
+    transition: opacity .4s linear;
+    opacity: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .ItemHover {
+    opacity: 1;
+  }
+  @media only screen and (max-width: 728px) {
+    .BonusCard{
+      font-size: 12px;
+    }
+    .BonusCardRowTitle {
+      font-size: 14px;
+    }
+    .BonusCardTitleSub {
+      font-size: 12px;
+    }
+    .BonusCardAction,.BonusCardActionContent, .BonusForfeitButton, .BonusJoinButton {
+      width: 100%;
+    }
+    .BonusCardAction {
+      margin-top: 10px;
+    }
+    .TitleIcon {
+      max-width: 60px;
+      min-width: 30px;
+      height: 30px;
+    }
+    .BonusCardAdditional, .BonusCardTerms {
+      font-size: 14px;
+    }
+    .BonusCardProgress .CircularProgress {
+      margin: 10px 0;
+    }
+    .BonusCardFooter {
+      height: auto;
+    }
+    .BonusCardDataContent {
+      height: auto;
+    }
+    .BonusCardJoinWrapper {
+      flex-direction: column;
+      gap: 15px;
+    }
+    .BonusCardJoinCountdown {
+      font-size: 12px;
+    }
+  }
+</style>