/* ======================================== LOGIN PAGE MOBILE RESPONSIVE FIX Add this to your login.php in the section: ======================================== */ /* Base improvements for all screens */ .login-card { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .login-main { width: 100%; max-width: 450px; margin: 0 auto; } /* Logo improvements */ .login-main .logo img { max-width: 180px; height: auto; } /* Heading adjustments */ .login-main h4 { font-size: 1.5rem; margin-top: 1.5rem !important; margin-bottom: 0.5rem; } .login-main p { font-size: 0.95rem; margin-bottom: 1.5rem; } /* Form groups */ .form-group { margin-bottom: 1.25rem; } .form-group label { font-size: 0.9rem; margin-bottom: 0.5rem; font-weight: 500; } .form-control { padding: 0.75rem 1rem; font-size: 0.95rem; border-radius: 8px; } /* Submit button */ .btn-primary { padding: 0.85rem 1.5rem; font-size: 1rem; font-weight: 600; border-radius: 8px; } /* Divider */ .divider { display: flex; align-items: center; text-align: center; margin: 1.5rem 0; color: #999; font-size: 0.85rem; } .divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid #ddd; } .divider span { padding: 0 1rem; } /* Google button improvements */ .google-btn-container { margin-bottom: 1rem; } .google-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 0.85rem 1rem; background: #fff; border: 1px solid #ddd; border-radius: 8px; text-decoration: none; color: #333; font-weight: 500; font-size: 0.95rem; transition: all 0.3s ease; } .google-btn:hover { background: #f8f9fa; border-color: #bbb; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .google-btn svg { width: 20px; height: 20px; flex-shrink: 0; } /* Bottom links */ .login-main p.mt-4 { font-size: 0.875rem; margin-top: 1rem !important; } .login-main p.mt-4 a { color: #007bff; font-weight: 500; text-decoration: none; } .login-main p.mt-4 a:hover { text-decoration: underline; } /* Alert messages */ .alert { padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.875rem; margin-bottom: 1rem; } /* ======================================== MOBILE OPTIMIZATIONS (Below 768px) ======================================== */ @media (max-width: 767px) { /* Hide the right side image on mobile */ .col-xl-6:has(.bg-img-cover) { display: none !important; } /* Full width login card */ .col-xl-6:has(.login-card) { width: 100%; max-width: 100%; flex: 0 0 100%; } .login-card { padding: 15px; min-height: 100vh; } .login-main { padding: 20px 15px; } /* Logo size */ .login-main .logo img { max-width: 140px; } /* Heading sizes */ .login-main h4 { font-size: 1.25rem; margin-top: 1rem !important; } .login-main p { font-size: 0.875rem; } /* Form elements */ .form-group label { font-size: 0.85rem; } .form-control { padding: 0.7rem 0.9rem; font-size: 0.9rem; } /* Button sizing */ .btn-primary, .google-btn { padding: 0.75rem 1rem; font-size: 0.9rem; } .google-btn svg { width: 18px; height: 18px; } .google-btn-text { font-size: 0.875rem; } /* Divider */ .divider { margin: 1.25rem 0; font-size: 0.8rem; } .divider span { padding: 0 0.75rem; } /* Bottom links */ .login-main p.mt-4 { font-size: 0.8rem; margin-top: 0.75rem !important; } /* Alert spacing */ .alert { padding: 0.65rem 0.85rem; font-size: 0.8rem; } } /* ======================================== SMALL MOBILE (Below 480px) ======================================== */ @media (max-width: 480px) { .login-card { padding: 10px; } .login-main { padding: 15px 10px; } /* Logo */ .login-main .logo img { max-width: 120px; } /* Headings */ .login-main h4 { font-size: 1.15rem; } .login-main p { font-size: 0.8rem; } /* Form elements */ .form-group { margin-bottom: 1rem; } .form-group label { font-size: 0.8rem; margin-bottom: 0.4rem; } .form-control { padding: 0.65rem 0.85rem; font-size: 0.85rem; } /* Buttons */ .btn-primary, .google-btn { padding: 0.7rem 0.9rem; font-size: 0.85rem; } .google-btn svg { width: 16px; height: 16px; } /* Divider */ .divider { margin: 1rem 0; } /* Links */ .login-main p.mt-4 { font-size: 0.75rem; line-height: 1.4; } } /* ======================================== PASSWORD PROTECTION OVERLAY FIX ======================================== */ @media (max-width: 768px) { #passwordProtectionOverlay .auth-box { padding: 30px 20px; max-width: 90%; margin: 0 auto; } #passwordProtectionOverlay h2 { font-size: 20px !important; } #passwordProtectionOverlay p { font-size: 13px !important; max-width: 100% !important; } #passwordProtectionOverlay input { padding: 12px !important; font-size: 14px !important; } #passwordProtectionOverlay button { padding: 14px !important; font-size: 14px !important; } .guest-badge { font-size: 10px !important; padding: 6px 12px !important; } } @media (max-width: 480px) { #passwordProtectionOverlay .auth-box { padding: 25px 15px; } #passwordProtectionOverlay h2 { font-size: 18px !important; letter-spacing: 1px !important; } #passwordProtectionOverlay p { font-size: 12px !important; } } /* ======================================== LANDSCAPE MODE FIX ======================================== */ @media (max-height: 600px) and (orientation: landscape) { .login-card { min-height: auto; padding: 20px 10px; } .login-main { padding: 15px; } .login-main h4 { margin-top: 0.5rem !important; } .form-group { margin-bottom: 0.8rem; } .divider { margin: 1rem 0; } } /* ======================================== UTILITY IMPROVEMENTS ======================================== */ /* Show/Hide password toggle */ .show-hide { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; } /* Spinner for loading state */ .spinner-border-sm { width: 1rem; height: 1rem; border-width: 0.15em; } /* Focus states */ .form-control:focus { border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); outline: none; } .btn-primary:focus { box-shadow: 0 0 0 0.2rem rgba(0,123,255,.5); outline: none; } /* Disabled state */ .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }