/* HUGAS Configurator V5.9.84
   Premium industrial / architectural redesign.
   Frontend only. Sharp geometry, restrained palette, stronger hierarchy. */

.configurator-page{
  --hg-green:#087570;
  --hg-green-dark:#004d49;
  --hg-green-bright:#0a8d86;
  --hg-graphite:#004d49;
  --hg-graphite-2:#087570;
  --hg-ink:#243330;
  --hg-muted:#6d7775;
  --hg-line:#d5dcda;
  --hg-line-dark:#aeb8b5;
  --hg-soft:#f1f4f3;
  --hg-paper:#ffffff;
  --hg-bg:#eef3f2;
  min-height:100vh;
  color:var(--hg-ink);
  background:
    linear-gradient(90deg,rgba(17,25,24,.022) 1px,transparent 1px),
    linear-gradient(rgba(17,25,24,.022) 1px,transparent 1px),
    var(--hg-bg);
  background-size:28px 28px;
}

/* HARD GEOMETRY */
.configurator-page button,
.configurator-page input,
.configurator-page textarea,
.configurator-page select,
.configurator-page .visual-card,
.configurator-page .config-card,
.configurator-page .summary-card,
.configurator-page .option,
.configurator-page .option-image,
.configurator-page .workbench-stage,
.configurator-page .price-box,
.configurator-page .step-pill,
.configurator-page .badge,
.configurator-page .eyebrow,
.configurator-page dialog,
.configurator-page .final-summary-visual,
.configurator-page .final-summary-price,
.configurator-page .empty-state,
.configurator-page .qty-btn,
.configurator-page .success-dialog-box{
  border-radius:0!important;
}

/* HEADER — restrained premium, not decorative */
.configurator-page .topbar{
  position:sticky;
  top:0;
  z-index:60;
  min-height:82px;
  padding:0 clamp(22px,4vw,68px);
  gap:26px;
  border:0;
  border-bottom:4px solid var(--hg-green);
  background:linear-gradient(90deg,#004d49 0%,#087570 100%);
  box-shadow:none;
  color:#fff;
}
.configurator-page .topbar::after{display:none}
.configurator-page .brand-image{
  width:150px;
  min-width:138px;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.18);
  background:#fff;
  box-shadow:none;
}
.configurator-page .brand-image img{max-height:42px}
.configurator-page .topbar>div:last-child{
  display:flex;
  align-items:baseline;
  gap:18px;
  min-width:0;
}
.configurator-page .topbar h1{
  margin:0;
  color:#fff;
  font-size:clamp(18px,1.7vw,24px);
  font-weight:760;
  letter-spacing:.005em;
}
.configurator-page .topbar p{
  margin:0;
  padding-left:18px;
  border-left:1px solid rgba(255,255,255,.22);
  color:#9ca9a6;
  font-size:12px;
  letter-spacing:.035em;
}

/* MAIN SHELL */
.configurator-page .app{
  max-width:1720px;
  padding:26px clamp(18px,2.7vw,48px) 52px;
}

/* STEPS — architectural tab rail */
.configurator-page .steps{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(112px,1fr))!important;
  gap:0;
  overflow:visible;
  margin:0 0 18px;
  padding:0;
  border:1px solid #c7cfcd;
  background:#fff;
}
.configurator-page .step-pill{
  position:relative;
  min-width:0;
  min-height:64px;
  padding:11px 12px;
  gap:9px;
  border:0;
  border-right:1px solid #dce2e0;
  background:#fff;
  box-shadow:none;
  color:#63706d;
  font-size:11px;
  font-weight:680;
  letter-spacing:.012em;
  transition:background .13s ease,color .13s ease;
}
.configurator-page .step-pill:last-child{border-right:0}
.configurator-page .step-pill::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:transparent;
}
.configurator-page .step-pill:hover{
  transform:none;
  border-color:transparent;
  background:#f3f6f5;
  box-shadow:none;
  color:#263330;
}
.configurator-page .step-pill .num{
  width:26px;
  height:26px;
  border:1px solid #c8d0ce;
  background:#fff;
  color:#66726f;
  font-size:10px;
  font-weight:800;
}
.configurator-page .step-pill.done{
  border-color:transparent;
  background:#f8fbfa;
  color:#33423f;
}
.configurator-page .step-pill.done .num{
  border-color:var(--hg-green);
  background:var(--hg-green);
  color:#fff;
}
.configurator-page .step-pill.active{
  border-color:transparent;
  background:#004d49;
  color:#fff;
  box-shadow:none;
}
.configurator-page .step-pill.active::after{background:var(--hg-green-bright)}
.configurator-page .step-pill.active .num{
  border-color:#66716f;
  background:transparent;
  color:#fff;
}
.configurator-page .step-pill:focus-visible{
  z-index:2;
  outline:2px solid var(--hg-green);
  outline-offset:-2px;
}

/* WORKSPACE */
.configurator-page .grid{
  grid-template-columns:minmax(280px,.82fr) minmax(560px,1.62fr) minmax(280px,.78fr);
  gap:16px;
  align-items:start;
}
.configurator-page .visual-card,
.configurator-page .config-card,
.configurator-page .summary-card{
  border:1px solid #c8d0ce;
  background:#fff;
  box-shadow:none;
}
.configurator-page .visual-card,
.configurator-page .summary-card{
  position:sticky;
  top:106px;
}
.configurator-page .visual-card{padding:0}
.configurator-page .config-card{padding:0}
.configurator-page .summary-card{padding:0}

/* PREVIEW */
.configurator-page .badge{
  display:block;
  min-height:auto;
  padding:12px 16px;
  border:0;
  border-bottom:1px solid #d8dfdd;
  background:#f3f8f6;
  color:#53605d;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.configurator-page .workbench-stage{
  height:390px;
  margin:0;
  border:0;
  border-bottom:1px solid #d8dfdd;
  background:
    linear-gradient(180deg,#ffffff 0%,#f7f8f8 72%,#eef1f0 100%);
  box-shadow:none;
}
.configurator-page .workbench-stage::after{
  content:"";
  position:absolute;
  left:7%;
  right:7%;
  bottom:34px;
  height:1px;
  background:#d8dddc;
}
.configurator-page .variant-visual{
  max-width:96%;
  max-height:360px;
  filter:drop-shadow(0 18px 12px rgba(0,0,0,.10));
}
.configurator-page .visual-meta{
  display:grid;
  gap:7px;
  padding:15px 16px 17px;
  line-height:1.35;
}
.configurator-page .visual-meta>strong{
  font-size:14px;
  font-weight:800;
  letter-spacing:.01em;
}
.configurator-page .visual-meta span{
  color:#7b8583;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.045em;
}

/* CENTRAL HEADER */
.configurator-page .config-head{
  min-height:95px;
  padding:21px 22px 17px;
  border-bottom:1px solid #cdd5d3;
  background:#fff;
}
.configurator-page .config-head h2{
  margin:7px 0 0;
  color:#111a18;
  font-size:clamp(25px,2vw,32px);
  line-height:1.05;
  font-weight:720;
  letter-spacing:-.025em;
}
.configurator-page .eyebrow{
  padding:0;
  border:0;
  background:transparent;
  color:var(--hg-green);
  font-size:10px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.configurator-page .reset-config-btn{
  min-height:36px!important;
  padding:8px 12px!important;
  border:1px solid #cfd6d4!important;
  background:#fff!important;
  color:#687370!important;
  font-size:10px!important;
  letter-spacing:.055em;
  text-transform:uppercase;
  box-shadow:none!important;
}
.configurator-page .reset-config-btn:hover{
  border-color:#879490!important;
  color:#26322f!important;
}
.configurator-page .step-help{
  max-width:none;
  margin:0;
  padding:14px 22px 15px;
  border-bottom:1px solid #e1e6e5;
  color:#6b7673;
  font-size:13px;
  line-height:1.52;
  background:#fafbfb;
}

/* OPTIONS */
.configurator-page .options{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  padding:16px;
  background:#fff;
}
.configurator-page .option{
  position:relative;
  min-height:132px;
  margin:-1px 0 0 -1px;
  padding:13px;
  border:1px solid #d5dcda;
  background:#fff;
  box-shadow:none;
  transition:background .12s ease,border-color .12s ease;
}
.configurator-page .option:hover{
  z-index:2;
  transform:none;
  border-color:#7c8a87;
  box-shadow:none;
  background:#fbfcfc;
}
.configurator-page .option.selected{
  z-index:3;
  padding:12px;
  border:2px solid var(--hg-green);
  background:#f4faf8;
  box-shadow:none;
}
.configurator-page .option.selected::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:5px;
  height:100%;
  background:var(--hg-green);
}
.configurator-page .option-image{
  aspect-ratio:16/10;
  margin:0 0 11px;
  border:0;
  border-bottom:1px solid #e1e6e5;
  background:#f7f9f8;
}
.configurator-page .option-image img{
  padding:5px;
  transition:none;
}
.configurator-page .option:hover .option-image img{transform:none}
.configurator-page .option strong{
  margin:0 28px 5px 0;
  color:#1a2422;
  font-size:13px;
  line-height:1.3;
  font-weight:760;
}
.configurator-page .option small{
  min-height:16px;
  color:#7a8482;
  font-size:10px;
  line-height:1.35;
}
.configurator-page .option .check{
  top:10px;
  right:10px;
  width:20px;
  height:20px;
  border:1px solid #aeb8b5;
  background:#fff;
  color:transparent;
  opacity:1;
  font-size:11px;
}
.configurator-page .option.selected .check{
  border-color:var(--hg-green);
  background:var(--hg-green);
  color:#fff;
}
.configurator-page .delta{
  display:inline-block;
  width:auto;
  min-height:0;
  margin-top:9px;
  padding:4px 7px;
  border:1px solid #d2dedb;
  background:#f6f9f8;
  color:#39504b;
  font-size:10px;
  line-height:1.15;
  font-weight:750;
}
.configurator-page .option.selected .delta{
  border-color:#9dc8c3;
  background:#e4f1ef;
  color:var(--hg-green-dark);
}

/* QUANTITY */
.configurator-page .qty-control{margin-top:10px}
.configurator-page .qty-btn{
  width:30px;
  height:30px;
  border:1px solid #c6cecc;
  background:#fff;
  color:#263330;
}
.configurator-page .qty-btn:hover{
  border-color:var(--hg-green);
  color:var(--hg-green-dark);
}

/* NAVIGATION */
.configurator-page .nav-buttons{
  gap:8px;
  margin:0;
  padding:16px 22px;
  border-top:1px solid #cfd6d4;
  background:#f7faf9;
}
.configurator-page .btn{
  min-height:42px;
  padding:10px 16px;
  border-width:1px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;
  box-shadow:none!important;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.configurator-page .btn:hover{transform:none}
.configurator-page .primary{
  border-color:var(--hg-green-dark);
  background:var(--hg-green-dark);
  color:#fff;
}
.configurator-page .primary:hover{
  border-color:var(--hg-green);
  background:var(--hg-green);
}
.configurator-page .secondary{
  border-color:#bfc8c5;
  background:#fff;
  color:#283431;
}
.configurator-page .secondary:hover{
  border-color:#697673;
  background:#f5f7f6;
}
.configurator-page .ghost{
  border-color:#c7cfcd;
  background:transparent;
  color:#4c5b57;
}
.configurator-page .ghost:hover{
  border-color:#76827f;
  color:#17211f;
}

/* SUMMARY */
.configurator-page .summary-card h3{
  margin:0;
  padding:17px 18px;
  border-bottom:1px solid #ccd4d2;
  background:#004d49;
  color:#fff;
  font-size:15px;
  font-weight:750;
  letter-spacing:.02em;
}
.configurator-page .summary{
  max-height:330px;
  overflow:auto;
  padding:10px 18px 2px;
}
.configurator-page .summary-row{
  grid-template-columns:minmax(82px,.85fr) minmax(105px,1.15fr);
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid #e3e7e6;
  font-size:11px;
}
.configurator-page .summary-row span{
  color:#87908e;
  font-size:10px;
  letter-spacing:.02em;
}
.configurator-page .summary-row strong{
  color:#202c29;
  font-weight:700;
}
.configurator-page .price-box{
  margin:13px 18px 4px;
  padding:0;
  border:1px solid #9fc9c4;
  background:#edf7f5;
  color:#24413d;
}
.configurator-page .price-box::before{display:none}
.configurator-page .price-box>div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid #cfe2df;
  color:#607672;
  font-size:10px;
}
.configurator-page .price-box>div:last-child{border-bottom:0}
.configurator-page .price-box .total{
  margin:0;
  padding:13px 12px;
  border-top:1px solid #9fc9c4;
  background:#dcefeb;
  color:#123f3a;
  font-size:12px;
}
.configurator-page #grossPrice,
.configurator-page #netPrice{
  color:#004d49;
  font-size:14px;
  font-weight:850;
}
.configurator-page #vatPrice{color:#6f817d}
.configurator-page .summary-card .wide{
  width:calc(100% - 36px);
  margin:8px 18px 0;
  min-height:44px;
}
.configurator-page #offerBtn{
  margin-top:14px;
  border-color:var(--hg-green);
  background:var(--hg-green);
}
.configurator-page #offerBtn:hover{background:var(--hg-green-dark)}
.configurator-page #viewSummaryBtn{
  border-color:#a8b5b2;
  background:#fff;
  color:#263330;
}
.configurator-page #copyBtn{
  margin-bottom:17px;
  border-color:#d2d9d7;
  background:#f8fbfa;
  color:#65716e;
}

/* DIALOGS / FORMS */
.configurator-page dialog{
  border:1px solid #9eaaa7;
  box-shadow:0 28px 90px rgba(0,0,0,.25);
}
.configurator-page dialog::backdrop{
  background:rgba(0,77,73,.42);
  backdrop-filter:blur(2px);
}
.configurator-page dialog input,
.configurator-page dialog textarea{
  min-height:42px;
  border:1px solid #bfc8c5;
  background:#fff;
  color:#18211f;
  box-shadow:none;
}
.configurator-page dialog input:focus,
.configurator-page dialog textarea:focus{
  outline:0;
  border-color:var(--hg-green);
  box-shadow:inset 3px 0 0 var(--hg-green);
}
.configurator-page .close{
  border:1px solid #c1c9c7!important;
  background:#fff!important;
  color:#1c2825!important;
}

/* FINAL SUMMARY */
.configurator-page .final-summary-dialog{border:1px solid #9aa6a3}
.configurator-page .final-summary-head{
  padding-bottom:14px;
  border-bottom:1px solid #d5dcda;
}
.configurator-page .final-summary-head h2{
  font-weight:720;
  letter-spacing:-.02em;
}
.configurator-page .final-summary-visual{
  border:1px solid #d3dbd9;
  background:#f5f7f6;
}
.configurator-page .final-summary-price{
  border:1px solid #9fc9c4;
  background:#edf7f5;
  color:#24413d;
}
.configurator-page .final-summary-price .total{
  background:#dcefeb;
  color:#123f3a;
}

/* EMPTY */
.configurator-page .empty-state{
  border:1px solid #c7cfcd;
  background:#f8faf9;
}

/* TABLET */
@media(max-width:1320px){
  .configurator-page .grid{
    grid-template-columns:minmax(260px,.82fr) minmax(500px,1.55fr);
  }
  .configurator-page .summary-card{
    position:relative;
    top:auto;
    grid-column:1/-1;
    display:grid;
    grid-template-columns:minmax(300px,1.2fr) minmax(260px,.8fr);
    gap:0 22px;
  }
  .configurator-page .summary-card h3{grid-column:1/-1}
  .configurator-page .summary-card .summary{
    grid-row:2/8;
    max-height:none;
    border-right:1px solid #d5dcda;
  }
  .configurator-page .summary-card .price-box{margin-top:14px}
}

/* SMALL TABLET */
@media(max-width:980px){
  .configurator-page .topbar{position:relative}
  .configurator-page .topbar>div:last-child{display:block}
  .configurator-page .topbar p{
    display:block;
    margin-top:4px;
    padding-left:0;
    border-left:0;
  }
  .configurator-page .steps{
    display:flex!important;
    overflow-x:auto;
  }
  .configurator-page .step-pill{
    flex:0 0 126px;
    border-right:1px solid #dce2e0;
  }
  .configurator-page .grid{grid-template-columns:1fr}
  .configurator-page .visual-card,
  .configurator-page .summary-card{position:relative;top:auto}
  .configurator-page .visual-card{
    display:grid;
    grid-template-columns:1.1fr .9fr;
  }
  .configurator-page .badge{grid-column:1/-1}
  .configurator-page .workbench-stage{height:320px}
  .configurator-page .visual-meta{
    align-self:center;
    border-left:1px solid #d5dcda;
  }
  .configurator-page .summary-card{display:block}
  .configurator-page .summary-card .summary{border-right:0}
}

/* MOBILE */
@media(max-width:700px){
  .configurator-page{
    background:#eef3f2;
    background-image:none;
  }
  .configurator-page .topbar{
    min-height:68px;
    padding:10px 12px;
    gap:12px;
    border-bottom-width:3px;
  }
  .configurator-page .brand-image{
    width:106px;
    min-width:106px;
    padding:5px 8px;
  }
  .configurator-page .brand-image img{max-height:32px}
  .configurator-page .topbar h1{font-size:15px}
  .configurator-page .topbar p{display:none}
  .configurator-page .app{padding:12px 9px 30px}
  .configurator-page .steps{margin-bottom:10px}
  .configurator-page .step-pill{
    flex-basis:108px;
    min-height:52px;
    padding:7px 8px;
  }
  .configurator-page .grid{gap:10px}
  .configurator-page .visual-card{display:block}
  .configurator-page .workbench-stage{height:270px}
  .configurator-page .visual-meta{border-left:0}
  .configurator-page .config-head{
    min-height:0;
    padding:16px 14px 13px;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .configurator-page .config-head h2{font-size:23px}
  .configurator-page .step-help{padding:12px 14px}
  .configurator-page .options{
    grid-template-columns:1fr;
    padding:10px;
  }
  .configurator-page .option{
    margin:-1px 0 0;
    min-height:0;
  }
  .configurator-page .option-image{aspect-ratio:16/9}
  .configurator-page .nav-buttons{
    position:sticky;
    bottom:0;
    z-index:20;
    margin:0;
    padding:9px;
    border-top:1px solid #adb8b5;
    background:#fff;
    box-shadow:0 -8px 20px rgba(0,0,0,.07);
  }
  .configurator-page .nav-buttons .btn{flex:1}
  .configurator-page .summary-card h3{padding:14px}
  .configurator-page .summary{padding:8px 14px}
  .configurator-page .price-box{margin:12px 14px 4px}
  .configurator-page .summary-card .wide{
    width:calc(100% - 28px);
    margin-left:14px;
    margin-right:14px;
  }
  .configurator-page #copyBtn{margin-bottom:14px}
}

@media(max-width:400px){
  .configurator-page .brand-image{width:94px;min-width:94px}
  .configurator-page .topbar h1{font-size:14px}
}


/* V5.9.85 – HUGAS light premium refinement */
.configurator-page .topbar{
  border-bottom:3px solid #0aa098;
}
.configurator-page .step-pill.active{
  background:#087570;
}
.configurator-page .summary-card h3{
  background:#087570;
}
.configurator-page .config-card{
  border-top:3px solid #087570;
}
.configurator-page .visual-card{
  border-top:3px solid #b7d8d4;
}
.configurator-page .summary-card{
  border-top:3px solid #004d49;
}
.configurator-page .option.selected{
  border-color:#087570;
  background:#f7fbfa;
}
.configurator-page .option.selected::before{
  background:#087570;
}
.configurator-page #offerBtn{
  background:#087570;
  border-color:#087570;
}
.configurator-page #offerBtn:hover{
  background:#004d49;
  border-color:#004d49;
}
.configurator-page .primary{
  background:#087570;
  border-color:#087570;
}
.configurator-page .primary:hover{
  background:#004d49;
  border-color:#004d49;
}
.configurator-page .workbench-stage{
  background:linear-gradient(180deg,#fff 0%,#fbfcfc 72%,#f2f6f5 100%);
}
.configurator-page .summary-card,
.configurator-page .config-card,
.configurator-page .visual-card{
  box-shadow:0 8px 24px rgba(0,77,73,.055);
}