/* contact-form.css: Makari contact form (contact page only). Uses tokens.css only.
   Sentence-case Inter 600 labels, no all-caps, no shadows; Wood is the action colour,
   Fire-ink carries errors (AA on paper in both themes). */

.mkc { display: grid; gap: 2.5rem; padding-block: 1rem 4rem; }
@media (min-width: 960px) { .mkc { grid-template-columns: minmax(0, 1fr) 18rem; gap: 4rem; align-items: start; } .mkc__side { position: sticky; top: 1.5rem; } }
.mkc__main { max-width: 40rem; }
.mkc__main > h2 { font-size: var(--step-3); margin-bottom: .6rem; }
.mkc__lede { color: var(--ink-2); }
.mkc__privacy {
  margin: 1.2rem 0 1.6rem; padding: .85rem 1rem .85rem 1.1rem; background: var(--paper-2);
  border-left: 3px solid var(--earth); border-radius: var(--radius); font-size: .95rem;
}
.mkc__fallback { padding: 1.2rem 0; border-top: 1px solid var(--rule); }
.mkc__fallback[hidden], .mkc__form[hidden], .mkc__done[hidden] { display: none; }
/* Single column: while the booking fallback shows (no JS at all, or the token endpoint
   failed), the side card would repeat the same booking block right below it, so drop it.
   Pure CSS keyed off the fallback's own [hidden] state: with JS off the fallback never gets
   [hidden], so this applies with no script running. Without :has() support both blocks show. */
@media (max-width: 959.98px) { .mkc:has(.mkc__fallback:not([hidden])) .mkc__side { display: none; } }

.mkc__form { display: grid; gap: 1.25rem; }
.mkc__req, .mkc__note, .mkc__hint, .mkc__count { font-size: var(--step--1); color: var(--mute); margin: 0; }
.mkc__row { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .mkc__row { grid-template-columns: 1fr 1fr; } }
.mkc__f { display: grid; gap: .4rem; min-width: 0; align-content: start; }
.mkc__f > label, .mkc__clinics legend { font: 600 .95rem/1.3 var(--sans); color: var(--ink); }
.mkc__opt { font-weight: 400; color: var(--mute); }

.mkc input[type="text"], .mkc input[type="email"], .mkc input[type="tel"], .mkc select, .mkc textarea {
  width: 100%; min-height: 46px; padding: .62rem .8rem; font: 400 1rem/1.45 var(--sans);
  color: var(--ink); background: var(--paper); border: 1px solid var(--rule-2); border-radius: var(--radius);
  transition: border-color .2s;
}
.mkc textarea { min-height: 9.5rem; resize: vertical; }
.mkc select { appearance: none; padding-right: 2.4rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.15rem center, right .8rem center; background-size: 6px 6px; background-repeat: no-repeat; }
.mkc input:hover, .mkc select:hover, .mkc textarea:hover { border-color: var(--ink-2); }
.mkc input:focus-visible, .mkc select:focus-visible, .mkc textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
.mkc [aria-invalid="true"] { border-color: var(--fire-ink); border-width: 2px; }

.mkc__clinics { border: 0; margin: 0; padding: 0; }
.mkc__clinics legend { padding: 0; margin-bottom: .4rem; }
.mkc__radios { display: flex; flex-wrap: wrap; gap: .55rem; }
.mkc__radios label {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .45rem 1rem .45rem .8rem;
  border: 1px solid var(--rule-2); border-radius: 999px; cursor: pointer; font-size: .95rem;
}
.mkc__radios label:has(input:checked) { border-color: var(--ink); background: var(--paper-2); }
.mkc__radios label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.mkc input[type="radio"], .mkc input[type="checkbox"] { accent-color: var(--action); width: 1.15rem; height: 1.15rem; margin: 0; flex: none; }
.mkc__check { display: flex; gap: .7rem; align-items: flex-start; font-size: .97rem; cursor: pointer; }
.mkc__check input { margin-top: .2rem; }
.mkc__clinics[aria-invalid="true"] .mkc__radios label, .mkc__consent[aria-invalid="true"] .mkc__check { border-color: var(--fire-ink); }

.mkc__err { margin: 0; font-size: var(--step--1); font-weight: 600; color: var(--fire-ink); }
.mkc__err::before { content: "\2014\00a0"; }
.mkc__summary { padding: 1rem 1.1rem; border-left: 3px solid var(--fire-ink); background: var(--paper-2); border-radius: var(--radius); }
.mkc__summary h3 { font: 600 1rem/1.3 var(--sans); margin-bottom: .4rem; }
.mkc__summary ul { padding-left: 1.2rem; font-size: .95rem; }
.mkc__summary a { color: var(--fire-ink); }
.mkc__summary[hidden] { display: none; }

/* off-screen bot trap (not display:none, which some bots skip) */
.mkc__hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.mkc__captcha:empty { display: none; }
.mkc__captcha { min-height: 0; }
.mkc__act { margin: .3rem 0 0; }
.mkc__act .btn[disabled] { opacity: .6; cursor: progress; }
.mkc__status { margin: 0; min-height: 1.5em; font-size: .97rem; }
.mkc__status[data-tone="error"] { color: var(--fire-ink); font-weight: 600; }

/* success: the needle rule with a Wood handle */
.mkc__done { margin-top: .5rem; padding: 1.4rem 0 1.4rem 1.4rem; border-left: 4px solid var(--el, var(--action)); }
.mkc__done h3 { font-size: var(--step-2); margin-bottom: .6rem; }
.mkc__done:focus { outline: none; }
.mkc__done:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) { .mkc * { transition: none !important; } }