/* Minimal layout — design pass deferred.
   Brand colors are driven by CSS custom properties so QUIZ_CONFIG.brand can override per brand. */
:root {
  --quiz-accent:                 #00A6A7;
  --quiz-accent-hover:           #00898a;
  --quiz-accent-soft:            #f0fafa;
  --quiz-accent-ring:            rgba(0, 166, 167, 0.15);
  --quiz-button-bg:              #1c252e;
  --quiz-button-bg-hover:        #2a3540;
  --quiz-button-color:           #ffffff;
  --quiz-button-radius:          999px;
  --quiz-button-text-transform:  uppercase;
  --quiz-button-letter-spacing:  0.08em;
  --quiz-button-font-weight:     700;
  --quiz-button-font-size:       14px;
  --quiz-pill-bg:                #D1DBE1;
  --quiz-pill-color:             #1c252e;
  --quiz-page-bg:                #FBF2E9;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.quiz-page {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--quiz-page-bg);
  color: #1a2733;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Reserve top space for the fixed brand logo (30px gap + ~50px logo + 30px breathing room). */
  padding: 110px 16px 24px;
}
.quiz-logo-row {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  margin: 0;
  z-index: 100;
  pointer-events: none; /* don't intercept clicks meant for the card */
}
.quiz-logo { display: block; max-width: 220px; height: auto; pointer-events: auto; }
.quiz-root { width: 100%; max-width: 560px; }
.quiz-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
}
.quiz-title    { margin: 0 0 8px;  font-size: 26px; font-weight: 700; }
.quiz-sub      { margin: 0 0 24px; color: #5a6b78; font-size: 15px; }
.quiz-label    { display: block; margin: 12px 0 6px; font-weight: 600; font-size: 14px; }
.quiz-input    {
  width: 100%; padding: 12px 14px; border: 1px solid #d3dde4;
  border-radius: 10px; font-size: 15px; outline: none;
}
.quiz-input:focus { border-color: var(--quiz-accent); }
.quiz-btn {
  display: inline-block; width: 100%;
  margin-top: 20px; padding: 16px 28px;
  background: var(--quiz-button-bg); color: var(--quiz-button-color); border: 0;
  border-radius: var(--quiz-button-radius);
  font-size: var(--quiz-button-font-size);
  font-weight: var(--quiz-button-font-weight);
  letter-spacing: var(--quiz-button-letter-spacing);
  text-transform: var(--quiz-button-text-transform);
  cursor: pointer; text-align: center; text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.quiz-btn:hover { background: var(--quiz-button-bg-hover); color: var(--quiz-button-color); }
.quiz-fineprint { margin: 12px 0 0; font-size: 12px; color: #8094a3; text-align: center; }

.quiz-progress { background: #e6edf2; border-radius: 999px; height: 6px; overflow: hidden; }
.quiz-progress-bar { background: var(--quiz-accent); height: 100%; transition: width 0.25s ease; }
.quiz-step-count { margin: 12px 0 4px; font-size: 13px; color: #8094a3; }
.quiz-question-pill-row {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 10px;
}
.quiz-question-pill {
  display: inline-block;
  padding: 6px 14px;
  background: var(--quiz-pill-bg);
  color: var(--quiz-pill-color);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}
.quiz-question { margin: 8px 0 18px; font-size: 22px; font-weight: 700; }

.quiz-answers { display: flex; flex-direction: column; gap: 10px; }
.quiz-answer {
  width: 100%; padding: 14px 16px; text-align: left;
  background: #f8fbfc; border: 1px solid #d3dde4;
  border-radius: 10px; font-size: 15px; cursor: pointer;
}
.quiz-answer:hover { background: #eef7f8; border-color: var(--quiz-accent); }
.quiz-back, .quiz-restart {
  margin-top: 16px; background: none; border: 0;
  color: #5a6b78; font-size: 14px; cursor: pointer; text-decoration: underline;
}

.quiz-result-eyebrow { margin: 0; font-size: 13px; color: var(--quiz-accent); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; text-align: center; }
.quiz-result-icon-wrap {
  display: flex; justify-content: center;
  margin: 14px 0 8px;
}
.quiz-result-icon {
  width: 96px; height: 96px;
  object-fit: contain;
  border-radius: 16px;
  background: #f4f7f9;
}
.quiz-result-title   {
  margin: 4px 0 4px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  letter-spacing: -0.01em;
}
.quiz-result-price   { margin: 0 0 16px; font-size: 18px; color: var(--quiz-accent); font-weight: 700; text-align: center; }
.quiz-result-img     { width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; margin-bottom: 14px; }
.quiz-result-desc    { color: #43525e; font-size: 15px; line-height: 1.55; margin: 8px 0 16px; text-align: center; }
.quiz-result-summary { color: #5a6b78; font-size: 14px; line-height: 1.5; font-style: italic; margin: 12px 0 0; text-align: center; }

.quiz-actions-top { margin-top: 16px; margin-bottom: 18px; }

/* Selectable add-on card — defaults to unselected, click to toggle. */
.quiz-addon {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  margin: 16px 0 0; padding: 14px 16px;
  background: #f8fbfc;
  border-radius: 10px;
  border: 1.5px solid #d3dde4;
  opacity: 0.75;
  cursor: pointer;
  font: inherit; color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.quiz-addon:hover, .quiz-addon-selected { opacity: 1; }
.quiz-addon:hover { border-color: var(--quiz-accent); background: var(--quiz-accent-soft); }
.quiz-addon-selected {
  background: var(--quiz-accent-soft);
  border-color: var(--quiz-accent);
  box-shadow: 0 0 0 3px var(--quiz-accent-ring);
}
.quiz-addon-check {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #b5c2cb;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.quiz-addon-check::after {
  content: ""; display: block; width: 8px; height: 8px;
  border-radius: 50%; background: transparent;
  transition: background 0.15s ease;
}
.quiz-addon-selected .quiz-addon-check { border-color: var(--quiz-accent); background: var(--quiz-accent); }
.quiz-addon-selected .quiz-addon-check::after { background: #fff; }
.quiz-addon-content { flex: 1 1 auto; min-width: 0; }
.quiz-addon-eyebrow  { margin: 0 0 2px; font-size: 12px; color: var(--quiz-accent); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.quiz-addon-name     { margin: 0; font-size: 16px; font-weight: 600; color: #1a2733; }
.quiz-addon-helper   { margin: 4px 0 0; font-size: 12px; color: #5a6b78; }

/* ============================================================
   jQuery UI Datepicker — overrides matching driphydration's
   live form 127 (style.css lines 198-202, 2666-2690, 11383)
   ============================================================ */
.ui-datepicker {
  width: 216px; height: auto;
  margin: 5px auto 0;
  font-size: 12px;
  box-shadow: 0 6px 18px rgba(0, 60, 80, 0.12) !important;
  border: 1px solid #c3c3c3 !important;
  background: #fff;
  padding: 4px;
  border-radius: 4px;
  z-index: 1100;
}
.ui-datepicker-header {
  background-color: #bdbdbd !important;
  border-color: #c3c3c3 !important;
  color: #fff;
  font-weight: 700;
  padding: 4px 0;
  border-radius: 2px;
}
body .ui-datepicker select.ui-datepicker-month,
body .ui-datepicker select.ui-datepicker-year {
  border: none !important;
  color: #fff !important;
  background: transparent;
  font-size: 12px;
  margin: 0 2px;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next { top: 4px; cursor: pointer; }
.ui-datepicker-calendar { width: 100%; border-collapse: collapse; }
.ui-datepicker-calendar th { color: #5a6b78; font-weight: 700; padding: 4px 0; }
.ui-datepicker-calendar td { padding: 1px; text-align: center; }
.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span {
  display: block; padding: 6px 0; font-size: 12px;
  text-decoration: none; color: #1a2733;
  border-radius: 2px; background: #f4f7f9;
}
.ui-datepicker-calendar td a:hover { background: #e6edf2; }
.ui-datepicker-calendar .ui-state-active {
  width: 100% !important;
  margin-right: 0;
  background: var(--quiz-accent) !important;
  color: #fff !important;
  border: 1px solid var(--quiz-accent) !important;
}
.ui-datepicker-calendar .ui-state-highlight {
  background: #cfeded !important;
  color: #1a2733 !important;
}
.ui-datepicker-unselectable span { color: #b5c2cb !important; background: transparent !important; }

input.quiz-date-text { cursor: pointer; }
.quiz-date-row { display: grid; grid-template-columns: 1.2fr 1fr 0.8fr; gap: 12px; margin-top: 6px; }
.quiz-date-row-no-zip { grid-template-columns: 1.2fr 1fr; }
.quiz-date-row-no-time { grid-template-columns: 1.2fr 0.8fr; }
.quiz-date-row-no-zip.quiz-date-row-no-time { grid-template-columns: 1fr; }
.quiz-date-row .quiz-input,
.quiz-date-row select.quiz-input { margin-top: 0; }
@media (max-width: 480px) {
  .quiz-date-row { grid-template-columns: 1fr 1fr; }
  .quiz-date-row > input[inputmode="numeric"] { grid-column: span 2; }
}

/* Inline contextual upsell — appears between the recommendation summary
   and the date block (e.g. Tasso blood test on CMD). */
.quiz-inline-upsell {
  margin: 16px 0 0;
  padding: 16px 18px;
  border: 1px dashed var(--quiz-button-bg);
  border-radius: 12px;
  background: transparent;
}
.quiz-inline-upsell-heading {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--quiz-button-bg);
}
.quiz-inline-upsell-body {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.45;
  color: #43525e;
}
.quiz-inline-upsell-cta {
  display: inline-block;
  padding: 10px 18px;
  background: transparent;
  color: var(--quiz-button-bg);
  border: 1.5px solid var(--quiz-button-bg);
  border-radius: var(--quiz-button-radius);
  font-size: 13px;
  font-weight: var(--quiz-button-font-weight);
  letter-spacing: var(--quiz-button-letter-spacing);
  text-transform: var(--quiz-button-text-transform);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.quiz-inline-upsell-cta:hover {
  background: var(--quiz-button-bg);
  color: var(--quiz-button-color);
}

.quiz-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.quiz-actions .quiz-btn { margin-top: 0; }
.quiz-actions .quiz-action-secondary {
  background: transparent;
  color: var(--quiz-button-bg);
  border: 1.5px solid var(--quiz-button-bg);
}
.quiz-actions .quiz-action-secondary:hover {
  background: var(--quiz-button-bg);
  color: var(--quiz-button-color);
}
.quiz-book           { margin-top: 0; }
.quiz-book-disabled  { background: #b5c2cb; color: #fff; cursor: not-allowed; pointer-events: auto; }
.quiz-book-disabled:hover { background: #b5c2cb; }

.quiz-date-block     { margin-top: 22px; padding-top: 22px; border-top: 1px solid #e6edf2; }
.quiz-date           { margin-top: 6px; }
.quiz-date-block .quiz-fineprint { text-align: left; margin-top: 8px; }