/* =========================================================
   COACHING INSTITUTE REGISTRATION (instituteregistration) - the Tutor Registration's look
   (css/pages/tutor-registration.css), plus these few pieces
   ========================================================= */
.inst-sub { margin: 4px 0 10px; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted, #9a9a9a); }
#registrationPage .section .vertical-fields > .two-col { margin: 0; }
#streamsField { margin-top: 6px; }
@media (max-width: 760px) {
  #registrationPage .two-col { grid-template-columns: minmax(0, 1fr); }
}

/* the admin panel's Edit (instituteregistration?admin=1&edit=1): no terms, and Save only once something is changed -
   closing the pop-up (a click outside) leaves it as it was */
html.admin-edit #sectionTerms .terms, html.admin-edit #termsError { display: none; }
html.admin-edit:not(.is-changed) #registerButton { display: none; }

/* ---------- Staff Requirement (a vacancy): a pill, off at first; ticked, one box with Teaching / Non-Teaching ---------- */
#hirePillField .pill-check { margin-top: 0; }
.vac-box { margin-top: 14px; animation: vacIn .25s ease; }
#registrationPage .vac-box .vertical-fields > .field + .field { margin-top: 4px; }
#registrationPage .vac-box .inst-sub { margin-bottom: 10px; }
#registrationPage .vac-box .inst-sub .required, .vac-box .float-field span { }
.vac-other { margin-top: 10px; }
#registrationPage .vac-box .selection-box.cols-2 .selection-option:last-child:nth-child(odd) { grid-column: 1 / -1; }
.vac-pay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#registrationPage .selection-box.vac-days { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
#registrationPage .selection-box.vac-days .selection-option { padding: 12px 0; border-radius: 999px; letter-spacing: .03em; }
.vac-block { animation: vacIn .25s ease; }
@keyframes vacIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  #registrationPage .selection-box.vac-days { gap: 4px; }
  #registrationPage .selection-box.vac-days .selection-option { font-size: 11px !important; letter-spacing: 0; }
  .vac-pay { gap: 8px; }
}

/* the admin panel's Edit Institute: the institute only (its vacancies are added with Apply for Vacancy) */
html.admin-edit #sectionHiring, html.admin-edit .vac-block { display: none !important; }
/* the admin panel's Apply for Vacancy: the institute picked, then the requirement only */
html.vac-mode #sectionInstitute, html.vac-mode #sectionAddress, html.vac-mode #sectionContact,
html.vac-mode #sectionMode, html.vac-mode #sectionCourses, html.vac-mode #sectionSubjects,
html.vac-mode #sectionTerms .terms, html.vac-mode #termsError { display: none !important; }
html.vac-mode #sectionFor { display: block; }
html.vac-mode #hirePillField { display: none; }
html.vac-mode .vac-box { margin-top: 0; }
.vac-find { position: relative; }
.vac-suggest { position: absolute; left: 0; right: 0; top: calc(100% - 22px); z-index: 30; max-height: 260px; overflow-y: auto; padding: 6px;
  border-radius: 16px; border: 1px solid var(--border, #2a2a2a); background: var(--card, #0b0b0b); box-shadow: 0 18px 40px -18px rgba(0,0,0,.55); }
.vac-suggest button { display: grid; width: 100%; gap: 2px; padding: 9px 12px; border: 0; border-radius: 10px; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.vac-suggest button:hover, .vac-suggest button:focus-visible { background: rgba(22, 163, 74, .12); outline: 0; }
.vac-suggest b { font-weight: 700; font-size: 14px; }
.vac-suggest small { font-size: 12px; opacity: .65; }
.vac-suggest p { padding: 10px 12px; opacity: .6; font-size: 13px; }
html.admin-light .vac-suggest, html[data-theme="light"] .vac-suggest { background: #fff; border-color: #e5e5e5; }

/* no line between the sections (as the admin panel's forms) */
#registrationPage .section { border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 28px !important; }
#registrationPage .section.last-section { margin-bottom: 0 !important; }
/* Apply for Vacancy: Post Vacancy once the requirement is filled in */
html.vac-mode:not(.vac-ready) #sectionTerms .submit-area { display: none; }

/* inside the admin panel: no "Beta Version" strip of its own (the panel has one) */
html.admin-embed #beta-strip { display: none !important; }

/* Teaching Staff | Non-Teaching Staff: the login's Student | Tutor switch */
.vac-kind { margin-bottom: 22px; }
.vac-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 0; padding: 4px; box-sizing: border-box;
  border-radius: 999px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.vac-switch label { position: relative; z-index: 1; display: grid; place-items: center; height: 42px; margin: 0; padding: 0 6px; border-radius: 999px; cursor: pointer;
  color: #9ca3af; font: 700 15px/1.1 Inter, -apple-system, sans-serif; text-align: center; transition: color .2s ease; -webkit-tap-highlight-color: transparent; }
.vac-switch input { position: absolute; opacity: 0; pointer-events: none; }
.vac-switch label:has(input:checked) { color: #ffffff; }
.vac-switch label:has(input:focus-visible) { outline: 2px solid #16a34a; outline-offset: 2px; }
.vac-switch i { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #16a34a; opacity: 0;
  transition: left .22s cubic-bezier(.3, .9, .4, 1), opacity .15s ease; }
.vac-switch:has(input:checked) i { opacity: 1; }
.vac-switch:has(input[value="Non-Teaching"]:checked) i { left: 50%; }
.vac-kind .field-error { display: block; text-align: center; }
html[data-theme="light"] .vac-switch, html.admin-light .vac-switch { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
html[data-theme="light"] .vac-switch label, html.admin-light .vac-switch label { color: #6b7280; }
html[data-theme="light"] .vac-switch label:has(input:checked), html.admin-light .vac-switch label:has(input:checked) { color: #ffffff; }
@media (max-width: 760px) { .vac-switch label { font-size: 14px; } }

/* inside the institute's own profile: its Apply for Vacancy needs no finding the institute */
html.vac-self #sectionFor { display: none !important; }
/* Find the institute: just the words in the box (no label going up over it) */
.vac-for input::placeholder { color: var(--muted, #8a8a8a); opacity: 1; }
#sectionFor { padding-top: 4px; }