/* Lakeside SEO V3.6 Instant Quote UX Cleanup
   Makes the map quote flow easier for first-time customers to understand without changing pricing/API logic. */
:root{
  --iq-pine:#10291f;
  --iq-green:#1f6a3a;
  --iq-line:#dce7df;
  --iq-leaf:#eef7ef;
  --iq-cream:#fbfcf7;
  --iq-sky:#e9fbff;
  --iq-muted:#5b6b62;
  --iq-ink:#111a15;
}

.instant-quote-page .iq-hero h1{max-width:620px;}
.instant-quote-page .iq-hero p{max-width:680px;}

/* Make the top card tell customers exactly what this tool does. */
.instant-quote-page .iq-card-header{
  gap:18px!important;
  align-items:flex-start!important;
}
.instant-quote-page .iq-card-header .title{
  font-size:1.15rem!important;
  letter-spacing:-.025em!important;
}
.instant-quote-page .iq-card-header .sub{
  max-width:52ch!important;
}
.instant-quote-page .iq-card-header .tag{
  background:var(--iq-leaf)!important;
  border:1px solid var(--iq-line)!important;
  color:var(--iq-green)!important;
  border-radius:999px!important;
  padding:8px 11px!important;
  line-height:1.15!important;
  white-space:normal!important;
  max-width:150px!important;
  text-align:center!important;
}

.iq-flow-guide{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:14px 0 18px;
}
.iq-flow-guide .iq-flow-step{
  display:flex;
  gap:9px;
  align-items:flex-start;
  background:#fff;
  border:1px solid rgba(16,41,31,.12);
  border-radius:16px;
  padding:11px 10px;
  box-shadow:0 8px 18px rgba(16,41,31,.045);
}
.iq-flow-guide b{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  min-width:24px;
  border-radius:999px;
  background:var(--iq-green);
  color:#fff;
  font-size:.78rem;
  line-height:1;
}
.iq-flow-guide span{
  display:block;
  color:var(--iq-ink);
  font-weight:850;
  font-size:.88rem;
  line-height:1.12;
}
.iq-flow-guide em{
  display:block;
  color:var(--iq-muted);
  font-style:normal;
  font-size:.78rem;
  line-height:1.18;
  margin-top:3px;
}

/* Replace plain headings with clear numbered instructions. */
.instant-quote-page .iq-step-heading{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin:2px 0 14px;
}
.instant-quote-page .iq-step-num{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  min-width:34px;
  border-radius:999px;
  background:linear-gradient(180deg,#2e8447,#1f6a3a);
  color:#fff;
  font-weight:950;
  box-shadow:0 8px 16px rgba(31,106,58,.18);
}
.instant-quote-page .iq-step-heading h2{
  margin:0!important;
  line-height:1.08!important;
}
.instant-quote-page .iq-step-copy{
  margin:4px 0 0!important;
  color:var(--iq-muted)!important;
  font-size:.92rem!important;
  line-height:1.35!important;
}
.instant-quote-page .iq-step-heading-result .iq-step-num{
  background:linear-gradient(180deg,#8cc63f,#2d7b3d);
}

/* Turn choices into touchable rows. */
.instant-quote-page .options label.small{
  display:flex!important;
  align-items:flex-start!important;
  gap:10px!important;
  width:100%!important;
  border:1px solid rgba(16,41,31,.13)!important;
  border-radius:14px!important;
  padding:10px 11px!important;
  background:#fff!important;
  margin:0 0 8px!important;
  line-height:1.25!important;
}
.instant-quote-page .options label.small input{
  margin-top:.12rem!important;
  flex:0 0 auto!important;
}
.instant-quote-page .options label.small span{
  font-weight:760!important;
}
.instant-quote-page .options label.small:has(input:checked){
  border-color:rgba(31,106,58,.46)!important;
  background:linear-gradient(180deg,#f8fff9,#eef7ef)!important;
}
.instant-quote-page .options label.small:has(input:checked) span{
  font-weight:920!important;
  color:var(--iq-pine)!important;
}

.instant-quote-page #drawHelp{
  border-color:rgba(31,106,58,.18)!important;
  background:linear-gradient(180deg,#f8fff9,#e9fbff)!important;
  color:#123725!important;
  font-weight:650!important;
}
.instant-quote-page .map-help{
  font-size:.93rem!important;
}

/* Make map action buttons read like actions, not dev tooling. */
.instant-quote-page #btnDrawDriveway,
.instant-quote-page #btnDrawLawn,
.instant-quote-page #btnClear,
.instant-quote-page #btnCalc{
  min-height:45px!important;
  font-size:.92rem!important;
}
.instant-quote-page #btnCalc{
  border-width:2px!important;
  font-weight:950!important;
}

/* Quote result card: make it a readable review step. */
.instant-quote-page aside.panel{
  position:relative;
}
.instant-quote-page #quoteBox{
  margin-top:6px!important;
}
.instant-quote-page #quoteBox .kpi{
  background:#fff!important;
  border:1px solid rgba(16,41,31,.10)!important;
  border-radius:14px!important;
  padding:11px 12px!important;
  margin:0 0 10px!important;
  box-shadow:0 6px 14px rgba(16,41,31,.045)!important;
}
.instant-quote-page #quoteBox .label{
  color:#1f6a3a!important;
  font-size:.74rem!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  margin-bottom:4px!important;
}
.instant-quote-page #quoteBox .value{
  color:#10291f!important;
  font-size:1.06rem!important;
  font-weight:950!important;
  line-height:1.12!important;
}
.instant-quote-page #quoteBox .small{
  color:var(--iq-muted)!important;
  font-size:.82rem!important;
  line-height:1.25!important;
}
.instant-quote-page #qSeason,
.instant-quote-page #qMonthly{
  font-size:1rem!important;
}
.instant-quote-page #btnAccept{
  width:100%!important;
  min-height:48px!important;
  font-size:.92rem!important;
  white-space:normal!important;
  padding-left:14px!important;
  padding-right:14px!important;
}
.instant-quote-page #btnDecline{
  display:none!important;
}
.instant-quote-page #result{
  margin-top:10px!important;
}

/* Reduce confusion from the blank quote panel before the user calculates. */
.instant-quote-page aside.panel > .notice:last-child{
  background:#fff9ec!important;
  border-color:#ead7a3!important;
  color:#3f351c!important;
  font-weight:650!important;
}

@media(max-width:760px){
  .iq-flow-guide{grid-template-columns:1fr 1fr;}
  .iq-flow-guide .iq-flow-step{padding:10px;}
  .iq-flow-guide em{display:none;}
  .instant-quote-page .iq-card-header{
    display:block!important;
  }
  .instant-quote-page .iq-card-header .tag{
    display:inline-flex!important;
    max-width:none!important;
    margin-top:10px!important;
  }
  .instant-quote-page .iq-step-heading{
    gap:10px;
  }
  .instant-quote-page .iq-step-num{
    width:30px;
    height:30px;
    min-width:30px;
  }
}

@media(max-width:440px){
  .iq-flow-guide{grid-template-columns:1fr;}
  .iq-flow-guide .iq-flow-step{align-items:center;}
  .iq-flow-guide em{display:block;}
  .instant-quote-page .wrap{padding-left:14px!important;padding-right:14px!important;}
  .instant-quote-page .panel{padding-left:16px!important;padding-right:16px!important;}
  .instant-quote-page .iq-step-heading h2{font-size:1.22rem!important;}
}