/* clinic-quiz.css: the embedded clinic quiz on /clinics-working-with-dental-link/. Built in the patient quiz's
   visual language (blue to teal gradient line icons in rounded tiles, a tooth divider, numbered choices) but
   scoped entirely under .cq so nothing here touches the rest of the site or the patient quiz. Loaded after
   dl.css, which already defines the base .q-card, .q-choices, .choice, .q-q, .q-help, .q-nav, .q-consent and the
   .field, .input and .btn controls. Nothing rests at opacity 0: the entrance keyframes play on their own and
   dl.css's global reduced motion rule turns every animation and transition off. No dashes anywhere in this file. */

.cq { max-width: 640px; }

/* progress bar, a copy of the patient quiz look (blue to teal). The stage below keeps a floor height so the area
   is reserved on first paint and swapping a question does not push the rest of the page. */
.cq-prog { height: 4px; border-radius: 999px; background: #E1E9F6; overflow: hidden; margin: 0 0 4px; }
.cq-prog > i { display: block; height: 100%; width: 12.5%; border-radius: 999px;
  background: linear-gradient(90deg, #0070F0, #04E0B7); transition: width .4s var(--ease); }
.cq-stage { min-height: 440px; }
@media (max-width: 719px) { .cq-stage { min-height: 520px; } }

/* question head: a tooth divider under the heading, same as the patient quiz */
.cq .q-tooth { display: flex; align-items: center; gap: 12px; margin: 18px 0 2px; max-width: 340px; }
.cq .q-tooth i { height: 2px; flex: 1; border-radius: 2px; }
.cq .q-tooth i.l { background: linear-gradient(90deg, rgba(11, 125, 255, 0), #0070F0); }
.cq .q-tooth i.r { background: linear-gradient(90deg, #04E0B7, rgba(4, 224, 183, 0)); }
.cq .q-tooth__m { width: 26px; height: 26px; flex: none; }

/* the question key words, picked out in blue or teal, visual only */
.cq .q-q .qhl--b { color: #0070F0; }
.cq .q-q .qhl--t { color: #007B65; }

/* visual answer tiles */
.cq .choice__v { flex: none; display: grid; place-items: center; }
.cq .choice__v svg { display: block; }

/* rows: icon tile on the left, label, number on the right */
.cq .q-choices--rows .choice { gap: 14px; padding: 12px 15px; }
.cq .q-choices--rows .choice__v {
  width: 46px; height: 46px; order: 1; border-radius: 12px;
  background: linear-gradient(180deg, #EDF3FC, #ECF8F6); border: 1px solid rgba(11, 125, 255, .16);
}
.cq .q-choices--rows .choice__v svg { width: 26px; height: 26px; }
.cq .q-choices--rows .lbl { order: 2; flex: 1; min-width: 0; }
.cq .q-choices--rows .k { order: 3; margin-left: auto; }
.cq .choice.is-selected .choice__v { border-color: var(--teal); }
/* a selected multi choice turns its number badge into a tick */
.cq .choice--multi.is-selected .k { background: var(--teal); color: #FFFFFF; }
.cq .choice--multi .k svg { width: 15px; height: 15px; }

/* cities: image cards side by side, same shape as the patient quiz city step */
.cq .q-choices--cities { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cq .q-choices--cities .choice {
  flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden;
  min-height: 0; position: relative;
}
.cq .q-choices--cities .choice__v { width: 100%; height: 120px; border-radius: 0; background: #E1E9F6; display: block; overflow: hidden; }
.cq .q-choices--cities .choice__v img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cq .q-choices--cities .lbl { padding: 12px 14px 14px; order: 2; }
.cq .q-choices--cities .k { position: absolute; top: 10px; left: 10px; background: rgba(255, 255, 255, .92);
  color: var(--gold-text); box-shadow: 0 1px 4px rgba(14, 42, 75, .18); }
.cq .q-choices--cities .choice.is-selected .choice__v { border: 0; }

/* the hint under a multi select step */
.cq .cq-multihint { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }

/* the final WhatsApp handoff screen */
.cq-done { animation: cqIn .5s var(--ease) both; }
.cq-wa-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
@keyframes cqIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* a subtle entrance for the choices, rests visible, off for reduced motion via dl.css's global rule */
@media (prefers-reduced-motion: no-preference) {
  .cq .q-choices .choice { animation: cqRise .36s var(--ease) both; }
  .cq .q-choices .choice:nth-child(2) { animation-delay: .03s; }
  .cq .q-choices .choice:nth-child(3) { animation-delay: .06s; }
  .cq .q-choices .choice:nth-child(4) { animation-delay: .09s; }
  .cq .q-choices .choice:nth-child(5) { animation-delay: .12s; }
}
@keyframes cqRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 400px) {
  .cq .q-choices--cities { grid-template-columns: 1fr; }
}

#clinic-quiz{scroll-margin-top:96px}