:root{
  --bg:#ffffff; --card:#ffffff; --text:#111; --muted:#4b5563; --border:#e5e7eb; --row:#f9fafb;
  --accent:#1e8e5a; --danger:#d93025;
  
}
*{box-sizing:border-box  
}
/* Removed fixed background and min-width from .html, .body */
/* Renamed classes for clarity based on PHP changes */
.energowindow-calculator-container { /* New wrapper class */
    width: 100%;
    max-width: 100vw; /* Ensure it doesn't exceed viewport width */
    margin: 0 auto; /* Center the container */
    overflow-x: hidden; /* Prevent horizontal scroll on container */
    font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial; /* Moved font from body */
    color: #111;
}

.energowindow-body { /* Renamed from .body */
    margin: 0;
    background: transparent; 
    color: inherit; 
    font-size: 16px; 
    line-height: 1.5;
    min-height: 100vh; 
}

/* Moved background image styling to a pseudo-element or specific element if needed */
/* Example: Apply background to the container */
.energowindow-calculator-container {
    position: relative; 
    overflow: hidden; 
    min-height: 100vh;
    &::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1; 
    }
}

h1{font-size:clamp(22px,4.6vw,34px);margin:6px 0 8px;font-weight:900;text-align:center  
}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 10px 30px rgba(20,35,70,.08);padding:clamp(12px,2.4vw,18px)  
}
/* Made grid responsive */
.grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    padding: 0 10px;
    box-sizing: border-box;
}
.calc-header{
  display:flex;
  align-items:center;
  justify-content: center;
  width:100%;
  height:100%;
  flex-wrap: wrap;
}



.less-width{
  max-width:50px;
}
/* Media query for larger screens to show two columns */
@media (min-width: 1100px) {
    .grid {
        grid-template-columns: 1fr; /* Original two-column layout */
        padding: 0; /* Remove padding when layout fits */
        justify-content: center; /* Center the two columns if total width is less than viewport */
    }

    .calc-header{
      justify-content: space-between;
      flex-wrap: nowrap;
    }
    table th{
      padding: 5px 2px;
      font-size: 14px;
    }
    table td{
      padding: 10px 5px;
      font-size: 13px;
    }
    .systems {
        grid-template-columns: 1fr 1fr 1fr 1fr !important;
        padding-bottom:50px !important;
    }
}


.ct-month-suffix{
  float:right;
}


.systems {
        padding-bottom:50px !important;
    }

.controls{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid for controls */ gap:12px; padding: 0 10px; box-sizing: border-box; /* Add padding on small screens */} /* Adjust minmax width as needed */
.label{font-size:12px;color:var(--muted)  
}
.val{font-weight:900  
}
.kpi{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid for KPI */ gap:10px;margin-top:10px; padding: 0 10px; box-sizing: border-box; /* Add padding on small screens */} /* Adjust minmax width as needed */
.kpi .box{background: transparent;border:1px solid var(--border);border-radius:12px;padding:10px  
}
input[type=range]{width:100%;height:34px;background:transparent;cursor:pointer  
}
.systems{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid for systems */ gap: 15px;
    padding: 0 10px; 
    margin: 0 auto;
    justify-content: center; /* Center the grid items */
    width: 100%;
    max-width: 100%; /* Ensure it doesn't exceed container */
    box-sizing: border-box;
}
/* Adjust minmax width for systems cards if needed */
@media (min-width: 768px) {
    .systems {
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); 
        
        /*overflow-y: scroll;*/
    }

}
.sys{border:1px solid transparent;border-radius:14px;padding:12px;background:#ffffff;backdrop-filter:blur(4px)  
}
.tco-card h3{margin:0  
}
.tco-card .spacer{height:12px  
}
.tco-row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start  
}
.tco-left{white-space:pre-wrap;font-weight:500  
}
.tco-right{white-space:pre-wrap;text-align:right;flex:1;font-size:0.7em;font-weight:400  
}
.tco-right b,.tco-right strong{font-weight:400  
}

.mono{white-space:pre;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace  
}
.sys h3{margin:0 0 8px;font-size:16px  
}
.badgerow{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 8px  
}
.capex,.allin{display:inline-block;border:1px solid var(--border);padding:4px 10px;border-radius:10px;font-weight:800  
}
table{width:100%;border-collapse:collapse;margin-top:6px  
}
th,td{padding:6px 6px;border-bottom:1px solid var(--border);text-align:right  
}
th:first-child,td:first-child{text-align:left  
}
.heatbar{position:relative;height:12px;border-radius:8px;overflow:hidden;border:1px solid var(--border);background:#f3f4f6;margin-top:6px  
}
.fill{position:absolute;top:0;left:0;height:100%;width:0;background:#22c55e  
}
.marker{position:absolute;top:-4px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:8px solid #22c55e  
}
.legend{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:6px  
}
.tcochips{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px  
}
.chip{border:1px solid var(--border);padding:4px 8px;border-radius:999px;background:#f3f4f6;font-size:12px  
}
.maint{margin-top:6px;font-size:12px;color:#111  
}
.rankrow{display:flex;align-items:center;gap:8px;margin-top:6px  
}
.ranklabel{font-size:12px;color:#111;min-width:84px  
}
.rankticks{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none  
}
.rankticks::before{content:"";position:absolute;left:25%;top:0;bottom:0;border-left:1px dashed var(--border)  
}
.rankticks::after{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed var(--border)  
}
.rankticks i{position:absolute;top:0;bottom:0;border-left:1px dashed var(--border)  
}
.rankticks i:last-child{left:75%  
}
/* Removed the old media query for grid, replaced with responsive grid rules above */


input[type=range]::-webkit-slider-thumb {
  background: #333333;
  
}
input[type=range]::-moz-range-thumb {
  background: #333333;
  
}
input[type=range]::-ms-thumb {
  background: #333333;
  
}
input[type=range] {
  accent-color: #333333;
  
}

td:has(> :is(:contains("Jan – Dec"), :contains("Feb – Nov"), :contains("Már – Okt"), :contains("Ápr – Szept"), :contains("Máj – Aug"), :contains("Jún – Júl"))) {
  font-weight: 400 !important;
  
}


tbody tr:has(td:first-child:matches("Jan – Dec|Feb – Nov|Már – Okt|Ápr – Szept|Máj – Aug|Jún – Júl|Egy teljes év")) td {
  font-weight: 400 !important;
  
}


tbody tr:has(td:first-child:matches("Jan – Dec|Feb – Nov|Már – Okt|Ápr – Szept|Máj – Aug|Jún – Júl|Egy teljes év")) td {
  font-size: 0.9em !important;
  
}


*:has-text("kWh/m²a"), *:has-text("kWh/év") {
  font-size: 0.9em !important;
  
}


.sys[data-title*="Gázkazán + padlófűtés + Ablak"] {
  /* Removed fixed width/height, let responsive grid handle it */
  /* flex: 0 0 380px !important;
  width: 380px !important;
  height: auto !important;
  box-sizing: border-box; */
  
}

.rankticks:after,
.rankticks:before{
  display: none;

}


/* Removed the old max-width and overflow rule */
.energowindow-calculator-container { /* Applied to the new wrapper */
    max-width: 100vw; /* Already set above */
    overflow-x: hidden; /* Already set above */
}


.rankbadge {
    /* Adjusted positioning for responsiveness */
    position: absolute;
    top: 7%; /* Changed from calc */
    left: calc(100% - 60px);
    transform: translateY(-50%); /* Changed from -0% */
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    font-size: 16px;
    color: #fff;
    z-index: 10;
}

p:has(span:contains("év")),
p:has(span:contains("Év")),
p:contains("év"),
p:contains("Év") {
    font-size: 0.8em;
}

div:contains("év"),
div:contains("Ft"),
span:contains("év"),
span:contains("Ft") {
    font-size: 0.8em !important;
}


/* Force 0.8em on cost-period bubbles and similar chips */
span:contains("év"),
div:contains("év"),
p:contains("év"),
li:contains("év"),
a:contains("év"),
button:contains("év"),
span:contains("Ft"),
div:contains("Ft"),
p:contains("Ft"),
li:contains("Ft"),
a:contains("Ft"),
button:contains("Ft") {
  font-size: 0.8em !important;
  line-height: 1.25em;
}

.circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
}

/* --- Force white background for bottom 4 system cards --- */
.sys { background: #ffffff !important; }


/* --- Vertical gap between top controls and bottom 4 system cards --- */
.sys { margin-top: 20px !important; }


/* === Finomított luxus háttér (meleg, de nem harsány arany-borostyán tónus) === */
/* This is now handled by the .energowindow-calculator-container background */
/* .energowindow-body { position: relative; overflow: hidden; } */
/* .energowindow-body::before { ... } */
/* .energowindow-body::after { ... } */
/* @keyframes ... */
/* === Árnyék láthatóság kényszerítése minden kártyán === */
.grid, .row { overflow: visible !important; }
.card {
  position: relative;
  z-index: 1;
  background: #ffffff !important;
  box-shadow: 0 14px 35px rgba(0,0,0,0.45) !important;
  border-radius: 16px;
  transform: translateZ(0); /* új réteg, a blendinghez */
}


/* --- Árnyék az alsó 4 rendszer-kártyára ('.sys') kényszerítve --- */
.sys {
  position: relative !important;
  z-index: 2 !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 35px rgba(0,0,0,0.45) !important;
  overflow: visible !important;
}



  .energowindow-body::-webkit-scrollbar { /* Chrome, Edge, Safari – rejtett sáv */
    display: none;
  }

  input[type="range"] {
    -webkit-appearance: none;
    width: 100%; /* Ensure full width */
    height: 6px;
    background: linear-gradient(90deg, #ff595e, #ffca3a, #8ac926, #1982c4);
    border-radius: 4px;
    outline: none;
  }

  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, #ccc);
    border: 2px solid #333;
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
  }

  input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, #ccc);
    border: 2px solid #333;
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
  }

  /* Responsive adjustments for smaller screens */
  @media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr; /* Force single column on small screens */
    }
    .kpi {
        grid-template-columns: 1fr; /* Force single column for KPIs */
    }
    .controls {
        grid-template-columns: 1fr; /* Force single column for controls */
    }
    .systems {
        grid-template-columns: 1fr; /* Force single column for system cards */
        gap: 10px; /* Reduce gap slightly */
    }
    .sys {
        margin-top: 10px !important; /* Reduce margin */
    }
    .tco-right { /* Adjust TCO right side text */
        font-size: 0.6em !important; /* Make smaller */
        width: auto !important; /* Allow width to adjust */
        flex: none !important; /* Don't grow */
        margin-left: 0 !important; /* Remove auto margin */
        text-align: left !important; /* Align left for better fit */
    }
    .tco-left { /* Adjust TCO left side text */
        flex: 1; /* Allow to grow */
    }
    .card {
        padding: 10px; /* Reduce padding */
    }
    h3 { /* Adjust H3 in system cards */
        font-size: 16px; /* Reduce font size */
    }
    .rankbadge { /* Adjust rank badge positioning */
        left: calc(100% - 60px); /* Move closer */
        width: 36px; /* Reduce size */
        height: 36px;
        font-size: 14px; /* Reduce font size */
    }
    .tco-card { /* Adjust TCO card details */
        margin-top: -10px; /* Reduce margin */
    }
    .tco-row { /* Adjust TCO row layout */
        flex-direction: column; /* Stack label and details */
        align-items: flex-start;
        gap: 2px;
    }
    .tco-right {
        margin-left: 0; /* Reset margin after stacking */
    }
  }

  @media (max-width: 480px) {
    .energowindow-calculator-container {
        font-size: 14px; /* Slightly smaller base font */
    }
    .card {
        padding: 8px; /* Further reduce padding */
    }
    .label {
        font-size: 11px; /* Smaller label font */
    }
    .val {
        font-size: 14px; /* Adjust val font */
    }
    .tco-right {
        font-size: 0.5em !important; /* Even smaller on very small screens */
    }
    .tcochips {
        flex-wrap: wrap; /* Allow chips to wrap */
    }
    .chip {
        font-size: 11px; /* Smaller chip font */
    }
    .maint {
        font-size: 11px; /* Smaller maint font */
    }
  }