/* Toha cost-estimate configurator — themeable.
   Inherits the host font and colour. Override these on .est (or :root) per demo:
   --est-accent  selected / primary colour       --est-on-accent  text on accent
   --est-line    hairlines and outlines          --est-surface    card background
   --est-glass   glass tint in diagrams          --est-radius     corner radius   */
/* defaults use :where() (zero specificity) so any host override wins, whatever the load order */
:where(.est){--est-accent:currentColor;--est-on-accent:#fff;--est-line:color-mix(in srgb,currentColor 18%,transparent);--est-surface:color-mix(in srgb,currentColor 4%,transparent);--est-glass:#9fd3c7;--est-radius:6px;--est-mute:color-mix(in srgb,currentColor 62%,transparent)}
.est{display:grid;gap:28px}
.est [hidden]{display:none!important}
.est fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:24px}
.est-legend{font-size:clamp(22px,2.2vw,32px);letter-spacing:-.02em;line-height:1.15;padding:0;outline:none}
.est-steps{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;padding:0;margin:0;font-size:13px;color:var(--est-mute)}
.est-steps li{display:flex;align-items:center;gap:10px}
.est-steps span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--est-line);font-size:12px;transition:background .3s,color .3s}
.est-steps li.on{color:inherit}
.est-steps li.on span{background:var(--est-accent);color:var(--est-on-accent);box-shadow:none}

.est-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.est-prod{position:relative;display:grid;gap:4px;cursor:pointer;padding:10px 10px 14px;border-radius:var(--est-radius);box-shadow:inset 0 0 0 1px var(--est-line);transition:box-shadow .3s,background .3s}
.est-prod input{position:absolute;opacity:0;pointer-events:none}
.est-prod:hover{background:var(--est-surface)}
.est-prod:has(input:checked){box-shadow:inset 0 0 0 2px var(--est-accent);background:var(--est-surface)}
.est-prod:has(input:focus-visible){outline:2px solid var(--est-accent);outline-offset:3px}
.est-ph{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:calc(var(--est-radius) - 2px);margin-bottom:8px;background:var(--est-surface)}
.est-ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.est-prod:hover img{transform:scale(1.04)}
.est-pn{font-weight:600;font-size:15px}.est-pt{font-size:13px;color:var(--est-mute)}

.est-set{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:clamp(20px,4vw,56px);align-items:start}
.est-diagram{border-radius:var(--est-radius);background:var(--est-surface);padding:12px}
.est-svg{width:100%;height:auto;display:block;color:inherit;font:600 12px/1 system-ui,sans-serif}
.est-glass{fill:var(--est-glass);fill-opacity:.35;stroke:currentColor;stroke-opacity:.55;stroke-width:1.2}
.est-glass.fixed{fill-opacity:.22}
.est-glass.mirror{fill:color-mix(in srgb,currentColor 12%,#cfd8dc)}
.est-hw{stroke:currentColor;stroke-width:3;stroke-linecap:round;opacity:.7}
.est-tub{fill:none;stroke:currentColor;stroke-opacity:.4}
.est-tubt,.est-angt{fill:currentColor;opacity:.55;text-anchor:middle;font-weight:500;font-size:11px}
.est-ang,.est-shine{fill:none;stroke:currentColor;stroke-opacity:.4}
.est-dim line{stroke:currentColor;stroke-opacity:.55;stroke-width:1.2;transition:stroke .3s,stroke-opacity .3s}
.est-dim circle{fill:var(--est-surface);stroke:currentColor;stroke-opacity:.5;transition:fill .3s}
.est-dim text{fill:currentColor;text-anchor:middle}
.est-dim.on line{stroke:var(--est-accent);stroke-opacity:1;stroke-width:2}
.est-dim.on circle{fill:var(--est-accent);stroke:var(--est-accent)}
.est-dim.on text{fill:var(--est-on-accent)}
.est-fields{display:grid;gap:14px}
.est-hint{font-size:13px;color:var(--est-mute);margin:0}
.est-f{display:grid;gap:6px;font-size:13px}
.est-f>span{color:var(--est-mute)}.est-f b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--est-surface);box-shadow:inset 0 0 0 1px var(--est-line);color:inherit;font-size:11px;margin-right:4px}
.est-f input,.est-f textarea{font:inherit;font-size:16px;color:inherit;background:transparent;border:0;border-bottom:1px solid var(--est-line);padding:10px 0;border-radius:0;width:100%;transition:border-color .3s}
.est-f input:focus,.est-f textarea:focus{outline:none;border-bottom-color:var(--est-accent)}
.est-f [aria-invalid=true]{border-bottom-color:#b3261e}
.est-err{font-style:normal;font-size:12px;color:#b3261e;min-height:1em}

.est-options{display:grid;gap:16px}
.est-og{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:start}
.est-ol{font-size:13px;color:var(--est-mute);padding-top:8px;margin:0}
.est-og>div{display:flex;flex-wrap:wrap;gap:8px}
.est-opt{position:relative;cursor:pointer}
.est-opt input{position:absolute;opacity:0;pointer-events:none}
.est-opt span{display:inline-block;padding:8px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--est-line);font-size:13px;transition:background .25s,color .25s,box-shadow .25s}
.est-opt:hover span{box-shadow:inset 0 0 0 1px currentColor}
.est-opt input:checked+span{background:var(--est-accent);color:var(--est-on-accent);box-shadow:none}
.est-opt input:focus-visible+span{outline:2px solid var(--est-accent);outline-offset:2px}

.est-sum{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:4px 14px;padding:16px 18px;border-radius:var(--est-radius);background:var(--est-surface)}
.est-sum span{font-size:13px;color:var(--est-mute)}.est-sum b{font-size:22px;font-weight:600}
.est-sum small{grid-column:1/-1;font-size:12px;color:var(--est-mute)}
.est-contact{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.est-contact .wide{grid-column:1/-1}
.est-review{padding:16px 18px;border-radius:var(--est-radius);background:var(--est-surface);font-size:14px}
.est-review ul{margin:8px 0 0;padding-left:18px;display:grid;gap:4px}
.est-nav{display:flex;gap:12px;flex-wrap:wrap}
.est-btn{font:inherit;font-size:14px;font-weight:600;cursor:pointer;border:0;padding:12px 22px;border-radius:var(--est-radius);background:var(--est-accent);color:var(--est-on-accent);transition:opacity .3s,transform .3s}
.est-btn:hover{opacity:.88}.est-btn:active{transform:translateY(1px)}
.est-btn[disabled]{opacity:.4;cursor:not-allowed}
.est-btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px var(--est-line)}
.est-done{padding:28px;border-radius:var(--est-radius);background:var(--est-surface);display:grid;gap:12px;outline:none}
.est-done a{text-decoration:underline}
@media (max-width:720px){
  .est-set{grid-template-columns:1fr}.est-diagram{max-width:260px}
  .est-og{grid-template-columns:1fr;gap:6px}.est-ol{padding-top:0}
  .est-contact{grid-template-columns:1fr}
  .est-grid{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){.est *{transition:none!important}}