/*
 * Scoped so theme rules (Storefront, Astra, Twenty Twenty-Five) do not restyle the controls.
 *
 * Each skin sets three colours as custom properties:
 *   --fg-bg     the form's background
 *   --fg-field  the background of a text field
 *   --fg-line   the border of a text field: at least 3:1 against both of the above (WCAG 1.4.11).
 * scripts/check-wordpress-plugin.mjs computes those ratios for every skin.
 */
.formgong-form.formgong-form {
  --fg-bg: #fff;
  --fg-field: #fff;
  --fg-line: #64748b;
  all: revert;
  box-sizing: border-box;
  position: relative;
  display: grid;
  gap: 0.75rem;
  width: 100%;
  max-width: 32rem;
  margin: 1.5rem 0;
  padding: 1.25rem;
  border: 1px solid #dbe2ea;
  border-radius: 8px;
  background: var(--fg-bg);
  color: #0f172a;
  font: 16px/1.5 system-ui, sans-serif;
}

.formgong-form.formgong-form *,
.formgong-form.formgong-form *::before,
.formgong-form.formgong-form *::after {
  box-sizing: border-box;
}

.formgong-form.formgong-form h2 {
  margin: 0;
  color: inherit;
  font-size: 1.4rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

.formgong-form.formgong-form p,
.formgong-form.formgong-form label,
.formgong-form.formgong-form legend {
  margin: 0;
  color: inherit;
  font: inherit;
}

.formgong-form.formgong-form label {
  display: grid;
  gap: 0.25rem;
  font-weight: 600;
}

/* Text controls. Checkboxes and radios are not in this rule: they keep the browser's own control, below. */
.formgong-form.formgong-form input:where(:not([type="checkbox"], [type="radio"])),
.formgong-form.formgong-form textarea,
.formgong-form.formgong-form select {
  width: 100%;
  max-width: 100%;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--fg-line);
  border-radius: 6px;
  background: var(--fg-field);
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-weight: 400;
  line-height: 1.4;
  appearance: none;
}

/* A select keeps the browser's arrow, in the right place for left-to-right and right-to-left pages. */
.formgong-form.formgong-form select {
  appearance: auto;
}

.formgong-form.formgong-form textarea {
  min-height: 7rem;
  resize: vertical;
}

/*
 * Checkboxes and radios keep the browser's own control. A ticked box looks ticked, and the control follows the
 * visitor's contrast and forced-colors settings. accent-color paints the tick in the text colour of the skin.
 */
.formgong-form.formgong-form input[type="checkbox"],
.formgong-form.formgong-form input[type="radio"] {
  all: revert;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  color: inherit;
  accent-color: currentColor;
}

.formgong-form.formgong-form input[type="checkbox"]:focus-visible,
.formgong-form.formgong-form input[type="radio"]:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

.formgong-form.formgong-form .formgong-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 400;
}

.formgong-form.formgong-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.formgong-form.formgong-form button {
  justify-self: start;
  width: auto;
  min-height: 3rem;
  margin: 0;
  padding: 0.6rem 1.1rem;
  border: 0;
  border-radius: 6px;
  background: #111827;
  box-shadow: none;
  color: #fff;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.formgong-form.formgong-form :focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.formgong-form .formgong-note {
  font-size: 0.9rem;
}

.formgong-form .formgong-score {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
}

.formgong-form .formgong-score legend,
.formgong-form .formgong-scale {
  flex-basis: 100%;
}

.formgong-form .formgong-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

.formgong-trap {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.formgong-missing {
  padding: 0.75rem 1rem;
  border: 1px solid currentColor;
}

/* Lattice and other dark website templates. color-scheme makes the native controls dark too. */
.formgong-form.formgong-skin-lattice {
  --fg-bg: #111;
  --fg-field: #1b1b1b;
  --fg-line: #7a7a7a;
  color-scheme: dark;
  border-color: #2a2a2a;
  border-radius: 0;
  color: #f5f5f5;
}

.formgong-form.formgong-skin-lattice button {
  background: #f5f5f5;
  color: #111;
}

/* AULA and other light studio templates. The form and its fields are transparent on the page, which is
   assumed light: --fg-bg and --fg-field only tell the contrast check what the line sits on. */
.formgong-form.formgong-skin-aula {
  --fg-bg: #fff;
  --fg-field: #fff;
  --fg-line: #111;
  max-width: 36rem;
  border: 0;
  border-top: 2px solid #111;
  border-radius: 0;
  background: transparent;
  color: #111;
}

.formgong-form.formgong-skin-aula input:where(:not([type="checkbox"], [type="radio"])),
.formgong-form.formgong-skin-aula textarea,
.formgong-form.formgong-skin-aula select {
  border: 0;
  border-bottom: 1px solid var(--fg-line);
  border-radius: 0;
  background: transparent;
}

.formgong-form.formgong-skin-aula button {
  border-radius: 999px;
  background: #111;
  color: #fff;
}

/* Shop templates such as Ocra. */
.formgong-form.formgong-skin-shop {
  --fg-bg: #fffaf4;
  --fg-line: #94705a;
  border-color: #e7d7c4;
  border-radius: 16px;
  color: #3b2415;
}

.formgong-form.formgong-skin-shop button {
  border-radius: 999px;
  background: #c4551a;
  color: #fff;
}

/* Clinic templates. */
.formgong-form.formgong-skin-clinic {
  --fg-bg: #f4faf7;
  --fg-line: #5f8a78;
  border-color: #d5e4dc;
  border-radius: 16px;
  color: #163028;
}

.formgong-form.formgong-skin-clinic button {
  border-radius: 999px;
  background: #1f6b52;
  color: #fff;
}

/* formgong:show-if:start */
/* Written by scripts/wordpress-show-if-css.mjs from templates/catalog.json. Do not edit by hand. */
/* Without :has() support every conditional field stays visible. */
@supports selector(:has(*)) {
  .formgong-form [data-show-if] {
    display: none;
  }
  .formgong-form:has(select[name="attending"] option[value="yes"]:checked) [data-show-if="attending"][data-show-equals="yes"],
  .formgong-form:has(input[name="attending"][value="yes"]:checked) [data-show-if="attending"][data-show-equals="yes"] {
    display: grid;
  }
  .formgong-form:has(select[name="bring_guest"] option[value="yes"]:checked) [data-show-if="bring_guest"][data-show-equals="yes"],
  .formgong-form:has(input[name="bring_guest"][value="yes"]:checked) [data-show-if="bring_guest"][data-show-equals="yes"] {
    display: grid;
  }
  .formgong-form:has(select[name="currently_insured"] option[value="yes"]:checked) [data-show-if="currently_insured"][data-show-equals="yes"],
  .formgong-form:has(input[name="currently_insured"][value="yes"]:checked) [data-show-if="currently_insured"][data-show-equals="yes"] {
    display: grid;
  }
  .formgong-form:has(select[name="delivery"] option[value="ship"]:checked) [data-show-if="delivery"][data-show-equals="ship"],
  .formgong-form:has(input[name="delivery"][value="ship"]:checked) [data-show-if="delivery"][data-show-equals="ship"] {
    display: grid;
  }
  .formgong-form:has(select[name="dietary"] option[value="other"]:checked) [data-show-if="dietary"][data-show-equals="other"],
  .formgong-form:has(input[name="dietary"][value="other"]:checked) [data-show-if="dietary"][data-show-equals="other"] {
    display: grid;
  }
  .formgong-form:has(select[name="event_type"] option[value="other"]:checked) [data-show-if="event_type"][data-show-equals="other"],
  .formgong-form:has(input[name="event_type"][value="other"]:checked) [data-show-if="event_type"][data-show-equals="other"] {
    display: grid;
  }
  .formgong-form:has(select[name="intent"] option[value="rent"]:checked) [data-show-if="intent"][data-show-equals="rent"],
  .formgong-form:has(input[name="intent"][value="rent"]:checked) [data-show-if="intent"][data-show-equals="rent"] {
    display: grid;
  }
  .formgong-form:has(select[name="interest"] option[value="other"]:checked) [data-show-if="interest"][data-show-equals="other"],
  .formgong-form:has(input[name="interest"][value="other"]:checked) [data-show-if="interest"][data-show-equals="other"] {
    display: grid;
  }
  .formgong-form:has(select[name="matter_type"] option[value="other"]:checked) [data-show-if="matter_type"][data-show-equals="other"],
  .formgong-form:has(input[name="matter_type"][value="other"]:checked) [data-show-if="matter_type"][data-show-equals="other"] {
    display: grid;
  }
  .formgong-form:has(select[name="may_contact"] option[value="yes"]:checked) [data-show-if="may_contact"][data-show-equals="yes"],
  .formgong-form:has(input[name="may_contact"][value="yes"]:checked) [data-show-if="may_contact"][data-show-equals="yes"] {
    display: grid;
  }
  .formgong-form:has(select[name="medications"] option[value="yes"]:checked) [data-show-if="medications"][data-show-equals="yes"],
  .formgong-form:has(input[name="medications"][value="yes"]:checked) [data-show-if="medications"][data-show-equals="yes"] {
    display: grid;
  }
  .formgong-form:has(select[name="police_report"] option[value="yes"]:checked) [data-show-if="police_report"][data-show-equals="yes"],
  .formgong-form:has(input[name="police_report"][value="yes"]:checked) [data-show-if="police_report"][data-show-equals="yes"] {
    display: grid;
  }
  .formgong-form:has(select[name="reason"] option[value="other"]:checked) [data-show-if="reason"][data-show-equals="other"],
  .formgong-form:has(input[name="reason"][value="other"]:checked) [data-show-if="reason"][data-show-equals="other"] {
    display: grid;
  }
  .formgong-form:has(select[name="service"] option[value="other"]:checked) [data-show-if="service"][data-show-equals="other"],
  .formgong-form:has(input[name="service"][value="other"]:checked) [data-show-if="service"][data-show-equals="other"] {
    display: grid;
  }
  .formgong-form:has(select[name="ticket_type"] option[value="group"]:checked) [data-show-if="ticket_type"][data-show-equals="group"],
  .formgong-form:has(input[name="ticket_type"][value="group"]:checked) [data-show-if="ticket_type"][data-show-equals="group"] {
    display: grid;
  }
  .formgong-form:has(select[name="topic"] option[value="other"]:checked) [data-show-if="topic"][data-show-equals="other"],
  .formgong-form:has(input[name="topic"][value="other"]:checked) [data-show-if="topic"][data-show-equals="other"] {
    display: grid;
  }
  .formgong-form:has(select[name="track"] option[value="other"]:checked) [data-show-if="track"][data-show-equals="other"],
  .formgong-form:has(input[name="track"][value="other"]:checked) [data-show-if="track"][data-show-equals="other"] {
    display: grid;
  }
  .formgong-form:has(select[name="visit_for"] option[value="child"]:checked) [data-show-if="visit_for"][data-show-equals="child"],
  .formgong-form:has(input[name="visit_for"][value="child"]:checked) [data-show-if="visit_for"][data-show-equals="child"] {
    display: grid;
  }
  .formgong-form:has(select[name="with_children"] option[value="yes"]:checked) [data-show-if="with_children"][data-show-equals="yes"],
  .formgong-form:has(input[name="with_children"][value="yes"]:checked) [data-show-if="with_children"][data-show-equals="yes"] {
    display: grid;
  }
  .formgong-form:has(select[name="work"] option[value="other"]:checked) [data-show-if="work"][data-show-equals="other"],
  .formgong-form:has(input[name="work"][value="other"]:checked) [data-show-if="work"][data-show-equals="other"] {
    display: grid;
  }
}
/* formgong:show-if:end */