/* ========================================================== mobile-fix.css — MUST be the LAST stylesheet in every Neutralises auth_compact.css density on phones. ========================================================== */ @media (max-width: 700px) { /* ---- 1. Inputs: kill iOS zoom, restore tap height ---- */ html body .login-wrap input, html body .login-wrap select, html body .login-wrap textarea, html body .reg-wrap input, html body .reg-wrap select, html body .reg-wrap textarea, html body .apply-panel input, html body .apply-panel select, html body .apply-panel textarea, html body .wiz-wrap input, html body .wiz-wrap select, html body .wiz-wrap textarea, html body .student-login-form input, html body .input-btn-row input, html body .otp-row input, html body .roll-check-row input, html body input, html body select, html body textarea { font-size: 16px !important; height: auto !important; min-height: 44px !important; padding: 10px 12px !important; line-height: 1.35 !important; margin: 0 !important; } html body input[type="checkbox"], html body input[type="radio"] { min-height: 0 !important; width: 20px !important; height: 20px !important; padding: 0 !important; } html body .login-wrap input[type="file"], html body .reg-wrap input[type="file"], html body .apply-panel input[type="file"], html body input[type="file"] { min-height: 46px !important; height: auto !important; font-size: 14px !important; padding: 10px 8px !important; } /* ---- 2. Buttons ---- */ html body .login-wrap button, html body .login-wrap .btn, html body .login-wrap a.btn, html body .reg-wrap button, html body .reg-wrap .btn, html body .apply-panel button, html body .apply-panel .btn, html body .wiz-wrap button, html body .wiz-wrap .btn, html body .btn-send, html body .btn-verify, html body .btn-otp, html body .btn-register, html body .btn-gold, html body button, html body .btn { min-height: 44px !important; height: auto !important; padding: 11px 16px !important; font-size: 15px !important; line-height: 1.25 !important; } html body .input-btn-row .btn-send, html body .input-btn-row .btn-verify, html body .otp-row .btn-otp, html body .roll-check-row .btn-otp { height: auto !important; min-height: 44px !important; width: 100% !important; } html body .sub-nav a { display: inline-block !important; padding: 11px 10px !important; } /* ---- 3. Readable text ---- */ html body .login-wrap label, html body .reg-wrap label, html body .apply-panel label { font-size: 15px !important; line-height: 1.35 !important; margin: 14px 0 6px !important; } html body .login-wrap p, html body .login-wrap .muted, html body .reg-wrap p, html body .reg-wrap .muted, html body .apply-panel p, html body .apply-panel .muted, html body .login-wrap .alert, html body .reg-wrap .alert, html body .apply-panel .alert, html body .step-err, html body .step-err li, html body .step-desc, html body .rg-sub, html body .reg-footer { font-size: 14px !important; line-height: 1.45 !important; } html body .password-check, html body .password-match { font-size: 13px !important; line-height: 1.4 !important; } html body .password-check::before, html body .password-match::before { width: 15px !important; height: 15px !important; font-size: 10px !important; } html body .step-label, html body .rg-title { font-size: 15px !important; } html body .login-wrap h3 { font-size: 16px !important; line-height: 1.3 !important; } html body .login-wrap .section-title .accent, html body .apply-panel .section-title .accent { font-size: 12px !important; } /* ---- 4. Wizard step bar (ported from apply.html) ---- */ html body .step-bar { justify-content: flex-start !important; overflow-x: auto !important; overflow-y: hidden !important; padding-bottom: 8px !important; -webkit-overflow-scrolling: touch; } html body .step-node { flex: 0 0 62px !important; } html body .step-conn { flex: 0 0 16px !important; min-width: 16px !important; } html body .step-circle { width: 32px !important; height: 32px !important; font-size: 13px !important; } html body .step-lbl { font-size: 11px !important; max-width: 60px !important; margin-top: 4px !important; } html body .step-num, html body .rg-num { width: 32px !important; height: 32px !important; font-size: 14px !important; } html body .step-left { width: 32px !important; } /* ---- 5. Grids that never collapse ---- */ html body .password-checklist, html body .preview-grid, html body .preview-grid.three, html body .application-choice-row, html body .top-grid, html body .student-login-links, html body .cgrid, html body .student-details-grid, html body .student-upload-grid, html body .rv-row, html body .input-btn-row, html body .otp-row, html body .roll-check-row { grid-template-columns: 1fr !important; } /* ---- 6. Containers ---- */ html body .login-wrap, html body .reg-wrap, html body .wiz-wrap, html body .success-wrap, html body .container { padding-left: 12px !important; padding-right: 12px !important; margin-top: 16px !important; max-width: 100% !important; } html body .login-wrap .box, html body .reg-card, html body .apply-panel.box, html body .success-wrap .box, html body .wiz-wrap > .box { padding: 16px 14px 18px !important; } html body .login-wrap, html body .reg-wrap, html body .wiz-wrap { line-height: 1.45 !important; } /* ---- 7. Course rows ---- */ html body .course-row { padding: 16px 12px 14px !important; } html body .rm-btn { top: 8px !important; right: 8px !important; width: 32px !important; height: 32px !important; } /* ---- 8. Tables + media ---- */ html body table { display: block !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } html body img, html body video, html body iframe { max-width: 100% !important; height: auto !important; } }