/* Keller's shared form language: white canvas, precise rules, legible type. */
:root {
  --kny-form-ink: var(--vr-color-text, #231f1c);
  --kny-form-muted: var(--vr-color-muted, #514f4b);
  --kny-form-surface: var(--vr-color-surface, #fff);
  --kny-form-subtle: var(--vr-color-surface-subtle, #f4f3ef);
  --kny-form-rule: var(--vr-color-control-border, #aaa8a2);
  --kny-form-accent: var(--vr-color-accent, #315b5e);
  --kny-form-on-accent: var(--vr-color-on-accent, #fff);
  --kny-form-error: var(--vr-color-warning, #854d0e);
}

body .bit-form.bf-form-wrapper {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 0 !important;
  color: var(--kny-form-ink) !important;
  background: transparent !important;
}
/* The plugin grid already spaces its layout items. Do not stack an inner
   20px margin onto that gap, or depend on Turnstile being mounted to reset it. */
body .bit-form .bf-form {
  margin: 0 !important;
  padding: 0 !important;
  row-gap: 16px !important;
}
body .bit-form .bf-form > .btcd-fld-itm { min-width: 0; margin-block: 0 !important; }
body .bit-form :is(.bf-label, .bf-field, .bf-phone-number-input, .bf-dpd-wrapper, .bf-button) {
  font-family: var(--vr-font-body, Montserrat, sans-serif) !important;
}

/* Bit Form labels are normally screen-reader-only in Keller's placeholder-led
   contexts. Keep that accessible caption visible so filled fields retain a name. */
body .vr-one-form .vr-one-form__field label,
body .vr-one-form .vr-one-form__field label.sr-only,
body .bit-form .bf-field-wrapper > label,
body .bit-form .bf-label-wrapper > .bf-label,
body .kny-form-specimen > div > label {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: normal !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--kny-form-ink) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  text-transform: capitalize;
}
body .bit-form .bf-field-wrapper { margin: 0 !important; min-width: 0; }
body .vr-one-form .vr-one-form__field { margin-bottom: 16px !important; }

body .bit-form input.bf-field:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body .bit-form select.bf-field,
body .bit-form textarea.bf-field,
body .kny-form-specimen input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body .kny-form-specimen select,
body .kny-form-specimen textarea,
body .bit-form .bf-phone-field-wrapper,
body .bit-form .bf-dpd-wrapper {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid var(--kny-form-rule) !important;
  border-radius: 0 !important;
  background: var(--kny-form-surface) !important;
  box-shadow: none !important;
  color: var(--kny-form-ink) !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
}
body .bit-form :is(input.bf-field:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select.bf-field, textarea.bf-field),
body .kny-form-specimen :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { padding: 11px 13px !important; }
body .bit-form textarea.bf-field,
body .kny-form-specimen textarea { min-height: 112px !important; resize: vertical; }
body .bit-form .bf-phone-number-input {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 10px 8px !important;
  border: 0 !important;
  background: var(--kny-form-surface) !important;
  color: var(--kny-form-ink) !important;
  font-size: 16px !important;
}
body .bit-form .bf-phone-inner-wrapper { display: flex; align-items: center; }
body .bit-form .bf-phone-inner-wrapper > .bf-dpd-wrapper {
  display: flex;
  width: auto;
  min-width: 44px;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  background: transparent !important;
}
body .bit-form .bf-phone-field-wrapper { position: relative; }
body .bit-form .bf-phone-field-wrapper .bf-option-wrapper { overflow: hidden; }
body .bit-form .bf-phone-field-wrapper:has(.bf-dpd-wrapper[aria-expanded="false"]) .bf-option-wrapper { max-height: 0 !important; }
body .bit-form .bf-input-clear-button {
  flex: 0 0 36px;
  width: 36px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--kny-form-ink);
}
body .bit-form .bf-phone-inner-wrapper:has(input:placeholder-shown) > .bf-input-clear-button { visibility: hidden; }
body .bit-form .bf-option-wrapper { background: var(--kny-form-surface) !important; color: var(--kny-form-ink) !important; }

body .bit-form :is(input, textarea)::placeholder,
body .kny-form-specimen :is(input, textarea)::placeholder {
  color: var(--kny-form-muted) !important;
  opacity: 1;
}
body .bit-form input:-webkit-autofill,
body .bit-form textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--kny-form-ink);
  box-shadow: 0 0 0 1000px var(--kny-form-surface) inset;
  caret-color: var(--kny-form-ink);
}

body .bit-form .bf-button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 13px 24px !important;
  border: 1px solid var(--kny-form-ink) !important;
  border-radius: 0 !important;
  background: var(--kny-form-ink) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .12em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
body .bit-form .bf-button:hover {
  border-color: var(--kny-form-accent) !important;
  background: var(--kny-form-accent) !important;
  color: var(--kny-form-on-accent) !important;
}
body .bit-form :is(.bf-button, button[type="submit"]):disabled,
body .bit-form .bf-button:disabled { opacity: .55; cursor: wait; }

body .bit-form :is(input, select, textarea, button, a, [role="combobox"]):focus-visible,
body .kny-form-specimen :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--kny-form-accent) !important;
  outline-offset: 3px;
}
body .bit-form :is(input, select, textarea)[aria-invalid="true"],
body .kny-form-specimen :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--kny-form-error) !important;
}
/* Catalog statuses use the same published warning role; long copy stays neutral. */
body .vr-catalog-section .vr-status--error {
  border-inline-start-color: var(--kny-form-error) !important;
  color: var(--kny-form-ink) !important;
}
body .vr-catalog-section .vr-status--error > strong {
  color: var(--kny-form-error) !important;
}
/* Keller's primary action is the published deepgreen role used by live forms. */
body #buttons .vr-button:not(.vr-button--secondary):not(:disabled) {
  background: var(--kny-form-accent) !important;
  border-color: var(--kny-form-accent) !important;
  color: var(--kny-form-on-accent) !important;
}
body .bit-form :is(.bf-asterisk-symbol, .bf-error-text, [role="alert"], .invalid-feedback, .alert-danger) { color: var(--kny-form-error) !important; }
body .bit-form .kny-form-network-error {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  color: var(--kny-form-error) !important;
  font-size: 14px;
  line-height: 1.45;
}
body .bit-form .bf-hidden-field,
body .bit-form .btcd-fld-itm:has(> .bf-hidden-field) { margin: 0 !important; padding: 0 !important; }
body .bit-form.bf-form-wrapper > [role="dialog"].deactive { display: none; }

/* Single-column order keeps verification ahead of the action without altering
   any Bit Form field, hidden input, or submission semantics. */
body .bit-form .bf-form:has(.cf-turnstile) {
  display: flex !important;
  flex-direction: column;
  gap: 16px !important;
}
body .bit-form .bf-form:has(.cf-turnstile) > .btcd-fld-itm { min-width: 0; }
body .bit-form .bf-form > .btcd-fld-itm:has(.cf-turnstile) { order: 1; }
body .bit-form .bf-form:has(.cf-turnstile) > .btcd-fld-itm:has(button[type="submit"]) { order: 2; }

/* The modal is one white page surface, not a panel nested around another panel. */
#contactModal {
  --contact-inset: clamp(12px, 3vw, 32px);
  padding: max(var(--contact-inset), env(safe-area-inset-top)) max(var(--contact-inset), env(safe-area-inset-right)) max(var(--contact-inset), env(safe-area-inset-bottom)) max(var(--contact-inset), env(safe-area-inset-left)) !important;
  overflow: hidden;
}
#contactModal .kny-contact-dialog {
  display: flex;
  width: 100%;
  max-width: 44rem;
  min-height: calc(100dvh - var(--contact-inset) * 2);
  max-height: calc(100dvh - var(--contact-inset) * 2);
  align-items: center;
  margin: 0 auto !important;
}
#contactModal .modal-content {
  display: flex;
  width: 100%;
  max-height: inherit;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--vr-color-rule, #d8d7d2);
  border-radius: 0;
  background: var(--kny-form-surface);
  color: var(--kny-form-ink);
  box-shadow: 0 18px 48px rgba(35, 31, 28, .16);
}
#contactModal .kny-contact-dialog__header {
  position: relative;
  flex: 0 0 auto;
  padding: 24px 76px 18px 32px;
  border-bottom: 1px solid var(--vr-color-rule, #d8d7d2);
}
#contactModal .kny-contact-dialog__header h2 {
  margin: 0;
  color: inherit;
  font-family: var(--vr-font-body, Montserrat, sans-serif);
  font-size: clamp(1.15rem, 2.5vw, 1.35rem);
  font-weight: 700;
  line-height: 1.1;
}
#contactModal .kny-contact-dialog__close {
  position: absolute;
  top: 12px;
  right: 16px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
#contactModal .kny-contact-dialog__close:hover { border-color: var(--vr-color-rule, #d8d7d2); }
#contactModal .kny-contact-dialog__close:focus-visible {
  outline: 2px solid var(--kny-form-accent);
  outline-offset: 2px;
}
#contactModal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 22px 32px 28px !important;
  scrollbar-color: var(--kny-form-accent) var(--kny-form-subtle);
  scrollbar-width: thin;
}
#contactModal .bit-form.bf-form-wrapper { padding: 0 !important; background: transparent !important; }
#contactModal .modal-body > .vr-one-form { min-width: 0; }

@media (max-width: 600px) {
  #contactModal .kny-contact-dialog { min-height: 0; }
  #contactModal .kny-contact-dialog__header { padding: 18px 64px 16px 20px; }
  #contactModal .kny-contact-dialog__close { top: 8px; right: 8px; }
  #contactModal .modal-body { padding: 18px 20px max(24px, env(safe-area-inset-bottom)) !important; }
  body .bit-form .bf-button,
  body .bit-form .bf-button { width: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
  body .bit-form .bf-button,
  body .bit-form .bf-button { transition: none; }
}

/* Shared attention states: amber and explicit correction text, never red.
   Plugin visibility stays authoritative; the controller reflects visible errors. */
body .bit-form .bf-error-wrapper {
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  transition: none !important;
}
body .bit-form .bf-error-wrapper[data-kny-error-visible="true"] {
  height: auto !important;
  opacity: 1 !important;
  padding-top: 6px !important;
}
body .bit-form .bf-error-text {
  position: static !important;
  max-width: 100%;
  margin: 0 !important;
  font: 400 1rem/1.4 var(--vr-font-body, Montserrat, sans-serif) !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
body .bit-form .bf-asterisk-symbol { color: var(--kny-form-error) !important; }
body .bit-form .alert-danger {
  color: var(--kny-form-ink) !important;
  background: var(--kny-form-subtle) !important;
  border-color: var(--kny-form-error) !important;
}
body .bit-form a,
body .bit-form a:visited,
body .bit-form a:hover,
body .bit-form a:focus-visible { color: var(--kny-form-accent) !important; }
body .bit-form :is(input[type="checkbox"], input[type="radio"]),
body .kny-form-specimen :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--kny-form-accent);
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
body .bit-form :is(.bf-check-label, .bf-radio-label) { min-height: 44px; }
.kny-form-error-description {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Native choice controls keep space/arrows/submission semantics. Style their
   real labels and states rather than replacing inputs with clickable drawings. */
body .bit-form label:has(input:is([type="checkbox"], [type="radio"])),
body .kny-form-specimen label:has(input:is([type="checkbox"], [type="radio"])) {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
  cursor: pointer;
}
body .bit-form input:is([type="checkbox"], [type="radio"]):hover:not(:disabled),
body .kny-form-specimen input:is([type="checkbox"], [type="radio"]):hover:not(:disabled) {
  outline: 1px solid var(--kny-form-accent);
  outline-offset: 3px;
}
body .bit-form input:is([type="checkbox"], [type="radio"]):disabled,
body .kny-form-specimen input:is([type="checkbox"], [type="radio"]):disabled {
  opacity: .55;
  cursor: not-allowed;
}
body .bit-form label:has(input:is([type="checkbox"], [type="radio"]):disabled),
body .kny-form-specimen label:has(input:is([type="checkbox"], [type="radio"]):disabled) { cursor: not-allowed; }
body .bit-form input:is([type="checkbox"], [type="radio"])[aria-invalid="true"],
body .kny-form-specimen input:is([type="checkbox"], [type="radio"])[aria-invalid="true"] {
  outline: 2px solid var(--kny-form-error);
  outline-offset: 3px;
}
body .bit-form .bf-dpd-field-wrapper {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid var(--kny-form-rule) !important;
  border-radius: 0 !important;
  background: var(--kny-form-surface) !important;
  color: var(--kny-form-ink) !important;
  font: 400 16px/1.45 var(--vr-font-body, Montserrat, sans-serif) !important;
}
body .bit-form .bf-selected-option-label {
  max-width: 100%;
  font: inherit !important;
  white-space: normal;
  overflow-wrap: anywhere;
}