/* Єдиний темний стиль калькуляторів (Андрій, 01.11.2026): як симулятор автоматики. Окремий файл, бо calc.css генерується. */
.calc{
  --c-chart-bar:#3aa8f5; --c-chart-grid:#2e4356;
  --c-ground:#0f1b26; --c-card:#16232f; --c-ink:#edf3f8; --c-ink-soft:#9fb2c3;
  --c-line:#2e4356; --c-line-strong:#44607a;
  --c-lime:#d4e534; --c-lime-ink:#1d1f06;
  --c-good:#3ddc97; --c-warn:#ffc24b; --c-bad:#ff6257;
  --c-shadow:none;
  background:#0e1720; color:var(--c-ink); color-scheme:dark; padding-block:0 28px;
}
.calc a{ color:#8fd0ff }
.calc input, .calc select, .calc textarea{ color:var(--c-ink); background:var(--c-ground); border-color:var(--c-line-strong) }
.calc input::placeholder{ color:#6f8599 }
.calc .field label{ color:var(--c-ink) }
.calc .field .hint, .calc .hint{ font-family:var(--c-body); font-weight:400 }

/* вкладки лишаються світлими й лаймовими, темна підкладка починається під ними (Андрій, 01.11.2026) */
.calc .calc-tabs{ position:relative; background:#fff; box-shadow:0 0 0 100vmax #fff; clip-path:inset(-20px -100vmax -20px -100vmax); margin-bottom:38px }
.calc a.calc-tab{ background:var(--lime-soft); border-color:var(--lime-dark); color:#202020 }
.calc a.calc-tab:hover{ background:var(--lime); border-color:var(--lime-dark); color:#202020 }
.calc a.calc-tab small{ color:#6b6b0f }
.calc .calc-tab.is-active{ background:#202020; border-color:#202020; color:#fff }
.calc .calc-tab.is-soon{ background:transparent; border-color:#c9c9c9; color:#7a7a7a }

/* перемикачі */
.calc .seg button{ background:#0f1b26; border-color:var(--c-line); color:var(--c-ink) }
.calc .seg button.on{ background:#123a58; border-color:#3aa8f5; color:#fff }
.calc .result{ background:#101e2b; border-top-color:var(--c-line) }

/* насос: графік і схема */
.nz-old,.nz-old-ext,.nz-halo{ stroke:#edf3f8 }
.nz-dot{ stroke:#edf3f8 }
.nz-wp{ stroke:#0e1720 }
.nz-wp-in{ fill:#0e1720 }
#calc-pump .nz-chk input{ accent-color:#d4e534 }
#calc-pump .nz-chk i{ border-color:#edf3f8 }
#calc-pump .nw-in{ color:#3ddc97 }
#calc-pump .nw-cab,#calc-pump .nz-phs.is-err,#calc-pump .field.need label{ color:#ffc24b }

/* тепловентилятори */
.calc .tv-del{ color:#9fb2c3 }
.calc #tv-out h3{ color:#8fd0ff }
.calc .tv-kpi div{ background:#0f1b26 }
.calc .tv-kpi span,.calc .tv-note,.calc .tv-t small,.calc .tv-box .field label small{ color:#9fb2c3 }
.calc .tv-t th{ background:#123a58 }
.calc .tv-t td{ border-bottom-color:#2e4356 }
.calc .tv-bad{ color:#ff6257 }
.calc .tv-warn{ background:#3d3112; color:#ffe2a0 }

/* решта світлих місць */
#af-res{ background:#101e2b !important }
.calc label{ color:var(--c-ink) }
.calc .kpx-note{ color:var(--c-ink-soft) }
.calc .tpc-drop:hover,.calc .tpc-drop.is-over{ background:#123a58 }
.calc .tpc-chan button{ background:#0f1b26; color:var(--c-ink) }
.calc .tpc-chan button.is-on{ background:#123a58; border-color:#3aa8f5; color:#fff }

/* компактні форми: пояснення за «i», додаткові поля згорнуті */
.calc .form{ padding:12px }
.calc .field{ gap:4px; min-width:0 }
.calc input[type=number], .calc input[type=text], .calc select{ padding:9px 10px; font-size:16px; min-height:42px }
.calc .ci-i{ flex:none; width:20px; height:20px; border-radius:50%; border:0; background:var(--c-lime); color:var(--c-lime-ink); font:700 12px/20px Georgia,serif; padding:0; cursor:pointer }
.calc .ci-tip{ font-family:var(--c-body); font-weight:400; grid-column:1/-1; background:#0f1b26; border:1px solid #3aa8f5; border-radius:8px; padding:8px 10px; font-size:13px; line-height:1.35; color:var(--c-ink) }
.calc .ci-more{ margin-top:10px; border:1px solid var(--c-line); border-radius:10px; padding:8px 10px; background:#101e2b }
.calc .ci-more>summary{ font-weight:700; font-size:14px; cursor:pointer }
.calc .ci-more>.grid{ margin-top:10px }
.calc .nw-tip{ display:none }
.calc .seg button{ padding:8px 10px; font-size:13px }
@media(max-width:380px){ .calc .seg button{ padding:8px } }
@media(max-width:900px){ .calc .tv-wrap{ display:block !important; width:100% } .calc .tv-wrap>*{ min-width:0; max-width:100% } .calc .card.form{ max-width:100%; min-width:0 } }

/* стандарт поля: рівні комірки, підпис у два рядки, контрол однакової висоти */
.calc .grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; align-items:end }
.calc .field{ justify-content:flex-end }
.calc .field>label,.calc .field>.lab{ display:flex; align-items:flex-end; justify-content:space-between; gap:6px; font-size:13px; line-height:1.2; min-height:32px }
.calc .field input[type=number],.calc .field input[type=text],.calc .field select{ height:44px; min-height:44px; padding:0 10px; font-size:15px; width:100%; text-overflow:ellipsis }
.calc .field:has(.ci-tip:not([hidden])){ grid-column:1/-1 }

/* насос: вкладки підбір / симулятор */
.calc .pump-sub{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 14px }
.calc .pump-sub button{ font:700 15px var(--c-body); min-height:46px; border-radius:10px; border:1px solid var(--c-line); background:#0f1b26; color:var(--c-ink); cursor:pointer }
.calc .pump-sub button.on{ background:#e9ef5b; border-color:#e9ef5b; color:#14181c }   /* головні вкладки лаймові, як у симуляторах (Андрій, 02.11.2026) */
/* другий рівень вибору видно з першого погляду: рамка, підпис, позначка */
#ps-modeB{ grid-auto-flow:row !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:8px; border:1px solid var(--c-line); border-radius:12px; background:#0f1b26 }
#ps-modeB::before{ content:'Режим симуляції, оберіть один:'; grid-column:1/-1; font-size:13px; color:#9fb2c3 }
#ps-modeB button{ min-height:38px; font-size:14px }
#ps-modeB button.on::before{ content:'✓ '; color:#7cc4f8 }
#pumpSim{ display:none }
body.sim-on #pumpSim{ display:block; margin:0; padding:0; background:none }
body.sim-on #pumpSim h2{ display:none }
body.sim-on #calc-pump .wrap>*:not(.calc-tabs):not(.pump-sub):not(#pumpSim){ display:none !important }

/* усередині калькулятора: кнопка до списку, компактна шапка */
.calc .ci-back{ display:block; width:100%; margin:14px 0; min-height:44px; border-radius:10px; border:1px solid var(--lime-dark); background:var(--lime-soft); color:#202020; font:700 15px var(--c-body); cursor:pointer }
.calc .calc-tabs:not([hidden]){ display:grid }
.calc .calc-tabs[hidden]{ display:none }
@media(max-width:760px){
  /* Андрій 08.11.2026 (перекреслив): на телефоні заголовок «Калькулятори підбору» не показуємо — лише відступ під липку шапку; h1 лишається для пошуковиків (візуально прихований) */
  .page-hero{ padding-block:calc(var(--header-h) + 6px) 0 }
  .page-hero .breadcrumbs,.page-hero p{ display:none }
  .page-hero h1{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
}
.calc .field>label,.calc .field>.lab{ justify-content:flex-start }
.calc .field>label .ci-i,.calc .field>.lab .ci-i{ margin-left:auto }
.calc .grid{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr)) }
.calc .field label .opt{ display:none }
@media(max-width:760px){ .calc .grid,#calc-pump .grid,.calc .form .grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important } }

/* перепідбір: дані старого насоса таблицею */
#calc-pump .nz-sheet{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:8px }
#calc-pump .nz-sheet div{ background:#0f1b26; border-radius:8px; padding:5px 8px; min-width:0 }
#calc-pump .nz-sheet small{ display:block; font-size:11px; color:var(--c-ink-soft) }
#calc-pump .nz-sheet b{ font-size:14px; white-space:nowrap }
@media(max-width:760px){ #calc-pump .nz-grid2{ grid-template-columns:repeat(2,minmax(0,1fr)) !important } }

/* у результаті лише потрібне клієнту */
.calc .note,.calc .foot,.calc .lead,.calc .nw-how,.calc .tv-note,.calc details.cfg{ display:none }
.calc .tv-cta{ margin:12px 0 }
.calc .tv-t{ font-size:13px; display:block; overflow-x:auto }

/* симулятор усередині #calc-pump: загальні правила форм його не чіпають */
#calc-pump #pumpSim .grid{ grid-template-columns:minmax(0,1fr) 380px !important; gap:10px; align-items:start }
@media(max-width:900px){ #calc-pump #pumpSim .grid{ grid-template-columns:minmax(0,1fr) !important } }
#calc-pump #pumpSim .seg button{ padding:6px 4px; font-size:14px; border-radius:8px }
#calc-pump #pumpSim .tabs button{ font-size:15px }
#calc-pump #pumpSim .pumpW input,#calc-pump #pumpSim .pumpW select{ min-height:38px; padding:6px 8px }

/* підбір котла: вкладки підбір / вартість */
#costPane{ display:none }
body.cost-on #costPane{ display:block }
body.cost-on .calc .wrap>*:not(.ci-back):not(.calc-tabs):not(.pump-sub):not(#costPane){ display:none !important }
#costPane .h2{ display:none }

/* вартість опалення: порівняння таблицею, спочатку результат */
#costPane>.card:first-of-type{ display:flex; flex-direction:column-reverse }
#fuels{ padding:10px 12px }
#fuels::before{ content:'Паливо · ціна за одиницю · за сезон'; display:block; font-size:12px; color:var(--c-ink-soft); margin-bottom:6px }
#picked{ font-size:13px; padding:8px 12px }
/* рядок палива: вогонь · назва й мітки · ціна · за сезон крупно (Андрій, 03.11.2026).
   Підсвічено паливо ОБРАНОГО котла (.mine), найдешевше — лише мітка, без заливки. */
#fuels .fuel{ display:grid; grid-template-columns:44px minmax(0,1fr) auto; grid-template-areas:"fire name cost" "fire price price";
  column-gap:10px; row-gap:6px; align-items:center; padding:8px 6px; border-top:1px solid var(--c-line); border-radius:0; background:none }
#fuels .fuel>*{ margin:0; min-width:0 }
#fuels .fuel.mine{ background:rgba(217,224,33,.07); box-shadow:inset 3px 0 0 #d9e021; border-radius:8px }
#fuels .fuel-fire{ grid-area:fire; width:44px; height:44px }
#fuels .fuel-fire svg{ display:block; width:44px; height:44px; overflow:visible }
#fuels .fuel-name{ grid-area:name; font-size:15px; font-weight:600 }
#fuels .fuel-name small,#fuels .fuel-use,#fuels .fuel-cost small{ display:none }
#fuels .fuel-tags{ display:flex; flex-wrap:wrap; gap:4px }
#fuels .fuel-tags b{ display:none; margin-top:3px; font:600 11px/1 var(--c-body); padding:3px 7px; border-radius:999px; white-space:nowrap }
#fuels .fuel.mine .tag-mine{ display:inline-block; background:#d9e021; color:#1d1f06 }
#fuels .fuel.best .tag-best{ display:inline-block; border:1px solid var(--c-good); color:var(--c-good); padding:2px 6px }
#fuels .fuel-price{ grid-area:price; display:flex; align-items:center; gap:6px }
#fuels .fuel-unit{ flex:none; font-size:12px; color:var(--c-ink-soft); white-space:nowrap }
#fuels .fuel-price input{ height:40px; min-height:40px; padding:0 8px; font-size:16px; width:100%; max-width:120px; min-width:0 }
#fuels .fuel-price input[data-extra]{ max-width:90px }
#fuels .fuel-cost{ grid-area:cost; font:800 19px/1.1 var(--c-display); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums }
#fuels .fuel.mine .fuel-cost{ color:#d9e021 }
@media(min-width:700px){
  #fuels .fuel{ grid-template-columns:48px minmax(0,1fr) 330px 150px; grid-template-areas:"fire name price cost" }
  #fuels .fuel-price{ justify-content:flex-end }
}
/* вогонь: SVG з calc.js, лише transform/opacity */
#fuels .fz,#fuels .ff,#fuels .fq,#fuels .fs,#fuels .fm,#fuels .fw{ transform-box:fill-box }
#fuels .fz{ transform-origin:50% 100%; transform:scale(var(--k,1)); transition:transform .5s }
#fuels .ff{ transform-origin:50% 100%; animation:gsfFl 1.1s ease-in-out infinite }
#fuels .fq{ transform-origin:50% 100%; animation:gsfQ 1.6s ease-in-out infinite }
#fuels .fs{ opacity:0; animation:gsfSp 1.6s ease-out infinite }
#fuels .fm{ opacity:0; transform-origin:50% 50%; animation:gsfSm 2.7s ease-out infinite }
#fuels .fg{ animation:gsfGl 1.9s ease-in-out infinite }
#fuels .fw{ opacity:0; animation:gsfW 1.8s ease-in-out infinite }
#fuels .fr{ transform-box:view-box; transform-origin:20px 26px; animation:gsfR 1.3s linear infinite }
@keyframes gsfFl{ 0%,100%{transform:scale(1,1) skewX(0)} 25%{transform:scale(.93,1.08) skewX(3deg)} 50%{transform:scale(1.05,.94) skewX(-2deg)} 75%{transform:scale(.96,1.05) skewX(1deg)} }
@keyframes gsfQ{ 0%,100%{transform:scale(1,1)} 50%{transform:scale(.97,1.05)} }
@keyframes gsfSp{ 0%{opacity:0; transform:translate(0,4px)} 20%{opacity:1} 100%{opacity:0; transform:translate(2px,-12px)} }
@keyframes gsfSm{ 0%{opacity:0; transform:translate(0,4px) scale(.6)} 30%{opacity:.6} 100%{opacity:0; transform:translate(1px,-10px) scale(1.6)} }
@keyframes gsfGl{ 0%,100%{opacity:.45} 50%{opacity:1} }
@keyframes gsfW{ 0%{opacity:0; transform:translateY(4px)} 50%{opacity:.9} 100%{opacity:0; transform:translateY(-5px)} }
@keyframes gsfR{ to{transform:rotate(360deg)} }
@media(prefers-reduced-motion:reduce){
  #fuels .fuel-fire *{ animation:none !important }
  #fuels .fs,#fuels .fw{ opacity:.8 }
  #fuels .fm{ opacity:.45 }
}
/* симулятори буфера й бойлера: без білої смуги, зверху відступ під шапку */
#calc-boil,#calc-buf,#calc-exp,#calc-floor,#calc-dia,#calc-rad,#calc-circ,#calc-strilka,#calc-mix{ padding:16px 0 0 !important; margin:0 !important; }
#calc-boil .wrap,#calc-buf .wrap,#calc-exp .wrap,#calc-floor .wrap,#calc-dia .wrap,#calc-rad .wrap,#calc-circ .wrap,#calc-strilka .wrap,#calc-mix .wrap{ padding-bottom:8px; }
#boilSim,#bufSim{ margin-top:0 !important; }
/* кнопка «Усі калькулятори» рівно по ширині симулятора, без темної смуги (Андрій, 02.11.2026) */
#calc-boil,#calc-buf,#calc-exp,#calc-floor,#calc-dia,#calc-rad,#calc-circ,#calc-strilka,#calc-mix{ background:none !important; max-width:1240px; margin:0 auto !important; padding:16px 0 0 !important; box-sizing:border-box; width:100%; min-height:0 !important; }
#calc-boil .wrap,#calc-buf .wrap,#calc-exp .wrap,#calc-floor .wrap,#calc-dia .wrap,#calc-rad .wrap,#calc-circ .wrap,#calc-strilka .wrap,#calc-mix .wrap{ max-width:none !important; margin:0 !important; padding:0 !important; }
#calc-boil .ci-back,#calc-buf .ci-back,#calc-exp .ci-back,#calc-floor .ci-back,#calc-dia .ci-back,#calc-rad .ci-back,#calc-circ .ci-back,#calc-strilka .ci-back,#calc-mix .ci-back{ margin:0 !important; }
/* заголовок уже є над блоком */
#expSim .xs-wrap>h2,#floorSim .xs-wrap>h2,#diaCalc .xs-wrap>h2,#radCalc .xs-wrap>h2,#circCalc .xs-wrap>h2,#strilkaSim .xs-wrap>h2,#mixSim .xs-wrap>h2{ display:none; }


/* 08.11.2026: на телефоні зверху кнопка «← Усі калькулятори» → вітрина rozrakhunky.html (calc-ui.js), під нею один рядок вкладок */
.calc a.ci-hub{ display:none }
@media(max-width:760px){
  .calc a.ci-hub{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:44px; position:relative; z-index:2; margin:6px 0 26px; border-radius:999px; border:2px solid var(--lime); background:#0e1720; color:var(--c-ink); font:800 15px var(--c-body); text-decoration:none; scroll-margin-top:calc(var(--header-h) + 8px) }
  .calc a.ci-hub:hover{ background:#1d2a14 }
}