@everymatrix/casino-challenge-details 0.10.36 → 0.10.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/casino-challenge-details/casino-challenge-details-1ecbe310.js +7 -0
  2. package/dist/casino-challenge-details/casino-challenge-details_4.entry.js +1 -1
  3. package/dist/casino-challenge-details/index.esm.js +1 -1
  4. package/dist/cjs/{casino-challenge-details-c096ce9a.js → casino-challenge-details-7f9a94a9.js} +6 -5
  5. package/dist/cjs/casino-challenge-details_4.cjs.entry.js +1 -1
  6. package/dist/cjs/index.cjs.js +1 -1
  7. package/dist/collection/components/casino-challenge-details/casino-challenge-details.css +11 -1
  8. package/dist/collection/components/casino-challenge-details/casino-challenge-details.js +3 -3
  9. package/dist/collection/utils/locale.utils.js +2 -1
  10. package/dist/esm/{casino-challenge-details-1496580b.js → casino-challenge-details-1ecbe310.js} +6 -5
  11. package/dist/esm/casino-challenge-details_4.entry.js +2 -2
  12. package/dist/esm/index.js +1 -1
  13. package/dist/types/utils/types.d.ts +1 -0
  14. package/package.json +1 -1
  15. package/dist/casino-challenge-details/casino-challenge-details-1496580b.js +0 -7
package/dist/cjs/casino-challenge-details_4.cjs.entry.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const casinoChallengeDetails = require('./casino-challenge-details-c096ce9a.js');
5
+ const casinoChallengeDetails = require('./casino-challenge-details-7f9a94a9.js');
6
6
  const index = require('./index-2a30d71d.js');
7
7
 
8
8
  const activeChevronSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMC40MTA4MjYgMC45MTEwN0MwLjczNjI2MyAwLjU4NTYzMyAxLjI2MzkgMC41ODU2MzMgMS41ODkzNCAwLjkxMTA3TDYuMDAwMDggNS4zMjE4MUwxMC40MTA4IDAuOTExMDdDMTAuNzM2MyAwLjU4NTYzMyAxMS4yNjM5IDAuNTg1NjMzIDExLjU4OTMgMC45MTEwN0MxMS45MTQ4IDEuMjM2NTEgMTEuOTE0OCAxLjc2NDE0IDExLjU4OTMgMi4wODk1OEw2LjU4OTM0IDcuMDg5NThDNi4yNjM5IDcuNDE1MDIgNS43MzYyNiA3LjQxNTAyIDUuNDEwODMgNy4wODk1OEwwLjQxMDgyNiAyLjA4OTU4QzAuMDg1Mzg4OCAxLjc2NDE0IDAuMDg1Mzg4OCAxLjIzNjUxIDAuNDEwODI2IDAuOTExMDdaIiBmaWxsPSIjMDBCNzRGIi8+Cjwvc3ZnPgo=';
package/dist/cjs/index.cjs.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const casinoChallengeDetails = require('./casino-challenge-details-c096ce9a.js');
5
+ const casinoChallengeDetails = require('./casino-challenge-details-7f9a94a9.js');
6
6
  require('./index-2a30d71d.js');
7
7
 
8
8
 
package/dist/collection/components/casino-challenge-details/casino-challenge-details.css CHANGED
@@ -451,14 +451,24 @@
451
451
  flex-direction: column;
452
452
  }
453
453
  .details .rules__tab .link {
454
+ display: inline-flex;
455
+ align-items: center;
456
+ margin: 14px 0;
454
457
  font-size: var(--emw--font-size-x-small, 12px);
455
458
  font-weight: var(--emw--font-weight-bold, 700);
456
- line-height: 18px;
459
+ line-height: 14px;
457
460
  background: var(--emw--button-background-color, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));
458
461
  background-clip: text;
459
462
  padding: 0;
460
463
  -webkit-background-clip: text;
461
464
  -webkit-text-fill-color: transparent;
465
+ text-transform: uppercase;
466
+ }
467
+ .details .rules__tab .link .icon {
468
+ transform: rotate(180deg);
469
+ margin-left: 8px;
470
+ width: 8px;
471
+ height: 8px;
462
472
  }
463
473
  .details .rules__tab .contributionType {
464
474
  margin: 0 0 22px;
package/dist/collection/components/casino-challenge-details/casino-challenge-details.js CHANGED
@@ -487,11 +487,11 @@ export class CasinoChallengeDetails {
487
487
  return (h("div", { class: "sportsbook-rules" }, h("p", { class: "rule" }, h("h3", { class: "rule__title" }, translate('fundsUsed', this.language)), h("span", null, contributionType)), h("p", { class: "rule" }, h("h3", { class: "rule__title" }, translate('eligibleMatchTypes', this.language)), h("span", null, matchType)), h("p", { class: "rule" }, h("h3", { class: "rule__title" }, translate('eligibleBetTypes', this.language)), h("div", { class: "rule__inners" }, BetTypes.includes(EBetType.Single) && this.renderSingleBetType(), BetTypes.includes(EBetType.Multiple) && this.renderMultipleBetType(), BetTypes.includes(EBetType.System) && this.renderSystemBetType()))));
488
488
  };
489
489
  this.rulesTab = () => {
490
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
490
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
491
491
  const contributionType = this.getContributionType((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ContributedBy);
492
492
  const contributionRule = this.getContributionRule((_b = this.challenge) === null || _b === void 0 ? void 0 : _b.IsContributeToOne);
493
493
  const isSportsbook = ((_c = this.challenge) === null || _c === void 0 ? void 0 : _c.ContributedFrom) === EContributedFrom.Sportsbook;
494
- return (h("div", { class: "rules__tab" }, ((_e = (_d = this.challenge) === null || _d === void 0 ? void 0 : _d.ChallengePresentation) === null || _e === void 0 ? void 0 : _e.Description) && (h("div", { class: "rule" }, (_g = (_f = this.challenge) === null || _f === void 0 ? void 0 : _f.ChallengePresentation) === null || _g === void 0 ? void 0 : _g.Description)), !isSportsbook && (h("div", null, contributionType && (h("div", { class: "contributionType" }, h("span", { class: "contribution__label contribution__type__label" }, '\u{1F4B0}', " ", translate('contributionType', this.language), ":"), h("span", { class: "contribution__value" }, contributionType))), contributionRule && (h("div", { class: "contributionRule" }, h("span", { class: "contribution__label" }, '\u{1F4C4}', " ", translate('contributionRule', this.language), ":"))), contributionRule && h("span", { class: "contribution__value contribution__rule__value" }, contributionRule))), ((_j = (_h = this.challenge) === null || _h === void 0 ? void 0 : _h.ChallengePresentation) === null || _j === void 0 ? void 0 : _j.Url) && (h("a", { class: "link", href: (_l = (_k = this.challenge) === null || _k === void 0 ? void 0 : _k.ChallengePresentation) === null || _l === void 0 ? void 0 : _l.Url, target: "_blank" }, translate('terms', this.language))), isSportsbook && this.renderSportsbookRules()));
494
+ return (h("div", { class: "rules__tab" }, ((_e = (_d = this.challenge) === null || _d === void 0 ? void 0 : _d.ChallengePresentation) === null || _e === void 0 ? void 0 : _e.Description) && (h("div", { class: "rule" }, (_g = (_f = this.challenge) === null || _f === void 0 ? void 0 : _f.ChallengePresentation) === null || _g === void 0 ? void 0 : _g.Description)), !isSportsbook && (h("div", null, contributionType && (h("div", { class: "contributionType" }, h("span", { class: "contribution__label contribution__type__label" }, '\u{1F4B0}', " ", translate('contributionType', this.language), ":"), h("span", { class: "contribution__value" }, contributionType))), contributionRule && (h("div", { class: "contributionRule" }, h("span", { class: "contribution__label" }, '\u{1F4C4}', " ", translate('contributionRule', this.language), ":"))), contributionRule && h("span", { class: "contribution__value contribution__rule__value" }, contributionRule))), (((_j = (_h = this.challenge) === null || _h === void 0 ? void 0 : _h.ChallengePresentation) === null || _j === void 0 ? void 0 : _j.RulesDescription) || ((_l = (_k = this.challenge) === null || _k === void 0 ? void 0 : _k.ChallengePresentation) === null || _l === void 0 ? void 0 : _l.Url)) && (h("div", null, h("div", { class: "contributionRule" }, h("span", { class: "contribution__label" }, translate('terms', this.language))), ((_o = (_m = this.challenge) === null || _m === void 0 ? void 0 : _m.ChallengePresentation) === null || _o === void 0 ? void 0 : _o.RulesDescription) && (h("span", { class: "contribution__value contribution__rule__value" }, (_q = (_p = this.challenge) === null || _p === void 0 ? void 0 : _p.ChallengePresentation) === null || _q === void 0 ? void 0 : _q.RulesDescription)), ((_s = (_r = this.challenge) === null || _r === void 0 ? void 0 : _r.ChallengePresentation) === null || _s === void 0 ? void 0 : _s.RulesDescription) && ((_u = (_t = this.challenge) === null || _t === void 0 ? void 0 : _t.ChallengePresentation) === null || _u === void 0 ? void 0 : _u.Url) && (h("br", null)), ((_w = (_v = this.challenge) === null || _v === void 0 ? void 0 : _v.ChallengePresentation) === null || _w === void 0 ? void 0 : _w.Url) && (h("a", { class: "link", href: (_y = (_x = this.challenge) === null || _x === void 0 ? void 0 : _x.ChallengePresentation) === null || _y === void 0 ? void 0 : _y.Url, target: "_blank" }, translate('readFullTerms', this.language), h("img", { class: "icon", src: backIcon }))))), isSportsbook && this.renderSportsbookRules()));
495
495
  };
496
496
  this.footer = () => {
497
497
  var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -765,7 +765,7 @@ export class CasinoChallengeDetails {
765
765
  }
766
766
  }
767
767
  render() {
768
- return (h("div", { key: '3bc15f9e862c15c4922d1e09bcadc33b68d60750', ref: (el) => (this.stylingContainer = el), class: "container-wrapper" }, h("div", { key: '8f8337f476a8cf3deab3a71f260a9346dc1c99a9', class: "container" }, this.pageHeader(), this.loading ? (h("div", { class: "lds-dual-ring" })) : (h("div", null, h("button", { class: "back-button", onClick: this.goBack }, h("img", { class: "back-button__icon", src: backIcon }), this.getBackButtonText()), this.forfeitedNofitication(), this.completedNotification(), this.expiredNotification(), h("div", { class: "details" }, this.cardGeneralInfo(), h("div", { class: "details__tabs-container" }, this.challengeTabs(), this.challengeTabContent()), this.footer()))))));
768
+ return (h("div", { key: '97ccfa3ef3dab91ddc91a18efd3fb0aebbcaee64', ref: (el) => (this.stylingContainer = el), class: "container-wrapper" }, h("div", { key: 'b49a51d3dce7318584f313a8a3f787b2688d89af', class: "container" }, this.pageHeader(), this.loading ? (h("div", { class: "lds-dual-ring" })) : (h("div", null, h("button", { class: "back-button", onClick: this.goBack }, h("img", { class: "back-button__icon", src: backIcon }), this.getBackButtonText()), this.forfeitedNofitication(), this.completedNotification(), this.expiredNotification(), h("div", { class: "details" }, this.cardGeneralInfo(), h("div", { class: "details__tabs-container" }, this.challengeTabs(), this.challengeTabContent()), this.footer()))))));
769
769
  }
770
770
  static get is() { return "casino-challenge-details"; }
771
771
  static get encapsulation() { return "shadow"; }
package/dist/collection/utils/locale.utils.js CHANGED
@@ -24,6 +24,7 @@ const TRANSLATIONS = {
24
24
  completedNofitication: "You've successfully completed this challenge! Explore the next one and keep playing to earn more rewards!",
25
25
  expiredNotification: 'Unfortunately, this challenge has expired and is no longer available to complete. Try another one that’s still active!',
26
26
  terms: 'Terms & Conditions',
27
+ readFullTerms: 'Read full Terms & Conditions',
27
28
  contribution: 'contribution',
28
29
  endDate: 'End Date',
29
30
  back: 'Back',
@@ -57,7 +58,7 @@ const TRANSLATIONS = {
57
58
  oddsPerSection: 'Odds per Selection',
58
59
  totalOdds: 'Total Odds',
59
60
  selections: 'Selections'
60
- },
61
+ }
61
62
  };
62
63
  export const translate = (key, customLang) => {
63
64
  const lang = customLang;
package/dist/esm/{casino-challenge-details-1496580b.js → casino-challenge-details-1ecbe310.js} RENAMED
@@ -144,6 +144,7 @@ const TRANSLATIONS = {
144
144
  completedNofitication: "You've successfully completed this challenge! Explore the next one and keep playing to earn more rewards!",
145
145
  expiredNotification: 'Unfortunately, this challenge has expired and is no longer available to complete. Try another one that’s still active!',
146
146
  terms: 'Terms & Conditions',
147
+ readFullTerms: 'Read full Terms & Conditions',
147
148
  contribution: 'contribution',
148
149
  endDate: 'End Date',
149
150
  back: 'Back',
@@ -177,7 +178,7 @@ const TRANSLATIONS = {
177
178
  oddsPerSection: 'Odds per Selection',
178
179
  totalOdds: 'Total Odds',
179
180
  selections: 'Selections'
180
- },
181
+ }
181
182
  };
182
183
  const translate = (key, customLang) => {
183
184
  const lang = customLang;
@@ -3605,7 +3606,7 @@ var EDetailsTabs;
3605
3606
  EDetailsTabs[EDetailsTabs["Rules"] = 2] = "Rules";
3606
3607
  })(EDetailsTabs || (EDetailsTabs = {}));
3607
3608
 
3608
- const casinoChallengeDetailsCss = ".container-wrapper {\n container-type: inline-size;\n container-name: challenges-details;\n}\n\n.container {\n font-family: var(--emw--font-family-secondary, \"Montserrat\", sans-serif);\n background: var(--emw--color-background, #000);\n min-height: 100vh;\n box-sizing: border-box;\n min-width: 375px;\n width: 100%;\n margin: 0 auto;\n position: relative;\n padding: 0;\n}\n\n.challenges-header {\n display: none;\n}\n\n.back-button {\n display: flex;\n align-items: center;\n padding: 14px 0 14px 10px;\n outline: none;\n background: var(--emw--color-background-secondary, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n background-clip: text;\n border: none;\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n cursor: pointer;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.back-button__icon {\n margin: 0 4px;\n}\n.back-button__text {\n margin-left: 4px;\n}\n\n.details {\n min-width: 308px;\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n padding: 16px;\n min-width: 375px;\n width: 100%;\n}\n.details.grayed {\n opacity: 0.5;\n}\n.details__general-info {\n min-width: 344px;\n padding-bottom: 16px;\n width: 100%;\n}\n.details__general-info-image-container {\n position: relative;\n margin-bottom: 22px;\n}\n.details__general-info-image {\n display: block;\n min-width: 344px;\n height: 226px;\n border-radius: var(--emw--border-radius-medium, 16px);\n width: 100%;\n}\n.details__general-info-image.grayed {\n opacity: 0.5;\n}\n.details__general-info-timer-badge {\n position: absolute;\n background: var(--emw--color-white, #fff);\n top: 6px;\n right: 6px;\n border-radius: var(--emw--border-radius-large, 30px);\n padding: 2px 12px;\n line-height: 22px;\n font-weight: var(--emw--font-weight-medium, 500);\n font-size: var(--emw--font-size-x-small, 12px);\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\n backdrop-filter: blur(20px);\n}\n.details__general-info-timer-badge span {\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-timer-badge.expired {\n background: var(--emw--background-gray-color, rgba(250, 250, 250, 0.5019607843));\n border: 1px solid var(--emw--border-gray-color, #292c29);\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-timer-badge.completed {\n background: var(--emw--background-success-color, #c9f0d7);\n border: 1px solid var(--emw--border-success-color, #00b74f);\n color: var(--emw--color-gray-300, #083b17);\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-timer-badge.forfeited {\n background: var(--emw--background-errored-color, #ffe1df);\n border: 1px solid var(--emw--border-errored-color, #d6421e);\n color: var(--emw--errored-color, #850606);\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-timer-badge.paused {\n background: var(--emw--background-warning-color, #f8e4ad);\n border: 1px solid var(--emw--border-warning-color, #ea9018);\n color: var(--emw--warning-color, #6d460a);\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-title {\n margin: 0 0 4px;\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-large, 20px);\n font-weight: var(--emw--font-weight-bold, 700);\n display: flex;\n justify-content: space-between;\n}\n.details__general-info-title__icon--casino {\n width: 24px;\n height: 24px;\n}\n.details__general-info-title__icon--sportsbook {\n width: 22px;\n height: 22px;\n}\n.details__general-info-end-date_label {\n color: var(--emw--color-gray-150, #727672);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n margin: 0;\n}\n.details__general-info-end-date_value {\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-action-button,\n.details .footer-action-button {\n width: 100%;\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-medium, 16px);\n border-radius: var(--emw--button-border-radius, 99px);\n border: 2px solid var(--emw--button-border-color, #083b17);\n background: var(--emw--button-background-color, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n text-align: center;\n text-transform: uppercase;\n font-weight: var(--emw--font-weight-bold, 700);\n height: 51px;\n padding: 16px 32px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-self: stretch;\n gap: 10px;\n}\n.details__general-info-action-button:hover,\n.details .footer-action-button:hover {\n border-color: var(--emw--color-secondary, #083b17);\n cursor: pointer;\n}\n.details__general-info-action-button.filled,\n.details .footer-action-button.filled {\n background-color: var(--emw--button-background-primary-color, #18ce51);\n color: var(--emw--color-white, #fff);\n border-color: var(--emw--color-gray-300, #083b17);\n}\n.details__general-info-action-button.filled:hover,\n.details .footer-action-button.filled:hover {\n border-color: transparent;\n box-shadow: 0 0 4px 0 rgba(188, 252, 177, 0.2), 0 0 20px 0 rgba(0, 183, 79, 0.5);\n}\n.details__general-info-action-button.grayed,\n.details .footer-action-button.grayed {\n color: var(--emw--color-gray-50, #e2e2e2);\n background: var(--emw--color-black-150, #000000);\n border-color: var(--emw--button-disabled-border-color, #727672);\n box-shadow: 0 0 20px 0 rgba(188, 252, 177, 0.2);\n}\n.details__general-info-action-button.grayed:hover,\n.details .footer-action-button.grayed:hover {\n color: var(--emw--color-white, #fff);\n}\n.details__general-info-action-button:disabled, .details__general-info-action-button:disabled:hover,\n.details .footer-action-button:disabled,\n.details .footer-action-button:disabled:hover {\n color: var(--emw--color-gray-50, #e2e2e2);\n cursor: not-allowed;\n border: 2px solid var(--emw--button-disabled-border-color, #727672);\n opacity: 0.7;\n}\n.details .footer-action-button {\n height: 44px;\n padding: 14px 20px;\n font-size: var(--emw--font-size-sm, 14px);\n}\n.details__general-info-action-button {\n display: none;\n margin-top: 32px;\n}\n.details__tabs-container {\n flex-grow: 1;\n max-width: 100%;\n}\n.details__tabs {\n position: relative;\n display: flex;\n justify-content: flex-start;\n border-bottom: 1px solid var(--emw--border-warning-color, #ea9018);\n}\n.details__tab {\n padding: 10px 20px;\n cursor: pointer;\n position: relative;\n font-weight: var(--emw--font-weight-medium, 500);\n color: var(--emw--color-gray-300, #555);\n display: flex;\n width: 33.3333333333%;\n padding: 12px 10px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n}\n.details__tab.active {\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n text-transform: uppercase;\n background: var(--emw--active-tab, linear-gradient(180deg, #ea9018 0%, #e0a84e 100%));\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.details__tab {\n color: var(--emw--color-gray-100, #727672);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n text-transform: uppercase;\n}\n.details__tab:nth-of-type(1).active ~ .active-tab-indicator {\n left: 0;\n width: 33.3333333333%;\n}\n.details__tab:nth-of-type(2).active ~ .active-tab-indicator {\n left: 33.3333333333%;\n width: 33.3333333333%;\n}\n.details__tab:nth-of-type(3).active ~ .active-tab-indicator {\n left: 66.6666666667%;\n width: 33.3333333333%;\n}\n.details .active-tab-indicator {\n position: absolute;\n bottom: -3px;\n height: 2px;\n background: var(--emw--active-tab-indicator, linear-gradient(180deg, rgba(234, 144, 24, 0.7) 0%, rgba(224, 168, 78, 0.7) 100%), #727672);\n transition: left 0.3s ease, width 0.3s ease;\n}\n.details .levels__tab {\n margin-top: 22px;\n display: flex;\n gap: 12px;\n flex-direction: column;\n overflow-y: auto;\n height: 300px;\n padding-bottom: 80px;\n}\n.details .level {\n display: flex;\n padding: 20px;\n flex-direction: column;\n align-items: flex-start;\n border-radius: var(--emw--border-radius-small, 12px);\n background-color: var(--emw--color-background, rgba(114, 118, 114, 0.2));\n}\n.details .level.grayed {\n background: rgba(114, 118, 114, 0.15);\n}\n.details .level.active {\n background: linear-gradient(90deg, rgba(30, 101, 79, 0.2) 0%, rgba(28, 141, 86, 0.2) 100%);\n border: 2px solid var(--Gradient-Blue, #003e5c);\n box-shadow: 0 0 20px 0 rgba(188, 252, 177, 0.2);\n}\n.details .level.completed {\n background: linear-gradient(90deg, rgba(0, 62, 92, 0.3) 0.05%, rgba(17, 59, 33, 0.3) 87.69%);\n}\n.details .level__status {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n}\n.details .level__title {\n width: 100%;\n display: flex;\n justify-content: space-between;\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n margin-bottom: 10px;\n}\n.details .level__title .completed, .details .level__title .in-progress {\n color: var(--emw--color-valid, #00b74f);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n text-align: right;\n line-height: 22px;\n}\n.details .level__title.grayed {\n color: var(--emw--disabled-color, #727672);\n}\n.details .level__progress {\n width: 100%;\n margin-bottom: 10px;\n}\n.details .level__icon {\n display: flex;\n margin: 5px 6px 5px 0;\n opacity: 1;\n}\n.details .level__icon img {\n display: block;\n width: 12px;\n height: 12px;\n}\n.details .level__icon img.grayed {\n opacity: 0.5;\n}\n.details .level__bonus, .details .level__target {\n display: flex;\n align-items: flex-start;\n color: var(--emw--color-gray-200, #c8d6ce);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n margin-bottom: 4px;\n}\n.details .level__value {\n color: var(--emw--color-gray-200, #c8d6ce);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n width: 100%;\n}\n.details .level__value.grayed {\n opacity: 0.5;\n}\n.details .games__tab {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n padding: 22px 0;\n overflow-y: auto;\n height: 300px;\n padding-bottom: 80px;\n justify-content: center;\n}\n.details .games__tab .game {\n position: relative;\n width: 105px;\n height: 85px;\n cursor: pointer;\n}\n.details .games__tab .game img {\n width: 100%;\n height: 100%;\n border-radius: var(--emw--border-radius-medium, 16px);\n}\n.details .games__tab .game .contribution {\n position: absolute;\n top: 4px;\n right: 4px;\n color: var(--emw--color-white, #fff);\n border-radius: var(--emw--border-radius-small, 12px);\n border: 1px solid var(--Gradient-Blue, #003e5c);\n background: rgba(0, 0, 0, 0.5);\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\n backdrop-filter: blur(5px);\n padding: 0 8px;\n font-size: var(--emw--font-size-2x-small, 8px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 22px;\n text-align: center;\n}\n.details .events__tab {\n display: flex;\n flex-direction: column;\n padding: 22px 0;\n gap: 24px;\n overflow-y: auto;\n height: 300px;\n padding-bottom: 80px;\n}\n.details .events__tab .event {\n color: var(--emw--color-gray-200, #c8d6ce);\n font-size: var(--emw--font-size-small, 14px);\n font-style: normal;\n font-weight: 500;\n line-height: 24px;\n margin: 0;\n}\n.details .events__tab .event span {\n text-transform: capitalize;\n}\n.details .rules__tab {\n display: flex;\n flex-direction: column;\n padding: 22px 0;\n gap: 22px;\n overflow-y: auto;\n height: 300px;\n padding-bottom: 80px;\n line-height: 24px;\n}\n.details .rules__tab .sportsbook-rules,\n.details .rules__tab .rule {\n color: var(--emw--color-gray-200, #c8d6ce);\n font-size: var(--emw--font-size-small, 14px);\n font-style: normal;\n font-weight: 500;\n line-height: 24px;\n}\n.details .rules__tab .sportsbook-rules .rule {\n margin: 0 0 22px;\n}\n.details .rules__tab .sportsbook-rules .rule__title {\n margin: 0;\n font-size: var(--emw--font-size-small, 14px);\n color: var(--emw--color-white, #fff);\n font-weight: 700;\n}\n.details .rules__tab .sportsbook-rules .rule__title__value {\n display: inline-flex;\n align-items: center;\n height: 16px;\n}\n.details .rules__tab .sportsbook-rules .rule__title__value .infinity {\n font-size: 20px;\n font-weight: 500;\n margin-left: 4px;\n}\n.details .rules__tab .sportsbook-rules .rule__inners {\n gap: 22px;\n display: flex;\n flex-direction: column;\n}\n.details .rules__tab .link {\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n background: var(--emw--button-background-color, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n background-clip: text;\n padding: 0;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.details .rules__tab .contributionType {\n margin: 0 0 22px;\n}\n.details .rules__tab .contributionRule {\n margin: 0;\n}\n.details .rules__tab .contribution__label {\n font-size: var(--emw--font-size-small, 14px);\n color: var(--emw--color-white, #fff);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n}\n.details .rules__tab .contribution__type__label {\n margin-right: 4px;\n}\n.details .rules__tab .contribution__value {\n font-size: var(--emw--font-size-small, 14px);\n color: var(--emw--color-gray-200, #c8d6ce);\n font-weight: var(--emw--font-weight-medium, 500);\n}\n.details .rules__tab .contribution__rule__value {\n margin-bottom: 8px;\n}\n.details__button {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n flex: 1 0 0;\n height: 42px;\n padding: 14px 20px;\n border-radius: var(--emw--button-border-radius, 99px);\n border: 2px solid var(--emw--button-border-color, #083b17);\n background-color: var(--emw--button-background-color, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n text-transform: uppercase;\n}\n\n.button__container {\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n width: calc(100% - 32px);\n padding: 16px 16px 22px 16px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n border-top: 1px solid var(--emw--color-blue, #003e5c);\n background: var(--emw--color-background, #000);\n box-shadow: 0 0 20px 0 rgba(188, 252, 177, 0.2);\n}\n\n.lds-dual-ring {\n display: block;\n width: 80px;\n height: 80px;\n margin: 80px auto 0 auto;\n}\n\n.lds-dual-ring:after {\n content: \" \";\n display: block;\n width: 64px;\n height: 64px;\n margin: 8px;\n border-radius: 50%;\n border: 6px solid var(--emw--casino-color-primary, var(--emw--color-primary, #22b04e));\n border-color: var(--emw--casino-color-primary, var(--emw--color-primary, #22b04e)) transparent var(--emw--casino-color-primary, var(--emw--color-primary, #22b04e));\n animation: lds-dual-ring 1.2s linear infinite;\n}\n\n@keyframes lds-dual-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.notification {\n display: flex;\n align-items: flex-start;\n border-radius: var(--emw--border-radius-small, 12px);\n background: rgba(188, 252, 177, 0.1);\n display: flex;\n padding: 16px;\n align-items: flex-start;\n gap: 10px;\n margin: 16px 16px 22px 16px;\n}\n.notification__icon {\n margin-top: 2px;\n}\n.notification__message, .notification__title {\n color: var(--emw--color-gray-50, #e2e2e2);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n}\n.notification__title {\n background: var(--emw--color-background-secondary, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.notification__column {\n display: flex;\n flex-direction: column;\n}\n\n@container challenges-details (min-width: 768px) {\n .container {\n padding: 16px 12px;\n }\n .button__container {\n display: none;\n }\n .details {\n gap: 36px;\n flex-wrap: nowrap;\n }\n .details__general-info-action-button {\n display: flex;\n }\n .details__general-info-image {\n width: 380px;\n height: 248px;\n object-fit: cover;\n }\n .details__general-info {\n min-width: 380px;\n max-width: 380px;\n }\n .details__tabs__container {\n max-width: calc(100% - 380px);\n }\n .details .levels__tab {\n gap: 20px;\n height: 60vh;\n }\n .details .levels__tab .level__icon {\n width: 14px;\n height: 14px;\n margin: 4px 6px 4px 0px;\n }\n .details .levels__tab .level__icon img {\n width: 100%;\n height: 100%;\n }\n .details .levels__tab .level__title {\n font-size: var(--emw--font-size-medium, 16px);\n }\n .details .levels__tab .level__title .completed, .details .levels__tab .level__title .in-progress {\n font-size: var(--emw--font-size-sm, 14px);\n }\n .details .levels__tab .level__bonus, .details .levels__tab .level__target, .details .levels__tab .level__value {\n font-size: var(--emw--font-size-sm, 14px);\n }\n .details .games__tab, .details .events__tab, .details .rules__tab {\n height: 60vh;\n padding: 32px 0;\n }\n .details .games__tab {\n gap: 20px;\n min-width: 340px;\n justify-content: normal;\n }\n .details .games__tab .game {\n width: 160px;\n height: 110px;\n }\n .details .games__tab .game .contribution {\n top: 8px;\n right: 8px;\n padding: 4px 10px;\n font-size: var(--emw--font-size-2x-small, 10px);\n line-height: 18px;\n }\n .challenges-header {\n margin: 0 0 32px;\n display: flex;\n justify-content: space-between;\n }\n .challenges-title {\n margin: 0;\n display: flex;\n gap: 10px;\n align-items: center;\n font-size: var(--emw--font-size-x-large, 24px);\n font-weight: var(--emw--font-weight-bold, 700);\n color: var(--emw--color-white, #ffffff);\n }\n .challenges-tabs {\n display: flex;\n gap: 12px;\n border-radius: 48px;\n padding: 6px;\n color: var(--emw--color-gray-200, #c8d6ce);\n background-color: var(--emw--color-background-secondary, #272727);\n }\n .challenges-tab {\n padding: 10px 16px;\n border-radius: 40px;\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n cursor: pointer;\n text-align: center;\n width: 95px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 4px;\n }\n .challenges-tab.active {\n color: var(--emw--color-white, #ffffff);\n background: linear-gradient(90deg, rgb(0, 62, 92) 0%, rgb(17, 59, 33) 100%);\n }\n .challenges-tab:last-child {\n width: inherit;\n padding: 10px 16px;\n }\n}";
3609
+ const casinoChallengeDetailsCss = ".container-wrapper {\n container-type: inline-size;\n container-name: challenges-details;\n}\n\n.container {\n font-family: var(--emw--font-family-secondary, \"Montserrat\", sans-serif);\n background: var(--emw--color-background, #000);\n min-height: 100vh;\n box-sizing: border-box;\n min-width: 375px;\n width: 100%;\n margin: 0 auto;\n position: relative;\n padding: 0;\n}\n\n.challenges-header {\n display: none;\n}\n\n.back-button {\n display: flex;\n align-items: center;\n padding: 14px 0 14px 10px;\n outline: none;\n background: var(--emw--color-background-secondary, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n background-clip: text;\n border: none;\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n cursor: pointer;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.back-button__icon {\n margin: 0 4px;\n}\n.back-button__text {\n margin-left: 4px;\n}\n\n.details {\n min-width: 308px;\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n padding: 16px;\n min-width: 375px;\n width: 100%;\n}\n.details.grayed {\n opacity: 0.5;\n}\n.details__general-info {\n min-width: 344px;\n padding-bottom: 16px;\n width: 100%;\n}\n.details__general-info-image-container {\n position: relative;\n margin-bottom: 22px;\n}\n.details__general-info-image {\n display: block;\n min-width: 344px;\n height: 226px;\n border-radius: var(--emw--border-radius-medium, 16px);\n width: 100%;\n}\n.details__general-info-image.grayed {\n opacity: 0.5;\n}\n.details__general-info-timer-badge {\n position: absolute;\n background: var(--emw--color-white, #fff);\n top: 6px;\n right: 6px;\n border-radius: var(--emw--border-radius-large, 30px);\n padding: 2px 12px;\n line-height: 22px;\n font-weight: var(--emw--font-weight-medium, 500);\n font-size: var(--emw--font-size-x-small, 12px);\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\n backdrop-filter: blur(20px);\n}\n.details__general-info-timer-badge span {\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-timer-badge.expired {\n background: var(--emw--background-gray-color, rgba(250, 250, 250, 0.5019607843));\n border: 1px solid var(--emw--border-gray-color, #292c29);\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-timer-badge.completed {\n background: var(--emw--background-success-color, #c9f0d7);\n border: 1px solid var(--emw--border-success-color, #00b74f);\n color: var(--emw--color-gray-300, #083b17);\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-timer-badge.forfeited {\n background: var(--emw--background-errored-color, #ffe1df);\n border: 1px solid var(--emw--border-errored-color, #d6421e);\n color: var(--emw--errored-color, #850606);\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-timer-badge.paused {\n background: var(--emw--background-warning-color, #f8e4ad);\n border: 1px solid var(--emw--border-warning-color, #ea9018);\n color: var(--emw--warning-color, #6d460a);\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-title {\n margin: 0 0 4px;\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-large, 20px);\n font-weight: var(--emw--font-weight-bold, 700);\n display: flex;\n justify-content: space-between;\n}\n.details__general-info-title__icon--casino {\n width: 24px;\n height: 24px;\n}\n.details__general-info-title__icon--sportsbook {\n width: 22px;\n height: 22px;\n}\n.details__general-info-end-date_label {\n color: var(--emw--color-gray-150, #727672);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n margin: 0;\n}\n.details__general-info-end-date_value {\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-action-button,\n.details .footer-action-button {\n width: 100%;\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-medium, 16px);\n border-radius: var(--emw--button-border-radius, 99px);\n border: 2px solid var(--emw--button-border-color, #083b17);\n background: var(--emw--button-background-color, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n text-align: center;\n text-transform: uppercase;\n font-weight: var(--emw--font-weight-bold, 700);\n height: 51px;\n padding: 16px 32px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-self: stretch;\n gap: 10px;\n}\n.details__general-info-action-button:hover,\n.details .footer-action-button:hover {\n border-color: var(--emw--color-secondary, #083b17);\n cursor: pointer;\n}\n.details__general-info-action-button.filled,\n.details .footer-action-button.filled {\n background-color: var(--emw--button-background-primary-color, #18ce51);\n color: var(--emw--color-white, #fff);\n border-color: var(--emw--color-gray-300, #083b17);\n}\n.details__general-info-action-button.filled:hover,\n.details .footer-action-button.filled:hover {\n border-color: transparent;\n box-shadow: 0 0 4px 0 rgba(188, 252, 177, 0.2), 0 0 20px 0 rgba(0, 183, 79, 0.5);\n}\n.details__general-info-action-button.grayed,\n.details .footer-action-button.grayed {\n color: var(--emw--color-gray-50, #e2e2e2);\n background: var(--emw--color-black-150, #000000);\n border-color: var(--emw--button-disabled-border-color, #727672);\n box-shadow: 0 0 20px 0 rgba(188, 252, 177, 0.2);\n}\n.details__general-info-action-button.grayed:hover,\n.details .footer-action-button.grayed:hover {\n color: var(--emw--color-white, #fff);\n}\n.details__general-info-action-button:disabled, .details__general-info-action-button:disabled:hover,\n.details .footer-action-button:disabled,\n.details .footer-action-button:disabled:hover {\n color: var(--emw--color-gray-50, #e2e2e2);\n cursor: not-allowed;\n border: 2px solid var(--emw--button-disabled-border-color, #727672);\n opacity: 0.7;\n}\n.details .footer-action-button {\n height: 44px;\n padding: 14px 20px;\n font-size: var(--emw--font-size-sm, 14px);\n}\n.details__general-info-action-button {\n display: none;\n margin-top: 32px;\n}\n.details__tabs-container {\n flex-grow: 1;\n max-width: 100%;\n}\n.details__tabs {\n position: relative;\n display: flex;\n justify-content: flex-start;\n border-bottom: 1px solid var(--emw--border-warning-color, #ea9018);\n}\n.details__tab {\n padding: 10px 20px;\n cursor: pointer;\n position: relative;\n font-weight: var(--emw--font-weight-medium, 500);\n color: var(--emw--color-gray-300, #555);\n display: flex;\n width: 33.3333333333%;\n padding: 12px 10px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n}\n.details__tab.active {\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n text-transform: uppercase;\n background: var(--emw--active-tab, linear-gradient(180deg, #ea9018 0%, #e0a84e 100%));\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.details__tab {\n color: var(--emw--color-gray-100, #727672);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n text-transform: uppercase;\n}\n.details__tab:nth-of-type(1).active ~ .active-tab-indicator {\n left: 0;\n width: 33.3333333333%;\n}\n.details__tab:nth-of-type(2).active ~ .active-tab-indicator {\n left: 33.3333333333%;\n width: 33.3333333333%;\n}\n.details__tab:nth-of-type(3).active ~ .active-tab-indicator {\n left: 66.6666666667%;\n width: 33.3333333333%;\n}\n.details .active-tab-indicator {\n position: absolute;\n bottom: -3px;\n height: 2px;\n background: var(--emw--active-tab-indicator, linear-gradient(180deg, rgba(234, 144, 24, 0.7) 0%, rgba(224, 168, 78, 0.7) 100%), #727672);\n transition: left 0.3s ease, width 0.3s ease;\n}\n.details .levels__tab {\n margin-top: 22px;\n display: flex;\n gap: 12px;\n flex-direction: column;\n overflow-y: auto;\n height: 300px;\n padding-bottom: 80px;\n}\n.details .level {\n display: flex;\n padding: 20px;\n flex-direction: column;\n align-items: flex-start;\n border-radius: var(--emw--border-radius-small, 12px);\n background-color: var(--emw--color-background, rgba(114, 118, 114, 0.2));\n}\n.details .level.grayed {\n background: rgba(114, 118, 114, 0.15);\n}\n.details .level.active {\n background: linear-gradient(90deg, rgba(30, 101, 79, 0.2) 0%, rgba(28, 141, 86, 0.2) 100%);\n border: 2px solid var(--Gradient-Blue, #003e5c);\n box-shadow: 0 0 20px 0 rgba(188, 252, 177, 0.2);\n}\n.details .level.completed {\n background: linear-gradient(90deg, rgba(0, 62, 92, 0.3) 0.05%, rgba(17, 59, 33, 0.3) 87.69%);\n}\n.details .level__status {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n}\n.details .level__title {\n width: 100%;\n display: flex;\n justify-content: space-between;\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n margin-bottom: 10px;\n}\n.details .level__title .completed, .details .level__title .in-progress {\n color: var(--emw--color-valid, #00b74f);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n text-align: right;\n line-height: 22px;\n}\n.details .level__title.grayed {\n color: var(--emw--disabled-color, #727672);\n}\n.details .level__progress {\n width: 100%;\n margin-bottom: 10px;\n}\n.details .level__icon {\n display: flex;\n margin: 5px 6px 5px 0;\n opacity: 1;\n}\n.details .level__icon img {\n display: block;\n width: 12px;\n height: 12px;\n}\n.details .level__icon img.grayed {\n opacity: 0.5;\n}\n.details .level__bonus, .details .level__target {\n display: flex;\n align-items: flex-start;\n color: var(--emw--color-gray-200, #c8d6ce);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n margin-bottom: 4px;\n}\n.details .level__value {\n color: var(--emw--color-gray-200, #c8d6ce);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n width: 100%;\n}\n.details .level__value.grayed {\n opacity: 0.5;\n}\n.details .games__tab {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n padding: 22px 0;\n overflow-y: auto;\n height: 300px;\n padding-bottom: 80px;\n justify-content: center;\n}\n.details .games__tab .game {\n position: relative;\n width: 105px;\n height: 85px;\n cursor: pointer;\n}\n.details .games__tab .game img {\n width: 100%;\n height: 100%;\n border-radius: var(--emw--border-radius-medium, 16px);\n}\n.details .games__tab .game .contribution {\n position: absolute;\n top: 4px;\n right: 4px;\n color: var(--emw--color-white, #fff);\n border-radius: var(--emw--border-radius-small, 12px);\n border: 1px solid var(--Gradient-Blue, #003e5c);\n background: rgba(0, 0, 0, 0.5);\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\n backdrop-filter: blur(5px);\n padding: 0 8px;\n font-size: var(--emw--font-size-2x-small, 8px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 22px;\n text-align: center;\n}\n.details .events__tab {\n display: flex;\n flex-direction: column;\n padding: 22px 0;\n gap: 24px;\n overflow-y: auto;\n height: 300px;\n padding-bottom: 80px;\n}\n.details .events__tab .event {\n color: var(--emw--color-gray-200, #c8d6ce);\n font-size: var(--emw--font-size-small, 14px);\n font-style: normal;\n font-weight: 500;\n line-height: 24px;\n margin: 0;\n}\n.details .events__tab .event span {\n text-transform: capitalize;\n}\n.details .rules__tab {\n display: flex;\n flex-direction: column;\n padding: 22px 0;\n gap: 22px;\n overflow-y: auto;\n height: 300px;\n padding-bottom: 80px;\n line-height: 24px;\n}\n.details .rules__tab .sportsbook-rules,\n.details .rules__tab .rule {\n color: var(--emw--color-gray-200, #c8d6ce);\n font-size: var(--emw--font-size-small, 14px);\n font-style: normal;\n font-weight: 500;\n line-height: 24px;\n}\n.details .rules__tab .sportsbook-rules .rule {\n margin: 0 0 22px;\n}\n.details .rules__tab .sportsbook-rules .rule__title {\n margin: 0;\n font-size: var(--emw--font-size-small, 14px);\n color: var(--emw--color-white, #fff);\n font-weight: 700;\n}\n.details .rules__tab .sportsbook-rules .rule__title__value {\n display: inline-flex;\n align-items: center;\n height: 16px;\n}\n.details .rules__tab .sportsbook-rules .rule__title__value .infinity {\n font-size: 20px;\n font-weight: 500;\n margin-left: 4px;\n}\n.details .rules__tab .sportsbook-rules .rule__inners {\n gap: 22px;\n display: flex;\n flex-direction: column;\n}\n.details .rules__tab .link {\n display: inline-flex;\n align-items: center;\n margin: 14px 0;\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 14px;\n background: var(--emw--button-background-color, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n background-clip: text;\n padding: 0;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n text-transform: uppercase;\n}\n.details .rules__tab .link .icon {\n transform: rotate(180deg);\n margin-left: 8px;\n width: 8px;\n height: 8px;\n}\n.details .rules__tab .contributionType {\n margin: 0 0 22px;\n}\n.details .rules__tab .contributionRule {\n margin: 0;\n}\n.details .rules__tab .contribution__label {\n font-size: var(--emw--font-size-small, 14px);\n color: var(--emw--color-white, #fff);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n}\n.details .rules__tab .contribution__type__label {\n margin-right: 4px;\n}\n.details .rules__tab .contribution__value {\n font-size: var(--emw--font-size-small, 14px);\n color: var(--emw--color-gray-200, #c8d6ce);\n font-weight: var(--emw--font-weight-medium, 500);\n}\n.details .rules__tab .contribution__rule__value {\n margin-bottom: 8px;\n}\n.details__button {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n flex: 1 0 0;\n height: 42px;\n padding: 14px 20px;\n border-radius: var(--emw--button-border-radius, 99px);\n border: 2px solid var(--emw--button-border-color, #083b17);\n background-color: var(--emw--button-background-color, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n text-transform: uppercase;\n}\n\n.button__container {\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n width: calc(100% - 32px);\n padding: 16px 16px 22px 16px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n border-top: 1px solid var(--emw--color-blue, #003e5c);\n background: var(--emw--color-background, #000);\n box-shadow: 0 0 20px 0 rgba(188, 252, 177, 0.2);\n}\n\n.lds-dual-ring {\n display: block;\n width: 80px;\n height: 80px;\n margin: 80px auto 0 auto;\n}\n\n.lds-dual-ring:after {\n content: \" \";\n display: block;\n width: 64px;\n height: 64px;\n margin: 8px;\n border-radius: 50%;\n border: 6px solid var(--emw--casino-color-primary, var(--emw--color-primary, #22b04e));\n border-color: var(--emw--casino-color-primary, var(--emw--color-primary, #22b04e)) transparent var(--emw--casino-color-primary, var(--emw--color-primary, #22b04e));\n animation: lds-dual-ring 1.2s linear infinite;\n}\n\n@keyframes lds-dual-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.notification {\n display: flex;\n align-items: flex-start;\n border-radius: var(--emw--border-radius-small, 12px);\n background: rgba(188, 252, 177, 0.1);\n display: flex;\n padding: 16px;\n align-items: flex-start;\n gap: 10px;\n margin: 16px 16px 22px 16px;\n}\n.notification__icon {\n margin-top: 2px;\n}\n.notification__message, .notification__title {\n color: var(--emw--color-gray-50, #e2e2e2);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n}\n.notification__title {\n background: var(--emw--color-background-secondary, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.notification__column {\n display: flex;\n flex-direction: column;\n}\n\n@container challenges-details (min-width: 768px) {\n .container {\n padding: 16px 12px;\n }\n .button__container {\n display: none;\n }\n .details {\n gap: 36px;\n flex-wrap: nowrap;\n }\n .details__general-info-action-button {\n display: flex;\n }\n .details__general-info-image {\n width: 380px;\n height: 248px;\n object-fit: cover;\n }\n .details__general-info {\n min-width: 380px;\n max-width: 380px;\n }\n .details__tabs__container {\n max-width: calc(100% - 380px);\n }\n .details .levels__tab {\n gap: 20px;\n height: 60vh;\n }\n .details .levels__tab .level__icon {\n width: 14px;\n height: 14px;\n margin: 4px 6px 4px 0px;\n }\n .details .levels__tab .level__icon img {\n width: 100%;\n height: 100%;\n }\n .details .levels__tab .level__title {\n font-size: var(--emw--font-size-medium, 16px);\n }\n .details .levels__tab .level__title .completed, .details .levels__tab .level__title .in-progress {\n font-size: var(--emw--font-size-sm, 14px);\n }\n .details .levels__tab .level__bonus, .details .levels__tab .level__target, .details .levels__tab .level__value {\n font-size: var(--emw--font-size-sm, 14px);\n }\n .details .games__tab, .details .events__tab, .details .rules__tab {\n height: 60vh;\n padding: 32px 0;\n }\n .details .games__tab {\n gap: 20px;\n min-width: 340px;\n justify-content: normal;\n }\n .details .games__tab .game {\n width: 160px;\n height: 110px;\n }\n .details .games__tab .game .contribution {\n top: 8px;\n right: 8px;\n padding: 4px 10px;\n font-size: var(--emw--font-size-2x-small, 10px);\n line-height: 18px;\n }\n .challenges-header {\n margin: 0 0 32px;\n display: flex;\n justify-content: space-between;\n }\n .challenges-title {\n margin: 0;\n display: flex;\n gap: 10px;\n align-items: center;\n font-size: var(--emw--font-size-x-large, 24px);\n font-weight: var(--emw--font-weight-bold, 700);\n color: var(--emw--color-white, #ffffff);\n }\n .challenges-tabs {\n display: flex;\n gap: 12px;\n border-radius: 48px;\n padding: 6px;\n color: var(--emw--color-gray-200, #c8d6ce);\n background-color: var(--emw--color-background-secondary, #272727);\n }\n .challenges-tab {\n padding: 10px 16px;\n border-radius: 40px;\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n cursor: pointer;\n text-align: center;\n width: 95px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 4px;\n }\n .challenges-tab.active {\n color: var(--emw--color-white, #ffffff);\n background: linear-gradient(90deg, rgb(0, 62, 92) 0%, rgb(17, 59, 33) 100%);\n }\n .challenges-tab:last-child {\n width: inherit;\n padding: 10px 16px;\n }\n}";
3609
3610
  const CasinoChallengeDetailsStyle0 = casinoChallengeDetailsCss;
3610
3611
 
3611
3612
  const CasinoChallengeDetails = class {
@@ -4080,11 +4081,11 @@ const CasinoChallengeDetails = class {
4080
4081
  return (h("div", { class: "sportsbook-rules" }, h("p", { class: "rule" }, h("h3", { class: "rule__title" }, translate('fundsUsed', this.language)), h("span", null, contributionType)), h("p", { class: "rule" }, h("h3", { class: "rule__title" }, translate('eligibleMatchTypes', this.language)), h("span", null, matchType)), h("p", { class: "rule" }, h("h3", { class: "rule__title" }, translate('eligibleBetTypes', this.language)), h("div", { class: "rule__inners" }, BetTypes.includes(EBetType.Single) && this.renderSingleBetType(), BetTypes.includes(EBetType.Multiple) && this.renderMultipleBetType(), BetTypes.includes(EBetType.System) && this.renderSystemBetType()))));
4081
4082
  };
4082
4083
  this.rulesTab = () => {
4083
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
4084
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
4084
4085
  const contributionType = this.getContributionType((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ContributedBy);
4085
4086
  const contributionRule = this.getContributionRule((_b = this.challenge) === null || _b === void 0 ? void 0 : _b.IsContributeToOne);
4086
4087
  const isSportsbook = ((_c = this.challenge) === null || _c === void 0 ? void 0 : _c.ContributedFrom) === EContributedFrom.Sportsbook;
4087
- return (h("div", { class: "rules__tab" }, ((_e = (_d = this.challenge) === null || _d === void 0 ? void 0 : _d.ChallengePresentation) === null || _e === void 0 ? void 0 : _e.Description) && (h("div", { class: "rule" }, (_g = (_f = this.challenge) === null || _f === void 0 ? void 0 : _f.ChallengePresentation) === null || _g === void 0 ? void 0 : _g.Description)), !isSportsbook && (h("div", null, contributionType && (h("div", { class: "contributionType" }, h("span", { class: "contribution__label contribution__type__label" }, '\u{1F4B0}', " ", translate('contributionType', this.language), ":"), h("span", { class: "contribution__value" }, contributionType))), contributionRule && (h("div", { class: "contributionRule" }, h("span", { class: "contribution__label" }, '\u{1F4C4}', " ", translate('contributionRule', this.language), ":"))), contributionRule && h("span", { class: "contribution__value contribution__rule__value" }, contributionRule))), ((_j = (_h = this.challenge) === null || _h === void 0 ? void 0 : _h.ChallengePresentation) === null || _j === void 0 ? void 0 : _j.Url) && (h("a", { class: "link", href: (_l = (_k = this.challenge) === null || _k === void 0 ? void 0 : _k.ChallengePresentation) === null || _l === void 0 ? void 0 : _l.Url, target: "_blank" }, translate('terms', this.language))), isSportsbook && this.renderSportsbookRules()));
4088
+ return (h("div", { class: "rules__tab" }, ((_e = (_d = this.challenge) === null || _d === void 0 ? void 0 : _d.ChallengePresentation) === null || _e === void 0 ? void 0 : _e.Description) && (h("div", { class: "rule" }, (_g = (_f = this.challenge) === null || _f === void 0 ? void 0 : _f.ChallengePresentation) === null || _g === void 0 ? void 0 : _g.Description)), !isSportsbook && (h("div", null, contributionType && (h("div", { class: "contributionType" }, h("span", { class: "contribution__label contribution__type__label" }, '\u{1F4B0}', " ", translate('contributionType', this.language), ":"), h("span", { class: "contribution__value" }, contributionType))), contributionRule && (h("div", { class: "contributionRule" }, h("span", { class: "contribution__label" }, '\u{1F4C4}', " ", translate('contributionRule', this.language), ":"))), contributionRule && h("span", { class: "contribution__value contribution__rule__value" }, contributionRule))), (((_j = (_h = this.challenge) === null || _h === void 0 ? void 0 : _h.ChallengePresentation) === null || _j === void 0 ? void 0 : _j.RulesDescription) || ((_l = (_k = this.challenge) === null || _k === void 0 ? void 0 : _k.ChallengePresentation) === null || _l === void 0 ? void 0 : _l.Url)) && (h("div", null, h("div", { class: "contributionRule" }, h("span", { class: "contribution__label" }, translate('terms', this.language))), ((_o = (_m = this.challenge) === null || _m === void 0 ? void 0 : _m.ChallengePresentation) === null || _o === void 0 ? void 0 : _o.RulesDescription) && (h("span", { class: "contribution__value contribution__rule__value" }, (_q = (_p = this.challenge) === null || _p === void 0 ? void 0 : _p.ChallengePresentation) === null || _q === void 0 ? void 0 : _q.RulesDescription)), ((_s = (_r = this.challenge) === null || _r === void 0 ? void 0 : _r.ChallengePresentation) === null || _s === void 0 ? void 0 : _s.RulesDescription) && ((_u = (_t = this.challenge) === null || _t === void 0 ? void 0 : _t.ChallengePresentation) === null || _u === void 0 ? void 0 : _u.Url) && (h("br", null)), ((_w = (_v = this.challenge) === null || _v === void 0 ? void 0 : _v.ChallengePresentation) === null || _w === void 0 ? void 0 : _w.Url) && (h("a", { class: "link", href: (_y = (_x = this.challenge) === null || _x === void 0 ? void 0 : _x.ChallengePresentation) === null || _y === void 0 ? void 0 : _y.Url, target: "_blank" }, translate('readFullTerms', this.language), h("img", { class: "icon", src: backArrowSvg }))))), isSportsbook && this.renderSportsbookRules()));
4088
4089
  };
4089
4090
  this.footer = () => {
4090
4091
  var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -4358,7 +4359,7 @@ const CasinoChallengeDetails = class {
4358
4359
  }
4359
4360
  }
4360
4361
  render() {
4361
- return (h("div", { key: '3bc15f9e862c15c4922d1e09bcadc33b68d60750', ref: (el) => (this.stylingContainer = el), class: "container-wrapper" }, h("div", { key: '8f8337f476a8cf3deab3a71f260a9346dc1c99a9', class: "container" }, this.pageHeader(), this.loading ? (h("div", { class: "lds-dual-ring" })) : (h("div", null, h("button", { class: "back-button", onClick: this.goBack }, h("img", { class: "back-button__icon", src: backArrowSvg }), this.getBackButtonText()), this.forfeitedNofitication(), this.completedNotification(), this.expiredNotification(), h("div", { class: "details" }, this.cardGeneralInfo(), h("div", { class: "details__tabs-container" }, this.challengeTabs(), this.challengeTabContent()), this.footer()))))));
4362
+ return (h("div", { key: '97ccfa3ef3dab91ddc91a18efd3fb0aebbcaee64', ref: (el) => (this.stylingContainer = el), class: "container-wrapper" }, h("div", { key: 'b49a51d3dce7318584f313a8a3f787b2688d89af', class: "container" }, this.pageHeader(), this.loading ? (h("div", { class: "lds-dual-ring" })) : (h("div", null, h("button", { class: "back-button", onClick: this.goBack }, h("img", { class: "back-button__icon", src: backArrowSvg }), this.getBackButtonText()), this.forfeitedNofitication(), this.completedNotification(), this.expiredNotification(), h("div", { class: "details" }, this.cardGeneralInfo(), h("div", { class: "details__tabs-container" }, this.challengeTabs(), this.challengeTabContent()), this.footer()))))));
4362
4363
  }
4363
4364
  static get watchers() { return {
4364
4365
  "clientStyling": ["handleClientStylingChange"],
package/dist/esm/casino-challenge-details_4.entry.js CHANGED
@@ -1,5 +1,5 @@
1
- import { E as EChallengeProgressLevelStatus, a as EChallengeStatus, b as EChallengeProgressStatus, t as translate } from './casino-challenge-details-1496580b.js';
2
- export { C as casino_challenge_details } from './casino-challenge-details-1496580b.js';
1
+ import { E as EChallengeProgressLevelStatus, a as EChallengeStatus, b as EChallengeProgressStatus, t as translate } from './casino-challenge-details-1ecbe310.js';
2
+ export { C as casino_challenge_details } from './casino-challenge-details-1ecbe310.js';
3
3
  import { r as registerInstance, h, g as getElement, H as Host } from './index-30adf0cb.js';
4
4
 
5
5
  const activeChevronSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMC40MTA4MjYgMC45MTEwN0MwLjczNjI2MyAwLjU4NTYzMyAxLjI2MzkgMC41ODU2MzMgMS41ODkzNCAwLjkxMTA3TDYuMDAwMDggNS4zMjE4MUwxMC40MTA4IDAuOTExMDdDMTAuNzM2MyAwLjU4NTYzMyAxMS4yNjM5IDAuNTg1NjMzIDExLjU4OTMgMC45MTEwN0MxMS45MTQ4IDEuMjM2NTEgMTEuOTE0OCAxLjc2NDE0IDExLjU4OTMgMi4wODk1OEw2LjU4OTM0IDcuMDg5NThDNi4yNjM5IDcuNDE1MDIgNS43MzYyNiA3LjQxNTAyIDUuNDEwODMgNy4wODk1OEwwLjQxMDgyNiAyLjA4OTU4QzAuMDg1Mzg4OCAxLjc2NDE0IDAuMDg1Mzg4OCAxLjIzNjUxIDAuNDEwODI2IDAuOTExMDdaIiBmaWxsPSIjMDBCNzRGIi8+Cjwvc3ZnPgo=';
package/dist/esm/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export { C as CasinoChallengeDetails } from './casino-challenge-details-1496580b.js';
1
+ export { C as CasinoChallengeDetails } from './casino-challenge-details-1ecbe310.js';
2
2
  import './index-30adf0cb.js';
package/dist/types/utils/types.d.ts CHANGED
@@ -76,6 +76,7 @@ export interface IChallengePresentation {
76
76
  PresentationName: string;
77
77
  Description: string;
78
78
  Url: string;
79
+ RulesDescription?: string;
79
80
  }
80
81
  export interface ITriggerPeriods {
81
82
  DayOfWeek: number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/casino-challenge-details",
3
- "version": "0.10.36",
3
+ "version": "0.10.38",
4
4
  "main": "./dist/index.cjs.js",
5
5
  "module": "./dist/index.js",
6
6
  "es2015": "./dist/esm/index.mjs",