/* Kids Skill Time — enrollment form additions (international phone, time zone, preferred times) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.enroll-note { margin: 1rem auto 0; max-width: 40rem; padding: .85rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid rgba(38, 208, 192, .35); background: rgba(38, 208, 192, .08); color: var(--text); font-size: .95rem; line-height: 1.55; }
.enroll-note strong { color: var(--teal-text); }
#enroll-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: .4rem; }
#enroll-form legend { padding: 0; margin-bottom: .4rem; display: block; }
#enroll-form .hint { font-weight: 500; font-size: .82rem; color: var(--muted); }
#enroll-form .opt { font-weight: 500; color: var(--muted); }
.phone-row { display: grid; grid-template-columns: minmax(9rem, 40%) 1fr; gap: .6rem; }
.phone-row select { text-overflow: ellipsis; }
.day-picks { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.day-pick { display: block !important; cursor: pointer; }
.day-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.day-pick span { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--input-bg); font-weight: 700; transition: border-color .15s, background .15s, color .15s; }
.day-pick input:checked + span { border-color: var(--orange); background: var(--hw-bg); color: var(--orange-text); }
.day-pick input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.days-field.invalid .day-pick span { border-color: #ff8a8a; }
#enroll-form input.bad { border-color: #ff8a8a; }
@media (max-width: 620px) {
  .phone-row { grid-template-columns: 1fr; }
  .day-picks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}