/* Layered baseline (sfx.components). Living in @layer is intentional:
   unlayered rules — Bricks Builder element styles, child theme, user
   custom CSS — win automatically without !important or specificity
   wars, regardless of selector specificity in here. Do not unwrap the
   @layer block. */
@layer sfx.components {

/* ========================================
   FORM STYLES (nested)
   Longhands use --sfx-form-* / --sfx-form-submit-* only.
   Define --form-* and --form-submit-* in Core Framework; theme maps with literals.
   ======================================== */

:is(.brxe-form, .brxe-brf-pro-forms) {
  --sfx-form-input-height: var(--form-input-height, 42px);
  --sfx-form-label-margin-bottom: var(--form-label-margin-bottom, 0.625rem);
  --sfx-form-label-font-size: var(--form-label-font-size, 0.875rem);
  --sfx-form-label-line-height: var(--form-label-line-height, 1.4);
  --sfx-form-label-font-weight: var(--form-label-font-weight, 500);
  --sfx-form-label-color: var(--form-label-color, var(--text, #111827));
  --sfx-form-padding-block: var(--form-padding-block, 0.5rem);
  --sfx-form-padding-inline: var(--form-padding-inline, 0.75rem);
  --sfx-form-border-width: var(--form-border-width, 1px);
  --sfx-form-border-color: var(--form-border-color, #e5e7eb);
  --sfx-form-border-radius: var(--form-border-radius, 0.5rem);
  --sfx-form-font-size: var(--form-font-size, 1rem);
  --sfx-form-line-height: var(--form-line-height, 1.5);
  --sfx-form-font-family: var(--form-font-family, inherit);
  --sfx-form-font-weight: var(--form-font-weight, 400);
  --sfx-form-letter-spacing: var(--form-letter-spacing, normal);
  --sfx-form-input-bg: var(--form-input-bg, #ffffff);
  --sfx-form-color: var(--form-color, var(--text, #111111));
  /* Placeholders inherit field typography unless --form-placeholder-* overrides. */
  --sfx-form-placeholder-font-family: var(--form-placeholder-font-family, var(--form-font-family, inherit));
  --sfx-form-placeholder-font-weight: var(--form-placeholder-font-weight, var(--form-font-weight, 400));
  --sfx-form-placeholder-letter-spacing: var(--form-placeholder-letter-spacing, var(--form-letter-spacing, normal));
  /* Select inherits field typography unless --form-select-* overrides. */
  --sfx-form-select-font-family: var(--form-select-font-family, var(--form-font-family, inherit));
  --sfx-form-select-font-size: var(--form-select-font-size, var(--form-font-size, 1rem));
  --sfx-form-select-font-weight: var(--form-select-font-weight, var(--form-font-weight, 400));
  --sfx-form-select-line-height: var(--form-select-line-height, var(--form-line-height, 1.5));
  --sfx-form-select-letter-spacing: var(--form-select-letter-spacing, var(--form-letter-spacing, normal));
  --sfx-form-placeholder-font-size: var(--form-placeholder-font-size, var(--form-font-size, 0.875rem));
  --sfx-form-placeholder-line-height: var(--form-placeholder-line-height, var(--form-line-height, 1.4));
  --sfx-form-placeholder-color: var(--form-placeholder-color, #6b7280);
  --sfx-form-options-gap: var(--form-options-gap, 0.75rem);
  --sfx-form-option-row-gap: var(--form-option-row-gap, 0.25rem);
  --sfx-form-radius-small: var(--form-radius-small, 0.35rem);
  --sfx-form-focus-width: var(--form-focus-width, 2px);
  --sfx-form-focus-color: var(--form-focus-color, var(--primary, #2563eb));
  --sfx-form-focus-offset: var(--form-focus-offset, 2px);
  --sfx-form-focus-ring: var(--form-focus-ring, none);
  --sfx-form-radio-active-color: var(--form-radio-active-color, var(--primary, #2563eb));
  --sfx-form-icon-color: var(--form-icon-color, #ffffff);
  --sfx-form-icon-scale: var(--form-icon-scale, 70%);
  --sfx-form-checkbox-icon: var(--form-checkbox-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='m14.914 4l-9.47 9.47L1.09 8.393L2.608 7.09l2.948 3.44L13.5 2.585z'/%3E%3C/svg%3E"));
  --sfx-form-group-spacing: var(--form-group-spacing, 1.25rem);
  --sfx-form-error-bg: var(--form-error-bg, var(--danger-bg, #fee2e2));
  --sfx-form-error-color: var(--form-error-color, var(--danger-fg, #991b1b));
  --sfx-form-error-font-size: var(--form-error-font-size, 0.75rem);
  --sfx-form-error-margin-block-start: var(--form-error-margin-block-start, 0.5rem);
  --sfx-form-error-padding-block: var(--form-error-padding-block, 0.5rem);
  --sfx-form-error-padding-inline: var(--form-error-padding-inline, 0.75rem);
  --sfx-form-error-border-radius: var(--form-error-border-radius, 0.5rem);
  --sfx-form-error-triangle-size: var(--form-error-triangle-size, 6px);
  --sfx-form-error-triangle-offset: var(--form-error-triangle-offset, 12px);
  --sfx-form-error-triangle-color: var(--form-error-triangle-color, var(--form-error-bg, #fee2e2));
  --sfx-form-file-remove-bg: var(--form-file-remove-bg, #fecaca);
  --sfx-form-file-remove-border: var(--form-file-remove-border, #fecaca);
  --sfx-form-file-remove-color: var(--form-file-remove-color, var(--danger, #dc2626));
  --sfx-form-file-remove-hover-bg: var(--form-file-remove-hover-bg, var(--danger, #dc2626));
  --sfx-form-file-remove-hover-color: var(--form-file-remove-hover-color, #ffffff);
  --sfx-form-submit-padding-block: var(--form-submit-padding-block, 0.375rem);
  --sfx-form-submit-padding-inline: var(--form-submit-padding-inline, 1rem);
  --sfx-form-submit-border-width: var(--form-submit-border-width, 1px);
  --sfx-form-submit-border-color: var(--form-submit-border-color, #e5e7eb);
  --sfx-form-submit-border-radius: var(--form-submit-border-radius, 0.5rem);
  --sfx-form-choose-files-padding-block: var(--form-choose-files-padding-block, 0);
  --sfx-form-choose-files-padding-inline: var(--form-choose-files-padding-inline, 1rem);
  --sfx-form-select-padding-inline-end: var(--form-select-padding-inline-end, 2.25rem);
  /* Component-wide transitions */
  --sfx-form-transition: var(--form-transition, all .15s ease);
  --sfx-form-placeholder-transition: var(--form-placeholder-transition, opacity .2s ease);
  /* State surfaces (file-result success/error) */
  --sfx-form-success-surface-fg: var(--form-success-surface-fg, var(--success, #16a34a));
  --sfx-form-success-surface: var(--form-success-surface, color-mix(in srgb, var(--sfx-form-success-surface-fg) 5%, var(--sfx-form-input-bg)));
  --sfx-form-error-surface-fg: var(--form-error-surface-fg, var(--danger, #dc2626));
  --sfx-form-error-surface: var(--form-error-surface, color-mix(in srgb, var(--sfx-form-error-surface-fg) 5%, var(--sfx-form-input-bg)));
  /* File-result spacing */
  --sfx-form-file-result-gap: var(--form-file-result-gap, 0.75rem);
  --sfx-form-file-result-padding: var(--form-file-result-padding, 0.75rem);
  --sfx-form-file-result-icon-size: var(--form-file-result-icon-size, 16px);
  --sfx-form-submit-sending-gap: var(--form-submit-sending-gap, 8px);

  /* Base sizes for inputs/selects */
  & input[type="text"],
  & input[type="email"],
  & input[type="url"],
  & input[type="tel"],
  & input[type="search"],
  & input[type="password"],
  & input[type="number"],
  & input[type="date"],
  & input[type="datetime-local"],
  & input[type="month"],
  & input[type="week"],
  & input[type="time"],
  & select {
    min-height: var(--sfx-form-input-height);
  }

  & label {
    margin-bottom: var(--sfx-form-label-margin-bottom) !important;
  }

  & .form-group {
    & label {
      font-size: var(--sfx-form-label-font-size);
      line-height: var(--sfx-form-label-line-height);
      text-transform: none;
      font-weight: var(--sfx-form-label-font-weight);
      color: var(--sfx-form-label-color);
    }

    /* Text-like fields: same chrome for inputs, textarea, and select (not checkbox/radio/file). */
    & :is(
      input[type="text"],
      input[type="email"],
      input[type="url"],
      input[type="tel"],
      input[type="search"],
      input[type="password"],
      input[type="number"],
      input[type="date"],
      input[type="datetime-local"],
      input[type="month"],
      input[type="week"],
      input[type="time"],
      select,
      textarea
    ) {
      padding-top: var(--sfx-form-padding-block);
      padding-right: var(--sfx-form-padding-inline);
      padding-bottom: var(--sfx-form-padding-block);
      padding-left: var(--sfx-form-padding-inline);
      border: var(--sfx-form-border-width) solid var(--sfx-form-border-color);
      border-radius: var(--sfx-form-border-radius);
      font-family: var(--sfx-form-font-family);
      font-size: var(--sfx-form-font-size);
      font-weight: var(--sfx-form-font-weight);
      line-height: var(--sfx-form-line-height);
      letter-spacing: var(--sfx-form-letter-spacing);
      background-color: var(--sfx-form-input-bg);
      color: var(--sfx-form-color);
      box-sizing: border-box;
      max-width: 100%;
    }

    /* Select typography: defaults match text fields; set --form-select-* only when diverging. */
    & select {
      font-family: var(--sfx-form-select-font-family);
      font-size: var(--sfx-form-select-font-size);
      font-weight: var(--sfx-form-select-font-weight);
      line-height: var(--sfx-form-select-line-height);
      letter-spacing: var(--sfx-form-select-letter-spacing);
    }

    /* Native dropdown arrow; multi-select keeps symmetric padding. */
    & select:not([multiple]) {
      padding-inline-end: var(--sfx-form-select-padding-inline-end);
    }

    & .options-wrapper {
      display: flex;
      gap: var(--sfx-form-options-gap);

      &>li:has([type=radio], [type=checkbox]) {
        display: flex;
        align-items: center !important;
        gap: var(--sfx-form-option-row-gap);

        & label {
          margin: 0 !important;
        }
      }
    }
  }

  & ::placeholder {
    font-family: var(--sfx-form-placeholder-font-family);
    font-size: var(--sfx-form-placeholder-font-size);
    font-weight: var(--sfx-form-placeholder-font-weight);
    line-height: var(--sfx-form-placeholder-line-height);
    letter-spacing: var(--sfx-form-placeholder-letter-spacing);
    color: var(--sfx-form-placeholder-color);
    transition: var(--sfx-form-placeholder-transition);
  }

  & :is(input, textarea):focus::placeholder {
    opacity: 0;
  }

  & .bricks-button,
  & button[type="submit"],
  & input[type="submit"] {
    box-sizing: border-box;
    min-height: var(--sfx-form-input-height);
    padding-top: var(--sfx-form-submit-padding-block);
    padding-right: var(--sfx-form-submit-padding-inline);
    padding-bottom: var(--sfx-form-submit-padding-block);
    padding-left: var(--sfx-form-submit-padding-inline);
    border: var(--sfx-form-submit-border-width) solid var(--sfx-form-submit-border-color);
    border-radius: var(--sfx-form-submit-border-radius);
  }

  & button[type="submit"]:not(.bricks-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* File upload styles */
  & input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 0.1px;
    height: 0.1px;
    overflow: hidden;
    z-index: -1;

    &:focus+.choose-files {
      outline: var(--sfx-form-focus-width) solid var(--sfx-form-focus-color);
      outline-offset: var(--sfx-form-focus-offset);
      box-shadow: var(--sfx-form-focus-ring);
      border-color: var(--sfx-form-focus-color);
    }
  }

  & .choose-files {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--sfx-form-input-height);
    padding: var(--sfx-form-choose-files-padding-block) var(--sfx-form-choose-files-padding-inline);
    border: var(--sfx-form-border-width) solid var(--sfx-form-border-color);
    border-radius: var(--sfx-form-radius-small);
    background: var(--sfx-form-input-bg);
    color: var(--sfx-form-color);
    cursor: pointer;
    transition: var(--sfx-form-transition);
    font-size: inherit;
    font-family: inherit;
    text-decoration: none;
    margin-bottom: 0 !important;
    user-select: none;

    &:hover {
      border-color: var(--sfx-form-radio-active-color);
      background: color-mix(in srgb, var(--sfx-form-radio-active-color) 5%, var(--sfx-form-input-bg));
    }

    &:focus {
      outline: var(--sfx-form-focus-width) solid var(--sfx-form-focus-color);
      outline-offset: var(--sfx-form-focus-offset);
      box-shadow: var(--sfx-form-focus-ring);
      border-color: var(--sfx-form-focus-color);
    }
  }

  & .file-result {
    display: none;
    align-items: center;
    gap: var(--sfx-form-file-result-gap);
    padding: var(--sfx-form-file-result-padding);
    border: var(--sfx-form-border-width) solid var(--sfx-form-border-color);
    border-radius: var(--sfx-form-radius-small);
    background: var(--sfx-form-input-bg);
    margin-bottom: 0.5rem;
    transition: var(--sfx-form-transition);

    &.show {
      display: flex;
    }

    & .text {
      flex: 1;
      color: var(--sfx-form-color);
      font-size: 0.9em;
      word-break: break-all;
    }

    & .remove {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.5rem;
      background: var(--sfx-form-file-remove-bg);
      border: var(--sfx-form-border-width) solid var(--sfx-form-file-remove-border);
      border-radius: var(--sfx-form-radius-small);
      color: var(--sfx-form-file-remove-color);
      cursor: pointer;
      transition: var(--sfx-form-transition);
      font-size: 0.8em;
      min-height: auto;
      margin: 0;

      &:hover {
        background: var(--sfx-form-file-remove-hover-bg);
        color: var(--sfx-form-file-remove-hover-color);
        border-color: var(--sfx-form-file-remove-hover-bg);
      }

      &:focus {
        outline: var(--sfx-form-focus-width) solid var(--sfx-form-focus-color);
        outline-offset: var(--sfx-form-focus-offset);
        box-shadow: var(--sfx-form-focus-ring);
      }
    }

    & svg {
      width: var(--sfx-form-file-result-icon-size);
      height: var(--sfx-form-file-result-icon-size);
      stroke: currentColor;
      margin-left: 0.25rem;
    }

    &.error {
      border-color: var(--sfx-form-error-surface-fg);
      background: var(--sfx-form-error-surface);

      & .text {
        color: var(--sfx-form-error-surface-fg);
      }
    }

    &.success {
      border-color: var(--sfx-form-success-surface-fg);
      background: var(--sfx-form-success-surface);

      & .text {
        color: var(--sfx-form-success-surface-fg);
      }
    }
  }

  & .form-group.file {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Checkbox & Radio base */
  & input[type="checkbox"],
  & input[type="radio"] {
    appearance: none;
    inline-size: calc(var(--sfx-form-input-height) * .4);
    block-size: calc(var(--sfx-form-input-height) * .4);
    margin: 0;
    padding: 0;
    vertical-align: middle;
    border: var(--sfx-form-border-width) solid var(--sfx-form-border-color);
    background: var(--sfx-form-input-bg);
    position: relative;
    transition: var(--sfx-form-transition);
    color: var(--sfx-form-color);
    flex-shrink: 0;

    &:is(:focus, :focus-visible) {
      outline: var(--sfx-form-focus-width) solid var(--sfx-form-focus-color);
      outline-offset: var(--sfx-form-focus-offset);
      box-shadow: var(--sfx-form-focus-ring);
      border-color: var(--sfx-form-focus-color);
    }
  }

  /* Checkbox specific */
  & input[type="checkbox"] {
    border-radius: var(--sfx-form-radius-small);

    &:checked {
      background: var(--sfx-form-radio-active-color);
      border-color: var(--sfx-form-radio-active-color);
      color: var(--sfx-form-icon-color);
      background-image: var(--sfx-form-checkbox-icon);
      background-repeat: no-repeat;
      background-position: center;
      background-size: var(--sfx-form-icon-scale) var(--sfx-form-icon-scale);
    }

    &:indeterminate {
      background: var(--sfx-form-radio-active-color);
      border-color: var(--sfx-form-radio-active-color);
      color: var(--sfx-form-icon-color) !important;
      background-image: linear-gradient(currentColor, currentColor);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 60% 2px;
    }
  }

  /* Radio specific */
  & input[type="radio"] {
    border-radius: 50%;

    &:checked {
      background: var(--sfx-form-radio-active-color);
      border-color: var(--sfx-form-radio-active-color);
      background-image: radial-gradient(circle, var(--sfx-form-icon-color) 0 50%, transparent 51%);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 52% 52%;
    }
  }

  /* Textarea */
  & textarea {
    resize: vertical;
    max-width: 100%;
    overflow: auto;
  }

  /* Messages & submit feedback */
  & .message {
    border-radius: var(--sfx-form-border-radius);
  }

  /* Form group error message */
  & .form-group .form-group-error-message {
    position: relative;
    width: 100%;
    margin-block-start: var(--sfx-form-error-margin-block-start);
    padding: var(--sfx-form-error-padding-block) var(--sfx-form-error-padding-inline);
    background-color: var(--sfx-form-error-bg);
    color: var(--sfx-form-error-color);
    border-radius: var(--sfx-form-error-border-radius);
    font-size: var(--sfx-form-error-font-size);

    &::before {
      content: "";
      position: absolute;
      top: calc(-1 * var(--sfx-form-error-triangle-size));
      left: var(--sfx-form-error-triangle-offset);
      border-left: var(--sfx-form-error-triangle-size) solid transparent;
      border-right: var(--sfx-form-error-triangle-size) solid transparent;
      border-bottom: var(--sfx-form-error-triangle-size) solid var(--sfx-form-error-triangle-color);
    }
  }

  & button[type="submit"].sending,
  & input[type="submit"].sending {
    gap: var(--sfx-form-submit-sending-gap);
  }

  /* Focus: scoped to controls inside Bricks forms only */
  & :where(input:not([type="file"]), select, textarea, button, [role="button"], .button):is(:focus, :focus-visible) {
    outline: var(--sfx-form-focus-width) solid var(--sfx-form-focus-color);
    outline-offset: var(--sfx-form-focus-offset);
    box-shadow: var(--sfx-form-focus-ring);
  }

  & :where(input:not([type="file"]), select, textarea, button, [role="button"], .button):focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }
}

/* Lower specificity form group defaults */
:where(.brxe-form, .brxe-brf-pro-forms) {
  & .form-group {
    display: flex;
    flex-direction: column;
    padding: 0 0 var(--sfx-form-group-spacing, 1.25rem);
    width: 100%;
  }

  & .submit-button-wrapper {
    width: auto;
    margin-left: auto;
  }
}

@media (forced-colors: active) {
  :is(.brxe-form, .brxe-brf-pro-forms) :where(input:not([type="file"]), select, textarea, button, [role="button"], .button):is(:focus, :focus-visible) {
    outline: 2px solid CanvasText;
    outline-offset: 2px;
    box-shadow: none;
  }
}

@media (prefers-contrast: more) {
  :is(.brxe-form, .brxe-brf-pro-forms) :where(input:not([type="file"]), select, textarea, button, [role="button"], .button):focus-visible {
    outline-width: max(3px, var(--sfx-form-focus-width, 2px));
    box-shadow: var(--sfx-form-focus-ring, none);
  }
}

}