:root {
  --white: #fff;
  --black: #000;
  --theme: var(--white);
  --theme-opacity-percent: 80%;
}

.popup-white {
  --themeBg: var(--white);
  --themeColor: var(--black);
}

.popup-black {
  --themeBg: var(--black);
  --themeColor: var(--white);
  --themeStandard: var(--redeem-col);
}

.popup {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(24, 24, 24, 0.9);
  z-index: 100;
  overflow: hidden;
}
.popup__close {
  width: 30px;
  height: 30px;
  display: inline-block;
  position: sticky;
  top: 0px;
  left: 100%;
  border-radius: 100%;
  background: transparent;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 50;
  backdrop-filter: blur(10px);
  opacity: 0.7;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
  background: var(--redeem-col);
}
.popup__close::before, .popup__close::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 22px;
  background: var(--themeColor);
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.popup__close::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.popup__close:hover {
  opacity: 1;
  text-decoration: none;
  -webkit-filter: drop-shadow(0 0 5px var(--redeem-col));
          filter: drop-shadow(0 0 5px var(--redeem-col));
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
}
.popup__closeButton {
  text-align: center;
}
.popup__closeButton button {
  display: inline-block;
  background: var(--red-btn);
  outline: none;
  color: #fff;
  padding: 10px 50px;
  border-radius: 50px;
  margin: 20px 0;
}
.popup__closeButton button:hover {
  -webkit-filter: drop-shadow(0 0 10px var(--red-btn));
          filter: drop-shadow(0 0 10px var(--red-btn));
}
.popup__wrap {
  vertical-align: middle;
  position: relative;
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  padding: 20px;
  background: var(--themeBg);
  color: var(--themeColor);
  border: 1px solid color-mix(in srgb, var(--theme-opacity-percent) var(--themeStandard), transparent);
}
.popup__wrap.wrapScroll {
  overflow-y: auto;
  height: 90vh;
}
.popup__wrap.wrapScroll::-webkit-scrollbar {
  width: 10px;
  background-color: transparent;
}
.popup__wrap.wrapScroll::-webkit-scrollbar-track {
  background: rgba(117, 117, 117, 0.4);
  margin: 0px 0;
}
.popup__wrap.wrapScroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--theme-opacity-percent) var(--themeColor), transparent);
}
.popup__content {
  font-size: 16px;
  line-height: 1.6;
  position: relative;
}
.popup__content p {
  margin-bottom: 3px;
}
.popup__content p + p {
  margin-bottom: 3px;
}
.popup__content a {
  border: none;
  background: none;
  border-bottom: 1px solid;
}
.popup__content a:hover {
  text-decoration: underline;
}
.popup__content b {
  font-weight: 500;
}
.popup__content b.borderBottom {
  border-bottom: 1px solid var(--themeColor);
}
.popup__content .notice {
  color: #c00;
}
.popup__content-title {
  text-align: center;
  display: block;
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 20px;
  color: var(--themeStandard);
}
@media (min-width: 996px) {
  .popup__content-title {
    font-size: 30px;
  }
}
.popup__content .popRedeem {
  text-align: center;
}
.popup__content .popRedeem__item {
  position: relative;
  margin: 30px 0;
}
.popup__content .popRedeem__item-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 18px;
  font-weight: lighter;
  text-align: center;
  margin-bottom: 5px;
}
.popup__content .popRedeem__item-title figure {
  width: 20%;
}
.popup__content .popRedeem__item-title span {
  font-weight: 400;
  font-size: var(--title-md);
  color: var(--standcol);
  opacity: 0.8;
}
.popup__content .popTC {
  position: relative;
}
.popup__content .popTC__intro {
  background-color: rgba(245, 245, 245, 0.8);
  padding: 10px;
  color: var(--themeBg);
}
.popup__content .popTC__subtitle {
  font-size: 20px;
  margin-top: 40px;
  text-align: center;
}
@media (min-width: 996px) {
  .popup__content .popTC__subtitle {
    font-size: 22px;
  }
}
.popup__content .popTC__line {
  width: 100%;
  height: 1px;
  margin: 10px auto 20px auto;
  position: relative;
  background: var(--themeColor);
  z-index: 5;
  opacity: 0.3;
}
.popup__content .popTC a {
  color: var(--themeColor);
}
.popup__content .popTC h5 {
  font-size: 18px;
  margin: 1% 0;
}
.popup__content .popTC ul {
  margin-left: 12px;
}
@media (min-width: 996px) {
  .popup__content .popTC ul {
    margin-left: 30px;
  }
}
.popup__content .popTC ul.listTypeNone {
  list-style: none;
}
.popup__content .popTC ul li {
  padding: 0 0 0 10px;
  margin-bottom: 20px;
}
.popup__content .popTC ul li ol {
  margin-left: 25px;
}
.popup__content .popTC .lower-roman li {
  list-style: lower-roman;
}
.popup__content .popTC .discStyle li {
  list-style: disc;
}
.popup__content .popTC table {
  border-collapse: collapse;
  margin: 15px 0;
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
}
.popup__content .popTC table tr:first-child {
  background: color-mix(in srgb, 20% var(--themeColor), transparent);
}
.popup__content .popTC table th {
  font-weight: 500;
}
.popup__content .popTC table td, .popup__content .popTC table th {
  padding: 10px;
  text-align: center;
  border: 1px solid color-mix(in srgb, 20% var(--themeColor), transparent);
}
.popup__content .popTC table td:first-child, .popup__content .popTC table th:first-child {
  font-weight: 500;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 12%;
          flex: 0 0 12%;
  position: relative;
  text-align: left;
}
@media (min-width: 996px) {
  .popup__content .popTC table td:first-child, .popup__content .popTC table th:first-child {
    padding: 20px;
  }
}
.popup__btn {
  text-align: center;
}
.popup__btn a {
  color: #fff;
  background: var(--red-btn);
  padding: 10px 50px;
  border-radius: 50px;
  text-shadow: 0 0 10px #000;
  font-weight: bold;
  font-size: 16px;
  margin: 10px 0;
  display: inline-block;
}
.popup__btn a:hover {
  -webkit-filter: drop-shadow(0 0 10px var(--red-btn));
          filter: drop-shadow(0 0 10px var(--red-btn));
  cursor: pointer;
  text-decoration: none;
}

.redeemBox {
  padding: 2% 0;
  gap: 20px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (min-width: 768px) {
  .redeemBox {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.redeemBox__btn {
  color: #fff;
  background: url(https://storage-asset.msi.com/event/2026/uk/solasta-game-bundle/images/btn-secondary.png);
  background-size: 100% 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: background 0.25s ease-in-out, -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease;
  transition: background 0.25s ease-in-out, -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease;
  transition: background 0.25s ease-in-out, transform 0.25s ease, box-shadow 0.25s ease;
  transition: background 0.25s ease-in-out, transform 0.25s ease, box-shadow 0.25s ease, -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease;
  padding: 12px 50px;
  cursor: pointer;
  margin: 12px auto;
}
.redeemBox__btn:hover {
  background: url(https://storage-asset.msi.com/event/2026/uk/solasta-game-bundle/images/btn-secondary-hover.png);
  background-size: 100% 100%;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}/*# sourceMappingURL=redeem_tc.css.map */