/* ==========================================================================
   Atlas Form Styles
   --------------------------------------------------------------------------
   Styles for labels, inputs, checkboxes, radios, range, and HubSpot form
   overrides. Uses CSS custom properties set in theme_overrides.hubl.css.
   ========================================================================== */

/* Labels */
.form-label,
label,
.hs-form-field > label,
.hs-form-field label,
.hs-field-desc,
.hs-form label,
.hs-form .hs-form-field > label,
form label {
  color: var(--atlas-label-color);
  font-weight: var(--atlas-label-font-weight) !important;
}

/* HubSpot form layout resets */
.hs-form fieldset {
  max-width: none !important;
}

.hs-form ul.inputs-list,
.hs-form ul.inputs-list li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* One token for the gap between form rows, so the legacy markup below and the
   current editor's `.hsfc-*` markup at the bottom of this file cannot drift
   apart. */
:root {
  --atlas-form-row-gap: 20px;
}

.hs-form .hs-form-field {
  margin-bottom: var(--atlas-form-row-gap);
}

.hs-form
  fieldset.form-columns-1
  .hs-input:not([type='checkbox']):not([type='radio']) {
  width: 100% !important;
}

.hs-form
  fieldset.form-columns-2
  .hs-input:not([type='checkbox']):not([type='radio']) {
  width: 100% !important;
}

/* Form Controls */
.form-control,
.form-select,
input[type='text'],
input[type='email'],
input[type='password'],
input[type='file'],
input[type='tel'],
input[type='number'],
input[type='search'],
input[type='url'],
textarea,
select,
.hs-input:not([type='checkbox']):not([type='radio']) {
  display: block;
  width: 100%;
  padding: var(--atlas-input-padding);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--atlas-input-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--atlas-input-background);
  background-clip: padding-box;
  border: var(--atlas-input-border-width) solid var(--atlas-input-border-color);
  border-radius: var(--atlas-input-border-radius);
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;

  &::placeholder {
    color: var(--atlas-input-placeholder-color);
    opacity: 1;
  }

  &:focus {
    color: var(--atlas-input-color);
    background-color: var(--atlas-input-background);
    border-color: var(--atlas-input-focus-border-color);
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--atlas-form-accent-focus-outline-color);
  }

  &:disabled {
    color: var(--atlas-input-disabled-color);
    background-color: var(--atlas-input-disabled-background);
    opacity: 1;
  }
}

.form-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 16px 12px;
  padding-right: 2.25rem;
}

/* Checkboxes and Radios */
.form-check-input,
input[type='checkbox'],
input[type='radio'],
.hs-form input[type='checkbox'],
.hs-form input[type='radio'],
.hs-form .hs-input[type='checkbox'],
.hs-form .hs-input[type='radio'] {
  --atlas-form-check-bg: var(--atlas-input-background);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--atlas-form-check-bg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  border: var(--atlas-input-border-width) solid var(--atlas-input-border-color);
  flex-shrink: 0;
  height: 1em !important;
  width: 1em !important;
  margin-top: 0.25em;
  vertical-align: top;

  &[type='checkbox'] {
    border-radius: 0.25em;

    &:checked {
      background-color: var(--atlas-form-accent);
      border-color: var(--atlas-form-accent);
      background-image: var(--atlas-form-check-bg-svg);
    }
  }

  &[type='radio'] {
    border-radius: 50%;

    &:checked {
      background-color: var(--atlas-form-accent);
      border-color: var(--atlas-form-accent);
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E");
    }
  }

  &:focus {
    border-color: var(--atlas-input-focus-border-color);
    box-shadow: 0 0 0 0.25rem var(--atlas-form-accent-focus-outline-color);
    outline: 0;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

/* Range Input */
.form-range,
input[type='range'] {
  width: 100%;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  &:focus {
    outline: 0;
  }

  &::-webkit-slider-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: -0.25rem;
    background-color: var(--atlas-form-accent);
    border: 0;
    border-radius: 1rem;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }

  &::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    background-color: var(--atlas-form-accent);
    border: 0;
    border-radius: 1rem;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
  }

  &::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: var(--atlas-input-border-color);
    border-color: transparent;
    border-radius: 1rem;
  }

  &::-moz-range-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: var(--atlas-input-border-color);
    border-color: transparent;
    border-radius: 1rem;
  }
}

/* Progress Bar */
.progress {
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: 0.75rem;
  background-color: #e9ecef;
  border-radius: var(--atlas-input-border-radius);
}

.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--atlas-form-accent-contrast);
  text-align: center;
  white-space: nowrap;
  background-color: var(--atlas-form-accent);
  transition: width 0.6s ease;
}

/* Spinner */
.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: -0.125em;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   Form Layout — title (5/12) + form (7/12) side by side
   ========================================================================== */

.hs_cos_wrapper_type_form {
  display: grid;
  grid-template-columns: 5fr 7fr;
  column-gap: var(--bs-gutter-x, 1.5rem);
  align-items: start;
}

/* Title and optional richtext description stay in column 1 */
.hs_cos_wrapper.form-title,
.hs_cos_wrapper_type_form > .hs-richtext {
  grid-column: 1;
}

.hs_cos_wrapper_type_form > .hs-richtext,
.hs-form .hs-richtext {
  margin-bottom: 20px;
}

/* Title typography from theme setting */
.hs_cos_wrapper.form-title {
  font-size: var(--atlas-form-title-font-size, var(--atlas-h3-font-size));
  font-weight: var(--atlas-form-title-font-weight, var(--atlas-h3-font-weight));
  margin-top: 0;
  line-height: 1.2;
}

/* Form occupies column 2 and spans all rows */
.hs_cos_wrapper_type_form > .hs-form,
.hs_cos_wrapper_type_form > form {
  grid-column: 2;
  grid-row: 1 / -1;
}

.hs-form :is(.actions, .hs-submit, .hs_submit) {
  margin-bottom: 20px;
}

.hs-form
  :is(.actions, .hs-submit, .hs_submit)
  :is(.hs-button, input[type='submit']) {
  margin-bottom: 0;
}

.hs-form > :is(.hs-button, input[type='submit']) {
  margin-bottom: 20px;
}

@media (max-width: 767.98px) {
  .hs_cos_wrapper_type_form {
    grid-template-columns: 1fr;
  }

  .hs_cos_wrapper.form-title,
  .hs_cos_wrapper_type_form > .hs-richtext,
  .hs_cos_wrapper_type_form > .hs-form,
  .hs_cos_wrapper_type_form > form {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ==========================================================================
   Current forms editor (.hsfc-*)
   --------------------------------------------------------------------------
   Everything above targets `.hs-form` / `.hs-input`, the markup HubSpot's
   legacy forms editor emits. A form built in the current editor renders
   `.hsfc-*` classes instead and matches none of it, so every theme Forms
   setting (fill, border, padding, text colour, font) stopped at the form and
   it kept HubSpot's own look. The rules below are the twins that put the same
   `--atlas-*` tokens back. Ported from TELA (#44, #46, #64, #101, #107, #128,
   #191), where each was verified on a portal.

   1. HubSpot injects its form stylesheet into <head> at runtime, after the
      theme's CSS, so a rule that only ties on specificity loses. Its own rules
      measure 0-2-0, so every selector here is at least 0-2-1: the element name
      in `input.hsfc-TextInput` is what buys that, and why they need no
      `!important`.
   2. Where HubSpot reads its own `--hsf-*` variables, feeding them beats any
      specificity fight.
   3. The class names come from HubSpot's forms runtime and are not a
      documented API. If forms lose their styling after a HubSpot release,
      re-check these names first.
   ========================================================================== */

/* HubSpot's own variables: no padding box around the form, buttons where the
   legacy forms put them, the theme's hover colours. */
[data-hsfc-id='Renderer'] {
  --hsf-background__padding: 0;
  --hsf-navigationrow-buttons__justify-content: flex-start;
  --hsf-navigationrow-buttons-single__justify-content: flex-start;
  --hsf-button--hover__background-color: var(
    --atlas-btn-primary-hover-background
  );
  --hsf-button--hover__color: var(--atlas-btn-primary-hover-color);
  --hsf-button--hover__border-color: var(
    --atlas-btn-primary-hover-border-color
  );
}

/* The form root. Setting the family here as well as on the controls is
   deliberate: `inherit` on an input would inherit HubSpot's own family from
   this element, not the theme's. */
.hsfc-Renderer form.hsfc-Form {
  font-family: var(--atlas-font-body);
  color: var(--atlas-input-color);
}

/* Controls. Matching `[class*='hsfc-']` on the element rather than listing one
   class per field type covers field types nobody has used yet. Checkboxes and
   radios keep their own appearance, as in the legacy rules above. */
.hsfc-Form
  :is(input, textarea, select)[class*='hsfc-']:not([type='checkbox']):not(
    [type='radio']
  ):not([type='hidden']) {
  box-sizing: border-box;
  width: 100%;
  padding: var(--atlas-input-padding);
  font-family: var(--atlas-font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--atlas-input-color);
  background-color: var(--atlas-input-background);
  border: var(--atlas-input-border-width) solid var(--atlas-input-border-color);
  border-radius: var(--atlas-input-border-radius);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* A visible focus ring, the same as on the legacy inputs above. */
.hsfc-Form
  :is(input, textarea, select)[class*='hsfc-']:not([type='checkbox']):not(
    [type='radio']
  ):not([type='hidden']):is(:focus, :focus-visible) {
  border-color: var(--atlas-input-focus-border-color);
  outline: none;
  box-shadow: 0 0 0 0.25rem var(--atlas-form-accent-focus-outline-color);
}

.hsfc-Form :is(input, textarea, select)[class*='hsfc-']::placeholder {
  color: var(--atlas-input-placeholder-color);
}

/* Labels. The legacy block at the top of this file already sets the weight
   through a bare `label` selector; family and size are what it cannot reach
   at this specificity. */
.hsfc-Form label.hsfc-FieldLabel {
  font-family: var(--atlas-font-body);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: var(--atlas-label-font-weight);
  color: var(--atlas-label-color);
}

/* Rows. HubSpot's `.hsfc-Row` pairs two fields on one line; only its gaps are
   replaced. The gap is set on both axes: the row half applies once HubSpot
   stacks the pair at mobile widths, where it used to be 0 while the rows
   around it kept their gap. On desktop the row is one flex line and the row
   gap changes nothing. */
.hsfc-Form div.hsfc-Row {
  gap: var(--atlas-form-row-gap);
  margin-bottom: var(--atlas-form-row-gap);
}

.hsfc-Form div.hsfc-NavigationRow {
  margin-top: var(--atlas-form-row-gap);
  margin-bottom: 0;
}

/* The submit button gets colour, radius, padding and size from the shared
   `.btn` block in theme_overrides.hubl.css. Family and weight are what that
   block does not set (theme buttons inherit both), and inheritance loses
   against HubSpot's class rule, so they are set here. */
.hsfc-Form button.hsfc-Button {
  font-family: var(--atlas-font-body);
  font-weight: inherit;
}

/* Submit button on click. HubSpot's `.hsfc-Button:not([disabled]):focus` rule
   (0-4-0) reads `--hsf-button--focus__*` and falls back to the portal's
   default button colour. A click focuses the button, so every click repainted
   it in that colour. Feeding the focus trio the resting look fixes it. */
.hsfc-Form {
  --hsf-button--focus__background-color: var(--atlas-btn-primary-background);
  --hsf-button--focus__color: var(--atlas-btn-primary-color);
  --hsf-button--focus__border-color: var(--atlas-btn-primary-border-color);
}

/* Hovered and focused at once (every button for as long as the pointer rests
   on it after a click) it would show the resting colours, because HubSpot's
   focus rule ties with its hover rule and comes later. 0-5-1 against 0-4-0.
   HubSpot also lifts the button by a pixel on hover; theme buttons do not. */
[data-hsfc-id='Renderer'] .hsfc-Form button.hsfc-Button:not([disabled]):hover {
  background-color: var(
    --hsf-button--hover__background-color,
    var(--atlas-btn-primary-hover-background)
  );
  color: var(--hsf-button--hover__color, var(--atlas-btn-primary-hover-color));
  border-color: var(
    --hsf-button--hover__border-color,
    var(--atlas-btn-primary-hover-border-color)
  );
  transform: none;
}