/* Survey widget (Carecom.Foundation.Surveys) — calm, on-brand styling for the public
   survey form and its "thank you" state. The survey__* classes are BEM-unique, so this
   is a global stylesheet (linked per site). Colours come from the site's design tokens
   with sober fallbacks, so it looks at home on carecom (Petrol) and degrades gracefully
   wherever the widget is embedded. Modern selectors (:has) only enhance — without them
   the form stays fully usable, just without the selected-row highlight. */

.survey,
.survey--done {
  --s-accent:      var(--accent, #1f6f8b);
  --s-accent-dark: var(--accent-dark, #134453);
  --s-accent-soft: var(--accent-soft, #e3eef3);
  --s-border:      var(--border, #e2e6ea);
  --s-fg:          var(--fg, #1d242b);
  --s-fg-soft:     var(--fg-soft, #4a5560);
  --s-fg-muted:    var(--fg-muted, #7a8590);
  --s-radius:      var(--radius-lg, 8px);
  --s-radius-sm:   var(--radius, 4px);
  --s-field-bg:    var(--surface, #fff);

  max-width: 40rem;
  margin: 1.5rem 0 2.5rem;
}

.survey__title {
  font-size: 1.4rem;
  line-height: 1.3;
  margin: 0 0 1.25rem;
  color: var(--s-fg);
}

/* Each question is a quiet card; the native fieldset chrome is removed. */
.survey__q {
  border: 1px solid var(--s-border);
  border-radius: var(--s-radius);
  padding: 1rem 1.1rem 1.05rem;
  margin: 0 0 1rem;
  background: var(--s-field-bg);
  min-inline-size: 0;          /* fieldsets default to min-content — let it shrink to the column */
}

.survey__prompt {
  display: block;
  padding: 0;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--s-fg);
  margin-bottom: .7rem;
}

/* Single / multi / yes-no: full-width, comfortably tappable rows that highlight when chosen. */
.survey__opt {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .7rem;
  border: 1px solid var(--s-border);
  border-radius: var(--s-radius-sm);
  margin-bottom: .4rem;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.survey__opt:last-child { margin-bottom: 0; }
.survey__opt:hover { background: var(--s-accent-soft); }
.survey__opt input {
  accent-color: var(--s-accent);
  inline-size: 1.1rem; block-size: 1.1rem;
  margin: 0; flex: none;
}
.survey__opt:has(input:checked) { background: var(--s-accent-soft); border-color: var(--s-accent); }
.survey__opt:has(input:focus-visible) { outline: 2px solid var(--s-accent); outline-offset: 1px; }

/* Scale / NPS: a compact wrap of numbered buttons (the native radio is visually replaced). */
.survey__scale {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.5rem;
  padding: .5rem .45rem;
  margin: 0 .4rem .4rem 0;
  border: 1px solid var(--s-border);
  border-radius: var(--s-radius-sm);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.survey__scale input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.survey__scale span { font-variant-numeric: tabular-nums; line-height: 1; }
.survey__scale:hover { background: var(--s-accent-soft); }
.survey__scale:has(input:checked) { background: var(--s-accent); border-color: var(--s-accent); color: #fff; }
.survey__scale:has(input:focus-visible) { outline: 2px solid var(--s-accent); outline-offset: 1px; }

/* Free-text + email share one field style. */
.survey__textarea,
.survey__email input[type="email"] {
  inline-size: 100%;
  padding: .55rem .65rem;
  border: 1px solid var(--s-border);
  border-radius: var(--s-radius-sm);
  font: inherit;
  color: var(--s-fg);
  background: var(--s-field-bg);
}
.survey__textarea { resize: vertical; min-block-size: 4.5rem; }
.survey__textarea:focus,
.survey__email input[type="email"]:focus {
  outline: none;
  border-color: var(--s-accent);
  box-shadow: 0 0 0 3px var(--s-accent-soft);
}

/* Email-consent: a set-apart block whose field is tied to the checkbox (survey-widget.js
   disables it until consent is ticked; this is the matching disabled look). */
.survey__email {
  border: 1px solid var(--s-border);
  border-radius: var(--s-radius);
  padding: .9rem 1.1rem 1rem;
  margin: 0 0 1rem;
  background: var(--s-accent-soft);
}
.survey__consent {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  cursor: pointer;
}
.survey__consent input {
  accent-color: var(--s-accent);
  inline-size: 1.1rem; block-size: 1.1rem;
  margin: .15rem 0 0; flex: none;
}
.survey__email .survey__consent { margin-bottom: .65rem; }
.survey__email input[type="email"]:disabled {
  background: color-mix(in srgb, var(--s-fg-muted) 12%, #fff);
  color: var(--s-fg-muted);
  cursor: not-allowed;
}
.survey__purpose {
  margin: .55rem 0 0;
  font-size: .85rem;
  color: var(--s-fg-soft);
}

/* Identity-consent row (logged-in only) sits on its own above the button. */
.survey > form > .survey__consent { margin: 0 0 1rem; }

.survey__submit {
  appearance: none;
  border: 0;
  background: var(--s-accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  padding: .65rem 1.5rem;
  border-radius: var(--s-radius-sm);
  cursor: pointer;
  transition: background-color .12s ease;
}
.survey__submit:hover { background: var(--s-accent-dark); }
.survey__submit:focus-visible { outline: 2px solid var(--s-accent-dark); outline-offset: 2px; }

.survey__note {
  margin: .85rem 0 0;
  font-size: .8rem;
  color: var(--s-fg-muted);
  line-height: 1.55;
}

/* Thank-you state — a warm, reassuring confirmation. */
.survey__thanks {
  margin: 1.5rem 0;
  padding: 1rem 1.2rem;
  border: 1px solid var(--success, #2d7a4f);
  border-radius: var(--s-radius);
  background: var(--success-soft, #e6f4ec);
  color: var(--s-fg);
  font-size: 1.05rem;
}