/* ======================================================================
   Feedback page
   ======================================================================
   Page-scoped stylesheet, loaded only by resources/views/feedback.blade.php
   after css/style.css - the same arrangement css/reviews.css already uses,
   so the shared sheet does not grow for one page and nothing here can reach
   the other 90.

   Every colour, radius and font below comes from the tokens in style.css
   :root. No literal font family (see the fonts note in project memory) and
   no new palette: this page is meant to look like the rest of the site, not
   like a form bolted onto it.
*/

.feedback-page {
  background: var(--rkt-cream);
  padding: 70px 0 90px;
}

.feedback-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 32px;
  align-items: start;
}

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

.feedback-card {
  background: #fff;
  border: 1px solid var(--rkt-border);
  border-radius: var(--rkt-radius-lg);
  box-shadow: 0 24px 50px rgba(28, 21, 18, .10);
  overflow: hidden;
}

.feedback-card-head {
  padding: 26px 32px 22px;
  border-bottom: 1px solid var(--rkt-border);
  background: linear-gradient(180deg, var(--rkt-maroon-tint) 0%, #fff 100%);
}

.feedback-card-head h6 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rkt-gold);
  margin: 0 0 6px;
}

.feedback-card-head h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: var(--rkt-charcoal);
  margin: 0 0 6px;
}

.feedback-card-head p {
  font-size: 15px;
  color: var(--rkt-muted);
  margin: 0;
}

.feedback-card-body {
  padding: 26px 32px 32px;
}

/* ----------------------------------------------------------------- fields */

.feedback-field {
  margin-bottom: 20px;
}

.feedback-field > label,
.feedback-legend {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rkt-muted);
  margin-bottom: 8px;
}

.feedback-field input[type="text"],
.feedback-field textarea {
  width: 100%;
  border: 1px solid var(--rkt-border);
  border-radius: var(--rkt-radius-sm);
  background: #fff;
  padding: 13px 16px;
  /* 16px is the smallest size iOS Safari will not zoom into on focus. */
  font-size: 16px;
  font-family: var(--font-body);
  color: var(--rkt-charcoal);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.feedback-field textarea {
  min-height: 130px;
  resize: vertical;
}

.feedback-field input[type="text"]::placeholder,
.feedback-field textarea::placeholder {
  color: #b3a99d;
}

.feedback-field input[type="text"]:focus,
.feedback-field textarea:focus {
  outline: none;
  border-color: var(--rkt-gold);
  box-shadow: 0 0 0 3px rgba(199, 154, 63, .18);
}

/* ------------------------------------------------------------ star rating */

/* row-reverse plus the general sibling combinator is what makes hovering a
   star light every star to its left without any JavaScript. The inputs come
   5..1 in the markup for the same reason - do not reorder them. */
.feedback-stars {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 8px;
}

.feedback-stars input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.feedback-stars label {
  font-size: 30px;
  line-height: 1;
  color: #e3dbd0;
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}

.feedback-stars label:hover,
.feedback-stars label:hover ~ label,
.feedback-stars input:checked ~ label {
  color: var(--rkt-gold);
}

.feedback-stars label:hover {
  transform: scale(1.1);
}

/* Keyboard users get a visible ring; the input itself is off-screen. */
.feedback-stars input:focus-visible + label {
  outline: 2px solid var(--rkt-maroon);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------- captcha */

.feedback-captcha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}

.feedback-captcha-image {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.feedback-captcha-image img {
  display: block;
  border: 1px solid var(--rkt-border);
  border-radius: var(--rkt-radius-sm);
  background: #fff;
}

.feedback-captcha-refresh {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--rkt-maroon);
  cursor: pointer;
  text-align: left;
}

.feedback-captcha-refresh:hover {
  color: var(--rkt-maroon-dark);
  text-decoration: underline;
}

.feedback-captcha-input {
  flex: 1 1 180px;
  min-width: 0;
}

/* ---------------------------------------------------------------- submit */

.feedback-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 26px;
  border: none;
  border-radius: var(--rkt-radius-sm);
  background: var(--rkt-maroon);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  transition: background-color .2s ease, transform .2s ease;
}

.feedback-submit:hover {
  background: var(--rkt-maroon-dark);
  color: #fff;
  transform: translateY(-2px);
}

/* ------------------------------------------------------------ aside panel */

.feedback-aside {
  display: grid;
  gap: 22px;
  position: sticky;
  top: 24px;
}

.feedback-visual {
  border-radius: var(--rkt-radius-lg);
  overflow: hidden;
  border: 1px solid var(--rkt-border);
  box-shadow: 0 20px 40px rgba(28, 21, 18, .10);
  background: #fff;
}

.feedback-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.feedback-note {
  background: #fff;
  border: 1px solid var(--rkt-border);
  border-left: 4px solid var(--rkt-gold);
  border-radius: 0 var(--rkt-radius-md) var(--rkt-radius-md) 0;
  padding: 22px 24px;
}

.feedback-note h5 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--rkt-charcoal);
  margin: 0 0 10px;
}

.feedback-note ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.feedback-note li {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--rkt-muted);
}

.feedback-note li i {
  color: var(--rkt-gold);
  font-size: 15px;
  line-height: 1.6;
}

.feedback-note-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--rkt-maroon);
  text-decoration: none;
}

.feedback-note-link:hover {
  color: var(--rkt-maroon-dark);
  gap: 12px;
}

/* --------------------------------------------------------------- errors */

.feedback-errors {
  margin: 0 0 22px;
  padding: 14px 18px;
  border: 1px solid var(--rkt-maroon);
  border-radius: var(--rkt-radius-sm);
  background: var(--rkt-maroon-tint);
  color: var(--rkt-maroon-dark);
}

.feedback-errors p {
  font-weight: 700;
  font-size: 14.5px;
  margin: 0 0 6px;
}

.feedback-errors ul {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 991.98px) {
  .feedback-layout {
    grid-template-columns: 1fr;
  }

  .feedback-aside {
    position: static;
  }

  /* The illustration is decoration; on a narrow screen it pushes the form
     below the fold for no benefit. The contact panel stays. */
  .feedback-visual {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .feedback-page {
    padding: 46px 0 64px;
  }

  .feedback-card-head,
  .feedback-card-body {
    padding-left: 20px;
    padding-right: 20px;
  }

  .feedback-stars label {
    font-size: 27px;
  }

  .feedback-captcha {
    flex-direction: column;
    align-items: stretch;
  }
}