/* Admission Landing Page Grid Layout */
.admission-landing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-6);
  max-width: 1000px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .admission-landing-grid {
    grid-template-columns: 1fr 1fr;
  }
  .instructions-block {
    grid-column: 1 / -1;
  }
}

.panels-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-6);
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .panels-container {
    grid-template-columns: 1fr 1fr;
  }
}

.panel-title {
  color: var(--primary-color);
  font-family: var(--font-heading);
  border-bottom: 2px solid var(--border-color);
  padding-bottom: var(--spacing-2);
  margin-bottom: var(--spacing-2);
  font-size: 1.25rem;
}

.instructions-block {
  background-color: #fff8e1; /* Light yellow background */
  border-left: 4px solid var(--accent-color);
}

/* Multi-Step Form Styles */
.stepper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-6);
  padding: 0 var(--spacing-4);
}

.stepper .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
  position: relative;
  z-index: 1;
}

.stepper .step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--bg-color);
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--text-muted);
  transition: var(--transition-normal);
}

.stepper .step.active .step-circle {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

.stepper .step.completed .step-circle {
  background-color: var(--success-color);
  border-color: var(--success-color);
  color: #fff;
}

.stepper .step-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

.stepper .step.active .step-label {
  color: var(--primary-color);
}

.stepper .step-line {
  flex: 1;
  height: 2px;
  background-color: var(--border-color);
  margin: 0 -20px;
  margin-bottom: 20px; /* Align with circle centers */
  position: relative;
  top: -10px;
}

.form-step {
  display: none;
  animation: fadeIn 0.3s ease-in-out;
}

.form-step.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.step-actions {
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--border-color);
}

/* Validation Styles */
.form-control.is-invalid {
  border-color: var(--error-color);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ef4444'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ef4444' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-valid {
  border-color: var(--success-color);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2310b981' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.75em;
  color: var(--error-color);
}

.form-control.is-invalid ~ .invalid-feedback,
.form-control.is-invalid + .invalid-feedback {
  display: block;
}