/* ===================================================
   kalkulacka.css — Hypotekárna kalkulačka
   Stránka ID 51 / /hypotekarna-kalkulacka
   Predloha: assety/00_original_navrh_full.png — vlastné triedy (.kalk-*),
   NEzdieľa .vrf-* s formular.css (tam má .vrf-card úplne iný, svetlý vzhľad).
   =================================================== */

.header:after { content: none !important; }

:root {
   --kalk-cyan: #00DDEB;
   --kalk-cyan-dark: #00AFC2;
   --kalk-white: #FFFFFF;
   --kalk-text-light: #DDEEEF;
   --kalk-panel-bg: rgba(0, 31, 38, 0.88);
   --kalk-panel-bg-2: rgba(0, 54, 66, 0.78);
   --kalk-border-cyan: rgba(0, 221, 235, 0.75);
   --kalk-shadow-cyan: 0 0 18px rgba(0, 221, 235, 0.35);
   --kalk-radius-card: 14px;
}

.kalk-page {
   min-height: 100vh;
   color: var(--kalk-white);
   font-family: 'Montserrat', 'Poppins', Arial, sans-serif;
   padding-top: 12rem;
   padding-bottom: 60px;
   background: url(../img/kalkulacka-interier.png) #001217;
   background-position: center top;
   background-repeat: no-repeat;
   background-size: cover;
}

/* BREADCRUMB — tmavá verzia zdieľaného partials/breadcrumb.tpl, scoped len na túto stránku */
.kalk-page #inner-page-breadcrumbs { background: rgba(0,31,38,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-top: 1px solid rgba(0,221,235,.2); border-bottom: 1px solid rgba(0,221,235,.2); padding: 10px 0; }
.kalk-page #inner-page-breadcrumbs a { color: var(--kalk-cyan); text-decoration: none; }
.kalk-page #inner-page-breadcrumbs a:hover { text-decoration: underline; }
.kalk-page #inner-page-breadcrumbs .last { color: var(--kalk-text-light); }
.kalk-page #inner-page-breadcrumbs .separator { color: rgba(255,255,255,.3); }

/* BANNER (partials/header_baner.tpl) — necháva iba logo, vlastné pozadie canvasu (generická
   nahraná fotka z _global.scss) je tu vypnuté, nech cezeň presvitá pozadie .kalk-page
   (kalkulacka-interier.png), keďže baner je teraz jej priamy potomok. Číslo _c_baner=N je
   voliteľné (podľa toho, čo je v .tpl), preto vypnuté pre všetky varianty. */
.kalk-page #inner-page-banner .inner-page-banner-photo,
.kalk-page #inner-page-banner .inner-page-banner-photo2,
.kalk-page #inner-page-banner .inner-page-banner-photo3,
.kalk-page #inner-page-banner .inner-page-banner-photo4,
.kalk-page #inner-page-banner .inner-page-banner-photo5,
.kalk-page #inner-page-banner .inner-page-banner-photo6,
.kalk-page #inner-page-banner .inner-page-banner-photo7,
.kalk-page #inner-page-banner .inner-page-banner-photo8 {
   background: none;
   /* základ (_global.scss) má min-height:150px; max-height:350px — na tejto stránke
      chceme pevných 150px, nie rozsah, ktorý sa pri širšom viewporte roztiahne. */
   min-height: 150px;
   max-height: 150px;
   height: 150px;
}

/* HERO */
.kalk-hero { max-width: 1200px; margin: 0 auto; padding: 40px 20px 0; text-align: center; }
.kalk-title { font-size: 46px; font-weight: 700; margin: 0; text-transform: uppercase; }
.kalk-title span { color: var(--kalk-cyan); }
.kalk-subtitle { font-size: 17px; color: var(--kalk-text-light); margin-top: 8px; letter-spacing: .3px; text-transform: uppercase; }

/* GRID — 3 karty */
/* minmax(0,1fr), nie holé 1fr — inak CSS grid stĺpec nechtiac narastie nad svoj podiel,
   keď sa doň dostane dlhý neprelomiteľný text (napr. obrovské číslo v splátke po zadaní
   nezmyselnej hodnoty do value-boxu) — 0 dolná hranica trati necháva track rešpektovať 1fr. */
.kalk-grid { max-width: 1200px; margin: 28px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }

.kalk-card {
   background: linear-gradient(180deg, var(--kalk-panel-bg), var(--kalk-panel-bg-2));
   border: 1px solid var(--kalk-border-cyan);
   border-radius: var(--kalk-radius-card);
   box-shadow: var(--kalk-shadow-cyan);
   padding: 28px;
   display: flex;
   flex-direction: column;
}

/* TABS (Kúpa / Refinancovanie) — builder komponent "tabs" (components/tabs.tpl),
   generické .c-tabs__* triedy reštylované len v rámci tejto stránky. Obe karty
   používajú tie isté polia, panely (.c-tabs__panel) sú u tohto použitia prázdne —
   samotný prepínač len mení výpočet cez HypotekarnaKalkulacka.hx. */
.kalk-page .c-tabs__triggers { display: flex; gap: 26px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 22px; }
.kalk-page .c-tabs__trigger { background: none; border: none; color: rgba(255,255,255,.5); font-weight: 600; font-size: 15px; padding: 0 0 12px; cursor: pointer; position: relative; }
.kalk-page .c-tabs__trigger.active { color: var(--kalk-white); }
.kalk-page .c-tabs__trigger.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--kalk-cyan); box-shadow: 0 0 8px var(--kalk-cyan); }

/* SLIDER POLIA */
.kalk-field { margin-bottom: 18px; }
.kalk-field-label { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--kalk-white); margin-bottom: 10px; }
.kalk-field-label svg { width: 18px; height: 18px; color: var(--kalk-cyan); flex-shrink: 0; }

/* Track aj thumb potrebujú rovnakú "výšku boxu" (18px, podľa thumbu) — inak si prehliadač
   necháva pôvodnú (vyššiu) default výšku range inputu a thumb v nej pôsobí nevycentrovane.
   Track (4px) sa potom vycentruje cez margin-top na -webkit-slider-thumb. */
/* input.kalk-slider (nie len .kalk-slider) — globálne input[type="range"] v _input.scss má
   border-bottom (určené pre svetlé textové polia), potrebuje sa to prebiť vyššou špecificitou. */
input.kalk-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; border: none; outline: none; margin: 6px 0; cursor: pointer; }
.kalk-slider::-webkit-slider-runnable-track { width: 100%; height: 4px; border-radius: 2px; background: rgba(255,255,255,.18); }
.kalk-slider::-moz-range-track { width: 100%; height: 4px; border-radius: 2px; background: rgba(255,255,255,.18); }
.kalk-slider::-webkit-slider-thumb { -webkit-appearance: none; margin-top: -7px; width: 18px; height: 18px; border-radius: 50%; background: var(--kalk-cyan); box-shadow: 0 0 10px rgba(0,221,235,.7); cursor: pointer; }
.kalk-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--kalk-cyan); box-shadow: 0 0 10px rgba(0,221,235,.7); cursor: pointer; border: none; }

.kalk-field-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 10px; }
.kalk-field-hint { color: rgba(255,255,255,.55); }

/* Vzhľad pôvodne patril priamo input.kalk-value-box — teraz je na wrapperi, lebo input
   obsahuje IBA číslo (editovateľné), jednotka (€ / rokov) je vedľa neho ako samostatný,
   needitovateľný <span>, nech ju užívateľ nemôže zmazať/prepísať. */
.kalk-value-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 4px; width: 120px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: 8px 10px; }
.kalk-value-wrap:focus-within { border-color: var(--kalk-cyan); }
input.kalk-value-box { width: 0; flex: 1 1 auto; min-width: 0; text-align: right; background: none; border: none; padding: 0; color: var(--kalk-white); font-weight: 700; font-size: 14px; }
input.kalk-value-box:focus { outline: none; }
.kalk-value-unit { color: rgba(255,255,255,.6); font-weight: 700; font-size: 14px; white-space: nowrap; user-select: none; pointer-events: none; }

/* FIXÁCIA select */
.kalk-select-row { display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 10px 14px; margin-bottom: 20px; }

/* Fixácia je zdieľaný Choices.js widget (components/selectOneInput.tpl, trieda
   .choices, ovládaný Components/SelectOneInput.hx) — štýl tu, NIE v zdieľanom
   sass/media-base/components/_selectOneInput.scss (ten používajú aj iné stránky,
   napr. výber kupujúceho, s vlastným — svetlým — vzhľadom). Explicitná farba na
   každej úrovni (inner/list/item/highlighted), nech nič nezdedí svetlú farbu
   textu zo zdieľaného SCSS oproti tmavému pozadiu tejto stránky. */
.kalk-select-row .choices { position: relative; margin-bottom: 0; width: 220px; font-size: 14px; }
.kalk-select-row .choices__inner {
   background: rgba(255,255,255,.06) !important;
   border: 1px solid rgba(255,255,255,.18) !important;
   border-radius: 6px !important;
   padding: 8px 24px 8px 10px !important;
   color: var(--kalk-white) !important;
   font-size: 14px;
}
.kalk-select-row .choices.is-open .choices__inner,
.kalk-select-row .choices.is-focused .choices__inner {
   border-color: var(--kalk-cyan) !important;
}
.kalk-select-row .choices__list--single .choices__item {
   color: var(--kalk-white) !important;
   font-weight: 700;
   font-size: 14px;
   text-transform: uppercase;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.kalk-select-row .choices:after {
   border-color: var(--kalk-white) transparent transparent transparent !important;
}
.kalk-select-row .choices.is-open:after {
   border-color: transparent transparent var(--kalk-white) transparent !important;
}
.kalk-select-row .choices__list--dropdown {
   background: #001F26 !important;
   border: 1px solid var(--kalk-border-cyan) !important;
   border-radius: 6px;
   margin-top: 4px;
   overflow: hidden;
}
.kalk-select-row .choices__list--dropdown .choices__list { max-height: 260px; }
.kalk-select-row .choices__list--dropdown .choices__item {
   color: var(--kalk-white) !important;
   background: transparent !important;
   border: none !important;
}
.kalk-select-row .choices__list--dropdown .choices__item--selectable.is-highlighted,
.kalk-select-row .choices__list--dropdown .choices__item--selectable:hover {
   background: rgba(0,221,235,.15) !important;
   color: var(--kalk-cyan) !important;
}

/* TLAČIDLÁ */
.kalk-btn-primary,
.kalk-btn-secondary { display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 7px; text-transform: uppercase; font-weight: 700; font-size: 13.5px; letter-spacing: .4px; padding: 14px 18px; cursor: pointer; text-decoration: none; transition: filter .15s, background .15s; }
.kalk-btn-primary { background: linear-gradient(180deg, #00DDEB 0%, #0099AA 100%); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.kalk-btn-primary:hover { filter: brightness(1.1); }
.kalk-btn-secondary { background: rgba(0,0,0,.12); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.kalk-btn-secondary:hover { background: rgba(255,255,255,.08); }
.kalk-btn-primary svg, .kalk-btn-secondary svg { width: 16px; height: 16px; flex-shrink: 0; }

/* STREDNÝ PANEL — výsledok */
.kalk-card--mid { align-items: center; text-align: center; }
.kalk-result-title {
   font-size: 19px;
   font-weight: 700;
   margin: 0 0 22px;
   line-height: 1.4;
}
.kalk-result-value { font-size: 60px; font-weight: 800; color: var(--kalk-cyan); margin: 6px 0 16px; text-shadow: 0 0 20px rgba(0,221,235,.5); line-height: 1; overflow-wrap: anywhere; }
.kalk-result-value .kalk-currency { font-size: 30px; margin-left: 2px; }
.kalk-result-rows { width: 100% }
.kalk-result-row { display: flex; justify-content: space-between; width: 100%; padding: 10px 0; color: rgba(255,255,255,.7); gap: 10px; border-top: 1px solid rgba(255, 255, 255, .1); }
.kalk-result-row strong { color: #fff; font-weight: 700; overflow-wrap: anywhere; text-align: right; }

/* DONUT — čisto CSS conic-gradient, žiadne SVG */
.kalk-donut-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; }
.kalk-donut {
   --kalk-pct: 0%;
   width: 230px; height: 230px; border-radius: 50%;
   background: conic-gradient(var(--kalk-cyan) var(--kalk-pct), rgba(255,255,255,.15) var(--kalk-pct) 100%);
   display: flex; align-items: center; justify-content: center;
   box-shadow: 0 0 24px rgba(0,221,235,.25);
   transition: background .25s ease;
}
/* hole zväčšený z 68% na 70% (176->190px donut), nech sa 13px label + 13.5px hodnota zmestia s rezervou, nie natesno ako predtým pri 10.5px */
.kalk-donut-hole { width: 70%; height: 70%; font-size: 17px; border-radius: 50%; background: rgba(0, 54, 66, 1); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.kalk-donut-label { text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.75); }
.kalk-donut-value { font-weight: 700; color: #fff; margin-top: 2px; overflow-wrap: anywhere; text-align: center; }
.kalk-donut-legend { display: flex; justify-content: flex-end; width: 100%; color: rgba(255,255,255,.7); font-size: 17px; }
.kalk-donut-legend strong { color: var(--kalk-cyan); font-weight: 700; overflow-wrap: anywhere; }

/* PRAVÝ PANEL */
.kalk-right-title { font-size: 19px; font-weight: 700; margin: 0 0 22px; line-height: 1.4; }
.kalk-right-title span { color: var(--kalk-cyan); }
.kalk-benefits { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.kalk-benefits li { display: flex; align-items: flex-start; gap: 14px; }
.kalk-benefits svg { width: 28px; height: 28px; flex-shrink: 0; color: var(--kalk-cyan); }
.kalk-benefits div { font-size: 16px; color: var(--kalk-text-light); line-height: 1.5; }
.kalk-right-buttons { display: flex; flex-direction: column; gap: 12px}
.kalk-right-buttons a { width: 100%; }

/* TRUST BAR — rovnaký vzor ako .vrf-trust na formular.css, samostatná kópia (iný CSS súbor).
   Na rozdiel od .kalk-hero/.kalk-grid (priehľadné wrappery, gutter dávajú cez padding na
   100%-širokom boxe) má .kalk-trust VLASTNÉ pozadie/border priamo na sebe — bez `width`
   by na mobile (viewport < 1200px) siahal až na okraj obrazovky. */
.kalk-trust { max-width: 1200px; margin: 28px auto 0; padding: 20px; background: linear-gradient(180deg, var(--kalk-panel-bg), var(--kalk-panel-bg-2)); border: 1px solid var(--kalk-border-cyan); border-radius: var(--kalk-radius-card); box-shadow: var(--kalk-shadow-cyan); box-sizing: border-box; }
.kalk-trust-grid { display: grid; gap: 18px; }
.kalk-trust-item { display: flex; align-items: center; gap: 12px; }
.kalk-trust-icon { width: 45px; height: 45px; flex-shrink: 0; color: var(--kalk-cyan); }
.kalk-trust-txt strong { display: block; color: #fff; margin-bottom: 1px; font-size: 16px; }
.kalk-trust-txt span { color: rgba(255,255,255,.65); font-size: 14px; line-height: 1.4; }

@media (min-width: 861px) {
   .kalk-trust-item { border-right: 1px solid rgba(255,255,255,.1); padding-right: 14px; }
   .kalk-trust-item:last-child { border-right: none; }
}
@media (min-width: 1200px) {
   .kalk-trust-grid { grid-template-columns: repeat(4, 1fr); }
}

/* RESPONSIVE */
@media (max-width: 1100px) {
   .kalk-grid { grid-template-columns: 1fr; }
   .kalk-card--right { order: 3; }
}
@media (max-width: 520px) {
   .kalk-page { padding-top: 9rem; }
   .kalk-page #inner-page-banner { display: none; }
   .kalk-title { font-size: 32px; }
   .kalk-subtitle { font-size: 14px; }
   .kalk-result-value { font-size: 46px; }
   .kalk-card { padding: 22px; }
}

/* Na užších mobiloch vedľa seba nezmestí .kalk-value-wrap (fixných 120px) ani
   .kalk-select-row .choices (fixných 220px) - riadok tým pretiahne kartu aj celú
   stránku vodorovne mimo viewport. Pod touto šírkou preto oba riadky skladáme pod
   seba a fixné šírky nahradíme 100% (samostatná šírka od .kalk-field-row/select-row
   z max-width:520px vyššie - tento breakpoint je zámerne širší). */
@media (max-width: 600px) {
   .kalk-field-row { flex-direction: column; align-items: stretch; gap: 6px; }
   .kalk-select-row { flex-direction: column; align-items: stretch; gap: 10px; }
   .kalk-value-wrap { width: 100%; }
   .kalk-select-row .choices { width: 100%; }
}