/* Canonical public-form controls, opt-in visuals and accessible states.
   Context components retain geometry; public-cta.css owns submit visuals. */
/* Opt-in visuals; context owners retain geometry and semantic state styling. */
.ctg-public-form-panel:has(.ctg-public-form-visual),
.ctg-public-form-panel.ctg-public-form-visual {
  border-color: var(--ctg-public-card-border);
  background: var(--ctg-public-card-highlight), var(--ctg-public-card-surface);
  box-shadow: var(--ctg-public-form-elevation);
}
.ctg-public-form-visual {
  --ctg-form-control-bg: var(--ctg-public-field-inset);
  --ctg-form-control-color: var(--ctg-public-heading-dark);
  --ctg-form-control-border: 1px solid var(--ctg-public-card-border);
  --ctg-form-placeholder-color: var(--ctg-public-body-dark);
  --ctg-form-label-color: var(--ctg-public-body-dark);
  --ctg-form-label-float-color: var(--ctg-public-eyebrow-primary);
  --ctg-form-focus-border: var(--ctg-public-focus-ring);
  --ctg-form-focus-outline: 2px solid var(--ctg-public-focus-ring);
  --ctg-form-focus-bg: var(--ctg-public-surface-dark);
  --ctg-form-focus-shadow: 0 0 0 .25rem color-mix(in srgb, var(--ctg-public-eyebrow-primary) 11%, transparent);
  --ctg-form-autofill-bg: var(--ctg-public-field-inset);
  --ctg-form-autofill-color: var(--ctg-public-heading-dark);
}
.ctg-public-form-visual .ctg-public-form-phone {
  border: var(--ctg-form-control-border);
  background: var(--ctg-form-control-bg);
}
.ctg-public-form-visual .ctg-public-form-phone:focus-within {
  border-color: var(--ctg-form-focus-border);
  background: var(--ctg-form-focus-bg);
  box-shadow: var(--ctg-form-focus-shadow);
}
:where(.ctg-public-form),
:where(.ctg-public-form) *,
:where(.ctg-public-form) *::before,
:where(.ctg-public-form) *::after {
  box-sizing: border-box;
}

:where(.ctg-public-form) .ctg-form-control {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: var(--ctg-form-control-min-size, 44px);
  margin: 0;
  border: var(--ctg-form-control-border, 1px solid rgba(127, 136, 151, .4));
  border-radius: var(--ctg-form-control-radius, 8px);
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--ctg-form-control-bg, transparent);
  background-clip: padding-box;
  box-shadow: var(--ctg-form-control-shadow, none);
  color: var(--ctg-form-control-color, inherit);
  -webkit-text-fill-color: var(--ctg-form-control-color, currentColor);
  font-family: var(--ctg-form-control-font, inherit);
  font-size: var(--ctg-form-control-font-size, 1rem);
  font-weight: var(--ctg-form-control-font-weight, 400);
  line-height: var(--ctg-form-control-line-height, 1.4);
  padding: var(--ctg-form-control-padding, 1.35rem 1rem .4rem);
  text-align: start;
  text-overflow: ellipsis;
  scroll-margin-block: 6rem;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

:where(.ctg-public-form) .ctg-form-field {
  position: relative;
}

:where(.ctg-public-form) .ctg-form-field > .ctg-form-label {
  position: absolute;
  z-index: 1;
  top: 50%;
  inset-inline: var(--ctg-form-label-inline, 1rem) auto;
  max-width: calc(100% - (2 * var(--ctg-form-label-inline, 1rem)));
  margin: 0;
  overflow: hidden;
  color: var(--ctg-form-label-color, var(--ctg-form-placeholder-color, #737b87));
  font-family: var(--ctg-form-control-font, inherit);
  font-size: var(--ctg-form-label-size, 1rem);
  font-weight: var(--ctg-form-label-weight, var(--ctg-form-control-font-weight, 400));
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-50%);
  transform-origin: top left;
  transition: color .16s ease, font-size .16s ease, top .16s ease, transform .16s ease;
}

:where(.ctg-public-form) .ctg-form-field:has(textarea) > .ctg-form-label {
  top: var(--ctg-form-textarea-label-top, 1rem);
  transform: none;
}

:where(.ctg-public-form) .ctg-form-field:is(:focus-within, [data-has-value="true"])
  > .ctg-form-label,
:where(.ctg-public-form) .ctg-form-field:has(.ctg-form-control[aria-invalid="true"])
  > .ctg-form-label,
:where(.ctg-public-form) .ctg-form-field:has(.ctg-form-control:-webkit-autofill)
  > .ctg-form-label {
  top: var(--ctg-form-label-float-top, .55rem);
  color: var(--ctg-form-label-float-color, rgba(184, 198, 255, .88));
  font-size: var(--ctg-form-label-float-size, .7rem);
  font-weight: var(--ctg-form-label-float-weight, 650);
  letter-spacing: .035em;
  transform: none;
}

/* A short empty-select prompt does not replace the semantic field label. */
:where(.ctg-public-form) .ctg-form-label > .ctg-form-label__value {
  display: none;
}

:where(.ctg-public-form) .ctg-form-field:is(:focus-within, [data-has-value="true"])
  > .ctg-form-label > .ctg-form-label__prompt,
:where(.ctg-public-form) .ctg-form-field:has(.ctg-form-control[aria-invalid="true"])
  > .ctg-form-label > .ctg-form-label__prompt {
  display: none;
}

:where(.ctg-public-form) .ctg-form-field:is(:focus-within, [data-has-value="true"])
  > .ctg-form-label > .ctg-form-label__value,
:where(.ctg-public-form) .ctg-form-field:has(.ctg-form-control[aria-invalid="true"])
  > .ctg-form-label > .ctg-form-label__value {
  display: inline;
}

:where(.ctg-public-form) .ctg-form-field[data-has-value="false"] > select.ctg-form-control {
  color: transparent;
  -webkit-text-fill-color: transparent;
}

:where(.ctg-public-form) select.ctg-form-control {
  font-family: var(--ctg-form-control-font, inherit);
  font-size: var(--ctg-form-control-font-size, 1rem);
  font-weight: var(--ctg-form-control-font-weight, 400);
  line-height: var(--ctg-form-control-line-height, 1.4);
}

:where(.ctg-public-form) .ctg-form-field > select.ctg-form-control option {
  color: var(--ctg-form-control-color, inherit);
  -webkit-text-fill-color: var(--ctg-form-control-color, currentColor);
}

:where(.ctg-public-form) select.ctg-form-control:not([multiple]):not([size]),
:where(.ctg-public-form) select.ctg-form-control[size="0"],
:where(.ctg-public-form) select.ctg-form-control[size="1"] {
  padding-inline-end: var(--ctg-form-select-padding-end, 44px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23aeb4bf' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E");
  background-position: right var(--ctg-form-select-arrow-offset, 16px) center;
  background-repeat: no-repeat;
  background-size: 10px 6px;
  cursor: pointer;
}

:where(.ctg-public-form) textarea.ctg-form-control {
  min-height: var(--ctg-form-textarea-min-size, 120px);
  overflow: auto;
  resize: var(--ctg-form-textarea-resize, vertical);
}

:where(.ctg-public-form) .ctg-form-control::placeholder {
  color: var(--ctg-form-placeholder-color, #737b87);
  opacity: 1;
  -webkit-text-fill-color: var(--ctg-form-placeholder-color, #737b87);
}

:where(.ctg-public-form) .ctg-form-control:focus {
  outline: none;
}

:where(.ctg-public-form) .ctg-form-control:focus-visible {
  border-color: var(--ctg-form-focus-border, rgba(184, 198, 255, .72));
  outline: var(--ctg-form-focus-outline, 2px solid rgba(184, 198, 255, .72));
  outline-offset: var(--ctg-form-focus-offset, 2px);
  background-color: var(--ctg-form-focus-bg, var(--ctg-form-control-bg, transparent));
  box-shadow: var(--ctg-form-focus-shadow, 0 0 0 3px rgba(184, 198, 255, .1));
}

:where(.ctg-public-form) .ctg-form-control[aria-invalid="true"] {
  border-color: var(--ctg-form-error-border, rgba(255, 133, 133, .72));
  box-shadow: var(--ctg-form-error-shadow, 0 0 0 3px rgba(255, 133, 133, .1));
}

:where(.ctg-public-form) .ctg-form-control:disabled,
:where(.ctg-public-form) .ctg-form-control[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .62;
}

:where(.ctg-public-form[aria-busy="true"]) {
  cursor: progress;
}

:where(.ctg-public-form[aria-busy="true"]) [type="submit"] {
  cursor: progress;
}

:where(.ctg-public-form) .ctg-form-control:-webkit-autofill,
:where(.ctg-public-form) .ctg-form-control:-webkit-autofill:hover,
:where(.ctg-public-form) .ctg-form-control:-webkit-autofill:focus {
  border-color: var(--ctg-form-autofill-border, var(--ctg-form-control-border-color, rgba(184, 198, 255, .45)));
  -webkit-text-fill-color: var(--ctg-form-autofill-color, var(--ctg-form-control-color, currentColor));
  caret-color: var(--ctg-form-autofill-color, var(--ctg-form-control-color, currentColor));
  -webkit-box-shadow: 0 0 0 1000px var(--ctg-form-autofill-bg, var(--ctg-form-control-bg, #fff)) inset;
  box-shadow: 0 0 0 1000px var(--ctg-form-autofill-bg, var(--ctg-form-control-bg, #fff)) inset;
  transition: background-color 9999s ease-out 0s;
  animation: ctg-form-autofill 1ms both;
}

@keyframes ctg-form-autofill {
  from { opacity: .9999; }
  to { opacity: 1; }
}

.ctg-form-label {
  color: inherit;
}

.ctg-form-required {
  color: var(--ctg-form-required-color, currentColor);
}

.ctg-form-field__support,
.ctg-form-field__error,
.ctg-form-status {
  font-family: var(--ctg-form-message-font, inherit);
  font-size: var(--ctg-form-message-size, .8125rem);
  line-height: 1.45;
}

.ctg-form-field__support {
  margin:var(--ctg-form-error-margin, .5rem 0 0);
  color:var(--ctg-form-placeholder-color, var(--ctg-public-body-dark));
  overflow-wrap:anywhere;
}

/* A helper must not move the floating label's center below its control.
   Label and control share the first intrinsic row; messages follow below. */
:where(.ctg-public-form) .ctg-form-field:has(> .ctg-form-field__support) {
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  align-content:start;
}
:where(.ctg-public-form) .ctg-form-field:has(> .ctg-form-field__support)
  > :is(.ctg-form-label, .ctg-form-control) {
  grid-area:1 / 1;
}
:where(.ctg-public-form) .ctg-form-field:has(> .ctg-form-field__support) > .ctg-form-label {
  position:relative;
  align-self:center;
  top:auto;
  width:fit-content;
  transform:none;
}
:where(.ctg-public-form) .ctg-form-field:has(> .ctg-form-field__support):is(
  :focus-within, [data-has-value="true"], :has(.ctg-form-control[aria-invalid="true"]),
  :has(.ctg-form-control:-webkit-autofill)
) > .ctg-form-label {
  align-self:start;
  top:var(--ctg-form-label-float-top, .55rem);
}

.ctg-form-field__error {
  margin: var(--ctg-form-error-margin, .5rem 0 0);
  color: var(--ctg-form-error-color, #ffd2d2);
  overflow-wrap: anywhere;
}

.ctg-form-field__error[hidden] {
  display: none;
}

.ctg-form-status {
  margin: var(--ctg-form-status-margin, .75rem 0 0);
  color: var(--ctg-form-status-color, inherit);
}

.ctg-form-status[data-state="validation-error"],
.ctg-form-status[data-state="server-error"],
.ctg-form-status[data-state="rate-limited"] {
  color: var(--ctg-form-error-color, #ffd2d2);
}

.ctg-public-form .ctg-form-system-error {
  grid-column: 1 / -1;
  padding: clamp(1rem, 2vw, 1.25rem);
  margin: 0 0 .5rem;
  border: 1px solid rgba(225, 133, 141, .42);
  border-radius: 8px;
  background: #30252b;
  color: #ffe3e5;
  text-align: start;
}

.ctg-public-form .ctg-form-system-error__heading {
  margin: 0;
  font: 600 1rem/1.4 var(--font-body, "Manrope", sans-serif);
}

.ctg-public-form .ctg-form-system-error__support {
  margin: .375rem 0 0;
  font: 400 .9375rem/1.5 var(--font-body, "Manrope", sans-serif);
  color: #e9cdd1;
}

.ctg-form-label--hidden,
.ctg-form-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 767px) {
  :where(.ctg-public-form) .ctg-form-control {
    font-size: max(1rem, var(--ctg-form-control-font-size, 1rem));
  }

  :where(.ctg-public-form) .ctg-form-field > .ctg-form-label {
    --ctg-form-label-float-size: .75rem;
    --ctg-form-label-float-top: .375rem;
  }

  .ctg-public-form .ctg-form-field > .ctg-form-control {
    min-height: 3.5rem;
    padding-block: 1.5rem .45rem;
    padding-inline-start: var(--ctg-form-label-inline, 1rem);
  }

  .ctg-public-form .ctg-form-field > textarea.ctg-form-control {
    min-height: var(--ctg-form-textarea-min-size, 120px);
    padding-block: 1.75rem .75rem;
  }

  .ctg-public-form .ctg-form-field > .ctg-form-control:focus-visible {
    outline-offset: 1px;
    box-shadow: none;
  }

  .ctg-public-form .ctg-form-field > .ctg-form-field__error {
    margin-block: .5rem 0;
    padding-inline: .125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.ctg-public-form) .ctg-form-control,
  :where(.ctg-public-form) .ctg-form-field > .ctg-form-label {
    transition: none;
  }
}