/**
 * Enterprise Form (Salesforce) – styles from QRCG Style Guide / Form (Figma).
 * Design: stroke/neutral/primary, stroke/action/focus, stroke/error, typography, spacing.
 * Loaded only when [enterprise_form] or enterprise_form_scripts is used.
 */

/* -------------------------------------------------------------------------
   Design tokens (Figma) – applied to wrapper or form so variables work with/without wrapper
   ------------------------------------------------------------------------- */
.enterprise-form__container,
#enterprise-form {
  --ef-border: #d3dce0;
  --ef-border-hover: #788caf;
  --ef-border-focus: #1974d2;
  --ef-border-error: #8d000c;
  --ef-bg: #fdfeff;
  --ef-text-primary: #1b294b;
  --ef-text-tertiary: #53678c;
  --ef-text-placeholder: #6f7e85;
  --ef-text-hint: #4a5961;
  --ef-text-error: #8d000c;
  --ef-action: #1974d2;
  --ef-checkbox-selected: #0474cd;
  --ef-checkbox-border: #6278a2;
  --ef-radius: 4px;
  --ef-input-h: 40px;
  --ef-input-px: 12px;
  --ef-input-py: 8px;
  --ef-label-size: 14px;
  --ef-label-lh: 16px;
  --ef-body-size: 16px;
  --ef-body-lh: 24px;
  --ef-caption-size: 12px;
  --ef-caption-lh: 16px;
  --ef-gap-label: 4px;
  --ef-gap-fields: 20px;
}

/* Scoped form layout – when inside container */
.enterprise-form__container form {
  display: flex;
  flex-direction: column;
  gap: var(--ef-gap-fields);
  max-width: 100%;
}

/* When form is used without .enterprise-form__container (e.g. Custom HTML block) */
#enterprise-form {
  display: flex;
  flex-direction: column;
  gap: var(--ef-gap-fields);
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

#enterprise-form .enterprise-form__input,
#enterprise-form .form-label,
#enterprise-form .enterprise-form__input-container {
  box-sizing: border-box;
}

.enterprise-form__header {
  margin-bottom: 24px;
}

.enterprise-form__input-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ef-gap-fields);
}

.enterprise-form__input-group .enterprise-form__input-container--half {
  flex: 1 1 calc(50% - var(--ef-gap-fields) / 2);
  min-width: 0;
}

@media (max-width: 575px) {
  .enterprise-form__input-group .enterprise-form__input-container--half {
    flex: 1 1 100%;
  }
}

/* -------------------------------------------------------------------------
   Input container (wrapper for label + field + notice)
   ------------------------------------------------------------------------- */
.enterprise-form__input-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
}

/* Label above field – in flow (no absolute) for mobile; same style as textarea label */
.enterprise-form__input-container .form-label {
  order: -1;
  display: block;
  background: var(--ef-bg);
  padding: 0 4px 0 8px;
  margin: 0 8px -8px 8px;
  z-index: 2;
  pointer-events: none;
  font-size: var(--ef-label-size);
  line-height: var(--ef-label-lh);
  color: var(--ef-text-tertiary);
  transition: color 0.15s ease;
}

.enterprise-form__input-container:focus-within .form-label,
.enterprise-form__input-container.has-value .form-label {
  color: var(--ef-action);
}

.enterprise-form__input-container.has-errors .form-label,
.enterprise-form__input-container.has-email-errors .form-label {
  color: var(--ef-text-error);
}

/* -------------------------------------------------------------------------
   Text inputs & native select (hidden when custom select is used)
   ------------------------------------------------------------------------- */
.enterprise-form__input,
.enterprise-form__input-container select.enterprise-form__input {
  width: 100%;
  height: var(--ef-input-h);
  padding: var(--ef-input-py) var(--ef-input-px);
  border: 1px solid var(--ef-border);
  border-radius: var(--ef-radius);
  background: var(--ef-bg);
  font-size: var(--ef-body-size);
  line-height: var(--ef-body-lh);
  letter-spacing: -0.16px;
  color: var(--ef-text-primary);
  transition: border-color 0.15s ease;
}

.enterprise-form__input::placeholder {
  color: var(--ef-text-placeholder);
}

.enterprise-form__input:hover,
.enterprise-form__input-container select.enterprise-form__input:hover {
  border-color: var(--ef-border-hover);
}

.enterprise-form__input:focus,
.enterprise-form__input-container select.enterprise-form__input:focus {
  outline: none;
  border-color: var(--ef-border-focus);
}

.enterprise-form__input-container.has-errors .enterprise-form__input,
.enterprise-form__input-container.has-errors select.enterprise-form__input,
.enterprise-form__input-container.has-email-errors .enterprise-form__input {
  border-color: var(--ef-border-error);
}

/* Hide native select when custom select is present */
.enterprise-form__select-container select {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   Custom select (JS builds .select-selected + .select-items)
   ------------------------------------------------------------------------- */
.enterprise-form__select-container {
  position: relative;
}

.select-selected.enterprise-form__input--select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--ef-input-h);
  padding: var(--ef-input-py) var(--ef-input-px);
  border: 1px solid var(--ef-border);
  border-radius: var(--ef-radius);
  background: var(--ef-bg);
  font-size: var(--ef-body-size);
  line-height: var(--ef-body-lh);
  letter-spacing: -0.16px;
  color: var(--ef-text-placeholder);
  cursor: pointer;
  transition: border-color 0.15s ease;
  gap: 12px;
}

.enterprise-form__select-container .select-placeholder {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.enterprise-form__select-container.has-value .select-selected,
.enterprise-form__select-container .select-selected.has-value {
  color: var(--ef-text-primary);
}

.enterprise-form__select-container:hover .select-selected {
  border-color: var(--ef-border-hover);
}

.enterprise-form__select-container.active .select-selected,
.enterprise-form__select-container .select-selected.select-arrow-active {
  border-color: var(--ef-border-focus);
}

.enterprise-form__select-container.has-errors .select-selected {
  border-color: var(--ef-border-error);
}

/* Arrow – inline SVG (chevron-down.svg) with currentColor; rotates when open */
.select-arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ef-text-placeholder);
  transition: color 0.15s ease;
}

.select-arrow svg {
  width: 100%;
  height: 100%;
  transition: transform 0.2s ease;
}

.enterprise-form__select-container.active .select-arrow,
.enterprise-form__select-container .select-selected.select-arrow-active .select-arrow {
  color: var(--ef-border-focus);
}

.enterprise-form__select-container.active .select-arrow svg,
.enterprise-form__select-container .select-selected.select-arrow-active .select-arrow svg {
  transform: rotate(180deg);
}

.enterprise-form__select-container.has-errors .select-arrow {
  color: var(--ef-text-error);
}

/* Fallback arrow when SVG not present */
.select-arrow:empty::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}

/* Dropdown list */
.select-items {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  padding: 4px 0;
  border: 1px solid var(--ef-border);
  border-radius: var(--ef-radius);
  background: var(--ef-bg);
  box-shadow: 0 4px 12px rgba(27, 41, 75, 0.12);
  z-index: 10;
  max-height: 240px;
  overflow-y: auto;
}

.select-items.select-hide {
  display: none;
}

.select-items div {
  padding: var(--ef-input-py) var(--ef-input-px);
  font-size: var(--ef-body-size);
  line-height: var(--ef-body-lh);
  color: var(--ef-text-primary);
  cursor: pointer;
}

/* Multi-select: row with checkbox + label */
.select-items div[data-option-index] {
  display: flex;
  align-items: center;
  gap: 12px;
}

.select-option-checkbox {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1px solid var(--ef-checkbox-border);
  border-radius: 2px;
  background: var(--ef-bg);
  transition: border-color 0.15s ease, background 0.15s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
}

.select-option-checkbox svg {
  width: 10px;
  height: 10px;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.select-option-checkbox::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 9px;
  margin-left: -3px;
  margin-top: -6px;
  border: solid var(--ef-bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s ease;
}

.select-items div.same-as-selected-multiple .select-option-checkbox {
  background: var(--ef-checkbox-selected);
  border-color: var(--ef-checkbox-selected);
  color: var(--ef-bg);
}

.select-items div.same-as-selected-multiple .select-option-checkbox svg {
  opacity: 1;
}

.select-items div.same-as-selected-multiple .select-option-checkbox::after {
  display: none;
}

.select-option-checkbox:has(svg)::after {
  display: none;
}

.select-option-text {
  flex: 1;
  min-width: 0;
}

.select-items div:hover {
  background: rgba(25, 116, 210, 0.08);
}

.select-items div.same-as-selected,
.select-items div.same-as-selected-multiple {
  background: rgba(25, 116, 210, 0.12);
  color: var(--ef-text-primary);
}

/* -------------------------------------------------------------------------
   Textarea
   ------------------------------------------------------------------------- */
.enterprise-form__textarea-label {
  display: block;
  font-size: var(--ef-label-size);
  line-height: var(--ef-label-lh);
  color: var(--ef-text-tertiary);
  background: var(--ef-bg);
  padding: 0 4px 0 8px;
  margin: 0 8px -8px 8px;
  z-index: 2;
  pointer-events: none;
  transition: color 0.15s ease;
}

.enterprise-form__input-container:focus-within .enterprise-form__textarea-label,
.enterprise-form__input-container.has-value .enterprise-form__textarea-label {
  color: var(--ef-action);
}

.enterprise-form__input-container.has-errors .enterprise-form__textarea-label,
.enterprise-form__input-container.has-email-errors .enterprise-form__textarea-label {
  color: var(--ef-text-error);
}

.enterprise-form__input.textarea-input {
  height: auto;
  min-height: 120px;
  padding: var(--ef-input-py) var(--ef-input-px);
  resize: vertical;
}

/* -------------------------------------------------------------------------
   Error / hint notice below field
   ------------------------------------------------------------------------- */
.enterprise-form__input-notice,
.enterprise-form__input-email-notice {
  display: none;
  align-items: center;
  gap: 2px;
  padding-top: 6px;
  font-size: var(--ef-caption-size);
  line-height: var(--ef-caption-lh);
  letter-spacing: -0.12px;
  color: var(--ef-text-error);
  min-height: 20px;
}

.enterprise-form__input-container.has-errors .enterprise-form__input-notice,
.enterprise-form__input-container.has-email-errors .enterprise-form__input-email-notice,
.enterprise-form__checkbox-container.has-errors .enterprise-form__input-notice {
  display: flex;
}

/* Warning icon before error text (SVG mask so color = currentColor) */
.enterprise-form__input-notice::before,
.enterprise-form__input-email-notice::before {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath fill='black' d='M6 2.15493L10.6264 10.1408H1.37358L6 2.15493ZM6 0.75C5.77614 0.75 5.47766 0.897887 5.32842 1.11972L0.10505 10.1408C-0.193428 10.6585 0.17967 11.25 0.776627 11.25H11.2234C11.8203 11.25 12.1934 10.6585 11.8949 10.1408L6.67158 1.11972C6.52234 0.897887 6.22386 0.75 6 0.75ZM5.47766 5.26056V6.88732C5.47766 7.1831 5.70152 7.40493 6 7.40493C6.29848 7.40493 6.52234 7.1831 6.52234 6.88732V5.26056C6.52234 4.96479 6.29848 4.74296 6 4.74296C5.70152 4.66901 5.47766 4.96479 5.47766 5.26056ZM5.47766 8.66197C5.47766 8.95775 5.70152 9.17958 6 9.17958C6.29848 9.17958 6.52234 8.95775 6.52234 8.66197C6.52234 8.3662 6.29848 8.14437 6 8.14437C5.70152 8.14437 5.47766 8.44014 5.47766 8.66197Z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath fill='black' d='M6 2.15493L10.6264 10.1408H1.37358L6 2.15493ZM6 0.75C5.77614 0.75 5.47766 0.897887 5.32842 1.11972L0.10505 10.1408C-0.193428 10.6585 0.17967 11.25 0.776627 11.25H11.2234C11.8203 11.25 12.1934 10.6585 11.8949 10.1408L6.67158 1.11972C6.52234 0.897887 6.22386 0.75 6 0.75ZM5.47766 5.26056V6.88732C5.47766 7.1831 5.70152 7.40493 6 7.40493C6.29848 7.40493 6.52234 7.1831 6.52234 6.88732V5.26056C6.52234 4.96479 6.29848 4.74296 6 4.74296C5.70152 4.66901 5.47766 4.96479 5.47766 5.26056ZM5.47766 8.66197C5.47766 8.95775 5.70152 9.17958 6 9.17958C6.29848 9.17958 6.52234 8.95775 6.52234 8.66197C6.52234 8.3662 6.29848 8.14437 6 8.14437C5.70152 8.14437 5.47766 8.44014 5.47766 8.66197Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* -------------------------------------------------------------------------
   Checkbox (Figma: 24px touch, 16px box, radius 4px/2px)
   ------------------------------------------------------------------------- */
.enterprise-form__checkbox-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: var(--ef-label-size);
  line-height: 24px;
  color: var(--ef-text-primary);
  position: relative;
  padding-left: 0;
}

.enterprise-form__checkbox-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  order: -2;
}

.enterprise-form__checkbox-checkmark {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ef-checkbox-border);
  border-radius: var(--ef-radius);
  background: var(--ef-bg);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  order: -1;
}

.enterprise-form__checkbox-checkmark svg {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.enterprise-form__checkbox-container:hover .enterprise-form__checkbox-checkmark {
  background: #d9eeff;
}

.enterprise-form__checkbox-input:focus-visible + .enterprise-form__checkbox-checkmark {
  box-shadow: 0 0 0 2px var(--ef-border-focus);
}

.enterprise-form__checkbox-input:checked + .enterprise-form__checkbox-checkmark {
  background: var(--ef-checkbox-selected);
  border-color: var(--ef-checkbox-selected);
  color: var(--ef-bg);
}

.enterprise-form__checkbox-input:checked + .enterprise-form__checkbox-checkmark svg {
  opacity: 1;
}

.enterprise-form__checkbox-container.has-errors .enterprise-form__checkbox-checkmark {
  border-color: var(--ef-border-error);
}

.enterprise-form__checkbox-container.has-errors .enterprise-form__checkbox-input:checked + .enterprise-form__checkbox-checkmark {
  background: var(--ef-border-error);
  border-color: var(--ef-border-error);
  color: var(--ef-bg);
}

.enterprise-form__checkbox-container .enterprise-form__input-notice {
  width: 100%;
  margin-top: 2px;
}

/* -------------------------------------------------------------------------
   Feedback messages (success / error)
   ------------------------------------------------------------------------- */
#enterprise-form .btn {
  align-self: flex-start;
}

/* Submit button loading state – scoped to form so loader is visible when submitting */
#enterprise-form .btn .btn__icon-loading {
  display: none;
}

#enterprise-form .btn.is-loading .btn__icon-arrow {
  display: none !important;
}

#enterprise-form .btn.is-loading .btn__icon-loading {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  animation: enterprise-form-spin 0.8s linear infinite;
}

#enterprise-form .btn.is-loading .btn__icon-loading svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

@keyframes enterprise-form-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.enterprise-form__feedback {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--ef-radius);
  font-size: var(--ef-label-size);
  line-height: 20px;
}

.enterprise-form__feedback.feedback-success {
  background: rgba(0, 155, 214, 0.12);
  color: var(--ef-text-primary);
}

.enterprise-form__feedback.feedback-error {
  background: rgba(141, 0, 12, 0.08);
  color: var(--ef-text-error);
}

/* reCAPTCHA container */
.enterprise-form__input-container.recaptcha-container {
  align-items: flex-start;
}

.enterprise-form__input-container.recaptcha-container .enterprise-form__input-notice {
  margin-top: 4px;
}