/* ============================================================
   REGISTRATION WIZARD (.sr-*) — shared design system
   ------------------------------------------------------------
   Extracted verbatim from SchoolRegister.razor so the student wizard can reuse
   the exact same card, stepper, buttons and OTP boxes instead of duplicating
   them. A plain <style> block inside a .razor page is NOT scoped, but it only
   renders on pages that render that component - which is why these rules had to
   move here to be shared.

   Consumers: /school/register, /student/register
   ============================================================ */
    .sr-wrap { min-height:70vh; display:flex; align-items:center; justify-content:center; padding:32px 16px; }
    /* Scoped under .sr-wrap (0,2,0) on purpose: responsive-normalize.css ships
       [class*="-card"]{max-width:100%} at (0,1,0) and loads LAST, so a bare
       .sr-card ties and loses — the card stretched full width. This used to work
       only because the rules lived in an inline <style> in the page body. */
    .sr-wrap .sr-card { background:#fff; border:1px solid var(--gray-200); border-radius:18px; padding:32px; max-width:560px; width:100%; box-shadow:0 18px 48px -24px rgba(16,42,67,.35); }
    .sr-body { text-align:center; }
    .sr-icon { font-size:40px; margin-bottom:4px; }
    .sr-body h1 { font-size:22px; font-weight:800; color:var(--navy); margin:8px 0 6px; }
    .sr-sub { color:var(--gray-500); font-size:14px; line-height:1.6; margin-bottom:20px; }

    .sr-steps { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:24px; }
    .sr-step { display:flex; flex-direction:column; align-items:center; gap:4px; }
    .sr-step__num { width:32px; height:32px; border-radius:50%; border:2px solid var(--gray-300); color:var(--gray-400);
                    display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; }
    .sr-step--active .sr-step__num { border-color:var(--orange); color:#fff; background:var(--orange); }
    .sr-step--done .sr-step__num { border-color:var(--green,#16a34a); color:#fff; background:var(--green,#16a34a); }
    .sr-step__label { font-size:11px; color:var(--gray-400); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
    .sr-step--active .sr-step__label { color:var(--navy); }
    .sr-step__line { width:40px; height:2px; background:var(--gray-200); margin:0 6px; margin-bottom:18px; }
    .sr-step__line--done { background:var(--green,#16a34a); }

    .sr-field { text-align:left; margin-bottom:14px; }
    .sr-field .form-input { width:100%; }
    /* min-height is the safety net: <button> carries overflow:hidden from the UA
       stylesheet, so ANY future rule that squeezes the box silently crops the label
       instead of failing loudly. Flex centring keeps the text optically centred
       whether the label runs to one line or two. */
    .sr-btn { width:100%; min-height:46px; padding:13px; background:var(--orange); color:#fff; border:0;
              border-radius:12px; display:flex; align-items:center; justify-content:center; text-align:center;
              font-size:15px; font-weight:700; line-height:1.25; cursor:pointer; transition:opacity .15s;
              margin-bottom:8px; }
    .sr-btn:disabled { opacity:.5; cursor:not-allowed; }
    .sr-btn--ghost { background:transparent; color:var(--gray-500); border:1px solid var(--gray-200); }
    .sr-btn--ghost:hover { background:var(--gray-50,#f9fafb); }
    .sr-back { display:inline-block; margin-top:12px; font-size:13px; color:var(--gray-500); text-decoration:none; }
    .sr-alert--err { background:#FEF2F2; color:#991B1B; border:1px solid #FECACA; border-radius:10px; padding:10px 14px; font-size:13px; margin-bottom:16px; text-align:left; }

    .sr-info { text-align:left; background:var(--gray-50,#f9fafb); border:1px solid var(--gray-200); border-radius:12px; padding:16px; margin-bottom:20px; }
    .sr-info__row { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--gray-100,#f3f4f6); font-size:14px; }
    .sr-info__row:last-child { border-bottom:0; }
    .sr-info__label { color:var(--gray-500); }
    .sr-info__value { color:var(--navy); text-align:right; }

    .otp-boxes { display:flex; gap:10px; justify-content:center; margin-bottom:22px; }
    .otp-box { width:48px; height:56px; text-align:center; font-size:24px; font-weight:700; color:var(--navy);
               border:2px solid var(--gray-200); border-radius:12px; outline:none; transition:border-color .15s; }
    .otp-box:focus { border-color:var(--orange); }
    .sr-resend { margin-top:12px; font-size:13.5px; color:var(--gray-500); }
    .sr-link { background:none; border:0; color:var(--orange); font-weight:700; cursor:pointer; font-size:13.5px; }
    .sr-link:disabled { opacity:.5; cursor:not-allowed; }

    @@media (max-width:480px) {
        .sr-card { padding:20px 16px; }
        .sr-step__label { font-size:10px; }
        .sr-step__line { width:24px; }
        .otp-box { width:42px; height:50px; font-size:20px; }
    }

/* ── Additions for the student wizard: a compact 2-column field grid.
      Collapses to one column on phones, so no step overflows or gets tall. ── */
.sr-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; text-align:left; }
.sr-grid--1 { grid-template-columns:1fr; }
.sr-field { display:flex; flex-direction:column; gap:6px; text-align:left; }
.sr-field__label { font-size:12.5px; font-weight:700; color:var(--gray-600); }
.sr-field__label .req { color:var(--orange); }
/* ── Action row ───────────────────────────────────────────────────────────────
   There used to be TWO .sr-actions definitions in this file: an earlier one that
   set flex-direction:column, and this one, which assumed a row but never declared
   it. Column therefore won at every width while `.sr-actions .sr-btn{flex:1 1 0}`
   stayed in force — and in a COLUMN, flex-basis:0 sets the button's HEIGHT to zero.
   flex-grow could not restore it (an auto-height container has no free space to
   distribute), so every button collapsed to its 13px+13px padding = 26px and the UA
   stylesheet's overflow:hidden cropped the label in half. That is what clipped
   "Yes, this is my school", "Register & Send OTP", "No, go back" and "Back".

   Now: stacked by default (heights come from content, so nothing can collapse), and
   a real row only from 561px up, which is the one place flex:1 1 0 is meaningful. */
.sr-actions { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.sr-actions .sr-btn { flex:0 0 auto; margin-bottom:0; }

@media (min-width:561px) {
    .sr-actions { flex-direction:row; }
    /* Equal-width columns — safe here because the main axis is horizontal. */
    .sr-actions .sr-btn { flex:1 1 0; }
}
.sr-note { font-size:12.5px; color:var(--gray-500); line-height:1.55; text-align:left;
    background:var(--gray-50,#f9fafb); border:1px solid var(--gray-200); border-radius:10px; padding:10px 12px; }
.sr-check { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--gray-600); text-align:left; }
.sr-check input { width:16px; height:16px; accent-color:var(--orange); }

@media (max-width:560px) {
    .sr-grid { grid-template-columns:1fr; }
    /* .sr-actions is column by default now — the min-width:561px row rule simply
       does not apply here, so no override is needed. */
    .sr-step__label { display:none; }
    .sr-step__line { width:22px; margin-bottom:0; }
}