/* ============================================================================
   Conditional Form – Styles
   Uses Bricks global variables: --brand-*, --gray-*, --radius-*, --spacing-*,
   --shadow-*, --text-*, --font-*, --leading-*
   ============================================================================ */

.dr-conditional-form {
  display: grid;
  gap: var(--spacing-xl, 1rem);
}

/* ----- Field wrapper ----- */

.dr-form-field {
  display: grid;
  gap: var(--spacing-sm, 0.375rem);
}

.dr-form-field.is-hidden {
  display: none;
}

/* ----- Labels ----- */

.dr-form-label {
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--leading-sm, 1.25rem);
  font-weight: var(--font-medium, 500);
  color: var(--gray-700, #414651);
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}

.dr-form-required {
  color: #F04438;
}

.dr-form-required[data-conditional-required] {
  display: none;
}

.dr-form-field.is-conditionally-required .dr-form-required[data-conditional-required] {
  display: inline;
}

/* ----- Inputs, selects, textareas ----- */

.dr-form-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--gray-300, #D5D7DA);
  border-radius: var(--radius-lg, 0.625rem);
  background: var(--white, #FFFFFF);
  color: var(--gray-900, #181D27);
  font-size: var(--text-md, 1rem);
  line-height: var(--leading-md, 1.5rem);
  box-shadow: var(--shadow-xs, 0px 1px 2px rgba(10, 13, 18, 0.05));
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dr-form-input::placeholder {
  color: var(--gray-500, #717680);
}

.dr-form-input:hover:not(:disabled) {
  border-color: var(--gray-400, #A4A7AE);
}

.dr-form-input:focus,
.dr-form-input:focus-visible {
  outline: none;
  border-color: var(--brand-500, #507C6D);
  box-shadow:
    0px 0px 0px 4px rgba(80, 124, 109, 0.24),
    var(--shadow-xs, 0px 1px 2px rgba(10, 13, 18, 0.05));
}

.dr-form-input:disabled {
  background: var(--gray-50, #FAFAFA);
  color: var(--gray-500, #717680);
  cursor: not-allowed;
}

/* Select arrow */
select.dr-form-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23717680' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1.25rem;
}

/* Textarea */
textarea.dr-form-input {
  min-height: 5.5rem;
  resize: vertical;
}

/* ----- Radio & Checkbox options ----- */

.dr-form-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs, 0.25rem) var(--spacing-xl, 1rem);
}

.dr-form-options--column {
  flex-direction: column;
  gap: var(--spacing-sm, 0.375rem);
}

.dr-form-option {
  display: inline-flex;
  gap: var(--spacing-sm, 0.375rem);
  align-items: center;
  font-size: var(--text-md, 1rem);
  line-height: var(--leading-md, 1.5rem);
  color: var(--gray-700, #414651);
  cursor: pointer;
}

.dr-form-option input[type="radio"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--brand-600, #3F6257);
  cursor: pointer;
}

/* ----- Custom Checkbox (drpm-style) ----- */

.dr-checkbox-wrapper {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.dr-checkbox__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.dr-checkbox {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--white, #FFFFFF);
  border: 1px solid var(--gray-300, #D5D7DA);
  border-radius: 0.375rem;
  margin-top: 0.125rem;
  transition: all 0.15s ease;
  cursor: pointer;
}

.dr-checkbox__icon {
  position: absolute;
  width: 0.875rem;
  height: 0.875rem;
  color: var(--white, #FFFFFF);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.dr-checkbox__label {
  font-size: var(--text-md, 1rem);
  line-height: var(--leading-md, 1.5rem);
  color: var(--gray-700, #414651);
  font-weight: var(--font-medium, 500);
}

/* Hover */
.dr-checkbox-wrapper:hover .dr-checkbox {
  border-color: var(--brand-600, #3F6257);
}

/* Focus */
.dr-checkbox__input:focus-visible + .dr-checkbox {
  outline: 2px solid var(--brand-600, #3F6257);
  outline-offset: 2px;
}

/* Checked */
.dr-checkbox__input:checked + .dr-checkbox {
  background: var(--brand-600, #3F6257);
  border-color: var(--brand-600, #3F6257);
}

.dr-checkbox__input:checked + .dr-checkbox .dr-checkbox__icon {
  opacity: 1;
}

/* Disabled */
.dr-checkbox__input:disabled + .dr-checkbox {
  background: var(--gray-50, #FAFAFA);
  border-color: var(--gray-300, #D5D7DA);
  cursor: not-allowed;
}

.dr-checkbox__input:checked:disabled + .dr-checkbox {
  background: var(--gray-100, #F5F5F5);
  border-color: var(--gray-300, #D5D7DA);
}

.dr-checkbox__input:checked:disabled + .dr-checkbox .dr-checkbox__icon {
  color: var(--gray-400, #A4A7AE);
}

.dr-checkbox__input:disabled ~ .dr-checkbox__label {
  color: var(--gray-400, #A4A7AE);
  cursor: not-allowed;
}

/* ----- Help text ----- */

.dr-form-help {
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--leading-xs, 1.125rem);
  color: var(--gray-600, #535862);
}

/* ----- Submit button ----- */

.dr-form-submit {
  justify-self: start;
  padding: 0.625rem 1.125rem;
  border: 1px solid var(--brand-600, #3F6257);
  border-radius: var(--radius-lg, 0.625rem);
  background: var(--brand-600, #3F6257);
  color: var(--white, #FFFFFF);
  font-size: var(--text-md, 1rem);
  font-weight: var(--font-semibold, 600);
  line-height: var(--leading-md, 1.5rem);
  cursor: pointer;
  box-shadow: var(--shadow-xs, 0px 1px 2px rgba(10, 13, 18, 0.05));
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dr-form-submit:hover {
  background: var(--brand-700, #355048);
  border-color: var(--brand-700, #355048);
}

.dr-form-submit:focus-visible {
  outline: none;
  box-shadow:
    0px 0px 0px 2px var(--white, #FFFFFF),
    0px 0px 0px 4px var(--brand-500, #507C6D);
}

.dr-form-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ----- Message ----- */

.dr-form-message {
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--leading-sm, 1.25rem);
  min-height: 1.25rem;
}

.dr-form-message.is-success {
  color: #079455;
}

.dr-form-message.is-error {
  color: #F04438;
}

/* ----- Builder empty state ----- */

.dr-form-empty {
  padding: var(--spacing-xl, 1rem);
  border: 1px dashed var(--gray-300, #D5D7DA);
  border-radius: var(--radius-xl, 0.75rem);
  color: var(--gray-500, #717680);
  font-size: var(--text-sm, 0.875rem);
}