/* Электронные чаевые — page-specific styles (остальное — из saby-buhta.css) */

/* Шаги запуска — 3 карточки в сетке cards_12col */
.chaevye-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.chaevye-step__num {
  align-self: flex-start;
  background: var(--blue400);
  color: var(--white0);
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 20px;
  line-height: 1.2;
}

/* Где разместить QR — по аналогии с zakup.
   Планшет/мобайл: 1 колонка, картинка справа.
   Десктоп (>=992): маленькая+большая / большая+маленькая. */
.chaevye-qr {
  display: grid;
  gap: 24px;
}
.chaevye-qr__1,
.chaevye-qr__2,
.chaevye-qr__3,
.chaevye-qr__4 {
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
}
.chaevye-qr .zakup_block p {
  max-width: 50%;
}
.chaevye-qr__1 { background-image: url('/storage/app/media/chaevye/chaev_qr1.png'); min-height: 213px; }
.chaevye-qr__2 { background-image: url('/storage/app/media/chaevye/chaev_qr2.png'); min-height: 357px; }
.chaevye-qr__3 { background-image: url('/storage/app/media/chaevye/chaev_qr3.png'); min-height: 262px; }
.chaevye-qr__4 { background-image: url('/storage/app/media/chaevye/chaev_qr4.png'); min-height: 260px; }

@media (min-width: 576px) {
  .chaevye-qr {
    gap: 32px;
  }
}
@media (max-width: 575px) {
  .chaevye-qr .zakup_block p {
    max-width: 100%;
  }
  .chaevye-qr__1 {
    background-position: bottom center;
    background-size: 100% auto;
    min-height: 292px;
  }
  .chaevye-qr__2 {
    background-position: bottom right;
    background-size: auto 130px;
    min-height: 326px;
  }
  .chaevye-qr__3 {
    background-position: bottom right;
    background-size: auto 103px;
    min-height: 274px;
  }
  .chaevye-qr__4 {
    background-position: bottom center;
    background-size: 100% auto;
    min-height: 269px;
  }
}
@media (min-width: 1200px) {
  .chaevye-qr {
    grid-template-columns: repeat(6, 1fr);
  }
  .chaevye-qr__1 {
    grid-area: 1 / 1 / 2 / 3;
    min-height: 357px;
    background-position: bottom right;
    background-size: 100% auto;
  }
  .chaevye-qr__2 {
    grid-area: 1 / 3 / 2 / 7;
    min-height: 357px;
    background-position: right center;
    background-size: auto 100%;
  }
  .chaevye-qr__3 {
    grid-area: 2 / 1 / 3 / 5;
    min-height: 262px;
    background-position: right center;
    background-size: auto 100%;
  }
  .chaevye-qr__4 {
    grid-area: 2 / 5 / 3 / 7;
    min-height: 262px;
    background-position: bottom right;
    background-size: 100% auto;
  }
  .chaevye-qr .zakup_block p {
    max-width: 473px;
  }
}

/* Деньги — жёлтая карточка с картинкой (слева), список с иконками (справа) */
.chaevye-money__img {
  background: #ffedb1;
  border-radius: 24px;
  padding: 32px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chaevye-money__img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
@media (max-width: 575px) {
  .chaevye-money__img {
    padding: 24px;
  }
}