/*
 * Feedback questionnaire — front-end.
 *
 * Picks up the language the rest of the plugin already speaks: white cards on
 * a 1px #e5e7eb border with an 8px radius, brand yellow #ffdd00 for anything
 * the visitor acts on, and the yellow underline the theme uses under headings.
 *
 * The audience is 13–20 and arrives from an SMS or e-mail link, so this is
 * built phone-first: every option is a full tap target of at least 44px, the
 * whole label is clickable, and nothing depends on a hover state.
 *
 * Scoped under .bf-wrap like every other plugin stylesheet, so it can never
 * reach into the host theme.
 */

/* The shared base stylesheet does not set this, so min-height and padding were
   adding up: a 44px target became a 64px one. */
.bf-wrap .bf-feedback,
.bf-wrap .bf-feedback * { box-sizing: border-box; }

.bf-wrap .bf-feedback {
  --bf-yellow: #ffdd00;
  --bf-yellow-soft: #fff8cc;
  --bf-line: #e5e7eb;
  --bf-ink: #1a1a1a;
  --bf-muted: #6b7280;
  --bf-danger: #b32d2e;

  max-width: 44rem;
  margin: 0 auto;
}

/* ---- Head ------------------------------------------------------------- */

.bf-wrap .bf-fb-eyebrow {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bf-muted);
  margin: 0 0 .35rem;
}

.bf-wrap .bf-fb-title {
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem);
  line-height: 1.25;
  font-weight: 700;
  color: var(--bf-ink);
  margin: 0 0 .2rem;
}

.bf-wrap .bf-fb-sub {
  color: var(--bf-muted);
  margin: 0 0 1.25rem;
}

.bf-wrap .bf-fb-privacy {
  border-left: 4px solid var(--bf-yellow);
  background: #fafafa;
  border-radius: 0 8px 8px 0;
  padding: .85rem 1rem;
  margin: 0 0 1.5rem;
  font-size: .92rem;
  line-height: 1.5;
  color: #374151;
}
.bf-wrap .bf-fb-privacy strong { color: var(--bf-ink); }

/* ---- Progress ---------------------------------------------------------- */

/* Progressive enhancement: without JS the bar simply stays at its start value
   and the form works exactly the same. */
.bf-wrap .bf-fb-progress {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  padding: .6rem 0 .7rem;
  margin-bottom: .25rem;
  border-bottom: 1px solid var(--bf-line);
}
.bf-wrap .bf-fb-progress__label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--bf-muted);
  margin: 0 0 .35rem;
}
.bf-wrap .bf-fb-progress__track {
  height: 6px;
  border-radius: 999px;
  background: var(--bf-line);
  overflow: hidden;
}
.bf-wrap .bf-fb-progress__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--bf-yellow);
  transition: width .25s ease;
}

/* ---- Sections ---------------------------------------------------------- */

.bf-wrap .bf-fb-section {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bf-ink);
  margin: 2rem 0 .9rem;
  padding-bottom: .3rem;
  border-bottom: 3px solid var(--bf-yellow);
  display: inline-block;
}

/* ---- Question card ----------------------------------------------------- */

.bf-wrap .bf-fb-q {
  border: 1px solid var(--bf-line);
  border-radius: 8px;
  background: #fff;
  padding: 1rem 1.1rem 1.1rem;
  margin: 0 0 .75rem;
  scroll-margin-top: 5rem;
}

.bf-wrap .bf-fb-q--missing {
  border-color: var(--bf-danger);
  box-shadow: inset 3px 0 0 var(--bf-danger);
}

.bf-wrap .bf-fb-q__legend {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bf-ink);
  padding: 0;
  margin: 0 0 .8rem;
  width: 100%;
}

.bf-wrap .bf-fb-num {
  flex: 0 0 auto;
  min-width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  background: var(--bf-yellow-soft);
  color: var(--bf-ink);
  font-size: .82rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: .1rem;
}

.bf-wrap .bf-fb-optional {
  font-weight: 400;
  font-size: .82rem;
  color: var(--bf-muted);
  white-space: nowrap;
}

.bf-wrap .bf-fb-hint {
  font-size: .85rem;
  color: var(--bf-danger);
  font-weight: 600;
  margin: .6rem 0 0;
}

/* ---- Options ----------------------------------------------------------- */

/* A grid, not a flex row: with flex the last option of an uneven set stretches
   to fill the line, which made "Nein" the biggest button on the screen. Grid
   columns are fixed for the whole question, so every option is the same width
   and a short last row simply keeps that width.

   One per row on a phone — full width, unmistakable. From 30rem the columns
   auto-fit, so five options sit in one row when there is space and wrap into
   even rows when there is not. */
.bf-wrap .bf-fb-opts {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
}

@media (min-width: 30rem) {
  .bf-wrap .bf-fb-opts { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
}

/* The label is a one-cell grid so the box fills it without a percentage height.
   A percentage height here resolved against an auto-height parent and made the
   text wrap inside a box that had plenty of room. */
.bf-wrap .bf-fb-opt { margin: 0; display: grid; }

.bf-wrap .bf-fb-opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.bf-wrap .bf-fb-opt__box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .55rem .9rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: var(--bf-ink);
  text-align: center;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, transform .06s ease;
}

.bf-wrap .bf-fb-opt input:checked + .bf-fb-opt__box {
  background: var(--bf-yellow);
  border-color: var(--bf-yellow);
  font-weight: 700;
}

.bf-wrap .bf-fb-opt input:focus-visible + .bf-fb-opt__box {
  outline: 0;
  border-color: var(--bf-ink);
  box-shadow: 0 0 0 3px rgba(255, 221, 0, .45);
}

.bf-wrap .bf-fb-opt__box:active { transform: scale(.985); }

@media (hover: hover) {
  .bf-wrap .bf-fb-opt input:not(:checked) + .bf-fb-opt__box:hover { border-color: #9ca3af; background: #fcfcfc; }
}

/* ---- Free text --------------------------------------------------------- */

.bf-wrap .bf-fb-text {
  width: 100%;
  box-sizing: border-box;
  min-height: 6.5rem;
  padding: .7rem .8rem;
  font: inherit;
  color: var(--bf-ink);
  border: 1px solid #ced4da;
  border-radius: 8px;
  resize: vertical;
}
.bf-wrap .bf-fb-text:focus {
  outline: 0;
  border-color: var(--bf-yellow);
  box-shadow: 0 0 0 3px rgba(255, 221, 0, .3);
}

/* ---- Submit ------------------------------------------------------------ */

.bf-wrap .bf-fb-submit {
  display: block;
  width: 100%;
  margin: 1.5rem 0 0;
  padding: .85rem 1.25rem;
  font: inherit;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--bf-ink);
  background: var(--bf-yellow);
  border: 1px solid var(--bf-yellow);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .12s ease;
}
.bf-wrap .bf-fb-submit:hover { background: #eccb00; }
.bf-wrap .bf-fb-submit:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(255, 221, 0, .45); }

@media (min-width: 30rem) {
  .bf-wrap .bf-fb-submit { width: auto; min-width: 16rem; }
}

/* ---- Messages ---------------------------------------------------------- */

.bf-wrap .bf-fb-msg {
  border: 1px solid var(--bf-line);
  border-left-width: 4px;
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.1rem;
  margin: 0 0 1.25rem;
  line-height: 1.5;
}
.bf-wrap .bf-fb-msg--error   { border-left-color: var(--bf-danger); background: #fdf3f3; }
.bf-wrap .bf-fb-msg--info    { border-left-color: #9ca3af; background: #fafafa; }
.bf-wrap .bf-fb-msg--test    { border-left-color: #1d4ed8; background: #eef2ff; }
.bf-wrap .bf-fb-msg--success { border-left-color: var(--bf-yellow); background: #fffdf0; }

.bf-wrap .bf-fb-done { text-align: center; padding: 2.5rem 1.25rem; }
.bf-wrap .bf-fb-done__mark {
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 1rem;
  border-radius: 999px;
  background: var(--bf-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
}
.bf-wrap .bf-fb-done__title { font-size: 1.4rem; font-weight: 700; margin: 0 0 .4rem; color: var(--bf-ink); }
.bf-wrap .bf-fb-done__text  { color: var(--bf-muted); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .bf-wrap .bf-fb-progress__fill,
  .bf-wrap .bf-fb-opt__box { transition: none; }
}