body {
  background-color: #090707;
  color: #fafafa;
  margin: 0;
      padding-bottom: 90px;
  font-family: "Inter", sans-serif;
}

:root{
  --roulette-size: 850px;   /* диаметр области колеса */
  --slot-w: 148px;          /* размер ячейки */
  --slot-h: 148px;
  --radius: 337px;          /* расстояние от центра до ячейки */
  --slot-gap: 20px;         /* зазор между соседними слотами */
  --icon-scale: 0.68;       /* масштаб подарка внутри ячейки */
}

    /* ===== Referral (scoped) ===== */
    .refp{--sp:16px;--sp-sm:12px;--rad:16px;--shadow:0 6px 18px rgba(0,0,0,.35);
          --bg:#0E0E10;--panel:#191A1D;--panel2:#202125;--txt:#fff;--muted:rgba(255,255,255,.72);--accent:#ff3b3b;}
    .refp, .refp *{box-sizing:border-box;color:var(--txt);}
    .refp__wrap{max-width:480px;margin:0 auto;padding:var(--sp) var(--sp-sm);}
    .refp__title{margin:0 0 var(--sp);text-align:center;font-size:20px;font-weight:800;}

    .refp__pill{background:var(--panel);border-radius:var(--rad);padding:12px 14px;text-align:center;
                box-shadow:var(--shadow);margin-bottom:var(--sp);}
    .refp__pill h3{margin:0 0 6px;color:var(--accent);font-weight:800;font-size:14px;}
    .refp__pill p{margin:0;color:var(--muted);font-size:13px;line-height:1.35;}

    /* три карточки ВСЕГДА в ряд */
    .refp__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 var(--sp);padding:0;list-style:none;}
    .refp__stat{background:var(--panel);border-radius:14px;padding:10px;text-align:center;box-shadow:var(--shadow);min-height:86px;}
    .refp__stat-label{font-size:11px;color:var(--muted);margin-bottom:8px;display:block;}
    .refp__stat-value{font-weight:800;font-size:clamp(15px,5vw,20px);line-height:1;}

    .refp__panel{background:var(--panel);border-radius:var(--rad);padding:var(--sp);box-shadow:var(--shadow);margin:0 0 var(--sp);}
    .refp__panel h4{margin:0 0 10px;text-align:center;font-size:16px;font-weight:700;}
    .refp__row{display:flex;gap:8px;align-items:center;}
    .refp__input{flex:1;height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.08);
                 background:var(--panel2);padding:0 12px;font-size:14px;color:var(--txt);}
    .refp__btn{display:block;width:100%;height:48px;border:none;border-radius:12px;background:#fff;color:#111;
               font-weight:800;font-size:16px;margin-top:10px;cursor:pointer;}
    .refp__muted{font-size:12px;color:var(--muted);text-align:center;margin-top:6px;}

    /* мелкие улучшения для очень узких экранов */
    @media (max-width:340px){
      .refp__wrap{padding:var(--sp-sm);}
      .refp__stat{padding:8px;min-height:80px;}
      .refp__btn{height:46px;}
    }

.ruletka-stage{
  position: relative;
  width: var(--roulette-size);
  height: var(--roulette-size);
  margin: 0 auto;           /* центр по горизонтали */
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

button {
  margin: 0;
  padding: 0;
  font: inherit;
  border: none;
  color: inherit;
  background-color: inherit;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Профиль */

.autorization {
  margin-top: 20px;
  width: calc(100% - 52px);
  max-width: 338px;
  min-width: 338px;
  margin-left: 26px;
  margin-right: 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  height: 60px;
  font-size: 20px;
  font-weight: bold;
  background-color: #f91536;
  border-radius: 10px;
  color: white;
}

.navigation {
  position: relative;
  z-index: 100;
  align-self: center;
  background-color: white;
  position: fixed;
  bottom: 34px;
  width: calc(100% - 52px);
  max-width: 338px;
  min-width: 338px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  height: 60px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
}

.navigation div {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0;
  color: #090707;
  width: 100%;
  margin-top: 11px;
  margin-bottom: 11px;
}

.navigation div button {
  margin-left: auto;
  margin-right: auto;
  color: inherit;
}

.navigation div:first-of-type {
  margin-left: 20px;
  padding-left: 17px;
}

.navigation div:nth-of-type(2) {
  margin-right: 20px;
  padding-left: 17px;
}

.navigation div img {
  width: 30px;
  height: 30px;
}

.navigation .active-page {
  background-color: #fad8dd;
  color: #f91536;
  border-radius: 10px;
}

.active-page img {
  filter: invert(18%) sepia(95%) saturate(5235%) hue-rotate(339deg)
    brightness(96%) contrast(106%);
}

.opacity-box {
  display: block;
  width: 100%;
  height: 34px;
  background: linear-gradient(to bottom, rgba(9, 7, 7, 0.5), rgba(9, 7, 7, 1));
  position: absolute;
  bottom: -45px;
  z-index: 15;
  opacity: 0.9;
}

.user-data {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
  width: calc(100% - 52px);
  max-width: 338px;
  min-width: 338px;
}

.user-image {
  width: 60px;
  height: 60px;
  border-radius: 20px;
  background-color: #828181;
}

.balance {
  height: 60px;
  background-color: #191818;
  border-radius: 20px;
  width: 247px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}

.deposit {
  background-color: #090707;
  width: 38px;
  height: 38px;
  border-radius: 15px;
  margin-left: 12px;
}

.deposit img {
  margin-top: 3px;
}

.credits {
  width: 174px;
  background-color: #090707;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 38px;
  border-radius: 15px;
  justify-content: space-between;
  margin-right: 13px;
}

.credits span {
  font-weight: 600;
  font-size: 18px;
}

.credits span:first-of-type {
  margin-left: 13px;
}

.credits span img {
  position: relative;
  top: 2px;
  margin-right: 5px;
  width: 18px;
}

.credits span:last-of-type {
  margin-right: 13px;
}

.user-info {
  background-color: #191818;
  margin-top: 20px;
  border-radius: 10px;
  width: 338px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 62px;
}

.user-info div {
  align-self: center;
  display: flex;
  gap: 5px;
  flex-direction: column;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 12px;
}

.user-info div h2 {
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: 16px;
}

.user-info div span {
  margin: 0;
  padding: 0;
  color: #828181;
  font-weight: 400;
  font-size: 14px;
  display: block;
}

.log-out {
  background-color: #090707;
  border-radius: 15px;
  width: 38px;
  height: 38px;
  align-self: center;
  margin-right: 12px;
}

.log-out img {
  margin: 0;
  margin-top: 3px;
  margin-right: 3px;
}

.inventory {
  margin-top: 40px;
  width: 100%;
}

.empty {
  background-color: #191818;
  width: 338px;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  margin-top: 40px;
}

.empty h2 {
  text-align: center;
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: 16px;
  padding-top: 12px;
}

.empty p {
  margin: 0;
  padding: 0;
  text-align: center;
  color: #828181;
  font-weight: 400;
  font-size: 14px;
  padding-bottom: 12px;
  padding-top: 3px;
}

.profile-inventory {
  margin: 0;
  padding: 0;
  text-align: center;
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 20px;
}

/* Кейс */

.case-without-autorization {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.main-image {
  background-color: #191818;
  width: calc(100% - 52px);
  max-width: 338px;
  align-self: center;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  margin-bottom: 40px;
}

.main-image img {
  width: 100%;
}

.open-info {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

.case-system-with-autorize {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.open-case-system {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% - 52px);
  max-width: 338px;
}

.mode {
  width: 100%;
  background-color: #191818;
  height: 44px;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toggle {
  width: 48px;
  height: 24px;
  background-color: #fafafa;
  border-radius: 12px;
  margin-right: 9px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.circle {
  width: 16px;
  height: 16px;
  background-color: #f91536;
  border-radius: 50%;
  transform: translateX(-5px);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.toggle.active-mode {
  background-color: #f91536;
}

.toggle.active-mode .circle {
  background-color: #fafafa;
  transform: translateX(21px);
}

.mode span:first-of-type {
  color: #828181;
  font-weight: 400;
  font-size: 14px;
  margin-left: 9px;
}

.mode div {
  width: 48px;
  height: 24px;
  background-color: #fafafa;
  border-radius: 12px;
  margin-right: 9px;
  display: flex;
  align-items: center;
}

.mode div .circle {
  width: 16px;
  height: 16px;
  background-color: #f91536;
  border-radius: 50px;
  transform: translateX(-5px);
}

.open-menu {
  width: 100%;
  background-color: #191818;
  margin-top: 20px;
  border-radius: 20px;
}

.open-case-buttons {
  margin-top: 20px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.open-case-buttons button {
  font-size: 20px;
  font-weight: 700;
  width: calc(100% - 18px);
  max-width: 338px;
  border-radius: 10px;
  height: 60px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.black {
  color: #fafafa;
  background-color: #000000;
}

.white {
  color: #000000;
  background-color: #fafafa;
}

.count-open-cases {
  margin-top: 20px;
  width: calc(100% - 52px);
  max-width: 338px;
  height: 116px;
  background-color: #191818;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

@media (max-width: 380px) {
  .count-open-cases .count {
    gap: 5px !important;
  }
}

.count-open-cases span {
  display: block;
  font-weight: 400;
  font-size: 14px;
  color: #828181;
  margin-top: 20px;
  margin-left: 9px;
}

.count-open-cases .count {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.count .count-item {
  width: 56px;
  aspect-ratio: 1/1;
  background-color: #090707;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 700;
  display: flex; /* включаем flex */
  justify-content: center; /* центрируем по горизонтали */
  align-items: center;
}

.selected-count {
  border-color: #f91536; /* синий бордер для выбранной */
  box-shadow: 0 0 10px rgba(249, 21, 54, 0.5);
}

.ruletka-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}

.ruletka-container {
  position: relative;
  width: 100%;
  height: 300px;
  background: #090707;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

.ruletka-items {
  position: absolute;
  top: -550px;
  width: 850px;
  height: 850px;
  z-index: 2;
  transform: rotate(900deg);
  transform-origin: center center;
  transition: all 2s ease; /* поворот строго из центра */ /* подними выше на 10% */
  user-select: none;
  -webkit-user-drag: none;
}

.ruletka-items .item {
  position: absolute;
  top: 41.5%;
  left: 41.5%;
  width: 143px; /* или конкретный размер */
  height: 148px;
}

/* Углы против часовой стрелки: 360 / 14 ≈ 25.714° */
.item:nth-of-type(1) {
  transform: rotate(89.5deg) translateX(337px);
}
.item:nth-of-type(2) {
  transform: rotate(64.286deg) translateX(337px);
}
.item:nth-of-type(3) {
  transform: rotate(38.571deg) translateX(337px);
}
.item:nth-of-type(4) {
  transform: rotate(12.857deg) translateX(337px);
}
.item:nth-of-type(5) {
  transform: rotate(347.143deg) translateX(337px);
}
.item:nth-of-type(6) {
  transform: rotate(321.429deg) translateX(337px);
}
.item:nth-of-type(7) {
  transform: rotate(295.714deg) translateX(337px);
}
.item:nth-of-type(8) {
  transform: rotate(270deg) translateX(337px);
}
.item:nth-of-type(9) {
  transform: rotate(244.286deg) translateX(337px);
}
.item:nth-of-type(10) {
  transform: rotate(218.571deg) translateX(337px);
}
.item:nth-of-type(11) {
  transform: rotate(192.857deg) translateX(337px);
}
.item:nth-of-type(12) {
  transform: rotate(167.143deg) translateX(337px);
}
.item:nth-of-type(13) {
  transform: rotate(141.429deg) translateX(337px);
}
.item:nth-of-type(14) {
  transform: rotate(115.714deg) translateX(337px);
}

.ruletka-name {
  position: absolute;
  top: 10px;
}

.ruletka-bg {
  width: 850px;
  height: 850px;
  position: absolute;
  top: -550px;
  z-index: 1;
}


.item img {
  transform: rotate(-90deg);
}
.item .box-container {
  transform: rotate(-90deg);
}
.item img:last-of-type {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(270deg); /* центрируем */
  pointer-events: none;/* чтобы клики шли сквозь */
}

.pointer {
  z-index: 15;
  position: relative;
  top: -10px;
}

.krutka {
  margin-top: 40px;
  width: calc(100% - 52px);
  max-width: 338px;
  background-color: #191818;
  height: 190px;
  border-radius: 20px;
  margin-left: auto;
  margin-right: auto;
}

.simple-text {
  color: #828181;
  font-size: 14px;
  font-weight: 400;
  display: block;
  padding-top: 20px;
  margin-left: 9px;
  margin-bottom: 15px;
}
.red-text {
  color: #f91536;
}

.krutka-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.krutka-buttons button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  background-color: #fafafa;
  font-size: 20px;
  font-weight: 700;
  color: #090707;
  height: 60px;
  border-radius: 10px;
}

.krutka-buttons button img {
  position: relative;
  margin-left: 10px;
}

.krutka-buttons button:last-of-type img {
  margin-right: 8px;
}

.notation {
  width: calc(100% - 52px);
  max-width: 338px;
  align-self: center;
  background-color: #191818;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.notation h3 {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  color: #f91536;
  margin-top: 12px;
  margin-bottom: 10px;
}

.notation p {
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-size: 14px;
  color: #828181;
  margin-bottom: 12px;
  text-align: center;
}

.call-of-cases {
  padding: 0;
  margin: 0;
  font-weight: 600px;
  font-size: 20px;
  color: #fafafa;
  margin-top: 40px;
  margin-bottom: 20px;
}

.group-of-cases {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

.group-of-cases.hidden {
  display: none;
}

.group-of-cases > .cards {
  margin-bottom: 0;
}

#cases-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.case-image {
  width: inherit;
  object-fit: contain; /* картинка впишется внутрь без обрезки */
}

.cards {
  list-style: none;
  padding: 0;
  margin: 0 auto 40px;

  display: flex;           /* включаем флекс */
  flex-wrap: wrap;         /* перенос строк */
  gap: 26px;               /* расстояние между карточками */
  justify-content: center; /* центрируем ряд */
}

.card {
  width: 156px;            /* фиксированная ширина */
  background-color: #191818;
  border-radius: 10px;
  padding-bottom: 12px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;     /* контент внутри по центру */
}

/* квадрат под медиа внутри карточки — чтобы иконка была ровно по центру */
.card .media-box {
  width: 132px;
  aspect-ratio: 1 / 1;
  background: #141313;
  border-radius: 10px;
  margin: 12px auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}


.card .price-pill {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 12px;
  background: #ff2f5b;     /* цвет «пилюли» */
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  margin: 8px 12px 0;
  line-height: 1;
}
.card .price-pill img {
  width: 14px;
  height: 14px;
  display: block;
}

.card .media { max-width: 80%; max-height: 80%; display: block; }
.card .lottie-holder svg { display:block; max-width:100%; max-height:100%; margin:0 auto; }

.profile-without-autorization > .inventory > .cards {
  margin-bottom: 120px;
}

.card {
  background-color: #191818;
  border-radius: 10px;
  padding-bottom: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.card div {
    background-color: #141313;
    width: 132px;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    margin-top: 12px;
	margin-left:12px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* чтобы лишнее не вылезало */
}

.lottie-holder {
    width: 80%;   /* подгони размер под себя */
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;

}

.image-wrap,
.lottie-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;        /* подгоните под размер карточки */
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background-color: #141313;
  margin-top: 12px;
  margin-bottom: 15px;
  overflow: hidden;
}
.image-wrap img { max-width: 80%; max-height: 80%; display: block; }
.lottie-holder { width: 80%; height: 80%; }

/* Квадрат под медиа внутри карточки */
.card .media-box {
  width: 132px;              /* ваш размер */
  aspect-ratio: 1 / 1;
  background: #141313;
  border-radius: 10px;
  margin: 12px auto 15px;    /* auto — центрируем сам бокс */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Само медиа (и PNG, и Lottie контейнер) */
.card .media {
  display: block;
  max-width: 80%;
  max-height: 80%;
  margin: 0 auto;            /* на случай, если элемент сам шире */
}

/* Lottie SVG тоже центрируем */
.card .lottie-holder svg {
  display: block !important;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  pointer-events: none;
}

.price span {
  display: block;
  margin-left: 12px;
}

button{
  cursor:pointer
}

.card .name {
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: 16px;
  display: block;
  text-align: center;
  margin-left: 12px;
  margin-right: 12px;
}

.links {
  margin-bottom: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
}

.links h2 {
  padding: 0;
  margin: 0;
  color: #f91536;
  font-size: 20px;
  font-weight: 600;
}

.links h2 a {
  color: inherit;
  text-decoration: inherit;
}

/* Главная */

.item-lenta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
}

.dropss {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.last-drops {
  padding: 0;
  display: flex;
  position: relative; /* горизонтальный ряд */
  gap: 5px;
  background-color: #191818; /* расстояние между пунктами */
  overflow-x: auto; /* горизонтальная прокрутка при переполнении */
  list-style: none;
  margin: 0;
  padding: 0;
  -webkit-overflow-scrolling: touch; /* плавный свайп на iOS */
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  max-width: 100%;
}

.last-drops::-webkit-scrollbar {
  display: none; /* скрыть скроллбар в Chrome/Safari */
}

.drop {
  flex: 0 0 auto; /* пункт не сжимается */
  cursor: pointer;
  white-space: nowrap; /* текст не переносится */
  position: relative; /* для нижней линии */
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  width: 55px;
  height: 55px;
  touch-action: pan-x;
  display: flex;
  justify-content: center;
  align-items: center;
}

.drop img {
  width: 70%;
  height: 70%;
}

.shadow-left {
  position: absolute;
  left: 0;
  z-index: 1;
  top: 0;
  pointer-events: none;
}

.shadow-right {
  position: absolute;
  right: 0;
  z-index: 1;
  top: 0;
  pointer-events: none;
}

.nav-panel {
  display: flex; /* горизонтальный ряд */
  gap: 30px; /* расстояние между пунктами */
  overflow-x: auto; /* горизонтальная прокрутка при переполнении */
  list-style: none;
  margin: 0;
  padding: 0;
  -webkit-overflow-scrolling: touch; /* плавный свайп на iOS */
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  max-width: 90%;
}

.nav-panel::-webkit-scrollbar {
  display: none; /* скрыть скроллбар в Chrome/Safari */
}

.nav-item {
  margin-top: 40px;
  flex: 0 0 auto; /* пункт не сжимается */
  font-weight: 600;
  font-size: 20px;
  color: #828181;
  cursor: pointer;
  white-space: nowrap; /* текст не переносится */
  position: relative; /* для нижней линии */
  padding-bottom: 4px;
  scroll-snap-type: x mandatory; /* место для линии */
}

.nav-item.selected {
  color: #f91536;
}

.nav-item.selected::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: #f91536; /* красная линия под активным пунктом */
  border-radius: 2px;
}

.case-item{
   cursor:pointer
}

.cards .card .price {
    font-size: 14px;
    font-weight: 600;
    border-radius: 11px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 20px auto 0 auto; /* Центрирование блока */
    height: 26px;
    width: 80%; /* Фиксированная ширина */
    background-color: #090707;
    gap: 15px;
}

.red {
  background-color: #f91536 !important;
}

.cards .card .price span:first-of-type {
  margin-left: 6px;
}

.price span:last-of-type {
  margin-right: 6px;
}

.price span img {
  margin-right: 4px;
  position: relative;
  top: 1px;
}

/* Страница предмета */

.call-of-item {
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: 20px;
  margin-top: 40px;
  margin-bottom: 20px;
}

.item-page > .item-input > .call-of-item {
  margin: 0;
}

.item-input {
  margin-top: 40px;
  margin-bottom: 20px;
  display: flex;
  width: calc(100% - 52px);
  max-width: 338px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.item-image {
  width: calc(100% - 52px);
  max-width: 338px;
  aspect-ratio: 1/1;
  background-image: url("../media/background-for-items.svg");
  background-size: cover;
  background-position: center;
  display: flex; /* включаем флекс */
  align-items: center; /* по вертикали */
  justify-content: center;
}

.item-image img {
  width: 80%;
}

.item-info-panel {
  width: calc(100% - 52px);
  max-width: 338px;
  background-color: #191818;
  border-radius: 20px;
  height: 154px;
  margin-top: 40px;
  margin-bottom: 130px;
}

.actual-price {
  display: block;
  color: #828181;
  font-weight: 400;
  font-size: 14px;
  margin-left: 9px;
  margin-top: 20px;
  margin-bottom: 5px;
}

.item-price {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  margin-left: 9px;
}

.item-price span:not(span:last-of-type) {
  font-weight: 600;
  font-size: 20px;
}

.item-price span img {
  margin-right: 8px;
}

.main-buttons {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
  margin-left: 9px;
  margin-right: 9px;
}

.main-buttons button {
  color: #090707;
  background-color: white;
  border-radius: 10px;
  width: 155px;
  height: 60px;
  font-weight: 700;
  font-size: 20px;
}

.item-price span:last-of-type {
  font-weight: 600;
  font-size: 20px;
  color:#fff
}

/* Страница Оплаты */

.pay-variants {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1 minmax(338px, 1fr);
  justify-content: center;
  place-items: center;
  gap: 20px;
}

.pay-item {
  background-color: #191818;
  border-radius: 10px;
  width: 338px;
  display: flex;
  flex-direction: column;
}

.pay-item {
  border: 2px solid transparent; /* изначально без рамки */
  border-radius: 12px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.pay-form {
  display: none;
  margin-top: 10px;
}

.pay-item.active .pay-form {
  display: block;
}

.pay-item:hover {
  border-color: #444; /* легкий бордер при наведении */
}

.pay-item.active {
  border-color: #f91536; /* синий бордер для выбранной */
  box-shadow: 0 0 10px rgba(249, 21, 54, 0.5);
}

.pay-item:last-of-type {
  margin-bottom: 120px;
}

.pay-item h3 {
  font-weight: 600;
  font-size: 16px;
  margin: 0;
  padding: 0;
  margin-bottom: 15px;
  margin-top: 12px;
  margin-left: 12px;
}

.logo-container {
  min-height: 132px;
  width: 314px;
  background-color: #141313;
  display: flex;
  justify-content: center;
  border-radius: 10px;
  align-self: center;
  margin-bottom: 20px;
  position: relative;
}

.logo-container img {
  margin-top: auto;
}

.pay-item:nth-of-type(3) .logo-container img {
  position: absolute;
}

form {
  margin: 0;
  padding: 0;
  width: 314px;
}

.input-system {
  display: flex;
  align-items: center;       /* выравнивание по вертикали */
  gap: 10px;                 /* расстояние между input и select */
}

.input-system input {
  background-color: #141313;
  border-radius: 10px;
  width: 172px;
  height: 33px;
  margin-left: 12px;
  border: none;
  outline: none;
  color: white;
  font-weight: 500;
  font-size: 18px;
  padding-left: 10px;
}

.pay-item:nth-of-type(2) input {
  width: 317px;
}

.item img:last-of-type {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(270deg); /* центрируем */
  pointer-events: none;/* чтобы клики шли сквозь */
}

.valute {
  flex: 1;                   /* инпут растягивается на всю доступную ширину */
  position: relative;
}

.valute input {
  width: 100%;
  height: 48px;              /* фиксируем высоту */
  padding: 0 80px 0 12px;    /* справа под place для .currency-label */
  border-radius: 10px;
  border: none;
  font-size: 13px;
  box-sizing: border-box;
}

.valute .currency-label {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #aaa;              /* можешь поменять цвет */
  pointer-events: none;     /* чтобы клик не перекрывал input */
}

.currency-label {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 14px;
  pointer-events: none;
}

.convertion {
  font-weight: 500;
  font-size: 14px;
  color: #828181;
  margin-right: 10px;
}

.ruletka-item{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(-90deg);
}

.crypto-variants {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;              /* та же высота, что у инпута */
  padding: 0 12px;
  border-radius: 10px;
}

.crypto-variants select {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  outline: none;
  cursor: pointer;
}

.arrow {
  position: absolute;
  top: 4px;
  right: 8px;
}

.input-system select {
  width: 80px;
  margin: 0;
  padding: 0;
  background-color: #141313;
  border-radius: 10px;
  border: none;
  outline: none;
  color: white;
  font-weight: 500;
  font-size: 18px;
  padding-left: 8px;
  height: 33px;
  appearance: none; /* современные браузеры */
  -webkit-appearance: none; /* Chrome, Safari, iOS */
  -moz-appearance: none;
}

.input-system option {
  background-color: #141313;
  color: white;
  font-weight: 500;
  font-size: 18px;
}

.continue {
  margin: 0;
  width: 100%;
  background-color: white;
  color: #090707;
  font-size: 20px;
  font-weight: 700;
  height: 54px;
  border-radius: 10px;
  border: none;
  margin-top: 20px;
  margin-bottom: 12px;
}

/* Все секции */
.turn-off {
  display: none;
}

.turn-on {
  display: flex;
}