/* --- Multi-step wizard container --- */
.multi_step_form {
    background: #f6f9fb;
    display: block;
    overflow: hidden;
}

#msform {
    text-align: center;
    position: relative;
    
    min-height: 820px;
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    z-index: 1;
    border-radius: 18px;
}

#msform .tittle {
    padding: 24px 24px 8px
}

#msform .tittle h2 {
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #3f4553;
    margin: 0 0 6px
}

#msform .tittle p {
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: #5f6771;
    margin: 0
}

/* --- fieldsets --- */
#msform fieldset {
    border: 0;
    padding: 20px 32px 0;
    position: relative;
    width: 100%;
    left: 0;
    right: 0;
}

#msform fieldset:not(:first-of-type) {
    display: none
}

#msform fieldset h3 {
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #3f4553;
    margin-bottom: 4px
}

#msform fieldset h6 {
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #5f6771;
    margin-bottom: 22px
}
#progressbar{
  --gap: 3px;        /* your existing gap */
  --dot: 32px;       /* circle diameter (change this to shrink/grow) */
  --line: 8px;       /* connector thickness */
  margin:12px 24px 24px;
  display:flex;
  gap:var(--gap);
  justify-content:space-between;
  padding:0;
}

#progressbar li{
  list-style:none;
  flex:1;
  position:relative;
  color:#99a2a8;
  font-weight:600;
  font-size:13px;
}

/* circles */
#progressbar li::before{
  content:'';
  display:block;
  margin:0 auto 8px;
  width:var(--dot);
  height:var(--dot);
  border-radius:50%;
  background:#eaf0f4;
}

/* connector — spans half the item + half the gap; stays centered vertically */
#progressbar li::after{
  content:'';
  position:absolute;
  left:calc(-50% - (var(--gap)/2) + (var(--dot)/2));
  right:calc( 50% + (var(--gap)/2) + (var(--dot)/2));
  top:calc((var(--dot)/2) - (var(--line)/2));
  height:var(--line);
  background:#eaf0f4;
  z-index:-1;
}

/* first item has no left connector */
#progressbar li:first-child::after{ display:none; }

/* active coloring */
#progressbar li.active{ color:#5cb85c; }
#progressbar li.active::before,
#progressbar li.active::after{ background:#5cb85c; }


/* Buttons */
.action-button {
    background: #5cb85c;
    color: #fff;
    border: 1px solid #5cb85c;
    border-radius: 10px;
    cursor: pointer;
    min-width: 140px;
    font-weight: 800;
    font-size: 14px;
    line-height: 40px;
    padding: 0 22px;
    text-transform: uppercase;
    display: inline-block
}

.action-button:hover {
    background: #405867;
    border-color: #405867
}

.previous_button {
    background: transparent;
    color: #99a2a8;
    border: 1px solid #99a2a8
}

.previous_button:hover {
    background: #405867;
    border-color: #405867;
    color: #fff
}

/* Inputs */
#msform .form-control,
#msform .form-select {
    border-radius: 10px;
    border: 1px solid #d8e1e7;
    padding: 10px 14px;
    height: 48px;
    font-size: 15px;
    color: #39424e;
    outline: none;
    box-shadow: none
}

#msform textarea.form-control {
    height: auto;
    min-height: 110px;
    padding: 12px 14px
}

/* Your existing cards for budget/timeline */
.qp-card {
    border: 1px solid #ddd;
    cursor: pointer;
    transition: border-color .3s, box-shadow .3s;
    border-radius: 12px
}

.qp-card:hover {
    border-color: #007bff;
    box-shadow: 0 0 10px rgba(0, 123, 255, .2)
}

.qp-card input:checked+.qp-card-body {
    border-color: #007bff;
    background: #e9f5ff
}

.qp-card-body {
    padding: 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: border-color .3s, background-color .3s
}

.qp-card-title {
    font-weight: 800
}

.qp-card-sub {
    font-size: .9em;
    color: #666
}

/* Chips for selected services */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #f1f4f7;
    border: 1px solid #d8e1e7;
    font-weight: 600
}

/* Calendly frame background */
#calendlyWrap {
    min-height: 620px;
    background: #111;
    border-radius: 18px;
    overflow: hidden
}

/* Logo spacing tweak */
.msform-logo {
    padding-top: 10px
}

#msform .form-control.is-valid,
#msform .form-select.is-valid {
    border-color: #5cb85c !important;
    box-shadow: 0 0 0 2px rgba(92, 184, 92, .12);
}

#msform .form-control.is-invalid,
#msform .form-select.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, .10);
}

.field-error {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 16px;
    color: #dc3545;
}


/* Base action button = gray (clickable) */
.action-button{
  background:#cbd3da !important;
  border:1px solid #cbd3da !important;
  color:#6b7785 !important;
  border-radius:10px;
  cursor:pointer;
  min-width:140px;
  font-weight:800;
  font-size:14px;
  line-height:40px;
  padding:0 22px;
  text-transform:uppercase;
  display:inline-block;
}

/* Turns green only when current step is valid */
.action-button.ready{
  background:#5cb85c !important;
  border-color:#5cb85c !important;
  color:#fff !important;
}
.action-button.ready:hover{
  background:#405867 !important;
  border-color:#405867 !important;
}

/* Keep your previous button style */
.previous_button{
  background:transparent !important;
  color:#99a2a8 !important;
  border:1px solid #99a2a8 !important;
}
.previous_button:hover{
  background:#405867 !important;
  border-color:#405867 !important;
  color:#fff !important;
}
/* Back button: always dark blue */
.previous_button,
.previous.previous_button {
  background: #0A2A66 !important;   /* dark blue */
  border-color: #0A2A66 !important;
  color: #fff !important;
}
.previous_button:hover,
.previous.previous_button:hover {
  background: #081E49 !important;    /* darker on hover */
  border-color: #081E49 !important;
  color: #fff !important;
}

/* Validation states (unchanged) */
#msform .form-control.is-valid, #msform .form-select.is-valid{
  border-color:#5cb85c !important;
  box-shadow:0 0 0 2px rgba(92,184,92,.12);
}
#msform .form-control.is-invalid, #msform .form-select.is-invalid{
  border-color:#dc3545 !important;
  box-shadow:0 0 0 2px rgba(220,53,69,.10);
}
.field-error{
  display:block;margin-top:6px;font-size:12px;line-height:16px;color:#dc3545;
}

/* One column by default (mobile) */
.services-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;                /* spacing between pills */
}

/* Two columns on small screens and up */
@media (min-width: 576px){
  .services-grid{
    grid-template-columns: 1fr 1fr;
  }
}

/* Optional: ensure the label fills its grid cell cleanly */
.services-grid .qp-card{ margin: 0; }

/* Apply to every step in the wizard */
#msform .qp-card-title{
  font-size: 0.95rem;   /* ~15.2px @16px root */
  line-height: 1.25;
  font-weight: 700;
}
#msform .qp-card-sub{
  font-size: 0.875rem;  /* ~14px */
  line-height: 1.2;
  color: #667085;
}
#msform .qp-card-body{
  padding: 12px 14px;   /* tighter pills everywhere */
}

/* Step headings across all fieldsets */
#msform fieldset h3{
  font-size: 1.1rem;
  line-height: 1.35;
}
#msform fieldset h6{
  font-size: 0.9rem;
  line-height: 1.4;
  color: #7a7a7a;
}

/* (optional) make it a touch larger on big screens */
@media (min-width: 992px){
  #msform .qp-card-title{ font-size: 1rem; }
  #msform fieldset h3{ font-size: 1.2rem; }
}

/* make the country code wider; prevent Bootstrap's max-width from capping it */
.input-group .phone-cc { flex: 0 0 220px; max-width: none; }
.input-group #q_phone   { flex: 1 1 auto; min-width: 0; } /* fill the rest */

.action-button { transition: none; }

/* example */


#quote-result { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:1000; }

.modalbox.success, .modalbox.error {
  background:#fff; padding:25px 25px 15px; text-align:center;
  border-radius:8px;
  box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition:all .3s cubic-bezier(.25,.8,.25,1);
  max-width:540px;
}
.modalbox.success h1, .modalbox.error h1 { font-family:"Montserrat",sans-serif; margin-top:8px; }
.modalbox.success p, .modalbox.error p { font-family:"Open Sans",sans-serif; }

.modalbox .icon {
  position:relative; margin:0 auto; margin-top:-75px;
  height:100px; width:100px; border-radius:50%;
  background:rgba(76,175,80,1); /* success green */
  animation:fall-in .75s;
  display:flex; align-items:center; justify-content:center;
}
.modalbox.success .icon span { font-size:48px; color:#fff; line-height:1; }
.modalbox.error .icon { background:rgba(244,67,54,1); }
.modalbox.error .icon span { font-size:40px; color:#fff; }

.modalbox.success .btn, .modalbox.error .btn {
  width:80%; margin-top:15px; border-radius:30px; transition:all .1s ease-in-out;
  background:transparent; outline:none;
}

.modalbox.success .btn { color:rgba(76,175,80,1); border:1px solid rgba(76,175,80,1); }
.modalbox.success .btn:hover { color:#fff; background:rgba(76,175,80,1); border-color:transparent; }

.modalbox.error .btn { color:rgba(244,67,54,1); border:1px solid rgba(244,67,54,1); }
.modalbox.error .btn:hover { color:#fff; background:rgba(244,67,54,1); border-color:transparent; }

.center { float:none; margin-left:auto; margin-right:auto; }
.change { display:block; font-size:10px; color:#ccc; margin-top:10px; }

@keyframes fall-in {
  0% { transform:scale(3); opacity:0; }
  50% { transform:scale(1); opacity:1; }
  60% { transform:scale(1.1); }
  100% { transform:scale(1); }
}

/* Tiny helpers if Bootstrap glyphicons aren’t present—use emoji fallback */
.glyphicon { font-style:normal; }
.glyphicon-ok::before { content:"✓"; }
.glyphicon-thumbs-down::before { content:"👎"; }

#quote-success,
#quote-result {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 60vh; /* or what looks good */
}

/* Keep Calendly overlay safe if you have aggressive CSS */
/* Only while Calendly popup is open */
html.calendly-open, body.calendly-open {
  display: block !important;     /* undo global flex */
  height: auto !important;
  overflow: auto !important;     /* allow overlay to size correctly */
}

/* Make sure Calendly covers the whole viewport and is on top */
.calendly-overlay, .calendly-popup {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2147483000 !important; /* above any site overlay */
}

/* If you applied transforms to ancestors, disable during popup */
.calendly-open .modalbox,
.calendly-open #quote-success,
.calendly-open #quote-result,
.calendly-open .background {
  transform: none !important;
  filter: none !important;
}

.btn { border-radius: 9999px; padding: 0.8rem 1.2rem; font-weight: 600; }
.btn-lg { padding: 1rem 1.25rem; font-size: 1.05rem; }
.btn-primary { background:#0A65CC; border-color:#0A65CC; color:#fff; }
.btn-primary:hover { filter: brightness(1.05); }
.btn-outline-secondary { background:transparent; border:1px solid #aab2bd; color:#334155; }
.btn-outline-secondary:hover { background:#f3f4f6; }
.btn-icon { margin-right: .5rem; }

@media (max-width: 480px) {
  .btn, .btn-lg { padding: 0.9rem 1rem; font-size: 1rem; }
}