/* color variables */
.cashback-ratio-holder.pink {
  --gradient-1: #b2016b;
  --gradient-2: #c30174;
  --gradient-3: #ff1fa5;
  --gradient-4: #ff78c9;
  --gradient-5: #df0185;
  --brand-dark: #82004e;
  --brand-text: #ff42b3;
  --button-text-color: #fff;
  --logo-url: url("/Images/cashback/ftn-meter-logo.png");
  --coins-img-url: url("/Images/cashback/coins-pink.png");
  --progress-animation-gif-url: url("/Images/cashback/pregress-animation-pink.gif");
}

.cashback-ratio-holder.yellow {
  --gradient-1: #ff8900;
  --gradient-2: #fdad0b;
  --gradient-3: #f9dc19;
  --gradient-4: #fff0b1;
  --gradient-5: #ffc72e;
  --brand-dark: #fdad0b;
  --brand-text: #ffd943;
  --button-text-color: #6f4000;
  --logo-url: url("/Images/cashback/pascal-logo.png");
  --coins-img-url: url("/Images/cashback/coins-yellow.png");
  --progress-animation-gif-url: url("/Images/cashback/pregress-animation-yellow.gif");
}

.cashback-ratio-holder {
  display: none;
  position: fixed;
  z-index: 900;
  pointer-events: none;
  user-select: none;
}

.cashback-ratio-holder.open {
  background: rgba(0, 0, 0, 0.7);
  display: block;
  pointer-events: auto;
}

[class='is-web'] .cashback-ratio-holder {
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  font-size: 1.098vmin;
}

[class='is-mobile'] .cashback-ratio-holder {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 1.852vmin;
}

.aspect-img {
  pointer-events: none;
  user-select: none;
}

[class='is-web'] .aspect-img {
  display: block;
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
}

[class='is-mobile'] .aspect-img {
  display: none;
}

.ftn-meter-wrapper {
  position: absolute;
  z-index: 11;
  pointer-events: auto;
}

.ftn-meter-wrapper * {
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

[class*='is-web'] .ftn-meter-wrapper {
  top: 30%;
  right: 4.5%;
  height: 5.4em;
}

@media screen and (max-width: 1180px) {
  [class*='is-web'] .ftn-meter-wrapper {
    right: 4%;
  }
}

[class*='is-mobile'] .ftn-meter-wrapper {
  top: 16em;
  left: 20px;
  height: 4.8em;
}

.ftn-meter-items-container {
  z-index: 1;
  pointer-events: none;
}

[class*='is-web'] .ftn-meter-items-container {
  max-width: 3.8em;
}

[class*='is-mobile'] .ftn-meter-items-container {
  max-width: 3.6em;
}

.ftn-meter-inner-container {
  direction: ltr;
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 2rem;
  cursor: pointer;
}

[class*='is-web'] .ftn-meter-inner-container {
  padding: 0.8em;
  right: 0;
}

[class*='is-web'] .ftn-meter-inner-container:hover .ftn-meter-content-bg {
  box-shadow: inset 0.3em -0.3em 0.3em 0 rgba(0, 0, 0, 0.35), 0 0 1em 0 var(--gradient-3);
}

[class*='is-mobile'] .ftn-meter-inner-container {
  padding: 0.6em;
  left: 0;
}

.ftn-meter-bg-img {
  flex: 0 0 auto;
  min-width: 0;
  background-image: var(--logo-url);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 50%;
}

[class='is-web'] .ftn-meter-bg-img {
  width: 4em;
  height: 3.8em;
}

[class='is-mobile'] .ftn-meter-bg-img {
  width: 3.6em;
  height: 3.6em;
}

@keyframes amount-anim {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.ftn-meter-content-bg {
  position: absolute;
  inset: 0;
  border: 0.1em solid rgba(255, 255, 255, 0.25);
  background-image: linear-gradient(180deg, rgba(255, 252, 254, 0.12) 0%, rgba(153, 151, 152, 0.06) 100%);
  box-shadow: inset 0.3em -0.3em 0.3em 0 rgba(0, 0, 0, 0.35), 0 0 1em 0 var(--brand-dark);
  transition: box-shadow 120ms;
}

.ftn-meter-content-bg.shine {
  animation: shine 720ms infinite;
}

@keyframes shine {
  0% {
    box-shadow: inset 0 0 0 0 transparent;
  }

  50% {
    box-shadow: inset 0.3em -0.3em 0.3em 0 rgba(0, 0, 0, 0.35), 0 0 1em 0 var(--gradient-3);
  }

  100% {
    box-shadow: inset 0 0 0 0 transparent;
  }
}

[class='is-web'] .ftn-meter-content-bg {
  border-radius: 2.2em;
}

[class='is-mobile'] .ftn-meter-content-bg {
  border-radius: 2em;
}

.ftn-min-state-loading-bg {
  position: absolute;
  inset: 0.1em;
  overflow: hidden;
  pointer-events: none;
}

[class='is-web'] .ftn-min-state-loading-bg {
  border-radius: 2.2em;
}

[class='is-mobile'] .ftn-min-state-loading-bg {
  border-radius: 2em;
}

.ftn-min-state-loading-bg:after,
.ftn-min-state-loading-bg:before {
  content: "";
  position: absolute;
  width: 2.8em;
  height: 2.5em;
  background-image: url("/Images/cashback/ftn-meter-shine.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 50%;
  z-index: 2;
  pointer-events: none;
}

.ftn-min-state-loading-bg:before {
  bottom: 0;
  left: 0;
  transform: rotate(180deg);
}

.ftn-min-state-loading-bg:after {
  top: 0;
  right: 0;
}

.ftn-min-state-loading-bg-inner {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(180deg, var(--gradient-5) 0%, var(--gradient-1) 72.21%);
  transition: height 200ms;
  pointer-events: none;
}

.ftn-min-state-loading-bg-inner:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--gradient-3);
  opacity: 0;
}

.ftn-min-state-loading-bg-inner:after {
  content: "";
  position: absolute;
  bottom: 99%;
  left: -0.4em;
  right: -0.4em;
  height: 1.4em;
  background-image: var(--progress-animation-gif-url);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.ftn-min-state-loading-bg-inner.lightness:before {
  animation-name: lightness-anim;
  animation-duration: 400ms;
}

.ftn-min-state-loading-bg-inner.claim:before {
  animation-name: lightness-anim;
  animation-duration: 800ms;
  animation-iteration-count: infinite;
}

@keyframes lightness-anim {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.ftn-winner-pop-up-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  z-index: 901;
  pointer-events: auto;
}

.ftn-winner-pop-up-wrapper:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(0.4rem);
}

.ftn-winner-pop-up-wrapper.active {
  display: flex;
}

.ftn-winner-pop-up-container {
  max-width: 59.2rem;
  width: 100%;
  box-shadow: 0 0.3rem 0.3rem 0 rgba(32, 2, 96, 0.35);
  border-radius: 2.2rem;
  padding: 10.2rem 4rem 3rem;
  margin: 2rem;
  position: relative;
}

.ftn-winner-pop-up-container:before,
.ftn-winner-pop-up-container:after {
  content: "";
  position: absolute;
  top: 0;
}

.ftn-winner-pop-up-container:before {
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 2.2rem;
  border: 0.2rem solid rgba(255, 255, 255, 0.3);
  background-color: rgba(0, 0, 3, 0.7);
  backdrop-filter: blur(0.4rem);
}

.ftn-winner-pop-up-container:after {
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  width: 26.2rem;
  height: 19.2rem;
  background-image: var(--coins-img-url);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.ftn-win-pop-close-btn {
  position: absolute;
  right: 1.2rem;
  top: 1.2rem;
  border: none;
  outline: none;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 120ms;
}

.ftn-win-pop-close-btn:active>span {
  transform: scale(0.94);
}

.ftn-win-pop-close-btn:hover {
  opacity: 1;
}

.icon-close-bg {
  width: 2rem;
  height: 2rem;
  background-image: url("/Images/cashback/icon-close.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 50%;
}

.info-popup.icon-close-bg {
  width: 0.9em;
  height: 0.9em;
}

.ftn-winner-pop-up-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 4;
}

.ftn-win-popup-title {
  font-size: 3rem;
  line-height: 3.2rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
  position: relative;
  z-index: 1;
  margin-bottom: 0.8rem;
}

.ftn-win-popup-subtitle {
  font-size: 1.6rem;
  line-height: 2.6rem;
  font-weight: 400;
  text-align: center;
  color: #fff;
  margin-bottom: 2rem;
}

.win-popup-inner-input {
  width: 100%;
  height: 5rem;
  border-radius: 1rem;
  background-color: #0b0b0c;
  border: 0.1rem solid #3d3d3d;
  font-size: 1.4rem;
  line-height: 1.6rem;
  padding: 0 1.2rem;
  font-weight: 400;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.7);
}

.win-popup-inner-input::placeholder {
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.3);
}

.win-popup-inner-input:focus {
  border: 0.1rem solid #707070;
}

.win-popup-inner-input.error {
  border: 0.1rem solid #bf1f1f;
}

.cashback-error-message {
  color: #bf1f1f;
  display: block;
  text-align: left;
  width: 100%;
  margin-bottom: 1rem;
}

.input-bottom-link {
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1.4rem;
  font-weight: 400;
  text-decoration: underline;
  color: #fff;
  margin-bottom: 2.4rem;
  transition: color 80ms;
}

.input-bottom-link:hover {
  color: var(--gradient-1);
}

.input-bottom-link:active {
  color: var(--brand-dark);
}

.win-popup-claim-btn {
  min-width: 22.4rem;
  height: 5.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  border: none;
  outline: none;
  background: linear-gradient(283.64deg, var(--gradient-1) -45.14%, var(--gradient-2) 37.39%, var(--gradient-3) 72.28%, var(--gradient-4) 119.4%, var(--gradient-5) 206.88%);
  overflow: hidden;
  position: relative;
  color: var(--button-text-color);
  box-shadow: 0 0.3rem 1rem 0 rgba(14, 14, 14, 0.3);
  cursor: pointer;
}

.win-popup-claim-btn:disabled {
  background: var(--brand-dark);
  cursor: default;
}

.win-popup-claim-btn:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  transition: background-color 100ms;
}

.win-popup-claim-btn:not(:disabled):hover:after {
  background-color: rgba(255, 255, 255, 0.1);
}

.win-popup-claim-btn:active {
  transform: scale(0.99);
}

.win-popup-claim-btn:active:after {
  background-color: rgba(0, 0, 0, 0.1);
}

.win-popup-claim-txt {
  position: relative;
  z-index: 2;
  font-size: 1.8rem;
  line-height: 2rem;
  font-weight: 700;
  text-align: center;
  color: var(--button-text-color);
}

/* Start: Success Popup Styles */

.success-popup .ftn-winner-pop-up-container {
  max-width: 44rem;
  padding: 2rem 4rem;
}

.success-popup .ftn-winner-pop-up-container:after {
  left: 50%;
  top: 6rem;
  transform: translateX(-50%);
}

.success-popup .ftn-win-popup-title {
  margin-bottom: 12.5rem;
}

.ftn-success-popup-won-text {
  color: var(--brand-text);
  font-size: 1.5rem;
  font-weight: 900;
}

.ftn-success-popup-won-amount {
  margin: 1.8rem 0 2rem;
  font-size: 4.4rem;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.2rem;
}

.success-popup .ftn-win-popup-subtitle {
  margin: 2rem 0 4rem;
}

.success-popup .win-popup-claim-btn {
  min-width: 17rem;
}

/* End: Success Popup Styles */

/* Start: Info Popover */

.cashback-popup-container {
  /* Set parent font size so 'em' units can be used for children */
  position: absolute;
  background: linear-gradient(143.85deg, rgba(255, 252, 254, 0.46) -16.79%, rgba(47, 47, 47, 0.55226) 42.99%, rgba(0, 0, 0, 0.65) 106.32%);
  color: #E0E0E0;
  width: 21em;
  padding: 0.5em;
  border-radius: 2em;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 4px 0 var(--brand-dark);
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  display: flex;
  opacity: 0;
  visibility: none;
  pointer-events: none;
  transition: opacity 0.25s;
}

.cashback-popup-container.to-bottom.to-left {
  top: 0;
  right: 6.4em;
}

.cashback-popup-container.to-bottom.to-right {
  top: 0;
  left: 6.4em;
}

.cashback-popup-container.to-top.to-left {
  bottom: 0;
  right: 6.4em;
}

.cashback-popup-container.to-top.to-right {
  bottom: 0;
  left: 6.4em;
}

.cashback-ratio-holder.open .cashback-popup-container {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* --- Header Elements --- */
.cashback-popup-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5em;
}

.cashback-popup-amount {
  margin-left: 0.4em;
  font-size: 1.8em;
  font-weight: 900;
}

.cashback-ratio-holder.yellow .cashback-popup-amount {
  -webkit-text-stroke: 1px var(--button-text-color);
  color: var(--brand-text);
}

.cashback-ratio-holder.pink .cashback-popup-amount {
  -webkit-text-stroke: 1px var(--brand-text);
  color: var(--button-text-color);
}

.cashback-popup-close {
  background-color: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  border: none;
  border-radius: 50%;
  width: 2.4em;
  height: 2.4em;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s ease;
}

.cashback-popup-close:hover {
  background-color: #606060;
}

/* --- Progress Bar --- */
.cashback-progress-bar {
  width: 100%;
  height: 2em;
  background-color: #333333;
  /* Corresponds to the 'Default' loader state */
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0.1em 0.2em rgba(0, 0, 0, 0.5);
}

.cashback-progress-bar::before {
  content: '';
  width: 100%;
  height: 12px;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 100%);
}

.cashback-progress-bar-fill {
  height: 100%;
  border-radius: 4px;
  /* Gradient for 'Half' and 'Full' states */
  background: linear-gradient(283.64deg, var(--gradient-1) -45.14%, var(--gradient-2) 37.39%, var(--gradient-3) 72.28%, var(--gradient-4) 119.4%, var(--gradient-5) 206.88%);
  transition: width 0.5s ease-in-out;
}

.cashback-progress-bar-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1.6em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* --- Description & Claim Button --- */
.cashback-popup-description {
  font-size: 1.2em;
  line-height: 1.4;
  text-align: left;
  margin: 0.3em;
  color: #FFFFFF;
}

.cashback-claim-button {
  width: 55%;
  padding: 0.6em 1.4em;
  border: none;
  border-radius: 0.7em;
  font-family: 'Poppins', sans-serif;
  font-size: 1.4em;
  font-weight: 700;
  color: var(--button-text-color);
  cursor: pointer;
  transition: all 0.2s ease-out;
  letter-spacing: 0.05em;

  /* Default State */
  background: linear-gradient(283.64deg, var(--gradient-1) -45.14%, var(--gradient-2) 37.39%, var(--gradient-3) 72.28%, var(--gradient-4) 119.4%, var(--gradient-5) 206.88%);
}

.cashback-claim-button:hover {
  /* Hovered State */
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.cashback-claim-button:active {
  /* Pressed State */
  transform: translateY(1px);
  filter: brightness(0.95);
}

.cashback-claim-button:disabled {
  /* Disabled State */
  background: #555555;
  color: #999999;
  box-shadow: none;
  cursor: default;
  transform: none;
  filter: none;
}

/* End: Info Popover */