/* =========================================
Shared Form Styles
========================================= */

/* Remove green success styling from optional fields */
.form-core .form-control:valid {
  border-color: #ced4da;
  background-image: none;
  box-shadow: none;
}

/* =========================================
Force neutral checkbox styling (no green)
========================================= */

/* Kill Bootstrap valid green state */
.form-core.was-validated .form-check-input:valid,
.form-core .form-check-input.is-valid {
  border-color: #ced4da !important;
  background-color: #fff !important;
  box-shadow: none !important;
}

/* Remove Bootstrap green check SVG */
.form-core.was-validated .form-check-input:valid:checked,
.form-core .form-check-input.is-valid:checked {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

/* Match checkbox labels to other form text */
.form-core .form-check-label {
  color: var(--bs-primary-dark) !important;
  font-weight: 500;
}

/* Align validation messages */
.form-core .invalid-feedback {
  text-align: left;
}

/* Base input style */
.form-core .form-control {
  border-color: rgb(var(--bs-primary-rgb), 0.8) !important;
  border-width: 1.5px !important;
}

/* Focus style */
.form-core .form-control:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.4) !important;
}

/* Floating labels */
.form-core .form-floating > label {
  color: var(--bs-primary-dark) !important;
}

/* File inputs */
.form-core input[type="file"] {
  color: var(--bs-primary-dark) !important;
}

.form-core input[type="file"]::file-selector-button {
  color: var(--bs-primary-dark) !important;
}

/* Invalid state */
.form-core.was-validated .form-control:invalid:not(.validation-pending) {
  border-color: var(--bs-danger) !important;
}

.form-core.was-validated .form-control:invalid:not(.validation-pending):focus {
  border-color: var(--bs-danger) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25) !important;
}

/* Custom styles for image preview remove button */
.preview-remove-btn {
  position: absolute;
  top: 8px;
  right: 10px;

  width: 20px;
  height: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: 50%;

  background: rgba(0, 0, 0, 0.65);
  color: #fff;

  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;

  padding: 0;
  cursor: pointer;

  transition:
    background 0.2s ease,
    transform 0.15s ease;
}

.preview-remove-btn:hover {
  background: #dc3545;
  transform: scale(1.1);
}

.preview-remove-btn:active {
  transform: scale(0.95);
}