/* =========================================================
   R.B. Construction - configurator UI
   ========================================================= */
.cfg{display:grid;grid-template-columns:1.25fr .9fr;gap:34px;align-items:start}

/* ---------- preview ---------- */
.cfg-stage{position:sticky;top:88px}
.cfg-canvas{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-md);position:relative;
}
.cfg-canvas svg{width:100%;height:auto;display:block}
.cfg-watermark{
  position:absolute;top:14px;left:16px;font-family:'Inter',sans-serif;
  font-weight:800;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray-2);pointer-events:none;
}
.cfg-live{
  position:absolute;top:14px;right:16px;display:flex;align-items:center;gap:7px;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-2);
}
.cfg-live i{width:7px;height:7px;border-radius:50%;background:var(--acc);display:block;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

.cfg-spec{
  margin-top:14px;background:var(--ink);color:#fff;border-radius:var(--r);
  padding:18px 20px;display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:space-between;
}
.cfg-spec-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.cfg-spec-title{font-family:'Inter',sans-serif;font-weight:800;font-size:1.22rem;letter-spacing:-.03em}
.cfg-spec-sub{font-size:.86rem;color:rgba(255,255,255,.6);line-height:1.45}
.cfg-spec-sqft{
  font-family:'Inter',sans-serif;font-weight:800;font-size:1.5rem;color:var(--acc);
  letter-spacing:-.03em;white-space:nowrap;
}
.cfg-spec-sqft small{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:700}

.cfg-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.cfg-actions .btn{flex:1;min-width:150px}
.cfg-hint{
  font-size:.84rem;color:var(--gray-2);margin-top:14px;text-align:center;
  grid-column:1/-1;   /* sits under both columns rather than beside the panel */
}

/* ---------- controls ---------- */
.cfg-panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.cfg-presets{padding:20px 22px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.cfg-presets .grp-title{margin-bottom:12px}
.preset-row{display:flex;flex-wrap:wrap;gap:8px}
.preset{
  border:1px solid var(--line-2);background:#fff;border-radius:8px;padding:8px 13px;
  font-family:'Inter',sans-serif;font-size:.86rem;font-weight:600;color:var(--ink-2);
  cursor:pointer;transition:all .16s;
}
.preset:hover{border-color:var(--ink);transform:translateY(-1px)}

.grp{padding:22px;border-bottom:1px solid var(--line)}
.grp:last-child{border-bottom:0}
.grp-title{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:'Inter',sans-serif;font-weight:700;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:16px;
}
.grp-title span{font-family:'Inter',sans-serif;font-weight:600;letter-spacing:0;text-transform:none;font-size:.9rem;color:var(--acc)}

/* sliders */
.slider-row{margin-bottom:18px}
.slider-row:last-child{margin-bottom:0}
.slider-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.slider-head label{font-size:.83rem;font-weight:600;color:var(--gray);letter-spacing:.02em}
.slider-head b{font-family:'Inter',sans-serif;font-size:1.06rem;font-weight:800;color:var(--ink);letter-spacing:-.02em}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;
  background:var(--line-2);outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--ink);cursor:pointer;border:3px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.3);
  transition:transform .15s,background .15s;
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12);background:var(--acc)}
input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:var(--ink);cursor:pointer;
  border:3px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.3);
}
.slider-scale{display:flex;justify-content:space-between;font-size:.72rem;color:var(--gray-2);margin-top:5px}

/* segmented / tiles */
.seg{display:flex;gap:6px;background:var(--bg-2);padding:4px;border-radius:9px}
.seg button{
  flex:1;border:0;background:transparent;padding:9px 8px;border-radius:6px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.87rem;font-weight:600;color:var(--gray);transition:all .16s;
}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--ink);color:#fff}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.tile{
  border:1.5px solid var(--line-2);background:#fff;border-radius:9px;padding:12px 10px;
  cursor:pointer;text-align:center;transition:all .16s;display:flex;flex-direction:column;
  align-items:center;gap:7px;
}
.tile:hover{border-color:var(--gray);transform:translateY(-2px)}
.tile.on{border-color:var(--acc);box-shadow:0 0 0 3px rgba(255,106,31,.13)}
.tile svg{width:100%;height:38px;display:block}
.tile b{font-family:'Inter',sans-serif;font-size:.79rem;font-weight:600;color:var(--ink-2);line-height:1.25}

/* swatches */
.swatches{display:flex;flex-wrap:wrap;gap:9px}
.sw{
  width:44px;height:44px;border-radius:9px;cursor:pointer;position:relative;
  border:2px solid rgba(0,0,0,.10);transition:transform .15s,box-shadow .15s;
}
.sw:hover{transform:translateY(-2px) scale(1.05)}
.sw.on{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)}
.sw.on::after{
  content:"";position:absolute;inset:0;background:no-repeat center/16px 16px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.sw-name{font-size:.82rem;color:var(--gray);margin-top:9px;font-weight:600}

/* stepper */
.stepper{display:flex;align-items:center;gap:12px}
.stepper button{
  width:38px;height:38px;border-radius:8px;border:1.5px solid var(--line-2);background:#fff;
  font-size:1.2rem;font-weight:600;color:var(--ink);cursor:pointer;transition:all .16s;line-height:1;
}
.stepper button:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.stepper b{font-family:'Inter',sans-serif;font-size:1.3rem;font-weight:800;min-width:26px;text-align:center}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1.5px solid var(--line-2);background:#fff;border-radius:22px;padding:8px 15px;
  font-size:.87rem;font-weight:600;color:var(--gray);cursor:pointer;transition:all .16s;
  display:inline-flex;align-items:center;gap:7px;
}
.chip:hover{border-color:var(--gray);color:var(--ink)}
.chip.on{border-color:var(--ink);background:var(--ink);color:#fff}
.chip.on::before{content:"";width:14px;height:14px;background:no-repeat center/14px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a1f' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

/* copied toast */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);
  background:var(--ink);color:#fff;padding:13px 22px;border-radius:9px;
  font-size:.92rem;font-weight:600;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;z-index:200;box-shadow:var(--shadow-lg);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:1040px){
  .cfg{grid-template-columns:1fr;gap:26px}
  .cfg-stage{position:static}
}
@media(max-width:800px){
  .cfg-spec{flex-direction:column;align-items:flex-start;gap:10px}
  .cfg-actions .btn{min-width:100%}
}

/* =========================================================
   Phone layout: the build stays pinned to the top half of the
   screen while the controls scroll underneath it, so changing
   size, wall height and roof style no longer means scrolling
   up to check what it did.
   ========================================================= */
@media (max-width: 900px) {
  .cfg { gap: 0; }

  .cfg-stage{
    position: sticky;
    /* site.js publishes the real header height as --hdr-h */
    top: var(--hdr-h, 68px);
    z-index: 60;
    background: var(--bg);
    /* bleed to the edges so scrolling content can't show alongside it */
    margin: 0 -26px;
    /* drawing runs edge to edge - the SVG is 900x560, so its height is
       set by how wide it can get, and the full width buys ~30% more of it */
    padding: 0 0 12px;
    box-shadow: 0 12px 18px -14px rgba(0,0,0,.4);
  }

  /* Cap the drawing rather than forcing a height - a fixed height
     letterboxes the SVG and leaves dead white space under it.
     svh keeps the cap stable as Safari's address bar shows and hides. */
  /* stays a block: #cfgCanvas sits between this box and the SVG, and as a
     flex item it shrink-wraps instead of filling the width */
  .cfg-canvas{
    height:auto;
    border-radius:0;border-left:0;border-right:0;box-shadow:none;
  }
  .cfg-spec,.send-build-bar{ margin-left:26px;margin-right:26px }
  .cfg-canvas svg{ width:100%; height:auto; max-height:34vh; max-height:34svh; }
  .cfg-watermark,.cfg-live{ font-size:.62rem; top:10px }
  .cfg-watermark{ left:12px } .cfg-live{ right:12px }

  /* single-line spec bar. The full selection list is dropped here - a
     one-line clamp truncated most of it anyway, the controls below show
     what is set, and the quote pop-up lists all of it in full. */
  .cfg-spec{
    margin-top:10px;padding:9px 14px;
    flex-direction:row;flex-wrap:nowrap;align-items:center;gap:12px;
  }
  .cfg-spec-title{ font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
  .cfg-spec-sub{ display:none }
  .cfg-spec-sqft{ font-size:1.05rem;display:flex;align-items:baseline;gap:5px }
  .cfg-spec-sqft small{ display:inline;font-size:.58rem }

  /* the quote button rides along with the preview */
  .send-build-bar{ margin-top:10px;padding:0;border:0;background:none }
  .send-build-note{ display:none }
  .send-build-btn{ width:100%;padding:13px 18px;font-size:.95rem }

  /* room at the bottom so the fixed Call/Text bar can't cover the last control */
  .cfg-panel{ margin-top:14px;margin-bottom:84px }
  .cfg-hint{ margin-bottom:84px }
}

/* very short phones - give the controls more of the screen */
@media (max-width: 900px) and (max-height: 700px) {
  .cfg-canvas svg{ max-height:27vh; max-height:27svh; }
}