/* ==========================================================================
   Mantis #102 - online complaint form (/complaints)

   Every rule is scoped to .complaints-wrap. The signed-off prototype was a
   standalone page, so it carried `*`, `body` and `h1` resets that would have
   reflowed the entire site. Its custom properties are prefixed --cmp-* so they
   cannot shadow the site's own variables inside the wrapper.
   ========================================================================== */

.complaints-wrap {
  /* Matches contact-us, measured rather than assumed: its labels and body copy
     compute to "Fabriga regular" while its form CONTROLS use the Medium stack.
     Medium is the heavier face, so putting it on labels is what made this read
     bolder than contact-us. Controls and the button set Medium explicitly
     below - font-family is not inherited by form elements. */
  font-family: Fabriga regular, Lato, sans-serif;

  --cmp-primary: #1a5f9e;
  --cmp-primary-hover: #144a7c;
  /* the submit button is its own colour so it does not drag the focus ring,
     which stays on the site's blue accent, green with it */
  --cmp-button: #2c997e;
  --cmp-button-hover: #25826b;
  --cmp-border: #d1d5db;
  --cmp-text: #1e293b;
  --cmp-muted: #64748b;
  --cmp-error: #dc2626;
  --cmp-radius: 8px;
  --cmp-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.complaints-wrap .complaints-title {
  /* Matched to the "Contact Us" h1: Fabriga Medium at weight 400 and 1.8em,
     which against the site's 17px base is the 30.6px that heading computes to.
     The face carries it - no bold request anywhere, so nothing is synthesised. */
  font-family: Fabriga Medium, Fabriga regular, Lato, sans-serif;
  font-size: 1.8em;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  padding-top: 2.5rem;
  margin: 0 0 1.75rem;
  color: var(--cmp-text);
}

.complaints-wrap .complaints-intro {
  margin-bottom: 1.75rem;
  color: var(--cmp-text);
  line-height: 1.6;
}

.complaints-wrap .complaints-intro p { margin: 0 0 0.75rem; }
.complaints-wrap .complaints-intro p:last-child { margin-bottom: 0; }

.complaints-wrap form {
  background: #fff;
  padding: 1.5rem;
  border-radius: var(--cmp-radius);
  box-shadow: var(--cmp-shadow);
  border: 1px solid var(--cmp-border);
}

.complaints-wrap .form-group { margin-bottom: 1.25rem; }

.complaints-wrap label {
  display: block;
  font-size: 1.0625rem; /* 17px */
  font-weight: normal;
  margin-bottom: 0.375rem;
  color: var(--cmp-text);
}

.complaints-wrap label .optional {
  /* both Fabriga faces are declared normal, so weight cannot set this back from
     the label - the muted colour is what distinguishes it */
  color: var(--cmp-muted);
}

/* .form-group is in these selectors to out-specify the theme's
   `.main-content select { width: 75% }`, which otherwise leaves the two
   dropdowns visibly short of the text inputs beside them. Specificity
   rather than !important, so a later brand skin can still override. */
.complaints-wrap .form-group input[type="text"],
.complaints-wrap .form-group input[type="email"],
.complaints-wrap .form-group input[type="tel"],
.complaints-wrap .form-group input[type="date"],
.complaints-wrap .form-group select,
.complaints-wrap .form-group textarea {
  box-sizing: border-box;
  /* Regular, not the Medium stack contact-us puts on its controls: those render
     at 13.6px where Medium is fine, and these are 16px, where it reads heavy. */
  font-family: Fabriga regular, Lato, sans-serif;
  width: 100%;
  max-width: 100%;
  padding: 0.75rem 0.875rem;
  font-size: 1rem;
  border: 1px solid var(--cmp-border);
  border-radius: var(--cmp-radius);
  background: #fff;
  color: var(--cmp-text);
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

/* Placeholder text, in all three shapes it takes here.

   A text input's ::placeholder is already drawn light by the browser, but a
   select renders its empty option, and a date input its dd/mm/yyyy, in the full
   text colour - so those read as values rather than prompts. Both selects are
   required and their prompt option has value="", so :invalid matches exactly
   while nothing is chosen; the date is optional, meaning empty is still valid,
   so complaints.js toggles .is-empty on it instead. */
.complaints-wrap .form-group input::placeholder,
.complaints-wrap .form-group textarea::placeholder,
.complaints-wrap .form-group select:required:invalid,
.complaints-wrap .form-group input[type="date"].is-empty {
  color: var(--cmp-muted);
  opacity: 1; /* Firefox dims placeholders by default */
}

/* the options in the open dropdown are not placeholders - keep them readable */
.complaints-wrap .form-group select option { color: var(--cmp-text); }

.complaints-wrap input:focus,
.complaints-wrap select:focus,
.complaints-wrap textarea:focus {
  outline: none;
  border-color: var(--cmp-primary);
  box-shadow: 0 0 0 3px rgba(26, 95, 158, 0.15);
}

.complaints-wrap select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}

.complaints-wrap textarea {
  min-height: 140px;
  resize: vertical;
}

.complaints-wrap .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* the only breakpoint: side-by-side pairs once there is room */
@media (min-width: 480px) {
  .complaints-wrap .row.two-col { grid-template-columns: 1fr 1fr; }
}

/* the form is a block container, so `margin-left:auto` on a fitted
   inline-block is what pushes it to the right edge */
.complaints-wrap .btn-submit {
  display: block;
  font-family: Fabriga Medium, Fabriga regular, Lato, sans-serif;
  width: auto;
  margin-left: auto;
  margin-right: 0;
  min-width: 220px;
  padding: 0.875rem 2.5rem;
  font-size: 1rem;
  font-weight: normal;
  color: #fff;
  background: var(--cmp-button);
  border: none;
  border-radius: var(--cmp-radius);
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 0.5rem;
}

/* on a phone a stranded auto-width button looks broken - go full width there */
@media (max-width: 479px) {
  .complaints-wrap .btn-submit {
    display: block;
    width: 100%;
    min-width: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.complaints-wrap .btn-submit:hover { background: var(--cmp-button-hover); }

.complaints-wrap .btn-submit:disabled,
.complaints-wrap .btn-submit[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

/* per-field errors, revealed by .has-error which complaints.js toggles */
.complaints-wrap .error-message {
  color: var(--cmp-error);
  font-size: 0.8125rem;
  margin-top: 0.25rem;
  display: none;
}

.complaints-wrap .form-group.has-error input,
.complaints-wrap .form-group.has-error select,
.complaints-wrap .form-group.has-error textarea { border-color: var(--cmp-error); }

.complaints-wrap .form-group.has-error .error-message { display: block; }

/* shown only while Bodyshop is the selected department; complaints.js toggles it */
.complaints-wrap .branch-note {
  display: none;
  font-size: 0.8125rem;
  color: var(--cmp-muted);
  margin-top: 0.375rem;
}

/* form-level error, e.g. a rejected Turnstile token */
.complaints-wrap #complaint-error {
  color: var(--cmp-error);
  font-size: 0.875rem;
  font-weight: normal;
  margin-bottom: 0.75rem;
}

/* Success state */
.complaints-wrap .success-message {
  display: none;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  padding: 1.25rem;
  border-radius: var(--cmp-radius);
  text-align: center;
  margin-top: 1rem;
}

.complaints-wrap .success-message.visible { display: block; }

.complaints-wrap .success-message h2 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.complaints-wrap .required::after {
  content: " *";
  color: var(--cmp-error);
}

/* key for the asterisk, so the marker is explained rather than assumed */
.complaints-wrap .required-key {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--cmp-muted);
}

.complaints-wrap .required-key .req {
  color: var(--cmp-error);
  font-weight: bold;
}

.complaints-wrap #turnstile-widget { margin-bottom: 1rem; }

/* honeypot: off-screen rather than display:none, which some bots skip */
.complaints-wrap .hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}