/* Web Sales Concierge — Instant Quote modal (de-linkable module; see iq.js).
 * Own stylesheet so removing the include removes every trace. Inherits the
 * widget's palette variables from wsc.css (always loaded first). */

.wsc-iq { position: fixed; inset: 0; z-index: 60; display: none; }
.wsc-iq.show { display: block; }
.wsc-iq-back { position: absolute; inset: 0; background: rgba(18, 54, 38, .55); backdrop-filter: blur(2px); }
.wsc-iq-box {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100% - 24px)); height: min(680px, calc(100% - 24px));
  background: var(--wsc-bg); border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
  animation: wscIqIn .18s ease-out;
}
@keyframes wscIqIn { from { opacity: 0; transform: translate(-50%, -48%) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.wsc-iq-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: var(--wsc-green-deep); color: #fff; flex: 0 0 auto;
}
.wsc-iq-title { flex: 1; min-width: 0; }
.wsc-iq-title b { font-size: 15px; display: block; }
.wsc-iq-title span { font-size: 12px; color: #9fceb2; display: block; }
.wsc-iq-nav {
  border: 0; background: rgba(255, 255, 255, .12); color: #dff4e7; border-radius: 999px;
  padding: 6px 12px; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.wsc-iq-nav:hover { background: rgba(255, 255, 255, .2); }
.wsc-iq-x { border: 0; background: transparent; color: #9fceb2; font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.wsc-iq-x:hover { color: #fff; }

.wsc-iq-body { flex: 1; overflow-y: auto; padding: 14px; -webkit-overflow-scrolling: touch; }
.wsc-iq-empty { text-align: center; color: var(--wsc-ink-2); font-size: 14px; padding: 40px 20px; }
.wsc-iq-spin {
  display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px;
  border: 2.5px solid var(--wsc-line); border-top-color: var(--wsc-green); border-radius: 50%;
  animation: wscIqSpin .8s linear infinite;
}
@keyframes wscIqSpin { to { transform: rotate(360deg); } }

/* ── the offers wall ── */
.wsc-iq-offer {
  position: relative; background: var(--wsc-card); border: 1.5px solid var(--wsc-line);
  border-radius: 14px; padding: 16px 14px 14px; margin-bottom: 12px; cursor: pointer;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.wsc-iq-offer:hover { border-color: var(--wsc-green); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15, 107, 49, .16); }
.wsc-iq-offer .save {
  position: absolute; top: -10px; right: 12px; background: var(--wsc-green); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .3px; border-radius: 999px; padding: 4px 10px;
  box-shadow: 0 2px 8px rgba(15, 107, 49, .3);
}
.wsc-iq-offer h3 { margin: 0 0 4px; font-size: 16px; color: var(--wsc-green-deep); }
.wsc-iq-offer .ds { margin: 0 0 10px; font-size: 12.5px; color: var(--wsc-ink-2); line-height: 1.5; }
.wsc-iq-offer .lines { list-style: none; margin: 0 0 10px; padding: 0; }
.wsc-iq-offer .lines li {
  display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 6px;
  margin: 0 -6px; border-bottom: 1px dashed var(--wsc-line); border-radius: 6px; transition: background .1s;
}
.wsc-iq-offer .lines li:hover { background: var(--wsc-green-soft); }
.wsc-iq-offer .lines li:last-child { border-bottom: 0; }
.wsc-iq-offer .lines .rp { color: var(--wsc-muted); white-space: nowrap; }
.wsc-iq-offer .tot { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; margin-bottom: 10px; }
.wsc-iq-offer .tot .lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--wsc-muted); }
.wsc-iq-offer .tot .retail { font-weight: 700; color: var(--wsc-green-deep); font-size: 14.5px; }
.wsc-iq-offer .tot .retail.cut { text-decoration: line-through; color: var(--wsc-muted); font-weight: 500; font-size: 13px; }
.wsc-iq-offer .tot .bundle { font-weight: 800; color: var(--wsc-green-deep); font-size: 16px; }
.wsc-iq-offer .tot .plan { grid-column: 1 / -1; font-size: 11.5px; color: var(--wsc-muted); }
.wsc-iq-go.full { display: block; width: 100%; border-radius: 10px; }

/* quote view additions */
.wsc-iq-sum .save-tag { background: var(--wsc-green); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px; }
.wsc-iq-sum .retailcut { color: var(--wsc-muted); font-size: 12.5px; }
.wsc-iq-form h3, .wsc-iq-done h3 { margin: 0 0 8px; font-size: 15.5px; color: var(--wsc-green-deep); }
.wsc-iq-form .fld { margin-bottom: 10px; }
.wsc-iq-form .fld label { display: block; font-size: 12px; color: var(--wsc-muted); margin-bottom: 3px; }
.wsc-iq-form .fld input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--wsc-line); border-radius: 9px;
  font-size: 15px; color: var(--wsc-ink); background: #fff; box-sizing: border-box;
}
.wsc-iq-form .fld input:focus { outline: 2px solid var(--wsc-green); outline-offset: 0; border-color: var(--wsc-green); }
.wsc-iq-form .fine, .wsc-iq-done .fine { margin: 8px 0 0; font-size: 11.5px; color: var(--wsc-muted); }
.wsc-iq-done .mut { margin: 0 0 8px; font-size: 13px; color: var(--wsc-ink-2); }
.wsc-iq-cta {
  display: block; text-align: center; margin-top: 4px; padding: 12px 16px; border-radius: 10px;
  background: var(--wsc-green); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none;
}
.wsc-iq-cta:hover { background: #0c5828; }

/* ── manufacturer grid (legacy, unused by the offers wall) ── */
.wsc-iq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wsc-iq-mfr {
  background: var(--wsc-card); border: 1px solid var(--wsc-line); border-radius: 14px;
  padding: 16px 12px 14px; text-align: center; cursor: pointer; position: relative;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.wsc-iq-mfr:hover { border-color: var(--wsc-green); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15, 107, 49, .12); }
.wsc-iq-mfr .av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; margin-bottom: 8px;
  background: radial-gradient(circle at 30% 30%, #7fd4a5, #0f6b31);
  color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .5px;
}
.wsc-iq-mfr b { display: block; font-size: 14px; color: var(--wsc-ink); }
.wsc-iq-mfr .ct { display: block; font-size: 12px; color: var(--wsc-muted); margin-top: 2px; }
.wsc-iq-mfr .inb {
  position: absolute; top: 8px; right: 8px; background: var(--wsc-green); color: #fff;
  font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 3px 8px;
}

/* ── product list ── */
.wsc-iq-prod {
  background: var(--wsc-card); border: 1px solid var(--wsc-line); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 10px; transition: border-color .12s;
}
.wsc-iq-prod.sel { border-color: var(--wsc-green); box-shadow: 0 0 0 1px var(--wsc-green) inset; }
.wsc-iq-prod .row1 { display: flex; align-items: center; gap: 10px; }
.wsc-iq-prod .info { flex: 1; min-width: 0; }
.wsc-iq-prod .info b { font-size: 14.5px; display: block; }
.wsc-iq-prod .mdl { font-size: 11.5px; color: var(--wsc-muted); text-transform: uppercase; letter-spacing: .4px; }
.wsc-iq-prod .prc { display: block; font-size: 12.5px; color: var(--wsc-green-deep); font-weight: 600; margin-top: 2px; }
.wsc-iq-prod .step { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.wsc-iq-prod .step button {
  width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--wsc-green);
  background: var(--wsc-card); color: var(--wsc-green); font-size: 18px; line-height: 1;
  cursor: pointer; transition: background .12s;
}
.wsc-iq-prod .step button:hover:not(:disabled) { background: var(--wsc-green-soft); }
.wsc-iq-prod .step button:disabled { opacity: .35; cursor: default; }
.wsc-iq-prod .step .pls { background: var(--wsc-green); color: #fff; }
.wsc-iq-prod .step .pls:hover { background: #0c5828; }
.wsc-iq-prod .qty { min-width: 18px; text-align: center; font-weight: 700; font-size: 15px; }
.wsc-iq-prod .dtl {
  border: 0; background: transparent; color: var(--wsc-muted); font-size: 12px;
  cursor: pointer; padding: 6px 0 0; text-decoration: underline dotted;
}
.wsc-iq-prod .dtl:hover { color: var(--wsc-green); }
.wsc-iq-prod .desc { font-size: 13px; color: var(--wsc-ink-2); padding-top: 6px; line-height: 1.5; }

/* ── cart bar ── */
.wsc-iq-cartbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--wsc-card); border-top: 1px solid var(--wsc-line);
}
.wsc-iq-cartbar[hidden] { display: none; }
.wsc-iq-cartbar .sums { display: flex; gap: 14px; flex: 1; }
.wsc-iq-cartbar .sums span i { display: block; font-style: normal; font-size: 10.5px; color: var(--wsc-muted); text-transform: uppercase; letter-spacing: .4px; }
.wsc-iq-cartbar .sums span b { font-size: 14.5px; color: var(--wsc-green-deep); }
.wsc-iq-go {
  border: 0; border-radius: 999px; background: var(--wsc-green); color: #fff;
  padding: 11px 16px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.wsc-iq-go:hover { background: #0c5828; }
.wsc-iq-go em { font-style: normal; opacity: .8; font-weight: 500; font-size: 12px; margin-left: 6px; }

/* ── pricing view ── */
.wsc-iq-body .card {
  background: var(--wsc-card); border: 1px solid var(--wsc-line); border-radius: 14px;
  padding: 13px 14px; margin-bottom: 12px;
}
.wsc-iq-body .card .hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.wsc-iq-body .card .hd b { font-size: 14.5px; color: var(--wsc-green-deep); }
.wsc-iq-sum .edit { border: 0; background: transparent; color: var(--wsc-green); font-size: 12.5px; cursor: pointer; text-decoration: underline; }
.wsc-iq-sum .ln { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 4px 0; color: var(--wsc-ink-2); }
.wsc-iq-sum .ln b { color: var(--wsc-ink); font-size: 13px; white-space: nowrap; }
.wsc-iq-sum .tot { display: flex; gap: 16px; border-top: 1px solid var(--wsc-line); margin-top: 8px; padding-top: 9px; }
.wsc-iq-sum .tot span i, .wsc-iq-est .all span i { display: block; font-style: normal; font-size: 10.5px; color: var(--wsc-muted); text-transform: uppercase; letter-spacing: .4px; }
.wsc-iq-sum .tot span b { font-size: 15px; color: var(--wsc-green-deep); }

.wsc-iq-vol .vv { color: var(--wsc-green); font-size: 17px; }
/* A big, grabbable bar: chunky rounded track + oversized thumb. */
.wsc-iq-vol input[type=range] {
  width: 100%; height: 56px; margin: 4px 0 2px; background: transparent;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.wsc-iq-vol input[type=range]::-webkit-slider-runnable-track {
  height: 22px; border-radius: 999px;
  background: linear-gradient(90deg, var(--wsc-green) 0%, var(--wsc-green) calc(var(--fill, 20) * 1%), var(--wsc-green-soft) calc(var(--fill, 20) * 1%));
  border: 1px solid var(--wsc-line);
}
.wsc-iq-vol input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 38px; height: 38px; border-radius: 50%; margin-top: -9px;
  background: #fff; border: 4px solid var(--wsc-green);
  box-shadow: 0 2px 8px rgba(15, 107, 49, .35);
}
.wsc-iq-vol input[type=range]::-moz-range-track {
  height: 22px; border-radius: 999px; background: var(--wsc-green-soft); border: 1px solid var(--wsc-line);
}
.wsc-iq-vol input[type=range]::-moz-range-progress { height: 22px; border-radius: 999px; background: var(--wsc-green); }
.wsc-iq-vol input[type=range]::-moz-range-thumb {
  width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 4px solid var(--wsc-green);
  box-shadow: 0 2px 8px rgba(15, 107, 49, .35);
}
.wsc-iq-vol .scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--wsc-muted); font-weight: 600; }

.wsc-iq-mode { display: flex; gap: 8px; margin-bottom: 12px; }
.wsc-iq-mode .opt {
  flex: 1; padding: 11px 10px; border-radius: 12px; border: 1.5px solid var(--wsc-line);
  background: var(--wsc-card); color: var(--wsc-ink-2); font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: all .12s;
}
.wsc-iq-mode .opt:hover { border-color: var(--wsc-green); }
.wsc-iq-mode .opt.on { background: var(--wsc-green); border-color: var(--wsc-green); color: #fff; }

.wsc-iq-est .big { font-size: 19px; font-weight: 700; color: var(--wsc-green-deep); margin: 2px 0 8px; }
.wsc-iq-est .mut { margin: 0 0 6px; font-size: 13px; color: var(--wsc-ink-2); }
.wsc-iq-est .all { display: flex; gap: 16px; border-top: 1px solid var(--wsc-line); margin-top: 10px; padding-top: 9px; }
.wsc-iq-est .all span b { font-size: 15px; color: var(--wsc-green-deep); }
.wsc-iq-est .fine { margin: 10px 0 0; font-size: 11.5px; color: var(--wsc-muted); }

@media (max-width: 480px) {
  .wsc-iq-box { width: 100%; height: 100%; border-radius: 0; }
  .wsc-iq-cartbar .sums { gap: 10px; }
  .wsc-iq-cartbar .sums span b { font-size: 13px; }
}

/* Said before the claim, when the toggle is showing a structure this bundle
   does not carry — the offer still arrives on the bundle's own plan. */
.wsc-iq-plannote {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--wsc-iq-line, #e2e6e2);
  border-left: 3px solid var(--wsc-iq-accent, #1f5c3a);
  border-radius: 8px;
  background: var(--wsc-iq-soft, #f6f8f6);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--wsc-iq-mut, #5b665c);
}
.wsc-iq-plannote b { color: var(--wsc-iq-ink, #14231a); }

/* Every configured tier, shown before the claim — the rate line above can
   only carry the range, and the minted proposal renders each one. */
.wsc-iq-tiers {
  display: grid;
  gap: 3px;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--wsc-iq-line, #e2e6e2);
  font-size: 12px;
  color: var(--wsc-iq-mut, #5b665c);
}
.wsc-iq-tiers span { display: flex; justify-content: space-between; gap: 10px; }
.wsc-iq-tiers i { font-style: normal; opacity: .85; }