/* ==========================================================================
   fk-form — VALIDATED design of the fk_tbx_form module (step F4).
   Origin: the fk-form design proposal (no Figma exists for this component;
   every value below is anchored in the delivered fk-ui charter — sources
   cited per rule, paths relative to docs/reference/fk-ui/fk-ui/src/scss/),
   validated by the user with two acted retouches applied here:
   (1) focus state = accent border ONLY — every focus halo/box-shadow of the
       proposal is removed;
   (2) card capped at 720px, centered (already part of the validated file).

   Self-contained stylesheet: the future module ships its own assets. It
   consumes ONLY the theme CSS custom properties (--* tokens declared by
   themes/fk_tbx/src/scss/_tokens.scss) and requires NO theme CSS class.

   Single non-token literal: #ef4444 — the delivered $danger invariant
   (fk-ui theme/_variable-base.scss:163-165). It is deliberately NOT exposed
   as a CSS custom property in the delivery (Bootstrap name collision, see
   the comment there), so it is assumed here as a hard-coded literal.

   Breakpoints 576/768px = delivered $breakpoint-sm/$breakpoint-md
   (theme/_variable-base.scss:192-193). Transitions = delivered
   $transition-fast/$transition-base (theme/_variable-base.scss:188-189).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section + card
   Card recipe anchored on the delivered white cards:
   - white bg + radius-lg + padding 16px mobile / 32px desktop:
     pages/_solution-easy.scss:44-52
   - white bg + shadow-sm: components/catalog/_product-card-slider.scss:3-10
   - section vertical rhythm 48px: components/content/_bloc-faq.scss:5
   Max-width cap: no delivered form to anchor on; readability precedent is
   .section-header .title-group max-width 600px (_base-custom.scss:163-165).
   720px chosen for a full form — flagged as a derived fine value.
   -------------------------------------------------------------------------- */
.fk-form {
  padding: 32px 0;
  font-family: var(--font-display);
  color: var(--primary-color);
}

@media (min-width: 576px) {
  .fk-form {
    padding: 48px 0;
  }
}

.fk-form__card {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}

@media (min-width: 768px) {
  .fk-form__card {
    padding: 32px;
  }
}

/* Stacked cards in the same section (e.g. success state demo) */
.fk-form__card + .fk-form__card {
  margin-top: 24px;
}

/* --------------------------------------------------------------------------
   Title + description
   h2 metrics: _base-custom.scss:83-94 (font-primary, weight 700) sized on
   .section-title 32px / 26px mobile (_base-custom.scss:177-181), heading
   line-height 1.25 (_base-custom.scss:67-70).
   Description: 16px like .section-desc (_base-custom.scss:184-188) and
   .bloc-faq__description (components/content/_bloc-faq.scss:62-66); muted
   ink = rgba(primary, .65) per the fk-form spec.
   Header spacing: .bloc-faq__header margin-bottom 24px + gap 8px
   (components/content/_bloc-faq.scss:48-55).
   -------------------------------------------------------------------------- */
.fk-form__title {
  font-family: var(--font-primary);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--primary-color);
  margin: 0 0 8px;
}

@media (min-width: 768px) {
  .fk-form__title {
    font-size: 32px;
  }
}

.fk-form__description {
  font-size: 16px;
  color: rgba(var(--primary-color-rgb), 0.65);
  margin: 0 0 24px;
}

/* --------------------------------------------------------------------------
   Form layout — simple stack (mobile-first, like the delivered search form
   column stack, components/globals/_search-panel.scss:41-50; field gap 20px
   from the delivered 20px rhythm, _base-custom.scss:156-161).
   -------------------------------------------------------------------------- */
.fk-form__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 576px) {
  .fk-form__form {
    gap: 20px;
  }
}

/* --------------------------------------------------------------------------
   Field: label + control + help
   Label: 14px / 600 like the delivered ACA pill tabs
   (components/globals/_search-panel.scss:106-112) and group titles
   (components/globals/_search-panel.scss:209-214, 13px/700).
   -------------------------------------------------------------------------- */
.fk-form__field {
  margin: 0; /* also neutralises fieldset default */
  padding: 0;
  border: 0;
  min-width: 0;
}

.fk-form__label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 8px;
}

/* Required marker — accent ink per the fk-form spec */
.fk-form__required {
  color: var(--accent-color);
}

/* --------------------------------------------------------------------------
   Controls (input / select / textarea)
   Border 1px + radius + block padding anchored on the delivered controls:
   - search select/input: 1px border, padding 12px 10px, 16px type scaling
     to 14px on mobile (components/globals/_search-panel.scss:52-73)
   - live-filter input: padding 10px 16px, 14px/500
     (components/catalog/_live-filter.scss:22-39)
   Padding 10px 14px per the fk-form spec (~.625rem .875rem), radius-sm as
   on delivered small controls (.btn-sm, _base-custom.scss:273-277).
   Focus: border-color accent is the delivered motif
   (components/globals/_search-panel.scss:64-67, _live-filter.scss:35-38);
   the 3px halo uses the delivered ring pattern box-shadow 0 0 0 <w>
   (_base-custom.scss:43-47) with --accent-light = rgba(accent, .2)
   (theme/_variable-base.scss:119). Exact 3px width: fk-form spec.
   -------------------------------------------------------------------------- */
.fk-form__control {
  display: block;
  width: 100%;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--primary-color);
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
  .fk-form__control {
    font-size: 16px;
  }
}

.fk-form__control::placeholder {
  color: rgba(var(--primary-color-rgb), 0.65);
}

/* Acted retouch (1): accent border only, no focus halo. */
.fk-form__control:focus {
  outline: 0;
  border-color: var(--accent-color);
}

/* Native date/time pickers (input[type=date] / [type=datetime-local]):
   deliberate modernisation — no jQuery UI datepicker, no extra CSS needed. */

textarea.fk-form__control {
  min-height: 120px;
  resize: vertical;
}

select.fk-form__control {
  cursor: pointer;
}

.fk-form__help {
  font-size: 13px;
  color: rgba(var(--primary-color-rgb), 0.65);
  margin: 8px 0 0;
}

/* --------------------------------------------------------------------------
   Radio / checkbox groups — native controls tinted with the theme accent
   (accent-color property; deliberate modernisation, no custom widget).
   8px option gap = pervasive delivered gap (_search-panel.scss:44,161).
   14px option type = delivered secondary type scale.
   -------------------------------------------------------------------------- */
.fk-form__legend {
  display: block;
  width: 100%;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 8px;
}

.fk-form__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fk-form__option {
  display: flex;
  align-items: flex-start; /* keeps the box on the first line of wrapped labels */
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  color: var(--primary-color);
  cursor: pointer;
}

.fk-form__option input {
  accent-color: var(--accent-color);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 2px 0 0; /* optical centering on the 14px/1.4 first text line */
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   File upload — hidden native input + label styled as the delivered
   secondary CTA: .btn.btn-secondary-outline (2px accent border, accent ink,
   filled accent on hover — _base-custom.scss:263-271) at .btn-sm metrics
   (padding 8px 16px, 13px — _base-custom.scss:273-277), weight 600 and 8px
   gap from the .btn base (_base-custom.scss:192-207), pill radius like the
   delivered ACA CTAs (_base-custom.scss:199-200).
   -------------------------------------------------------------------------- */
.fk-form__file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.fk-form__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fk-form__file-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-color);
  background-color: transparent;
  border: 2px solid var(--accent-color);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Acted retouch (1): the focus-visible halo of the proposal is removed —
   the filled-accent state alone signals keyboard focus on the trigger. */
.fk-form__file-trigger:hover,
.fk-form__file-input:focus-visible + .fk-form__file-trigger {
  background-color: var(--accent-color);
  color: var(--accent-revert-color);
}

.fk-form__file-name {
  font-size: 13px;
  color: rgba(var(--primary-color-rgb), 0.65);
}

/* --------------------------------------------------------------------------
   Errors
   Ink/weight/offset anchored on the delivered inline error
   .home-hero-aca__immat-error: $danger, 13px, 600, margin-top 8px
   (components/globals/_search-panel.scss:177-183).
   #ef4444 literal: see file header.
   -------------------------------------------------------------------------- */
.fk-form__field--error .fk-form__control {
  border-color: #ef4444;
}

.fk-form__error {
  font-size: 13px;
  font-weight: 600;
  color: #ef4444;
  margin: 8px 0 0;
}

/* --------------------------------------------------------------------------
   Alerts (summary error banner / success banner)
   Shell anchored on the delivered notice pill .home-hero-aca__auto-confirm:
   tinted bg, padding 10px 14px, 600 primary ink
   (components/globals/_search-panel.scss:223-231); radius-sm + 3px left
   border per the fk-form spec.
   -------------------------------------------------------------------------- */
.fk-form__alert {
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--primary-color);
}

.fk-form__alert--error {
  background-color: rgba(239, 68, 68, 0.08); /* $danger literal, see header */
  border-left: 3px solid #ef4444;
  margin-bottom: 24px;
}

.fk-form__alert-title {
  display: block;
  font-weight: 600;
  margin: 0;
}

.fk-form__alert-list {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 13px;
}

.fk-form__alert-list a {
  color: #ef4444;
  text-decoration: underline;
}

.fk-form__alert--success {
  background-color: rgba(var(--accent-color-rgb), 0.12);
  border-left: 3px solid var(--accent-color);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Captcha — image + reload link + answer input.
   Image frame = control frame (border-color 1px, radius-sm). Reload link:
   accent ink, underline on hover, 13px/600 like the delivered text links
   rhythm (components/globals/_search-panel.scss:160-166).
   -------------------------------------------------------------------------- */
.fk-form__captcha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.fk-form__captcha-img {
  display: block;
  width: 152px;
  height: 40px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.fk-form__captcha-refresh {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-color);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.fk-form__captcha-refresh:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

.fk-form__captcha .fk-form__control {
  flex: 1 1 160px;
  min-width: 160px;
}

/* --------------------------------------------------------------------------
   Submit — self-contained delivered CTA pill (no theme .btn class needed).
   Metrics from the delivered .btn base: inline-flex, padding 12px 24px,
   600/15px, 8px gap, font-primary (_base-custom.scss:192-207); pill radius
   like the delivered ACA CTAs (_base-custom.scss:199-200); secondary fill
   from .btn-secondary (_base-custom.scss:223-231) with its delivered hover
   inversion motif (white fill, secondary ink over the 2px secondary
   border) — used instead of a brightness filter.
   -------------------------------------------------------------------------- */
.fk-form__actions {
  margin-top: 4px;
}

.fk-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: var(--accent-revert-color);
  background-color: var(--secondary-color);
  border: 2px solid var(--secondary-color);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fk-form__submit:hover {
  background-color: var(--white);
  color: var(--secondary-color);
}

/* Acted retouch (1): accent border only, no focus halo. */
.fk-form__submit:focus-visible {
  outline: 0;
  border-color: var(--accent-color);
}

/* --------------------------------------------------------------------------
   Free HTML block field type — rendered bare in the form flow, inherits the
   surrounding type. Only trailing-margin cleanup, no extra chrome.
   -------------------------------------------------------------------------- */
.fk-form__html > :last-child {
  margin-bottom: 0;
}