/*
 * The survey renderer (templates & builder plan, task 6) -- the one place
 * a template's questions are drawn, shared by the admin "Преглед" page
 * (templates/admin/preview.html.twig) and, unchanged, by the public survey
 * page a later plan adds (templates/survey/_survey.html.twig). Structure and
 * spacing translated from the approved design canvas's "Анкета" screen
 * (design/Анкета Valeo Travel.dc.html); the design draws only `scale`
 * questions (star buttons, JavaScript-driven) -- every other question type
 * below has no design reference and is styled to match the same card/
 * spacing language instead, per spec §5's "real <input type=radio>,
 * functional with JavaScript off" rule for scale (applied here to every
 * type, not only scale).
 *
 * Colours are mapped to --vt-* tokens -- see tokens.css. No new token was
 * needed: every --nv-* colour this screen uses already has an existing
 * --vt-* match (see this task's report for the full list), so nothing was
 * added to tokens.css.
 */

.vt-survey {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.vt-survey__intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vt-survey__eyebrow {
  display: inline-flex;
  align-self: flex-start;
  background: var(--vt-surface-tint-blue);
  color: var(--vt-blue);
  border: 1px solid var(--vt-surface-tint-blue);
  border-radius: 100px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
}

.vt-survey__title {
  margin: 0;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.25;
  color: var(--vt-blue-dark);
}

.vt-survey__group {
  background: var(--vt-white);
  border: 1px solid var(--vt-border-soft);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
  overflow: hidden;
}

.vt-survey__group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--vt-border-hairline);
  background: var(--vt-surface);
}

.vt-survey__group-num {
  width: 28px;
  height: 28px;
  border-radius: 100px;
  background: var(--vt-blue-dark);
  color: var(--vt-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex: none;
}

.vt-survey__group-title {
  margin: 0;
  font-weight: 700;
  font-size: 18px;
  color: var(--vt-blue-dark);
}

.vt-survey__group-body {
  display: flex;
  flex-direction: column;
}

.vt-survey__question {
  padding: 16px 20px;
  border-bottom: 1px solid var(--vt-border-hairline);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vt-survey__group-body .vt-survey__question:last-child {
  border-bottom: none;
}

/*
 * public/js/logic-rules.js hides a conditional question by setting
 * el.hidden. The browser's own [hidden] { display: none } lives in the UA
 * stylesheet, and ANY author rule beats it -- so the display:flex above
 * would keep a "hidden" question on the screen without this. Do not delete
 * it as redundant: it is the line that makes the rule actually apply.
 */
.vt-survey__question[hidden] {
  display: none;
}

.vt-survey__question-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--vt-text);
  line-height: 1.5;
}

.vt-survey__required {
  color: var(--vt-action);
}

.vt-survey__hint {
  font-size: 13px;
  line-height: 1.6;
  color: var(--vt-text-secondary);
}

.vt-survey__field-label,
.vt-survey__note-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--vt-text-secondary);
  padding: 0;
  margin-bottom: 4px;
}

.vt-survey__scale {
  border: none;
  padding: 0;
  margin: 0;
}

.vt-survey__scale-options {
  display: flex;
  align-items: center;
  column-gap: 2px;
  row-gap: 8px;
  flex-wrap: wrap;
}

.vt-survey__scale-option {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  color: var(--vt-text-secondary);
  cursor: pointer;
}

/* Choice controls, drawn here rather than by the browser (Konstantin,
   2026-09-18: „these are ugly, also the have not hover efect").
   `appearance: none` takes the native widget away and everything below puts
   one back: same 18px box, the design's border, and the brand's orange when
   chosen. They stay real inputs -- nothing is hidden and no script is
   involved, so keyboard, form submission and validation are untouched.

   The star scale's own radios are deliberately NOT in this list: they are
   clipped to 1px behind their stars, and a size here would fight that. Its
   „Не е приложимо" radio IS, because that one is visible and would otherwise
   be the only native control left on the page. */
.vt-survey__choice input[type="radio"],
.vt-survey__choice input[type="checkbox"],
.vt-survey__scale-option--na input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid var(--vt-border);
  background-color: var(--vt-white);
  cursor: pointer;
  /* Only the border moves, and only on the frame an interaction happens in.
     This answers the pointer rather than decorating the page. */
  transition: border-color .12s ease, background-color .12s ease;
}

.vt-survey__choice input[type="radio"],
.vt-survey__scale-option--na input {
  border-radius: 50%;
}

.vt-survey__choice input[type="checkbox"] {
  border-radius: 5px;
}

/* Chosen. The radio's dot is an inset white ring over an orange fill, so there
   is no pseudo-element on an input -- which browsers disagree about. */
.vt-survey__choice input[type="radio"]:checked,
.vt-survey__scale-option--na input:checked {
  border-color: var(--vt-action);
  background-color: var(--vt-action);
  box-shadow: inset 0 0 0 3px var(--vt-white);
}

/* The checkbox's tick rides in as a background image for the same reason. */
.vt-survey__choice input[type="checkbox"]:checked {
  border-color: var(--vt-action);
  background-color: var(--vt-action);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}

/* Hover, from anywhere on the row -- the label is the hit area, so pointing at
   the words lights the control. Blue, matching the yes/no pills, and distinct
   from the orange that means „chosen". */
.vt-survey__choice:hover input:not(:disabled),
.vt-survey__scale-option--na:hover input:not(:disabled) {
  border-color: var(--vt-blue);
}

.vt-survey__choice:hover input:checked:not(:disabled),
.vt-survey__scale-option--na:hover input:checked:not(:disabled) {
  border-color: var(--vt-action);
}

.vt-survey__choice:hover,
.vt-survey__scale-option--na:hover {
  color: var(--vt-blue-dark);
}

.vt-survey__choice input:focus-visible,
.vt-survey__scale-option--na input:focus-visible {
  outline: 2px solid var(--vt-action);
  outline-offset: 2px;
}

/* „Преглед" and the builder canvas render these disabled. */
.vt-survey__choice input:disabled,
.vt-survey__scale-option--na input:disabled {
  opacity: .55;
  cursor: default;
}

/*
 * The "Пояснение" note under a scale question (polls & survey plan, task 3).
 * The design draws its mini-label with exactly the properties
 * .vt-survey__field-label already carries, so the two share the rule above
 * rather than repeating the values -- only the gap under the label differs
 * (7px here against the scale legend's 4px), so only that is restated.
 */
.vt-survey__note-label {
  display: block;
  margin-bottom: 7px;
}

/*
 * „Не е приложимо" is NOT a star: it is one more radio in the same group
 * (spec §5 -- that is what makes a score and an abstention mutually exclusive
 * by construction), and it keeps its words and its native control. Only the
 * separator gap is restated: the numbered options used to sit 10px apart and
 * now sit 2px apart, so the margin absorbs the 8px the row gap gave up and
 * the divider stands where it stood.
 */
.vt-survey__scale-option--na {
  margin-left: 14px;
  padding-left: 12px;
  border-left: 1px solid var(--vt-border-soft);
}

/*
 * The scale row as stars (2026-09-14, asked for on the live form). The design
 * canvas draws these as <button>s a script fills in; spec §5 overrode that
 * with a real radio group and gave the reason, so what changes here is the
 * SKIN and nothing else. Every option below is still an <input type="radio">
 * in the group named answer[<code>]: arrow keys still walk it, a screen
 * reader still announces "radio, 7 of 10", it still submits with JavaScript
 * off, and „Не е приложимо" is still one more radio in the same group.
 *
 * Cumulative fill -- choosing 7 lights seven stars, because a single lit star
 * is a rating widget nobody recognises -- is a :has() test on the SUBSEQUENT
 * siblings: a star is lit when it, or any star after it, holds the checked
 * radio. The pre-:has() trick for this reverses the row with
 * flex-direction: row-reverse so the earlier stars become "subsequent" ones
 * in the selector -- which puts the radios in tab and arrow order 10..1 and
 * has a screen reader read the scale backwards. That is precisely what the
 * real-radio decision was protecting, so the DOM stays in reading order and
 * :has() does the work.
 */
.vt-survey__scale-option--star {
  position: relative;
  color: var(--vt-border);
}

/*
 * The radio itself and the number that names it, both hidden the way
 * builder.css hides the move controls -- clipped to 1px, NOT removed, so both
 * stay in the accessibility tree and the radio stays in the tab order. The
 * <label> is the star's whole hit area and activates the radio it wraps, so
 * nothing is lost by shrinking the control.
 *
 * opacity: 0 over a full-size input is the other way to do this and was tried
 * first; a transparent control reads as invisible to enough tooling (this
 * repo's own browser harness drops it from the interactive tree) that the
 * clip the codebase already uses for "still focusable and still announced" is
 * the safer of the two. Never display:none or visibility:hidden: either takes
 * the radio out of the tab order and out of the accessibility tree, and there
 * is nothing left to arrow through.
 */
.vt-survey__scale-option--star input,
.vt-survey__scale-number {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* readonly -- the builder canvas, the chooser previews and „Преглед" render
 * this partial with every control disabled, and a star an operator can click
 * in the builder is a bug. .vt-survey__scale-option's pointer cursor would
 * still invite the click, so it is taken back here. */
.vt-survey__scale-option--star:has(input:disabled) {
  cursor: default;
}

/* The radio's own focus ring lands on the clipped 1px box and cannot be seen,
 * so the label wears it instead -- without this a keyboard user arrowing
 * through the group has no idea where they are. */
.vt-survey__scale-option--star:has(input:focus-visible) {
  outline: 2px solid var(--vt-action);
  outline-offset: 2px;
  border-radius: 3px;
}

/*
 * Lit by the choice: this star, or any star after it, holds the checked
 * radio. Suspended while the pointer is previewing over the row, so the
 * preview below replaces the chosen fill rather than fighting it -- the two
 * sets of rules are disjoint by construction and never need to outrank each
 * other. The :enabled guard scopes both to a live form: on a readonly render
 * the pointer previews nothing and the chosen fill simply stays put.
 */
.vt-survey__scale-options:not(:has(.vt-survey__scale-option--star:hover input:enabled)) .vt-survey__scale-option--star:has(input:checked),
.vt-survey__scale-options:not(:has(.vt-survey__scale-option--star:hover input:enabled)) .vt-survey__scale-option--star:has(~ .vt-survey__scale-option--star input:checked) {
  color: var(--vt-gold-600);
}

/* Lit by the pointer: the same cumulative rule, read against :hover instead
 * of :checked. */
.vt-survey__scale-option--star:hover:has(input:enabled),
.vt-survey__scale-option--star:has(~ .vt-survey__scale-option--star:hover input:enabled) {
  color: var(--vt-gold-600);
}

/* Without :has() every rule above is dropped and the client cannot see which
 * score they picked -- which is a broken form, not a plainer one. This is the
 * one part of the fill a sibling combinator can still express on its own. */
@supports not selector(:has(*)) {
  .vt-survey__scale-option--star input:checked ~ .vt-survey__star {
    color: var(--vt-gold-600);
  }
}

.vt-survey__bool {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.vt-survey__bool-option {
  cursor: pointer;
}

/* Clipped, not removed -- the same treatment the star scale gives its radios,
   and for the same reason: the control stays in the tab order and in the
   accessibility tree, so the group is still operable by keyboard and still
   announced as a radiogroup. Only its appearance moves to the span. */
.vt-survey__bool-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The pill the client actually sees and clicks. */
.vt-survey__bool-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  padding: 11px 26px;
  border: 1px solid var(--vt-border-soft);
  border-radius: 10px;
  background: var(--vt-white);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--vt-text-secondary);
}

/* Hover is BLUE, and selected is the brand's orange -- two different colours
   for two different things, so a pointer resting on „Не" never looks like a
   choice already made.
   The inset shadow doubles the border's weight instead of thickening it: a
   1px→2px border would resize the pill and shuffle the row under the cursor. */
.vt-survey__bool-option:hover input:not(:disabled) + .vt-survey__bool-label {
  border-color: var(--vt-blue);
  box-shadow: inset 0 0 0 1px var(--vt-blue);
  color: var(--vt-blue-dark);
}

/* Hovering the one already chosen deepens ITS colour rather than turning it
   blue -- the answer has not changed by being pointed at. */
.vt-survey__bool-option:hover input:checked:not(:disabled) + .vt-survey__bool-label {
  border-color: var(--vt-action);
  box-shadow: inset 0 0 0 1px var(--vt-action);
  color: var(--vt-blue-dark);
}

/* Selected: the brand's own border and warm ground, and the text goes from
   secondary to full strength. Three signals rather than colour alone, so the
   choice is still legible without hue. */
.vt-survey__bool-option input:checked + .vt-survey__bool-label {
  border-color: var(--vt-action);
  background: var(--vt-surface-warm);
  color: var(--vt-blue-dark);
}

/* The clipped input cannot show a focus ring, so the pill wears it. */
.vt-survey__bool-option input:focus-visible + .vt-survey__bool-label {
  outline: 2px solid var(--vt-action);
  outline-offset: 2px;
}

/* „Преглед" and the builder canvas render this partial readonly. */
.vt-survey__bool-option input:disabled + .vt-survey__bool-label {
  cursor: default;
  opacity: .6;
}

.vt-survey__choice {
  display: flex;
  align-items: center;
  /* Wraps so the „Друго…" box can take a line of its own below the option it
     belongs to. */
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 8px;
  font-size: 14.5px;
  color: var(--vt-text);
  cursor: pointer;
}

.vt-survey__choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* „Друго…" appears only once its option is chosen (Konstantin, 2026-09-18),
   and it is the checkbox's own `:checked` that reveals it -- a sibling
   selector, no script. The box sits after the control inside the same label,
   which is what makes `~` reach it; move it out of the label and this stops
   working silently.
   Hiding it cannot strand a value: AnswerRecorder::fillChoices() attaches free
   text only to options that were actually selected, so text typed and then
   unchecked is dropped rather than stored against an answer nobody gave. */
.vt-survey__choice-freetext {
  display: none;
}

.vt-survey__choice input:checked ~ .vt-survey__choice-freetext {
  /* flex-basis:100% is what puts it on the line below rather than beside the
     label; the rest is .vt-survey__text's own sizing, so the box matches every
     other text field on the page instead of being a smaller relative of one. */
  display: block;
  flex-basis: 100%;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--vt-border-soft);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--vt-text);
  font-family: var(--vt-font);
}

.vt-survey__choice input:checked ~ .vt-survey__choice-freetext:focus-visible {
  outline: 2px solid var(--vt-action);
  outline-offset: 1px;
}

.vt-survey__text,
.vt-survey__textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--vt-border-soft);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--vt-text);
  font-family: var(--vt-font);
  resize: vertical;
}

.vt-survey-preview {
  padding: 22px;
}

/* ---------------------------------------------------------------------------
 * The public survey page (polls & survey plan, task 3) -- the shell around the
 * shared renderer above, and the two screens that replace it once a link is
 * answered or out of date.
 *
 * Every size, spacing and shadow value below is lifted verbatim from the
 * approved design canvas's „Анкета" and „Благодарим" screens (design/Анкета
 * Valeo Travel.dc.html). Colours are mapped to the existing --vt-* tokens; the
 * one construct that needed translating is the design system's --nv-grad-navy,
 * which is `linear-gradient(135deg, --nv-blue-800 0%, --nv-blue-700 100%)` --
 * both already mapped (--vt-blue-dark and --vt-blue), so the gradient is
 * rebuilt from them and no new token was added.
 * ------------------------------------------------------------------------- */

.vt-survey-page {
  min-height: 100vh;
  background: var(--vt-surface);
}

/* No ground of its own (Konstantin, 2026-09-18): the logo sits straight on the
   page. The white band and its hairline came from the design, where they
   separated the header from the photograph below it -- and that photograph is
   gone, so the band was dividing the page from nothing. */
.vt-survey-page__brand {
  display: flex;
  justify-content: center;
  padding: 26px 20px;
}

.vt-survey-page__logo {
  height: 58px;
  width: auto;
  display: block;
}

.vt-survey-page__main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 26px 20px 40px;
}

.vt-survey-page__narrow {
  max-width: 640px;
  margin: 0 auto;
  padding: 56px 20px 64px;
}

.vt-survey-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* The consent block: a card in the same language as a question group, because
 * it is one more thing the client has to read and act on, not a footnote. */
.vt-survey__consent {
  background: var(--vt-white);
  border: 1px solid var(--vt-border-soft);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
  padding: 22px;
}

.vt-survey__consent-title {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 20px;
  color: var(--vt-blue-dark);
}

.vt-survey__consent-body {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--vt-text-secondary);
}

.vt-survey__consent-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--vt-text-secondary);
}

.vt-survey__consent-check input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--vt-action);
  flex: none;
}

.vt-survey__submit {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 4px;
}

.vt-survey__submit-note {
  font-size: 13.5px;
  color: var(--vt-text-secondary);
}

/* The thank-you and expired screens share one card: they are the same kind of
 * message -- a full-page statement with one thing to do next -- and building
 * them from one set of rules is what keeps them from drifting apart visually
 * the way their copy must never drift apart in wording. */
.vt-survey-notice {
  background: var(--vt-white);
  border: 1px solid var(--vt-border-soft);
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .10);
  overflow: hidden;
  text-align: center;
}

.vt-survey-notice__head {
  background: linear-gradient(135deg, var(--vt-blue-dark) 0%, var(--vt-blue) 100%);
  padding: 40px 28px 34px;
  color: var(--vt-white);
}

/* The expired screen says "this is over", not "well done" -- so the same head,
 * in the calmer of the two navy tones rather than the celebratory gradient. */
.vt-survey-notice__head--quiet {
  background: var(--vt-blue-darker);
}

.vt-survey-notice__icon {
  width: 62px;
  height: 62px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .26);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--vt-white);
}

.vt-survey-notice__title {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  color: var(--vt-white);
}

.vt-survey-notice__lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .85);
}

.vt-survey-notice__body {
  padding: 30px 28px 34px;
}

.vt-survey-notice__text {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--vt-text-secondary);
}

.vt-survey-notice__contacts {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--vt-border-hairline);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  text-align: left;
  font-size: 14px;
  line-height: 1.6;
}

.vt-survey-notice__contacts dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--vt-text-faint);
  align-self: center;
}

.vt-survey-notice__contacts dd {
  margin: 0;
  color: var(--vt-text);
}

/* The 422 re-render's message list. Colours come from the --vt-danger pair in
   tokens.css, the same pair .vt-error (auth.css) and .vt-flash--error
   (admin.css) already use -- tokens.css is the only file that may define one. */
.vt-survey__errors {
  margin: 0 0 26px;
  padding: 16px 18px;
  border: 1px solid var(--vt-danger);
  border-radius: 10px;
  background: var(--vt-danger-surface);
  color: var(--vt-danger);
}

.vt-survey__errors-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
}

.vt-survey__errors-list {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.7;
}

/* ---------------------------------------------------------------------------
 * The landing page at / -- the survey shell above with a footer under it.
 *
 * Adds no colour, no radius and no shadow of its own: it is the same card on
 * the same background, and the only thing it needs that the /a/{token} screens
 * do not is somewhere for the footer to sit. A landing page is short, so
 * without the flex column the footer would stop halfway up a desktop viewport
 * with --vt-surface below it, which reads as a page that failed to finish
 * loading rather than as a page that ended.
 * ------------------------------------------------------------------------- */

.vt-survey-page--home {
  display: flex;
  flex-direction: column;
}

/* Takes the slack, so the footer is pushed to the bottom on a short page and
   simply follows the content on a long one. */
.vt-survey-page--home .vt-survey-page__narrow {
  flex: 1 0 auto;
}

.vt-survey-page__footer {
  border-top: 1px solid var(--vt-border-hairline);
  background: var(--vt-white);
  padding: 22px 20px 26px;
  text-align: center;
}

.vt-survey-page__footer-line {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--vt-text-secondary);
}

.vt-survey-page__footer-line--faint {
  color: var(--vt-text-faint);
}

/* ---------------------------------------------------------------------------
 * The thank-you screen.
 *
 * „must look more like the second image" (Konstantin, 2026-09-15): the navy
 * card head is gone and the page speaks on its own ground. A statement, not a
 * card -- there is nothing on this screen to act on except one optional link,
 * so a bordered box around it only made the page look like it wanted
 * something.
 *
 * The green is --vt-green-700, the same token the „Активен" template badge
 * uses; the tick is the only place on the public side that says „done", and it
 * should not invent a colour to say it.
 * ------------------------------------------------------------------------- */

.vt-thanks {
  text-align: center;
  max-width: 560px;
}

/* An outlined ring rather than a filled disc: it sits on the page's own
   background, and a solid block of colour there reads as a button. */
.vt-thanks__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  border: 2px solid var(--vt-green-700);
  border-radius: 100px;
  color: var(--vt-green-700);
}

.vt-thanks__title {
  margin: 0 0 12px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--vt-blue-dark);
}

.vt-thanks__lead {
  margin: 0 auto;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--vt-text-secondary);
}

/* Quieter than the lead: a fact about the client's entry, not a thing to do. */
.vt-thanks__note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--vt-text-faint);
}

/* The line that carries the ask, so the button under it is not asking cold. */
/* The draw's terms, above the step that asks for the review. Quieter than the
   step below it: it is a statement of fact, not the thing being asked for. */
.vt-thanks__terms {
  margin: 22px auto 0;
  max-width: 46ch;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--vt-text-secondary);
}

.vt-thanks__step {
  margin: 34px auto 16px;
  max-width: 34ch;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--vt-blue-dark);
}

/* White with its own border, not the orange primary: Google's mark carries
   this button, and a brand logo on a saturated ground is neither theirs nor
   ours. */
.vt-thanks__google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  padding: 14px 22px;
  border: 1px solid var(--vt-border);
  border-radius: 10px;
  background: var(--vt-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  font-family: var(--vt-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--vt-text);
  text-decoration: none;
}

.vt-thanks__google:hover,
.vt-thanks__google:focus-visible {
  border-color: var(--vt-blue);
  background: var(--vt-surface);
}

.vt-thanks__g {
  flex: none;
}

/* ---------------------------------------------------------------------------
 * The public page's furniture: brief, progress and prize.
 *
 * Sizes, spacing and colours are the approved design's (design/Анкета Valeo
 * Travel.dc.html), with its --nv-* values mapped onto the --vt-* tokens
 * tokens.css already defines -- the same mapping every other screen here uses.
 *
 * None of it is in survey/_survey.html.twig: the builder's canvas renders that
 * partial, and a prize panel around an operator's editing surface is furniture
 * belonging to somebody else's page.
 * ------------------------------------------------------------------------- */

.vt-survey__wrap {
  /* Kept from when this wrap also sat inside the hero's column flex, where
     `margin: 0 auto` cancelled the stretch and the box shrank to fit its own
     text. Nothing on the page is a flex item now, so it changes nothing --
     but it is what a full-width wrap should say, and the next flex parent
     would find it already correct. */
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* The page's first card. It used to continue the hero's, which is where its
   flat top corners came from; with the band gone it rounds on all four. */
.vt-survey-brief {
  background: var(--vt-white);
  border-radius: 16px;
  padding: 26px 34px 30px;
  box-shadow: 0 6px 18px rgba(0, 20, 45, .06);
}

.vt-survey-brief__title {
  margin: 16px 0 12px;
  text-align: center;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  color: var(--vt-blue-dark);
}

.vt-survey-brief__text {
  margin: 0 0 10px;
  max-width: 76ch;
  font-size: 16px;
  line-height: 1.85;
  color: var(--vt-text-secondary);
}

.vt-survey-brief__text strong {
  color: var(--vt-blue-dark);
}

/* auto-fit rather than a fixed count: „Период" is not drawn (nothing records
   the travel dates), so the row has to look deliberate at two boxes as well as
   three. */
.vt-survey-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
  margin-top: 22px;
}

.vt-survey-facts__item {
  border: 1px solid var(--vt-border);
  border-radius: 10px;
  padding: 14px 16px;
}

.vt-survey-facts__label {
  margin-bottom: 3px;
  font-size: 12.5px;
  color: var(--vt-text-faint);
}

.vt-survey-facts__value {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--vt-blue-dark);
  font-variant-numeric: tabular-nums;
}

/* Sticky, so „14 от 14" is reachable without scrolling back up to find it. */
.vt-survey-progress {
  position: sticky;
  top: 0;
  z-index: 200;
  margin-top: 18px;
  background: var(--vt-white);
  border-bottom: 1px solid var(--vt-border-hairline);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
}

.vt-survey-progress__wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.vt-survey-progress__track {
  flex: 1;
  min-width: 0;
  height: 6px;
  border-radius: 100px;
  background: var(--vt-border-hairline);
  overflow: hidden;
}

.vt-survey-progress__bar {
  height: 100%;
  border-radius: 100px;
  background: var(--vt-action);
  transition: width .2s ease;
}

.vt-survey-progress__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--vt-text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The prize panel: the illustration beside the text, as the design has it.
   auto-fit with a floor, so it is one column on a phone and one column again
   when the raffle has no photo to put in the other. */
.vt-survey-prize--illustrated {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
  align-items: center;
  text-align: left;
}

/* A fixed box the photo fills: operators upload portrait phone shots and
   landscape stock alike, and a panel whose height follows the upload would
   push the first question off the screen for one and not the other. */
.vt-survey-prize__art {
  height: 220px;
  background: var(--vt-white);
  border: 1px solid var(--vt-border-hairline);
  border-radius: 12px;
  overflow: hidden;
}

.vt-survey-prize__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The text half keeps the centring the whole panel used to have. */
.vt-survey-prize--illustrated .vt-survey-prize__body-col {
  text-align: center;
}

.vt-survey-prize {
  margin-top: 26px;
  background: var(--vt-surface-warm);
  border: 1px solid var(--vt-gold-400);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  /* The same shadow the brief card above it casts, to the value
     (Konstantin, 2026-09-18) -- two cards on one page sitting at two different
     heights is a difference the reader has to account for, and there is
     nothing here for it to mean. The gold border stays: that is what says this
     block is the prize and not more of the survey. */
  box-shadow: 0 6px 18px rgba(0, 20, 45, .06);
}

/* The „И" joining the subject card to the prize panel. Centred on the page
   rather than inside either card -- it belongs to neither, which is the whole
   point of it. Sized with the prize title so the eye reads the two as one
   sentence running across the gap. */
.vt-survey__join {
  margin: 20px 0 -6px;
  text-align: center;
  color: var(--vt-blue-dark);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

/* The badge, back to the design's own values (2026-09-18). */
.vt-survey-prize__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 100px;
  padding: 7px 16px;
  background: var(--vt-gold-400);
  color: var(--vt-blue-dark);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* The hairline between the draw date and the rule of the draw. A gold rule at
   half strength, so it separates the two without reading as a second border
   inside a panel that already has one. */
.vt-survey-prize__rule {
  height: 1px;
  margin: 18px 0 14px;
  background: var(--vt-gold-400);
  opacity: .5;
}

.vt-survey-prize__terms {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--vt-text-secondary);
}

.vt-survey-prize__title {
  margin: 14px 0 4px;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.25;
  color: var(--vt-blue-dark);
}

.vt-survey-prize__body {
  margin: 0 auto 16px;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--vt-text-secondary);
}

.vt-survey-prize__draw {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--vt-gold-400);
  border-radius: 10px;
  padding: 12px 16px;
  background: var(--vt-white);
  font-size: 15px;
  color: var(--vt-text);
}

@media (max-width: 640px) {
  .vt-survey-brief { padding: 8px 20px 24px; }
  .vt-survey-prize__title { font-size: 21px; }
}