/*
  Black Friday
 */
.header {
  background: #2E3851 repeat-x center 0 url(../img/friday/bgs.png);
  background-size: auto;
}
.header-main__logo img {
  max-height: 47px;
}
.header .bf-cascades-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, #cca036 0%, #ffd367 100%);
  border-radius: 100px;
  padding: 6px 17px;
  height: 40px;
  flex-shrink: 0;
}
.header .bf-cascades-btn__count {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: #222a3e;
}
.header .icon-helmet {
  width: 18px;
  height: 20px;
}
.header .icon-helmet::before {
  width: 18px;
  height: 20px;
  background: no-repeat url("../img/friday/icon-helmet.svg");
  background-size: cover;
}
.header .icon-helmet--noauth {
  margin-right: 3px;
}
.header .icon-bf {
  width: 65px;
  height: 21px;
}
.header .icon-bf::before {
  width: 65px;
  height: 21px;
  background: no-repeat url("../img/friday/icon-bf.svg");
  background-size: cover;
  margin-right: 8px;
}
.header .icon-bf-arrow {
  width: 6px;
  height: 10px;
}
.header .icon-bf-arrow::before {
  width: 6px;
  height: 10px;
  background: no-repeat url("../img/friday/icon-bf-arrow.svg");
  background-size: cover;
}

.bf__page {
  margin-top: -24px;
  padding-top: 36px;
  padding-bottom: 85px;
  background: linear-gradient(180deg, #2b344f 0%, #0e0d39 100%);
  position: relative;
  overflow: hidden;
}
.bf__page:after {
  content: "";
  position: absolute;
  width: 1400px;
  height: 930px;
  left: 0;
  bottom: 0;
  background: no-repeat url("../img/friday/page-bg.png");
  background-size: cover;
}
.bf__wrapper {
  position: relative;
  z-index: 2;
}
.bf__banner {
  background: #142232;
  border-radius: 16px;
  padding: 42px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}
.bf__banner::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: top right no-repeat url("../img/friday/bf-banner-bg.png");
  background-size: contain;
}
.bf__banner-helmet-wrapper {
  position: absolute;
  z-index: 2;
  top: 2px;
  right: 119px;
  width: 195px;
  height: 210px;
}
.bf__banner-helmet-wrapper::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -147px;
  width: 149px;
  height: 243px;
  background: center no-repeat url("../img/friday/bf-trigger.png");
}
.bf__banner-helmet-wrapper::after {
  content: "";
  position: absolute;
  top: 122px;
  right: -145px;
  width: 148px;
  height: 150px;
  background: center no-repeat url("../img/friday/bf-gift.png");
}
.bf__banner-helmet {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bf__banner-items {
  display: flex;
}
.bf__banner-item {
  position: relative;
  z-index: 5;
  display: flex;
  gap: 13px;
  align-items: center;
  border-radius: 100px;
  padding: 9px 18px;
}
.bf__banner-item-title {
  font-weight: 800;
  font-size: 36px;
  letter-spacing: 0.01em;
}
.bf__light-item {
  background: #adcff2;
}
.bf__light-item .bf__banner-item-title {
  color: #0e1a28;
}
.bf__dark-item {
  background: #3545d6;
}
.bf__dark-item .bf__banner-item-title {
  color: #fff;
}
.bf__banner-item-smile {
  display: block;
  width: 44px;
  height: 44px;
}
.bf__banner-item-smile::before {
  width: 44px;
  height: 44px;
  background-size: cover;
  background-repeat: no-repeat;
}
.bf__banner-item-smile.first-smile::before {
  background-image: url("../img/friday/bf-smile-1.svg");
}
.bf__banner-item-smile.second-smile::before {
  background-image: url("../img/friday/bf-smile-2.svg");
}
.bf__content {
  display: flex;
  gap: 20px;
}
.bf__guest-header {
  border-radius: 16px;
  padding: 16px 24px 24px;
  background: #0e1a28;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.bf__guest-header-text {
  font-weight: 700;
  font-size: 24px;
  color: #fff;
}
.bf__guest-notification-btn {
  display: flex;
  border-radius: 5px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 14px;
  line-height: 143%;
  text-align: center;
  color: #0e1a28;
  background: #adcff2;
  border: 1px solid #adcff2;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.bf__guest-notification-btn:hover {
  text-decoration: none;
  color: #adcff2;
  background: transparent;
  transition: all 0.3s ease;
}
.bf__guest-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  backdrop-filter: blur(4.5px);
  mask-image: linear-gradient(to bottom, black 0% 50%, black 50% 100%);
  border-radius: 16px;
  z-index: 5;
}
.bf__tasks {
  border-radius: 16px;
  padding: 16px 24px 24px;
  background: #0e1a28;
  flex-grow: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: fit-content;
}
.bf__tasks.bf-blur {
  border: 1px solid #000;
  background: rgba(14, 26, 40, 0.2);
  pointer-events: none;
}
.bf__tasks .icon-helmet::before {
  background: no-repeat url("../img/friday/icon-helmet.svg");
  background-size: cover;
}
.bf__tasks-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.bf__tasks-title {
  font-weight: 700;
  font-size: 24px;
  color: #fff;
}
.bf__tasks-earnings {
  display: flex;
  gap: 8px;
  align-items: center;
}
.bf__tasks-earnings .icon-helmet {
  width: 18px;
  height: 20px;
}
.bf__tasks-earnings .icon-helmet::before {
  width: 18px;
  height: 20px;
  background: no-repeat url("../img/friday/icon-helmet.svg");
  background-size: cover;
}
.bf__tasks-earnings-text {
  font-weight: 400;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
}
.bf__tasks-earnings-count {
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}
.bf__task {
  border-radius: 8px;
  padding: 16px;
  background: #142232;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease;
}
.bf__task:hover {
  background-color: #1b2d42;
}
.bf__task:after {
  content: "";
  position: absolute;
  border-radius: 8px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(270deg, #5363ee 0%, #3545d6 100%);
  opacity: 0;
  transition: all 0.3s ease;
}
.bf__task--active .bf__task-button .icon-arrow-down {
  transform: rotate(180deg);
  transition: all 0.3s ease;
}
.bf__task--active:after {
  opacity: 1;
  transition: all 0.3s ease;
}
.bf__task-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bf__task-header {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-grow: 1;
}
.bf__task-image {
  background: #adcff2;
  border-radius: 4px;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}
.bf__task-image img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.bf__task-info {
  display: flex;
  flex-direction: column;
}
.bf__task-title {
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  margin-bottom: 2px;
}
.bf__task-text {
  font-weight: 400;
  font-size: 12px;
  color: #fff;
  margin-bottom: 7px;
}
.bf__task-counts {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bf__task-count {
  display: flex;
  align-items: center;
  border: 1px solid #fff;
  border-radius: 1000px;
  padding: 6px 8px;
  position: relative;
  z-index: 2;
}
.bf__task-count .icon-helmet {
  width: 12px;
  height: 12px;
}
.bf__task-count .icon-helmet::before {
  width: 12px;
  height: 12px;
  background: no-repeat url("../img/friday/icon-helmet.svg");
  background-size: cover;
}
.bf__task-count-number {
  margin-left: 4px;
  margin-right: 2px;
  font-weight: 600;
  font-size: 10px;
  color: #fff;
}
.bf__task-count-text {
  font-weight: 600;
  font-size: 10px;
  color: #fff;
}
.bf__reward-count {
  display: flex;
  align-items: center;
  border: 1px solid #fff;
  border-radius: 1000px;
  padding: 6px 8px;
  position: relative;
  z-index: 2;
}
.bf__reward-count .icon-helmet {
  width: 12px;
  height: 12px;
}
.bf__reward-count .icon-helmet::before {
  width: 12px;
  height: 12px;
  background: no-repeat url("../img/friday/icon-helmet.svg");
  background-size: cover;
}
.bf__reward-count-number {
  margin-left: 4px;
  margin-right: 2px;
  font-weight: 600;
  font-size: 10px;
  color: #fff;
}
.bf__reward-count-text {
  font-weight: 600;
  font-size: 10px;
  color: #fff;
}
.bf__task-button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 90px;
  height: 20px;
  cursor: pointer;
}
.bf__task-button::before {
  width: auto;
  height: auto;
  content: " ";
  display: block;
  position: absolute;
  left: -16px;
  right: -16px;
  top: -16px;
  bottom: -16px;
}
.bf__task-button .icon-arrow-down {
  width: 15px;
  height: 8px;
  transition: all 0.3s ease;
}
.bf__task-button .icon-arrow-down:before {
  width: 15px;
  height: 8px;
  background: no-repeat url("../img/friday/icon-arrow-down.svg");
  background-size: contain;
}
.bf--active .bf__task-top::before {
  bottom: 0;
}
.bf__task-content {
  position: relative;
  z-index: 2;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}
.bf__task--active .bf__task-content {
  max-height: 1500px;
  transition: all 0.3s ease;
}
.bf__task-content-header {
  padding-top: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
}
.bf__task-content-title {
  font-weight: 400;
  font-size: 10px;
  color: #fff;
}
.bf__task-content-title.title-task {
  flex-grow: 1;
}
.bf__task-content-title.title-reward {
  text-align: center;
  min-width: 56px;
  flex-shrink: 0;
}
.bf__task-content-title.title-reward .icon-helmet {
  width: 18px;
  height: 20px;
}
.bf__task-content-title.title-reward .icon-helmet::before {
  width: 18px;
  height: 20px;
  background: no-repeat url("../img/friday/icon-helmet.svg");
  background-size: cover;
}
.bf__task-content-title.title-status {
  text-align: center;
  min-width: 90px;
  flex-shrink: 0;
}
.bf__task-content-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.bf__task-content-inner:last-of-type {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.bf__task-content-text {
  font-weight: 400;
  font-size: 15px;
  color: #fff;
  flex-grow: 1;
}
.bf__task-content-right {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bf__task-content-reward {
  border-radius: 100px;
  height: 30px;
  width: 56px;
  background: #6371e3;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  user-select: none;
  flex-shrink: 0;
}
.bf__task-content-reward-count {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: #fff;
  flex-shrink: 0;
}
.bf__task-content-status {
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 30px;
  background: #0e1a28;
  border: 1px solid transparent;
  font-weight: 500;
  font-size: 10px;
  line-height: 143%;
  text-align: center;
  color: #fff;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.bf__task-content-status:hover {
  border: 1px solid #fff;
  background: rgba(14, 26, 40, 0);
  transition: all 0.3s ease;
}
.bf__task-content-inner--completed .bf__task-content-text {
  opacity: 0.5;
}
.bf__task-content-inner--completed .bf__task-content-reward {
  opacity: 0.5;
  background: rgb(173, 207, 242);
}
.bf__task-content-inner--completed .bf__task-content-reward-count {
  color: #0e1a28;
}
.bf__task-content-inner--completed .bf__task-content-status {
  color: #0e1a28;
  opacity: 0.5;
  background: rgb(173, 207, 242);
  pointer-events: none;
}
.bf__content-right {
  width: 370px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.bf__roulette {
  background: #0e1a28;
  border-radius: 16px;
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
}
.bf__roulette.bf-blur {
  border: 1px solid #000;
  background: rgba(14, 26, 40, 0.2);
  pointer-events: none;
}
.bf__roulette-title {
  font-weight: 700;
  font-size: 24px;
  text-align: center;
  color: #fff;
  margin-bottom: 20px;
}
.bf__roulette-container {
  width: 320px;
  height: 300px;
  position: relative;
  overflow: hidden;
  margin-bottom: 32px;
  border: 1px solid #454545;
  border-radius: 17px;
}
.bf__roulette-container:before {
  content: "";
  position: absolute;
  width: 30px;
  height: 34px;
  top: 50%;
  left: -7px;
  transform: translateY(-50%);
  background: no-repeat url("../img/friday/wheel-arrow-left.svg");
  background-size: cover;
  z-index: 2;
}
.bf__roulette-container:after {
  content: "";
  position: absolute;
  width: 30px;
  height: 34px;
  top: 50%;
  right: -7px;
  transform: translateY(-50%);
  background: no-repeat url("../img/friday/wheel-arrow-right.svg");
  background-size: cover;
  z-index: 2;
}
.bf__roulette-wheel {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  transition: transform 8s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.bf__roulette-sector {
  background: radial-gradient(50% 50% at 50% 50%, #293e9c 0%, #04020b 100%);
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bf__roulette-prize {
  width: 100%;
  height: 100%;
}
.bf__roulette-prize img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bf__roulette-spin-btn:disabled {
  background: rgba(173, 207, 242, 0.3);
  color: rgba(14, 26, 40, 0.5);
  border-color: rgba(173, 207, 242, 0.3);
  cursor: not-allowed;
}
.bf__roulette-spin-btn:disabled:hover {
  background: rgba(173, 207, 242, 0.3);
  color: rgba(14, 26, 40, 0.5);
}
.bf__roulette-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  width: 100%;
}
.bf__roulette-stats-item {
  border-radius: 8px;
  padding: 12px;
  background: #142232;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-grow: 1;
  flex-shrink: 0;
}
.bf__roulette-stat-img {
  background: #5363ee;
  border-radius: 4px;
  padding: 5px;
}
.bf__roulette-stat-img img {
  object-fit: contain;
}
.bf__roulette-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bf__roulette-stat-value {
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}
.bf__roulette-stat-label {
  font-weight: 400;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
}
.bf__roulette-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.bf__roulette-btn {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 5px 15px;
  border-radius: 5px;
}
.bf__roulette-spin-btn {
  background: #adcff2;
  font-weight: 700;
  font-size: 14px;
  line-height: 143%;
  text-align: center;
  color: #0e1a28;
  border: 1px solid #adcff2;
  transition: all 0.3s ease;
}
.bf__roulette-spin-btn-price {
  border-radius: 100px;
  height: 30px;
  width: 56px;
  border: 1px dashed #a8b2ff;
  display: inline-flex;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  gap: 3px;
  user-select: none;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 16px;
}
.bf__roulette-spin-btn-price::before {
  content: "";
  display: inline-flex;
  width: 20px;
  height: 20px;
  background: no-repeat url("../img/friday/icon-helmet.svg");
  background-size: contain;
  filter: drop-shadow(0 0 2px #fff);
}
.bf__roulette-spin-btn:hover {
  color: #adcff2;
  background: transparent;
  transition: all 0.3s ease;
}
.bf__roulette-prizes-btn {
  font-weight: 700;
  font-size: 14px;
  line-height: 143%;
  text-align: center;
  color: #adcff2;
  border: 1px solid #adcff2;
  transition: all 0.3s ease;
}
.bf__roulette-prizes-btn::before {
  background-color: rgba(0, 0, 0, 0.65);
}
.bf__roulette-prizes-btn:not(:disabled):hover {
  color: #0e1a28;
  background: #adcff2;
  transition: all 0.3s ease;
}
.bf__prizes {
  position: relative;
  background: #0e1a28;
  border-radius: 16px;
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.bf__prizes.bf-blur {
  border: 1px solid #000;
  background: rgba(14, 26, 40, 0.2);
  pointer-events: none;
}
.bf__prizes-title {
  font-weight: 700;
  font-size: 24px;
  text-align: center;
  color: #fff;
  margin-bottom: 10px;
}
.bf__prizes-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: center;
}
.bf__prize-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 8px;
  padding: 12px;
  background: #142232;
}
.bf__prize-item[data-tippy-content] {
  cursor: help;
}
.bf__prize-img {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 5px;
  width: 60px;
  height: 60px;
  background: #5363ee;
  margin-bottom: 8px;
}
.bf__prize-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bf__prize-name {
  font-weight: 400;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
}

.bf-modal {
  padding: 20px;
  color: #fff;
}
.bf-modal.sidefly {
  background: rgba(14, 26, 40, 0.9);
}
.bf-modal.sidefly .sidefloat {
  background: #142232;
  border-radius: 16px;
  width: 100%;
  max-width: 536px;
}
.bf-modal.sidefly .sidefly__header {
  font-weight: 700;
  font-size: 24px;
  color: #fff;
  text-align: center;
  padding: 12px 12px 16px;
  line-height: 1.34;
}
.bf-modal.sidefly .sidefly__btn-close {
  color: #fff;
  transition: all 0.3s ease;
}
.bf-modal.sidefly .sidefly__btn-close:hover {
  color: #cca036;
  transition: all 0.3s ease;
}
.bf-modal__content {
  padding: 0 12px 12px;
  text-align: center;
}
.bf-modal__icon {
  margin-bottom: 20px;
}
.bf-modal__prize-icon {
  width: 200px;
  max-width: 100%;
  height: 100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bf-modal__prize-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bf-modal__text {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  margin-bottom: 20px;
}
.bf-modal__text img {
  display: block;
  width: auto;
  height: auto;
  margin: 10px auto 0;
  vertical-align: top;
  max-width: 100%;
}
.bf-modal__text a {
  color: #aaa;
}
.bf-modal__text a:hover {
  color: #888;
}
.bf-modal__reward {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}
.bf-modal .icon-helmet {
  width: 20px;
  height: 20px;
}
.bf-modal .icon-helmet::before {
  width: 20px;
  height: 20px;
  background: no-repeat url("../img/friday/icon-helmet.svg");
  background-size: cover;
}
.bf-modal__reward-label {
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
.bf-modal__reward-value {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
}
.bf-modal__continue-btn {
  background: linear-gradient(180deg, #cca036 0%, #ffd367 100%);
  border-radius: 100px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 16px;
  color: #222a3e;
  border: none;
  cursor: pointer;
}

@media (max-width: 1340px) {
  .bf__banner-helmet-wrapper:before {
    display: none;
  }
  .bf__guest-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .bf__guest-notification-btn {
    align-self: flex-end;
  }
}
@media (max-width: 1090px) {
  .bf__banner-helmet {
    display: none;
  }
}
@media (max-width: 1040px) {
  .bf__task-button {
    width: 40px;
  }
  .bf__banner::after {
    background-size: cover;
  }
}
@media (max-width: 900px) {
  .bf__banner-helmet-wrapper:after {
    display: none;
  }
  .bf__guest-header-text {
    font-size: 20px;
  }
  .bf__content {
    flex-direction: column;
  }
  .bf__content-right {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(370px, 1fr));
    align-items: flex-start;
  }
  .bf__banner-items {
    justify-content: center;
  }
  .bf__banner-item-title {
    font-size: 28px;
  }
  .bf__banner-item-smile {
    width: 30px;
    height: 30px;
  }
  .bf__banner-item-smile:before {
    width: 30px;
    height: 30px;
  }
}
@media (max-width: 800px) {
  .bf__page {
    padding-bottom: 40px;
  }
  .bf__guest-header-text {
    font-size: 18px;
  }
  .bf__content-right {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (max-width: 700px) {
  .bf__banner {
    padding: 22px;
  }
  .bf__banner-item-title {
    font-size: 24px;
  }
}
@media (max-width: 600px) {
  .bf__banner-items {
    gap: 15px;
    flex-direction: column;
    align-items: center;
  }
  .bf__banner {
    gap: 15px;
    flex-direction: column;
  }
  .bf__banner-item {
    width: fit-content;
  }
  .bf__task-content-text {
    font-size: 12px;
  }
  .bf__task-button {
    width: 20px;
  }
  .bf__guest-header {
    align-items: center;
  }
  .bf__guest-header-text {
    text-align: center;
  }
  .bf__guest-notification-btn {
    align-self: center;
  }
}
@media (max-width: 460px) {
  .bf__banner-item-title {
    font-size: 20px;
  }
  .bf__tasks-title {
    font-size: 20px;
  }
  .bf__tasks {
    padding: 16px;
  }
  .bf__task-image {
    width: 50px;
    height: 50px;
  }
  .bf__task-header {
    align-items: flex-start;
  }
  .bf__task-content-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .bf__task-content-right {
    align-self: flex-end;
  }
  .bf__task-title {
    font-size: 16px;
  }
  .bf__task-counts {
    flex-direction: column;
    align-items: flex-start;
  }
  .bf__roulette {
    padding: 16px;
  }
  .bf__roulette-title {
    font-size: 20px;
  }
  .bf__roulette-container {
    width: 100%;
    max-width: 320px;
  }
  .bf__prizes {
    padding: 16px;
  }
  .bf__prizes-title {
    font-size: 20px;
  }
  .bf-modal .sidefloat {
    padding: 12px;
  }
  .bf-modal.sidefly .sidefly__header {
    padding: 14px 14px 6px;
    font-size: 20px;
  }
  .bf-modal.sidefly .bf-modal__content {
    padding: 0 14px 14px;
  }
  .bf-modal .sidefly__btn-close {
    top: 14px;
    right: 14px;
  }
  .bf-modal .bf-modal__text {
    font-size: 14px;
  }
  .bf-modal .bf-modal__continue-btn {
    font-size: 14px;
  }
  .bf__guest-header-text {
    font-size: 16px;
  }
}
.bf-prizes {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}
.bf-prizes__item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bf-prizes__item-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: no-repeat center center #5363EE;
  background-size: 80% auto;
}
.bf-prizes__item-title {
  flex: 1 0;
}
.bf-prizes__item-clipboard-btn {
  flex: none;
  min-width: 142px;
  height: 30px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #5363EE;
  font-size: 14px;
  color: #fff;
  border-radius: 34px;
  transition: background-color 0.3s ease;
}
.bf-prizes__item-clipboard-btn:hover {
  background: rgba(83, 99, 238, 0.15);
}
.bf-prizes__item-clipboard-btn.type--copysuccess {
  background: rgba(111, 238, 83, 0.15) !important;
}
.bf-prizes__item-clipboard-btn-value {
  flex: 1 0;
}
.bf-prizes__item-clipboard-btn-icon {
  flex: none;
}
@media (max-width: 460px) {
  .bf-prizes__item-clipboard-btn {
    flex: none;
    min-width: 100%;
  }
}

.bf-modal__promo {
  width: 250px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 auto 20px;
}
.bf-modal__promo--hidden {
  display: none;
}
.bf-modal__promo-label {
  font-weight: 600;
  font-size: 14px;
  color: #fff;
}
.bf-modal__promo-copy {
  width: 100%;
  max-width: 180px;
  font-size: 16px;
}
.bf-modal__promo-copy-value {
  flex: 1 0;
  text-align: left;
}
.bf-modal__promo-hint {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

/* Swal: friday */
.swal2-popup.swal2-popup--black-friday {
  background: #142232;
  border-radius: 16px;
  color: #fff;
}
.swal2-popup.swal2-popup--black-friday .swal2-title {
  color: inherit;
}
.swal2-popup.swal2-popup--black-friday .swal2-content {
  color: inherit;
}

/*# sourceMappingURL=black-friday.css.map */