/* 🧾 Commission Form Styling */
.contact-section {
  margin-top: 40px;
  padding: 20px;
  background-color: rgba(27, 43, 35, 0.85);
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(163,196,243,0.1);
}

.contact-section h2 {
  color: #a3c4f3;
  margin-bottom: 20px;
  text-align: center;
  text-shadow: 0 0 6px rgba(163,196,243,0.3);
}

#commissionForm {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

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

.form-step label {
  color: #cfd2cd;
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

.form-step input,
.form-step select,
.form-step textarea {
  width: 100%;
  padding: 10px;
  background-color: rgba(15, 23, 19, 0.9);
  border: 1px solid rgba(163,196,243,0.2);
  border-radius: 6px;
  color: #cfd2cd;
  font-family: inherit;
}

.form-step input:focus,
.form-step select:focus,
.form-step textarea:focus {
  outline: none;
  border-color: #a3c4f3;
  box-shadow: 0 0 8px rgba(163,196,243,0.3);
}

.form-step button {
  background-color: #3a5a40;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.form-step button:hover {
  background-color: #4f7d5c;
}

#completedMessage {
  text-align: center;
  color: #a3c4f3;
  font-size: 1.2rem;
  padding: 20px;
  background-color: rgba(15, 23, 19, 0.9);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(163,196,243,0.2);
}

/* ✨ Fade Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}