/* ARS-327 (Codex design ARS-276): the Contact support form. Only linked on /contact-us/ (and its translations). Logical properties only (RTL-safe).
   Tokens from the design: neutral surface #f2f4f5, border #dfe3e7, error #a13a31 on #fff5f3, focus 2px #20262e with a 2px gap, Send = the brand accent with #20262e text. */
.contact-title { font-size: clamp(32px, 4vw, 44px); line-height: 1.15; margin: 28px 0 20px; }
.contact-card { box-sizing: border-box; max-width: 620px; margin: 0 0 48px; padding: 24px; background: #fff; border: 1px solid #dfe3e7; border-radius: 16px; color: #20262e; }
.contact-card h2 { font-size: 24px; line-height: 1.25; margin: 0 0 4px; }
.contact-sub { margin: 0 0 20px; color: #5b6770; font-size: 16px; line-height: 1.5; }
.contact-card form[hidden], .contact-card .cs-done[hidden], .cs-alert[hidden], .cs-err[hidden], .cs-reload[hidden] { display: none; }
.cs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cs-field { display: flex; flex-direction: column; margin: 0 0 16px; min-width: 0; }
.cs-field label { font-size: 15px; font-weight: 600; line-height: 1.4; margin: 0 0 6px; color: #20262e; }
.cs-field input, .cs-field select, .cs-field textarea { box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 12px; font: 400 16px/1.4 var(--font-ui, inherit); color: #20262e; background: #fff; border: 1px solid #adb5bc; border-radius: 8px; }
.cs-field textarea { min-height: 150px; resize: vertical; }
.cs-field select { appearance: none; padding-inline-end: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%2320262e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
:dir(rtl) .cs-field select, [dir="rtl"] .cs-field select { background-position: left 14px center; }
.cs-field input:focus-visible, .cs-field select:focus-visible, .cs-field textarea:focus-visible, .cs-send:focus-visible, .cs-reload:focus-visible, .cs-back:focus-visible, .cs-alert a:focus-visible { outline: 2px solid #20262e; outline-offset: 2px; }
.cs-field [aria-invalid="true"] { border-color: #a13a31; background: #fff5f3; box-shadow: inset 4px 0 0 #a13a31; }
[dir="rtl"] .cs-field [aria-invalid="true"] { box-shadow: inset -4px 0 0 #a13a31; }
.cs-field input[readonly], .cs-field textarea[readonly], .cs-field select:disabled { background: #f2f4f5; color: #5b6770; }
.cs-err { margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: #a13a31; }
.cs-err::before { content: "\26A0\FE0E\00A0"; }
.cs-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: flex-start; margin-block-start: 6px; }
.cs-foot .cs-err { flex: 1 1 14em; min-width: 0; margin: 0; text-align: end; }
.cs-foot .cs-count { flex: 0 0 auto; white-space: nowrap; }
.cs-count { font-size: 14px; line-height: 1.4; color: #5b6770; }
.cs-count.cs-over { color: #a13a31; font-weight: 600; }
.cs-alert { margin: 0 0 16px; padding: 12px 14px; font-size: 15px; line-height: 1.5; color: #a13a31; background: #fff5f3; border: 1px solid #e8c7c2; border-radius: 8px; }
.cs-alert a { color: inherit; font-weight: 600; text-decoration: underline; }
.cs-hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cs-send, .cs-back, .cs-reload { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 16px; font: 600 16px/1.3 var(--font-ui, inherit); color: #20262e; background: var(--accent, #7df644); border: 0; border-radius: 8px; cursor: pointer; text-decoration: none; }
.cs-send:hover, .cs-back:hover { filter: brightness(.94); }
.cs-send[disabled], .cs-send[aria-disabled="true"] { background: #e6e9ec; color: #5b6770; cursor: default; filter: none; }
.cs-reload { margin-block-start: 12px; background: #fff; border: 1px solid #20262e; }
[dir="rtl"] .cs-ico { transform: scaleX(-1); }
.cs-done { text-align: start; padding: 28px 0 8px; }
.cs-done .cs-check { display: block; margin: 0 0 12px; color: #20262e; }
.cs-done h3 { font-size: 24px; line-height: 1.25; margin: 0 0 8px; }
.cs-done p { margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: #5b6770; }
.cs-done h3:focus { outline: none; }
.cs-noscript { font-size: 15px; }
@media (max-width: 640px) {
  .contact-card { max-width: 350px; padding: 20px 16px; }
  .cs-row { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: no-preference) { .cs-send { transition: filter .12s; } }