/* Resident Registration Form Styles */

/* Base form control styles with rounded borders */
.form-control,
input.form-control,
select.form-control,
textarea.form-control {
  display: block !important;
  width: 100% !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #495057 !important;
  background-color: #fff !important;
  background-clip: padding-box !important;
  border: 1px solid #d2d6da !important;
  border-radius: 0.375rem !important;
  transition: all 0.15s ease-in-out !important;
}

.form-control:focus,
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
  color: #495057 !important;
  background-color: #fff !important;
  border-color: #000 !important;
  outline: 0 !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.15) !important;
}

/* Success State - Green Border and Checkmark */
.form-control.is-valid,
input.form-control.is-valid,
select.form-control.is-valid,
textarea.form-control.is-valid {
  border-color: #28a745 !important;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
  background-image: none !important;
}

input.form-control.is-valid {
  border-color: #28a745 !important;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

.form-control.is-valid:focus,
input.form-control.is-valid:focus,
input.form-control.is-valid:active,
select.form-control.is-valid:focus,
select.form-control.is-valid:active,
textarea.form-control.is-valid:focus,
textarea.form-control.is-valid:active,
textarea.form-control.is-valid {
  border-color: #28a745 !important;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

/* Ensure .is-valid:focus always wins over .form-control:focus */
.form-control:focus.is-valid,
input.form-control:focus.is-valid,
select.form-control:focus.is-valid,
textarea.form-control:focus.is-valid {
  border-color: #28a745 !important;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

/* Error State - Red Border and X Icon */
.form-control.is-invalid,
input.form-control.is-invalid,
select.form-control.is-invalid,
textarea.form-control.is-invalid {
  border-color: #f44336 !important;
  padding-right: calc(1.5em + 1.5rem) !important;
 
  background-repeat: no-repeat !important;
  background-position: right calc(0.375em + 0.75rem) center !important;
  background-size: calc(0.75em + 0.75rem) calc(0.75em + 0.75rem) !important;
}

.form-control.is-invalid:focus,
input.form-control.is-invalid:focus,
select.form-control.is-invalid:focus,
textarea.form-control.is-invalid:focus {
  border-color: #f44336 !important;
  box-shadow: 0 0 0 0.2rem rgba(244, 67, 54, 0.25) !important;
}

.form-control.is-invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
  background-image: none !important;
}

/* Invalid feedback message */
.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #f44336;
}

.invalid-feedback.d-block {
  display: block !important;
}

/* Valid feedback message */
.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #66bb6a;
}

.valid-feedback.d-block {
  display: block !important;
}

/* Form labels */
label {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #344767;
}

/* Placeholder styles */
.form-control::placeholder {
  color: #adb5bd;
  opacity: 1;
}

/* Section headers */
.personal-header,
.citizenship-header,
.education-header,
.additional-header {
  color: #344767;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

/* Horizontal rule */
hr {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Button styles */
.btn {
  font-weight: 600;
  border-radius: 0.375rem;
  transition: all 0.15s ease-in-out;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}