@charset "UTF-8";

/* =============================================================================
  CONTACT PAGE (pages/contact.tpl)
  <form class="contact" id="form-contact">
  .input-block > label + input/textarea + #message-contact-char
  .captcha block + .button-submit (with .loader)
============================================================================= */

/* Explain text */
#contact p {
  max-width: 70ch;
  margin: 0 auto 16px;
  text-align: center;
  color: var(--muted);
  line-height: 1.6;
}

/* Alerts */
#contact .alert {
  max-width: 720px;
  margin: 10px auto;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
}

#contact .alert.alert-success { border-color: var(--ok-border); background: var(--ok-soft); }
#contact .alert.alert-warning { border-color: var(--warn-border); background: var(--warn-soft); }
#contact .alert.alert-danger,
#contact .alert.alert-error   { border-color: var(--err-border); background: var(--err-soft); }

/* Form card */
#contact form.contact {
  max-width: 720px;
  margin: 18px auto 30px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

/* Field blocks */
#contact form.contact .input-block {
  position: relative;
  margin: 20px 0;
}

/* Inputs / textarea */
#contact form.contact input[type="text"],
#contact form.contact input[type="email"],
#contact form.contact textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 11px 12px;
  font-size: 1rem;
  line-height: 1.35;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}

#contact form.contact textarea {
  min-height: 180px;
  resize: vertical;
}

/* Placeholder */
#contact form.contact input::placeholder,
#contact form.contact textarea::placeholder {
  color: var(--placeholder);
}

/* Focus */
#contact form.contact input:focus,
#contact form.contact textarea:focus {
  border-color: var(--border-strong);
}

/* Keyboard focus only */
#contact form.contact input:focus-visible,
#contact form.contact textarea:focus-visible,
#contact form.contact button:focus-visible,
#contact form.contact input[type="submit"]:focus-visible {
  outline: none;
}

/* Invalid state (works with your existing .input-invalid or .check-invalid logic) */
#contact form.contact .input-invalid,
#contact form.contact input.input-invalid,
#contact form.contact textarea.input-invalid {
  border-color: var(--err-ring) !important;
}

/* Message counter */
#message-contact-char {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  font-size: .85rem;
  color: var(--muted);
}

/* Your JS changes parent color; ensure it doesn’t wreck layout */
#contact form.contact .input-block {
  color: inherit;
}

/* CAPTCHA block: clean grid */
#contact form.contact .captcha {
  margin: 16px 0 6px;
  padding: 12px;
  border: 1px dashed var(--overlay-20);
  border-radius: 12px;
  background: var(--surface);
}

#contact form.contact .captcha > label {
  /* display: block;
  margin: 0 0 8px 2px; */
  color: var(--muted);
  font-size: .95rem;
}

#contact form.contact .captcha img {
  vertical-align: middle;
  /* border-radius: 8px;
  border: 1px solid var(--border); */
  /* background: #fff; */
}

#contact form.contact .captcha img#captcha {
  height: 44px;
  width: auto;
  margin-right: 8px;
}

#contact form.contact .captcha img[alt="captcha"][width="20"] {
  width: 28px;
  height: 28px;
  margin-right: 10px;
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
  transition: background-color .15s ease;
}

#contact form.contact .captcha img[alt="captcha"][width="20"]:hover {
  background: var(--overlay-06);
}

#contact form.contact .captcha input[type="text"] {
  margin-top: 10px;
  /* max-width: 260px; */
}

/* Submit area */
#contact form.contact .button-submit {
  margin-top: 16px;
  display: flex;
  align-items: center;
}

/* Submit button (you use input.submit) */
#contact form.contact input.submit {
  appearance: none;
  border: 0 !important;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  background: var(--accent-green); /* keep your green */
  color: var(--surface);
  transition: filter .15s ease, transform .08s ease;
}

#contact form.contact input.submit:hover {
  filter: brightness(0.95);
}

#contact form.contact input.submit:active {
  transform: translateY(1px);
}

/* Loader alignment */
#contact form.contact .loader {
  position: static;
  margin: 0;
}

/* Small screens */
@media (max-width: 640px) {
  #contact form.contact {
    padding: 14px;
    border-radius: 12px;
  }

  #contact form.contact .button-submit {
    flex-direction: column;
    align-items: stretch;
  }

  #contact form.contact input.submit {
    width: 100%;
  }

  #contact form.contact .captcha input[type="text"] {
    max-width: 100%;
  }
}