/*
  Form — Website Refresh 2026 1e (Figma), "Form" frame.
  Source: https://www.figma.com/design/2W6CyIAW3cKDEqdv26CeE2/Website-Refresh-2026-1e?node-id=4034-30206

  Requires tokens.css, icons.css, and typography.css loaded first.

  Built with real form elements throughout (input/select/textarea)
  rather than styled divs — this is the one part of the system where
  that matters even for a static prototype, since it's the part most
  likely to need genuine submission behaviour once wired into the
  legacy site/PHP backend. Native elements also give checkboxes,
  radios, and focus states for free (:checked, :focus-visible)
  without any JS.

  Where Figma's export decomposes something the browser already does
  natively — the Password field's 12 individual dot characters, the
  Textarea's hand-drawn resize-handle triangle — a native
  input[type=password] / textarea[resize] is used instead, since it
  produces the same result with far less markup and works correctly
  by default (see the Password Field and Textarea sections below).
*/

/* ---------- Form Field Label ---------- */
/* Two confirmed variants: Standard Label (+ optional "required"
   badge) and Secondary Info Label (label + right-aligned count/hint,
   space-between). Two more variants exist in Figma (Dark, Dark With
   Secondary Info) but are hidden in the showcase and never
   instanced anywhere seen so far — not built, since it's unclear
   whether "Dark" means dark text (for light backgrounds) or a
   dark-background treatment, and Form CTA's own dark-background
   labels use a plain colour override rather than referencing either
   of these variants. Flagging rather than guessing. */

.rs-form-field-label {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
}

.rs-form-field-label--secondary {
  justify-content: space-between;
}

.rs-form-field-label__text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-neutral-900);
  white-space: nowrap;
}

.rs-form-field-label__required {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px 5px 6px;
  border: 1px solid rgba(204, 130, 0, 0.2);
  border-radius: 2px;
  background-color: #fef7eb;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  color: var(--color-neutral-900);
  white-space: nowrap;
}

.rs-form-field-label__secondary {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  color: var(--color-neutral-600);
}

/* ---------- Text Input Field ---------- */
/* The neutral-100 "halo" Figma shows behind the Focus state (an
   outer wrapper gaining a background colour around the white/
   purple-bordered field) is simplified here to a straightforward
   border-colour change on focus — the halo is a subtle enough effect
   that it isn't worth a two-layer wrapper for every field. Flag if
   that halo turns out to matter. */

.rs-text-input-field {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  padding: 0 var(--space-6) 0 var(--space-12);
  border: 1px solid var(--color-form-field-border);
  border-radius: var(--space-6);
  background-color: var(--color-neutral-white-50);
}

.rs-text-input-field:focus-within {
  border-color: var(--color-form-field-border-focus);
}

.rs-text-input-field__input {
  flex: 1 1 0%;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutral-900);
}

.rs-text-input-field__input::placeholder {
  color: var(--color-neutral-700);
  opacity: 1;
}

.rs-text-input-field__icon {
  flex-shrink: 0;
  color: var(--color-neutral-900);
}

.rs-text-input-field__button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: var(--space-6);
  background-color: var(--color-neutral-200);
  color: var(--color-neutral-900);
  cursor: pointer;
}

.rs-text-input-field__button .rs-icon {
  width: 15px;
  height: 15px;
}

/* ---------- Password Field ---------- */
/* A native input[type=password] renders its own masking dots — no
   need to hand-build 12 dot elements the way Figma's export does.
   The show/hide link toggles the input's type via JS. */

.rs-password-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  width: 100%;
}

.rs-password-field__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-decoration: underline;
  color: var(--color-purple-700);
}

.rs-password-field__toggle .rs-icon {
  width: 16px;
  height: 16px;
}

.rs-password-field__toggle .rs-icon--hide {
  display: none;
}

.rs-password-field__toggle[aria-pressed="true"] .rs-icon--show {
  display: none;
}
.rs-password-field__toggle[aria-pressed="true"] .rs-icon--hide {
  display: block;
}

/* ---------- Checkbox ---------- */
/* Real input[type=checkbox], visually hidden but still focusable/
   clickable, with a sibling box + check icon styled from its
   :checked and :focus-visible state — no JS needed. */

.rs-checkbox {
  position: relative;
  display: inline-flex;
  width: 36px;
  height: 36px;
}

.rs-checkbox--table-cell {
  width: 24px;
  height: 24px;
}

.rs-checkbox__input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.rs-checkbox__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-form-field-border);
  border-radius: var(--space-4);
  box-sizing: border-box;
}

.rs-checkbox--table-cell .rs-checkbox__box {
  border-radius: 2.667px;
}

.rs-checkbox__check {
  width: 24px;
  height: 24px;
  color: var(--color-neutral-900);
  opacity: 0;
}

.rs-checkbox--table-cell .rs-checkbox__check {
  width: 16px;
  height: 16px;
}

.rs-checkbox__input:checked ~ .rs-checkbox__box .rs-checkbox__check {
  opacity: 1;
}

.rs-checkbox__input:focus-visible ~ .rs-checkbox__box {
  border-color: var(--color-form-field-border-focus);
}

/* ---------- Radio ---------- */

.rs-radio {
  position: relative;
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.rs-radio__input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.rs-radio__circle {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-form-field-border);
  border-radius: 50%;
  box-sizing: border-box;
  position: relative;
}

.rs-radio__circle::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background-color: var(--color-purple-700);
  opacity: 0;
}

.rs-radio__input:checked ~ .rs-radio__circle::after {
  opacity: 1;
}

.rs-radio__input:focus-visible ~ .rs-radio__circle {
  border-color: var(--color-form-field-border-focus);
}

/* ---------- Checkbox Field / Radio Field ---------- */
/* Default type centres the single-line label against the 36px
   control (8px top padding for Checkbox's 20px line-height, 6px for
   Radio's 24px line-height — both land the label's vertical centre
   on the control's). With Hint Text drops that padding since two
   lines of text roughly matches the control's height already. */

.rs-checkbox-field,
.rs-radio-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  width: 100%;
  max-width: 358px;
  cursor: pointer;
}

.rs-checkbox-field__label-wrap,
.rs-radio-field__label-wrap {
  flex: 1 1 0%;
  min-width: 0;
}

.rs-checkbox-field--default .rs-checkbox-field__label-wrap {
  padding-top: var(--space-8);
}

.rs-radio-field--default .rs-radio-field__label-wrap {
  padding-top: 6px;
}

.rs-checkbox-field__label,
.rs-radio-field__label {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-neutral-900);
}

.rs-checkbox-field--default .rs-checkbox-field__label {
  line-height: 20px;
}

.rs-checkbox-field--hint .rs-checkbox-field__label {
  line-height: 20px;
  margin-bottom: var(--space-4);
}

.rs-radio-field--default .rs-radio-field__label {
  line-height: 24px;
}

.rs-radio-field--hint .rs-radio-field__label {
  line-height: 20px;
  margin-bottom: var(--space-4);
}

.rs-checkbox-field__hint,
.rs-radio-field__hint {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: var(--color-neutral-600);
}

/* ---------- Checkbox Set / Radio Set ---------- */

.rs-checkbox-set,
.rs-radio-set {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  width: 100%;
  max-width: 358px;
  padding-top: var(--space-4);
  border: none;
  margin: 0;
}

/* ---------- Textarea ---------- */
/* A native <textarea> with CSS resize gives the same drag-to-resize
   behaviour as Figma's hand-drawn corner handle, for free. */

.rs-textarea {
  display: block;
  width: 100%;
  min-height: 140px;
  box-sizing: border-box;
  padding: var(--space-12);
  border: 1px solid var(--color-neutral-700);
  border-radius: var(--space-6);
  background-color: var(--color-neutral-white-50);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-neutral-900);
  resize: vertical;
}

.rs-textarea:focus {
  outline: none;
  border-color: var(--color-form-field-border-focus);
}

/* ---------- Form CTA ---------- */
/* The Purple/700 contact-form card used by Content Block Row's
   Global CTA variant. Its Text Input Field / Form Field Label /
   Dropdown look different from the standalone components above
   (translucent light borders and text, not the standard dark ones)
   because it sits on a dark background — implemented as scoped
   overrides here rather than new general-purpose modifiers on the
   base components, since this specific translucent-light treatment
   hasn't been confirmed anywhere else in the file.

   The badge at the top of the card is .rs-badge--form-feature or
   .rs-badge--form-sector from badge.css (requires that file loaded
   too, whichever variant a given page uses) — not styled here, so
   the two stay in sync instead of drifting apart. */

.rs-form-cta {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-40) var(--space-48) var(--space-48) var(--space-48);
  border-radius: var(--space-16);
  background-color: var(--color-purple-700);
}

.rs-form-cta__badge {
  margin-bottom: var(--space-16);
}

.rs-form-cta__heading {
  margin: 0 0 var(--space-16) 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--color-purple-200);
}

.rs-form-cta__heading-highlight {
  color: var(--color-neutral-white-50);
}

.rs-form-cta__body {
  margin: 0 0 var(--space-24) 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-transparency-light-90);
}

.rs-form-cta__row {
  display: flex;
  gap: var(--space-16);
  width: 100%;
}

.rs-form-cta__field {
  flex: 1 1 0%;
  min-width: 0;
  padding-bottom: var(--form-field-margin-bottom);
}

.rs-form-cta .rs-form-field-label__text {
  color: var(--color-transparency-light-90);
}

.rs-form-cta .rs-text-input-field,
.rs-form-cta .rs-dropdown-field__control {
  border: 2px solid var(--color-transparency-light-60);
  background-color: transparent;
}

.rs-form-cta .rs-text-input-field__input {
  color: var(--color-transparency-light-90);
}

.rs-form-cta .rs-text-input-field__input::placeholder {
  color: var(--color-transparency-light-60);
}

.rs-dropdown-field {
  width: 100%;
}

.rs-dropdown-field__control {
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  padding: 0 var(--space-12);
  border: 1px solid var(--color-form-field-border);
  border-radius: var(--space-6);
  background-color: var(--color-neutral-white-50);
}

.rs-dropdown-field__select {
  flex: 1 1 0%;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23191a18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right center / 24px 24px no-repeat;
  appearance: none;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutral-900);
  padding-right: var(--space-24);
}

.rs-form-cta .rs-dropdown-field__select {
  color: var(--color-transparency-light-90);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-opacity='0.9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.rs-form-cta .rs-dropdown-field__select option {
  color: var(--color-neutral-900);
}

@media (max-width: 640px) {
  .rs-form-cta {
    padding: var(--space-24);
  }

  .rs-form-cta__row {
    flex-direction: column;
    gap: 0;
  }
}

/* 768px here, not 640px above — matched to .rs-heading--h1's own
   mobile breakpoint (typography.css) rather than this file's usual
   640px, so the two actually land on the same size at the same
   viewport width instead of just coincidentally matching below
   640px. "Frequently asked questions" (the FAQ section heading this
   is meant to match) is a plain .rs-heading--h1; this isn't, since it
   also carries the highlighted-span colour and the tighter -1px
   desktop tracking, so it needs its own copy of the mobile step
   rather than being able to just add that class. */
@media (max-width: 768px) {
  .rs-form-cta__heading {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.25px;
  }

  /* Same Body/Default step as .rs-body--default and .rs-paragraph
     (typography.css) — 20px down to 16px — this just isn't built on
     either of those shared classes itself. */
  .rs-form-cta__body {
    font-size: 16px;
  }
}