/*! QCS Free Estimate Wizard — multi-step elevated form, dark/premium. */

.qcs-wiz {
  --qw-bg: #0c0a08;
  --qw-bg-2: #14110d;
  --qw-surface: #1a1714;
  --qw-surface-2: #221d18;
  --qw-surface-hover: #2a241e;
  --qw-ink: #f4f1ec;
  --qw-ink-2: rgba(244, 241, 236, 0.7);
  --qw-ink-3: rgba(244, 241, 236, 0.45);
  --qw-ink-4: rgba(244, 241, 236, 0.25);
  --qw-rule: rgba(244, 241, 236, 0.08);
  --qw-rule-2: rgba(244, 241, 236, 0.16);
  --qw-accent: #e05a2b;
  --qw-accent-2: #f37a4f;
  --qw-accent-deep: #a8401e;
  --qw-f: "Suisse Intl", -apple-system, "Helvetica Neue", sans-serif;
  --qw-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --qw-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  position: relative;
  background: var(--qw-bg);
  color: var(--qw-ink);
  font-family: var(--qw-f);
  font-weight: 300;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

.qcs-wiz *,
.qcs-wiz *::before,
.qcs-wiz *::after { box-sizing: border-box; }

/* Subtle vignette + grain for premium feel */
.qcs-wiz::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(224, 90, 43, 0.08), transparent 50%),
    radial-gradient(ellipse at 50% 110%, rgba(224, 90, 43, 0.05), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* ── Header (Instagram-story progress bars) ── */
.qcs-wiz__header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
}

.qcs-wiz__progress {
  flex: 1;
  display: flex;
  gap: 4px;
  align-items: center;
}
.qcs-wiz__progress-step {
  flex: 1;
  height: 2px;
  background: var(--qw-rule-2);
  border-radius: 0;
  transition: background 320ms var(--qw-ease);
}
.qcs-wiz__progress-step--active,
.qcs-wiz__progress-step--done { background: var(--qw-accent); }

.qcs-wiz__step-counter {
  font-size: 0.72rem;
  color: var(--qw-ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ── Stage (screens) ── */
.qcs-wiz__stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: clamp(2rem, 5vw, 5rem) clamp(1.25rem, 4vw, 3rem);
}

.qcs-wiz__screen {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.qcs-wiz__screen[hidden] { display: none; }

/* Headline typography */
.qcs-wiz__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--qw-accent);
  margin: 0 0 1rem;
}

.qcs-wiz__h1 {
  font-family: var(--qw-f);
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 1rem;
  color: var(--qw-ink);
  max-width: 28ch;
}

.qcs-wiz__lede {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--qw-ink-2);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  max-width: 56ch;
  line-height: 1.55;
}

/* ── Service cards (Screen 1) ── */
.qcs-wiz__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.qcs-wiz__card {
  position: relative;
  background: var(--qw-surface);
  border: 1px solid var(--qw-rule);
  cursor: pointer;
  text-align: left;
  color: var(--qw-ink);
  font-family: var(--qw-f);
  transition: background 240ms var(--qw-ease), border-color 240ms var(--qw-ease), transform 80ms var(--qw-ease);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.qcs-wiz__card:hover {
  background: var(--qw-surface-hover);
  border-color: var(--qw-rule-2);
}
.qcs-wiz__card:active { transform: translateY(1px); }
.qcs-wiz__card--selected,
.qcs-wiz__card:focus-visible {
  outline: none;
  border-color: var(--qw-accent);
  background: var(--qw-surface-2);
}
.qcs-wiz__card--selected::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--qw-accent);
}

.qcs-wiz__card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--qw-surface-2);
  filter: saturate(1.05) brightness(0.92);
  transition: filter 320ms var(--qw-ease);
}
.qcs-wiz__card:hover .qcs-wiz__card-image { filter: saturate(1.1) brightness(1); }

.qcs-wiz__card-body {
  padding: 1.5rem 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.qcs-wiz__card-title {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 0.45rem;
  color: var(--qw-ink);
  line-height: 1.25;
}

.qcs-wiz__card-desc {
  font-size: 0.92rem;
  color: var(--qw-ink-2);
  margin: 0;
  line-height: 1.55;
  flex: 1;
}

.qcs-wiz__card-meta {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--qw-rule);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qw-ink-3);
}
.qcs-wiz__card-meta strong {
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--qw-ink);
}

/* ── Area screen ── */
.qcs-wiz__area-wrap {
  background: var(--qw-surface);
  border: 1px solid var(--qw-rule);
  border-radius: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  max-width: 720px;
  width: 100%;
}

.qcs-wiz__big-input {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  border-bottom: 1px solid var(--qw-rule-2);
  padding-bottom: 1rem;
}
.qcs-wiz__big-input input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--qw-ink);
  font-family: var(--qw-f);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  padding: 0;
  min-width: 0;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.qcs-wiz__big-input input::placeholder { color: var(--qw-ink-4); }
.qcs-wiz__big-input input::-webkit-outer-spin-button,
.qcs-wiz__big-input input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.qcs-wiz__big-input input[type="number"] { -moz-appearance: textfield; }
.qcs-wiz__big-input-suffix {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--qw-ink-3);
  font-weight: 400;
}

.qcs-wiz__field-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--qw-ink-3);
  margin-bottom: 0.6rem;
}

.qcs-wiz__chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.qcs-wiz__chip {
  font-family: var(--qw-f);
  font-size: 0.85rem;
  font-weight: 400;
  padding: 0.6rem 1rem;
  background: transparent;
  color: var(--qw-ink-2);
  border: 1px solid var(--qw-rule-2);
  border-radius: 0;
  cursor: pointer;
  transition: background 200ms var(--qw-ease), color 200ms var(--qw-ease), border-color 200ms var(--qw-ease), transform 80ms var(--qw-ease);
  white-space: nowrap;
}
.qcs-wiz__chip:active { transform: translateY(1px); }
.qcs-wiz__chip:hover {
  border-color: var(--qw-accent);
  color: var(--qw-ink);
}
.qcs-wiz__chip--active {
  background: var(--qw-accent);
  border-color: var(--qw-accent);
  color: #fff;
}

/* ── Condition cards (Screen 3) ── */
.qcs-wiz__cards--3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 720px) {
  .qcs-wiz__cards--3col { grid-template-columns: 1fr; }
}

.qcs-wiz__condition-rating {
  display: flex;
  gap: 4px;
  margin-bottom: 1rem;
}
.qcs-wiz__condition-rating span {
  width: 16px;
  height: 4px;
  background: var(--qw-rule-2);
  border-radius: 2px;
}
.qcs-wiz__condition-rating span.on { background: var(--qw-accent); }

/* ── Finish cards (Screen 4) ── */
.qcs-wiz__cards--finish .qcs-wiz__card { min-height: 200px; }
.qcs-wiz__card-rate {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--qw-ink);
  letter-spacing: -0.01em;
}
.qcs-wiz__card-rate small {
  color: var(--qw-ink-3);
  font-size: 0.78rem;
  font-weight: 400;
}

/* ── Estimate reveal (Screen 5) ── */
.qcs-wiz__estimate {
  background: var(--qw-surface);
  border: 1px solid var(--qw-rule);
  border-radius: 0;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
.qcs-wiz__estimate-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--qw-accent);
  margin-bottom: 1rem;
}
.qcs-wiz__estimate-amount {
  font-size: clamp(3.5rem, 9vw, 6.5rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0 0 0.75rem;
  color: var(--qw-ink);
  font-variant-numeric: tabular-nums;
}
.qcs-wiz__estimate-amount sup {
  font-size: 0.45em;
  font-weight: 400;
  color: var(--qw-ink-3);
  vertical-align: top;
  position: relative;
  top: 0.6em;
  margin-right: 0.1em;
}
.qcs-wiz__estimate-note {
  font-size: 0.95rem;
  color: var(--qw-ink-2);
  margin: 0 auto 2rem;
  max-width: 36ch;
  line-height: 1.55;
}

.qcs-wiz__breakdown {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  max-width: 480px;
  margin: 0 auto;
  border-top: 1px solid var(--qw-rule);
  padding-top: 1.25rem;
}
.qcs-wiz__breakdown li {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--qw-ink-2);
  padding: 0.4rem 0;
  font-variant-numeric: tabular-nums;
}
.qcs-wiz__breakdown li.qcs-wiz__breakdown-total {
  font-weight: 500;
  color: var(--qw-ink);
  border-top: 1px solid var(--qw-rule);
  margin-top: 0.5rem;
  padding-top: 0.75rem;
}

/* ── Contact form (Screen 6) ── */
.qcs-wiz__contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  max-width: 720px;
  width: 100%;
}
@media (max-width: 720px) {
  .qcs-wiz__contact { grid-template-columns: 1fr; }
}

.qcs-wiz__field {
  display: flex;
  flex-direction: column;
}
.qcs-wiz__field--full { grid-column: 1 / -1; }
.qcs-wiz__field label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--qw-ink-3);
  margin-bottom: 0.5rem;
}
.qcs-wiz__field input,
.qcs-wiz__field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--qw-rule-2);
  color: var(--qw-ink);
  font-family: var(--qw-f);
  font-size: 1.05rem;
  font-weight: 300;
  padding: 0.65rem 0;
  outline: 0;
  transition: border-color 200ms var(--qw-ease);
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  width: 100%;
}
.qcs-wiz__field input::placeholder,
.qcs-wiz__field textarea::placeholder { color: var(--qw-ink-4); }
.qcs-wiz__field input:focus,
.qcs-wiz__field textarea:focus { border-bottom-color: var(--qw-accent); }
.qcs-wiz__field textarea { resize: vertical; min-height: 80px; }

.qcs-wiz__error {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--qw-accent-2);
  min-height: 1em;
}

/* ── Success screen ── */
.qcs-wiz__success {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.qcs-wiz__success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(224, 90, 43, 0.12);
  color: var(--qw-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 1.5rem;
  align-self: center;
}
.qcs-wiz__success .qcs-wiz__estimate { margin-left: auto; margin-right: auto; }

/* ── Footer / Actions ── */
.qcs-wiz__footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
  border-top: 1px solid var(--qw-rule);
  background: rgba(12, 10, 8, 0.7);
  backdrop-filter: blur(8px);
}

.qcs-wiz__back,
.qcs-wiz__next,
.qcs-wiz__submit,
.qcs-wiz__alt-link {
  font-family: var(--qw-f);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.85rem 1.5rem;
  border-radius: 0;
  border: 1px solid var(--qw-rule-2);
  background: transparent;
  color: var(--qw-ink);
  cursor: pointer;
  transition: background 200ms var(--qw-ease), border-color 200ms var(--qw-ease), color 200ms var(--qw-ease), transform 80ms var(--qw-ease);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.qcs-wiz__back[hidden],
.qcs-wiz__next[hidden],
.qcs-wiz__submit[hidden],
.qcs-wiz__alt-link[hidden] { display: none !important; }
.qcs-wiz__back:hover { color: var(--qw-ink); border-color: var(--qw-ink-3); }
.qcs-wiz__next:active,
.qcs-wiz__submit:active,
.qcs-wiz__back:active { transform: translateY(1px); }
.qcs-wiz__next,
.qcs-wiz__submit {
  background: var(--qw-accent);
  border-color: var(--qw-accent);
  color: #fff;
  padding: 0.95rem 2rem;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.qcs-wiz__next:hover,
.qcs-wiz__submit:hover { background: #c54d22; border-color: #c54d22; }
.qcs-wiz__next:disabled,
.qcs-wiz__submit:disabled {
  background: var(--qw-rule-2);
  border-color: var(--qw-rule-2);
  color: var(--qw-ink-4);
  cursor: not-allowed;
}
.qcs-wiz__alt-link {
  border: 0;
  background: transparent;
  color: var(--qw-ink-3);
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 0.4rem 0;
}
.qcs-wiz__alt-link:hover { color: var(--qw-ink); }

/* ── Screen transitions (handled via JS classes) ── */
.qcs-wiz__screen { animation: qwFadeIn 380ms var(--qw-ease) both; }
.qcs-wiz__screen.is-leaving { animation: qwFadeOut 200ms var(--qw-ease) both; }
@keyframes qwFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes qwFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .qcs-wiz__screen,
  .qcs-wiz__card,
  .qcs-wiz__chip,
  * { animation: none !important; transition: none !important; }
}

/* ── Mobile tweaks ── */
@media (max-width: 720px) {
  .qcs-wiz__header { padding: 1rem 1rem; gap: 0.75rem; }
  .qcs-wiz__brand { font-size: 0.62rem; }
  .qcs-wiz__step-counter { font-size: 0.68rem; }
  .qcs-wiz__progress-step { width: 18px; }
  .qcs-wiz__progress-step--active { width: 28px; }
  .qcs-wiz__stage { padding: 1.5rem 1rem; }
  .qcs-wiz__footer { padding: 1rem; flex-wrap: wrap; }
  .qcs-wiz__next, .qcs-wiz__submit { flex: 1; justify-content: center; }
}