/* Shared Contact form (/contact/, /en/contact/). Uses the tokens of home-site.css. */
.cf-wrap { width: min(100%, 680px); margin: 0 auto; }
.cf-form { display: grid; gap: 22px; margin-top: 36px; }
.cf-field { display: grid; gap: 8px; }
.cf-label { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.cf-tag { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); }
.cf-tag.is-required { background: rgba(190, 52, 52, .1); color: #b03030; }
.cf-hint { margin: 0; font-size: 12px; line-height: 1.7; color: var(--muted); }
.cf-input, .cf-select, .cf-textarea {
  width: 100%; padding: 13px 14px; border: 1px solid rgba(24, 32, 29, .22); border-radius: 12px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; /* 16px: no iOS zoom on focus */
}
.cf-textarea { min-height: 160px; line-height: 1.7; resize: vertical; }
.cf-input:focus, .cf-select:focus, .cf-textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.cf-field.has-error .cf-input, .cf-field.has-error .cf-select, .cf-field.has-error .cf-textarea { border-color: #b03030; background: #fff8f8; }
.cf-error { margin: 0; min-height: 0; font-size: 13px; color: #b03030; }
.cf-error:empty { display: none; }
.cf-counter { justify-self: end; font-size: 12px; color: var(--muted); }
.cf-env { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); font-size: 13px; line-height: 1.6; color: var(--ink); }
.cf-env span { color: var(--muted); }
.cf-env[hidden] { display: none; }
.cf-file { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cf-file-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px dashed rgba(24, 32, 29, .35); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 14px; cursor: pointer; }
.cf-file-btn:focus-within, .cf-file-btn:hover { border-color: var(--accent); color: var(--accent); }
.cf-file input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.cf-file-count { font-size: 13px; color: var(--muted); }
.cf-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cf-files li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13px; }
.cf-files img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; background: var(--soft); }
.cf-files img[src=""] { visibility: hidden; }
.cf-files span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-files button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #b03030; font: inherit; font-size: 13px; cursor: pointer; }
.cf-alert { margin: 0; padding: 12px 14px; border-left: 3px solid #b03030; border-radius: 0 10px 10px 0; background: #fff3f3; color: #8c2323; font-size: 14px; }
.cf-alert[hidden] { display: none; }
.cf-submit { min-height: 52px; border: 0; border-radius: 14px; background: var(--accent); color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.cf-submit:disabled { opacity: .6; cursor: progress; }
.cf-submit:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.cf-note { margin: 0; font-size: 12px; line-height: 1.8; color: var(--muted); }
.cf-note a { color: var(--accent); }
.cf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* honeypot */
.cf-done { margin-top: 36px; padding: 36px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); text-align: center; }
.cf-done[hidden] { display: none; }
.cf-done:focus { outline: none; }
.cf-done h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 24px; }
.cf-done p { margin: 8px 0; font-size: 14px; line-height: 1.8; color: var(--muted); }
.cf-receipt { display: inline-block; margin: 8px 0; padding: 10px 18px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); font-size: 20px; font-weight: 700; letter-spacing: .04em; user-select: all; }
.cf-others { margin-top: 56px; }
.cf-others h2 { font-size: 15px; margin: 0 0 12px; color: var(--ink); }
.cf-others ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cf-others a { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 14px; text-decoration: none; }
.cf-others a:hover { border-color: var(--accent); }
@media (min-width: 720px) { .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } }
.cf-row { display: grid; gap: 22px; }