/* Калькулятор потужності. Змінні й типографіка з style.css теми. */
.calc{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start}
@media(min-width:1040px){.calc{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}

/* ---------- форма ---------- */
.calc-form{display:grid;gap:22px}
.cg{border:1px solid var(--line);background:rgba(255,255,255,.55);margin:0;padding:clamp(18px,2.2vw,28px);display:grid;gap:22px;min-width:0}
.cg legend{padding:0 10px;margin-left:-10px;color:var(--accent);background:var(--paper)}
.calc .lab{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.calc .grp,.calc .num{min-width:0}

.numrow{display:grid;grid-template-columns:1fr 110px;gap:16px;align-items:center}
.calc input[type=range]{width:100%;accent-color:var(--accent);height:28px;cursor:pointer}
.calc input[type=number],.calc select{width:100%;background:#fff;border:1px solid var(--line);color:var(--ink);padding:13px 14px;font:inherit;font-size:16px;border-radius:2px;transition:border-color .25s}
.calc select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23403A33' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.calc input[type=number]:focus,.calc select:focus{outline:none;border-color:var(--accent)}
.calc input[type=number]{text-align:right;font-variant-numeric:tabular-nums}

.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.seg.seg-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:620px){.seg,.seg.seg-2{grid-template-columns:1fr}}
.seg label{position:relative;display:block;cursor:pointer;min-width:0}
.seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg span{display:grid;gap:3px;height:100%;padding:13px 14px;background:#fff;border:1px solid var(--line);border-radius:2px;transition:border-color .2s,background .2s,box-shadow .2s;line-height:1.3}
.seg span b{font-weight:600;color:var(--ink);font-size:15px}
.seg span small{font-size:12.5px;color:var(--mut);line-height:1.35}
.seg label:hover span{border-color:var(--ink2)}
.seg input:checked+span{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:#fff}
.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

.chk{display:flex;gap:12px;align-items:flex-start;cursor:pointer;line-height:1.45}
.chk input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent);flex:none;cursor:pointer}
.chk span{font-size:15.5px;color:var(--ink)}
.chk small{display:block;font-size:12.5px;color:var(--mut)}
.calc-hint{font-size:13.5px;color:var(--mut);margin:0;max-width:60ch}

/* ---------- результат ---------- */
.calc-out{display:grid;gap:22px;min-width:0;align-content:start}
#calcResults{display:grid;gap:22px;min-width:0}
.co-need{background:var(--dark);color:var(--dmut);padding:clamp(22px,2.6vw,34px);border-radius:2px}
.co-need .mono{color:var(--accent-soft)}
.co-big{display:flex;align-items:baseline;gap:10px;margin:10px 0 6px;color:#fff;line-height:1}
.co-big b{font-size:clamp(46px,5.4vw,78px);font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.co-big span{font-size:clamp(20px,2vw,28px);font-weight:500;color:var(--dmut)}
.co-sub{margin:0;font-size:15px;line-height:1.55;max-width:46ch}
.co-how{margin-top:16px;border-top:1px solid var(--dline);padding-top:12px}
.co-how summary{cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-soft);list-style:none}
.co-how summary::-webkit-details-marker{display:none}
.co-how summary::after{content:" +"}
.co-how[open] summary::after{content:" –"}
.co-how ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:7px;font-size:14px}
.co-how li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px dotted var(--dline);padding-bottom:6px}
.co-how li b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.co-how p{margin:10px 0 0;font-size:12.5px;line-height:1.5}

.co-warn{margin:0;padding:14px 16px;border-left:3px solid var(--accent);background:rgba(132,10,45,.07);font-size:14.5px;line-height:1.55;color:var(--ink2)}
.co-warn.ok-note{border-left-color:#3E7A55;background:rgba(62,122,85,.09)}
.co-h{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:500;margin:6px 0 -8px;position:relative}

.rc{background:#fff;border:1px solid var(--line);padding:clamp(18px,2vw,26px);display:grid;gap:14px;border-radius:2px;position:relative}
.rc.best{border-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.rc.pick{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.rc-tag{position:absolute;top:-1px;right:-1px;background:var(--ink);color:var(--paper);padding:6px 12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.rc.pick .rc-tag{background:var(--accent)}
.rc h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;padding-right:110px}
.rc-kind{margin:2px 0 0;font-size:14.5px;color:var(--mut)}
.rc-spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px 18px;margin:0}
.rc-spec div{border-top:1px solid var(--line);padding-top:8px}
.rc-spec dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.rc-spec dd{margin:3px 0 0;font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.rc-spec dd small{font-weight:400;color:var(--mut);font-size:12.5px}
.rc-bar{height:6px;background:var(--paper2);position:relative;overflow:hidden}
.rc-bar i{position:absolute;inset:0 auto 0 0;background:var(--accent);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.rc-bar i.low{background:#B7791F}
.rc-cover{margin:-6px 0 0;font-size:13.5px;color:var(--mut)}
.rc-act{display:flex;gap:10px;flex-wrap:wrap}
.rc-act .btn{padding:13px 20px;font-size:14.5px}
.rc.compact{gap:10px}
.rc.compact{padding:14px 18px;gap:8px}
.rc.compact h3{font-size:19px}
.rc.compact .rc-kind{font-size:13px;margin:0}
.rc.compact .rc-spec{grid-template-columns:repeat(3,1fr);gap:8px 14px}
.rc.compact .rc-spec div:nth-child(2),.rc.compact .rc-spec div:nth-child(5){display:none}
.rc.compact .rc-spec dd{font-size:15px}
.rc.compact .rc-cover{display:none}
.rc.compact .rc-act .btn{padding:9px 14px;font-size:13.5px}

/* ---------- заявка (окрема секція) ---------- */
.calc-req-sec{background:var(--paper2)}
.calc-req-grid{display:grid;gap:clamp(24px,4vw,64px);grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:960px){.calc-req-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.calc-req-intro h2{font-size:clamp(28px,3.4vw,46px);margin:12px 0 14px}
.calc-req-intro .mono{color:var(--accent)}
.calc-req{padding:clamp(22px,2.6vw,34px);background:#fff;border:1px solid var(--line);border-radius:2px;margin:0;gap:18px}
.req-fields{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.req-fields{grid-template-columns:1fr 1fr}}
.req-model{margin:0;font-size:14.5px;color:var(--ink2);padding:10px 12px;background:var(--paper);border-left:3px solid var(--accent);line-height:1.45}
.req-err{min-height:0;margin:0}
.calc-req .btn[disabled]{opacity:.6;cursor:progress}

/* ---------- як працює ---------- */
.calc-how{max-width:760px}
.calc-how h2{font-size:clamp(26px,3vw,40px);margin-bottom:18px}
.calc-how p{margin:0 0 14px}

/* ---------- мобільна плашка потреби ---------- */
.calc-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px;background:var(--dark);color:#fff;transform:translateY(110%);transition:transform .3s;font-size:14px}
.calc-bar.on{transform:none}
.calc-bar b{font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.calc-bar a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-soft)}
@media(prefers-reduced-motion:reduce){.rc-bar i,.calc-bar{transition:none}}