/* ==========================================================================
   Quotes app — quote wizard, quote page aside and thank-you page.
   Loaded by quotes/includes/wizard.html (and quote_thanks.html).
   Uses the design tokens of static/css/main.css.

   1. Wizard container, stepper, progress
   2. Steps, legends, choice groups, errors
   3. Service tiles & sub-service cards
   4. Photos & review panel
   5. Actions
   6. Quote page aside
   7. Thank-you page
   8. Item checklists (groups of tick boxes)
   9. Before the JavaScript runs
   ========================================================================== */

/* 1. Wizard container, stepper, progress ------------------------------------ */
.pm-wizard {
  background: var(--pm-white);
  border: 1px solid var(--pm-border);
  border-radius: calc(var(--pm-radius) * 1.25);
  box-shadow: var(--pm-shadow);
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

/* Stepper and progress only make sense once the JS splits the steps. */
.pm-wizard:not(.pm-wizard--enhanced) .pm-wizard__head { display: none; }

.pm-wizard__head { margin-bottom: 1.75rem; }

.pm-stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.pm-stepper__button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.25rem;
  border: 0;
  border-radius: var(--pm-radius-sm);
  background: none;
  color: var(--pm-muted);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.pm-stepper__button:disabled { cursor: default; opacity: 1; }
.pm-stepper__button:not(:disabled):hover { color: var(--pm-primary); }
.pm-stepper__number {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 2px solid var(--pm-border);
  background: var(--pm-white);
  color: var(--pm-muted);
  font-weight: 700;
  transition: background-color var(--pm-transition), border-color var(--pm-transition), color var(--pm-transition);
}
.pm-stepper__item.is-done .pm-stepper__number {
  border-color: var(--pm-primary-light);
  background: var(--pm-primary-soft);
  color: var(--pm-primary);
}
.pm-stepper__item.is-current .pm-stepper__button { color: var(--pm-ink); }
.pm-stepper__item.is-current .pm-stepper__number {
  border-color: var(--pm-primary);
  background: var(--pm-primary);
  color: var(--pm-white);
}
/* Small screens: only the current step's title is shown. The others are
   hidden visually but stay in the accessibility tree (same technique as
   Bootstrap's .visually-hidden), so every step button keeps its name. */
@media (max-width: 575.98px) {
  .pm-stepper__item:not(.is-current) .pm-stepper__title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

.pm-wizard__progress {
  height: 0.4rem;
  background: var(--pm-surface);
}
.pm-wizard__progress .progress-bar {
  width: 25%;
  background: linear-gradient(90deg, var(--pm-primary), var(--pm-primary-light));
  transition: width 0.3s ease;
}

/* 2. Steps, legends, choice groups, errors -------------------------------- */
.pm-wizard__step + .pm-wizard__step {
  /* Without JS all steps are stacked: separate them clearly. */
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--pm-border);
}
.pm-wizard--enhanced .pm-wizard__step + .pm-wizard__step {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.pm-wizard__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
}
/* The title receives focus from the script when a step opens (tabindex="-1"):
   no ring after a click, the shared solid ring after keyboard use. */
.pm-wizard__title:focus { outline: none; }
.pm-wizard__title:focus-visible {
  outline: var(--pm-focus-width) solid var(--pm-focus-color);
  outline-offset: var(--pm-focus-offset);
  border-radius: 0.25rem;
}
.pm-wizard__number {
  display: inline-grid;
  place-items: center;
  flex: 0 0 2.25rem;
  height: 2.25rem;
  border-radius: 0.7rem;
  background: var(--pm-accent-soft);
  /* Dark amber (the brand amber is too light for text on its soft tint). */
  color: var(--pm-accent-ink);
  font-size: 1.05rem;
}

.pm-wizard__legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--pm-border);
  color: var(--pm-primary);
  font-size: 1.05rem;
  font-weight: 700;
}

.pm-details { margin-top: 1.5rem; }
.pm-details > fieldset + fieldset { margin-top: 1.5rem; }
/* The wizard shows only the chosen service's questions: the no-JS hint is not needed. */
.pm-wizard--enhanced .pm-nojs-hint { display: none; }

.pm-required {
  margin-left: 0.15rem;
  color: #b42318; /* 6.2:1 on white */
  font-weight: 700;
}

.pm-choice-inline {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.5rem;
  row-gap: 0.35rem;
}
.pm-choice-inline .form-check,
.pm-choice-list .form-check { margin-bottom: 0.35rem; }

/* Error messages (server-side, or added by the JS): always visible
   (Bootstrap only shows .invalid-feedback right after an .is-invalid input). */
.invalid-feedback.pm-field-error { display: block; }
.invalid-feedback.pm-field-error[hidden] { display: none; }

/* Icons next to a text in a flex row (alerts, notes): never squeezed, and
   aligned with the first line of text. */
.pm-alert-icon {
  flex-shrink: 0;
  margin-top: 0.2em;
}

/* 3. Service tiles & sub-service cards ------------------------------------------- */
.pm-service-tile-col { position: relative; }

/* The radio stays focusable (keyboard, native validation bubble) but invisible. */
.pm-service-tile__input {
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.pm-service-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: 100%;
  padding: 1.25rem 1.25rem 1.1rem;
  border: 2px solid var(--pm-border);
  border-radius: var(--pm-radius);
  background: var(--pm-white);
  cursor: pointer;
  transition: border-color var(--pm-transition), box-shadow var(--pm-transition), transform var(--pm-transition);
}
.pm-service-tile:hover {
  border-color: var(--pm-primary-light);
  box-shadow: var(--pm-shadow-sm);
  transform: translateY(-2px);
}
.pm-service-tile__icon { margin-bottom: 0.5rem; }
.pm-service-tile__name { font-weight: 700; line-height: 1.25; padding-right: 1.5rem; }
.pm-service-tile__text { color: var(--pm-muted); font-size: 0.9rem; }
.pm-service-tile__check {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  color: var(--pm-primary);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--pm-transition), transform var(--pm-transition);
}

.pm-service-tile__input:checked + .pm-service-tile {
  border-color: var(--pm-primary);
  background: var(--pm-primary-soft);
  box-shadow: 0 0 0 1px var(--pm-primary) inset;
}
.pm-service-tile__input:checked + .pm-service-tile .pm-service-tile__check {
  opacity: 1;
  transform: scale(1);
}
.pm-service-tile__input:checked + .pm-service-tile .pm-service-tile__icon {
  background: var(--pm-primary);
  color: var(--pm-white);
}
/* The radio itself is invisible: its tile shows the keyboard focus. */
.pm-service-tile__input:focus-visible + .pm-service-tile {
  outline: var(--pm-focus-width) solid var(--pm-focus-color);
  outline-offset: var(--pm-focus-offset);
}
.pm-service-tile__input.is-invalid + .pm-service-tile { border-color: var(--bs-form-invalid-border-color); }

.pm-subservices {
  margin-top: 0.5rem;
  padding: 1.25rem;
  border-radius: var(--pm-radius);
  background: var(--pm-surface);
}
.pm-check-card {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  height: 100%;
  margin: 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-sm);
  background: var(--pm-white);
}
.pm-check-card .form-check-input { flex-shrink: 0; margin: 0.2rem 0 0; float: none; }
.pm-check-card .form-check-label { cursor: pointer; }
.pm-check-card:has(:checked) { border-color: var(--pm-primary-light); background: var(--pm-primary-soft); }

/* 4. Photos & review panel ----------------------------------------------------------- */
.pm-photos__summary {
  margin: 0.5rem 0 0;
  font-weight: 600;
}
.pm-photos__summary:empty { display: none; }
.pm-photos__list {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
  color: var(--pm-muted);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.pm-photos__list:empty { display: none; }

.pm-review {
  padding: 1.25rem 1.5rem;
  border: 1px dashed var(--pm-primary-light);
  border-radius: var(--pm-radius);
  background: var(--pm-surface);
}
.pm-review__heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  color: var(--pm-primary);
  font-weight: 700;
}
.pm-review__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--pm-border);
}
.pm-review__header:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pm-review__title { margin: 0; font-weight: 700; }
.pm-review__edit { --bs-btn-padding-x: 0; --bs-btn-padding-y: 0; font-weight: 600; }
.pm-review__section {
  margin: 0.5rem 0 0.25rem;
  color: var(--pm-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pm-review__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0.25rem 0 0;
  font-size: 0.925rem;
}
.pm-review__list dt { margin-top: 0.4rem; color: var(--pm-muted); font-weight: 600; }
.pm-review__list dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
@media (min-width: 576px) {
  .pm-review__list { grid-template-columns: minmax(8rem, 40%) minmax(0, 1fr); column-gap: 1rem; }
  .pm-review__list dd { margin-top: 0.4rem; }
}

/* 5. Actions ----------------------------------------------------------------------------- */
.pm-wizard__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--pm-border);
}
.pm-wizard__actions [data-wizard-submit][disabled] { cursor: progress; }
.pm-wizard__note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 1rem 0 0;
  color: var(--pm-muted);
  font-size: 0.875rem;
}
@media (max-width: 575.98px) {
  .pm-wizard__actions .btn { flex: 1 1 auto; }
}

/* 6. Quote page aside --------------------------------------------------------------------- */
@media (min-width: 992px) {
  .pm-quote-aside { position: sticky; top: var(--pm-header-offset); }
}
.pm-checklist {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pm-checklist li { display: flex; gap: 0.85rem; align-items: flex-start; }
.pm-checklist .pm-icon-badge { width: 2.5rem; height: 2.5rem; font-size: 1.1rem; }

/* 7. Thank-you page ------------------------------------------------------------------------- */
/* The hero is the shared page hero (main.css); these blocks sit under its lead
   (quotes/includes/thanks_hero_extra.html). */
.pm-reference {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1.5rem;
  border: 2px dashed var(--pm-accent);
  border-radius: var(--pm-radius);
  background: var(--pm-white);
}
.pm-reference__label {
  color: var(--pm-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pm-reference__value {
  color: var(--pm-primary-dark);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.pm-reference__hint { color: var(--pm-muted); font-size: 0.875rem; }
.pm-thanks__email {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  max-width: 41rem; /* the width of the lead above */
  margin-bottom: 0;
  color: var(--pm-hero-lead, var(--pm-muted));
  text-wrap: pretty;
}
.pm-thanks__email .bi { flex-shrink: 0; color: var(--pm-primary); }

/* .pm-timeline (next-steps list) is a shared component defined in static/css/main.css. */

/* 8. Item checklists (groups of tick boxes) -------------------------------------------
   Collapsible <details> groups keep about thirty rows per service short. */
.pm-items__group {
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-sm);
  background: var(--pm-white);
}
.pm-items__group + .pm-items__group { margin-top: 0.5rem; }

.pm-items__summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.85rem;
  border-radius: inherit;
  cursor: pointer;
  font-weight: 600;
  list-style: none; /* the custom chevron below replaces the native triangle */
}
.pm-items__summary::-webkit-details-marker { display: none; }
.pm-items__summary:hover { background: var(--pm-surface); }
.pm-items__group[open] > .pm-items__summary {
  border-bottom: 1px solid var(--pm-border);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.pm-items__icon { flex-shrink: 0; color: var(--pm-primary); }
.pm-items__title { flex: 1 1 auto; }
.pm-items__count {
  flex-shrink: 0;
  min-width: 1.6rem;
  padding: 0.05rem 0.4rem;
  border-radius: 1rem;
  background: var(--pm-primary-soft);
  color: var(--pm-primary-dark);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}
/* Chevron: points down when closed, up when open. */
.pm-items__summary::after {
  content: "";
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  margin-inline-start: 0.15rem;
  border-right: 2px solid var(--pm-muted);
  border-bottom: 2px solid var(--pm-muted);
  transform: rotate(45deg) translate(-0.1rem, -0.1rem);
  transition: transform var(--pm-transition);
}
.pm-items__group[open] > .pm-items__summary::after { transform: rotate(-135deg); }

.pm-items__body { padding: 0.5rem 0.85rem 0.75rem; }
.pm-items__note {
  margin: 0.25rem 0 0.5rem;
  color: var(--pm-muted);
  font-size: 0.85rem;
}

.pm-items__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pm-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.4rem 0;
}
.pm-item + .pm-item { border-top: 1px solid var(--pm-border); }
.pm-item__check { flex: 1 1 auto; margin-bottom: 0; }
.pm-item__icon { margin-right: 0.35rem; color: var(--pm-muted); }
.pm-item__badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 1rem;
  background: var(--pm-accent-soft);
  color: var(--pm-accent-ink);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.pm-item__note {
  margin: 0.1rem 0 0;
  color: var(--pm-muted);
  font-size: 0.8rem;
}

/* The quantity appears next to the item once it is ticked (the script shows
   it); without JavaScript every one of them is visible and usable. */
.pm-item__quantity {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 0 0 auto;
  padding-top: 0.1rem;
}
.pm-item__times { color: var(--pm-muted); }
.pm-item__number { width: 4rem; }

/* Two columns once there is room: about thirty rows fit in half the height. */
@media (min-width: 768px) {
  .pm-items__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.75rem;
  }
  .pm-item + .pm-item { border-top: 0; }
}

/* 9. Before the JavaScript runs ------------------------------------------------------------
   When scripting is enabled, briefly hide what the wizard will hide anyway,
   to avoid a flash of the long form. If the script fails to load, everything
   appears after 4 seconds (the animation ends) and the form stays usable. */
@media (scripting: enabled) {
  .pm-wizard:not(.pm-wizard--enhanced)
    :is([data-wizard-step]:not([data-wizard-step="1"]), [data-service-id], [data-details-kind], [data-item-quantity]) {
    animation: pm-wizard-wait 0s 4s both;
  }
}
@keyframes pm-wizard-wait {
  from {
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border-width: 0;
  }
}