/* hc-* shared component system (Phase 1 + Phase 2A customer-wizard subset).
   Implemented now: hc-faq, hc-badge (+--trust/--warning), hc-card, hc-grid,
   hc-form (static field styling, used by both the non-functional /contact/
   shell and the real Phase 2A job-wizard forms), hc-stepper (wizard
   progress), hc-field-error/hc-form-errors, hc-choice-group/hc-choice
   (radio/checkbox card lists used by the job-wizard), hc-review-section/
   hc-review-row/hc-review-edit/hc-specialist-warning (Slice 3 Step 8
   review page).
   Deferred to Phase 2B+ per shared-component-system.md: hc-price-card,
   hc-uploader, hc-summary-card, hc-compare-table, hc-carrier-card,
   hc-bid-card, hc-postcode-cta, hc-sticky-cta, and the remaining
   marketing/trust card variants (service/trust/icon/step/case-study cards
   etc.). Do not treat this file as the full spec implementation. */

/* === hc-faq: native details/summary accordion === */
.hc-faq {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: var(--surface, #fff);
}

.hc-faq__item {
  border-bottom: 1px solid var(--border);
}

.hc-faq__item:last-child {
  border-bottom: none;
}

.hc-faq__question {
  display: block;
  padding: var(--space-4, 16px) var(--space-4, 16px);
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 40px;
}

.hc-faq__question::-webkit-details-marker {
  display: none;
}

.hc-faq__question::after {
  content: "";
  position: absolute;
  right: var(--space-4, 16px);
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.15s ease;
}

.hc-faq__item[open] .hc-faq__question::after {
  transform: translateY(-30%) rotate(225deg);
}

.hc-faq__question:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(37, 99, 235, 0.35));
}

.hc-faq__answer {
  padding: 0 var(--space-4, 16px) var(--space-4, 16px);
  color: var(--muted);
  font-size: 0.92rem;
}

.hc-faq__answer > *:first-child {
  margin-top: 0;
}

/* === hc-badge: trust/status pill === */
.hc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill, 999px);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  border: 1px solid var(--border);
  background: var(--surface, #fff);
  color: var(--text);
  white-space: nowrap;
}

.hc-badge--trust {
  border-color: var(--primary);
  background: var(--success-bg, #eaf6ec);
  color: var(--primary-dark);
}

.hc-badge--warning {
  border-color: var(--accent);
  background: var(--warning-bg, #fff4e0);
  color: #7a5210;
}

/* === hc-card: generic outlined content card === */
.hc-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface, #fff);
  padding: var(--space-4, 16px);
  color: var(--text);
  text-decoration: none;
}

@media (min-width: 640px) {
  .hc-card {
    padding: var(--space-5, 20px);
  }
}

.hc-card__eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 6px;
}

.hc-card__title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: var(--primary-dark);
}

.hc-card__body {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.hc-card__footer {
  margin-top: var(--space-3, 12px);
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}

.hc-card--link {
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.hc-card--link:hover {
  border-color: var(--border-hover, #b9b9b9);
  transform: translateY(-1px);
}

.hc-card--link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(37, 99, 235, 0.35));
}

/* === hc-grid: responsive card grid wrapper === */
.hc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4, 16px);
}

@media (min-width: 640px) {
  .hc-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

/* === hc-form: basic static shell-form field styling === */
.hc-form {
  max-width: 640px;
}

.hc-form p {
  margin: 0 0 20px;
}

.hc-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.92rem;
}

/* Raw UA fieldset/legend chrome (default border + padding) was the
   "raw browser fieldset/legend borders" defect flagged in the 2026-10-02
   GPT-supervisor design mandate -- reset site-wide for every .hc-form
   fieldset/legend, not just the one in the screenshot. */
.hc-form fieldset {
  border: none;
  margin: 0 0 20px;
  padding: 0;
  min-width: 0;
}

.hc-form legend {
  display: block;
  width: 100%;
  float: none;
  padding: 0;
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 0.92rem;
}

.hc-help {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 4px;
}

.hc-optional {
  font-weight: 400;
  color: var(--muted);
}

.hc-form input[type="text"],
.hc-form input[type="email"],
.hc-form input[type="tel"],
.hc-form select,
.hc-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  min-height: 44px;
}

.hc-form textarea {
  min-height: 140px;
  resize: vertical;
}

.hc-form input:focus,
.hc-form select:focus,
.hc-form textarea:focus {
  outline: 3px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}

.hc-form .btn-primary {
  min-height: 44px;
  padding: 12px 22px;
  font-size: 1rem;
  border-radius: 8px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.hc-form .btn-primary:hover {
  background: var(--primary-dark);
}

.hc-form-status {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 8px;
  background: #fff7e6;
  border: 1px solid var(--accent);
  font-size: 0.92rem;
}

.hc-form-status[hidden] {
  display: none;
}

/* === hc-stepper: wizard progress indicator (Phase 2A customer wizard) === */
/* .hc-stepper is the <ol> itself; aria-current="step" lives on the
   current <li>, not on this list or its wrapping <nav> (a11y fix). */
.hc-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  font-weight: 700;
}

.hc-step {
  padding: 4px 10px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--border);
  color: var(--muted);
}

.hc-step-current {
  border-color: var(--primary);
  color: var(--primary-dark);
  background: var(--success-bg, #eaf6ec);
}

.hc-step-done {
  color: var(--primary-dark);
}

/* === hc-form field error text === */
.hc-field-error {
  margin: 6px 0 0;
  color: #b3261e;
  font-size: 0.85rem;
  font-weight: 600;
}

.hc-form-errors {
  margin: 0 0 20px;
  padding: 14px 16px;
  border-radius: 8px;
  background: #fdecea;
  border: 1px solid #b3261e;
  font-size: 0.92rem;
}

.hc-form-errors ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.hc-form-errors a {
  color: #b3261e;
  text-decoration: underline;
}

/* === hc-choice-group: radio/checkbox card list (wizard single/multi select) === */
.hc-choice-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hc-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  min-height: 44px;
  cursor: pointer;
}

.hc-choice input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.hc-choice:has(input:checked) {
  border-color: var(--primary);
  background: var(--success-bg, #eaf6ec);
}

/* === hc-review-*: Step 8 human-readable draft review === */
.hc-review-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface, #fff);
  padding: var(--space-4, 16px);
  margin: 0 0 16px;
}

.hc-review-section h2 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: var(--primary-dark);
}

.hc-review-section dl {
  margin: 0;
}

.hc-review-row {
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

.hc-review-row:first-of-type {
  border-top: none;
}

.hc-review-row dt {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.hc-review-row dd {
  margin: 4px 0 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.hc-review-edit {
  margin-left: 8px;
  font-size: 0.85rem;
  font-weight: 700;
}

.hc-specialist-warning {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--warning-bg, #fff4e0);
  color: #7a5210;
  font-size: 0.9rem;
  margin: 0 0 16px;
}

/* === Step 1 compact layout (2026-09-20 GPT-supervisor UI fix) ===
   Additive only: every rule below matches a class name not used anywhere
   else in the codebase (grep confirms hc-choice-group/hc-choice/hc-form/
   hc-photo-list above are the only shared classes carrier-registration.js
   and the static /contact/ shell also render), so this section cannot
   change how those other forms look. */

.hc-form--compact p {
  margin: 0 0 14px;
}

.hc-form--compact fieldset {
  margin: 0 0 14px;
}

.hc-form--compact input[type="text"],
.hc-form--compact textarea {
  padding: 10px 12px;
}

.hc-form--compact textarea.hc-compact-textarea {
  min-height: 70px;
}

/* Step 1's date input is the only <input type="date"> under hc-form --
   the base .hc-form input rule above never listed type="date", so without
   this it would render unstyled (no width/border/min-height) next to the
   new preferred-time column. */
.hc-form--compact input[type="date"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  min-height: 44px;
}

.hc-form--compact input[type="date"]:focus {
  outline: 3px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}

/* Compact photo thumbnails: small wrapping row instead of a tall list. */
.hc-photo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.hc-photo-list li {
  margin: 0;
}

.hc-photo-list img {
  display: block;
  border-radius: 6px;
  border: 1px solid var(--border);
  object-fit: cover;
}

/* Honeypot field (Step 2 anti-abuse, OTP-screen removal): kept in normal
   flow (not display:none/visibility:hidden) so it stays a real form
   control a naive bot fills, while sighted/keyboard/screen-reader users
   never encounter it (off-screen + aria-hidden + tabindex="-1" on the
   input, applied in the markup). */
.hc-hp {
  position: absolute;
  left: -5000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* "What needs clearing?": compact selectable tiles, 2/3/5 columns by
   viewport width (mobile / medium / desktop-tablet-wide). */
.hc-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

@media (min-width: 640px) {
  .hc-choice-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .hc-choice-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.hc-choice-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 6px 8px;
  min-height: 44px;
  text-align: center;
  cursor: pointer;
  position: relative;
}

.hc-choice-tile input {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  margin: 0;
}

.hc-choice-tile:has(input:checked) {
  border-color: var(--primary);
  background: var(--success-bg, #eaf6ec);
}

.hc-choice-tile:focus-within {
  outline: 3px solid var(--blue);
  outline-offset: 1px;
}

.hc-choice-tile__icon {
  font-size: 1.3rem;
  line-height: 1;
}

.hc-choice-tile__label {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
}

/* "Where are the items?" (outside/inside/both): 3 equal columns on every
   viewport width down to mobile, per the Step 1 layout spec. */
.hc-choice-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* Preferred date + preferred time window: side-by-side on desktop/tablet,
   stacked on narrow mobile. */
.hc-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 16px;
}

@media (min-width: 640px) {
  .hc-form-grid-2 {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* === Wizard form shell (2026-10-02 GPT-supervisor design mandate) ===
   Centered responsive shell + single white card, replacing the marketing
   .hero wrapper every wizard step used to borrow. */
.hc-wizard-shell {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
}

.hc-wizard-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin: 16px 0 40px;
}

@media (min-width: 640px) {
  .hc-wizard-card {
    padding: 32px;
  }
}

.hc-wizard-intro {
  margin: 0 0 24px;
}

.hc-wizard-intro h1 {
  margin: 0 0 6px;
  font-size: 1.4rem;
  color: var(--primary-dark);
}

.hc-wizard-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* "Are the items outside, inside, or both?": segmented icon+label cards,
   entire card clickable (input covers the card via absolute inset+opacity
   0, not display:none, so focus/keyboard/screen-reader semantics are
   unchanged -- only the visual presentation of the native radio moves).
   Checked state uses a custom indicator circle (::after) instead of the
   native radio dot, matching the brand-fill requirement. */
.hc-choice-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 14px 10px;
  min-height: 56px;
  text-align: center;
  cursor: pointer;
  position: relative;
  background: #fff;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.hc-choice-card input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.hc-choice-card__icon {
  font-size: 1.15rem;
  line-height: 1;
}

.hc-choice-card__label {
  font-size: 0.92rem;
  font-weight: 600;
}

.hc-choice-card::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 999px;
  background: #fff;
}

.hc-choice-card:has(input:checked) {
  border-color: var(--primary);
  background: var(--success-bg, #eaf6ec);
}

.hc-choice-card:has(input:checked)::after {
  border-color: var(--primary);
  background-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l3.5 3.5L13 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}

.hc-choice-card:focus-within {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* Preferred time window: compact 2x2 chip grid instead of a tall stacked
   fieldset. Same clickable-whole-control + :has() pattern as
   .hc-choice-card above. */
.hc-chip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.hc-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 12px;
  min-height: 44px;
  text-align: center;
  cursor: pointer;
  position: relative;
  font-size: 0.88rem;
  font-weight: 600;
  background: #fff;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.hc-chip input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.hc-chip:has(input:checked) {
  border-color: var(--primary);
  background: var(--success-bg, #eaf6ec);
  color: var(--primary-dark);
}

.hc-chip:focus-within {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* Schedule section as one coherent card: flexible switch/pill at top,
   date + time-window grid below. */
.hc-schedule-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  background: var(--bg);
  margin: 0 0 20px;
}

.hc-schedule-card > * + * {
  margin-top: 16px;
}

.hc-schedule-card__title {
  margin: 0;
  font-weight: 700;
  font-size: 0.92rem;
}

/* Flexible on date/time: switch/pill, not a plain checkbox + text row.
   `input` stays a real, focusable checkbox (opacity 0, not display:none)
   so keyboard/screen-reader behaviour is unchanged; only its default
   appearance is replaced by the adjacent ::after-based pill via the
   `input:checked + .hc-flex-toggle__switch` sibling selector. */
.hc-flex-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  position: relative;
}

.hc-flex-toggle input {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 22px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.hc-flex-toggle__switch {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--border);
  flex-shrink: 0;
  transition: background-color 0.15s ease;
}

.hc-flex-toggle__switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.hc-flex-toggle input:checked + .hc-flex-toggle__switch {
  background: var(--primary);
}

.hc-flex-toggle input:checked + .hc-flex-toggle__switch::after {
  transform: translateX(18px);
}

.hc-flex-toggle input:focus-visible + .hc-flex-toggle__switch {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* Back (secondary) + Continue/Review (primary) action row -- clearly
   separated from the fields above, consistent button heights, stacks on
   mobile without covering content (no fixed/sticky positioning, so it
   never overlaps the field it sits below). */
.hc-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.hc-form .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 22px;
  font-size: 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.hc-form .btn-secondary:hover {
  background: var(--bg);
}

@media (max-width: 480px) {
  .hc-action-row {
    flex-direction: column-reverse;
  }

  .hc-action-row > * {
    width: 100%;
  }
}