/* ============================================================
   Build A Pole — 3D configurator UI

   Layout rule: the whole app is exactly one viewport tall at any
   desktop size. Only the control column scrolls, and the price card is
   pinned beneath it, so the total is always on screen.
   ============================================================ */

:root{
  --purple:#5b21c9;
  --purple-dk:#4a12a8;
  --xpole:#89539b;
  --ink:#17171b;
  --line:#e8e6ec;
  --line-2:#dcd9e2;
  --side-w:330px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#fff;font-family:"Parkinsans", sans-serif;
  color:var(--ink);overflow:hidden}
button{font-family:inherit;cursor:pointer}

.app{width:100vw;height:100vh;height:100dvh;display:flex !important;flex-direction:column !important;overflow:hidden}

/* ---------------- TOPBAR ---------------- */
.topbar{width:100%;height:64px;flex:none;background:#fff;border-bottom:1px solid var(--line);
  display:flex !important;flex-direction:row !important;align-items:stretch;justify-content:space-between;padding:0 0 0 24px;box-sizing:border-box;gap:0;z-index:50}
.topbar-left{display:flex;align-items:center;gap:14px;flex:1;justify-content:flex-start}
.topbar-left .brandblock{display:flex;align-items:center}
.topbar-left .logo{height:34px;width:auto;display:block}
.brand-divider{width:1px;height:28px;background:var(--line-2);margin:0 16px;flex:none}
.topbar-left .appname{margin-top:0;font-size:13.5px;font-weight:800;letter-spacing:.2px;line-height:1.2}
.topbar-left .appname span{display:block;font-size:9.5px;font-weight:600;letter-spacing:.6px;
  color:#9a95a8;text-transform:uppercase;margin-top:1px}
.topbar-left .resetbtn{width:32px;height:32px;flex:none;border:1.5px solid var(--line-2);color:#7a7486;
  background:#fff;border-radius:8px;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s ease}
.topbar-left .resetbtn:hover{border-color:var(--purple);color:var(--purple);background:#faf8ff}

/* Topbar Center: Price and Request Quote (single line with generous spacing) */
.topbar-center{display:flex;align-items:center;gap:24px;flex:none;justify-content:center;padding:0 24px}
.topbar-price{display:flex;flex-direction:row;align-items:center;gap:10px;white-space:nowrap}
.topbar-price small{font-size:10.5px;font-weight:800;letter-spacing:.8px;color:#8b8697;text-transform:uppercase;white-space:nowrap}
.topbar-price strong{font-size:20px;font-weight:800;color:var(--purple);letter-spacing:-.3px;white-space:nowrap}
.topbar-quote{width:auto;height:40px;padding:0 22px;margin-top:0;font-size:11.5px;font-weight:800;
  border-radius:8px;white-space:nowrap;letter-spacing:.4px;background:var(--purple);color:#fff;border:0;
  cursor:pointer;transition:background .15s}
.topbar-quote:hover{background:var(--purple-dk)}
.topbar-quote:disabled{opacity:.5;cursor:not-allowed}

/* Topbar Right: Configurator Tabs (visually part of the sidebar column) */
.topbar-right{width:var(--side-w);max-width:var(--side-w);height:100%;flex:none;display:flex;align-items:center;justify-content:center;padding:0 14px;box-sizing:border-box;border-left:1px solid var(--line);background:#faf9fc}
.topbar .cfg-tabs{width:100%;max-width:100%;display:flex;background:#ede9f4;border:1px solid #dcd7ea;border-radius:9px;
  padding:3px;gap:3px;margin:0;box-sizing:border-box}
.topbar .cfg-tab{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 2px;border:1.5px solid transparent;
  border-radius:7px;background:transparent;color:#6c6677;font-size:10.5px;font-weight:700;cursor:pointer;
  transition:all .15s ease;white-space:nowrap;text-align:center}
.topbar .cfg-tab:hover{background:#e2dcee;color:var(--ink)}
.topbar .cfg-tab.active{background:#fff;border-color:#dcd7ea;color:var(--purple);font-weight:800;
  box-shadow:0 1px 4px rgba(91,33,201,.1)}
.topbar .cfg-num{width:17px;height:17px;border-radius:50%;background:#d8d2e4;color:#5a5468;
  display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:800;flex:none;transition:all .15s ease}
.topbar .cfg-tab.active .cfg-num{background:var(--purple);color:#fff}
.topbar .cfg-txt{font-size:10.5px;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------------- APP BODY ---------------- */
.app-body{width:100%;flex:1;min-height:0;display:flex !important;flex-direction:row !important;overflow:hidden;position:relative}

/* ---------------- SIDEBAR (Right) ---------------- */
.side{width:var(--side-w);flex:none;height:100%;background:#fff;border-left:1px solid var(--line);border-right:none;
  display:flex;flex-direction:column;min-height:0;overflow:hidden;z-index:10}

.scroller{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:12px 14px 14px}

.sect{background:#f5f3f8;border-radius:8px;padding:8px 11px;font-size:10px;font-weight:800;
  letter-spacing:.5px;color:#3c3550;margin:14px 0 11px;display:flex;align-items:center;gap:8px}
.scroller > .sect:first-child{margin-top:0}
.sect b{width:17px;height:17px;border-radius:50%;background:var(--purple);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:9px;flex:none}

/* three dimension inputs across one row instead of three stacked rows */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.field{font-size:10.5px;font-weight:600;color:#6c6677;display:block}
.field .unit{display:flex;margin-top:4px}
.field input{width:100%;min-width:0;height:34px;border:1px solid var(--line-2);
  border-radius:7px 0 0 7px;border-right:0;padding:0 7px;font-size:13px;font-weight:600;
  font-family:inherit;color:var(--ink)}
.field input:focus{outline:2px solid #e2d8ff;outline-offset:-1px}
.field .unit i{width:24px;flex:none;border:1px solid var(--line-2);background:#fafafa;
  border-radius:0 7px 7px 0;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-style:normal;color:#999}
/* ceiling height: feet + inches (or mm) + unit toggle */
.ceilfield{margin-top:8px}
.hgtrow{display:flex;gap:6px;margin-top:4px}
.hgtrow .unit{display:flex;flex:1;min-width:0}
.hgtrow.mm .ftin{display:none}
.hgtrow:not(.mm) .mmonly{display:none}
.hgtrow .unit input{width:100%;min-width:0;height:34px;border:1px solid var(--line-2);
  border-radius:7px 0 0 7px;border-right:0;padding:0 7px;font-size:13px;font-weight:600;
  font-family:inherit;color:var(--ink)}
.hgtrow .unit input:focus{outline:2px solid #e2d8ff;outline-offset:-1px}
.hgtrow .unit i{width:22px;flex:none;border:1px solid var(--line-2);background:#fafafa;
  border-radius:0 7px 7px 0;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-style:normal;color:#999}
.hunit{height:34px;flex:none;width:56px;border:1px solid var(--line-2);border-radius:7px;
  background-color:#fafafa;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%237a7486' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:8px 5px;
  font-family:inherit;font-size:11px;font-weight:600;color:var(--ink);padding:0 22px 0 8px;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}
.hunit:focus{outline:none;border-color:var(--purple)}
.hgtnote{font-size:9.5px;color:#9a95a8;margin-top:4px;line-height:1.3}
.hgtnote.err{color:#c0392b}
.arearow{display:flex;justify-content:space-between;align-items:center;font-size:11px;
  color:#8b8697;margin-top:8px}
.arearow b{color:var(--ink);font-size:11.5px}

label.grp{font-size:11px;font-weight:700;display:block;margin:12px 0 6px;color:#4a4458}
label.grp.tight{margin-top:7px}
.buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.buttons.c2{grid-template-columns:repeat(2,1fr)}
.buttons.c3, .buttons.finish{grid-template-columns:repeat(3,1fr)}
.buttons.c5{grid-template-columns:repeat(3,1fr)}
.buttons button{min-height:36px;background:#fff;border:1px solid var(--line-2);border-radius:7px;
  font-size:10.5px;font-weight:600;color:#333;padding:5px 3px;line-height:1.2;
  transition:border-color .12s,background .12s}
.buttons button:hover{border-color:#b9a8e6}
.buttons button.active{border:1.5px solid var(--purple);color:var(--purple);background:#faf8ff;font-weight:800}
.buttons button small{display:block;font-size:8.5px;font-weight:600;color:#9a95a8;margin-top:1px}
.buttons button.active small{color:#8a6fd0}
.buttons.inline{width:150px;gap:5px}
.buttons.inline button{min-height:32px;font-size:10px}
.finish button{padding:6px 2px 5px}

.dotc{width:20px;height:20px;border-radius:50%;margin:0 auto 4px;border:1px solid #c9c5d2;
  background-size:cover;background-position:center}
/* real material swatches supplied by the designer (assets/finishes/) */
.sw-chrome{background-image:url(../assets/finishes/chrome.webp)}
.sw-stainless{background-image:url(../assets/finishes/stainless.webp)}
.sw-powder, .sw-powder_black{background-image:url(../assets/finishes/powder.webp)}
.sw-powder_white{background-image:url(../assets/finishes/powder-white.webp)}
.sw-silicone{background-image:url(../assets/finishes/silicone.webp)}
.sw-brass{background-image:url(../assets/finishes/brass.webp)}

.qtyrow{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:11.5px;font-weight:600;color:#4a4458;margin-top:14px;margin-bottom:9px}
.qty{display:flex;border:1px solid var(--line-2);border-radius:7px;overflow:hidden;flex:none}
.qty button{width:34px;height:32px;border:0;background:#fff;font-size:16px;color:#555}
.qty button:hover{background:#f6f4fa}
.qty b{width:34px;display:flex;align-items:center;justify-content:center;font-size:12.5px}

/* ---- pole line items ---- */
.sect em{font-style:normal;font-weight:600;color:#9a95a8;margin-left:auto;letter-spacing:.2px}
.itemlist{display:flex;flex-direction:column;gap:7px}
.item{border:1px solid var(--line-2);border-radius:9px;overflow:hidden;background:#fff}
.item.open{border-color:var(--purple);box-shadow:0 0 0 2px #f1eaff}

.ihead{width:100%;display:flex;align-items:center;gap:8px;padding:8px 9px;border:0;
  background:#fff;text-align:left}
.item.open .ihead{background:#faf8ff}
.ibadge{flex:none;width:22px;height:22px;border-radius:6px;background:var(--purple);color:#fff;
  font-size:9.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.ititle{flex:1;min-width:0;font-size:11.5px;font-weight:700;line-height:1.25;color:var(--ink)}
.ititle small{display:block;font-size:9.5px;font-weight:600;color:#9a95a8;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iqty{flex:none;font-size:11px;font-weight:800;color:var(--purple);background:#f1eaff;
  border-radius:5px;padding:2px 6px}
.ichev{flex:none;color:#b0aabd;font-size:10px;transition:transform .15s}
.item.open .ichev{transform:rotate(180deg)}

.ibody{display:none;padding:2px 9px 10px;border-top:1px solid var(--line)}
.item.open .ibody{display:block}
.ibody .grp{margin:9px 0 5px;font-size:10px}

.hrow{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.hrow.off{opacity:.45}
.hrow .unit{display:flex;width:96px;flex:none}
.hrow .unit input{width:100%;min-width:0;height:32px;border:1px solid var(--line-2);
  border-radius:7px 0 0 7px;border-right:0;padding:0 7px;font-size:12.5px;font-weight:600;
  font-family:inherit;color:var(--ink)}
.hrow .unit i{width:22px;flex:none;border:1px solid var(--line-2);background:#fafafa;
  border-radius:0 7px 7px 0;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-style:normal;color:#999}
.hrange{font-size:9.5px;color:#9a95a8;line-height:1.3}

/* the pole height reuses the ceiling height's ft+in / mm row, so it dims with
   "full height" the way the old single field did and keeps the card's spacing */
.ibody .hgtrow{margin-bottom:2px}
.ibody .hgtrow.off{opacity:.45}
.ibody .hgtnote{margin-bottom:5px}
.chk{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;
  color:#4a4458;cursor:pointer}
.chk input{width:14px;height:14px;accent-color:var(--purple);margin:0}

/* resolved-part info: model, pole option, what's included */
.poleopt{width:100%;height:34px;margin-bottom:6px;border:1px solid var(--line-2);
  border-radius:7px;background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%237a7486' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:10px 6px;
  font-family:inherit;font-size:12px;font-weight:600;
  color:var(--ink);padding:0 34px 0 9px;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}
.poleopt:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 2px #f1eaff}

.app-select, #clearanceOpt{
  width:100%;height:36px;border:1px solid var(--line-2);border-radius:7px;
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%237a7486' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:10px 6px;
  font-family:inherit;font-size:12px;font-weight:600;
  color:var(--ink);padding:0 34px 0 10px;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;
  transition:border-color .15s,box-shadow .15s}
.app-select:focus, #clearanceOpt:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 2px #f1eaff}
.iinfo{margin-top:9px;margin-bottom:12px;padding:8px 9px;border:1px solid var(--line);border-radius:8px;
  background:#faf9fc;font-size:10.5px;color:#4a4458}
.iinfo .model{font-size:11.5px;font-weight:700;color:var(--ink)}
.iinfo .model .tag{font-weight:600;color:var(--purple);margin-left:4px}
.iinfo .incltitle{margin:7px 0 4px;font-size:9.5px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:#8b8697}
.iincl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.iincl li{display:flex;gap:6px;align-items:flex-start;font-size:11px;color:#4a4458}
.iincl li .ck{color:var(--purple);font-weight:700;flex:none}
.iinfo .mixnote{margin-top:7px;font-size:10px;color:#8a6d1f;background:#fbf4dd;
  border-radius:6px;padding:6px 7px;line-height:1.35}
.iinfo.unavail{background:#fdeeee;border-color:#f2c9c4;color:#c0392b;font-weight:600}

.removeitem{width:100%;margin-top:9px;height:30px;border:1px solid var(--line-2);
  border-radius:7px;background:#fff;font-size:10px;font-weight:700;color:#b04a4a}
.removeitem:hover:not([disabled]){border-color:#d99;background:#fff6f6}
.removeitem[disabled]{opacity:.4}

.addpole{width:100%;margin-top:8px;height:36px;border:1.5px dashed #c3b6e0;border-radius:9px;
  background:#fff;color:var(--purple);font-size:10.5px;font-weight:800;letter-spacing:.3px}
.addpole:hover:not([disabled]){background:#faf8ff;border-color:var(--purple)}
.addpole[disabled]{opacity:.45;border-style:solid}
.hint{font-size:9.5px;color:#9a95a8;line-height:1.5;margin-top:8px}

.pr-sub{font-size:9px;color:#b0aabd;padding:0 0 4px;line-height:1.4}

/* ---- collapsible specification ---- */
.summary{margin-top:14px;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.summary > summary{list-style:none;cursor:pointer;font-size:10px;font-weight:800;
  letter-spacing:.5px;color:#3c3550;padding:10px 11px;background:#faf9fc;
  display:flex;justify-content:space-between;align-items:center}
.summary > summary::-webkit-details-marker{display:none}
.summary[open] .chev{transform:rotate(180deg)}
.chev{transition:transform .15s;color:#9a95a8}
.sumbody{padding:4px 11px 8px}
.sumrow{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #f3f1f6;
  padding:6px 0;font-size:10.5px}
.sumrow:last-child{border:0}
.sumrow span{color:#8b8697;flex:none}
.sumrow b{font-weight:700;text-align:right}
.sumrow b.warn{color:#c0392b}
.sumrow b.warn:after{content:" ⚠"}

/* ---- pinned price ---- */
.price{flex:none;border-top:1px solid var(--line);background:#fcfbfe;padding:11px 14px 13px}
.pr-h{display:flex;justify-content:space-between;align-items:baseline}
.pr-h small{font-size:9.5px;font-weight:800;letter-spacing:.6px;color:#8b8697}
.pr-h strong{color:var(--purple);font-size:22px;letter-spacing:-.5px}
.prtoggle{margin-top:6px;border:0;background:none;padding:0;font-size:10px;font-weight:700;
  color:#8b8697;letter-spacing:.3px}
.prtoggle:hover{color:var(--purple)}
.prlines{display:none;margin-top:6px}
.prlines.on{display:block}
.pr-line{display:flex;justify-content:space-between;font-size:10.5px;color:#8b8697;padding:3px 0}
.pr-line.total{border-top:1px solid var(--line);margin-top:5px;padding-top:6px;color:#222;
  font-weight:800;font-size:11px}
.quote{width:100%;height:42px;border:0;border-radius:9px;background:var(--purple-dk);color:#fff;
  font-weight:800;font-size:12px;margin-top:10px;letter-spacing:.5px}
.quote:hover{background:#3d0d90}
.quote:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ---------------- 3D VIEW ---------------- */
.main{flex:1;min-width:0;height:100%;display:flex;position:relative;background:#e8e6ee;overflow:hidden}
.preview{position:relative;flex:1;min-width:0;width:100%;height:100%;overflow:hidden;background:#e8e6ee;touch-action:none}
#gl{position:absolute;inset:0;width:100% !important;height:100% !important;display:block}
.nogl{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  text-align:center;padding:40px;font-size:13px;color:#555}
.nogl.on{display:flex}
#nofile code{background:#f3f1f7;border-radius:4px;padding:2px 6px;font-size:12px}
#nofile div{max-width:420px;line-height:1.7}

.planview{position:absolute;inset:0;z-index:18;background:#f6f4f1;display:none}
.planview.on{display:block}

/* product film overlay: sits over the canvas like the floor plan, but dark
   so the cinematic clip reads well; the video itself is letterboxed to fit */
.filmview{position:absolute;inset:0;z-index:18;background:#0b0b0d;display:none;
  align-items:center;justify-content:center}
.filmview.on{display:flex}
.filmview video{width:100%;height:100%;object-fit:contain;background:#0b0b0d}
/* the "view pole in 3D" dismiss only appears for the intro (not the demo tab) */
.introclose{display:none;position:absolute;top:14px;left:50%;transform:translateX(-50%);
  z-index:22;background:rgba(255,255,255,.92);color:#1b1b22;border:0;border-radius:8px;
  padding:8px 14px;font:600 11px/1 inherit;letter-spacing:.02em;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.35)}
.introclose:hover{background:#fff}
.filmview.intro .introclose{display:inline-flex}

/* transient toast, bottom-centre of the view */
.toast{position:absolute;left:50%;bottom:22px;transform:translate(-50%,10px);
  z-index:40;max-width:78%;background:#1b1b22;color:#fff;border-radius:9px;
  padding:10px 15px;font-size:12.5px;line-height:1.4;text-align:center;
  box-shadow:0 6px 22px rgba(0,0,0,.3);opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s}
.toast.on{opacity:1;transform:translate(-50%,0)}
#bigplan{width:100%;height:100%;display:block}

.tabs{position:absolute;z-index:20;top:12px;left:12px;background:#fff;border-radius:9px;
  padding:3px;border:1px solid #e2e0e6;box-shadow:0 2px 8px #0000000d;display:flex}
.tabs button{border:0;background:#fff;padding:8px 13px;border-radius:6px;font-size:10.5px;
  font-weight:800;color:#444}
.tabs .active{background:#f1eaff;color:var(--purple)}

.topright{position:absolute;z-index:20;right:12px;top:12px;display:flex;gap:7px}
.topright button{height:36px;padding:0 13px;background:#fff;border:1px solid #e2e0e6;
  border-radius:9px;font-size:10.5px;font-weight:800;box-shadow:0 2px 8px #0000000d;
  display:flex;align-items:center;gap:6px;color:#333}
.topright button i{font-style:normal;font-size:13px}

.helpbox{position:absolute;right:12px;top:56px;z-index:30;width:262px;background:#fff;
  border:1px solid #e2e0e6;border-radius:10px;padding:12px;font-size:11px;line-height:1.6;
  box-shadow:0 8px 24px #00000022;display:none}
.helpbox.on{display:block}

/* bottom-left cluster: zoom first, then view presets */
.viewbar{position:absolute;z-index:20;left:12px;bottom:12px;display:flex;gap:8px;align-items:center}
.zoomgrp,.presets{display:flex;background:#fff;border:1px solid #e2e0e6;border-radius:9px;
  overflow:hidden;box-shadow:0 2px 8px #0000000d}
.zoomgrp button{width:38px;height:38px;border:0;border-right:1px solid #efedf3;background:#fff;
  font-size:19px;line-height:1;color:#444;font-weight:600}
.zoomgrp button:last-child{border-right:0}
.presets button{width:36px;height:38px;border:0;border-right:1px solid #efedf3;background:#fff;
  font-size:14px;color:#555}
.presets button:last-child{border-right:0}
.zoomgrp button:hover,.presets button:hover{background:#faf8ff;color:var(--purple)}

/* lighting sits opposite, out of the way of the room */
.lightbar{position:absolute;z-index:20;right:12px;bottom:12px;display:flex;background:#fff;
  border:1px solid #e2e0e6;border-radius:9px;overflow:hidden;box-shadow:0 2px 8px #0000000d}
.lightbar button{border:0;border-right:1px solid #efedf3;background:#fff;padding:0 12px;
  height:38px;font-size:10px;font-weight:700;color:#555}
.lightbar button:last-child{border-right:0}
.lightbar button.active{background:#f1eaff;color:var(--purple);font-weight:800}

/* ---------------- responsive ---------------- */
@media(max-width:1180px){ :root{--side-w:300px} }

/* phone: stack, 3D view pinned on top, price pinned to the bottom edge */
@media(max-width:820px){
  body{overflow:auto}
  .app{height:auto;min-height:100dvh;flex-direction:column}
  .topbar{height:auto;flex-wrap:wrap;padding:10px 14px;gap:10px}
  .topbar-left{flex:1;min-width:0}
  .topbar-left .appname{display:none}
  .topbar-center{order:2;margin-left:auto}
  .topbar-right{order:3;width:100%;justify-content:center}
  .topbar .cfg-tabs{width:100%;justify-content:space-between;overflow-x:auto}
  .topbar .cfg-tab{flex:1;justify-content:center;padding:6px 6px}
  .app-body{flex-direction:column;height:auto;min-height:0;overflow:visible}
  .main{order:1;position:sticky;top:0;z-index:30}
  .preview{height:min(46dvh,380px);min-height:250px;border-bottom:1px solid var(--line)}
  .side{order:2;width:100%;border-left:0;border-right:0;min-height:0}
  .scroller{overflow:visible;padding:12px 13px 16px}

  .buttons button{min-height:42px;font-size:11px}
  .buttons.c5, .buttons.c3{grid-template-columns:repeat(3,1fr)}
  .buttons.inline{width:160px}
  .topright .lbl{display:none}
  .topright button{height:34px;padding:0 11px}
  .tabs button{padding:8px 11px;font-size:10px}
  .viewbar{left:8px;bottom:8px;gap:6px}
  .lightbar{right:8px;bottom:8px}
  .lightbar button{padding:0 9px;height:34px;font-size:9.5px}
  .zoomgrp button{width:34px;height:34px}
  .presets button{width:32px;height:34px}
  .helpbox{left:8px;right:8px;width:auto;top:52px}
}

@media(max-width:420px){
  .logo{width:132px}
  /* keep a way back to the default camera; the rest is covered by the
     floor-plan tab and by dragging */
  .presets #topV,.presets #frontV,.presets #eyeV{display:none}
}

/* ================= REQUEST MODAL ================= */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background: #fff;
  width: 90%;
  max-width: 800px;
  border-radius: 8px;
  padding: 30px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.modal-close {
  position: absolute;
  top: 15px; right: 15px;
  background: none; border: none;
  font-size: 24px; cursor: pointer;
  line-height: 1;
}

.modal-header h2 { margin: 0 0 5px 0; font-size: 28px; }
.req-note { margin: 0 0 20px 0; font-size: 13px; color: #333; }
.req { color: red; }

.form-row.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
.form-row input, .form-row textarea { width: 100%; box-sizing: border-box; margin-top: 5px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
.f-desc textarea { width: 100%; box-sizing: border-box; margin-top: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; }
.sub-lbl { display: block; font-size: 12px; color: #666; margin-top: 2px; }

.config-summary {
  background: #faf8ff;
  border: 1px solid #d4c4f0;
  border-radius: 6px;
  padding: 20px;
  margin-top: 25px;
}
.config-summary h3 { margin: 0 0 15px 0; font-size: 16px; }

.conf-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.conf-table th { text-align: left; padding-bottom: 10px; border-bottom: 1px solid #eee; color: #666; font-weight: 600; font-size: 12px; }
.conf-table td { padding: 10px 0; border-bottom: 1px solid #eee; }
.conf-table tfoot td { border-bottom: none; font-weight: bold; padding-top: 15px; }

.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 25px;
}

.btn-submit {
  background: #885fd1;
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-left: auto;
}
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.form-success { display: none; align-items: center; gap: 10px; background: #fff; border: 1px solid #eee; padding: 10px 20px; border-radius: 4px; }
.form-success.show { display: flex; }
.success-icon { background: #2e8b57; color: #fff; border-radius: 50%; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }

.form-error { color: red; font-size: 14px; }


/* ================= GATEKEEPER ================= */
.gatekeeper {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: #f5f5f7;
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.gk-box {
  background: #fff; padding: 40px; border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  text-align: center; max-width: 400px; width: 90%;
}
.gk-logo { width: 120px; margin-bottom: 20px; }
.gk-box h2 { margin: 0 0 10px 0; font-size: 22px; color: #333; }
.gk-box p { color: #666; font-size: 14px; margin-bottom: 30px; line-height: 1.5; }
.gk-links { display: flex; flex-direction: column; gap: 15px; }
.gk-btn {
  background: #885fd1; color: #fff; text-decoration: none;
  padding: 12px 20px; border-radius: 6px; font-weight: 600;
  transition: background 0.2s;
}
.gk-btn:hover { background: #6c46ad; }

/* ================= CONFIGURATOR TABS ================= */
.cfg-tabs {
  display: flex;
  background: #f6f4fa;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  padding: 3px;
  gap: 4px;
  flex: none;
}

.cfg-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1.5px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #7a7486;
  font-size: 11.5px;
  font-weight: 600;
  transition: all 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
}

.cfg-tab:hover {
  background: #ede9f4;
  color: var(--ink);
}

.cfg-tab.active {
  background: #fff;
  border-color: #dcd7ea;
  color: var(--purple);
  font-weight: 800;
  box-shadow: 0 1px 4px rgba(91, 33, 201, 0.08);
}

.cfg-num {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #e8e4f0;
  color: #7a7486;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 800;
  flex: none;
  transition: all 0.15s ease;
}

.cfg-tab.active .cfg-num {
  background: var(--purple);
  color: #fff;
}

.cfg-txt {
  font-size: 11px;
  letter-spacing: 0.1px;
}

/* ================= CONFIG PANELS ================= */
.cfg-panel {
  display: none;
}

.cfg-panel.active {
  display: block;
}

/* Step navigation buttons */
.cfg-step-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 14px;
  width: 100%;
}

.cfg-step-btn.next {
  background: var(--purple);
  color: #fff;
  border: 0;
  letter-spacing: 0.2px;
}

.cfg-step-btn.next:hover {
  background: var(--purple-dk);
}

.cfg-step-btn.prev {
  background: #fff;
  color: #6c6677;
  border: 1px solid var(--line-2);
}

.cfg-step-btn.prev:hover {
  background: #f7f6f9;
  border-color: #b0aabd;
  color: var(--ink);
}

.cfg-step-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.cfg-step-row .cfg-step-btn {
  margin-top: 0;
  flex: 1;
}

/* ================= SELECTION TAB STYLES ================= */
.selection-card {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  padding: 11px 12px;
  margin-bottom: 12px;
}

.selection-card-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #6c6677;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f3f1f6;
}

.selection-poles-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selection-pole-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #faf9fc;
  padding: 9px 10px;
}

.sel-pole-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sel-pole-title {
  flex: 1;
  min-width: 0;
}

.sel-pole-title strong {
  display: block;
  font-size: 11.5px;
  color: var(--ink);
}

.sel-pole-title small {
  display: block;
  font-size: 9.5px;
  color: #8b8697;
  margin-top: 1px;
}

.sel-pole-meta {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed var(--line);
  font-size: 10.5px;
}

.sel-meta-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  color: #6c6677;
}

.sel-meta-row.unavail {
  color: #c0392b;
  font-weight: 600;
}

.sel-meta-lbl {
  color: #8b8697;
}

.sel-meta-val {
  font-weight: 600;
  color: var(--ink);
}

.sel-included {
  margin-top: 6px;
}

.sel-incl-title {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: #8b8697;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.sel-incl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sel-tag {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 9.5px;
  color: #4a4458;
}

.selection-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1.5px solid var(--line);
}

.selection-total-row span {
  font-size: 11px;
  font-weight: 700;
  color: #4a4458;
}

.selection-total-row strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--purple);
}

.selection-quote-action {
  margin-top: 10px;
}