/* Online Direct Login (/fees) - same BM theme as the admission form */
.testbox { max-width:760px; }
.banner { margin-bottom:22px; }
.banner .ttl { flex:1 1 320px; min-width:0; }
.banner .subttl { display:block; margin-top:4px; font:500 17px/1.3 var(--body); color:rgba(255,255,255,.95); }
.fees-card { padding:2px 2px 6px; }
.fees-card .sec-h h2 { margin:0; font:800 19px var(--head); color:var(--fg); }
.fees-card .sec-h small { display:block; margin:4px 0 18px; color:var(--muted); font:500 14px/1.45 var(--body); }
.fees-card .lbl { display:block; margin:0 0 7px; font:700 13px var(--body); color:var(--fg); }
.fees-card .req { color:#c62d3f; }
.fees-row { display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.fees-field { flex:1 1 320px; min-width:0; }
.fees-field input[type=text] { display:block; width:100%; height:48px; padding:0 14px; margin:0; font:600 15px var(--body); border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--fg); box-sizing:border-box; text-transform:none; }
.fees-field input[type=text]:focus { outline:none; border-color:var(--p1); box-shadow:0 0 0 4px rgba(163,48,46,.16); }
.fees-field input.bad { border-color:#c62d3f !important; background:#fff7f8 !important; }
.fees-row .Submitbutton { height:48px; min-width:150px; margin:0; top:0; left:0; }
.ferr { display:block; margin:8px 0 0; padding:8px 11px; border-radius:10px; background:#fff1f2; border:1px solid #f5c2cd; color:#a61d3a; font:600 13px/1.4 var(--body); }
.ferr::before { content:"!"; display:inline-grid; place-items:center; width:15px; height:15px; margin-right:7px; border-radius:50%; background:#c62d3f; color:#fff; font:800 10px var(--head); vertical-align:1px; }
.fees-msg { display:block; margin-top:12px; font:700 14px/1.45 var(--body); color:#a61d3a; }
.fees-msg:empty { display:none; }
.fees-wait { display:flex; align-items:center; gap:10px; margin-top:14px; color:var(--muted); font:600 14px var(--body); }
.fees-wait .spin { width:20px; height:20px; border-radius:50%; border:3px solid #eadbd6; border-top-color:var(--p1); animation:sp 0.8s linear infinite; }
@keyframes sp { to { transform:rotate(360deg); } }
.hdr-right .blinklabel:empty { display:none; }
@media (max-width:720px) { .fees-row .Submitbutton { width:100%; } .banner .ttl { flex-basis:100%; } .banner h1 { font-size:21px; } }
@media (prefers-reduced-motion:reduce) { .fees-wait .spin { animation:none; } }

/* ---- responsive: phone / tablet / desktop ---- */
html, body { min-height:100%; }
.testbox { width:100%; max-width:820px; margin:0 auto; padding:clamp(12px,3vw,40px) clamp(12px,3vw,24px) 48px; box-sizing:border-box; }
.testbox form { padding:clamp(14px,2.4vw,28px); }
.banner { margin:calc(-1 * clamp(14px,2.4vw,28px)) calc(-1 * clamp(14px,2.4vw,28px)) 22px; padding:clamp(16px,2.6vw,26px); }
.banner h1 { font-size:clamp(20px,3.2vw,28px); }
.banner .subttl { font-size:clamp(14px,1.8vw,17px); }
.fees-card .sec-h h2 { font-size:clamp(17px,2.2vw,21px); }
.fees-field input[type=text] { font-size:16px; }          /* 16px stops the page zooming in on iPhones */
@media (min-width:1100px) { .testbox { max-width:900px; padding-top:56px; } .fees-field input[type=text], .fees-row .Submitbutton { height:52px; } }
@media (max-width:720px) {
  .fees-row { flex-direction:column; align-items:stretch; gap:10px; }
  .fees-field { flex:1 1 auto; width:100%; }
  .fees-row .Submitbutton { width:100%; min-width:0; }
}
@media (max-width:380px) { .fees-card .sec-h small { font-size:13px; } .fees-card .lbl { font-size:12.5px; } }