/* ==========================================================================
   Q Clima — calculator (page kalkulator). Shared bits (FAQ, CTA, price table) come from qc-pages.css.
   ========================================================================== */

.qc-calchead { padding: 24px 0 28px; background: radial-gradient(90% 120% at 100% 0%, var(--qc-sky-soft) 0%, var(--qc-ice) 45%, #fff 100%); border-bottom: 1px solid var(--qc-subtle); }
.qc-calchead .qc-h1 { margin-bottom: 12px; font-size: clamp(32px, 5vw, 56px); }
.qc-calchead .qc-lead { margin: 0; }
.qc-section--calc { padding-top: 28px; }

.qc-calc { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1000px) {
	.qc-calc { grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; }
	.qc-calc__result { position: sticky; top: 140px; }
}
@media (min-width: 1280px) { .qc-calc { grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; } }

/* Form ------------------------------------------------------------------- */
.qc-calc__form { display: grid; gap: 14px; }
.qc-calc__step { min-width: 0; margin: 0; padding: 20px; border: 1px solid var(--qc-line); border-radius: var(--qc-r-lg); background: #fff; box-shadow: var(--qc-shadow-1); }
.qc-calc__step legend { float: left; display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 14px; padding: 0; font: 600 19px/1.2 var(--qc-font-head); color: var(--qc-navy); letter-spacing: .01em; }
.qc-calc__step legend + * { clear: both; }
.qc-calc__n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--qc-navy); color: #fff; font: 700 13px/1 var(--qc-font-body); }
.qc-calc__hint { margin: 10px 0 0; font-size: 13px; color: var(--qc-muted); }
.qc-calc__pair { display: grid; gap: 14px; }
@media (min-width: 700px) { .qc-calc__pair { grid-template-columns: 200px minmax(0, 1fr); } }

.qc-calc__area { display: flex; align-items: center; gap: 18px; }
.qc-calc__range { --p: 20%; flex: 1; min-width: 0; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.qc-calc__range::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--qc-sky) var(--p), var(--qc-line) var(--p)); }
.qc-calc__range::-moz-range-track { height: 8px; border-radius: 4px; background: var(--qc-line); }
.qc-calc__range::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--qc-sky); }
.qc-calc__range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border: 4px solid #fff; border-radius: 50%; background: var(--qc-navy); box-shadow: 0 2px 8px rgba(11, 59, 96, .35); }
.qc-calc__range::-moz-range-thumb { width: 20px; height: 20px; border: 4px solid #fff; border-radius: 50%; background: var(--qc-navy); box-shadow: 0 2px 8px rgba(11, 59, 96, .35); }
.qc-calc__range:focus-visible { outline: 0; }
.qc-calc__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(2, 132, 199, .35); }
.qc-calc__num { position: relative; flex: none; display: flex; align-items: center; }
.qc-calc__num input { width: 120px; height: 56px; padding: 0 44px 0 16px; border: 1.5px solid var(--qc-line-strong); border-radius: var(--qc-r); background: var(--qc-ice); font: 700 26px/1 var(--qc-font-head); color: var(--qc-navy); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.qc-calc__num input::-webkit-outer-spin-button, .qc-calc__num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qc-calc__num input:focus { outline: 0; border-color: var(--qc-sky); background: #fff; box-shadow: 0 0 0 3px rgba(2, 132, 199, .15); }
.qc-calc__num > span[aria-hidden] { position: absolute; right: 14px; font-weight: 700; color: var(--qc-muted); pointer-events: none; }
.qc-calc__form:not(.is-live) .qc-calc__area { justify-content: flex-start; }

/* Option tiles (radio) */
.qc-opts { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qc-opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 560px) { .qc-opts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .qc-opts--rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .qc-opts--rooms { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.qc-opt { position: relative; display: block; cursor: pointer; }
.qc-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qc-opt > span { display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%; min-height: 48px; padding: 8px 10px; border: 1.5px solid var(--qc-line); border-radius: var(--qc-r); background: var(--qc-ice); color: var(--qc-navy-ink); font-weight: 700; font-size: 14px; text-align: center; line-height: 1.25; transition: border-color .15s, background-color .15s, color .15s, box-shadow .15s; }
.qc-opt > span .qc-i { color: var(--qc-sky); }
.qc-opt:hover > span { border-color: var(--qc-sky); }
.qc-opt input:checked + span { border-color: var(--qc-navy); background: var(--qc-navy); color: #fff; box-shadow: var(--qc-shadow-2); }
.qc-opt input:checked + span .qc-i { color: #7DD3FC; }
.qc-opt input:focus-visible + span { outline: 3px solid rgba(2, 132, 199, .45); outline-offset: 2px; }
.qc-opt--icon > span { flex-direction: column; gap: 6px; min-height: 76px; }
.qc-opt--hint > span { flex-direction: column; gap: 2px; min-height: 72px; }
.qc-opt--hint small { font-weight: 500; font-size: 12px; color: var(--qc-muted); }
.qc-opt--hint input:checked + span small { color: #BFDBFE; }
.qc-opt--use input[value="heat"]:checked + span { background: #9A3412; border-color: #9A3412; }
.qc-opt--use input[value="heat"]:checked + span .qc-i { color: #FDBA74; }
@media (max-width: 479px) {
	.qc-calc__step { padding: 16px 14px; }
	.qc-opt > span { font-size: 13px; padding: 8px 6px; }
	.qc-opts--3 .qc-opt--use > span { flex-direction: column; gap: 4px; }
	.qc-calc__area { gap: 12px; }
	.qc-calc__num input { width: 104px; font-size: 22px; }
}

/* Stepper */
.qc-stepper { display: flex; align-items: center; gap: 8px; }
.qc-stepper label { flex: 1; }
.qc-stepper input { width: 100%; height: 48px; border: 1.5px solid var(--qc-line-strong); border-radius: var(--qc-r); background: var(--qc-ice); font: 700 22px/1 var(--qc-font-head); color: var(--qc-navy); text-align: center; -moz-appearance: textfield; }
.qc-stepper input::-webkit-outer-spin-button, .qc-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qc-stepper input:focus { outline: 0; border-color: var(--qc-sky); }
.qc-stepper__btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border: 1.5px solid var(--qc-line); border-radius: var(--qc-r); background: #fff; color: var(--qc-navy); }
.qc-stepper__btn:hover { border-color: var(--qc-sky); color: var(--qc-sky); }

/* Result card ------------------------------------------------------------ */
.qc-rcard { position: relative; padding: 26px 22px 22px; border-radius: var(--qc-r-xl); background: radial-gradient(120% 90% at 100% 0%, #16578F 0%, var(--qc-navy) 42%, var(--qc-navy-deep) 100%); color: #DCE8F4; box-shadow: var(--qc-shadow-3); overflow: hidden; scroll-margin-top: 140px; }
.qc-rcard::after { content: ''; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; border: 30px solid rgba(125, 211, 252, .06); pointer-events: none; }
.qc-rcard.is-updated .qc-rcard__rec strong { animation: qc-pop .35s ease-out; }
@keyframes qc-pop { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.qc-rcard__rec { display: flex; flex-direction: column; margin: 0 0 6px; }
.qc-rcard__pre { font-weight: 700; color: #BFDBFE; }
.qc-rcard__rec strong { font: 700 clamp(44px, 9vw, 60px)/1 var(--qc-font-head); color: #fff; letter-spacing: .01em; font-variant-numeric: tabular-nums; text-transform: uppercase; }
.qc-rcard__kw { margin-top: 4px; font: 600 22px/1.2 var(--qc-font-head); color: #7DD3FC; font-variant-numeric: tabular-nums; }
.qc-rcard__need { margin: 10px 0 18px; font-size: 14px; color: #BFD3E6; font-variant-numeric: tabular-nums; }
.qc-rscale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 18px; list-style: none; }
.qc-rscale li { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: var(--qc-r); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .08); font-variant-numeric: tabular-nums; transition: background-color .2s, color .2s; }
.qc-rscale strong { font: 600 18px/1.1 var(--qc-font-head); color: #fff; }
.qc-rscale span { font-size: 11px; color: #93A9C0; }
.qc-rscale li.is-active { background: #fff; border-color: #fff; }
.qc-rscale li.is-active strong { color: var(--qc-navy); }
.qc-rscale li.is-active span { color: var(--qc-sky); }
.qc-rcard__over { display: flex; gap: 8px; margin: 0 0 16px; padding: 12px; border-radius: var(--qc-r); background: rgba(249, 115, 22, .16); color: #FED7AA; font-size: 14px; }
.qc-rcard__over .qc-i { flex: none; margin-top: 2px; }
.qc-rcard__why { margin: 0 0 18px; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.qc-rcard__why summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-weight: 700; color: #fff; list-style: none; cursor: pointer; }
.qc-rcard__why summary::-webkit-details-marker { display: none; }
.qc-rcard__why[open] summary .qc-i { transform: rotate(180deg); }
.qc-rcard__factors { display: grid; gap: 0; margin: 0 0 12px; font-size: 14px; }
.qc-rcard__factors div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px dashed rgba(255, 255, 255, .1); }
.qc-rcard__factors dt { color: #93A9C0; }
.qc-rcard__factors dd { margin: 0; color: #fff; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.qc-rcard__note { display: flex; gap: 8px; margin: 14px 0 0; font-size: 13px; color: #BFD3E6; }
.qc-rcard__note .qc-i { flex: none; margin-top: 2px; color: #7DD3FC; }
.qc-rcard__note a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* Products ---------------------------------------------------------------- */
.qc-calcprod { scroll-margin-top: 120px; }
.qc-calcprod [data-qc-p-grid] { transition: opacity .2s; }
.qc-calcprod [data-qc-p-grid].is-loading { opacity: .45; }
.qc-calcprod .qc-section-head .qc-muted { margin: 4px 0 0; }
.qc-calcprod__empty { padding: 24px; border-radius: var(--qc-r-lg); background: #fff; border: 1px dashed var(--qc-line-strong); text-align: center; color: var(--qc-text-2); }

/* Explainer ---------------------------------------------------------------- */
.qc-explain { display: grid; gap: 32px; }
@media (min-width: 1000px) { .qc-explain { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 64px; align-items: start; } }
.qc-explain__steps { display: grid; gap: 12px; margin: 24px 0 0; list-style: none; counter-reset: e; }
.qc-explain__steps li { position: relative; display: flex; flex-direction: column; padding: 0 0 0 48px; counter-increment: e; }
.qc-explain__steps li::before { content: counter(e); position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--qc-sky-soft); color: var(--qc-sky); font: 700 14px/1 var(--qc-font-body); }
.qc-explain__steps strong { font: 600 18px/1.3 var(--qc-font-head); color: var(--qc-navy); }
.qc-explain__steps span { color: var(--qc-text-2); }
.qc-explain__table { display: grid; gap: 20px; }
.qc-ptable--calc { padding: 0; background: #fff; }
.qc-ptable--calc caption { padding: 0 0 8px; font: 600 16px/1.3 var(--qc-font-head); color: var(--qc-navy); text-align: left; }
.qc-ptable--calc thead th { padding: 10px 0; border-bottom: 2px solid var(--qc-line); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--qc-muted); text-align: left; }
.qc-ptable--calc thead th:last-child { text-align: right; }

/* Mobile sticky mini result */
.qc-calc__mini { position: fixed; left: 50%; bottom: 16px; z-index: 150; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px 0 20px; border-radius: 999px; background: var(--qc-navy); color: #fff; box-shadow: var(--qc-shadow-3); transform: translateX(-50%); white-space: nowrap; animation: qc-up .2s ease-out; }
.qc-calc__mini:hover { color: #fff; }
.qc-calc__mini span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #93C5FD; }
.qc-calc__mini strong { font: 700 22px/1 var(--qc-font-head); font-variant-numeric: tabular-nums; }
.qc-calc__mini .qc-i { color: #7DD3FC; }
@media (min-width: 1000px) { .qc-calc__mini { display: none !important; } }
.qc-calc, .qc-explain { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .qc-calc { grid-template-columns: minmax(0, 1fr) 400px; } .qc-explain { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
@media (min-width: 1280px) { .qc-calc { grid-template-columns: minmax(0, 1fr) 440px; } }