/* Contact form security control. Works in both LTR and RTL layouts. */
.contact-security { margin: 10px 0 20px; }
.contact-security .contact-math { margin: 0; }
.contact-security .contact-math input { width: 100%; max-width: 180px; }
.contact-security .cf-turnstile { max-width: 100%; overflow: hidden; }
@media(max-width:360px) { .contact-security .cf-turnstile { transform-origin: top left; } html[dir="rtl"] .contact-security .cf-turnstile { transform-origin: top right; } }

.inquiry-tabs { display:flex; gap:10px; flex-wrap:wrap; margin:0 0 18px; }


/* 2026-10-12: Clear, accessible contact-field dividers on the dark homepage.
   Scope is deliberately limited to the public contact form (#contact).
   Existing security fields, form submission, QR, and admin are unaffected. */
#contact .form {
  row-gap: 24px;
}
#contact .form .field {
  gap: 8px;
  min-width: 0;
}
#contact .form .field > label {
  color: #e0e6ef;
  font-size: 0.9rem;
  font-weight: 550;
  line-height: 1.55;
}
#contact .form .field > input,
#contact .form .field > textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 2px solid rgba(235, 242, 251, 0.64);
  border-radius: 0;
  padding: 14px 2px 16px;
  color: #ffffff;
  background: transparent;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
#contact .form .field > input:hover,
#contact .form .field > textarea:hover {
  border-bottom-color: rgba(245, 248, 252, 0.94);
}
#contact .form .field > input:focus,
#contact .form .field > textarea:focus {
  border-bottom-color: #df344b;
  box-shadow: 0 2px 0 rgba(223, 52, 75, 0.18);
}
#contact .form .field > input:focus-visible,
#contact .form .field > textarea:focus-visible {
  outline: 2px solid rgba(223, 52, 75, 0.7);
  outline-offset: 4px;
}
#contact .form .field > textarea {
  min-height: 140px;
}
#contact .form .contact-security {
  margin-block: 4px 8px;
}
#contact .form .contact-math > input {
  max-width: 180px;
  min-height: 45px;
}
@media (max-width: 620px) {
  #contact .form { row-gap: 21px; }
  #contact .form .field > label { font-size: 0.88rem; }
  #contact .form .field > textarea { min-height: 128px; }
}
@media (prefers-reduced-motion: reduce) {
  #contact .form .field > input,
  #contact .form .field > textarea { transition: none; }
}