/* Fallback styling for the unified form.
   Deliberately minimal and inheriting: font-family and colours come from the
   host page, so the form reads as part of the site rather than as a widget.
   Sites that map their own class names (see km_config 'classes') mostly bypass
   this file — it exists so a site with no matching classes still looks right. */

.km-form { --km-accent:#1a56db; --km-radius:8px; --km-border:#d7dbe0; --km-error:#b91c1c;
           --km-ok:#047857; --km-muted:#6b7280; font-family:inherit; color:inherit; }
.km-form *, .km-form *::before, .km-form *::after { box-sizing:border-box; }

.km-step { display:none; flex-direction:column; gap:16px; }
.km-step--active, .km-step.active { display:flex; }

.km-group { display:flex; flex-direction:column; gap:6px; }
.km-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px) { .km-row { grid-template-columns:1fr; } }

/* Text colours are EXPLICIT, not inherited.
   These forms sit on a white card inside a dark hero. With `color: inherit`
   the label, the radio captions and — worse — the text the visitor types
   resolve to the hero's white and vanish against the card. A form you cannot
   read what you typed into is a form nobody completes. */
.km-label { font-size:.875rem; font-weight:600; color:#111827; }
.km-req { color:var(--km-error); }

.km-input { width:100%; padding:12px 14px; font:inherit; color:#111827;
            background:#fff; border:1px solid var(--km-border); border-radius:var(--km-radius); }
.km-input::placeholder { color:#9ca3af; opacity:1; }
.km-input:focus-visible { outline:none; border-color:var(--km-accent);
                          box-shadow:0 0 0 3px rgba(26,86,219,.18); }

.km-radios { display:flex; gap:10px; flex-wrap:wrap; }
.km-radio { display:inline-flex; align-items:center; gap:8px; cursor:pointer;
            padding:11px 16px; border:1px solid var(--km-border);
            border-radius:var(--km-radius); background:#fff; flex:1 1 auto; }
.km-radio { color:#1f2937; }
.km-radio__text { color:inherit; font-weight:600; }
.km-radio input { accent-color:var(--km-accent); flex:none; }
.km-radio:has(input:checked) { border-color:var(--km-accent);
                               box-shadow:inset 0 0 0 1px var(--km-accent); }

.km-consent-wrap { margin:4px 0; }
.km-consent { display:flex; align-items:flex-start; gap:10px; cursor:pointer;
              font-size:.8125rem; line-height:1.55; color:var(--km-muted); }
.km-consent__text { color:inherit; }
.km-consent input { margin-top:.25em; flex:none; accent-color:var(--km-accent); }

.km-buttons { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.km-btn { padding:13px 24px; font:inherit; font-weight:600; border:1px solid transparent;
          border-radius:var(--km-radius); cursor:pointer; }
.km-btn--primary { background:var(--km-accent); color:#fff; }
.km-btn--secondary { background:transparent; color:var(--km-muted); border-color:var(--km-border); }
.km-btn:disabled { opacity:.6; cursor:not-allowed; }

.km-msg { margin:0; font-size:.875rem; }
.km-msg:empty { display:none; }
.km-msg--error { color:var(--km-error); }

.km-result { padding:22px; border-radius:var(--km-radius); text-align:center; }
.km-result--ok { border:1px solid var(--km-ok); color:var(--km-ok); }
.km-result--info { border:1px solid var(--km-border); color:inherit; }

/* Hidden from people, irresistible to bots. */
.km-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }