/* Карточка пополнения (как на лендинге) — для страницы «Цены» */
/* ---- цены: ползунок суммы ---- */
.pr-card {
    display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 0;
    max-width: 1060px; margin: 0 auto; border-radius: 28px; overflow: hidden; background: #fff;
    border: 1px solid var(--moss-2, #eaede8);
    box-shadow: 0 40px 90px -50px rgba(12,20,16,.45), 0 2px 8px rgba(12,20,16,.04);
}
.pr-main { padding: clamp(24px, 3.4vw, 44px); position: relative; }
.pr-main::before { content: ''; position: absolute; width: 380px; height: 380px; right: -120px; top: -160px; border-radius: 50%; pointer-events: none;
                   background: radial-gradient(closest-side, rgba(52,211,153,.18), transparent); }
.pr-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.pr-label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-5, #5c6862); }
.pr-amount { margin-top: 6px; font-size: clamp(40px, 5.4vw, 64px); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--ink, #0c1410);
             font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-bonus { flex: none; margin-top: 4px; padding: 8px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 800; white-space: nowrap;
            background: linear-gradient(135deg, #0b7d57, #16b07a); color: #fff; box-shadow: 0 10px 22px -10px rgba(11,125,87,.7);
            transition: transform .2s; }
.pr-bonus.zero { background: var(--moss-2, #eaede8); color: var(--gray-5, #5c6862); box-shadow: none; }
.pr-bonus.bump { transform: scale(1.08); }
.pr-range { position: relative; margin: 26px 0 8px; }
.pr-range input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 34px; margin: 0; background: transparent; cursor: pointer; }
.pr-range input:focus { outline: none; }
.pr-range input::-webkit-slider-runnable-track { height: 10px; border-radius: 99px;
    background: linear-gradient(90deg, #0b7d57, #34d399 calc(var(--p) * .9), #34d399 var(--p), #e3e8e2 var(--p)); }
.pr-range input::-moz-range-track { height: 10px; border-radius: 99px; background: #e3e8e2; }
.pr-range input::-moz-range-progress { height: 10px; border-radius: 99px; background: linear-gradient(90deg, #0b7d57, #34d399); }
.pr-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -10px; border-radius: 50%;
    background: #fff; border: 3px solid #0b7d57; box-shadow: 0 6px 16px -4px rgba(11,125,87,.6), 0 0 0 6px rgba(11,125,87,.12); transition: transform .15s; }
.pr-range input::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid #0b7d57;
    box-shadow: 0 6px 16px -4px rgba(11,125,87,.6), 0 0 0 6px rgba(11,125,87,.12); }
.pr-range input:active::-webkit-slider-thumb { transform: scale(1.12); }
.pr-range input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px #fff, 0 0 0 7px #0b7d57; }
.pr-ticks { position: relative; height: 22px; margin-top: 6px; }
.pr-ticks button { position: absolute; top: 0; left: calc(15px + (100% - 30px) * var(--i) / 6); transform: translateX(-50%); white-space: nowrap;
                   border: 0; background: none; padding: 4px 2px; cursor: pointer; font: 600 12px/1 'Manrope', sans-serif; color: var(--gray-5, #5c6862);
                   font-variant-numeric: tabular-nums; transition: color .15s; }
.pr-ticks button:first-child { transform: translateX(-15px); }
.pr-ticks button:last-child { transform: translateX(calc(-100% + 15px)); }
.pr-ticks button:hover, .pr-ticks button.on { color: #0b7d57; }
.pr-ticks button.on { font-weight: 800; }
.pr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.pr-stat { padding: 14px 14px 13px; border-radius: 16px; background: var(--moss-1, #f6f7f4); border: 1px solid var(--moss-2, #eaede8); min-width: 0; }
.pr-stat b { display: block; font-size: clamp(20px, 2.3vw, 27px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; color: var(--ink, #0c1410);
             font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-stat:first-child b { color: #0b7d57; }
.pr-stat span { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.3; color: var(--gray-5, #5c6862); }
.pr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pr-free, .pr-buy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 22px; border-radius: 14px;
                    font-size: 15px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; transition: transform .15s, box-shadow .15s, background .15s; }
.pr-free { flex: 1 1 220px; background: linear-gradient(180deg, #0f9367, #0b7d57); color: #fff !important;
           box-shadow: 0 14px 28px -14px rgba(11,125,87,.9), inset 0 1px 0 rgba(255,255,255,.2); }
.pr-free:hover { transform: translateY(-1px); box-shadow: 0 20px 34px -16px rgba(11,125,87,.95), inset 0 1px 0 rgba(255,255,255,.2); }
.pr-buy { flex: 1 1 200px; background: #fff; color: var(--ink, #0c1410) !important; border: 1.5px solid var(--moss-3, #dce1db); }
.pr-buy:hover { border-color: #0b7d57; transform: translateY(-1px); }
.pr-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--gray-5, #5c6862); }
.pr-note b { color: var(--ink, #0c1410); }
.pr-side { padding: clamp(24px, 3vw, 38px); background: linear-gradient(160deg, #0f1f18, #0c1410 60%); color: #fff; position: relative; overflow: hidden; }
.pr-side::after { content: ''; position: absolute; left: -80px; bottom: -120px; width: 300px; height: 300px; border-radius: 50%; pointer-events: none;
                  background: radial-gradient(closest-side, rgba(11,125,87,.45), transparent); }
.pr-side-h { position: relative; font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 14px; }
.pr-side-h span { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.5); margin-left: 6px; letter-spacing: 0; }
.pr-costs { position: relative; list-style: none; margin: 0; padding: 0; }
.pr-costs li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08);
               font-size: 14px; color: rgba(255,255,255,.78); }
.pr-costs li b { flex: none; min-width: 34px; padding: 4px 8px; border-radius: 8px; text-align: center; background: rgba(255,255,255,.08); color: #fff;
                 font: 800 13px/1 'Manrope', sans-serif; font-variant-numeric: tabular-nums; }
.pr-costs li.zero b { background: #34d399; color: #04261a; }
.pr-side-foot { position: relative; margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.55); }

@media (max-width: 900px) {
    .pr-card { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
}
@media (max-width: 640px) {
    .pr-card { border-radius: 22px; }
    .pr-main { padding: 22px 18px 20px; }
    .pr-label { font-size: 11.5px; }
    .pr-bonus { padding: 7px 11px; font-size: 12.5px; }
    .pr-range { margin-top: 18px; }
    .pr-ticks button { font-size: 10.5px; padding: 4px 0; }
    .pr-ticks button:nth-child(2), .pr-ticks button:nth-child(6) { visibility: hidden; }
    .pr-stats { gap: 6px; margin-top: 16px; }
    .pr-stat { padding: 11px 10px 10px; border-radius: 13px; }
    .pr-stat b { font-size: 19px; }
    .pr-stat span { font-size: 11px; }
    .pr-actions { margin-top: 16px; }
    .pr-free, .pr-buy { flex: 1 1 100%; height: 50px; }
    .pr-side { padding: 22px 18px; }
    .pr-costs li { font-size: 13.5px; padding: 9px 0; }
}
@media (max-width: 400px) {
    .pr-ticks button:nth-child(4) { visibility: hidden; }
}
@media (max-width: 340px) {
    .pr-stats { grid-template-columns: 1fr 1fr; }
    .pr-stat:last-child { grid-column: span 2; }
}

/* поле «Сумма пополнения» */
.pr-sum { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px;
          padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--moss-1, #f6f7f4); border: 1px solid var(--moss-2, #eaede8); }
.pr-sum-label { font-size: 14px; font-weight: 650; color: #4b5650; }
.pr-sum-box { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 12px; background: #fff;
              border: 1.5px solid var(--moss-3, #dce1db); transition: border-color .15s, box-shadow .15s; }
.pr-sum-box:focus-within { border-color: #0b7d57; box-shadow: 0 0 0 4px rgba(11, 125, 87, .12); }
.pr-sum-box input { width: 118px; border: 0; outline: 0; background: transparent; text-align: right; color: var(--ink, #0c1410);
                    font-family: inherit; font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; -moz-appearance: textfield; }
.pr-sum-box input::-webkit-outer-spin-button, .pr-sum-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pr-sum-box span { font-size: 16px; font-weight: 700; color: #6b7570; }
.pr-pay { flex: 1 1 100%; border: 0; cursor: pointer; font: inherit; font-size: 16px; font-weight: 800; }
.pr-pay .price-old { opacity: .6; text-decoration: line-through; font-weight: 600; margin-left: 8px; font-size: .85em; }
@media (max-width: 640px) {
    .pr-sum { padding: 9px 9px 9px 14px; }
    .pr-sum-label { font-size: 13px; }
    .pr-sum-box { padding: 7px 12px; }
    .pr-sum-box input { width: 96px; font-size: 18px; }
}