/* Hypoteční kalkulačka — kalkulacka od klienta, prenesena z kiwireality.cz.
   CSS je cele zapouzdrene pod .kalk-hypoteka, protoze pouziva stejne nazvy
   trid jako portal (.container, .card, .field). Barvy znacky KIWI jsou
   prepsane na paletu portalu, vyznamove (cervena, oranzova) zustaly. */
/* ─── RESET & VARIABLES ─── */
.kalk-hypoteka *,
.kalk-hypoteka *::before,
.kalk-hypoteka *::after { box-sizing: border-box; margin: 0; padding: 0; }
.kalk-hypoteka {
  --kiwi-blue:   #534AB7;
  --kiwi-blue-d: #453DA0;
  --kiwi-blue-l: #EFEDFB;
  --kiwi-green:  #00AA3C;
  --kiwi-green-d:#24803A;
  --kiwi-green-l:#E4F6E9;
  --white:       #ffffff;
  --light:       #F6F5FA;
  --border:      #E3E1EE;
  --muted:       #5A5A62;
  --ink:         #16151C;
  --shadow:      0 4px 20px rgba(83,74,183,0.10);
}
.kalk-hypoteka { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.kalk-hypoteka {
  font-family:var(--font-body);
  background:var(--light); color:var(--ink);

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* ─── HEADER ─── */
.kalk-hypoteka .header {
  background:-webkit-linear-gradient(135deg,var(--kiwi-blue) 0%,var(--kiwi-blue-d) 100%);
  background:linear-gradient(135deg,var(--kiwi-blue) 0%,var(--kiwi-blue-d) 100%);
  position:relative; overflow:hidden; padding:0;
}
.kalk-hypoteka .header::after {
  content:''; position:absolute;
  bottom:-1px; left:0; right:0; height:40px;
  background:var(--light);
  -webkit-clip-path:ellipse(55% 100% at 50% 100%);
  clip-path:ellipse(55% 100% at 50% 100%);
}
.kalk-hypoteka .header-inner {
  max-width:1100px; margin:0 auto;
  padding:28px 20px 52px;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  gap:24px; -ms-flex-wrap:wrap; flex-wrap:wrap;
}
.kalk-hypoteka .logo-wrap { -ms-flex-negative:0; flex-shrink:0; }
.kalk-hypoteka .logo-wrap img {
  height:52px; width:auto; display:block; max-width:300px;
  border-radius:6px;
  padding:4px 8px;
  background:#ffffff;
  -webkit-box-shadow:0 2px 12px rgba(0,0,0,0.18);
  box-shadow:0 2px 12px rgba(0,0,0,0.18);
}
.kalk-hypoteka .logo-fallback {
  font-family:var(--font-head); font-weight:800;
  font-size:24px; color:white; display:none;
}
.kalk-hypoteka .logo-fallback span { background:rgba(255,255,255,0.22); padding:2px 8px; border-radius:4px; margin-right:4px; }
.kalk-hypoteka .header-text { -webkit-box-flex:1; -ms-flex:1; flex:1; min-width:200px; }
.kalk-hypoteka .header-label { font-size:11px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,0.7); margin-bottom:6px; font-weight:600; }
.kalk-hypoteka .header h1 { font-family:var(--font-head); font-size:clamp(20px,4vw,34px); font-weight:800; color:#fff; line-height:1.2; }
.kalk-hypoteka .header p { color:rgba(255,255,255,0.72); font-size:14px; margin-top:6px; font-weight:300; }
/* ─── LAYOUT ─── */
.kalk-hypoteka .container { max-width:1100px; margin:0 auto; padding:16px 16px 60px; }
.kalk-hypoteka .grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
/* ─── CARDS ─── */
.kalk-hypoteka .card { background:var(--white); border-radius:16px; padding:24px; -webkit-box-shadow:var(--shadow); box-shadow:var(--shadow); border:1.5px solid var(--border); }
.kalk-hypoteka .card-title {
  font-family:var(--font-head); font-size:15px; font-weight:700;
  color:var(--ink); margin-bottom:20px; padding-bottom:12px;
  border-bottom:2px solid var(--kiwi-blue-l);
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  gap:10px; -ms-flex-wrap:wrap; flex-wrap:wrap;
}
.kalk-hypoteka .card-title .icon {
  width:30px; height:30px; background:var(--kiwi-blue-l); border-radius:8px;
  display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  font-size:14px; -ms-flex-negative:0; flex-shrink:0;
}
/* ─── FIELDS ─── */
.kalk-hypoteka .field { margin-bottom:18px; }
.kalk-hypoteka .field label { display:block; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.kalk-hypoteka .input-wrap {
  position:relative;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
}
.kalk-hypoteka .input-wrap input[type="number"] {
  width:100%; padding:11px 46px 11px 14px;
  border:2px solid var(--border); border-radius:10px;
  font-size:15px; font-family:var(--font-body); font-weight:600;
  color:var(--ink); background:var(--light);
  -webkit-transition:border-color .2s,-webkit-box-shadow .2s; transition:border-color .2s,box-shadow .2s;
  -moz-appearance:textfield; appearance:textfield;
}
.kalk-hypoteka input[type="number"]::-webkit-outer-spin-button,
.kalk-hypoteka input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.kalk-hypoteka .input-wrap input[type="number"]:focus {
  outline:none; border-color:var(--kiwi-blue);
  -webkit-box-shadow:0 0 0 3px rgba(83,74,183,0.15); box-shadow:0 0 0 3px rgba(83,74,183,0.15);
  background:var(--white);
}
.kalk-hypoteka .unit { position:absolute; right:13px; font-size:12px; font-weight:700; color:var(--muted); pointer-events:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.kalk-hypoteka .field-note { font-size:11px; color:var(--muted); margin-top:5px; line-height:1.5; }
/* ─── RANGE SLIDERS — plná cross-browser podpora ─── */
.kalk-hypoteka .range-row { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; gap:12px; margin-top:8px; }
.kalk-hypoteka input[type="range"] {
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  -webkit-box-flex:1; -ms-flex:1; flex:1;
  height:4px; border-radius:4px; background:var(--kiwi-blue-l);
  outline:none; cursor:pointer; border:none; padding:0;
}
.kalk-hypoteka input[type="range"]::-webkit-slider-runnable-track { height:4px; border-radius:4px; background:var(--kiwi-blue-l); }
.kalk-hypoteka input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--kiwi-blue); cursor:pointer;
  border:3px solid var(--white); margin-top:-8px;
  -webkit-box-shadow:0 2px 8px rgba(83,74,183,0.4); box-shadow:0 2px 8px rgba(83,74,183,0.4);
  -webkit-transition:-webkit-transform .15s; transition:transform .15s;
}
.kalk-hypoteka input[type="range"]::-webkit-slider-thumb:hover { -webkit-transform:scale(1.2); transform:scale(1.2); }
.kalk-hypoteka input[type="range"]::-moz-range-track { height:4px; border-radius:4px; background:var(--kiwi-blue-l); border:none; }
.kalk-hypoteka input[type="range"]::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:var(--kiwi-blue); cursor:pointer; border:3px solid var(--white); box-shadow:0 2px 8px rgba(83,74,183,0.4); }
.kalk-hypoteka input[type="range"]::-ms-track { height:4px; background:transparent; border-color:transparent; color:transparent; }
.kalk-hypoteka input[type="range"]::-ms-fill-lower { background:var(--kiwi-blue); border-radius:4px; }
.kalk-hypoteka input[type="range"]::-ms-fill-upper { background:var(--kiwi-blue-l); border-radius:4px; }
.kalk-hypoteka input[type="range"]::-ms-thumb { width:20px; height:20px; border-radius:50%; background:var(--kiwi-blue); border:3px solid var(--white); margin-top:0; }
.kalk-hypoteka .range-val { min-width:52px; text-align:right; font-size:13px; font-weight:700; color:var(--kiwi-blue); white-space:nowrap; }
/* ─── SELECT ─── */
.kalk-hypoteka select {
  width:100%; padding:11px 40px 11px 14px;
  border:2px solid var(--border); border-radius:10px;
  font-size:14px; font-family:var(--font-body); font-weight:600;
  color:var(--ink); background-color:var(--light);
  -webkit-appearance:none; -moz-appearance:none; 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'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23534AB7' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  cursor:pointer;
}
.kalk-hypoteka select::-ms-expand { display:none; }
.kalk-hypoteka select:focus { outline:none; border-color:var(--kiwi-blue); -webkit-box-shadow:0 0 0 3px rgba(83,74,183,0.15); box-shadow:0 0 0 3px rgba(83,74,183,0.15); }
/* ─── RESULTS CARD ─── */
.kalk-hypoteka .results-card { background:-webkit-linear-gradient(160deg,#3A1F7A 0%,#241353 100%); background:linear-gradient(160deg,#3A1F7A 0%,#241353 100%); border-color:transparent; }
.kalk-hypoteka .results-card .card-title { color:white; border-bottom-color:rgba(255,255,255,0.15); }
.kalk-hypoteka .results-card .card-title .icon { background:rgba(255,255,255,0.15); }
.kalk-hypoteka .stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
.kalk-hypoteka .stat { background:rgba(255,255,255,0.10); border-radius:10px; padding:13px; border:1px solid rgba(255,255,255,0.18); }
.kalk-hypoteka .stat-label { font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:rgba(255,255,255,0.6); margin-bottom:5px; }
.kalk-hypoteka .stat-value { font-family:var(--font-head); font-size:17px; font-weight:800; color:white; line-height:1.1; word-break:break-word; }
.kalk-hypoteka .stat-value.green { color:#3FDA3D; }
.kalk-hypoteka .stat-value.accent { color:#3FDA3D; }
.kalk-hypoteka .bar-wrap { margin-bottom:18px; }
.kalk-hypoteka .bar-label-row { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; font-size:11px; color:rgba(255,255,255,0.55); margin-bottom:6px; }
.kalk-hypoteka .bar-bg { height:7px; background:rgba(255,255,255,0.15); border-radius:8px; overflow:hidden; }
.kalk-hypoteka .bar-fg { height:100%; border-radius:8px; background:-webkit-linear-gradient(left,#3FDA3D,#00AA3C); background:linear-gradient(90deg,#3FDA3D,#00AA3C); -webkit-transition:width .6s cubic-bezier(.4,0,.2,1); transition:width .6s cubic-bezier(.4,0,.2,1); width:0%; }
.kalk-hypoteka .fix-box { background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.2); border-radius:10px; padding:13px; }
.kalk-hypoteka .fix-box .stat-label { color:rgba(255,255,255,0.6); }
.kalk-hypoteka .fix-box .stat-value { font-size:15px; font-weight:700; color:#3FDA3D; }
/* ─── EXTRA PAYMENTS ─── */
.kalk-hypoteka .badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; background:var(--kiwi-green-l); color:#16632B; }
.kalk-hypoteka .extra-item { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:flex-end; -ms-flex-align:flex-end; align-items:flex-end; gap:8px; margin-bottom:10px; }
.kalk-hypoteka .extra-field { -webkit-box-flex:1; -ms-flex:1; flex:1; }
.kalk-hypoteka .extra-field-wide { -webkit-box-flex:2; -ms-flex:2; flex:2; }
.kalk-hypoteka .extra-label { font-size:11px; color:var(--muted); display:block; margin-bottom:4px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }
.kalk-hypoteka .extra-item input[type="number"] { width:100%; padding:9px 12px; border:2px solid var(--border); border-radius:8px; font-size:14px; font-family:var(--font-body); background:var(--light); color:var(--ink); -moz-appearance:textfield; appearance:textfield; }
.kalk-hypoteka .extra-item input[type="number"]::-webkit-outer-spin-button,
.kalk-hypoteka .extra-item input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; }
.kalk-hypoteka .extra-item input[type="number"]:focus { outline:none; border-color:var(--kiwi-blue); }
.kalk-hypoteka .remove-btn { background:none; border:2px solid #f5c6c6; cursor:pointer; color:#c0392b; font-size:16px; font-weight:700; line-height:1; padding:0; width:36px; height:38px; border-radius:8px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-transition:background .15s; transition:background .15s; -ms-flex-negative:0; flex-shrink:0; -webkit-tap-highlight-color:transparent; }
.kalk-hypoteka .remove-btn:hover { background:#fde8e8; }
.kalk-hypoteka .btn-add { margin-top:6px; padding:10px 16px; background:none; border:2px dashed var(--kiwi-green); border-radius:8px; color:var(--kiwi-green-d); font-size:13px; font-weight:700; cursor:pointer; font-family:var(--font-body); -webkit-transition:background .15s; transition:background .15s; width:100%; min-height:44px; -webkit-tap-highlight-color:transparent; }
.kalk-hypoteka .btn-add:hover { background:var(--kiwi-green-l); }
/* ─── TABLE ─── */
.kalk-hypoteka .table-section { margin-top:24px; }
.kalk-hypoteka .table-section h3 { font-family:var(--font-head); font-size:15px; font-weight:700; color:var(--ink); margin-bottom:12px; }
.kalk-hypoteka .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:16px; border:1.5px solid var(--border); }
.kalk-hypoteka table { width:100%; border-collapse:collapse; font-size:13px; min-width:500px; }
.kalk-hypoteka thead th { background:var(--kiwi-blue); color:white; padding:11px 12px; text-align:right; font-weight:700; font-size:11px; letter-spacing:.8px; text-transform:uppercase; white-space:nowrap; }
.kalk-hypoteka thead th:first-child { text-align:left; }
.kalk-hypoteka tbody tr { border-bottom:1px solid #F2F0FB; -webkit-transition:background .12s; transition:background .12s; }
.kalk-hypoteka tbody tr:last-child { border-bottom:none; }
.kalk-hypoteka tbody tr:hover { background:var(--kiwi-blue-l); }
.kalk-hypoteka tbody tr.extra-row { background:var(--kiwi-green-l); }
.kalk-hypoteka tbody td { padding:9px 12px; text-align:right; color:var(--muted); white-space:nowrap; }
.kalk-hypoteka tbody td:first-child { text-align:left; color:var(--ink); font-weight:600; }
.kalk-hypoteka td.interest { color:#c0392b; }
.kalk-hypoteka td.principal { color:var(--kiwi-green-d); }
.kalk-hypoteka td.extra { color:var(--kiwi-green-d); font-weight:700; }
.kalk-hypoteka .table-pager { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; gap:12px; margin-top:12px; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -ms-flex-wrap:wrap; flex-wrap:wrap; }
.kalk-hypoteka .pager-btn { padding:8px 20px; border:2px solid var(--kiwi-blue); background:white; border-radius:8px; cursor:pointer; font-size:13px; font-weight:700; font-family:var(--font-body); color:var(--kiwi-blue); -webkit-transition:background .15s,color .15s; transition:background .15s,color .15s; -webkit-tap-highlight-color:transparent; min-height:44px; }
.kalk-hypoteka .pager-btn:hover:not(:disabled) { background:var(--kiwi-blue); color:white; }
.kalk-hypoteka .pager-btn:disabled { opacity:.3; cursor:default; }
.kalk-hypoteka .pager-info { font-size:13px; color:var(--muted); font-weight:600; }
/* ─── CHART ─── */
.kalk-hypoteka .chart-section { margin-top:24px; }
.kalk-hypoteka .chart-section h3 { font-family:var(--font-head); font-size:15px; font-weight:700; color:var(--ink); margin-bottom:12px; }
.kalk-hypoteka .chart-card { background:var(--white); border-radius:16px; padding:24px 24px 16px; -webkit-box-shadow:var(--shadow); box-shadow:var(--shadow); border:1.5px solid var(--border); }
.kalk-hypoteka .chart-legend { display:-webkit-box; display:-ms-flexbox; display:flex; gap:16px; margin-bottom:16px; -ms-flex-wrap:wrap; flex-wrap:wrap; }
.kalk-hypoteka .legend-item { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--ink); }
.kalk-hypoteka .legend-dot { width:14px; height:14px; border-radius:3px; -ms-flex-negative:0; flex-shrink:0; }
.kalk-hypoteka .legend-dot.blue { background:#534AB7; }
.kalk-hypoteka .legend-dot.green { background:#00AA3C; }
.kalk-hypoteka .legend-dot.blue-d { background:rgba(83,74,183,0.2); border:2px dashed #534AB7; }
.kalk-hypoteka .legend-dot.green-d { background:rgba(0,170,60,0.2);  border:2px dashed #00AA3C; }
.kalk-hypoteka .chart-wrap { position:relative; width:100%; overflow:hidden; }
.kalk-hypoteka canvas#mortgageChart { display:block; width:100% !important; }
.kalk-hypoteka .chart-note { font-size:11px; color:var(--muted); margin-top:10px; text-align:center; line-height:1.5; }
/* ─── FOOTER ─── */
.kalk-hypoteka .footer { text-align:center; padding:20px 16px; font-size:12px; color:var(--muted); border-top:1.5px solid var(--border); margin-top:10px; line-height:1.6; }
.kalk-hypoteka .footer strong { color:var(--kiwi-blue); }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:900px) {
.kalk-hypoteka .stat-value { font-size:15px; }
}
@media (max-width:760px) {
.kalk-hypoteka .grid { grid-template-columns:1fr; }
.kalk-hypoteka .header-inner { padding-bottom:44px; gap:16px; }
.kalk-hypoteka .logo-wrap img { height:44px; }
.kalk-hypoteka .container { padding:20px 12px 48px; }
.kalk-hypoteka .card { padding:20px; }
.kalk-hypoteka canvas#mortgageChart { height:260px !important; }
}
@media (max-width:480px) {
.kalk-hypoteka .header h1 { font-size:20px; }
.kalk-hypoteka .logo-wrap img { height:36px; }
.kalk-hypoteka .stat-grid { gap:8px; }
.kalk-hypoteka .stat { padding:10px; }
.kalk-hypoteka .stat-value { font-size:13px; }
.kalk-hypoteka .stat-label { font-size:9px; }
.kalk-hypoteka .chart-card { padding:16px 12px 12px; }
.kalk-hypoteka canvas#mortgageChart { height:210px !important; }
.kalk-hypoteka .extra-item { -ms-flex-wrap:wrap; flex-wrap:wrap; }
.kalk-hypoteka .extra-field,
.kalk-hypoteka .extra-field-wide { -webkit-box-flex:1; -ms-flex:1 1 calc(50% - 4px); flex:1 1 calc(50% - 4px); }
}
@media (max-width:360px) {
.kalk-hypoteka .stat-grid { grid-template-columns:1fr; }
}
@media print {
.kalk-hypoteka .header::after,
.kalk-hypoteka .btn-add,
.kalk-hypoteka .pager-btn,
.kalk-hypoteka .remove-btn { display:none; }
.kalk-hypoteka .card { -webkit-box-shadow:none; box-shadow:none; border:1px solid #ccc; }
}
@media (prefers-reduced-motion:reduce) {
.kalk-hypoteka *,
.kalk-hypoteka *::before,
.kalk-hypoteka *::after { -webkit-animation-duration:.01ms !important; animation-duration:.01ms !important; -webkit-transition-duration:.01ms !important; transition-duration:.01ms !important; }
}