/* live-bingo.css — стили блока «Участвуй в БИНГО» с боевой страницы letu.ru/bingo.
   Снято из DOM 03.08.2026 (страница рендерится JS-ом, в исходном HTML блока нет).
   Это источник правды: виджет в iframe обязан выглядеть 1-в-1.
   Ничего здесь не меняем — правки идут только в widget/. */

.content-wrap { position: relative; margin: 0 auto; max-width: 1920px; padding: 0; box-sizing: border-box; font-family: "Golos Text", sans-serif; }
.bp__wrapper { display: flex; flex-direction: column; align-items: center; margin-right: auto; margin-bottom: 0; margin-left: auto; max-width: 1736px; padding-bottom: 0; margin-top: 30px !important; }

.bp-cards { display: flex; flex-direction: column; align-items: center; max-width: 360px; }
.bp-cards__title { font-size: 24px; margin-bottom: 30px; font-weight: 700; color: black; text-align: center; margin-top: 12px; max-width: 280px; line-height: 130%; }
.bp-cards__title-bingo { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/bingo.png"); background-position: center center; background-repeat: no-repeat; background-size: contain; height: 32px; width: 76px; display: inline-block; position: relative; top: 7px; left: 3px; }
.bp-cards__desc { color: black; text-align: center; font-size: 16px; line-height: 150%; margin-top: 10px; }
.bp-cards__accept { width: 175px; height: 40px; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-weight: 500; font-size: 16px; text-decoration: none; margin-top: 20px; background-color: rgb(8, 32, 255) !important; color: rgb(255, 255, 255) !important; }

.bp-cards .bp-cards-list { max-width: 1932px; margin-bottom: 40px; display: flex; margin-top: 20px; position: relative; overflow-x: scroll; gap: 8px; padding: 0 24px; scrollbar-width: none; width: 100vw; }
.bp-cards .bp-cards-list::-webkit-scrollbar { display: none; }
.bp-cards .bp-cards-list__item { background-color: rgb(237, 239, 255); border-radius: 24px; width: 312px; height: 430px; display: flex; flex-direction: column; align-items: center; overflow: hidden; flex-shrink: 0; position: relative; }

/* ── Состояние: задание выполнено ─────────────────────────────────────── */
.bp-cards .bp-cards-list__item.item-completed { background-color: rgb(211, 244, 220); }
.bp-cards .bp-cards-list__item.item-completed .bp-cards-list__completed { display: unset; }
.bp-cards .bp-cards-list__item.item-completed .bp-cards-list__pack-top { visibility: visible; transform: translateY(0px); rotate: -9deg; }
.bp-cards .bp-cards-list__item.item-completed .bp-cards-list__button { display: none; }
.bp-cards .bp-cards-list__item.item-completed .bp-cards-list__pack { transform: translateY(161px); background-image: none; }
.bp-cards .bp-cards-list__item.item-completed .bp-cards-list__pack::after { visibility: visible; }
.bp-cards .bp-cards-list__item.item-completed .bp-cards-list__offer { opacity: 1; }

/* ── Состояние: карточка раскрыта (но не выполнена) ───────────────────── */
.bp-cards .bp-cards-list__item.item-opened .bp-cards-list__pack-top { visibility: visible; transform: translateY(0px); rotate: -9deg; }
.bp-cards .bp-cards-list__item.item-opened .bp-cards-list__button { display: none; }
.bp-cards .bp-cards-list__item.item-opened .bp-cards-list__pack { transform: translateY(161px); background-image: none; }
.bp-cards .bp-cards-list__item.item-opened .bp-cards-list__pack::after { visibility: visible; }
.bp-cards .bp-cards-list__item.item-opened .bp-cards-list__offer { opacity: 1; }

/* ── Состояние: закрыто по дате ───────────────────────────────────────── */
.bp-cards .bp-cards-list__item.item-locked { background-color: rgb(245, 245, 245); }
.bp-cards .bp-cards-list__item.item-locked .bp-cards-list__pack_first { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/pack-1-unactive.png"); }
.bp-cards .bp-cards-list__item.item-locked .bp-cards-list__pack_second { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/pack-2-unactive.png"); }
.bp-cards .bp-cards-list__item.item-locked .bp-cards-list__pack_third { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/pack-3-unactive.png"); }
.bp-cards .bp-cards-list__item.item-locked .bp-cards-list__pack_fourth { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/pack-4-unactive.png"); }
.bp-cards .bp-cards-list__item.item-locked .bp-cards-list__pack_fifth { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/pack-5-unactive.png"); }
.bp-cards .bp-cards-list__item.item-locked .bp-cards-list__pack_sixth { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/pack-6-unactive.png"); }
.bp-cards .bp-cards-list__item.item-locked .bp-cards-list__button { display: none; }
.bp-cards .bp-cards-list__item.item-locked .bp-cards-list__access { display: unset; }

/* ── Карточка «Большой куш» ───────────────────────────────────────────── */
.bp-cards .bp-cards-list__item.item-special { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/bg-special.png"); background-position: center center; background-repeat: no-repeat; background-size: cover; }
.bp-cards .bp-cards-list__item.item-special .bp-cards-list__pack-top { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/pack-6-top.png"); }

.bp-cards .bp-cards-list__button { width: 221px; height: 40px; border-radius: 12px; display: flex; justify-content: center; align-items: center; color: white; font-weight: 400; font-size: 16px; background-color: rgb(8, 32, 255); text-decoration: none; margin-top: 55px; position: relative; z-index: 1; }
.bp-cards .bp-cards-list__completed { position: absolute; width: 168px; height: 168px; background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/completed.png"); background-position: center center; background-size: contain; background-repeat: no-repeat; display: none; z-index: 1; right: 3px; top: 28px; }
.bp-cards .bp-cards-list__button-checkbox { position: absolute; width: 221px; height: 40px; opacity: 0; cursor: pointer; }
.bp-cards .bp-cards-list__wrapper { height: 100%; position: absolute; display: flex; justify-content: center; overflow: hidden; width: 100%; max-width: 312px; }
.bp-cards .bp-cards-list__access { color: black; font-size: 16px; line-height: 145%; text-align: center; display: none; margin-top: 30px !important; }

.bp-cards .bp-cards-list__pack { position: absolute; width: 252px; height: 350px; background-position: center center; background-size: contain; background-repeat: no-repeat; bottom: -54px; z-index: 1; pointer-events: none; }
.bp-cards .bp-cards-list__pack::after { content: ""; position: absolute; inset: 0; background-size: contain; background-repeat: no-repeat; background-position: center center; width: 252px; height: 350px; visibility: hidden; }
.bp-cards .bp-cards-list__pack-top { position: absolute; width: 248px; height: 73px; background-position: center center; background-size: contain; background-repeat: no-repeat; top: -13px; transform: translateY(175px); rotate: 0deg; background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/pack-top.png"); visibility: hidden; }
.bp-cards .bp-cards-list__pack_first { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/pack-1.png"); }
.bp-cards .bp-cards-list__pack_first::after { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/pack-1-opened.png"); }
.bp-cards .bp-cards-list__pack_second { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/pack-2.png"); }
.bp-cards .bp-cards-list__pack_second::after { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/pack-2-opened.png"); }
.bp-cards .bp-cards-list__pack_third { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/pack-3.png"); }
.bp-cards .bp-cards-list__pack_third::after { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/pack-3-opened.png"); }
.bp-cards .bp-cards-list__pack_fourth { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/pack-4.png"); }
.bp-cards .bp-cards-list__pack_fourth::after { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/pack-4-opened.png"); }
.bp-cards .bp-cards-list__pack_fifth { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/pack-5.png"); }
.bp-cards .bp-cards-list__pack_fifth::after { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/pack-5-opened.png"); }
.bp-cards .bp-cards-list__pack_sixth { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/pack-6.png"); }
.bp-cards .bp-cards-list__pack_sixth::after { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/pack-6-opened.png"); }

.bp-cards .bp-cards-list__offer { width: 192px; height: 290px; display: flex; flex-direction: column; align-items: center; background-position: center center; background-size: 201px; background-repeat: no-repeat; background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/offer-bg.png"); position: absolute; top: 70px; rotate: -3deg; padding: 15px; gap: 11px; opacity: 0; }
.bp-cards .bp-cards-list__offer-image { background-position: center center; background-size: contain; background-repeat: no-repeat; height: 150px; rotate: 3deg; }
.bp-cards .bp-cards-list__offer-image_first { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/offer-1.png"); width: 102px; }
.bp-cards .bp-cards-list__offer-image_second { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/offer-2-1.png"); width: 102px; }
.bp-cards .bp-cards-list__offer-image_third { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/offer-3-1.png"); width: 102px; }
.bp-cards .bp-cards-list__offer-image_fourth { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/offer-4-1.png"); width: 102px; }
.bp-cards .bp-cards-list__offer-image_fifth { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/offer-5-1.png"); width: 130px; }
.bp-cards .bp-cards-list__offer-image_sixth { background-image: url("https://www.letu.ru/common/img/uploaded/products/bingo/offer-bingo.png"); width: 266px; height: auto; }
.bp-cards .bp-cards-list__offer-text { color: black; font-size: 14px; text-align: center; }
.bp-cards .bp-cards-list__offer-text-link { color: rgb(8, 32, 255); text-decoration: none; }

/* CSS-механика раскрытия пачки по клику (чекбокс-хак, JS не нужен) */
.bp-cards .bp-cards-list .bp-cards-list__item:has(.bp-cards-list__button-checkbox:checked) .bp-cards-list__pack { animation: 1s ease-out 0s 1 normal forwards running shake, 0.8s cubic-bezier(0.1, 0.8, 0.2, 1) 1s 1 normal forwards running slide; }
.bp-cards .bp-cards-list .bp-cards-list__item:has(.bp-cards-list__button-checkbox:checked) .bp-cards-list__pack::after { visibility: visible; transition: visibility 1s; }
.bp-cards .bp-cards-list .bp-cards-list__item:has(.bp-cards-list__button-checkbox:checked) .bp-cards-list__pack-top { animation: 0.8s cubic-bezier(0.1, 0.8, 0.2, 1) 1s 1 normal forwards running pack-top-fly-away; }
.bp-cards .bp-cards-list .bp-cards-list__item:has(.bp-cards-list__button-checkbox:checked) .bp-cards-list__offer { animation: 0.7s ease 1s 1 normal forwards running offer-fly-in; }
.bp-cards .bp-cards-list .bp-cards-list__item:has(.bp-cards-list__button-checkbox:checked) .bp-cards-list__button { opacity: 0; pointer-events: none; transition: opacity 0.3s; }

.bp-cards__link { text-decoration: none; color: rgb(8, 32, 255) !important; }
.bp-cards__about { font-size: 16px; color: black; margin-top: 20px; padding: 0 16px; line-height: 150%; text-align: center; margin-bottom: 60px !important; }
.bp-cards__disclaimer { color: rgb(113, 118, 128); font-size: 16px; text-align: center; padding: 0 16px; line-height: 150%; margin-top: 60px; }
.bp-cards__list--item { text-align: center; }
.bp-challenge_pr__button { margin-top: 53px; margin-bottom: 40px; padding: 20px 40px; border-radius: 12px; display: inline-block; justify-content: center; align-items: center; color: rgb(9, 33, 255); font-weight: 600; font-size: 20px; text-decoration: none; border: 2px solid rgb(8, 32, 255) !important; }

@media (max-width: 1019px) {
  .bp-cards .bp-cards-list__offer-image_sixth { width: 220px; }
}
@media (min-width: 1020px) {
  .bp-cards { max-width: 1216px; }
  .bp-cards__title { max-width: unset; font-size: 50px; margin-top: 94px; letter-spacing: -1px; }
  .bp-cards__title-bingo { top: 29px; height: 95px; width: 213px; left: 0px; }
  .bp-cards__desc { max-width: 600px; font-size: 20px; margin-top: 32px; line-height: 140%; }
  .bp-cards__accept { margin-top: 56px; width: 183px; height: 48px; border-radius: 16px; }
  .bp-cards .bp-cards-list { margin-top: 56px; padding: 0; gap: 16px; overflow: unset; display: grid; grid-template-columns: repeat(2, 1fr); max-width: 804px; width: 100%; }
  .bp-cards .bp-cards-list__item { width: 394px; height: 396px; }
  .bp-cards .bp-cards-list__item.item-completed .bp-cards-list__pack { transform: translateY(134px); }
  .bp-cards .bp-cards-list__item.item-opened .bp-cards-list__pack { transform: translateY(134px); }
  .bp-cards .bp-cards-list__pack { width: 302px; height: 420px; bottom: -120px; }
  .bp-cards .bp-cards-list__pack::after { width: 302px; height: 420px; }
  .bp-cards .bp-cards-list__pack-top { width: 302px; height: 87px; top: -36px; }
  .bp-cards .bp-cards-list__offer { top: 55px; }
  .bp-cards .bp-cards-list__button { width: 230px; height: 48px; font-weight: 500; margin-top: 32px; border-radius: 16px; }
  .bp-cards .bp-cards-list__access { margin-top: 32px; line-height: 150%; }
  .bp-cards__about { padding: 0 112px; font-size: 20px; line-height: 140%; margin-top: 58px; }
}
@media (min-width: 1260px) {
  .bp-cards .bp-cards-list { grid-template-columns: repeat(3, 1fr); max-width: 1216px; }
}
@media (min-width: 1660px) {
  .bp-cards { max-width: 1408px; }
  .bp-cards__title { margin-top: 56px; }
  .bp-cards__desc { max-width: 686px; }
  .bp-cards__accept { display: none; }
  .bp-cards .bp-cards-list { width: 100%; max-width: unset; }
  .bp-cards .bp-cards-list__item { width: 458px; height: 460px; }
  .bp-cards .bp-cards-list__item.item-completed .bp-cards-list__pack { transform: translateY(167px); }
  .bp-cards .bp-cards-list__item.item-opened .bp-cards-list__pack { transform: translateY(167px); }
  .bp-cards .bp-cards-list__pack-top { top: -23px; }
  .bp-cards .bp-cards-list__pack { bottom: -83px; }
  .bp-cards .bp-cards-list__offer { top: 84px; }
  .bp-cards .bp-cards-list__button { margin-top: 55px; }
  .bp-cards .bp-cards-list__access { margin-top: 55px; }
  .bp-cards .bp-cards-list__completed { width: 212px; height: 212px; right: 17px; top: 35px; }
  .bp-cards__about { max-width: 1045px; }
}

@keyframes shake {
  0% { transform: translateX(0px); }
  12% { transform: translateX(-5px); }
  24% { transform: translateX(5px); }
  36% { transform: translateX(-5px); }
  48% { transform: translateX(5px); }
  56% { transform: translateX(-4px); }
  64% { transform: translateX(4px); }
  72% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
  86% { transform: translateX(-3px); }
  92% { transform: translateX(3px); }
  96% { transform: translateX(-2px); }
  99% { transform: translateX(0px); }
  100% { transform: translateX(0px); }
}
@keyframes slide {
  0% { background-image: none; transform: translateY(0px); }
  100% { transform: translateY(161px); background-image: none; }
}
@keyframes pack-top-fly-away {
  0% { visibility: visible; transform: translateY(175px); rotate: 0deg; }
  100% { visibility: visible; transform: translateY(0px); rotate: -9deg; }
}
@keyframes offer-fly-in {
  0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}