/* ==========================================================================
   Campus Forms — Field Variants Framework
   ========================================================================== */

.cp-field.cp-fv-1 .cp-input,
.cp-field.cp-fv-1 .cp-select,
.cp-field.cp-fv-1 .cp-textarea {
  border: 1px solid var(--cp-control-border);
  border-radius: var(--cp-control-radius);
  background: var(--cp-control-bg);
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cp-field.cp-fv-1 .cp-input:focus,
.cp-field.cp-fv-1 .cp-select:focus,
.cp-field.cp-fv-1 .cp-textarea:focus {
  border-color: var(--cp-form-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-form-accent) 16%, transparent);
}

.cp-field.cp-fv-2 .cp-input,
.cp-field.cp-fv-2 .cp-select,
.cp-field.cp-fv-2 .cp-textarea {
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--cp-form-accent) 7%, var(--cp-control-bg));
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cp-field.cp-fv-2 .cp-input:focus,
.cp-field.cp-fv-2 .cp-select:focus,
.cp-field.cp-fv-2 .cp-textarea:focus {
  box-shadow: 0 6px 18px color-mix(in srgb, var(--cp-form-accent) 26%, transparent);
  transform: translateY(-1px);
}

.cp-field.cp-fv-3 .cp-input,
.cp-field.cp-fv-3 .cp-select,
.cp-field.cp-fv-3 .cp-textarea {
  border: 0;
  border-bottom: 2px solid var(--cp-form-border);
  border-radius: 0;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  box-shadow: none;
  transition: border-color 0.25s ease;
}

.cp-field.cp-fv-3 .cp-input:focus,
.cp-field.cp-fv-3 .cp-select:focus,
.cp-field.cp-fv-3 .cp-textarea:focus {
  border-bottom-color: var(--cp-form-accent);
}

/* Family-level touches for clearer visual distinction. */
.cp-field.cp-fv-family-yes-no.cp-fv-2 .cp-yn-btn,
.cp-field.cp-fv-family-yes-no.cp-fv-2 .cp-yesno-option .cp-yesno-label {
  border-radius: 9999px;
}

.cp-field.cp-fv-family-rating.cp-fv-2 .cp-rating-star {
  transform: scale(1.06);
}

.cp-field.cp-fv-family-alert.cp-fv-2 .cp-alert {
  box-shadow: 0 10px 28px color-mix(in srgb, var(--cp-form-accent) 22%, transparent);
}

.cp-field.cp-fv-family-alert.cp-fv-3 .cp-alert {
  border: 0;
  border-left: 3px solid var(--cp-form-accent);
  background: transparent;
  box-shadow: none;
}