/* ============================================================
   SNS Valley View — Guest feedback form (public)

   Not a redesign and not a new visual language: .overline, the display
   h1, .btn and booking.css's .field vocabulary are reused exactly as the
   admin panel reuses them. Everything below is this page's own layout and
   the two controls the .field vocabulary never had — a textarea and a
   radio group.
   ============================================================ */
.feedback {
  padding: 120px var(--pad-x) 140px;
  max-width: 560px;
  margin: 0 auto;
}

.feedback__title {
  margin: 12px 0 0;
  font-family: var(--f-display);
  font-size: 44px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--c-cream);
}

.feedback__lede {
  margin: 20px 0 0;
  max-width: 460px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-cream-55);
}

/* The thank-you sits alone on the page where the form was, so it carries
   the extra breathing room the form's first field would have provided. */
.feedback__lede--sent { margin-bottom: 36px; }

.feedback__error {
  margin: 28px 0 0;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--c-cream);
  background: var(--c-bg-card);
  border: 1px solid var(--c-gold-line);
}

/* 2px, the joined-field spacing booking.css composed the .field set with
   — not the admin panel's 16px. This is a guest-facing form on the same
   page furniture as the design's own booking form, so it reads the way
   that one does. */
.feedback__form {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 36px;
}

.feedback__form .btn--solid {
  margin-top: 24px;
  align-self: flex-start;
}

/* A textarea is the one control booking.css's .field never had. Inherits
   .field__input for colour, font and background; only the things a
   multi-line control needs are set here. resize is vertical-only: a
   horizontally resizable box can be dragged wider than its own field,
   which looks broken. */
.feedback__textarea {
  min-height: 150px;
  line-height: 1.6;
  resize: vertical;
}

/* A <fieldset> dressed to match a .field: same ground, same hairline, same
   padding, since the browser's own fieldset chrome (a 2px groove border
   and asymmetric padding) belongs to no design system at all. */
.feedback__rating {
  margin: 0;
  padding: 16px 24px;
  background: var(--c-bg-field);
  border: 1px solid var(--c-hair);
}
.feedback__rating legend {
  padding: 0;
  /* A <legend> is not laid out like a normal child — it sits in the
     border, which is exactly where a .field__label should not be. Taking
     it out of that slot puts the label where every other field's label
     is. */
  float: left;
  width: 100%;
}

/* A grid, not a wrapping row: five options of unequal word length wrap
   into a ragged 4 + 1 that reads as a mistake. Fixed tracks put them in
   aligned columns at whatever width fits, and the leftovers line up under
   the ones above them. */
.feedback__rating-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 16px;
  /* Clears the floated legend above. */
  clear: both;
  padding-top: 12px;
}

.feedback__rating-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* accent-color paints the native radio's selected dot in the site's one
   accent instead of the browser's blue, without replacing the control —
   a custom-drawn radio would cost the keyboard and screen-reader
   behaviour the native one already has. */
.feedback__rating-option input {
  accent-color: var(--c-gold);
  /* Without this the browser draws a LIGHT-mode radio — a white disc with
     a grey ring — on a #1A1A1A field, which is the brightest thing on the
     page and lands squarely on the primary CTA's visual weight. Scoped to
     these controls rather than set on :root: a global color-scheme would
     restyle every scrollbar and form control on the site, which is a
     design change nobody asked for. */
  color-scheme: dark;
  width: 16px;
  height: 16px;
  margin: 0;
}

.feedback__rating-label {
  font-size: 13px;
  color: var(--c-cream-55);
}
.feedback__rating-option input:checked + .feedback__rating-label { color: var(--c-cream); }

/* The honeypot (web/templates/feedback.templ). Off-screen rather than
   display:none on purpose — see that file's doc comment. Nothing here is
   ever seen, so it carries no design decision. */
.feedback__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 680px) {
  .feedback { padding: 88px var(--pad-x) 96px; }
  .feedback__title { font-size: 36px; }
  .feedback__form .btn--solid { width: 100%; align-self: stretch; }

  /* One rating per line at phone width: five options in a row wrap into
     an uneven two-line block whose second row reads as a separate group.
     A column also gives each radio a full-width tap target. */
  .feedback__rating-options { grid-template-columns: 1fr; gap: 4px; }
  .feedback__rating-option { min-height: 44px; }
}