/* =====================================================================
   VOX — budget builder
   Scoped tokens so a stale style.css can never leave this page unstyled.
   ===================================================================== */
.est{
  --g:#06C000; --g2:#2BE327;
  --ink:#0A0A0A; --pane:#0E0E0E; --pane2:#131313;
  --line:#1F1F1F; --line2:#2A2A2A;
  --txt:#F2F2F2; --dim:#A8A8A8; --faint:#6E6E6E;
  padding:clamp(40px,6vw,80px) 0 clamp(70px,9vw,130px);
}

/* ---------- category filter rail ---------- */
.est-filters{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:clamp(28px,4vw,46px);
  padding-bottom:4px;
}
.est-filter{
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:12px;
  letter-spacing:.09em; text-transform:uppercase;
  padding:11px 18px; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--dim); border:1px solid var(--line2);
  transition:all .2s ease; white-space:nowrap;
}
.est-filter:hover{ color:#fff; border-color:#3a3a3a; }
.est-filter.on{ background:var(--g); border-color:var(--g); color:#061006; }

/* ---------- the catalogue ---------- */
.est-cat{
  font-family:'Montserrat',sans-serif; font-weight:700;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); margin:clamp(30px,4vw,46px) 0 16px;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.est-cat:first-child{ margin-top:0; }

.est-row{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}

.est-svc{
  position:relative; display:flex; flex-direction:column; align-items:flex-start;
  gap:0; text-align:left; cursor:pointer;
  padding:22px 20px 18px; border-radius:4px;
  background:var(--pane); border:1px solid var(--line);
  color:var(--txt); font:inherit;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.est-svc:hover{ border-color:var(--g); background:var(--pane2); transform:translateY(-2px); }
.est-svc .ico{ display:block; margin-bottom:16px; }
.est-svc .ico svg{ width:26px; height:26px; color:var(--g2); }
.est-svc b{
  font-family:'Montserrat',sans-serif; font-weight:600;
  font-size:15px; line-height:1.3; letter-spacing:-.005em; margin-bottom:6px;
}
.est-from{ font-size:12.5px; color:var(--faint); margin-bottom:16px; }
.est-plus{
  margin-top:auto; font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--g2); display:flex; align-items:center; gap:7px;
}
.est-plus::before{
  content:''; width:15px; height:15px; flex:none; border-radius:50%;
  border:1px solid currentColor;
  background:
    linear-gradient(currentColor,currentColor) center/7px 1px no-repeat,
    linear-gradient(currentColor,currentColor) center/1px 7px no-repeat;
}
.est-svc.has{ border-color:rgba(6,192,0,.5); background:rgba(6,192,0,.05); }
.est-badge{
  position:absolute; top:12px; right:12px;
  min-width:22px; height:22px; padding:0 6px; border-radius:11px;
  background:var(--g); color:#061006;
  font-size:11.5px; font-weight:800; line-height:22px; text-align:center;
}

/* ---------- the estimate ---------- */
.est-cart{
  margin-top:clamp(44px,6vw,76px); padding:clamp(22px,3vw,34px);
  border:1px solid var(--line); border-radius:4px; background:var(--pane);
  transition:border-color .3s ease;
}
.est-cart.live{ border-color:rgba(6,192,0,.45); }
.est-cart-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:6px;
}
.est-cart-head h2{
  font-family:'Montserrat',sans-serif; font-weight:700;
  font-size:clamp(18px,2.3vw,24px); letter-spacing:-.01em; margin:0; color:#fff;
}
.est-clear{
  background:none; border:0; cursor:pointer; font:inherit;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); text-decoration:underline; text-underline-offset:4px;
}
.est-clear:hover{ color:#ff5a4d; }

.est-empty{ color:var(--faint); font-size:14.5px; padding:26px 0; line-height:1.6; margin:0; }

.est-line{
  display:flex; align-items:center; gap:clamp(10px,1.6vw,18px);
  padding:16px 0; border-bottom:1px solid var(--line);
}
.est-line .ico{ flex:none; }
.est-line .ico svg{ width:22px; height:22px; color:var(--g2); }
.est-line-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.est-line-txt b{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:14.5px; color:#fff; }
.est-line-txt span{ font-size:12.5px; color:var(--faint); }
.est-line-amt{
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:15px;
  color:var(--g2); white-space:nowrap; flex:none;
}
.est-x{
  flex:none; width:28px; height:28px; border-radius:50%; cursor:pointer;
  background:transparent; border:1px solid var(--line2); color:var(--faint);
  font-size:17px; line-height:1; transition:all .18s ease;
}
.est-x:hover{ border-color:#ff5a4d; color:#ff5a4d; }

/* quantity stepper */
.est-qty{
  display:inline-flex; align-items:center; gap:2px; flex:none;
  border:1px solid var(--line2); border-radius:999px; overflow:hidden;
}
.est-qty button{
  width:30px; height:30px; cursor:pointer; font:inherit; font-size:15px; line-height:1;
  background:transparent; border:0; color:var(--dim); transition:all .16s ease;
}
.est-qty button:hover{ background:var(--g); color:#061006; }
.est-qty b{
  min-width:26px; text-align:center; font-family:'Montserrat',sans-serif;
  font-weight:700; font-size:14px; color:#fff;
}
.est-qty.big button{ width:40px; height:40px; font-size:19px; }
.est-qty.big b{ min-width:40px; font-size:17px; }
.est-qrow{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:20px 0 4px; padding:16px 18px; border-radius:4px;
  background:rgba(255,255,255,.03); border:1px solid var(--line);
}
.est-qlbl{ font-size:13px; color:var(--dim); }

/* summary */
.est-sum{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:24px; padding-top:24px;
}
.est-sum .rows{ flex:1 1 300px; display:flex; flex-direction:column; gap:9px; }
.est-sum .r{ display:flex; justify-content:space-between; gap:18px; font-size:14px; color:var(--dim); }
.est-sum .r b{ color:#fff; font-weight:600; }
.est-sum .r.disc{ color:var(--g2); } .est-sum .r.disc b{ color:var(--g2); }
.est-hint{ font-size:12.5px; color:var(--faint); margin:4px 0 0; }
.est-total{ text-align:right; flex:none; }
.est-total .big{
  font-family:'Montserrat',sans-serif; font-weight:800;
  font-size:clamp(32px,5.5vw,56px); line-height:1; color:#fff; letter-spacing:-.025em;
}
.est-total .big i{ font-style:normal; color:var(--faint); font-weight:400; }
.est-total .cap{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint); margin-top:9px;
}

.est-tip{ display:none; }
.est-tip.on{
  display:flex; flex-direction:column; gap:6px; margin-top:22px;
  padding:18px 20px; border-radius:4px;
  background:rgba(6,192,0,.07); border:1px solid rgba(6,192,0,.3);
}
.est-tip b{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:14.5px; color:#fff; }
.est-tip span{ font-size:13.5px; color:var(--dim); line-height:1.55; }
.est-tip a{ color:var(--g2); text-decoration:underline; text-underline-offset:3px; }

.est-send{
  display:block; margin-top:24px; padding:19px 28px; border-radius:3px;
  background:var(--g); color:#061006; text-align:center; text-decoration:none;
  font-family:'Montserrat',sans-serif; font-weight:700;
  font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  transition:opacity .2s ease, transform .2s ease;
}
.est-send:hover{ transform:translateY(-1px); }
.est-send.off{ opacity:.3; pointer-events:none; }
.est-note{ font-size:12px; color:var(--faint); margin:14px 0 0; line-height:1.6; text-align:center; }

/* ---------- the panel ---------- */
.est-modal{
  position:fixed; inset:0; z-index:2000; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(0,0,0,.84); backdrop-filter:blur(6px);
}
.est-modal.on{ display:flex; }
.est-card{
  position:relative; width:min(760px,100%); max-height:88vh; overflow-y:auto;
  background:#0C0C0C; border:1px solid var(--line2); border-radius:5px;
  padding:clamp(26px,3.6vw,42px);
  --g:#06C000; --g2:#2BE327; --line:#1F1F1F; --line2:#2A2A2A;
  --dim:#A8A8A8; --faint:#6E6E6E;
  animation:estIn .24s cubic-bezier(.2,.9,.3,1);
}
@keyframes estIn{ from{ opacity:0; transform:translateY(14px) scale(.985); } }
.est-close{
  position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%;
  background:transparent; border:1px solid var(--line2); color:var(--dim);
  cursor:pointer; display:grid; place-items:center; transition:all .18s ease;
}
.est-close:hover{ border-color:#fff; color:#fff; }
.est-close svg{ width:17px; height:17px; }
.est-h{ margin-bottom:26px; padding-right:48px; }
.est-h h2{
  font-family:'Montserrat',sans-serif; font-weight:700;
  font-size:clamp(22px,3vw,32px); letter-spacing:-.02em; margin:0 0 8px; color:#fff;
}
.est-h p{ font-size:14px; color:var(--faint); margin:0; line-height:1.55; }

.est-two{ display:grid; grid-template-columns:96px 1fr; gap:clamp(18px,2.6vw,30px); align-items:start; }
.est-face{
  width:96px; height:96px; border-radius:4px; display:grid; place-items:center;
  background:rgba(6,192,0,.08); border:1px solid rgba(6,192,0,.26);
}
.est-face svg{ width:40px; height:40px; color:var(--g2); }
.est-q{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); margin-bottom:14px;
}
.est-tiers{ display:flex; flex-direction:column; gap:9px; }
.est-tier{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 18px; border-radius:4px; cursor:pointer; text-align:left;
  background:#111; border:1px solid var(--line); color:#fff; font:inherit;
  transition:all .18s ease;
}
.est-tier:hover{ border-color:#3a3a3a; background:#151515; }
.est-tier.on{ border-color:var(--g); background:rgba(6,192,0,.08); }
.est-tier > span{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.est-tier b{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:14.5px; }
.est-tier span span{ font-size:12.5px; color:var(--faint); line-height:1.45; }
.est-tier em{
  font-style:normal; font-family:'Montserrat',sans-serif; font-weight:700;
  font-size:15px; color:var(--g2); white-space:nowrap; flex:none;
}
.est-add{
  width:100%; margin-top:20px; padding:17px 24px; border-radius:3px; cursor:pointer;
  background:var(--g); border:0; color:#061006; font-family:'Montserrat',sans-serif;
  font-weight:700; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  transition:opacity .2s ease;
}
.est-add:disabled{
  background:transparent; color:var(--faint);
  border:1px solid var(--line2); cursor:not-allowed;
}

/* ---------- mobile ---------- */
@media (max-width:760px){
  .est-two{ grid-template-columns:1fr; }
  .est-face{ width:62px; height:62px; }
  .est-face svg{ width:28px; height:28px; }
  .est-row{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
  .est-svc{ padding:18px 15px 15px; }
  .est-svc b{ font-size:14px; }
  .est-sum{ flex-direction:column; align-items:stretch; }
  .est-total{ text-align:left; }
  .est-filters{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .est-filters::-webkit-scrollbar{ display:none; }
  .est-line{ flex-wrap:wrap; gap:10px; }
  .est-line-txt{ flex:1 1 100%; order:1; }
  .est-line .ico{ order:0; }
  .est-qty{ order:2; }
  .est-line-amt{ order:3; margin-left:auto; }
  .est-x{ order:4; }
  .est-card{ padding:22px 16px; max-height:92vh; }
  .est-qrow{ flex-direction:column; align-items:flex-start; gap:12px; }
}
@media (max-width:400px){
  .est-row{ grid-template-columns:1fr 1fr; }
}