/**
 * Request a Quote — Restyle Stylesheet.
 *
 * Scope: `body.raq-page` (applied by page-template/request-a-quote.php).
 *
 * The Vue 2 form is injected via the HTML-import mechanism and cannot be edited
 * directly. This stylesheet restyles the form's CSS class hooks, establishes the
 * design system tokens, provides full mobile responsiveness, and styles the
 * zero-layout-shift loading skeleton.
 *
 * Architecture & Section Index:
 *  1. Design Tokens & CSS Variables
 *  2. Page Shell & Motifs (Background, Card Shell, Motifs)
 *  3. Stepper Navigation (3 Circles, Connectors, Step Labels)
 *  4. Typography & Section Headings
 *  5. Field Primitives & Universal Controls (Inputs, Selects, Dates, Textareas)
 *  6. Universal Custom Checkbox System
 *  7. Step 1 — Don't-Know Flow (Category Panel, "Other" Textbox)
 *  8. Step 1 — Knows Flow (Search Bar, Autocomplete, Category Menu, Service Catalog)
 *  9. Step 1 & 2 — Test Rows, Selected Tests & Sample Specifications
 * 10. Step 2 — General Information & Terms Checkbox
 * 11. Step 3 — Review, Confirm & Summary
 * 12. Wizard Navigation Buttons (Back, Next, Submit)
 * 13. Mobile Responsive Overrides & Option 1 Test Cards
 * 14. Zero-Layout-Shift Skeleton Placeholder System
 * 15. Accessibility & Motion Transitions
 */

/* ============================================================
   1. Design Tokens & CSS Variables
   ============================================================ */
body.raq-page {
  /* ---- Palette Tokens (Figma Design System) ---- */
  --raq-dark-blue: #004580;
  --raq-light-blue: #00afd7;
  --raq-green: #82bc00;
  --raq-card-bg: #ffffff;
  --raq-input-bg: #fcfcfc;
  --raq-input-border: #dddddd;
  --raq-track-inactive: #d7d8db;
  --raq-picker-outer-border: #d9d9d9;
  --raq-row-border: #e0e0e0;
  --raq-row-selected-fill: #f7f7f7;
  --raq-search-border: #e8e8e8;
  --raq-search-magnifier: #5f6368;
  --raq-search-bg: #f8f8f8;
  --raq-border-alt: #d1d1d1;

  /* ---- Typography & Sizing ---- */
  --raq-card-radius: 20px;
  --raq-card-radius-mobile: 16px;
  --raq-card-shadow: 0 4px 46px rgba(0, 0, 0, 0.06);
  --raq-input-radius: 4px;
  --raq-input-height: 50px;
  --raq-pill-radius: 18px;
  --raq-field-label-size: 14px;
  --raq-heading-size: 25px;
  --raq-search-radius: 5px;

  /* ---- Action Buttons ---- */
  --raq-btn-width: 6.5rem; /* 104px wider pill */
  --raq-btn-height: 2rem; /* 32px sleek height */
  --raq-btn-font-size: 15px;
  --raq-btn-letter-spacing: -0.02em;
  --raq-row-btn-width: 7rem; /* 112px row pill */
  --raq-row-btn-height: 1.9375rem; /* 31px row pill */

  /* ---- Fluid Layout Scale ---- */
  --raq-band-top: clamp(48px, 8vw, 100px);
  --raq-card-max-width: 1100px;
  --raq-card-padding: clamp(28px, 5vw, 64px);
  --raq-card-tail: clamp(140px, 15vw, 275px);
  --raq-card-tail-mobile: clamp(100px, 28vw, 140px);
  --raq-gutter-mobile: 0.5rem;

  /* ---- Spacing & Vertical Rhythm ---- */
  --raq-text: #000000;
  --raq-text-secondary: #2c2c2c;
  --raq-label-gap: 0.25rem;
  --raq-field-row-gap: clamp(1rem, 2vw, 1.5rem);
  --raq-stepper-label-gap: 0.25rem;
  --raq-stepper-section-gap: clamp(2rem, 3.5vw, 3rem); /* ~40-48px */
  --raq-heading-gap: 0.75rem;
  --raq-section-gap: 1.5rem;
  --raq-input-padding-x: 1rem;
  --raq-textarea-min-height: 125px;

  /* ---- Stepper Geometry ---- */
  --raq-stepper-circle-size: 40px;
  --raq-stepper-circle-border: 2px;
  --raq-stepper-line-height: 4px;
  --raq-stepper-line-gap: 10px;

  /* ---- Embedded Vector Assets ---- */
  --raq-search-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.82158 0C2.6133 0 0 2.6133 0 5.82158C0 9.02985 2.6133 11.6432 5.82158 11.6432C7.21672 11.6432 8.49798 11.1477 9.50213 10.3253L12.978 13.8012C13.0317 13.8571 13.0959 13.9017 13.167 13.9324C13.2381 13.9632 13.3146 13.9794 13.3921 13.9802C13.4695 13.981 13.5464 13.9663 13.6181 13.937C13.6898 13.9078 13.7549 13.8645 13.8097 13.8097C13.8645 13.7549 13.9078 13.6898 13.937 13.6181C13.9663 13.5464 13.981 13.4695 13.9802 13.3921C13.9794 13.3146 13.9632 13.2381 13.9324 13.167C13.9017 13.0959 13.8571 13.0317 13.8012 12.978L10.3253 9.50213C11.1477 8.49798 11.6432 7.21672 11.6432 5.82158C11.6432 2.6133 9.02985 0 5.82158 0ZM5.82158 1.16432C8.40061 1.16432 10.4788 3.24255 10.4788 5.82158C10.4788 8.40061 8.40061 10.4788 5.82158 10.4788C3.24255 10.4788 1.16432 8.40061 1.16432 5.82158C1.16432 3.24255 3.24255 1.16432 5.82158 1.16432Z' fill='%235F6368'/%3E%3C/svg%3E");
  --raq-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 18'%3E%3Cpath d='M1.02832 0L10.0283 9L1.02832 18L0 16.9717L7.97165 9L0 1.02834L1.02832 0Z' fill='%23000'/%3E%3C/svg%3E");
  --raq-chevron-left-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 11'%3E%3Cpath d='M5.27387 10.5477L0 5.27387L5.27387 0L5.87646 0.60259L1.20518 5.27387L5.87646 9.94516L5.27387 10.5477Z' fill='%23000'/%3E%3C/svg%3E");
  --raq-chevron-left-pill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M5.72534 11.4507L0 5.72534L5.72534 0L6.37952 0.654175L1.30835 5.72534L6.37952 10.7965L5.72534 11.4507Z' fill='%23000'/%3E%3C/svg%3E");
  --raq-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M11.4507 0.654296L5.72534 6.37964L-2.50263e-07 0.654297L0.654175 0.000121088L5.72534 5.07129L10.7965 0.000120645L11.4507 0.654296Z' fill='black'/%3E%3C/svg%3E");
}

/* ============================================================
   2. Page Shell & Motifs
   ============================================================ */

/* Hide default theme motifs on this template */
body.raq-page .header-artwork,
body.raq-page .footer-artwork {
  display: none !important;
}

/* Full-page photographic backdrop */
section.full-page.raq-page {
  position: relative;
  background-color: var(--raq-card-bg);
  background-image: url('../images/raq-background.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  padding-top: var(--raq-band-top);
  padding-bottom: 0;
}

/* Floating white form card */
.raq-card {
  position: relative;
  z-index: 1;
  width: min(100%, var(--raq-card-max-width));
  margin-inline: auto;
  padding: var(--raq-card-padding);
  padding-bottom: var(--raq-card-tail);
  background: var(--raq-card-bg);
  border-radius: var(--raq-card-radius) var(--raq-card-radius) 0 0;
  box-shadow: var(--raq-card-shadow);
}
.raq-card .entry-content {
  margin: 0;
}
.raq-card .page-title {
  margin-top: 0;
}

/* Footer bottom-right motif */
.raq-footer-motif {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
  text-align: right;
}
.raq-footer-motif img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

/* ============================================================
   3. Stepper Navigation
   ============================================================ */
#requestQuote .wizard-navigation {
  margin-bottom: 0;
}
#requestQuote .wizard-tab-content {
  padding-top: 0;
  margin-top: var(--raq-stepper-section-gap) !important;
}
#requestQuote .wizard-progress-with-circle {
  display: none;
}

/* Nav list with 25px inset keeping outer step titles inside form boundaries */
#requestQuote ul.wizard-nav {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin: 0;
  padding: 0 25px !important;
  list-style: none;
}

/* Connecting track segments */
#requestQuote ul.wizard-nav::before,
#requestQuote ul.wizard-nav::after {
  content: '';
  position: absolute;
  top: 18px;
  margin-top: 3px !important;
  height: 4px;
  border-radius: 20px;
  background-color: var(--raq-track-inactive);
  z-index: 1;
}

@media (min-width: 769px) {
  #requestQuote ul.wizard-nav::before {
    left: 135px !important;
    right: calc(50% + 30px) !important;
  }
  #requestQuote ul.wizard-nav::after {
    left: calc(50% + 30px) !important;
    right: 135px !important;
  }
  #requestQuote ul.wizard-nav li:first-child {
    flex: 0 0 160px !important;
    width: 160px !important;
    max-width: 160px !important;
  }
  #requestQuote ul.wizard-nav li:nth-child(2) {
    flex: 0 0 180px !important;
    width: 180px !important;
    max-width: 180px !important;
  }
  #requestQuote ul.wizard-nav li:last-child {
    flex: 0 0 160px !important;
    width: 160px !important;
    max-width: 160px !important;
  }
}

@media (max-width: 768px) {
  #requestQuote ul.wizard-nav {
    padding: 0 !important;
  }
  #requestQuote ul.wizard-nav::before {
    left: calc(16.6667% + 30px) !important;
    right: calc(50% + 30px) !important;
  }
  #requestQuote ul.wizard-nav::after {
    left: calc(50% + 30px) !important;
    right: calc(16.6667% + 30px) !important;
  }
  #requestQuote ul.wizard-nav li {
    flex: 1 !important;
  }
}

/* Active and completed track segments */
#requestQuote ul.wizard-nav:has(li:nth-child(n + 2).active)::before,
#requestQuote ul.wizard-nav:has(li:nth-child(2).checked)::before,
#requestQuote ul.wizard-nav:has(li:nth-child(3).active)::after,
#requestQuote ul.wizard-nav:has(li:nth-child(3).checked)::after {
  background-color: var(--raq-light-blue);
}

#requestQuote ul.wizard-nav li {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

#requestQuote .wizard-nav a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  width: 100%;
}

/* Step Circles: 40×40, 2px border */
#requestQuote .wizard-icon-circle.md {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--raq-track-inactive);
  border-radius: 50%;
  background: #ffffff;
  transition: all 0.25s ease;
}

/* Step number typography, centered by flex inside the circle */
#requestQuote .wizard-icon {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin-top: 0 !important;
  font-size: 18px;
  font-weight: 500;
  font-style: normal;
  line-height: 1;
  text-align: center;
  color: rgba(0, 0, 0, 0.2);
}

/* Active Step Circle (Dark Blue #004580) */
#requestQuote .wizard-nav li.active .wizard-icon-circle {
  border-color: var(--raq-dark-blue) !important;
  background-color: var(--raq-dark-blue) !important;
}
#requestQuote .wizard-icon-container {
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--raq-dark-blue);
}
#requestQuote .wizard-nav li.active .wizard-icon {
  color: #ffffff !important;
}

/* Completed Step Circle (Light Blue #00AFD7) */
#requestQuote .wizard-nav li:not(.active) .wizard-icon-circle.checked {
  border-color: var(--raq-light-blue) !important;
  background-color: var(--raq-light-blue) !important;
}
#requestQuote .wizard-nav li:not(.active) .wizard-icon-circle.checked .wizard-icon {
  color: #ffffff !important;
}

/* Step labels */
#requestQuote .stepTitle {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: rgba(0, 0, 0, 0.2);
  text-align: center;
  white-space: nowrap;
}
#requestQuote .stepTitle.active {
  color: var(--raq-dark-blue) !important;
  font-weight: 400 !important;
}
#requestQuote .wizard-nav li:not(.active):has(.wizard-icon-circle.checked) .stepTitle {
  color: var(--raq-light-blue) !important;
  font-weight: 400 !important;
}

/* ============================================================
   4. Typography & Section Headings
   ============================================================ */
#requestQuote h2 {
  margin: var(--raq-section-gap) 0 var(--raq-heading-gap) 0 !important;
  color: var(--raq-dark-blue);
  font-size: var(--raq-heading-size);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
#requestQuote .wizard-tab-container > *:first-child,
#requestQuote .wizard-tab-container > div:first-child > *:first-child {
  margin-top: 0 !important;
}

#requestQuote .mc-field-label {
  display: block;
  margin-bottom: var(--raq-label-gap);
  color: var(--raq-text);
  font-size: var(--raq-field-label-size);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

#requestQuote .wizard-tab-container h2 + p {
  margin: 0 0 1rem;
  color: var(--raq-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* ============================================================
   5. Field Primitives & Universal Controls
   ============================================================ */
#requestQuote .mc-billpay-field,
#requestQuote input[type='text'],
#requestQuote input[type='email'],
#requestQuote input[type='tel'],
#requestQuote input[type='number'],
#requestQuote select,
#requestQuote select.mc-billpay-field {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: var(--raq-input-height);
  padding: 0 var(--raq-input-padding-x);
  background-color: var(--raq-input-bg) !important;
  border: 1px solid var(--raq-input-border) !important;
  border-radius: var(--raq-input-radius) !important;
  color: var(--raq-text) !important;
  font-size: 14px;
  font-weight: 300;
  line-height: var(--raq-input-height);
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#requestQuote .mc-billpay-field::placeholder,
#requestQuote input::placeholder {
  color: var(--raq-text);
  font-size: 14px;
  font-weight: 300;
  opacity: 1;
}

#requestQuote .mc-billpay-field:focus,
#requestQuote input[type='text']:focus,
#requestQuote input[type='email']:focus,
#requestQuote input[type='tel']:focus,
#requestQuote input[type='number']:focus,
#requestQuote select:focus {
  outline: none !important;
  border-color: var(--raq-light-blue) !important;
  box-shadow: 0 0 0 2px rgba(0, 175, 215, 0.15) !important;
}

/* Dropdown select chevron */
#requestQuote select.mc-billpay-field,
#requestQuote select {
  -webkit-appearance: none !important;
  appearance: none !important;
  padding-right: 2.5rem !important;
  background-color: var(--raq-input-bg) !important;
  background-image: var(--raq-select-chevron) !important;
  background-repeat: no-repeat !important;
  background-position: right var(--raq-input-padding-x) center !important;
  background-size: 12px 7px !important;
  cursor: pointer !important;
}

/* Date input styling */
#requestQuote input[type='date'],
#requestQuote input[type='date'].mc-billpay-field {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  position: relative !important;
  width: 100% !important;
  height: var(--raq-input-height) !important;
  padding: 0 var(--raq-input-padding-x) !important;
  padding-right: 2.5rem !important;
  background-color: var(--raq-input-bg) !important;
  background-image: var(--raq-select-chevron) !important;
  background-repeat: no-repeat !important;
  background-position: right var(--raq-input-padding-x) center !important;
  background-size: 12px 7px !important;
  border: 1px solid var(--raq-input-border) !important;
  border-radius: var(--raq-input-radius) !important;
  color: var(--raq-text) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: var(--raq-input-height) !important;
  color-scheme: light !important;
  accent-color: var(--raq-light-blue) !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
#requestQuote input[type='date']::-webkit-calendar-picker-indicator {
  display: block !important;
  width: 2.5rem !important;
  height: 100% !important;
  background: transparent !important;
  color: transparent !important;
  opacity: 0 !important;
  cursor: pointer !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2 !important;
}

/* Textareas */
#requestQuote textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: var(--raq-textarea-min-height);
  padding: 1rem var(--raq-input-padding-x);
  background-color: var(--raq-input-bg) !important;
  border: 1px solid var(--raq-input-border) !important;
  border-radius: var(--raq-input-radius) !important;
  color: var(--raq-text) !important;
  font-weight: 400;
  line-height: 1.5;
  box-shadow: none !important;
  resize: vertical;
}
#requestQuote textarea:focus {
  outline: none !important;
  border-color: var(--raq-light-blue) !important;
  box-shadow: 0 0 0 2px rgba(0, 175, 215, 0.15) !important;
}
#requestQuote textarea::placeholder {
  color: var(--raq-text-secondary);
  font-weight: 400;
  opacity: 1;
}

/* Number input spin buttons scaled to subtle proportions */
#requestQuote input[type='number']::-webkit-inner-spin-button,
#requestQuote input[type='number']::-webkit-outer-spin-button {
  transform: scale(0.65);
  transform-origin: right center;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}
#requestQuote input[type='number']:hover::-webkit-inner-spin-button,
#requestQuote input[type='number']:focus::-webkit-inner-spin-button {
  opacity: 0.85;
}

/* Form row vertical rhythm */
#requestQuote .wizard-tab-container form .row + .row {
  margin-top: var(--raq-field-row-gap);
}
#requestQuote .wizard-tab-container .form-group {
  margin-bottom: 0;
}
#requestQuote .text-danger {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #d9534f;
}

/* ============================================================
   6. Universal Custom Checkbox System
   Strict 13×13px square, 1px #c4c7c9 border, Solid Light Blue checked fill.
   ============================================================ */
#requestQuote input[type='checkbox'] {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  width: 13px !important;
  min-width: 13px !important;
  max-width: 13px !important;
  height: 13px !important;
  min-height: 13px !important;
  max-height: 13px !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 13px !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: var(--raq-input-bg) !important;
  border: 1px solid #c4c7c9 !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  display: inline-block !important;
  vertical-align: middle !important;
  position: relative !important;
  line-height: 0 !important;
  outline: none !important;
  transition: border-color 0.15s ease, background-color 0.15s ease !important;
}
#requestQuote input[type='checkbox']:hover {
  border-color: var(--raq-light-blue) !important;
}
#requestQuote input[type='checkbox']:checked {
  background-color: var(--raq-light-blue) !important;
  border-color: var(--raq-light-blue) !important;
  background-image: none !important;
}
#requestQuote input[type='checkbox']::before,
#requestQuote input[type='checkbox']::after {
  display: none !important;
}
#requestQuote input[type='checkbox']:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0, 175, 215, 0.2) !important;
}

/* ============================================================
   7. Step 1 — Don't-Know Flow (Category Panel)
   ============================================================ */
#requestQuote .col-sm-12:has(.mc-category-panel) {
  margin-top: 1.5rem;
  padding-right: 0;
  padding-left: 0;
}
#requestQuote .mc-field-label .mc-category-detail {
  font-weight: 300;
  color: #4f4f4f;
}

body.raq-page #requestQuote .mc-category-panel {
  background: var(--raq-input-bg);
  border: 1px solid var(--raq-input-border);
  border-radius: var(--raq-input-radius);
  padding: 1.5rem clamp(1.25rem, 2.5vw, 2rem);
  margin-bottom: var(--raq-section-gap);
  box-sizing: border-box;
}

@media (min-width: 769px) {
  body.raq-page #requestQuote .mc-category-panel .row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: clamp(1.5rem, 3.5vw, 3.5rem) !important;
    align-items: start !important;
    margin: 0 !important;
  }
  body.raq-page #requestQuote .mc-category-panel .col-sm-6 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
}
@media (max-width: 768px) {
  body.raq-page #requestQuote .mc-category-panel .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.625rem !important;
    margin: 0 !important;
  }
  body.raq-page #requestQuote .mc-category-panel .col-sm-6 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
}

body.raq-page #requestQuote .mc-category-panel .row::before,
body.raq-page #requestQuote .mc-category-panel .row::after {
  display: none !important;
}

#requestQuote .mc-category-item {
  display: flex !important;
  align-items: flex-start !important;
  margin-bottom: 0.625rem !important;
  padding: 0 !important;
}
#requestQuote .mc-category-item:last-child {
  margin-bottom: 0 !important;
}

body.raq-page #requestQuote .mc-category-item label {
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: 0.625rem !important;
  margin: 0 !important;
  color: var(--raq-text) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
}
body.raq-page #requestQuote .mc-category-item label input[type='checkbox'] {
  /* 16px box on an 18.9px line; the extra 2.5px past center matches the font's low-set glyphs */
  margin-top: 4px !important;
  flex-shrink: 0 !important;
}

/* "Other — Please specify*" conditional input */
body.raq-page #requestQuote .mc-category-item:has(input[name='categoriesOtherText']) {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.625rem !important;
  margin-top: 0.375rem !important;
  width: 100% !important;
}
body.raq-page #requestQuote .mc-category-item:has(input[name='categoriesOtherText']) label {
  display: flex !important;
  align-items: flex-start !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
body.raq-page #requestQuote .mc-category-item:has(input[name='categoriesOtherText']) label input[type='checkbox'] {
  margin: 0 !important;
  flex-shrink: 0 !important;
}
body.raq-page #requestQuote .mc-category-item input[name='categoriesOtherText'] {
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: var(--raq-input-height) !important;
  padding: 0 var(--raq-input-padding-x) !important;
  background: var(--raq-card-bg) !important;
  border: 1px solid var(--raq-border-alt) !important;
  border-radius: var(--raq-input-radius) !important;
  color: var(--raq-text) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: var(--raq-input-height) !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
body.raq-page #requestQuote .mc-category-item input[name='categoriesOtherText']::placeholder {
  color: var(--raq-border-alt) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  opacity: 1 !important;
}
body.raq-page #requestQuote .mc-category-item input[name='categoriesOtherText']:focus {
  outline: none !important;
  border-color: var(--raq-light-blue) !important;
  box-shadow: 0 0 0 2px rgba(0, 175, 215, 0.15) !important;
}

/* ============================================================
   8. Step 1 — Knows Flow (Search & Industry Picker)
   ============================================================ */
#requestQuote .input-group {
  background: var(--raq-search-bg);
  border: 1px solid var(--raq-search-border);
  border-radius: var(--raq-search-radius);
  height: var(--raq-input-height);
  display: flex;
  align-items: center;
  position: relative;
}
/* The imported form's inline <style> gives the search a light-blue border and white
   background ("make the test search stand out", UAT 8/24), which loads after this
   file. Kept as-is per that UAT note; un-comment to restore the grey mockup field. */
/*
body.raq-page #requestQuote .input-group {
  background: var(--raq-search-bg);
  border: 1px solid var(--raq-search-border);
  border-radius: var(--raq-search-radius);
}
*/
#requestQuote .input-group::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background: var(--raq-search-icon) no-repeat center / contain;
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}
#requestQuote .input-group-addon {
  display: none;
}

#requestQuote .v-autocomplete-input {
  height: var(--raq-input-height);
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--raq-text);
  padding-left: 2.75rem !important;
  font-size: 16px !important;
  font-weight: 300;
  letter-spacing: 0.01em;
  width: 100%;
}
#requestQuote .v-autocomplete-input::placeholder {
  color: var(--raq-text);
  opacity: 0.4;
  font-size: 16px;
  font-weight: 300;
}

#requestQuote .v-autocomplete {
  position: relative;
  width: 100%;
}
#requestQuote .v-autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: #ffffff;
  border: 1px solid var(--raq-picker-outer-border);
  border-radius: var(--raq-search-radius);
  box-shadow: var(--raq-card-shadow);
  z-index: 100;
  max-height: clamp(12rem, 30vh, 18rem);
  overflow-y: auto;
  padding: 0.25rem 0;
  list-style: none;
}
#requestQuote .v-autocomplete-list-item,
#requestQuote .v-autocomplete-item {
  padding: 0.625rem 1rem;
  font-size: 13px;
  color: var(--raq-text);
  cursor: pointer;
  border-bottom: 1px solid var(--raq-row-border);
  line-height: 1.35;
}
#requestQuote .v-autocomplete-list-item:last-child,
#requestQuote .v-autocomplete-item:last-child {
  border-bottom: 0;
}
#requestQuote .v-autocomplete-list-item:hover,
#requestQuote .v-autocomplete-item:hover,
#requestQuote .v-autocomplete-list-item.v-autocomplete-item-active,
#requestQuote .v-autocomplete-item.active {
  background-color: var(--raq-row-selected-fill);
}
#requestQuote .v-autocomplete-list-item strong,
#requestQuote .v-autocomplete-item strong {
  color: var(--raq-dark-blue);
  font-weight: 500;
}

/* Outer picker container */
body.raq-page #requestQuote div:has(> .mc-industry-menu) {
  min-height: 15rem;
  border: 1px solid var(--raq-picker-outer-border);
  border-radius: var(--raq-search-radius);
  overflow: hidden;
}

@media (min-width: 769px) {
  body.raq-page #requestQuote div:has(> .mc-industry-menu) {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) 3fr;
    align-items: stretch;
  }
  body.raq-page #requestQuote div:has(> .mc-industry-menu) > .col-sm-4:not(.mc-industry-menu),
  body.raq-page #requestQuote div:has(> .mc-industry-menu) > [class*='col-']:first-child {
    border-right: 1px solid var(--raq-picker-outer-border);
    border-bottom: 0;
  }
}
@media (max-width: 768px) {
  body.raq-page #requestQuote div:has(> .mc-industry-menu) {
    display: block;
  }
  body.raq-page #requestQuote div:has(> .mc-industry-menu) > .col-sm-4:not(.mc-industry-menu),
  body.raq-page #requestQuote div:has(> .mc-industry-menu) > [class*='col-']:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--raq-picker-outer-border);
  }
}

body.raq-page #requestQuote div:has(> .mc-industry-menu) > .col-sm-4:not(.mc-industry-menu),
body.raq-page #requestQuote div:has(> .mc-industry-menu) > [class*='col-']:first-child {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
body.raq-page #requestQuote div:has(> .mc-industry-menu) .mc-industry-select {
  margin: 0;
}

/* Header line with Search input + Section heading */
body.raq-page #requestQuote .row:has(> .col-sm-4 .input-group) {
  margin-top: var(--raq-section-gap);
  margin-bottom: 0.5rem;
}
body.raq-page #requestQuote .row:has(> .col-sm-4 .input-group) > .col-sm-4 {
  padding-top: 0 !important;
}
body.raq-page #requestQuote .row:has(> .col-sm-4 .input-group) h2 {
  margin-top: 0;
  margin-bottom: 0;
}
@media (min-width: 769px) {
  body.raq-page #requestQuote .row:has(> .col-sm-4 .input-group) {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  body.raq-page #requestQuote .row:has(> .col-sm-4 .input-group) > .col-sm-4 {
    flex: 0 0 clamp(18rem, 36%, 25rem);
    max-width: clamp(18rem, 36%, 25rem);
    margin-left: auto;
  }
}
@media (max-width: 768px) {
  body.raq-page #requestQuote .row:has(> .col-sm-4 .input-group) h2 {
    margin-bottom: var(--raq-heading-gap);
  }
}

/* Industry buttons (10:3 aspect ratio) */
#requestQuote .mc-industry-select {
  position: relative;
  box-sizing: border-box !important;
  width: 100% !important;
  aspect-ratio: 10 / 3;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 1.25rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--raq-picker-outer-border) !important;
  background: transparent;
  cursor: pointer;
}
#requestQuote .mc-industry-select:last-child {
  border-bottom: 0 !important;
}
#requestQuote .mc-industry-select::before,
#requestQuote .mc-industry-select::after,
#requestQuote div:has(> .mc-industry-menu)::before,
#requestQuote div:has(> .mc-industry-menu)::after {
  display: none !important;
}
body.raq-page #requestQuote .mc-industry-select .col-sm-10 {
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
body.raq-page #requestQuote .mc-industry-select .col-sm-2 {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#requestQuote .mc-industry-title {
  color: var(--raq-text);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 !important;
  padding: 0 !important;
}
#requestQuote .mc-industry-sub {
  display: block;
  margin: 0 !important;
  margin-top: 3px !important;
  color: var(--raq-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  padding: 0 !important;
}

body.raq-page #requestQuote .mc-industry-select .mc-highlight.arrow {
  position: static !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 11px !important;
  height: 18px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: var(--raq-light-blue);
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 11px !important;
}
body.raq-page #requestQuote .mc-industry-select .mc-highlight.arrow::before {
  content: '';
  display: block;
  width: 11px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--raq-chevron) no-repeat center / contain;
  mask: var(--raq-chevron) no-repeat center / contain;
}

body.raq-page #requestQuote .mc-industry-select br,
body.raq-page #requestQuote .mc-industry-menu br {
  display: none !important;
}

/* Active Industry banner */
body.raq-page #requestQuote .mc-industry-select.selected {
  background: var(--raq-light-blue);
  border-radius: 0;
}
@media (min-width: 769px) {
  body.raq-page #requestQuote .mc-industry-select.selected:first-child {
    border-top-left-radius: calc(var(--raq-search-radius) - 1px);
  }
  body.raq-page #requestQuote .mc-industry-select.selected:last-child {
    border-bottom-left-radius: calc(var(--raq-search-radius) - 1px);
  }
}
@media (max-width: 768px) {
  body.raq-page #requestQuote .mc-industry-select.selected:first-child {
    border-top-left-radius: calc(var(--raq-search-radius) - 1px);
    border-top-right-radius: calc(var(--raq-search-radius) - 1px);
  }
}
body.raq-page #requestQuote .mc-industry-select.selected .mc-industry-title,
body.raq-page #requestQuote .mc-industry-select.selected .mc-industry-sub,
body.raq-page #requestQuote .mc-industry-select.selected .mc-highlight {
  color: #ffffff !important;
}
body.raq-page #requestQuote .mc-industry-select.selected .mc-highlight.arrow {
  display: block !important;
  color: #ffffff !important;
}
body.raq-page #requestQuote .mc-industry-select.selected .mc-highlight.arrow::before {
  background-color: #ffffff !important;
}

/* Right-hand Service catalog menu */
body.raq-page #requestQuote .mc-industry-menu {
  width: 100% !important;
  float: none !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 1.42rem 1.625rem !important;
  border: 0 !important;
}
#requestQuote .mc-industry-menu .mc-industry-title {
  color: var(--raq-light-blue);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

#requestQuote .mc-industry-menu .mc-industry-title:has(.mc-highlight.arrow),
#requestQuote .mc-industry-menu .mc-industry-title[style*='cursor: pointer'],
#requestQuote .mc-industry-menu .mc-industry-title[style*='cursor:pointer'] {
  float: right;
  color: var(--raq-text);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  text-decoration: none;
  margin-bottom: 0.5rem;
}
#requestQuote .mc-industry-menu .mc-industry-title:has(.mc-highlight.arrow) .mc-highlight.arrow,
#requestQuote .mc-industry-menu .mc-industry-title[style*='cursor: pointer'] .mc-highlight.arrow,
#requestQuote .mc-industry-menu .mc-industry-title[style*='cursor:pointer'] .mc-highlight.arrow {
  font-size: 0;
  line-height: 0;
  color: var(--raq-light-blue);
}
#requestQuote .mc-industry-menu .mc-industry-title:has(.mc-highlight.arrow) .mc-highlight.arrow::before,
#requestQuote .mc-industry-menu .mc-industry-title[style*='cursor: pointer'] .mc-highlight.arrow::before,
#requestQuote .mc-industry-menu .mc-industry-title[style*='cursor:pointer'] .mc-highlight.arrow::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 11px;
  margin-top: -2px;
  background-color: currentColor;
  -webkit-mask: var(--raq-chevron-left-back) no-repeat center / contain;
  mask: var(--raq-chevron-left-back) no-repeat center / contain;
  vertical-align: middle;
}

/* Service catalog column layouts */
body.raq-page #requestQuote .mc-industry-menu > .row,
body.raq-page #requestQuote .mc-industry-menu .row {
  display: block !important;
  columns: 2;
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: 0.75rem 0 0;
}
body.raq-page #requestQuote .mc-industry-menu:has(.mc-highlight.arrow) > .row,
body.raq-page #requestQuote .mc-industry-menu:has(.mc-highlight.arrow) .row,
body.raq-page #requestQuote .mc-industry-menu:has([style*='cursor: pointer']) > .row,
body.raq-page #requestQuote .mc-industry-menu:has([style*='cursor: pointer']) .row,
body.raq-page #requestQuote .mc-industry-menu:has([style*='cursor:pointer']) > .row,
body.raq-page #requestQuote .mc-industry-menu:has([style*='cursor:pointer']) .row {
  columns: 3;
  column-gap: clamp(1rem, 2vw, 1.75rem);
}
@media (max-width: 768px) {
  body.raq-page #requestQuote .mc-industry-menu > .row,
  body.raq-page #requestQuote .mc-industry-menu .row,
  body.raq-page #requestQuote .mc-industry-menu:has(.mc-highlight.arrow) > .row,
  body.raq-page #requestQuote .mc-industry-menu:has(.mc-highlight.arrow) .row {
    columns: 1 !important;
  }
}

body.raq-page #requestQuote .mc-industry-menu .row::before,
body.raq-page #requestQuote .mc-industry-menu .row::after {
  display: none !important;
}

body.raq-page #requestQuote .mc-industry-menu .col-sm-4.item,
body.raq-page #requestQuote .mc-industry-menu .item {
  width: 100% !important;
  float: none !important;
  display: block !important;
  break-inside: avoid !important;
  page-break-inside: avoid !important;
  padding: 0 !important;
  margin: 0 0 0.5rem 0 !important;
  color: var(--raq-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.01em;
  cursor: pointer;
}
body.raq-page #requestQuote .item.testService.selected {
  color: var(--raq-light-blue);
}

body.raq-page #requestQuote .mc-industry-menu p,
body.raq-page #requestQuote .mc-industry-menu .row > p,
body.raq-page #requestQuote .mc-industry-menu .row > div:not(.item) {
  column-span: all;
  break-inside: avoid;
  font-size: 14px;
  line-height: 1.45;
  color: var(--raq-text);
  margin-top: 0.5rem;
  max-width: 38rem;
}

/* The form now pre-splits services into three .col-sm-4 columns (splitSortedIntoColumns);
   lay those out as a grid instead of nesting them inside CSS multi-columns. */
body.raq-page #requestQuote .mc-industry-menu .row:has(> .col-sm-4) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 1.75rem);
  columns: auto !important;
  clear: both;
}
body.raq-page #requestQuote .mc-industry-menu .row > .col-sm-4:not(.item) {
  width: auto !important;
  max-width: none;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  column-span: none;
}
@media (max-width: 768px) {
  body.raq-page #requestQuote .mc-industry-menu .row:has(> .col-sm-4) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Collapsed "Select Different Test Service" pill */
#requestQuote .mc-industry-menu-small {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box;
  width: 100%;
  float: none;
  min-height: var(--raq-input-height);
  padding: 0 1.125rem;
  background: var(--raq-card-bg);
  border: 1px solid var(--raq-picker-outer-border);
  border-radius: var(--raq-search-radius);
  margin-bottom: var(--raq-heading-gap);
  cursor: pointer;
}
#requestQuote .mc-industry-menu-small .mc-industry-title {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--raq-text) !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  gap: 0.75rem;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
}
#requestQuote .mc-industry-menu-small .mc-highlight.arrow,
#requestQuote .mc-industry-menu-small .mc-highlight {
  position: static !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 7px !important;
  height: 12px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: var(--raq-light-blue) !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 7px !important;
}
#requestQuote .mc-industry-menu-small .mc-highlight.arrow::before,
#requestQuote .mc-industry-menu-small .mc-highlight::before {
  content: '';
  display: block;
  width: 7px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: var(--raq-chevron-left-pill) no-repeat center / contain;
  mask: var(--raq-chevron-left-pill) no-repeat center / contain;
}

/* Back navigation (.mc-back-btn). The imported form's inline <style> draws it as a
   rounded pill with a text "<"; per the mockups it is a plain "‹ Back" link at the top
   right of the catalog, and a full-width bar at the test-detail step (below). The
   body.raq-page prefix is needed to outrank that inline <style>, which loads later. */
body.raq-page #requestQuote .mc-back-btn {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0 0 0.5rem 1rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--raq-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  cursor: pointer;
}
body.raq-page #requestQuote .mc-back-btn:hover {
  background: transparent;
  color: var(--raq-light-blue);
}
body.raq-page #requestQuote .mc-back-btn .arrow {
  display: inline-block;
  flex: 0 0 6px;
  width: 6px;
  height: 11px;
  margin: 0;
  font-size: 0;
  line-height: 0;
  /* Flex-centers on the line box, but the font's glyphs sit low in it; drop the
     chevron to line up with the text. */
  transform: translateY(2px);
  background-color: var(--raq-light-blue);
  -webkit-mask: var(--raq-chevron-left-back) no-repeat center / contain;
  mask: var(--raq-chevron-left-back) no-repeat center / contain;
}

/* Test-detail step: "Select Different Test Service" is a full-width bar, not a pill. */
body.raq-page #requestQuote .mc-industry-menu-small {
  display: flex !important;
  align-items: center !important;
  min-height: var(--raq-input-height);
  padding: 0 1.125rem;
  background: var(--raq-card-bg);
  border: 1px solid var(--raq-picker-outer-border);
  border-radius: var(--raq-search-radius);
  margin-bottom: var(--raq-heading-gap);
  cursor: pointer;
}
body.raq-page #requestQuote .mc-industry-menu-small .mc-back-btn {
  float: none;
  width: 100%;
  margin: 0;
  gap: 0.75rem;
}
body.raq-page #requestQuote .mc-industry-menu-small .mc-back-btn .arrow {
  flex-basis: 7px;
  width: 7px;
  height: 12px;
  -webkit-mask-image: var(--raq-chevron-left-pill);
  mask-image: var(--raq-chevron-left-pill);
}

/* ============================================================
   9. Step 1 & 2 — Test Rows, Selected Tests & Sample Specifications
   ============================================================ */
#requestQuote .submit-sample-form ul:has(li a.button),
#requestQuote .wizard-tab-container ul:has(li a.button) {
  margin: 0;
  padding: 0;
  list-style: none;
}

#requestQuote .submit-sample-form li {
  display: flex;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding: 0.625rem 1rem;
  background: var(--raq-card-bg);
  border: 1px solid var(--raq-row-border);
  border-radius: 6px;
}
#requestQuote .submit-sample-form li + li {
  margin-top: 0.8125rem;
}

/* Test Code & Description */
#requestQuote .submit-sample-form li > span:first-child {
  color: var(--raq-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  order: 1;
}
#requestQuote .submit-sample-form li > span:first-child ~ span {
  padding-left: 0 !important;
  font-size: 14px;
  font-weight: 300;
  line-height: 19px;
}
#requestQuote .submit-sample-form li > * {
  order: 4;
  flex: 0 0 auto;
}
#requestQuote .submit-sample-form li > span:first-child ~ span:last-of-type {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
}
#requestQuote .submit-sample-form li > div:has(input[type='number']) {
  order: 3;
}
#requestQuote .submit-sample-form li > a.button {
  order: 5;
  margin-left: auto;
}

/* Checkbox container divs on test rows */
#requestQuote .submit-sample-form li > div {
  float: none !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
}
#requestQuote .submit-sample-form li > div span {
  font-size: 13px;
  font-weight: 300;
  line-height: 1;
}

/* Selected tests flat text */
#requestQuote .submit-sample-form li:not(:has(input[type='checkbox'])) > div,
#requestQuote .submit-sample-form li:not(:has(input[type='checkbox'])) > span:not(:first-child):not(:last-of-type) {
  font-size: 13px;
  font-weight: 300;
  line-height: 1;
  color: var(--raq-text);
}
#requestQuote .submit-sample-form li:not(:has(input[type='checkbox'])) {
  background: var(--raq-row-selected-fill);
}

/* Quantity input box */
#requestQuote .submit-sample-form li input[type='number'] {
  box-sizing: border-box;
  width: 48px !important;
  height: 30px;
  padding: 0 2px 0 6px;
  background: var(--raq-card-bg);
  border: 1px solid var(--raq-row-border);
  border-radius: 3px;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
}

/* Row Action Pill (Add to Quote / In Quote / Remove) */
#requestQuote .submit-sample-form li a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--raq-row-btn-width);
  min-width: var(--raq-row-btn-width);
  height: var(--raq-row-btn-height);
  padding: 0 !important; /* No optical offset: the font already sits low in its line box */
  margin-left: auto;
  background: var(--raq-light-blue);
  border-radius: var(--raq-pill-radius);
  color: #ffffff;
  font-size: var(--raq-btn-font-size);
  font-weight: 500;
  letter-spacing: var(--raq-btn-letter-spacing);
  line-height: 1;
  text-align: center;
  text-decoration: none;
}
body.raq-page #requestQuote .submit-sample-form li a.button.mc-added,
body.raq-page #requestQuote .submit-sample-form li a.button.mc-added:hover,
body.raq-page #requestQuote .submit-sample-form li a.button.mc-added:focus {
  background: var(--raq-green);
  color: #ffffff;
}

/* Sample Specifications bulleted list */
#requestQuote .wizard-tab-container ul:not(:has(li a.button)) {
  margin: 0;
  padding-left: 1.375rem;
  list-style: disc;
}
#requestQuote .wizard-tab-container ul:not(:has(li a.button)) > li::marker {
  font-size: 0.75em;
}
#requestQuote .wizard-tab-container ul:not(:has(li a.button)) > li {
  margin-bottom: 0;
  line-height: 1.5;
}
#requestQuote .wizard-tab-container ul li {
  color: var(--raq-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25;
}
#requestQuote .wizard-tab-container p a {
  color: var(--raq-light-blue);
}

/* ============================================================
   10. Step 2 — General Information & Terms Checkbox
   ============================================================ */

/* Terms Checkbox — Green outline (inactive), Green + white checkmark (active), 4px top margin, 10px right gap */
#requestQuote #EnterYourInformation2 input[type='checkbox'],
#requestQuote input[name*='terms'],
#requestQuote input[name*='agree'] {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  width: 14px !important;
  min-width: 14px !important;
  max-width: 14px !important;
  height: 14px !important;
  min-height: 14px !important;
  max-height: 14px !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 14px !important;
  margin: 4px 0.625rem 0 0 !important;
  padding: 0 !important;
  background-color: #ffffff !important;
  border: 1.5px solid var(--raq-green) !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  display: inline-block !important;
  vertical-align: middle !important;
  position: relative !important;
  line-height: 0 !important;
  outline: none !important;
  transition: border-color 0.15s ease, background-color 0.15s ease !important;
}
#requestQuote #EnterYourInformation2 input[type='checkbox']:hover,
#requestQuote input[name*='terms']:hover,
#requestQuote input[name*='agree']:hover {
  border-color: var(--raq-green) !important;
}
#requestQuote #EnterYourInformation2 input[type='checkbox']:checked,
#requestQuote input[name*='terms']:checked,
#requestQuote input[name*='agree']:checked {
  background-color: var(--raq-green) !important;
  border-color: var(--raq-green) !important;
  background-image: url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 9 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3.5L3.5 6L8 1' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 9px 7px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
#requestQuote #EnterYourInformation2 input[type='checkbox']::before,
#requestQuote #EnterYourInformation2 input[type='checkbox']::after,
#requestQuote input[name*='terms']::before,
#requestQuote input[name*='terms']::after {
  display: none !important;
}

/* Terms copy flex container */
#requestQuote #EnterYourInformation2 .col-sm-8:has(input[type='checkbox']),
#requestQuote .col-sm-8:has(input[name*='terms']),
#requestQuote .col-sm-8:has(input[name*='agree']) {
  display: flex !important;
  align-items: flex-start !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--raq-text-secondary) !important;
}
#requestQuote #EnterYourInformation2 a {
  color: var(--raq-light-blue);
}
#requestQuote #EnterYourInformation2 .col-sm-8:not(:has(input[type='checkbox'])) {
  font-size: 12px;
  color: var(--raq-text-secondary);
}

/* ============================================================
   11. Step 3 — Review, Confirm & Summary
   ============================================================ */

/* Intro text */
#requestQuote [id*='Confirm'] > p {
  margin: 0 0 2.75rem 0 !important;
  color: var(--raq-text) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

/* Flexbox Review Grid (35% General Information, 65% Testing Information) */
#requestQuote [id*='Confirm'] .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
#requestQuote [id*='Confirm'] .container-fluid > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}
#requestQuote [id*='Confirm'] .container-fluid > .row:first-child {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}
#requestQuote [id*='Confirm'] .container-fluid > .row:first-child > .col-sm-4 {
  flex: 0 0 35% !important;
  max-width: 35% !important;
  width: 35% !important;
  padding-left: 0 !important;
  padding-right: 2rem !important;
  margin: 0 !important;
}
#requestQuote [id*='Confirm'] .container-fluid > .row:first-child > .col-sm-8 {
  flex: 0 0 65% !important;
  max-width: 65% !important;
  width: 65% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

/* 50/50 Testing Information sub-columns */
#requestQuote [id*='Confirm'] .col-sm-8 > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}
#requestQuote [id*='Confirm'] .col-sm-8 > .row > .col-sm-6 {
  flex: 0 0 50% !important;
  max-width: 50% !important;
  width: 50% !important;
  padding-left: 0 !important;
  padding-right: 1.5rem !important;
  margin: 0 !important;
}
#requestQuote [id*='Confirm'] .col-sm-8 > .row > .col-sm-6:last-child {
  padding-right: 0 !important;
}

#requestQuote [id*='Confirm'] .col-sm-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 768px) {
  #requestQuote [id*='Confirm'] > p {
    margin-bottom: 2rem !important;
  }
  #requestQuote [id*='Confirm'] .container-fluid > .row:first-child > .col-sm-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-right: 0 !important;
    margin-bottom: 2rem !important;
  }
  #requestQuote [id*='Confirm'] .container-fluid > .row:first-child > .col-sm-8,
  #requestQuote [id*='Confirm'] .col-sm-8 > .row > .col-sm-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-right: 0 !important;
  }
}

/* Headings in Step 3 */
#requestQuote [id*='Confirm'] h2 {
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
}
#requestQuote [id*='Confirm'] .container-fluid > .row:not(:first-child) h2 {
  margin-top: 2.75rem !important;
  margin-bottom: 0.75rem !important;
}

/* Review text typography */
#requestQuote [id*='Confirm'] .col-sm-4,
#requestQuote [id*='Confirm'] .col-sm-8 {
  color: var(--raq-text);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}
#requestQuote [id*='Confirm'] b {
  font-weight: 600;
  color: #1a1a1a;
}
#requestQuote [id*='Confirm'] b + span {
  font-size: 14px;
  color: var(--raq-text-secondary);
}
#requestQuote [id*='Confirm'] h2 + p {
  margin: 0 0 0.5rem;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Selected Category Chips with 11×11 Close SVG Icon */
body.raq-page #requestQuote .mc-category-chip {
  display: inline-flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 0.625rem 0.625rem 0 !important;
  padding: 0 0.95rem !important;
  border: 1px solid var(--raq-light-blue) !important;
  border-radius: 18px !important;
  background-color: #ffffff !important;
  color: var(--raq-light-blue) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
}
body.raq-page #requestQuote .mc-category-chip a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 11px !important;
  min-width: 11px !important;
  height: 11px !important;
  margin-left: 0.65rem !important;
  font-size: 0 !important;
  color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.617118 11L0 10.3829L4.88288 5.5L0 0.617118L0.617118 0L5.5 4.88288L10.3829 0L11 0.617118L6.11712 5.5L11 10.3829L10.3829 11L5.5 6.11712L0.617118 11Z' fill='%2300AFD7'/%3E%3C/svg%3E") !important;
  background-size: 11px 11px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: opacity 0.15s ease !important;
}
body.raq-page #requestQuote .mc-category-chip a:hover {
  opacity: 0.7 !important;
}

/* Green Submit button */
body.raq-page #requestQuote .mc-button-finish:not([disabled]),
body.raq-page #requestQuote .mc-button-finish:focus:not(:focus-visible):not(:hover) {
  background: var(--raq-green) !important;
}

/* Thank-you state */
#requestQuote .thank-you-page {
  padding: 2rem 1rem;
  text-align: center;
}
#requestQuote .thank-you-page .thank-you-icon {
  width: 32px;
  height: auto;
  margin-bottom: 1rem;
}
#requestQuote .thank-you-page h4 {
  margin: 0 0 0.5rem;
  color: var(--raq-text);
  font-size: 18px;
  font-weight: 400;
  text-align: center;
}

/* ============================================================
   12. Wizard Navigation Buttons (Back, Next, Submit)
   ============================================================ */
body.raq-page #requestQuote .wizard-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--raq-field-row-gap);
}
body.raq-page #requestQuote .wizard-footer-left {
  margin-right: auto;
}

body.raq-page #requestQuote .mc-button.button,
body.raq-page #requestQuote .wizard-card-footer a,
body.raq-page #requestQuote .wizard-card-footer button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: var(--raq-btn-width) !important;
  min-width: var(--raq-btn-width) !important;
  height: var(--raq-btn-height) !important;
  min-height: var(--raq-btn-height) !important;
  padding: 0 !important; /* No optical offset: the font already sits low in its line box */
  background: var(--raq-light-blue) !important;
  border: 0 !important;
  border-radius: var(--raq-pill-radius) !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: var(--raq-btn-font-size) !important;
  font-weight: 500 !important;
  letter-spacing: var(--raq-btn-letter-spacing) !important;
  line-height: 1 !important;
  text-transform: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

body.raq-page #requestQuote .mc-button.button[disabled],
body.raq-page #requestQuote .wizard-card-footer button[disabled] {
  background: #eaeaea !important;
  color: #a0a0a0 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

body.raq-page #requestQuote .mc-button:focus:not(:focus-visible):not(:hover) {
  background: var(--raq-light-blue);
}

/* ============================================================
   13. Mobile Responsive Overrides & Option 1 Test Cards
   ============================================================ */
@media (max-width: 768px) {
  section.full-page.raq-page {
    background-attachment: scroll;
  }

  .raq-card {
    padding: 1.5rem 1rem;
    padding-bottom: var(--raq-card-tail-mobile);
    border-radius: var(--raq-card-radius-mobile) var(--raq-card-radius-mobile) 0 0;
  }

  body.raq-page .wrapper {
    padding: 0 var(--raq-gutter-mobile);
  }

  #requestQuote .stepTitle {
    font-size: 12px;
  }

  /* Option 1 Action Footer Bar Mobile Test Cards */
  #requestQuote .submit-sample-form li {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0.875rem 1rem !important;
    border-radius: 8px !important;
    row-gap: 0.35rem !important;
    column-gap: 0.5rem !important;
    background: var(--raq-card-bg);
    border: 1px solid var(--raq-row-border);
  }
  #requestQuote .submit-sample-form li + li {
    margin-top: 0.625rem !important;
  }

  #requestQuote .submit-sample-form li span {
    margin: 0 !important;
    padding: 0 !important;
    display: inline !important;
    text-align: left !important;
    line-height: inherit !important;
  }
  #requestQuote .submit-sample-form li div {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  /* Line 1: Test Code Header */
  #requestQuote .submit-sample-form li > span:first-child {
    order: 1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: var(--raq-dark-blue) !important;
    line-height: 1.25 !important;
    margin-bottom: 0.15rem !important;
    display: block !important;
  }

  /* Line 2: Test Description */
  #requestQuote .submit-sample-form li:has(input[type='checkbox']) > span:not(:first-child) {
    order: 2 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    line-height: 1.4 !important;
    color: var(--raq-text) !important;
    margin-bottom: 0.25rem !important;
    display: block !important;
  }
  #requestQuote .submit-sample-form li:not(:has(input[type='checkbox'])) > span:not(:first-child),
  #requestQuote .submit-sample-form li > span:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
  }

  /* Line 3: Checkbox Options (Available Tests) */
  #requestQuote .submit-sample-form li > div:has(input[type='checkbox']) {
    order: 3 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    font-size: 13px !important;
    margin-right: 0.75rem !important;
    margin-top: 0.15rem !important;
  }

  /* Line 3b: Soft Tag Badges (Selected Tests) */
  #requestQuote .submit-sample-form li:not(:has(input[type='checkbox'])) > div:not(:last-of-type) {
    order: 2 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.2rem 0.5rem !important;
    background: #f0f2f5 !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    color: #4a5568 !important;
    margin-right: 0.4rem !important;
    margin-top: 0.15rem !important;
  }

  /* Line 4: Subtle Divider Line */
  #requestQuote .submit-sample-form li::before {
    content: '' !important;
    order: 4 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 1px !important;
    background-color: #f0f0f0 !important;
    margin: 0.45rem 0 0.5rem 0 !important;
    display: block !important;
  }

  /* Line 5: Footer Left Quantity */
  #requestQuote .submit-sample-form li > div:has(input[type='number']),
  #requestQuote .submit-sample-form li:not(:has(input[type='checkbox'])) > div:last-of-type {
    order: 5 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    font-size: 13px !important;
    color: var(--raq-text) !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  #requestQuote .submit-sample-form li:not(:has(input[type='checkbox'])) > div:last-of-type span:last-child {
    font-weight: 600 !important;
    color: var(--raq-dark-blue) !important;
    margin-left: 0.2rem !important;
  }

  /* Line 6: Footer Right Action Button */
  #requestQuote .submit-sample-form li > a.button {
    order: 6 !important;
    margin-left: auto !important;
    margin-top: 0 !important;
    flex: 0 0 auto !important;
    width: var(--raq-row-btn-width) !important;
    min-width: var(--raq-row-btn-width) !important;
    height: var(--raq-row-btn-height) !important;
  }

  /* Mobile touch-friendly industry buttons */
  #requestQuote .mc-industry-select {
    aspect-ratio: auto !important;
    min-height: 3.75rem !important;
    padding: 0.75rem 1.25rem !important;
  }

  /* Field spacing rhythm on mobile */
  #requestQuote .wizard-tab-container form .row + .row,
  #requestQuote .wizard-tab-container .row + .row {
    margin-top: 0 !important;
  }
  #requestQuote .wizard-tab-container .row > [class*='col-'] {
    margin-bottom: var(--raq-field-row-gap) !important;
  }
  #requestQuote .wizard-tab-container .form-group {
    margin-bottom: 0 !important;
  }
}

/* ============================================================
   14. Zero-Layout-Shift Skeleton Placeholder System
   ============================================================ */
@keyframes raq-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.raq-skeleton {
  width: 100%;
  box-sizing: border-box;
  margin-top: 0;
  display: flex;
  flex-direction: column;
}

body.raq-page:has(#requestQuote) .raq-skeleton,
.raq-card:has(#requestQuote) .raq-skeleton,
.raq-skeleton.raq-skeleton-hidden {
  display: none !important;
}

.raq-skeleton-item {
  background: linear-gradient(
    90deg,
    #f2f3f5 0%,
    #f2f3f5 35%,
    #e7e9ec 50%,
    #f2f3f5 65%,
    #f2f3f5 100%
  );
  background-size: 200% 100%;
  animation: raq-shimmer 1.8s infinite ease-in-out;
  border-radius: 4px;
}

.raq-skel-stepper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  position: relative;
  margin: 0;
  padding: 0 25px !important;
}
.raq-skel-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  z-index: 2;
}

@media (min-width: 769px) {
  .raq-skel-stepper .raq-skel-step:nth-child(1),
  .raq-skel-stepper .raq-skel-step:nth-child(5) {
    flex: 0 0 160px;
    width: 160px;
  }
  .raq-skel-stepper .raq-skel-step:nth-child(3) {
    flex: 0 0 180px;
    width: 180px;
  }
  .raq-skel-line:nth-child(2) {
    left: 135px;
    right: calc(50% + 30px);
  }
  .raq-skel-line:nth-child(4) {
    left: calc(50% + 30px);
    right: 135px;
  }
}

@media (max-width: 768px) {
  .raq-skel-stepper {
    padding: 0 !important;
  }
  .raq-skel-step {
    flex: 1 !important;
    width: auto !important;
  }
  .raq-skel-line:nth-child(2) {
    left: calc(16.6667% + 30px);
    right: calc(50% + 30px);
  }
  .raq-skel-line:nth-child(4) {
    left: calc(50% + 30px);
    right: calc(16.6667% + 30px);
  }
}

.raq-skel-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.raq-skel-label {
  width: 120px;
  height: 16px;
  border-radius: 4px;
}
.raq-skel-line {
  position: absolute;
  top: 18px;
  margin-top: 3px !important;
  height: 4px;
  border-radius: 20px;
  z-index: 1;
}

.raq-skel-heading {
  width: 250px;
  height: 25px;
  border-radius: 4px;
  margin: var(--raq-stepper-section-gap) 0 0.75rem 0 !important;
}

.raq-skel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  row-gap: var(--raq-field-row-gap);
  width: 100%;
}
@media (max-width: 768px) {
  .raq-skel-grid {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }
}
.raq-skel-field {
  display: flex;
  flex-direction: column;
  gap: var(--raq-label-gap);
}
.raq-skel-field-label {
  width: 130px;
  height: 14px;
  border-radius: 4px;
}
.raq-skel-input {
  width: 100%;
  height: var(--raq-input-height);
  border-radius: var(--raq-input-radius);
}

.raq-skel-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--raq-section-gap);
}
.raq-skel-btn {
  width: 104px;
  height: 32px;
  border-radius: 18px;
}

/* ============================================================
   15. Accessibility & Motion Transitions
   ============================================================ */
#requestQuote .mc-billpay-field:focus-visible,
#requestQuote .v-autocomplete-input:focus-visible,
#requestQuote input[name='categoriesOtherText']:focus-visible,
#requestQuote .submit-sample-form li input:focus-visible {
  outline: 2px solid var(--raq-light-blue);
  outline-offset: 1px;
}
#requestQuote .mc-button:focus-visible {
  outline: 2px solid var(--raq-dark-blue);
  outline-offset: 2px;
}

body.raq-page #requestQuote .wizard-icon-circle,
body.raq-page #requestQuote .wizard-icon-container,
body.raq-page #requestQuote .wizard-icon,
body.raq-page #requestQuote .stepTitle,
body.raq-page #requestQuote ul.wizard-nav::before,
body.raq-page #requestQuote ul.wizard-nav::after {
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}
body.raq-page #requestQuote .mc-button.button,
body.raq-page #requestQuote .mc-button-finish {
  transition:
    background-color 0.2s ease,
    opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  section.full-page.raq-page {
    background-attachment: scroll;
  }
  body.raq-page #requestQuote .wizard-icon-circle,
  body.raq-page #requestQuote .wizard-icon-container,
  body.raq-page #requestQuote .wizard-icon,
  body.raq-page #requestQuote .stepTitle,
  body.raq-page #requestQuote ul.wizard-nav::before,
  body.raq-page #requestQuote ul.wizard-nav::after,
  body.raq-page #requestQuote .mc-button.button,
  body.raq-page #requestQuote .mc-button-finish {
    transition: none;
  }
}