/* ==========================================================================
   SOLOR Quick Calculator – Full CSS (Split-Left Compact Layout)
   ========================================================================== */

/* ---- Theme / layout config (tweak these) ---- */
:root{
  --solor-primary:#F39712;      /* primary brand */
  --solor-accent:#2D4191;       /* secondary */
  --solor-text:#0f172a;
  --solor-muted:#6b7280;
  --solor-bg:#fff;
  --solor-border:#e5e7eb;
  --solor-radius:12px;
  --solor-shadow:0 6px 16px rgba(0,0,0,.05);
  --base-size:14px;

  /* Left column width (360–520px usually looks best) */
  --sqc-left:420px;
}

/* ===== LAYOUT: left fixed panel + fluid right (hardened) ===== */
.sqc-wrap{
  box-sizing:border-box;
  margin:8px auto !important;
  width:100% !important;
  max-width:1280px !important;                      /* keeps same look across themes */
  display:grid !important;
  grid-template-columns:minmax(320px,var(--sqc-left)) minmax(0,1fr) !important;
  gap:16px !important;
  color:var(--solor-text);
  font-size:var(--base-size);
  line-height:1.35;
}
.sqc-wrap, .sqc-left, .sqc-right{ min-width:0; }    /* prevent overflow in nested grids */

/* Left panel card (sticky but NOT full-height) */
.sqc-left{
  background:var(--solor-bg);
  border:1px solid var(--solor-border);
  border-radius:var(--solor-radius);
  box-shadow:var(--solor-shadow);
  padding:14px;

  position:sticky;
  top:8px;
  height:auto;                         /* key: no tall empty tail */
  max-height:calc(100vh - 16px);
  overflow:auto;
}

/* Right area chrome minimal */
.sqc-right{
  display:block !important;
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
}

/* Results appear only after first Calculate (JS adds .has-results) */
#sqc-results{ display:none; }
.has-results #sqc-results{ display:block; }

/* Remove black focus outline some themes inject & link underlines */
.sqc-wrap *:focus,
.sqc-wrap *:focus-visible{ outline:none !important; }
.sqc-wrap a,
.sqc-wrap a:hover,
.sqc-wrap a:focus{ text-decoration:none !important; }

/* ===== TYPOGRAPHY ===== */
.sqc-heading{ margin:0 0 4px; font-weight:800; font-size:20px; line-height:1.15; }
.sqc-sub{ margin:2px 0 10px; color:var(--solor-muted); font-size:12px; }

/* ===== FIELDS ===== */
.sqc-field{ margin:10px 0; }
.sqc-field label{ display:block; font-weight:600; margin-bottom:4px; font-size:14px; }
.sqc-req{ color:#dc2626; margin-left:4px; }
.sqc-radio{ display:flex; gap:12px; flex-wrap:wrap; }
.sqc-unit-toggle{ display:flex; gap:10px; margin-bottom:4px; }

.sqc-left input[type="text"],
.sqc-left input[type="number"],
.sqc-left input[type="tel"],
.sqc-left input[type="email"],
.sqc-left select{
  width:100%;
  height:36px;
  padding:6px 10px;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#fff;
  font:inherit;
  outline:none;
  transition:.12s border-color, .12s box-shadow;
  box-sizing:border-box; /* prevents “falling out of box” */
}
.sqc-left input:focus,
.sqc-left select:focus{
  border-color:var(--solor-primary);
  box-shadow:0 0 0 2px rgba(243,151,18,.20);
}
.sqc-tip{ font-size:11px; color:var(--solor-muted); margin-top:4px; }

/* ===== SLIDER: bubble + filled track (override-proof) ===== */
.sqc-slider{ position:relative; padding-top:26px; }
.sqc-slider input[type=range]{
  width:100%;
  height:8px;
  -webkit-appearance:none !important; appearance:none !important;
  background:
    linear-gradient(var(--solor-primary),var(--solor-primary)) no-repeat,
    #eef2f7 !important;                                   /* base track */
  background-size:var(--sx,0%) 100% !important;           /* filled portion set via JS */
  border-radius:999px;
}
.sqc-slider input[type=range]::-webkit-slider-runnable-track{
  height:8px; background:transparent !important; border-radius:999px; /* kill green theme bar */
}
.sqc-slider input[type=range]::-moz-range-track{
  height:8px; background:#eef2f7 !important; border-radius:999px;
}
.sqc-slider input[type=range]::-ms-track{
  height:8px; background:#eef2f7 !important;
  border-color:transparent; color:transparent;
}
.sqc-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; margin-top:-5px;
  border-radius:50%;
  background:var(--solor-primary);
  border:2px solid #fff;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.sqc-slider input[type=range]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--solor-primary);
  border:2px solid #fff;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.sqc-bubble{
  position:absolute; top:0; transform:translateX(-50%);
  padding:3px 8px; font-size:11px; line-height:16px; color:#fff;
  background:var(--solor-primary); border-radius:999px;
  pointer-events:none; white-space:nowrap;
}
.sqc-bubble::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-6px; border:6px solid transparent; border-top-color:var(--solor-primary);
}
.sqc-slider-meta{ display:flex; justify-content:space-between; font-size:11px; color:var(--solor-muted); margin-top:4px; }

/* ===== BUTTONS (hardened so text stays visible) ===== */
.sqc-actions{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.sqc-btn{
  cursor:pointer;
  padding:9px 14px;
  border-radius:10px;
  border:1px solid var(--solor-primary);
  background:var(--solor-primary);
  color:#fff !important;                                  /* ensure readable text */
  font-weight:700; font-size:14px;
  transition:transform .08s, box-shadow .2s;
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1.15; white-space:nowrap;
}
.sqc-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 16px rgba(243,151,18,.2); }
.sqc-btn.ghost{ background:#fff; color:var(--solor-primary) !important; }
.sqc-btn.accent{
  background:var(--solor-accent) !important;
  border-color:var(--solor-accent) !important;
  color:#fff !important;
}
/* Safety for this specific button text */
button#sqc-roi-emi{ color:#fff !important; }

/* Sticky Calculate on mobile (slim) */
@media (max-width: 900px){
  .sqc-sticky-mobile{
    position:sticky; bottom:10px; z-index:5;
    background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 34%);
    padding-top:10px;
  }
}

/* ===== RESULTS (cards) ===== */
.sqc-results-title{ margin:6px 0 10px; font-weight:800; font-size:18px; }
.sqc-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.sqc-card{
  border:1px solid var(--solor-border);
  border-radius:10px;
  background:#fff;
  box-shadow:var(--solor-shadow);
  padding:12px;
}
.sqc-card-title{
  font-size:12px; color:var(--solor-muted);
  margin-bottom:6px; display:flex; align-items:center; gap:8px;
}
.sqc-ico{ width:18px; height:18px; color:#111; display:inline-flex; }
.sqc-ico svg{ width:18px; height:18px; }
.sqc-big{ font-size:24px; font-weight:800; color:var(--solor-text); }
.sqc-sub{ font-size:12px; color:var(--solor-muted); }

/* Advisories — neutral, compact */
.sqc-notes{ margin-top:8px; display:grid; gap:6px; }
.sqc-note{
  background:#f5f6f8; border:1px solid #e7e9ee; color:#374151;
  padding:8px 10px; border-radius:10px; font-size:12px;
}

.sqc-cta{ margin-top:10px; }
.sqc-divider{ height:1px; background:var(--solor-border); margin:12px 0; }

/* ===== ROI / LEAD section polish ===== */
#sqc-results,
.sqc-lead,
.sqc-roi{
  background:#fff;
  border:1px solid var(--solor-border);
  border-radius:10px;
  box-shadow:var(--solor-shadow);
  padding:12px;
}
.sqc-lead{ margin-top:12px; }
.sqc-roi{  margin-top:12px; }

.sqc-lead h4{
  margin:0 0 10px;
  font-weight:700;
  font-size:16px;
}
.sqc-lead .sqc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
  gap:12px;
  align-items:end;
}
.sqc-lead .sqc-field label{
  margin-bottom:4px;
  font-size:13px;
  color:var(--solor-muted);
}
/* match left inputs */
.sqc-lead .sqc-field input,
.sqc-lead .sqc-field select,
.sqc-lead .sqc-field textarea{
  width:100%;
  height:36px;
  padding:6px 10px;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#fff;
  font:inherit;
  box-sizing:border-box;
  transition:.12s border-color, .12s box-shadow;
}
.sqc-lead .sqc-field textarea{
  height:80px;                         /* nicer note box */
  resize:vertical;
}
.sqc-lead .sqc-field input:focus,
.sqc-lead .sqc-field select:focus,
.sqc-lead .sqc-field textarea:focus{
  outline:none;
  border-color:var(--solor-primary);   /* orange focus */
  box-shadow:0 0 0 2px rgba(243,151,18,.20);
}
.sqc-privacy{ font-size:11px; color:var(--solor-muted); }

/* ===== Responsive alignment tuning ===== */
@media (max-width: 1400px){ :root{ --sqc-left: 400px; } }
@media (max-width: 1200px){ :root{ --sqc-left: 380px; } }

/* Keep 2 columns down to ~900px; below that, stack */
@media (max-width: 900px){
  .sqc-wrap{
    grid-template-columns:1fr !important; /* stack on tablet/mobile */
  }
  .sqc-left{
    position:static;
    max-height:none;
    overflow:visible;
  }
}

/* Cards/ROI/lead grids auto-fit so they don’t overflow in narrow viewports */
.sqc-roi .sqc-cards{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
#sqc-results .sqc-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---- END ---- */