/* ===================================================================
   Cost Calculator + Thank You page styles
   Extends the tokens already defined in style.css:
   --cream #f2ede4  --ink #0a0a0a  --line #e4ddd0
   --white #ffffff  --gold #c9a24a  --gold-dark #a8842f
=================================================================== */

.calc-page-banner{
  position: relative;
    background: url(/assets/image/fbmc-banner-1.webp) center / cover no-repeat;
    padding: 110px 0 70px;
    margin-top: -88px;
    overflow: hidden;
}
.calc-page-banner::before{
  content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgb(0 0 0 / 92%) 0%, rgb(0 0 0 / 80%) 40%, rgba(6, 15, 34, 0.45) 75%, rgba(6, 15, 34, 0.25) 100%);
    z-index: 0;
}
.calc-page-banner .container-1440{
  position:relative;
  z-index:2;
}
.calc-crumb{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:rgba(255,255,255,0.55);
  margin-bottom:18px;
}
.calc-crumb a{ color:rgba(255,255,255,0.55); text-decoration:none; }
.calc-crumb a:hover{ color:var(--gold); }
.calc-page-banner h1{
  color:var(--white);
  font-size:38px;
  font-weight:600;
  max-width:640px;
  margin-bottom:12px;
  line-height:1.2;
}
.calc-page-banner p{
  color:#fff;
  font-weight:300;
  max-width:560px;
  font-size:16px;
  margin-bottom:0;
}

/* ===== WIZARD SHELL ===== */
.calc-wizard-section{
  background:var(--cream);
  padding:56px 0 90px;
}
.calc-wizard-shell{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 30px 70px rgba(10,10,10,0.08);
  overflow:hidden;
}

/* progress rail */
.calc-progress{
  display:flex;
  align-items:center;
  padding:28px 32px;
  border-bottom:1px solid var(--line);
  overflow-x:auto;
  gap:0;
}
.calc-progress-step{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.calc-progress-step .dot{
  width:30px;
  height:30px;
  border-radius:50%;
  border:1.5px solid var(--line);
  color:#9c9488;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:600;
  background:var(--white);
  transition:all 0.25s ease;
  flex-shrink:0;
}
.calc-progress-step .label{
  font-size:13px;
  font-weight:500;
  color:#9c9488;
  white-space:nowrap;
  transition:color 0.25s ease;
}
.calc-progress-step.active .dot{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--white);
}
.calc-progress-step.active .label{ color:var(--ink); }
.calc-progress-step.done .dot{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--white);
}
.calc-progress-step.done .label{ color:var(--ink); }
.calc-progress-line{
  width:36px;
  height:1px;
  background:var(--line);
  margin:0 10px;
  flex-shrink:0;
}

/* body grid: form + summary */
.calc-body{
  display:grid;
  grid-template-columns:1fr 320px;
}
.calc-form-col{
  padding:40px 44px 32px;
  border-right:1px solid var(--line);
}
.calc-summary-col{
  padding:40px 28px;
  background:#faf8f4;
}

.calc-step{
  display:none;
}
.calc-step.active{
  display:block;
  animation:calcFade 0.35s ease;
}
@keyframes calcFade{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

.calc-step-eyebrow{
  display:inline-block;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--gold-dark);
  margin-bottom:8px;
}
.calc-step h2{
  font-size:24px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:6px;
}
.calc-step-sub{
  font-size:14.5px;
  color:#6b6459;
  margin-bottom:26px;
}

/* option cards */
.calc-options{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}
.calc-options.calc-options-3{ grid-template-columns:repeat(3, 1fr); }
.calc-options.calc-options-1{ grid-template-columns:1fr; }

.calc-option{ position:relative; }
.calc-option input{
  position:absolute;
  opacity:0;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  cursor:pointer;
}
.calc-option-card{
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:64px;
  transition:border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  background:var(--white);
}
.calc-option-card .oc-icon{
  width:38px;
  height:38px;
  border-radius:10px;
  background:var(--cream);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:var(--ink);
}
.calc-option-card .oc-icon svg{ width:19px; height:19px; }
.calc-option-card .oc-text{ flex:1; min-width:0; }
.calc-option-card .oc-title{
  font-size:14.5px;
  font-weight:600;
  color:var(--ink);
  display:block;
  line-height:1.3;
}
.calc-option-card .oc-note{
  font-size:12.5px;
  color:#948c7f;
  display:block;
  margin-top:1px;
}
.calc-option-card .oc-check{
  width:20px;
  height:20px;
  border-radius:50%;
  border:1.5px solid var(--line);
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s ease;
}
.calc-option-card .oc-check svg{
  width:11px;
  height:11px;
  opacity:0;
  transition:opacity 0.15s ease;
}
.calc-option input:checked + .calc-option-card{
  border-color:var(--gold);
  background:rgba(201,162,74,0.06);
  box-shadow:0 6px 18px rgba(201,162,74,0.14);
}
.calc-option input:checked + .calc-option-card .oc-check{
  background:var(--gold);
  border-color:var(--gold);
}
.calc-option input:checked + .calc-option-card .oc-check svg{ opacity:1; }
.calc-option input:focus-visible + .calc-option-card{
  outline:2px solid var(--gold-dark);
  outline-offset:2px;
}

/* nav buttons */
.calc-nav-wrap{ margin-top:32px; }
.calc-step-warning{
  display:none;
  font-size:13px;
  color:#c0392b;
  background:rgba(192,57,43,0.08);
  border:1px solid rgba(192,57,43,0.25);
  border-radius:8px;
  padding:10px 14px;
  margin-bottom:14px;
}
.calc-step-warning.show{ display:block; }
.calc-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.calc-btn{
  border:none;
  border-radius:50px;
  padding:13px 28px;
  font-size:14.5px;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.calc-btn-primary{
  background:var(--ink);
  color:var(--white);
}
.calc-btn-primary:hover{ background:var(--gold-dark); }
.calc-btn-primary:disabled{
  opacity:0.35;
  cursor:not-allowed;
}
.calc-btn-primary:disabled:hover{ background:var(--ink); }
.calc-btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--line);
}
.calc-btn-ghost:hover{ border-color:var(--ink); }
.calc-btn-ghost:disabled{
  opacity:0;
  pointer-events:none;
}

/* contact form (final step) */
.calc-field{ margin-bottom:16px; }
.calc-field label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:6px;
}
.calc-field input,
.calc-field select{
  width:100%;
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:12px 14px;
  font-size:14.5px;
  color:var(--ink);
  background:var(--white);
  transition:border-color 0.2s ease;
}
.calc-field input:focus,
.calc-field select:focus{
  outline:none;
  border-color:var(--gold);
}
.calc-field-error{
  font-size:12px;
  color:#c0392b;
  margin-top:5px;
  display:none;
}
.calc-field.error input,
.calc-field.error select{ border-color:#c0392b; }
.calc-field.error .calc-field-error{ display:block; }

/* light-theme select (used inside the white wizard steps) */
.calc-select-wrap{ position:relative; }
.calc-select-wrap select{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:12px 40px 12px 14px;
  font-size:14.5px;
  color:var(--ink);
  background:var(--white);
  cursor:pointer;
  transition:border-color 0.2s ease;
}
.calc-select-wrap select:invalid{ color:#948c7f; }
.calc-select-wrap select:focus{
  outline:none;
  border-color:var(--gold);
}
.calc-select-wrap .calc-chevron{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  width:11px;
  height:7px;
  color:#948c7f;
  pointer-events:none;
}

/* light-theme stepper (used inside the white wizard steps) */
.calc-stepper{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:6px 8px;
  background:var(--white);
  max-width:320px;
}
.calc-step-btn{
  width:36px;
  height:36px;
  border-radius:50%;
  border:1.5px solid var(--line);
  background:transparent;
  color:var(--ink);
  font-size:18px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  flex-shrink:0;
}
.calc-step-btn:hover:not(:disabled){
  border-color:var(--gold);
  background:var(--gold);
  color:var(--white);
}
.calc-step-btn:disabled{
  opacity:0.35;
  cursor:not-allowed;
}
.calc-step-value{
  font-size:16px;
  font-weight:600;
  color:var(--ink);
}
.calc-row-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.calc-consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12.5px;
  color:#6b6459;
  margin-top:6px;
  line-height:1.5;
}
.calc-consent input{ margin-top:3px; flex-shrink:0; }
.g-recaptcha{ margin:14px 0; transform-origin:left top; }

/* summary sidebar */
.calc-summary-head{
  font-size:12px;
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--gold-dark);
  margin-bottom:4px;
}
.calc-summary-col h3{
  font-size:19px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:20px;
}
.calc-summary-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:24px;
}
.calc-summary-item{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding-bottom:14px;
  border-bottom:1px dashed var(--line);
  font-size:13.5px;
}
.calc-summary-item:last-child{ border-bottom:none; padding-bottom:0; }
.calc-summary-item .si-label{ color:#948c7f; }
.calc-summary-item .si-value{
  color:var(--ink);
  font-weight:600;
  text-align:right;
}
.calc-summary-item.empty .si-value{ color:#c4bcae; font-weight:400; }

.calc-estimate-box{
  background:var(--ink);
  border-radius:14px;
  padding:22px 20px;
  color:var(--white);
}
.calc-estimate-box .eb-label{
  font-size:12px;
  color:rgba(255,255,255,0.55);
  margin-bottom:6px;
}
.calc-estimate-box .eb-value{
  font-size:23px;
  font-weight:600;
  color:var(--gold);
  line-height:1.25;
}
.calc-estimate-box .eb-note{
  font-size:11.5px;
  color:rgba(255,255,255,0.45);
  margin-top:8px;
  line-height:1.5;
}

/* responsive */
@media (max-width:991px){
  .calc-body{ grid-template-columns:1fr; }
  .calc-form-col{ border-right:none; border-bottom:1px solid var(--line); padding:30px 22px; }
  .calc-summary-col{ padding:26px 22px 34px; }
  .calc-options, .calc-options.calc-options-3{ grid-template-columns:1fr 1fr; }
  .calc-page-banner{ padding:130px 0 44px; }
  .calc-page-banner h1{ font-size:29px; }
}
@media (max-width:575px){
  .calc-options, .calc-options.calc-options-3{ grid-template-columns:1fr; }
  .calc-row-2{ grid-template-columns:1fr; }
  .calc-progress{ padding:20px; }
  .calc-progress-step .label{ display:none; }
  .calc-progress-line{ width:20px; margin:0 6px; }
  .calc-nav{ flex-direction:column-reverse; gap:12px; }
  .calc-nav .calc-btn{ width:100%; justify-content:center; }
}

/* ===================================================================
   THANK YOU PAGE
=================================================================== */
.ty-section{
  background:var(--cream);
  padding:150px 0 100px;
  margin-top:-88px;
  min-height:80vh;
  display:flex;
  align-items:center;
}
.ty-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 30px 70px rgba(10,10,10,0.08);
  padding:52px;
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
.ty-check{
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 22px;
}
.ty-check svg{ width:28px; height:28px; }
.ty-card h1{
  font-size:30px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:10px;
}
.ty-card .ty-sub{
  font-size:15.5px;
  color:#6b6459;
  max-width:480px;
  margin:0 auto 30px;
  line-height:1.6;
}
.ty-recap{
  background:#faf8f4;
  border:1px solid var(--line);
  border-radius:14px;
  padding:24px 28px;
  text-align:left;
  margin-bottom:28px;
}
.ty-recap-title{
  font-size:12px;
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--gold-dark);
  margin-bottom:16px;
}
.ty-recap-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 24px;
}
.ty-recap-item .rl{
  font-size:12px;
  color:#948c7f;
  margin-bottom:3px;
}
.ty-recap-item .rv{
  font-size:14px;
  font-weight:600;
  color:var(--ink);
}
.ty-estimate{
  background:var(--ink);
  border-radius:14px;
  padding:22px 24px;
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.ty-estimate .el{
  font-size:12px;
  color:rgba(255,255,255,0.55);
  margin-bottom:4px;
}
.ty-estimate .ev{
  font-size:22px;
  font-weight:600;
  color:var(--gold);
}
.ty-steps{
  text-align:left;
  margin-bottom:30px;
}
.ty-steps-title{
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:14px;
}
.ty-steps ol{
  margin:0;
  padding-left:20px;
  color:#6b6459;
  font-size:14px;
  line-height:1.9;
}
.ty-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.ty-generic .ty-check{ background:#c0392b; }
@media (max-width:575px){
  .ty-card{ padding:32px 22px; }
  .ty-recap-grid{ grid-template-columns:1fr; }
  .ty-estimate{ flex-direction:column; align-items:flex-start; }
}