/* OC application form: additions on top of forms.css */

.form-header .dept-list {
  list-style: none;
  margin: 18px auto 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.form-header .dept-list li {
  padding: 6px 14px;
  font-size: 0.9rem;
  border: 1px solid rgba(127, 191, 176, 0.6);
  border-radius: 20px;
  color: #cfeee6;
}

.form-header .contact-mail i { color: #7fbfb0; margin-left: 6px; }

/* Required marker */
.form-group label.req::after {
  content: " *";
  color: #d93025;
  font-weight: bold;
}

.label-hint {
  font-weight: 400;
  font-size: 0.85rem;
  color: #6b7280;
}

.pref-row .form-group { min-width: 0; }

@media (max-width: 768px) {
  .form-row { flex-direction: column; gap: 0; }
  .form-row .form-group { margin-bottom: 20px; }
}

/* Radio choice (Design / Editing) */
.radio-group.inline { flex-direction: row; flex-wrap: wrap; }
.radio-group.inline .radio-option { flex: 1 1 160px; }

.form-group .radio-option {
  display: flex;
  margin: 0;
  font-weight: 500;
}

.form-group .radio-option input[type="radio"] {
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

/* Validation */
.field-error {
  display: block;
  min-height: 0;
  margin-top: 6px;
  color: #c53030;
  font-size: 0.85rem;
}

.field-error:empty { display: none; }

.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: #fc8181;
  background: #fff5f5;
}

.form-alert {
  margin: 24px 40px 0;
  padding: 14px 18px;
  border-radius: 8px;
  background: #fff5f5;
  border-left: 4px solid #e53e3e;
  color: #9b2c2c;
  font-size: 0.95rem;
}

.form-alert[hidden] { display: none; }

/* Link status under link inputs */
.link-status {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  min-height: 0;
}

.link-status:empty { display: none; }
.link-status.checking { color: #6b7280; }
.link-status.ok { color: #2f855a; }
.link-status.warn { color: #b7791f; }
.link-status.bad { color: #c53030; }

.conditional[hidden] { display: none; }

/* Interview slots */
.hold-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #e6f4f0;
  border-left: 4px solid #7fbfb0;
  color: #1f4d43;
  font-size: 0.95rem;
}

.hold-banner[hidden] { display: none; }
.hold-banner strong { margin-left: auto; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.hold-banner.warn { background: #fffbeb; border-left-color: #d69e2e; color: #7b5a12; }

.slot-message {
  margin-bottom: 14px;
  color: #6b7280;
  font-size: 0.95rem;
}

.slot-message:empty { display: none; }
.slot-message.error { color: #c53030; }

.slot-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.slot-date,
.slot-time {
  font-family: 'Times New Roman', serif;
  font-size: 1rem;
  cursor: pointer;
  border: 2px solid #e1e8ed;
  background: #fafbfc;
  color: #212121;
  transition: all 0.2s ease;
}

.slot-date {
  padding: 10px 18px;
  border-radius: 30px;
}

.slot-date:hover,
.slot-time:hover:not(:disabled) {
  border-color: #7fbfb0;
  background: #f0f9f6;
}

.slot-date.active {
  background: #212121;
  border-color: #212121;
  color: #fff;
}

.slot-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}

.slot-time {
  padding: 12px 8px;
  border-radius: 8px;
}

.slot-time.selected {
  background: #7fbfb0;
  border-color: #7fbfb0;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(127, 191, 176, 0.45);
}

.slot-time:disabled { opacity: 0.6; cursor: wait; }

/* Submit / success */
.submit-btn:disabled { opacity: 0.7; cursor: wait; transform: none; }

.success-panel {
  padding: 60px 40px;
  text-align: center;
  background: white;
}

.success-panel[hidden] { display: none; }
.success-panel i { font-size: 4rem; color: #7fbfb0; margin-bottom: 18px; }
.success-panel h3 { font-family: 'Cinzel', serif; font-size: 1.8rem; color: #212121; margin-bottom: 14px; }
.success-panel p { color: #444; font-size: 1.1rem; line-height: 1.7; margin: 6px 0; }
.success-slot strong { color: #1f4d43; }

.success-btn {
  display: inline-block;
  margin-top: 24px;
  padding: 12px 30px;
  border-radius: 30px;
  background: #212121;
  color: #9ED5C5;
  text-decoration: none;
  font-weight: 600;
}

@media (max-width: 600px) {
  .form-alert { margin: 18px 18px 0; }
  .registration-form { padding: 30px 18px; }
  .form-header { padding: 36px 20px; }
  .slot-times { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
}