/* quiz.css: the /quiz/ redesign, built on the old Dental Link hero look (skyline, logo lockup, blue to teal
   gradient) in the new design system. Loaded after dl.css, quiz only. Visual layer only: no question key, answer
   value, field name or field id is set here. Reduced motion is handled by dl.css's global rule (animation and
   transition off, data-reveal shown). No dashes anywhere in this file. */

/* ------------------------------------------------------------------ header hero band */
.q-page .q-top {
  position: static; background: none; backdrop-filter: none; border-bottom: 0; inset: auto;
}
.q-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F8FE 46%, #E9F2FF 100%);
  border-bottom: 1px solid var(--line);
}
.q-hero__sky {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 66%;
  object-fit: cover; object-position: 50% 30%; z-index: 0;
  opacity: .55;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 34%, rgba(0,0,0,.85) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 34%, rgba(0,0,0,.85) 100%);
}
.q-hero::after { /* keep the lockup readable over the skyline: a soft white veil top to bottom */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(244,248,254,.72) 0%, rgba(244,248,254,.30) 46%, rgba(244,248,254,.58) 100%);
}
.q-hero { min-height: 148px; }
.q-hero__in {
  position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto;
  padding: 26px var(--pad) 30px; display: flex; justify-content: center; align-items: center; min-height: inherit;
}
/* pin the lockup box with the logo's own ratio so an alt or load swap cannot resize the band (no CLS) */
.q-hero__lockup { width: min(320px, 82%); aspect-ratio: 2760 / 720; height: auto; display: block; }

/* ------------------------------------------------------------------ sticky progress + brand bar */
.q-bar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(244, 248, 254, .93); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.q-bar__in { display: flex; align-items: center; gap: 14px; min-height: 54px; }
.q-page .q-prog { height: 4px; background: #DDE8FA; }
.q-page .q-prog > i { background: linear-gradient(90deg, #155EDB, #17B3A6); }

/* ------------------------------------------------------------------ main layout */
.q-page .q-main { padding: 30px 0 110px; }
@media (min-width: 1040px) {
  .q-page .q-main { min-height: 0; display: block; padding: 44px 0 110px; }
}

/* ------------------------------------------------------------------ question head */
.q-page .q-eyebrow { color: var(--gold-text); }
/* dl.css caps these with ch units, which are font FAMILY relative and rewrap on the web font swap (a cold load
   CLS). em is font SIZE relative only, and the size is a fixed clamp, so the wrap is stable across the swap. */
.q-page .q-q { max-width: 12em; }
.q-page .q-help { max-width: 40em; }
.q-page .q-q .qhl--b { color: #155EDB; }
.q-page .q-q .qhl--t { color: #0B7A71; }
.q-tooth { display: flex; align-items: center; gap: 12px; margin: 20px 0 2px; max-width: 340px; }
.q-tooth i { height: 2px; flex: 1; border-radius: 2px; }
.q-tooth i.l { background: linear-gradient(90deg, rgba(21, 94, 219, 0), #155EDB); }
.q-tooth i.r { background: linear-gradient(90deg, #17B3A6, rgba(23, 179, 166, 0)); }
.q-tooth__m { width: 26px; height: 26px; flex: none; }

/* ------------------------------------------------------------------ visual answer cards */
.q-choices { margin-top: 22px; }
.choice__v { flex: none; display: grid; place-items: center; }
.choice__v svg { display: block; }
/* icon tile (rows and cards) */
.q-choices--rows .choice__v,
.q-choices--cards .choice__v {
  border-radius: 12px; background: linear-gradient(180deg, #EAF2FF, #E9FBF7);
  border: 1px solid rgba(21, 94, 219, .16);
}
.q-choices--rows .choice__v svg,
.q-choices--cards .choice__v svg { width: 26px; height: 26px; }

/* rows: icon tile, label, number on the right */
.q-choices--rows .choice { gap: 14px; padding: 12px 15px; }
.q-choices--rows .choice__v { width: 46px; height: 46px; order: 1; }
.q-choices--rows .lbl { order: 2; flex: 1; min-width: 0; }
.q-choices--rows .k { order: 3; margin-left: auto; }

/* cards: two per row (treatment), icon on top */
.q-choices--cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 620px; }
.q-choices--cards .choice {
  flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 16px 15px;
  min-height: 116px; position: relative;
}
.q-choices--cards .choice__v { width: 52px; height: 52px; }
.q-choices--cards .lbl { order: 3; }
.q-choices--cards .k { position: absolute; top: 12px; right: 12px; }
@media (max-width: 400px) {
  .q-choices--cards .choice { min-height: 108px; padding: 14px; }
}

/* cities: image cards, hcmc and hanoi side by side, no preference full width */
.q-choices--cities { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 620px; }
.q-choices--cities .choice {
  flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden;
  min-height: 0; position: relative;
}
.q-choices--cities .choice__v { width: 100%; height: 116px; border-radius: 0; background: #DDE8FA; }
.q-choices--cities .choice__v img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q-choices--cities .choice__v svg { width: 40px; height: 40px; }
.q-choices--cities .lbl { padding: 12px 14px 14px; order: 2; }
.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(11, 31, 58, .18); }
.q-choices--cities .choice--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px; padding: 12px 15px; }
.q-choices--cities .choice--wide .choice__v { width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(180deg, #EAF2FF, #E9FBF7); border: 1px solid rgba(21, 94, 219, .16); }
.q-choices--cities .choice--wide .choice__v svg { width: 26px; height: 26px; }
.q-choices--cities .choice--wide .lbl { padding: 0; order: 2; flex: 1; }
.q-choices--cities .choice--wide .k { position: static; background: #EEF2F7; color: var(--muted); box-shadow: none; order: 3; }

/* flags: country badges, two per row */
.q-choices--flags { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 620px; }
.q-choices--flags .choice { gap: 12px; padding: 11px 14px; }
.q-choices--flags .choice__v { width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(11, 31, 58, .12) inset; order: 1; }
.q-choices--flags .choice__v svg { width: 40px; height: 40px; }
.q-choices--flags .lbl { order: 2; flex: 1; min-width: 0; }
.q-choices--flags .k { display: none; }

/* selected state keeps the dl.css teal ring; lift the icon tile a touch */
.choice.is-selected .choice__v { border-color: var(--teal); }
.q-choices--cities .choice.is-selected .choice__v { border: 0; }

/* ------------------------------------------------------------------ money and contact polish */
.q-page .q-money { grid-template-columns: 1fr 116px; }
.q-page .q-drop { border-radius: 14px; }
.q-cur-note { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }

/* ------------------------------------------------------------------ result screen arrival */
.q-arrive {
  position: relative; margin: 0 0 22px; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  background: linear-gradient(180deg, #EAF2FF, #E9FBF7);
}
.q-arrive img { width: 100%; height: 170px; object-fit: cover; object-position: 50% 34%; display: block; }
.q-arrive::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(244,248,254,0) 40%, rgba(244,248,254,.10) 70%, rgba(244,248,254,.55) 100%);
}
@media (min-width: 900px) { .q-arrive img { height: 210px; } }

/* the side panel gets a lighter, brighter card in the redesign */
.q-side__card { background: linear-gradient(180deg, #FFFFFF, #FBFDFF); }

/* subtle entrance for the visual cards, rests visible, off for reduced motion via dl.css global rule */
@media (prefers-reduced-motion: no-preference) {
  .q-choices--cards .choice, .q-choices--cities .choice, .q-choices--flags .choice, .q-choices--rows .choice {
    animation: qRise .38s var(--ease) both;
  }
  .q-choices .choice:nth-child(2) { animation-delay: .03s; }
  .q-choices .choice:nth-child(3) { animation-delay: .06s; }
  .q-choices .choice:nth-child(4) { animation-delay: .09s; }
  .q-choices .choice:nth-child(5) { animation-delay: .12s; }
  .q-choices .choice:nth-child(6) { animation-delay: .15s; }
}
@keyframes qRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ phone */
@media (max-width: 719px) {
  .q-hero__in { padding: 22px var(--pad) 26px; }
  .q-hero__lockup { width: min(280px, 84%); }
  .q-hero__sky { height: 72%; opacity: .5; }
  .q-choices--flags { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 360px) {
  .q-choices--cards { grid-template-columns: 1fr; }
  .q-choices--flags { grid-template-columns: 1fr; }
}