/* Two-mode contact form (shared/contact-form.html). Themes tune it with:
 *   --cf-ink (text), --cf-muted, --cf-field (field background), --cf-line (field border),
 *   --cf-accent (focus ring, selected toggle), --cf-on-accent (text on the selected toggle),
 *   --cf-btn / --cf-btn-ink (submit), --cf-radius, --cf-font (labels), --cf-display (title)
 */
.cf {
  --_ink: var(--cf-ink, #0b0b10);
  --_muted: var(--cf-muted, rgba(11, 11, 16, .64));
  --_field: var(--cf-field, #fff);
  --_line: var(--cf-line, rgba(11, 11, 16, .22));
  --_accent: var(--cf-accent, #ff2d87);
  --_on-accent: var(--cf-on-accent, #fff);
  --_r: var(--cf-radius, 14px);
  display: grid; gap: 14px; width: 100%; color: var(--_ink); text-align: left;
}
.cf-title { margin: 0; font-family: var(--cf-display, inherit); font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.cf-modes { margin: 0; padding: 0; border: 0; min-width: 0; }
.cf-legend { padding: 0; margin: 0 0 8px; font-size: .85rem; font-weight: 600; color: var(--_muted); }
.cf-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: calc(var(--_r) + 4px); background: var(--_field); box-shadow: inset 0 0 0 1px var(--_line); }
.cf-opt { position: relative; display: block; cursor: pointer; }
.cf-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cf-opt span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 12px; border-radius: var(--_r); font-weight: 700; font-size: .95rem; text-align: center; transition: background .25s, color .25s; }
.cf-opt input:checked + span { background: var(--_accent); color: var(--_on-accent); }
.cf-opt input:not(:checked):hover + span { background: color-mix(in srgb, var(--_accent) 12%, transparent); }
.cf-opt input:focus-visible + span { outline: 3px solid var(--_accent); outline-offset: 2px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cf-field { display: grid; gap: 6px; min-width: 0; }
.cf-field label { font-family: var(--cf-font, inherit); font-size: .85rem; font-weight: 650; }
.cf-optional { font-weight: 400; color: var(--_muted); }
.cf-field input, .cf-field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--_r);
  border: 1px solid var(--_line); background: var(--_field); color: var(--_ink);
  font: inherit; font-size: 1rem; line-height: 1.4;
}
.cf-field textarea { min-height: 128px; resize: vertical; }
.cf-field input::placeholder, .cf-field textarea::placeholder { color: var(--_muted); opacity: 1; }
.cf-field input:focus, .cf-field textarea:focus { outline: 3px solid var(--_accent); outline-offset: 1px; border-color: transparent; }
.cf-send { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 2px; }
.cf-submit {
  display: inline-flex; align-items: center; gap: .5em; min-height: 52px; padding: 0 24px;
  border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 800; font-size: 1rem;
  background: var(--cf-btn, var(--_ink)); color: var(--cf-btn-ink, #fff); transition: transform .2s, box-shadow .2s;
}
.cf-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--_accent) 70%, transparent); }
.cf-submit:focus-visible { outline: 3px solid var(--_accent); outline-offset: 3px; border-radius: 999px; }
.cf-note { flex: 1 1 220px; margin: 0; font-size: .8rem; line-height: 1.45; color: var(--_muted); }
.cf-live { margin: 0; font-size: .9rem; font-weight: 600; }
.cf-live:empty { display: none; }
.cf-switch { margin: 2px 0 0; padding-top: 12px; border-top: 1px solid var(--_line); font-size: .95rem; color: var(--_muted); }
.cf-switch-btn {
  padding: 4px 2px; min-height: 32px; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 800;
  color: var(--_ink); text-decoration: underline; text-decoration-color: var(--_accent); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.cf-switch-btn:focus-visible { outline: 3px solid var(--_accent); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 560px) { .cf-row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cf-opt span, .cf-submit { transition: none; } .cf-submit:hover { transform: none; } }