/**
 * Zaaks Form – frontend styles
 * Override CSS variables on a wrapper (e.g. #my-form) for custom branding.
 */
.zaaks-form,
.zaaks-form-loading,
.zaaks-form-message {
  --zaaks-form-font-family: "Gilroy", sans-serif;
  --zaaks-form-font-size: 1.4rem;
  --zaaks-form-line-height: 1.3;
  --zaaks-form-max-width: 100%;
  --zaaks-form-gap: 2rem;
  --zaaks-form-text-color: #414141;
  --zaaks-form-label-color: #414141;
  --zaaks-form-label-size: 1.4rem;
  --zaaks-form-label-weight: 600;
  --zaaks-form-label-spacing: 0;
  --zaaks-form-required-color: #b42318;
  --zaaks-form-border-color: #ececec;
  --zaaks-form-border-radius: 2.4rem;
  --zaaks-form-background: #fff;
  --zaaks-form-input-min-height: 4rem;
  --zaaks-form-input-padding-x: 2.5rem;
  --zaaks-form-input-padding-y: 0;
  --zaaks-form-shadow: none;
  --zaaks-form-focus-color: #000000;
  --zaaks-form-focus-ring: none;
  --zaaks-form-invalid-color: #b42318;
  --zaaks-form-invalid-ring: 0 0 0 3px rgba(180, 35, 24, 0.12);
  --zaaks-form-description-color: #414141;
  --zaaks-form-description-size: 1.2rem;
  --zaaks-form-placeholder-color: #414141;
  --zaaks-form-disabled-bg: #f9fafb;
  --zaaks-form-disabled-color: #98a2b3;
  --zaaks-form-choice-bg: transparent;
  --zaaks-form-choice-border: transparent;
  --zaaks-form-choice-hover-bg: transparent;
  --zaaks-form-choice-checked-bg: transparent;
  --zaaks-form-choice-checked-border: transparent;
  --zaaks-form-submit-bg: #DC016D;
  --zaaks-form-submit-color: #414141;
  --zaaks-form-submit-hover-bg: #ffefea;
  --zaaks-form-submit-active-bg: #ffefea;
  --zaaks-form-submit-padding-x: 3.2rem;
  --zaaks-form-submit-min-height: 4rem;
  --zaaks-form-message-success-bg: #ecfdf3;
  --zaaks-form-message-success-border: #abefc6;
  --zaaks-form-message-success-color: #067647;
  --zaaks-form-message-error-bg: #fef3f2;
  --zaaks-form-message-error-border: #fecdca;
  --zaaks-form-message-error-color: #b42318;
  --zaaks-form-file-border: #ececec;
  --zaaks-form-file-bg: #fff;
  --zaaks-form-file-border-hover: #000000;
  --zaaks-form-file-bg-hover: #fff;
  --zaaks-form-file-border-active: #000000;
  --zaaks-form-file-bg-active: #ffefea;
  --zaaks-form-file-border-selected: #ff3700;
  --zaaks-form-file-text: #414141;
  --zaaks-form-file-hint: #414141;
  --zaaks-form-file-name: #414141;
  --zaaks-form-transition: all 0.3s ease-in-out;

  box-sizing: border-box;
  font-family: var(--zaaks-form-font-family);
  font-size: var(--zaaks-form-font-size);
  line-height: var(--zaaks-form-line-height);
  color: var(--zaaks-form-text-color);
  -webkit-font-smoothing: antialiased;
}

.zaaks-form *,
.zaaks-form-loading * {
  box-sizing: border-box;
}

/* Loading */
.zaaks-form-loading {
  max-width: var(--zaaks-form-max-width);
  padding: 1.5rem 0;
  color: var(--zaaks-form-description-color);
  font-size: var(--zaaks-form-description-size);
}

/* Form layout */
.zaaks-form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--zaaks-form-gap);
  max-width: var(--zaaks-form-max-width);
  width: 100%;
}

.zaaks-form.row {
  gap: 0;
}

.zaaks-form-field.col-12,
.zaaks-form-field.col-md-6 {
  padding-bottom: var(--zaaks-form-gap);
}

.zaaks-form-field {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Field labels */
.zaaks-form-field > label:not(.zaaks-form-checkbox-label) {
  display: block;
  margin: 0;
  font-size: var(--zaaks-form-label-size);
  font-weight: var(--zaaks-form-label-weight);
  letter-spacing: var(--zaaks-form-label-spacing);
  line-height: 1.4;
  color: var(--zaaks-form-label-color);
}

.zaaks-form-required {
  color: var(--zaaks-form-required-color);
  font-weight: 600;
}

.zaaks-form-description {
  margin: 0;
  color: var(--zaaks-form-description-color);
  font-size: var(--zaaks-form-description-size);
  line-height: 1.45;
}

/* Shared control styles */
.zaaks-form-control,
.zaaks-form-field select[data-zaaks-field],
.zaaks-form-field textarea[data-zaaks-field],
.zaaks-form-field input[data-zaaks-field]:not([type="checkbox"]):not([type="radio"]) {
    display: block;
    width: 100%;
    height: 4.8rem;
    min-height: 4.8rem;
    margin: 0;
    padding: 0 3rem;
    border: 1px solid #ececec;
    color: #414141;
    border-radius: 2.4rem;
    font-size: 1.8rem;
    line-height: var(--zaaks-form-line-height);
    background: var(--zaaks-form-background);
    box-shadow: var(--zaaks-form-shadow);
    transition: var(--zaaks-form-transition);
    appearance: none;
}

.zaaks-form-field textarea[data-zaaks-field] {
  height: 21.3rem;
  min-height: 21.3rem;
  padding: 3rem;
  border-radius: 1rem;
  resize: none;
}

.zaaks-form-field select[data-zaaks-field] {
  padding-right: 5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath fill='%23333' d='M7 8 0 0h14z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.8rem center;
  background-size: 1.2rem;
  cursor: pointer;
}

.zaaks-form-control::placeholder,
.zaaks-form-field textarea[data-zaaks-field]::placeholder,
.zaaks-form-field input[data-zaaks-field]:not([type="checkbox"]):not([type="radio"])::placeholder {
  color: var(--zaaks-form-placeholder-color);
  opacity: 1;
}

.zaaks-form-control:hover:not(:disabled):not(:focus),
.zaaks-form-field select[data-zaaks-field]:hover:not(:disabled):not(:focus),
.zaaks-form-field textarea[data-zaaks-field]:hover:not(:disabled):not(:focus),
.zaaks-form-field input[data-zaaks-field]:not([type="checkbox"]):not([type="radio"]):hover:not(:disabled):not(:focus) {
  border-color: #000000;
}

.zaaks-form-control:focus,
.zaaks-form-field select[data-zaaks-field]:focus,
.zaaks-form-field textarea[data-zaaks-field]:focus,
.zaaks-form-field input[data-zaaks-field]:not([type="checkbox"]):not([type="radio"]):focus {
  outline: none;
  border-color: var(--zaaks-form-focus-color);
  box-shadow: var(--zaaks-form-focus-ring);
}

.zaaks-form-control:disabled,
.zaaks-form-field select[data-zaaks-field]:disabled,
.zaaks-form-field textarea[data-zaaks-field]:disabled,
.zaaks-form-field input[data-zaaks-field]:not([type="checkbox"]):not([type="radio"]):disabled {
  background: var(--zaaks-form-disabled-bg);
  color: var(--zaaks-form-disabled-color);
  cursor: not-allowed;
  opacity: 1;
}

/* Validation */
.zaaks-form-field-validation {
  display: block;
  margin: 0;
  color: var(--zaaks-form-invalid-color);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.4;
}

.zaaks-form-field-validation:empty {
  display: none;
}

.zaaks-form-field-invalid .zaaks-form-control,
.zaaks-form-field-invalid select[data-zaaks-field],
.zaaks-form-field-invalid textarea[data-zaaks-field],
.zaaks-form-field-invalid input[data-zaaks-field]:not([type="checkbox"]):not([type="radio"]),
.zaaks-form-field-control-invalid:not([type="checkbox"]):not([type="radio"]) {
  border-color: var(--zaaks-form-invalid-color);
  box-shadow: var(--zaaks-form-invalid-ring);
}

.zaaks-form-field-invalid .zaaks-form-file-dropzone {
  border-color: var(--zaaks-form-invalid-color);
  box-shadow: var(--zaaks-form-invalid-ring);
}

.zaaks-form-field-invalid .zaaks-form-choice-option,
.zaaks-form-field-invalid .zaaks-form-checkbox-label {
  border-color: var(--zaaks-form-invalid-color);
}

.zaaks-form-field-invalid input[type="checkbox"],
.zaaks-form-field-invalid input[type="radio"] {
  outline: 2px solid var(--zaaks-form-invalid-color);
  outline-offset: 2px;
}

/* Radio / checkbox groups */
.zaaks-form-choice-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.zaaks-form-choice-option,
.zaaks-form-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--zaaks-form-choice-border);
  border-radius: var(--zaaks-form-border-radius);
  background: var(--zaaks-form-choice-bg);
  font-size: var(--zaaks-form-font-size);
  font-weight: 400;
  line-height: var(--zaaks-form-line-height);
  color: var(--zaaks-form-text-color);
  cursor: pointer;
  transition: var(--zaaks-form-transition);
}

.zaaks-form-choice-option:hover,
.zaaks-form-checkbox-label:hover {
  background: var(--zaaks-form-choice-hover-bg);
  border-color: var(--zaaks-form-choice-border);
}

.zaaks-form-choice-option:has(input:checked),
.zaaks-form-checkbox-label:has(input:checked) {
  background: var(--zaaks-form-choice-checked-bg);
  border-color: var(--zaaks-form-choice-checked-border);
}

.zaaks-form-choice-option input[type="checkbox"],
.zaaks-form-choice-option input[type="radio"],
.zaaks-form-checkbox-label input[type="checkbox"] {
  width: 1.8rem;
  height: 1.8rem;
  min-width: 1.8rem;
  min-height: 1.8rem;
  margin: 0.3rem 0 0;
  flex-shrink: 0;
  appearance: none;
  border: 1px solid #414141;
  border-radius: 0.2rem;
  background-color: #ffffff;
  accent-color: #DC016D;
  cursor: pointer;
}

.zaaks-form-choice-option input[type="radio"] {
  border-radius: 50%;
}

.zaaks-form-choice-option input[type="checkbox"]:checked,
.zaaks-form-choice-option input[type="radio"]:checked,
.zaaks-form-checkbox-label input[type="checkbox"]:checked {
  background-color: #DC016D;
}

.zaaks-form-choice-text {
  flex: 1;
  line-height: var(--zaaks-form-line-height);
}

/* Single checkbox – no extra card when it is the only control */
.zaaks-form-field:has(> .zaaks-form-checkbox-label:only-child) .zaaks-form-checkbox-label {
  padding: 0;
  border: none;
  background: transparent;
}

.zaaks-form-field:has(> .zaaks-form-checkbox-label:only-child) .zaaks-form-checkbox-label:hover {
  background: transparent;
}

/* File upload */
.zaaks-form-field-file .zaaks-form-file-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 8.5rem;
  padding: 1.5rem 1rem;
  border: 1px dashed var(--zaaks-form-file-border);
  border-radius: var(--zaaks-form-border-radius);
  background: var(--zaaks-form-file-bg);
  box-shadow: var(--zaaks-form-shadow);
  cursor: pointer;
  text-align: center;
  transition: var(--zaaks-form-transition);
}

.zaaks-form-field-file .zaaks-form-file-dropzone:hover,
.zaaks-form-field-file .zaaks-form-file-dropzone:focus-within {
  border-color: var(--zaaks-form-file-border-hover);
  background: var(--zaaks-form-file-bg-hover);
}

.zaaks-form-field-file .zaaks-form-file-dropzone.is-dragover {
  border-color: var(--zaaks-form-file-border-active);
  background: var(--zaaks-form-file-bg-active);
  box-shadow: var(--zaaks-form-focus-ring);
}

.zaaks-form-field-file .zaaks-form-file-dropzone.has-file {
  border-style: solid;
  border-color: var(--zaaks-form-file-border-selected);
  background: var(--zaaks-form-file-bg-active);
}

.zaaks-form-field-file .zaaks-form-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.zaaks-form-field-file .zaaks-form-file-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  pointer-events: none;
  color: var(--zaaks-form-file-text);
}

.zaaks-form-field-file .zaaks-form-file-prompt strong {
  font-size: 0.9375rem;
  font-weight: 600;
}

.zaaks-form-field-file .zaaks-form-file-hint {
  font-size: var(--zaaks-form-description-size);
  color: var(--zaaks-form-file-hint);
}

.zaaks-form-field-file .zaaks-form-file-name {
  font-size: var(--zaaks-form-description-size);
  font-weight: 600;
  color: var(--zaaks-form-file-name);
  word-break: break-word;
  pointer-events: none;
}

/* Messages */
.zaaks-form-message {
  margin: 0;
  width: 100%;
  padding: 1rem 2.5rem;
  border: 1px solid transparent;
  border-radius: var(--zaaks-form-border-radius);
  font-size: 1.4rem;
  line-height: 1.3;
}

.zaaks-form-message-success,
.zaaks-form-message.zaaks-form-message-success {
  background: var(--zaaks-form-message-success-bg);
  border-color: var(--zaaks-form-message-success-border);
  color: var(--zaaks-form-message-success-color);
}

.zaaks-form-message-error,
.zaaks-form-message.zaaks-form-message-error {
  background: var(--zaaks-form-message-error-bg);
  border-color: var(--zaaks-form-message-error-border);
  color: var(--zaaks-form-message-error-color);
}

/* Submit */
.zaaks-form-submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--zaaks-form-submit-min-height);
  margin: 0.25rem 0 0;
  padding: 1rem var(--zaaks-form-submit-padding-x);
  border: 1px solid var(--zaaks-form-submit-bg);
  border-radius: 5rem;
  font: inherit;
  font-family: "Martian Mono", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.196rem;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  color: var(--zaaks-form-submit-color);
  box-shadow: var(--zaaks-form-shadow);
  transition: var(--zaaks-form-transition);
}

.zaaks-form > .zaaks-form-message,
.zaaks-form > .zaaks-form-submit {
  margin-left: calc(var(--bs-gutter-x, 0) * 0.5);
  margin-right: calc(var(--bs-gutter-x, 0) * 0.5);
}

.zaaks-form-submit:hover:not(:disabled) {
  background: var(--zaaks-form-submit-hover-bg);
}

.zaaks-form-submit:active:not(:disabled) {
  background: var(--zaaks-form-submit-active-bg);
}

.zaaks-form-submit:focus-visible {
  outline: none;
  box-shadow: var(--zaaks-form-focus-ring);
}

.zaaks-form-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.zaaks-form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Slightly tighter on small screens */
@media (max-width: 480px) {
  .zaaks-form,
  .zaaks-form-loading {
    --zaaks-form-gap: 1rem;
    --zaaks-form-input-min-height: 4rem;
  }

  .zaaks-form-submit {
    width: 100%;
    align-self: stretch;
  }
}

@media (min-width: 768px) {
  .zaaks-form,
  .zaaks-form-loading,
  .zaaks-form-message {
    --zaaks-form-font-size: 1.8rem;
    --zaaks-form-input-min-height: 4.8rem;
    --zaaks-form-input-padding-x: 3rem;
    --zaaks-form-submit-min-height: 4.8rem;
  }

  .zaaks-form-submit {
    padding: 1.4rem var(--zaaks-form-submit-padding-x);
    gap: 1.5rem;
    font-size: 1.4rem;
  }
}