/* Instructor application form. Builds on the student form's .esa-ap components
   (apply.css from the Elimu Sasa Application Form plugin) and adds only what
   this form needs: option groups, help text, file input, step counter. */

.esa-ti .esa-ap__panel { margin-bottom: 20px; }
.esa-ti p.esa-ti__step {
	margin: 0 0 6px; font-family: Archivo, sans-serif; font-size: 12px; font-weight: 700;
	letter-spacing: 0.14em; text-transform: uppercase; color: #F15A24;
}
.esa-ti h3.esa-ti__panel-h { font-size: 24px; margin-bottom: 6px; }
.esa-ti .esa-ti__req { color: #C7420F; font-weight: 800; }
.esa-ti p.esa-ti__help { margin: -2px 0 2px; font-size: 13.5px; line-height: 1.5; color: #7C77A8; }

/* Radio and checkbox groups */
.esa-ti fieldset.esa-ti__choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.esa-ti fieldset.esa-ti__choice legend { padding: 0; margin-bottom: 8px; line-height: 1.45; }
.esa-ti .esa-ti__options { display: flex; flex-wrap: wrap; gap: 10px; }
.esa-ti .esa-ti__options--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.esa-ti label.esa-ti__option {
	display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px;
	border: 1.5px solid #DCD8EE; border-radius: 8px; background: #FFFFFF; cursor: pointer;
	font-size: 14.5px; font-weight: 600; color: #1B1642; line-height: 1.35;
	transition: border-color 160ms ease, background-color 160ms ease;
}
.esa-ti label.esa-ti__option:hover { border-color: #7C77A8; }
.esa-ti label.esa-ti__option input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; accent-color: #F15A24; cursor: pointer; }
.esa-ti label.esa-ti__option:has(input:checked) { border-color: #F15A24; background: #FFEDE4; }
.esa-ti label.esa-ti__option:focus-within { outline: 3px solid rgba(241, 90, 36, 0.35); outline-offset: 2px; }
.esa-ti .esa-ti__choice.has-error label.esa-ti__option { border-color: #E3A39B; }

/* Visible keyboard focus everywhere in the form */
.esa-ti .esa-ap__input:focus-visible,
.esa-ti button:focus-visible,
.esa-ti a:focus-visible,
.esa-ti .esa-ap__consent input:focus-visible { outline: 3px solid #F15A24; outline-offset: 2px; }

/* File input */
.esa-ti input.esa-ti__file { padding: 12px; cursor: pointer; }
.esa-ti input.esa-ti__file::file-selector-button {
	margin-right: 14px; padding: 9px 16px; border: 0; border-radius: 6px; cursor: pointer;
	background: #FFEDE4; color: #C7420F; font-family: Manrope, sans-serif; font-weight: 700; font-size: 14px;
}

/* Conditional fields: hidden only once the script is running */
.esa-ti [hidden] { display: none !important; }

.esa-ti .esa-ti__consent-wrap { margin-top: 22px; padding-top: 20px; border-top: 1px solid #E7E4F2; }
.esa-ti .esa-ti__consent-wrap.has-error .esa-ap__consent input { outline: 2px solid #C0392B; outline-offset: 2px; }

.esa-ti .esa-ti__submitbar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
	padding: 22px 30px; background: #FFFFFF; border: 1px solid #E7E4F2; border-radius: 16px;
}
.esa-ti p.esa-ti__reqnote { margin: 0; font-size: 13.5px; color: #7C77A8; }
.esa-ti button.esa-ti__submit { min-width: 240px; }

/* Success */
.esa-ti p.esa-ti__signoff { margin-top: 22px; color: #1B1642; }
.esa-ti p.esa-ti__signoff-brand { font-family: Archivo, sans-serif; font-weight: 700; color: #1B1642; margin: 0; }
.esa-ti p.esa-ti__signoff-brand span { color: #F15A24; }
.esa-ti .esa-ap__done:focus { outline: none; }

/* ---------- One step at a time (added by teach-form.js) ----------
   Without the script every step shows and the submit bar stays at the end. */
.esa-ti__form.is-enhanced .esa-ti__panel { display: none; margin-bottom: 0; }
.esa-ti__form.is-enhanced .esa-ti__panel.is-active { display: block; }
.esa-ti__form.is-enhanced .esa-ti__panel-h:focus { outline: none; }

/* Seven steps: numbers only, with the current step's name beside its dot. */
.esa-ti ol.esa-ti__stepper { padding: 18px 22px; }
.esa-ti .esa-ti__stepper .esa-ap__stepper-item + .esa-ap__stepper-item::before { min-width: 10px; margin: 0 8px; }
.esa-ti button.esa-ti__stepbtn {
	display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto;
	padding: 0; margin: 0; border: 0; background: none; box-shadow: none;
	font: inherit; color: inherit; line-height: 1.2; cursor: default; text-transform: none; letter-spacing: 0;
}
.esa-ti button.esa-ti__stepbtn:hover,
.esa-ti button.esa-ti__stepbtn:focus { background: none; color: inherit; }
.esa-ti button.esa-ti__stepbtn[disabled] { opacity: 1; }
.esa-ti .is-done button.esa-ti__stepbtn { cursor: pointer; }
.esa-ti .is-done button.esa-ti__stepbtn:hover .esa-ap__stepper-n { background: var(--accent); color: #FFFFFF; }
.esa-ti .esa-ti__stepper .esa-ap__stepper-l { display: none; white-space: nowrap; }
.esa-ti .esa-ti__stepper .esa-ap__stepper-item.is-active .esa-ap__stepper-l { display: inline; }

.esa-ti .esa-ti__nav { margin-top: 28px; }
.esa-ti .esa-ti__nav .esa-ap__nav-btns { margin-left: auto; }

@media (max-width: 640px) {
	.esa-ti ol.esa-ti__stepper { padding: 14px 12px; }
	.esa-ti .esa-ti__stepper .esa-ap__stepper-item + .esa-ap__stepper-item::before { min-width: 4px; margin: 0 4px; }
	.esa-ti .esa-ti__stepper .esa-ap__stepper-n { width: 26px; height: 26px; flex-basis: 26px; }
	.esa-ti .esa-ti__stepper .esa-ap__stepper-item.is-active .esa-ap__stepper-l { display: none; }
	.esa-ti .esa-ti__nav .esa-ap__nav-btns { width: 100%; }
	.esa-ti .esa-ti__nav .esa-ap__nav-btns > * { flex: 1 1 auto; }
}

@media (max-width: 640px) {
	.esa-ti .esa-ti__submitbar { padding: 18px; }
	.esa-ti button.esa-ti__submit { width: 100%; min-width: 0; }
	.esa-ti .esa-ti__options--grid { grid-template-columns: 1fr; }
}