/* calculator section — outer .calculator is the scope root; generic inner names (.lbl,
   .grid, .card, .pill, .btn, .form, .inp, .step …) all scoped under .calculator.
   NB: root class is .calculator (NOT .calc) — .calc belongs to the hero ceo-form;
   sharing it bled this section's 140px padding onto the hero form.
   Skipped: *, html/body resets (tokens.css / hero.css already cover them).
   Design source: design/leaves/glavnaya/04-calculator.html */

/* full-bleed beige background; content re-centred via .grid (max 1160 = 787+40+333) */
.calculator{width:100%;background:#F4F0ED;padding:110px 140px;overflow:clip}

.calculator__title{font-size:38px;line-height:41.8px;font-weight:400;color:#333333;max-width:570px;margin-bottom:48px}

/* section labels (uppercase) 12/16.8 ls1.2 #333 */
.calculator .lbl{font-size:12px;line-height:16.8px;letter-spacing:1.2px;font-weight:400;color:#333333;text-transform:uppercase}

/* layout: left controls+services (763) · gap40 · right summary+form (367) */
.calculator .grid{display:flex;gap:40px;align-items:flex-start;max-width:1160px;margin-inline:auto}
.calculator .col-l{width:787px;flex:none}
.calculator .col-r{width:333px;flex:none;display:flex;flex-direction:column}

/* selectors row: Количество комнат (pills) + Тип уборки (3 pills) */
.calculator .selectors{display:flex;gap:16px;align-items:flex-start}
.calculator .field-rooms{flex:none}
.calculator .field-type{flex:1;min-width:0}
.calculator .field .lbl{display:block;line-height:120%;margin-bottom:13px}
.calculator .field .lbl--q{display:flex;align-items:center;gap:8px}

/* room pills — 50px circles, 8px gap; selected #333/white */
.calculator .pills{display:flex;gap:8px}
.calculator .pill{width:50px;height:50px;border-radius:50px;display:flex;align-items:center;justify-content:center;
      font-size:15px;line-height:1;font-weight:400;background:#FFFFFF;color:#333333;
      border:0;cursor:pointer;font-family:inherit}
.calculator .pill--on{background:#333333;color:#FFFFFF}

/* type selector — 3 pills */
.calculator .typesel{display:flex;flex-wrap:wrap;gap:8px}
.calculator .typepill{display:inline-flex;align-items:center;gap:6px;height:50px;padding:0 16px;border-radius:50px;white-space:nowrap;
          background:#FFFFFF;color:#333333;font-size:15px;line-height:1;border:0;cursor:pointer;font-family:inherit}
.calculator .typepill--on{background:#333333;color:#FFFFFF}

/* ?-badge */
.calculator .qbadge{width:20px;height:20px;flex:none}
.calculator .typepill--on .qbadge{filter:invert(1) brightness(2)}

/* доп. услуги header row */
.calculator .addsrv{display:flex;justify-content:space-between;align-items:center;margin-top:32px}
.calculator .addsrv .lbl{font-size:12px;line-height:14.4px}
.calculator .clear{display:inline-flex;align-items:center;height:36px;font-size:14px;color:#333333;background:#FFFFFF;
       border-radius:40px;padding:0 16px;border:0;cursor:pointer;font-family:inherit}

/* services card — white r24, 1px row dividers #D6D0CD */
.calculator .card{background:#FFFFFF;border-radius:24px;margin-top:16px;padding:12px 0 18px}
.calculator .srow{display:flex;align-items:center;height:56px;padding:0 30px;border-top:1px solid #D6D0CD}
.calculator .srow:first-child{border-top:0}
.calculator .srow__txt{display:contents}
.calculator .srow__nm{font-size:15px;line-height:22.8px;color:#333333;width:289px;flex:none}
.calculator .srow__pr{font-size:14px;line-height:19.6px;color:#B5B0AC;flex:1}
.calculator .stepper{display:flex;align-items:center;gap:4px;flex:none}
.calculator .step{width:32px;height:32px;border-radius:60px;background:#F4F0ED;border:0;cursor:pointer;
      display:flex;align-items:center;justify-content:center;color:#333333;font-size:18px;line-height:1;font-family:inherit}
.calculator .step__cnt{width:36px;text-align:center;font-size:14px;line-height:19.6px;color:#333333}
.calculator .qhelp{width:24px;height:24px;margin-left:24px;flex:none}

.calculator .add-btn{background:transparent;border:0;cursor:pointer;font-family:inherit;
         font-size:15px;line-height:22.8px;color:#333333;padding:0;flex:none}

/* selected service row — cyan steppers + full-width cyan band */
.calculator .srow--on{background:#E1FBFC}
.calculator .srow--on .step{background:#9BF0F5}

/* Свернуть / Показать все / Заказать — cyan r40 */
.calculator .btn{display:flex;align-items:center;justify-content:center;height:50px;border-radius:40px;
     background:#9BF0F5;color:#333333;font-size:15px;line-height:21px;font-weight:400;border:0;cursor:pointer;
     font-family:inherit;width:100%}
.calculator .show-all{margin-top:21px}

/* right column — summary card white r12 + form inputs */
.calculator .summary{background:#FFFFFF;border-radius:12px;padding:20px;margin-top:27px}
.calculator .summary__obj{font-size:15px;line-height:21px;color:#333333}
.calculator .summary__div{height:1px;background:#D6D0CD;margin:16px 0}
.calculator .summary__pay{display:flex;align-items:baseline;justify-content:space-between}
.calculator .summary__pay-l{font-size:20px;line-height:28px;color:#B5B0AC}
.calculator .summary__pay-v{font-size:38px;line-height:38px;color:#333333}
.calculator .summary__time{display:flex;justify-content:space-between;margin-top:16px;font-size:14px;line-height:21px;color:#B5B0AC}

/* form inputs — white r40 h50 */
.calculator .form{display:flex;flex-direction:column;gap:8px;margin-top:30px}
.calculator .inp{height:50px;border-radius:40px;background:#FFFFFF;border:0;
     display:flex;align-items:center;padding:0 20px;font-size:15px;line-height:21px}
.calculator .inp__ph{color:#B5B0AC}
.calculator .inp__val{color:#333333}
.calculator .inp--phone{padding:0;align-items:stretch}
.calculator .inp--phone .pfx{display:flex;align-items:center;padding:0 20px;color:#333333}
.calculator .inp--phone .sep{width:1px;background:#D6D0CD;flex:none}
/* real phone input replaces the static .num span in the blade */
.calculator .inp--phone .calc-phone-input{display:flex;align-items:center;padding:0 20px;color:#333333;
  background:transparent;border:0;flex:1;font-size:15px;font-family:inherit;outline:none}
.calculator .inp--phone .calc-phone-input::placeholder{color:#B5B0AC}
.calculator .inp--date{justify-content:space-between}
.calculator .inp--date img{width:16px;height:16px;transform:rotate(90deg)}
.calculator .ta{height:100px;border-radius:12px;background:#FFFFFF;border:0;padding:15px 20px;
    font-size:15px;line-height:22.8px;color:#B5B0AC}
.calculator .next{margin-top:16px}
.calculator .consent{font-size:12px;line-height:16.8px;color:#333333;margin-top:12px}
.calculator .consent .mut{color:#B5B0AC}

/* mobile-only price plate */
.calculator .paybar{display:none}
/* mobile-only «или позвоните нам» */
.calculator .tst-call{display:none}

/* ─── mobile (≤768) ─────────────────────────────────────────────────── */
@media (max-width:768px){
  .calculator .paybar{display:block;margin-top:20px}
  .calculator .paybar__sum{font-size:38px;line-height:100%;color:#333333;white-space:nowrap}
  .calculator .paybar__meta{margin-top:12px;font-size:14px;line-height:140%;color:#B5B0AC;text-transform:lowercase}
  .calculator{max-width:none;padding:32px 28px 28px}
  .calculator__title{font-size:28px;line-height:32px;margin-bottom:24px}
  .calculator .grid{flex-direction:column;gap:0}
  .calculator .col-l,.calculator .col-r{width:100%}
  .calculator .selectors{flex-direction:column;gap:24px}
  .calculator .field-type{order:-1}
  .calculator .clear{background:#FFFFFF}
  .calculator .addsrv{margin-top:28px}
  .calculator .card{background:#FFFFFF;border-radius:0;padding:0;margin:16px -28px 0}
  .calculator .srow{height:auto;min-height:56px;padding:8px 20px;border-top-color:#DFDCDA}
  .calculator .srow--on{padding:8px 20px;border-radius:0}
  .calculator .srow__txt{display:contents}
  .calculator .srow__nm{flex:1 1 0;min-width:0;width:auto;font-size:15px;line-height:22.8px;padding-right:8px}
  .calculator .srow__pr{flex:1 1 0;white-space:nowrap;font-size:13px;line-height:120%}
  .calculator .stepper{flex:none}
  .calculator .add-btn{flex:none}
  .calculator .qhelp{margin-left:12px}
  .calculator .add-btn{margin-left:12px}
  .calculator .show-all{margin-top:34px}
  .calculator .summary{display:none}
  .calculator .form{margin-top:34px}
  .calculator .paybar--cta{margin-top:20px;margin-bottom:20px}
  .calculator .next{margin-top:0}
  .calculator .tst-call{display:flex;align-items:center;justify-content:center;gap:12px;
            margin-top:16px;text-decoration:none;color:inherit}
  .calculator .tst-call__icon{flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:#7BE19C;
                  display:flex;align-items:center;justify-content:center}
  .calculator .tst-call__text{display:flex;flex-direction:column;text-align:center}
  .calculator .tst-call__label{font-size:14px;line-height:140%;color:#B5B0AC}
  .calculator .tst-call__phone{font-size:16px;line-height:140%;font-weight:500;color:#333333}
  .calculator .consent{display:none}
}