/* GPUIndia — /gpu-electricity/ : India GPU Electricity Cost 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 (sliders, hero, cards all
   touch the screen sides). Give main the same gutters as style.css's .container,
   center it, and keep the 380px-offset hero labels from bleeding. */
main {
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
  box-sizing:border-box;
}
@media (max-width:400px){
  main { padding:0 14px; }
}

/* ---- FAQ accordion ----
   Matches the site's minimalist .faq-item accordion, but keeps the semantic
   <details>/<summary> disclosure used on these calculator pages. Adds the
   bottom border per item and rotoates the caret when open. */
.faq {
  max-width: 720px;
  margin: 0 auto;
}
details.qa {
  border-bottom: 1px solid var(--border);
}
details.qa summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  user-select: none;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after {
  content: "+";
  color: var(--text-dim);
  font-size: 18px;
  font-weight: 400;
  transition: transform .2s;
  line-height: 1;
}
details.qa[open] summary::after { transform: rotate(45deg); }
details.qa p.qa-body {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
  padding-right: 8px;
}
details.qa[open] summary { border: none; }

/* ---- State-compare table tags ---- */
.row-best td:first-child strong { color: var(--green); }
.best-tag {
  display:inline-block;
  color:#0acf6e;
  background:rgba(10,207,110,.10);
  border:1px solid rgba(10,207,110,.35);
  border-radius:999px;
  padding:2px 10px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.2px;
  white-space:nowrap;
}
.warn-tag {
  color:#ff6b6b;
  background:rgba(255,107,107,.10);
  border:1px solid rgba(255,107,107,.30);
  border-radius:999px;
  padding:2px 10px;
  font-size:11.5px;
  font-weight:600;
  white-space:nowrap;
}
.mid-tag {
  color:var(--text-dim);
  font-size:12px;
  white-space:nowrap;
}

.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; }
}