/* ── Form fields ── */
.form-label {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #45483e;
  margin-bottom: 0.5rem;
}

.form-input {
  display: block;
  width: 100%;
  background-color: #ffffff;
  border: 1.5px solid #c5c8bb;
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #1b1c19;
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.form-input::placeholder {
  color: #b0b3a8;
}

.form-input:hover {
  border-color: #75786d;
}

.form-input:focus {
  border-color: #33441f;
  box-shadow: 0 0 0 3px rgba(51, 68, 31, 0.10);
}

.form-input:invalid:not(:placeholder-shown) {
  border-color: #ba1a1a;
  box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.08);
}

select.form-input {
  cursor: pointer;
}

textarea.form-input {
  min-height: 7rem;
}

#submit-btn {
  transition: background-color 200ms ease, transform 120ms ease, box-shadow 200ms ease;
}

#submit-btn:focus-visible {
  outline: 2px solid #33441f;
  outline-offset: 3px;
}

/* ── Green form box overrides ── */
.form-terracotta .form-label {
  color: rgba(212, 234, 182, 0.65);
  font-size: 10px;
  letter-spacing: 0.18em;
}

.form-terracotta .form-label .text-error {
  color: #ffc4bb;
}

.form-terracotta .form-input {
  background-color: rgba(250, 249, 244, 0.06);
  border: 1px solid rgba(212, 234, 182, 0.22);
  color: #faf9f4;
}

.form-terracotta .form-input::placeholder {
  color: rgba(212, 234, 182, 0.35);
}

.form-terracotta .form-input:hover {
  border-color: rgba(212, 234, 182, 0.45);
  background-color: rgba(250, 249, 244, 0.10);
}

.form-terracotta .form-input:focus {
  border-color: rgba(212, 234, 182, 0.55);
  box-shadow: 0 0 0 3px rgba(212, 234, 182, 0.08);
}

.form-terracotta .form-input:invalid:not(:placeholder-shown) {
  border-color: rgba(255, 180, 170, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 180, 170, 0.10);
}

.form-terracotta select.form-input:required:invalid {
  color: rgba(212, 234, 182, 0.35);
}

.form-terracotta select.form-input option {
  background-color: #4a5c34;
  color: #faf9f4;
}

.form-terracotta #form-error {
  background-color: rgba(255, 218, 214, 0.12);
  border-color: rgba(255, 180, 170, 0.30);
}

.form-terracotta #form-error p {
  color: #ffc4bb;
}

.form-terracotta #form-success {
  background-color: rgba(212, 234, 182, 0.15);
  border-color: rgba(212, 234, 182, 0.35);
}

.form-terracotta #form-success p {
  color: #d4eab6;
}

/* ── Light form box overrides ── */
.form-light .form-label {
  color: rgba(51, 68, 31, 0.70);
  font-size: 10px;
  letter-spacing: 0.18em;
}

.form-light .form-input {
  background-color: #faf9f4;
  border: 1px solid rgba(51, 68, 31, 0.16);
  border-radius: 0.25rem;
  color: #1b1c19;
}

.form-light .form-input::placeholder {
  color: rgba(69, 72, 62, 0.38);
}

.form-light .form-input:hover {
  border-color: rgba(51, 68, 31, 0.30);
  background-color: #f5f4ef;
}

.form-light .form-input:focus {
  border-color: #33441f;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(51, 68, 31, 0.08);
}

.form-light .form-input:invalid:not(:placeholder-shown) {
  border-color: #ba1a1a;
  box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.08);
}

/* select: :placeholder-shown is never true, prevent premature red */
.form-light select.form-input:invalid {
  border-color: rgba(51, 68, 31, 0.16) !important;
  box-shadow: none !important;
  color: rgba(69, 72, 62, 0.38);
}

.form-light select.form-input option {
  background-color: #ffffff;
  color: #1b1c19;
}

.form-light #form-error {
  background-color: rgba(186, 26, 26, 0.06);
  border-color: rgba(186, 26, 26, 0.20);
}

.form-light #form-success {
  background-color: rgba(51, 68, 31, 0.06);
  border-color: rgba(51, 68, 31, 0.20);
}