/* GPUIndia — /gpu-tco/ : GPU TCO Calculator page styles.
   Extends ../style.css + ../rental.css (nav, footer, summary-grid, card tables, prose).
   This sheet styles the TCO-family linear controls (range/number/select + control-group)
   and — crucially — adds the horizontal gutter these calculator pages lack in their
   <main> (the rental hub uses .container wrappers; TCO/electricity pages don't). */

.gpu-tco-controls {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:16px 0 8px;
}

/* ---- Horizontal gutter for this calculator page's <main> ----
   The TCO/electricity pages use <main style="max-width:1180px"> with NO .container
   wrapper, so on mobile their content runs edge-to-edge. Give main the same
   gutters as style.css's .container and center it. */
main {
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
  box-sizing:border-box;
}
@media (max-width:400px){
  main { padding:0 14px; }
}

.control-group {
  display:flex;
  flex-direction:column;
  gap:7px;
  flex:1 1 240px;
  min-width:220px;
}

.control-label {
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--text-dim);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.control-label .ctrl-val {
  color:var(--green);
  font-weight:800;
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  white-space:nowrap;
  text-transform:none;
  letter-spacing:0;
}

/* ---- Range sliders: clean, accent-tinted, mobile-friendly ---- */
.control-group input[type="range"] {
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:6px;
  border-radius:6px;
  background:linear-gradient(90deg,var(--green),var(--blue));
  outline:none;
  cursor:pointer;
  padding:0;
  margin:6px 0;
}

.control-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  width:18px; height:18px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--blue);
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  cursor:grab;
  transition:transform .12s ease;
}
.control-group input[type="range"]::-webkit-slider-thumb:hover { transform:scale(1.12); }
.control-group input[type="range"]::-webkit-slider-thumb:active { cursor:grabbing; }

.control-group input[type="range"]::-moz-range-thumb {
  width:18px; height:18px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--blue);
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  cursor:grab;
}
.control-group input[type="range"]::-moz-range-track { height:6px; border-radius:6px; background:var(--border); }
.control-group input[type="range"]::-moz-range-progress { height:6px; border-radius:6px; background:var(--green); }

/* ---- Number inputs: match the dropdowns from rental.css ---- */
.control-group input[type="number"] {
  width:100%;
  padding:10px 12px;
  font-size:14px;
  font-family:'JetBrains Mono',monospace;
  color:var(--text);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.control-group input[type="number"]:focus {
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(56,189,248,.12);
}
.control-group input[type="number"]::-webkit-inner-spin-button { opacity:.35; }

/* ---- select (GPU picker): reuse site look explicitly for this page ---- */
.control-group select {
  width:100%;
  padding:10px 36px 10px 12px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:14px;
  color:var(--text);
  cursor:pointer;
}
.control-group select:focus { border-color:var(--blue); outline:none; box-shadow:0 0 0 3px rgba(56,189,248,.12); }

/* ---- Result tables: keep roomy on mobile, sticky first col optional ---- */
.table-wrapper { margin-top:16px; }

/* ---- Spec line under title ---- */
.gpu-spec-line {
  font-size:13px;
  color:var(--text-dim);
  margin:0 0 14px;
}
.gpu-spec-line strong { color:var(--green); }

/* ---- Breakeven callout ---- */
.be-callout {
  background:linear-gradient(180deg,rgba(0,230,118,.06),var(--card));
  border:1px solid rgba(0,230,118,.35);
  border-radius:var(--radius);
  padding:14px 16px;
  margin:18px 0 8px;
  font-size:14px;
  line-height:1.6;
}
.be-callout strong { color:var(--green); }

/* ---- Compact spacing for the control stack on small screens ---- */
@media (max-width:520px) {
  .controls + .controls { margin-top:6px; }
  .gpu-tco-controls { gap:12px; }
}