/* ===== Zahlungsweise: Teilzahlung 30/70 ===== */
.class_box_pay{ --pay-accent:#f2760c; --pay-soft:#f6f5f2; }

/* ===== Каркас ===== */
.class_box_pay > .tc-section-inner-wrap{
  background:#fff !important; border:2px solid var(--pay-accent) !important;
  border-radius:12px !important; box-shadow:none !important; overflow:hidden;
}
.class_box_pay .tc-section-inner-wrap .tm-box.bgcolor-ffffff{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; gap:0 !important;
}

/* ===== Шапка ===== */
.class_box_pay .pay-head{
  display:flex; align-items:flex-start; gap:12px;
  background:#faf9f7; padding:14px 18px;
  width:100% !important; flex:0 0 100% !important; box-sizing:border-box;
}
.class_box_pay .pay-head > .pay-head-ico{
  width:34px; height:34px; flex:0 0 auto; border-radius:50%;
  background:var(--pay-accent); display:grid; place-content:center;
}
.class_box_pay .pay-head > .pay-head-ico > svg{ width:19px; height:19px; display:block; }
.class_box_pay .pay-head-tx{ min-width:0; }
.class_box_pay .pay-head .tm-section-label{
  display:block !important; margin:0 !important; padding:0 !important; line-height:1.2 !important;
}
.class_box_pay .tm-section-label::before,
.class_box_pay .tc-epo-label::before,
.class_box_pay .tc-section-label-text::before{ display:none !important; content:none !important; }
.class_box_pay .pay-head .tc-section-label-text{
  color:#23272e !important; font-weight:800 !important; text-transform:uppercase;
  letter-spacing:.02em; line-height:1.2 !important;
}
.class_box_pay .pay-head .tm-element-description,
.class_box_pay .pay-head .tm-element-description p{
  color:#6f747d !important; margin:3px 0 0 !important; padding:0 !important;
  font-size:.85em; line-height:1.35 !important; font-weight:400;
}

/* ===== Рядки опцій ===== */
.class_box_pay .tc-section-fields{ padding:12px 18px 0 !important; gap:0 !important; }
.class_box_pay .pay-radio-choice-ul{ gap:0 !important; }
.class_box_pay .pay-radio-choice-ul > li{ margin:0 !important; border:0 !important; }
.class_box_pay .tm-tooltip{ display:none !important; }

.class_box_pay .tc-label-wrap{
  display:grid !important; grid-template-columns:20px 1fr; column-gap:12px;
  align-items:start !important; float:none !important; width:auto !important;
  margin:0 !important; padding:0 !important;
}
.class_box_pay .tc-col.tc-label.tm-label,
.class_box_pay .tc-label-inner{
  display:block !important; float:none !important; width:auto !important; min-width:0 !important;
  margin:0 !important; padding:0 !important; text-align:left !important;
}
.class_box_pay .tc-label-wrap > .tc-col.tc-label.tm-label,
.class_box_pay .tc-label-wrap > .tc-epo-style-wrapper{ align-self:start !important; }

/* тема ховає інпут через position:absolute + transform — скидаємо */
.class_box_pay .tc-label-wrap .tc-epo-style-wrapper{
  position:static !important; transform:none !important; top:auto !important;
  margin:0 !important; padding:0 !important; display:block !important;
}
.class_box_pay .tc-input-wrap{
  display:flex !important; line-height:0 !important; font-size:0 !important;
  margin:0 !important; padding:0 !important;
}
.class_box_pay .tc-epo-style-wrapper .tc-label.tm-epo-style{ display:none !important; }
.class_box_pay .tc-label-wrap .tc-epo-style-wrapper .tc-input-wrap input.tmcp-field.pay-radio-choice{
  position:static !important; transform:none !important;
  top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
  vertical-align:top !important;
}

/* тема фарбує активний label — гасимо високою специфічністю */
.class_box_pay ul.pay-radio-choice-ul li.tmcp-field-wrap label.tc-col.tm-epo-field-label.fullwidth,
.class_box_pay ul.pay-radio-choice-ul li.tmcp-field-wrap.tc-active label.tc-col.tm-epo-field-label.fullwidth{
  position:relative !important; display:block !important;
  background:transparent none !important; border:0 !important; box-shadow:none !important;
  border-radius:0 !important; margin:0 !important; padding:9px 0 !important; cursor:pointer;
}

/* ===== Радіо ===== */
.class_box_pay input.pay-radio-choice{
  -webkit-appearance:none; appearance:none; opacity:1 !important;
  box-sizing:border-box !important;
  width:20px !important; height:20px !important; margin:0 !important;
  border:2px solid #c8cdd6 !important; border-radius:50% !important; background:#fff !important;
  cursor:pointer; display:grid !important; place-content:center !important;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.class_box_pay input.pay-radio-choice::after{
  content:''; width:10px; height:10px; border-radius:50%; background:var(--pay-accent);
  transform:scale(0); transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.class_box_pay input.pay-radio-choice:checked{
  border-color:var(--pay-accent) !important;
  box-shadow:0 0 0 3px rgba(242,118,12,.18) !important;
}
.class_box_pay input.pay-radio-choice:checked::after{ transform:scale(1); }
.class_box_pay input.pay-radio-choice:focus-visible{
  box-shadow:0 0 0 4px rgba(242,118,12,.3) !important;
}

/* ===== Тексти опцій ===== */
.class_box_pay .tc-label-text{
  display:block !important; font-weight:500 !important; font-size:.95em;
  line-height:1.35; color:#23272e;
}
.class_box_pay li.tmcp-field-wrap.is-pay-on .tc-label-text,
.class_box_pay li.tmcp-field-wrap.tc-active .tc-label-text{ font-weight:700 !important; }
.class_box_pay .pay-choice-desc{
  display:block; margin-top:3px !important; font-size:.76em; line-height:1.4;
  font-weight:400; color:#9096a0;
}

/* ===== Смуга кроків ===== */
.class_box_pay .pay-steps{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  margin:12px 18px 18px; padding:11px 14px; box-sizing:border-box;
  background:var(--pay-soft); border-radius:9px;
}
.class_box_pay .pay-step{ display:flex; align-items:center; gap:8px; min-width:0; }
.class_box_pay .pay-step > svg{ width:26px; height:26px; flex:0 0 auto; }
.class_box_pay .pay-step b{
  display:block; font-size:13px; font-weight:700; color:#23272e; line-height:1.15; white-space:nowrap;
}
.class_box_pay .pay-step span{
  display:block; margin-top:1px; font-size:11px; color:#9096a0; line-height:1.15; white-space:nowrap;
}
.class_box_pay .pay-arrow{ width:18px; height:18px; flex:0 0 auto; color:#c9c4bc; }

/* ===== Мобільний ===== */
@media (max-width:600px){
  .class_box_pay .pay-head{ padding:12px 14px; gap:10px; }
  .class_box_pay .pay-head > .pay-head-ico{ width:30px; height:30px; }
  .class_box_pay .pay-head > .pay-head-ico > svg{ width:17px; height:17px; }
  .class_box_pay .tc-section-fields{ padding:10px 14px 0 !important; }
  .class_box_pay .pay-steps{
    flex-direction:column; align-items:stretch; gap:7px; margin:10px 14px 14px; padding:11px;
  }
  .class_box_pay .pay-arrow{ transform:rotate(90deg); align-self:center; }
}

/* Four payment steps within the existing design. */
.class_box_pay{container-type:inline-size;container-name:payment-choice;}
@container payment-choice (max-width:580px){
.class_box_pay .pay-steps{flex-direction:row;align-items:center;gap:4px;margin-left:0;margin-right:0;}
.class_box_pay .pay-step{flex:1;flex-direction:column;text-align:center;gap:5px;}
.class_box_pay .pay-step b{font-size:12px;white-space:normal;}
.class_box_pay .pay-step span{white-space:normal;}
.class_box_pay .pay-arrow{width:14px;height:14px;transform:none;align-self:center;}
}
@container payment-choice (max-width:400px){
.class_box_pay .pay-steps{flex-direction:column;align-items:stretch;gap:7px;}
.class_box_pay .pay-step{flex-direction:row;text-align:left;gap:8px;}
.class_box_pay .pay-arrow{transform:rotate(90deg);}
}