/* App banner */
.app-banner{
  position:fixed; top:0; left:0; width:100%;
  background:#f2f2f2; border-bottom:1px solid #ccc;
  display:flex; align-items:center; padding:10px; z-index:9999;
  font-family:-apple-system,BlinkMacSystemFont,sans-serif;
}
.app-logo{ width:48px; height:48px; border-radius:12px; margin-right:12px; }
.app-info{ flex-grow:1; }
.app-title{ font-size:16px; font-weight:600; color:#000; }
.app-subtitle{ font-size:13px; color:#666; }
.app-download{
  background:#45aab8; color:#fff; font-size:14px; font-weight:600;
  padding:8px 14px; border-radius:8px; text-decoration:none; margin-left:12px; white-space:nowrap;
}
.app-close{ background:transparent; border:0; font-size:18px; color:#999; margin-left:10px; cursor:pointer; }
.hidden{ display:none !important; }
body.with-banner{ padding-top:70px; }
@media (max-width:400px){ .app-subtitle{ display:none; } }

/* EV skaičiuoklės tema */
#evcalc{
  --primary:#45aab8; --bg:#ffffff; --card:#ffffff; --ink:#0b1120; --muted:#53627c;
  --border:#e6ebf5; --accent:var(--primary); --good:#1ca77a; --bad:#d9534f;
}
body.dark #evcalc{
  --bg:#0b1020; --card:#121a32; --ink:#e6ebff; --muted:#9fb1ff; --border:#213055;
  --accent:#5dd1ff; --good:#35cc8b; --bad:#ff6b6b;
}

#evcalc .wrap{ max-width:900px; margin:0 auto; }
#evcalc .card{
  background:var(--card); color:var(--ink); border:1px solid var(--border);
  border-radius:16px; padding:16px; text-align:left; margin-bottom:16px; position:relative;
}
#evcalc h2{ color:var(--accent); font-size:1.5rem; margin-bottom:10px; }

#evcalc .row-grid{
  display:grid; grid-template-columns:1.1fr 1fr auto; gap:10px;
  align-items:center; margin:8px 0;
}
#evcalc .slider-row{
  display:grid; grid-template-columns:1.1fr 1fr auto auto; gap:10px;
  align-items:center; margin:8px 0; position:relative;
}
#evcalc label{ opacity:.95; }
#evcalc input[type="number"], #evcalc select{
  width:100%; padding:10px 11px; background:transparent; border:1px solid var(--border);
  color:var(--ink); border-radius:10px;
}
#evcalc .help{ color:var(--muted); font-size:.92rem; }

#evcalc .kpi{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
}
#evcalc .kpi .item{
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px;
}
#evcalc .kpi .label{ color:var(--muted); font-size:.92rem; }
#evcalc .kpi .value{ font-size:1.3rem; font-weight:700; }

#evcalc .hr{ height:1px; background:var(--border); margin:14px 0; }
#evcalc .good{ color:var(--good); }
#evcalc .bad{ color:var(--bad); }

#evcalc .invalid-feedback{ display:none; }
#evcalc .is-invalid + .invalid-feedback{ display:block; }

/* Info mygtukai + tooltip */
#evcalc .info-btn{
  border:none; background:transparent; cursor:pointer; padding:6px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center; color:var(--muted);
  font-size:1.05rem; line-height:1; position:relative; z-index:2; min-width:32px; min-height:32px;
}
.rk-tooltip{
  position:absolute; z-index:10000; max-width:320px; padding:10px 12px; border-radius:10px;
  background:#121826; color:#fff; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 32px rgba(0,0,0,.45); transform:translateY(8px); pointer-events:none; backdrop-filter:blur(4px);
}
.rk-tooltip::after{
  content:""; position:absolute; top:-6px; left:14px; border-width:6px; border-style:solid;
  border-color:transparent transparent #121826 transparent;
}

/* Slankikliai */
#evcalc .slider-row>div{ position:relative; z-index:1; }
#evcalc input[type="range"]{
  pointer-events:auto !important; position:relative; z-index:10; width:100%; -webkit-appearance:none;
  height:6px; border-radius:999px; background:linear-gradient(90deg,var(--accent) var(--fill,0%), #cfd6e4 var(--fill,0%));
  outline:none; border:1px solid var(--border); touch-action:pan-y; -ms-touch-action:pan-y;
}
#evcalc input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--accent); cursor:pointer; border:2px solid #fff; box-shadow:0 0 0 2px var(--accent);
}
#evcalc input[type="range"]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:var(--accent); cursor:pointer;
  border:2px solid #fff; box-shadow:0 0 0 2px var(--accent);
}
#evcalc input[type="range"]::-moz-range-track{ height:6px; background:transparent; }
#evcalc .value-pill{
  min-width:72px; text-align:center; border:1px solid var(--border);
  border-radius:999px; padding:6px 10px; color:var(--ink);
}

/* Hover transform off */
#evcalc .card, #evcalc .kpi .item, #evcalc canvas{ transition:none !important; transform:none !important; }
#evcalc .card:hover, #evcalc .kpi .item:hover, #evcalc canvas:hover{ transform:none !important; box-shadow:none !important; }

/* Mygtukai */
#evcalc .btn-next{ background:var(--accent); color:#fff; border:none; border-radius:10px; padding:10px 16px; }

/* Z-index/pointer fixai */
#evcalc #btnGeneralNext, #evcalc #btnEvFinanceNext, #evcalc #btnEvDataNext, #evcalc #btnCompareNext,
#evcalc #btnIceFinanceNext, #evcalc #btnIceDataNext, #evcalc #evYears, #evcalc #evRatePct, #evcalc #evResidual,
#evcalc #evContract, #evcalc #evPrice, #evcalc #evDown, #evcalc #evResidualPct, #evcalc #batteryKwh,
#evcalc #evKwhPer100, #evcalc #paidShare, #evcalc #elHome100, #evcalc #elPublic100, #evcalc #evInsuranceYear,
#evcalc #chargerPrice, #evcalc #evParkingM, #evcalc #evRoadY, #evcalc #evSubsidy, #evcalc #icevYears,
#evcalc #icevRatePct, #evcalc #icevDown, #evcalc #icevResidual, #evcalc #icevContract, #evcalc #icevDownPct,
#evcalc #icevResidualPct, #evcalc #icevPrice, #evcalc #tankL, #evcalc #icevInsuranceYear, #evcalc #iceParkingM,
#evcalc #iceRoadY{
  position:relative; z-index:10; pointer-events:auto !important;
}

/* Santraukos dėžutė */
.summary-box{
  background:rgba(69,170,184,.08); border:1px solid rgba(69,170,184,.25);
  padding:12px 16px; border-radius:10px; font-size:.95rem; line-height:1.5; margin: 8px 0 24px 0;
}
.summary-box strong{ font-weight:700; }

/* Vienodas grafiko pavadinimo stilius */
.chart-title{
  background:color-mix(in oklab, var(--accent) 10%, transparent);
  border:1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  color:var(--ink); padding:8px 10px; border-radius:10px; text-align:center;
  font-weight:700; margin:0 0 6px 0; line-height:1.2;
}
body.dark .chart-title{
  background:color-mix(in oklab, var(--accent) 18%, transparent);
  border-color:color-mix(in oklab, var(--accent) 45%, transparent);
}
.chart-card .chart-title{ margin-top:2px; }

.btn-compare{
  padding:8px 16px; margin:8px; cursor:pointer; background:#45aab8; color:#fff;
  border:none; border-radius:10px; pointer-events:auto; font-size:16px; font-weight:500;
}
.btn-compare:hover{ background:#3b8c98; }

/* Mobilus išdėstymas */
@media (max-width:640px){
  #evcalc .row-grid{ grid-template-columns:1fr; }
  #evcalc .slider-row{ grid-template-columns:1fr; }
  #evcalc .value-pill{ justify-self:start; margin-top:4px; }
}

/* Klaidų paryškinimas */
#evcalc input.is-invalid, #evcalc select.is-invalid{
  border-color:var(--bad);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--bad) 20%, transparent);
}
#evcalc .invalid-feedback{ color:var(--bad); font-size:.9rem; margin-top:6px; }

/* Klaviatūros prieinamumas */
#evcalc .btn-next:focus-visible, #evcalc .btn-compare:focus-visible, #evcalc .info-btn:focus-visible,
#evcalc input[type="number"]:focus-visible, #evcalc select:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:10px;
}

/* Disabled inputs */
#evcalc .btn-next[disabled], #evcalc .btn-compare[disabled]{ opacity:.6; cursor:not-allowed; }
#evcalc input[type=number]::-webkit-outer-spin-button, #evcalc input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
#evcalc input[type=number]{ -moz-appearance:textfield; }

/* === HERO KPI === */
#evcalc .kpi-hero{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:6px 0 8px 0;
}
#evcalc .kpi-hero-item{
  background:linear-gradient(0deg, rgba(69,170,184,.08), rgba(69,170,184,.08));
  border:1px solid rgba(69,170,184,.25); border-radius:14px; padding:12px 14px;
}
#evcalc .kpi-hero-label{ color:var(--muted); font-weight:600; font-size:.95rem; }
#evcalc .kpi-hero-value{ font-size:2rem; font-weight:800; line-height:1.1; color:var(--ink); }
#evcalc .kpi-hero-sub{ color:var(--muted); font-size:.9rem; }

/* === Chart cards / results === */
#evcalc .chart-grid{ display:grid; gap:12px; }
#evcalc .chart-grid-2{ grid-template-columns:1fr 1fr; }
#evcalc .chart-card{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px; }
#evcalc .chart-grid-inner{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start; }
#evcalc .mini-title{ color:var(--muted); font-size:.9rem; margin-bottom:4px; }

@media (max-width:992px){
  #evcalc .chart-grid-2{ grid-template-columns:1fr; }
  #evcalc .chart-grid-inner{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  #evcalc .kpi-hero{ grid-template-columns:1fr; }
  #evcalc .chart-grid-inner{ grid-template-columns:1fr; }
}

/* Chart title badge virš grafiko */
#evcalc #resultsCard .chart-row .section{
  display:block; width:100%; text-align:center; font-weight:700; line-height:1.25;
  padding:8px 10px; margin:0 0 12px 0;
  background:rgba(69,170,184,.08); border:1px solid rgba(69,170,184,.25);
  color:var(--ink); border-radius:12px;
}
body.dark #evcalc #resultsCard .chart-row .section{
  background:rgba(93,209,255,.14); border-color:rgba(93,209,255,.35);
}

/* ---- Tarpų ir canvas aukščio tvarka ---- */
:root{ --rk-gap-xs:6px; --rk-gap-s:8px; --rk-gap-m:12px; --rk-gap-l:16px; }

#evcalc, body{ line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* Antraštės */
.section, .chart-title, h3{ margin:0 0 var(--rk-gap-s); line-height:1.25; }

/* Eilutė su grafiku + headingu */
.chart-row{ display:grid; grid-template-columns:1fr; gap:8px; }
@media (min-width:960px){ .chart-row{ gap:10px; } }

#evcalc #resultsCard .chart-row{
  margin: 24px 0; /* Creates 24px of space above and below each chart row */
  gap:12px;
  overflow: hidden;
}

#evcalc #resultsCard .chart-box{ position:relative; }

/* Pastabos (note) */
.chart-note{
  margin:6px 0 12px; 
  font-size:.95rem; 
  line-height:1.5; 
  color:var(--muted,#53627c);
  clear: both;
}

/* Summary compare table */
.summary-table{
  width:100%; table-layout:fixed; border-collapse:collapse; margin:10px 0 0 0;
  background:var(--card); border:1px solid var(--border); border-radius:10px; overflow:hidden;
}
.summary-table th, .summary-table td{
  padding:8px 10px; vertical-align:middle; border-top:1px solid var(--border);
}
.summary-table tr:first-child th, .summary-table tr:first-child td{ border-top:none; }
.summary-table th{ font-weight:700; text-align:center; background:rgba(69,170,184,.08); color:var(--ink); }
.summary-table td{ text-align:center; }
.summary-table td:first-child{ text-align:left; }
.summary-table colgroup col:first-child{ width:40%; }
.summary-table colgroup col:nth-child(2){ width:30%; }
.summary-table colgroup col:nth-child(3){ width:30%; }
.summary-table tbody tr:hover{ background:rgba(69,170,184,.05); }
body.dark .summary-table{ border-color:#2a3a66; }
body.dark .summary-table th, body.dark .summary-table td{ border-top-color:#2a3a66; }
.summary-table.ev-only colgroup col:first-child{ width:60%; }
.summary-table.ev-only colgroup col:nth-child(2){ width:40%; }

#stepCompare input[type="radio"], #stepCompare label[for="cmpYes"], #stepCompare label[for="cmpNo"]{
  position:relative; z-index:10; pointer-events:auto !important;
}

/* Mygtukai virš grafiko */
#btnPrint, #btnDownloadPNG, #btnResetForm{
  position:relative; z-index:9999; pointer-events:auto !important;
}

/* Spausdinimui – tik rezultatų korta */
@media print{
  @page{ margin:12mm; }
  header, footer, nav, .breadcrumbs, .scroll-top, #preloader, #app-banner{ display:none !important; }
  #main>*:not(#evcalc){ display:none !important; }
  #evcalc .wrap>.card{ display:none !important; }
  #resultsCard{ display:block !important; }
  #evcalc, #evcalc .wrap, #resultsCard{ position:static !important; width:100% !important; }
  canvas{ max-width:100% !important; height:auto !important; page-break-inside:avoid; }
  #btnPrint, .btn-next{ display:none !important; }
}

/* Dėžutė aplink grafiką */
#evcalc .chart-box {
  position: relative;
  width: 100%;
  max-width: 900px;
  /* Optional: You can set a max-height on the container if needed */
  /* max-height: 450px; */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  box-sizing: border-box;
}

/* Vienas tiesos šaltinis dėl canvas aukščio */
:root {
  --rk-canvas-h: 320px;
  --rk-canvas-h-sm: 280px;
}

#evcalc .chart-box canvas {
  display: block;
  max-height: 350px;
  height: auto !important;
  width: 100% !important;
  max-width: 100%;
  margin-top: var(--rk-gap-xs);
}

/* The media query below was the primary cause of the stretching on mobile.
  It has been removed, as the 'height: auto' rule above now handles all screen sizes correctly.
*/
/*
@media (max-width:560px){
  #evcalc .chart-box canvas{ height:var(--rk-canvas-h-sm) !important; }
}
*/

#evcalc .wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px; /* Add some horizontal padding */
}



/* 
#evcalc .chart-box {
  position: relative;
  width: 100%;
  max-width: 900px; 
  max-height: 900px; 
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  box-sizing: border-box;
}


:root{ --rk-canvas-h:320px; --rk-canvas-h-sm:280px; }

#evcalc .chart-box canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%; 
  max-height: 300px;
  margin-top: var(--rk-gap-xs);
}

@media (max-width:560px){
  #evcalc .chart-box canvas{ height:var(--rk-canvas-h-sm) !important; }
}

#evcalc .wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px; 
}

#evcalc #chartRealMonthlyCost {
  max-height: 400px;
}  */