/* ==========================================================================
   Multi step quote flow card
   Structure, sizing and behaviour cloned from the Benny's Roofing quiz card.
   Only the accent colors are swapped to the Transmission Repair Florida
   navy and gold so the widget sits inside this brand.
   ========================================================================== */

.quote-card,
.quote-card * {
  box-sizing: border-box;
}

.quote-card {
  /* self contained tokens so the card renders the same wherever it is dropped */
  --qf-font: "Montserrat", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --qf-reg: 400;
  --qf-semi: 600;
  --qf-bold: 700;
  --qf-black: 900;

  --qf-navy: #0c2039;
  --qf-navy-deep: #071527;
  --qf-gold: #d9b45b;
  --qf-gold-deep: #b48a34;
  --qf-ink: #221f1f;
  --qf-body: #f5f5f3;

  font-family: var(--qf-font);
  font-weight: var(--qf-reg);
  color: var(--qf-ink);
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(10, 10, 10, 0.18);
  background: var(--qf-body);
  text-align: left;
}

.quote-card button {
  font-family: inherit;
  cursor: pointer;
}

/* ---- card header ---- */

.coupon-head {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(90deg, var(--qf-navy-deep) 66%, var(--qf-navy) 100%);
  color: #fff;
  padding: 18px 22px;
}

.coupon-head--center {
  justify-content: center;
}

.coupon-head .card-title {
  font-weight: var(--qf-bold);
  font-size: 19px;
  line-height: 1.2;
}

.coupon-head .coin {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.form-body {
  background: var(--qf-body);
  padding: 14px 22px;
}

.quote-card--bare .form-body {
  padding-top: 22px;
}

/* ---- form shell ---- */

.quote-form {
  display: grid;
  gap: 13px;
}

.quote-form .field {
  display: block;
}

/* ---- progress row ---- */

.qflow-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.qflow-progress {
  flex: 1;
  height: 6px;
  background: #e8e6e0;
  border-radius: 999px;
  overflow: hidden;
}

.qflow-bar {
  display: block;
  height: 100%;
  width: 25%;
  background: linear-gradient(90deg, var(--qf-gold) 0%, var(--qf-gold-deep) 100%);
  border-radius: 999px;
  transition: width 0.25s ease;
}

.qflow--s2 .qflow-bar { width: 50%; }
.qflow--s3 .qflow-bar { width: 75%; }
.qflow--s4 .qflow-bar { width: 100%; }

.quote-card .qflow-count {
  font-size: 11px;
  font-weight: var(--qf-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #231f1f;
  white-space: nowrap;
}

/* ---- steps ----
   Every step is stacked in the same grid cell. The first one stays laid out
   but invisible so the card keeps a constant height across the whole flow. */

.qflow .qsteps {
  display: grid;
}

.qflow .qstep {
  display: none;
  grid-area: 1 / 1;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.qflow .qstep:first-child {
  display: block;
  visibility: hidden;
}

.qflow .qstep.is-active {
  display: block;
  visibility: visible;
}

.qflow .qstep--contact.is-active {
  display: grid;
  gap: 8px;
  align-content: start;
}

.quote-card .qflow-q {
  font-weight: var(--qf-black);
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--qf-ink);
  text-align: center;
  margin: 4px 0 0;
}

.quote-card .qflow-sub {
  font-size: 14.5px;
  line-height: 1.4;
  color: #555;
  text-align: center;
  margin: 5px 0 14px;
}

.quote-card .qflow-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 8px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  font-size: 16.5px;
  font-weight: var(--qf-bold);
  color: #1d1d1d;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.12s ease;
}

.qflow-opt:hover {
  border-color: var(--qf-gold-deep);
  transform: translateY(-1px);
}

.qflow-dot {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #c9c9c4;
  transition: border-color 0.12s ease;
}

.qflow-opt.is-selected {
  border-color: var(--qf-gold-deep);
}

.qflow-opt.is-selected .qflow-dot {
  border-color: var(--qf-gold-deep);
  background: var(--qf-gold-deep);
  box-shadow: inset 0 0 0 4px #fff;
}

.quote-card .qflow-back {
  display: block;
  grid-area: 1 / 1;
  align-self: end;
  justify-self: center;
  z-index: 2;
  margin: 0;
  padding: 4px 10px;
  background: none;
  border: 0;
  font-size: 15px;
  font-weight: var(--qf-semi);
  color: #666;
  cursor: pointer;
}

.qflow-back:hover {
  color: var(--qf-navy);
}

.qflow-back[hidden] {
  display: none;
}

/* ---- contact step ---- */

.qflow .qstep--contact .qflow-q { margin-bottom: 2px; }
.qflow .qstep--contact .qflow-sub { margin: -5px 0 6px; }
.qflow .qstep--contact .field { position: relative; }
.qflow .qstep--contact textarea { min-height: 0; }

.qflow .qstep--contact input,
.qflow .qstep--contact textarea {
  height: auto;
  width: 100%;
  margin: 0;
  padding: 13px 16px;
  background: #fff;
  border: 1px solid #949494;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  font-family: inherit;
  font-size: 16px;
  font-weight: var(--qf-reg);
  color: #0a0a0a;
  appearance: none;
}

.qflow .qstep--contact input:focus,
.qflow .qstep--contact textarea:focus {
  outline: none;
  border-color: var(--qf-gold-deep);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.qflow .qstep--contact input::placeholder,
.qflow .qstep--contact textarea::placeholder {
  color: #0a0a0a;
}

.qflow .qstep--contact .tel-cc {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  line-height: 1;
  color: #0a0a0a;
  pointer-events: none;
  z-index: 1;
}

.qflow .qstep--contact #qf-phone {
  padding-left: 44px;
}

/* invalid state after a submit attempt */

.quote-form.was-validated input:invalid,
.quote-form.was-validated textarea:invalid {
  border-color: #b52a2a;
  background-color: #f7e4e4;
}

.quote-form.was-validated input:invalid:focus,
.quote-form.was-validated textarea:invalid:focus {
  border-color: #b52a2a;
  box-shadow: 0 0 5px rgba(181, 42, 42, 0.5);
}

/* ---- email domain chips ---- */

.email-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.email-suggest[hidden] {
  display: none;
}

.email-chip {
  padding: 7px 12px;
  background: #fff;
  border: 1px solid #c9c9c4;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: var(--qf-semi);
  color: #1d1d1d;
  cursor: pointer;
}

.email-chip:hover {
  border-color: var(--qf-gold-deep);
  color: var(--qf-gold-deep);
}

/* ---- honeypot: off screen rather than display:none, which bots skip ---- */

.qf-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- server error line ---- */

.quote-card .qflow-error {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: #f7e4e4;
  border: 1px solid #e0b4b4;
  font-size: 14.5px;
  line-height: 1.45;
  color: #8d2020;
  text-align: center;
}

.quote-card .qflow-error[hidden] {
  display: none;
}

/* ---- submit + consent ---- */

.quote-card .button--form {
  display: block;
  width: 100%;
  margin: 4px 0 0;
  padding: 1.05rem 1rem;
  background: linear-gradient(180deg, #f7e8bd 0%, #dcba66 34%, #b48a34 68%, #f0d890 100%);
  border: none;
  border-radius: 1.2625rem;
  color: #17233a;
  font-family: inherit;
  font-size: 17px;
  font-weight: var(--qf-bold);
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.quote-card .button--form:hover {
  filter: brightness(1.06);
}

.quote-card .button--form:disabled {
  filter: saturate(0.55);
  cursor: default;
}

.quote-card .form-consent-title {
  margin: 10px 0 2px;
  font-size: 14px;
  font-weight: var(--qf-semi);
  color: #1d1d1d;
  text-align: center;
}

.quote-card .form-consent {
  margin: -3px 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #4b4b4b;
  text-align: left;
}

.quote-card .qflow .form-consent {
  text-align: center;
  margin-bottom: 0;
}

/* ---- inline success state (replaces the Benny's redirect to /success) ---- */

.qflow-done {
  display: none;
  text-align: center;
  padding: 18px 4px 10px;
}

.quote-form.is-done .qflow-done { display: block; }
.quote-form.is-done .qsteps,
.quote-form.is-done .qflow-top,
.quote-form.is-done .form-consent-title,
.quote-form.is-done .form-consent { display: none; }

.qflow-done-check {
  width: 66px;
  height: 66px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(180deg, #dcba66 0%, #b48a34 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.qflow-done-check svg {
  width: 34px;
  height: 34px;
  display: block;
}

.quote-card .qflow-done h3 {
  font-family: inherit;
  font-weight: var(--qf-black);
  font-size: 20px;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--qf-ink);
  margin-bottom: 8px;
}

.quote-card .qflow-done p {
  font-size: 15px;
  line-height: 1.5;
  color: #4b4b4b;
  max-width: 320px;
  margin: 0 auto;
}

/* ==========================================================================
   Sticky CTA bar + bottom sheet popup
   ========================================================================== */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  background: #f5f5f3;
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
  box-shadow: 0 -4px 16px rgba(5, 14, 28, 0.22);
}

.sticky-cta-inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.cta-visible .sticky-cta {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.3s ease;
}

.sticky-cta .sticky-btn {
  margin: 0;
  padding: 1.05rem 2rem;
  border: 0;
  border-radius: 1.2625rem;
  background: linear-gradient(180deg, #f7e8bd 0%, #dcba66 34%, #b48a34 68%, #f0d890 100%);
  color: #17233a;
  font-family: "Barlow", Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.sticky-cta .sticky-btn:hover {
  filter: brightness(1.06);
}

.quote-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.32s ease, visibility 0s linear 0.32s;
}

body.sheet-open .quote-sheet {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.32s ease;
}

body.sheet-open .sticky-cta {
  transform: translateY(100%);
  visibility: hidden;
}

.quote-sheet-close {
  position: absolute;
  top: 10px;
  right: calc(50% - 220px + 12px);
  z-index: 3;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.quote-sheet-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 37.4em) {
  .quote-sheet-close { right: 12px; }
}

.quote-sheet-body {
  max-width: 440px;
  margin: 0 auto;
  max-height: calc(100dvh - 16px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 32px rgba(5, 14, 28, 0.34);
  background: #f5f5f3;
}

/* the card keeps its own height; only the middle scrolls on short screens */
.quote-sheet-body .quote-card {
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  margin: 0;
  box-shadow: none;
}

.quote-sheet-body .form-body {
  min-height: 0;
  overflow-y: auto;
}

body.sheet-open .quote-sheet-body .coupon-head {
  border-radius: 18px 18px 0 0;
}

/* while the sheet holds the card, every step must reserve the same box */
.quote-sheet-body .qflow .qsteps { display: grid; }
.quote-sheet-body .qflow .qstep { display: block; grid-area: 1 / 1; visibility: hidden; }
.quote-sheet-body .qflow .qstep--contact { display: grid; gap: 8px; align-content: start; }
.quote-sheet-body .qflow .qstep.is-active { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .sticky-cta,
  .quote-sheet {
    transition: none;
  }
}