Калькулятор стоимости проживания в загородном доме

<section class="vbksz">
  <div class="vbksz-wrap">
    <div class="vbksz-head">
      <h2 class="vbksz-h2">Посчитайте стоимость проживания</h2>
      <p class="vbksz-lead">Задайте число гостей, срок и дни недели, отметьте баню и завтраки. Справа появится смета с итогом, ценой за ночь и залогом.</p>
    </div>

    <div class="vbksz-grid">
      <div class="vbksz-panel">
        <div class="vbksz-pair">
          <div class="vbksz-step">
            <span class="vbksz-lbl">Гостей</span>
            <div class="vbksz-cnt">
              <button type="button" data-t="guests" data-d="-1" aria-label="Меньше гостей">-</button>
              <b id="vbksz-guests">4</b>
              <button type="button" data-t="guests" data-d="1" aria-label="Больше гостей">+</button>
            </div>
            <i class="vbksz-sub" id="vbksz-cap">до 4 гостей входит в базовую цену</i>
          </div>
          <div class="vbksz-step">
            <span class="vbksz-lbl">Ночей</span>
            <div class="vbksz-cnt">
              <button type="button" data-t="nights" data-d="-1" aria-label="Меньше ночей">-</button>
              <b id="vbksz-nights">2</b>
              <button type="button" data-t="nights" data-d="1" aria-label="Больше ночей">+</button>
            </div>
            <i class="vbksz-sub" id="vbksz-disc">от трёх ночей цена суток ниже</i>
          </div>
        </div>

        <div class="vbksz-ctl">
          <span class="vbksz-lbl">Какие дни</span>
          <div class="vbksz-seg" id="vbksz-seg" role="group" aria-label="Дни недели">
            <button type="button" class="vbksz-sg vbksz-sg--on" data-v="week">Будни, с воскресенья по четверг</button>
            <button type="button" class="vbksz-sg" data-v="weekend">Выходные и праздники</button>
          </div>
        </div>

        <div class="vbksz-ctl">
          <span class="vbksz-lbl">Что добавить</span>
          <div class="vbksz-opts">
            <label class="vbksz-opt">
              <input type="checkbox" data-t="banya" checked>
              <span class="vbksz-opt__b">
                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 21V11l7-5 7 5v10z"/><path d="M9.5 16c0-1.5 1.5-2 1.5-3.5M14 16c0-1.5 1.5-2 1.5-3.5"/></g></svg>
                <b>Баня с парной</b><i>три часа вечером, дрова наши</i>
              </span>
            </label>
            <label class="vbksz-opt">
              <input type="checkbox" data-t="mangal" checked>
              <span class="vbksz-opt__b">
                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 13h12l-1.6 7H7.6z"/><path d="M9.5 10c0-1.6 1.5-2.2 1.5-3.8M14 10c0-1.6 1.5-2.2 1.5-3.8M4 13h16"/></g></svg>
                <b>Мангальный набор</b><i>уголь, решётка, шампуры</i>
              </span>
            </label>
            <label class="vbksz-opt">
              <input type="checkbox" data-t="food">
              <span class="vbksz-opt__b">
                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5v6a3 3 0 0 0 6 0V5M7 11v8"/><path d="M17 19V5c-2 .8-3 2.6-3 5.2 0 1.6.9 2.6 3 2.8"/></g></svg>
                <b>Завтраки</b><i>привозим к 9 утра на каждого гостя</i>
              </span>
            </label>
            <label class="vbksz-opt">
              <input type="checkbox" data-t="late">
              <span class="vbksz-opt__b">
                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></g></svg>
                <b>Поздний выезд</b><i>до 18:00 вместо полудня</i>
              </span>
            </label>
          </div>
        </div>
      </div>

      <div class="vbksz-res">
        <ul class="vbksz-rows" id="vbksz-rows"></ul>
        <div class="vbksz-out">
          <div><span>Цена за ночь</span><b id="vbksz-per">0 ₽</b></div>
          <div><span>Залог</span><b id="vbksz-dep">0 ₽</b></div>
          <div class="vbksz-out--sum"><span>Итого за проживание</span><b id="vbksz-sum">0 ₽</b></div>
        </div>
        <p class="vbksz-note">Залог берём при заезде и возвращаем после осмотра дома. Расчёт ориентировочный, точную сумму подтверждает администратор при бронировании.</p>
      </div>
    </div>
  </div>
</section>

<style>
.vbksz, .vbksz *, .vbksz *::before, .vbksz *::after { box-sizing: border-box; }
.vbksz {
  --acc: #4f7d43; --acc-dark: #3d6434; --ink: #1d2a20; --muted: #62755f; --line: #dfe7d8; --soft: #f4f8ef; --deep: #22301f;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: #fff; color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbksz-wrap { max-width: 1160px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbksz-head { max-width: 44em; margin-bottom: clamp(22px, 3vw, 36px); }
.vbksz-h2 { font-family: var(--fh); font-size: clamp(25px, 3.3vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -.022em; margin: 0 0 12px; }
.vbksz-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }

.vbksz-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 16px; align-items: start; }
.vbksz-panel { background: var(--soft); border-radius: 22px; padding: clamp(20px, 2.4vw, 28px); }
.vbksz-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 22px; }
.vbksz-lbl { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 9px; }
.vbksz-cnt { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 6px; }
.vbksz-cnt button { flex: 0 0 42px; height: 42px; -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0;
  cursor: pointer; border-radius: 9px; background: var(--soft) !important; color: var(--ink) !important; font: inherit; font-size: 22px; }
.vbksz-cnt button:hover { background: #e6efdc !important; }
.vbksz-cnt b { flex: 1 1 auto; text-align: center; font-family: var(--fh); font-size: 20px; font-weight: 700; }
.vbksz-sub { display: block; font-style: normal; font-size: 11.5px; line-height: 1.45; color: #8a9a86; margin-top: 7px; }

.vbksz-ctl { margin-bottom: 22px; }
.vbksz-ctl:last-child { margin-bottom: 0; }
.vbksz-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 5px; }
.vbksz-sg { -webkit-appearance: none; appearance: none; margin: 0; padding: 13px 12px; border: 0; cursor: pointer; border-radius: 9px;
  font: inherit; font-size: 13.5px; line-height: 1.3; background: transparent !important; color: var(--muted) !important; transition: .18s ease; }
.vbksz-sg:hover { color: var(--ink) !important; }
.vbksz-sg--on, .vbksz-sg--on:hover { background: var(--acc) !important; color: #fff !important; font-weight: 600; }

.vbksz-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.vbksz-opt { display: block; cursor: pointer; }
.vbksz-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.vbksz-opt__b { display: block; height: 100%; background: #fff; border: 1.5px solid var(--line); border-radius: 15px; padding: 14px 16px; transition: .18s ease; }
.vbksz-opt__b svg { width: 22px; height: 22px; color: var(--muted); margin-bottom: 6px; }
.vbksz-opt__b b { display: block; font-size: 14.5px; font-weight: 600; }
.vbksz-opt__b i { display: block; font-style: normal; font-size: 12px; line-height: 1.45; color: var(--muted); margin-top: 3px; }
.vbksz-opt input:checked + .vbksz-opt__b { border-color: var(--acc); background: #eef5e6; }
.vbksz-opt input:checked + .vbksz-opt__b svg { color: var(--acc); }
.vbksz-opt input:focus + .vbksz-opt__b { outline: 2px solid var(--acc); outline-offset: 2px; }

.vbksz-res { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: clamp(20px, 2.4vw, 28px); }
.vbksz-rows { list-style: none; margin: 0 0 20px; padding: 0; }
.vbksz-rows li { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.vbksz-rows li span { color: var(--muted); font-size: 12.5px; }
.vbksz-rows li b { margin-left: auto; font-weight: 600; white-space: nowrap; }
.vbksz-rows li.vbksz-minus b { color: var(--acc); }

.vbksz-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.vbksz-out div { background: var(--soft); border-radius: 14px; padding: 15px 17px; }
.vbksz-out span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.vbksz-out b { font-family: var(--fh); font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.vbksz-out--sum { grid-column: 1 / -1; background: var(--deep) !important; }
.vbksz-out--sum span { color: #a8bba4; }
.vbksz-out--sum b { color: #b6dc8c; font-size: clamp(24px, 2.6vw, 30px); }
.vbksz-note { margin: 16px 0 0; font-size: 12px; line-height: 1.55; color: #8a9a86; }

@media (max-width: 860px) { .vbksz-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .vbksz * { transition: none !important; } }
</style>

<script>
(function () {
  /* ── ТАРИФЫ И КОЭФФИЦИЕНТЫ ── */
  var RATES = {
    base: 6900,        /* сутки за дом с четырьмя гостями */
    included: 4,       /* гостей в базовой цене */
    guest: 900,        /* доплата за следующего гостя */
    weekend: 1.35,     /* наценка на пятницу и субботу */
    long3: 0.92,       /* сутки от трёх ночей */
    long5: 0.85,       /* сутки от пяти ночей */
    banya: 2500,       /* топка бани за вечер */
    mangal: 800,       /* мангальный набор за заезд */
    food: 590,         /* завтрак на гостя за утро */
    late: 1900,        /* поздний выезд за заезд */
    deposit: 5000,     /* возвратный залог */
    maxGuests: 12, maxNights: 14
  };

  var roots = document.querySelectorAll('.vbksz');
  for (var i = 0; i < roots.length; i++) init(roots[i]);

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var st = { guests: 4, nights: 2, when: 'week', banya: 1, mangal: 1, food: 0, late: 0 };
    var rows = root.querySelector('#vbksz-rows');

    function fmt(n) { return String(Math.round(n / 10) * 10).replace(/\B(?=(\d{3})+(?!\d))/g, ' ') + ' ₽'; }
    function nw(n) { return n === 1 ? 'ночь' : (n > 1 && n < 5 ? 'ночи' : 'ночей'); }
    function gw(n) { return n === 1 ? 'гостя' : 'гостей'; }

    var cnt = root.querySelectorAll('.vbksz-cnt button');
    for (var c = 0; c < cnt.length; c++) {
      cnt[c].addEventListener('click', function () {
        var t = this.getAttribute('data-t'), d = +this.getAttribute('data-d');
        var top = t === 'guests' ? RATES.maxGuests : RATES.maxNights;
        st[t] = Math.max(1, Math.min(top, st[t] + d));
        render();
      });
    }

    var segs = root.querySelectorAll('.vbksz-sg');
    for (var s = 0; s < segs.length; s++) {
      segs[s].addEventListener('click', function () {
        for (var k = 0; k < segs.length; k++) segs[k].className = 'vbksz-sg';
        this.className = 'vbksz-sg vbksz-sg--on';
        st.when = this.getAttribute('data-v');
        render();
      });
    }

    var boxes = root.querySelectorAll('.vbksz-opt input');
    for (var b = 0; b < boxes.length; b++) {
      boxes[b].addEventListener('change', function () {
        st[this.getAttribute('data-t')] = this.checked ? 1 : 0;
        render();
      });
    }

    function render() {
      var extra = Math.max(0, st.guests - RATES.included);
      var night = RATES.base + extra * RATES.guest;
      if (st.when === 'weekend') night = night * RATES.weekend;
      var disc = st.nights >= 5 ? RATES.long5 : (st.nights >= 3 ? RATES.long3 : 1);
      var nightCut = night * disc;
      var live = nightCut * st.nights;

      var out = '<li><span>Дом на ' + st.nights + ' ' + nw(st.nights) + ', ' + st.guests + ' ' + gw(st.guests) +
        '<\/span><b>' + fmt(night * st.nights) + '<\/b><\/li>';
      if (disc < 1) {
        out += '<li class="vbksz-minus"><span>Скидка за срок, ' + Math.round((1 - disc) * 100) +
          ' процентов<\/span><b>минус ' + fmt(night * st.nights - live) + '<\/b><\/li>';
      }
      var sum = live;
      if (st.banya) { var bn = RATES.banya * st.nights; sum += bn; out += '<li><span>Баня, ' + st.nights + ' ' + nw(st.nights) + '<\/span><b>' + fmt(bn) + '<\/b><\/li>'; }
      if (st.mangal) { sum += RATES.mangal; out += '<li><span>Мангальный набор<\/span><b>' + fmt(RATES.mangal) + '<\/b><\/li>'; }
      if (st.food) { var fd = RATES.food * st.guests * st.nights; sum += fd; out += '<li><span>Завтраки на ' + st.guests + ' ' + gw(st.guests) + '<\/span><b>' + fmt(fd) + '<\/b><\/li>'; }
      if (st.late) { sum += RATES.late; out += '<li><span>Поздний выезд до 18:00<\/span><b>' + fmt(RATES.late) + '<\/b><\/li>'; }

      rows.innerHTML = out;
      root.querySelector('#vbksz-guests').textContent = st.guests;
      root.querySelector('#vbksz-nights').textContent = st.nights;
      root.querySelector('#vbksz-sum').textContent = fmt(sum);
      root.querySelector('#vbksz-per').textContent = fmt(sum / st.nights);
      root.querySelector('#vbksz-dep').textContent = fmt(RATES.deposit);
      root.querySelector('#vbksz-cap').textContent = extra
        ? 'Доплата за ' + extra + ' ' + gw(extra) + ' сверх четверых, по ' + fmt(RATES.guest) + ' за ночь'
        : 'До четырёх гостей входит в базовую цену';
      root.querySelector('#vbksz-disc').textContent = disc < 1
        ? 'Скидка ' + Math.round((1 - disc) * 100) + ' процентов уже в расчёте'
        : 'От трёх ночей цена суток становится ниже';
    }

    render();
  }
})();
</script>

Вставляется целиком в блок T123 «HTML-код». Внутри уже есть стили и скрипт, подключать ничего не нужно.