/* ============================================================ auth-mobile-fix.css Mobile responsiveness fixes for register.php Drop this AFTER auth.css in the ============================================================ */ /* ---------------------------------------------------------- 1. STEP INDICATOR — keep horizontal on ALL screen sizes The existing rule at ≤640px forces flex-direction:column which breaks the layout. We override it to stay horizontal with a compact pill style instead. ---------------------------------------------------------- */ .registration-page .wizard-step-indicator { display: flex; flex-direction: row !important; /* force row at all sizes */ flex-wrap: nowrap; align-items: flex-start; gap: 0; position: relative; padding: 0 0.25rem; overflow: visible; } /* Connector line — keep it spanning full width */ .registration-page .wizard-step-indicator::before { content: ''; position: absolute; top: 15px; left: 16px; right: 16px; height: 2px; border-radius: 999px; background: #cfd8e3; display: block !important; /* override the mobile hide */ z-index: 0; } /* Each step takes equal share of the row */ .registration-page .wizard-step-indicator__step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.28rem; position: relative; z-index: 1; } /* Circle stays the same 32px at all sizes */ .registration-page .wizard-step-indicator__circle { width: 30px; height: 30px; min-width: 30px; max-width: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; background: #f5f6f8; border: 1.5px solid #d6dbe1; color: #7a8797; flex-shrink: 0; position: relative; z-index: 1; transition: background 0.2s, border-color 0.2s, color 0.2s; } /* Label — tiny, centered, no wrapping issues */ .registration-page .wizard-step-indicator__label { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.01em; text-transform: none; color: #8a95a5; text-align: center; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; } /* Active state */ .registration-page .wizard-step-indicator__step.is-active .wizard-step-indicator__circle { background: var(--accent, #21693A); border-color: var(--accent, #21693A); color: #fff; box-shadow: 0 0 0 3px rgba(33, 105, 58, 0.18); } .registration-page .wizard-step-indicator__step.is-active .wizard-step-indicator__label { color: var(--accent, #21693A); font-weight: 700; } /* Completed state */ .registration-page .wizard-step-indicator__step.is-completed .wizard-step-indicator__circle { background: #eef6f1; border-color: #b8d8c3; color: var(--accent, #21693A); } /* ---------------------------------------------------------- 2. REGISTRATION HERO & PROGRESS — tighten spacing on mobile ---------------------------------------------------------- */ @media (max-width: 640px) { .registration-page .registration-page__hero { margin-top: -0.5rem; padding: 0 0.1rem; } .registration-page .auth-card__header h1 { font-size: 1.5rem; margin-bottom: 0.2rem; } .registration-page .auth-card__header p { font-size: 0.87rem; margin-top: 0; } .registration-wizard__progress--compact { margin: 0.75rem 0 0; padding: 0.6rem 0 0.75rem; } /* Slightly shrink labels on very small phones */ .registration-page .wizard-step-indicator__label { font-size: 0.57rem; } .registration-page .wizard-step-indicator__circle { width: 26px; height: 26px; min-width: 26px; max-width: 26px; font-size: 0.68rem; } /* Re-calibrate connector line for smaller circles */ .registration-page .wizard-step-indicator::before { top: 13px; } } /* ---------------------------------------------------------- 3. AUTH CARD — remove any side overflow on mobile ---------------------------------------------------------- */ @media (max-width: 640px) { .auth-card--registration { width: 100%; padding: 0.85rem 0.9rem 1rem; border-radius: 14px; } .registration-page .auth-card--registration { padding: 0.85rem 0.9rem 1rem; } /* Ensure wizard steps don't clip */ .wizard-step { padding-top: 0.4rem; } .registration-page .wizard-step h3 { font-size: 0.98rem; } .registration-page .form-section__subtitle { font-size: 0.8rem; margin-bottom: 0.65rem; padding-bottom: 0.5rem; } } /* ---------------------------------------------------------- 4. FORM GRID — always single column on mobile ---------------------------------------------------------- */ @media (max-width: 640px) { .registration-page .form-grid--compact { display: grid; grid-template-columns: 1fr !important; gap: 0.55rem; } .registration-page .form-grid--compact .field-group input, .registration-page .form-grid--compact .field-group select, .registration-page .form-grid--compact .field-group textarea { min-height: 44px; font-size: 16px; /* prevents iOS zoom on focus */ border-radius: 10px; } .registration-page .form-grid--compact .field-group label, .registration-page .form-grid--compact .field-group span:not(.sr-only) { font-size: 0.85rem; } } /* ---------------------------------------------------------- 5. WIZARD NAVIGATION — stack vertically on mobile, keep Previous/Next side-by-side in their own row ---------------------------------------------------------- */ @media (max-width: 640px) { .registration-page .wizard-navigation--compact { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.9rem; padding-top: 0.7rem; } .wizard-navigation__status { text-align: center; font-size: 0.82rem; color: #6d7b90; order: 1; } .registration-page .wizard-navigation__actions { display: flex; flex-direction: row !important; /* side-by-side: Previous | Next */ gap: 0.5rem; order: 2; } .registration-page .wizard-navigation__actions .button { flex: 1; min-height: 44px; font-size: 0.9rem; } } /* ---------------------------------------------------------- 6. ENTRY MODAL — true full-viewport overlay, above nav bar ---------------------------------------------------------- */ /* Ensure the modal sits above everything including the sticky nav */ .registration-entry-modal.app-modal:not([hidden]) { position: fixed !important; inset: 0 !important; /* top:0 right:0 bottom:0 left:0 */ z-index: 9999 !important; /* above nav (typically z-index ~100-1000) */ display: flex !important; align-items: center !important; justify-content: center !important; padding: 1rem; box-sizing: border-box; } /* Backdrop covers the full viewport */ .registration-entry-modal .app-modal__backdrop { position: fixed !important; inset: 0 !important; background: rgba(10, 20, 35, 0.55) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; z-index: 0; } /* Panel sits above the backdrop, constrained so it never clips */ .registration-entry-modal .app-modal__panel { position: relative; z-index: 1; width: min(680px, 100%); max-height: calc(100dvh - 2rem); /* dvh = dynamic viewport height, respects browser chrome */ overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; border-radius: 22px; /* ensure it never goes behind the keyboard on mobile */ margin: auto; } /* Tighter inner layout on small screens */ @media (max-width: 640px) { .registration-entry-modal.app-modal:not([hidden]) { padding: 0.75rem; align-items: flex-start; /* modal sheet slides from top */ padding-top: max(0.75rem, env(safe-area-inset-top)); } .registration-entry-modal .app-modal__panel { width: 100%; border-radius: 18px; max-height: calc(100dvh - 1.5rem); } .registration-entry-modal__header { padding: 1.1rem 1.1rem 0.85rem; } .registration-entry-modal__header h2 { font-size: 1.08rem; padding-right: 2.2rem; /* clear the close button */ line-height: 1.35; } .registration-entry-modal__subtitle { font-size: 0.84rem; line-height: 1.55; margin-top: 0.35rem; } .registration-entry-modal__body { padding: 1rem 1.1rem 1.25rem; gap: 0.85rem; } .registration-entry-modal__step { padding: 0.7rem 0.8rem; border-radius: 12px; gap: 0.65rem; } .registration-entry-modal__step strong { font-size: 0.88rem; } .registration-entry-modal__step small { font-size: 0.79rem; line-height: 1.45; } .registration-entry-modal__choice { padding: 0.9rem 1rem; font-size: 0.88rem; border-radius: 11px; line-height: 1.35; } /* Close button — absolutely positioned top-right */ .registration-entry-modal__close { position: absolute; top: 0.9rem; right: 0.9rem; width: 32px; height: 32px; border-radius: 8px; background: #f1f5f9; color: #4b5563; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } .registration-entry-modal__close:hover { background: #e2e8f0; color: #0f172a; } } /* ---------------------------------------------------------- 7. SIGNATURE PAD — full width, reasonable height on mobile ---------------------------------------------------------- */ @media (max-width: 640px) { .registration-page .registration-signature-pad { padding: 0.65rem; margin-bottom: 0.8rem; } .registration-page .registration-signature-pad__canvas { height: 110px; } .registration-page .registration-signature-pad__header p { font-size: 0.84rem; } } /* ---------------------------------------------------------- 8. PROFILE UPLOAD — center cleanly on mobile ---------------------------------------------------------- */ @media (max-width: 640px) { .registration-page .registration-profile-upload { padding: 0.7rem 0.7rem 0.65rem; margin-bottom: 0.75rem; } .registration-page .registration-profile-upload__avatar { width: 64px; height: 64px; min-width: 64px; } } /* ---------------------------------------------------------- 9. IDENTITY UPLOADER — fit small screens ---------------------------------------------------------- */ @media (max-width: 640px) { .registration-page .identity-uploader { padding: 0.7rem; } .registration-page .identity-uploader__dropzone { min-height: 110px; padding: 0.75rem; } .registration-page .identity-uploader__dropzone small { font-size: 0.78rem; } .registration-page .identity-uploader__preview-list.has-two { grid-template-columns: 1fr; /* already in auth.css but reinforced */ } .registration-page .identity-uploader__preview-item img, .registration-page .identity-uploader__file-placeholder { width: 48px; height: 48px; } } /* ---------------------------------------------------------- 10. REVIEW STEP — tighten on mobile ---------------------------------------------------------- */ @media (max-width: 640px) { .registration-page .registration-review > div { padding: 0.6rem 0.7rem; } .registration-page .registration-review dt { font-size: 0.72rem; } .registration-page .registration-review dd { font-size: 0.86rem; } .registration-page .registration-review__confirm-wrap { margin-top: 0.65rem; padding-top: 0.65rem; } .registration-page .registration-review__check span { font-size: 0.86rem; } } /* ---------------------------------------------------------- 11. META / FOOTER LINK — comfortable tap target on mobile ---------------------------------------------------------- */ @media (max-width: 640px) { .registration-page .registration-page__meta-outside { margin-top: 0.75rem; margin-bottom: 1.2rem; text-align: center; } .registration-page .registration-page__meta-outside p { font-size: 0.88rem; } .registration-page .registration-page__meta-outside a { font-size: 0.9rem; padding: 0.3rem 0; display: inline-block; } } /* ---------------------------------------------------------- 12. GENERAL — prevent horizontal overflow site-wide ---------------------------------------------------------- */ .auth-page { overflow-x: hidden; } .registration-page .auth-layout { padding-left: 0.75rem; padding-right: 0.75rem; box-sizing: border-box; } @media (max-width: 640px) { .registration-page .auth-layout { padding-left: 0.5rem; padding-right: 0.5rem; } .registration-page .registration-page__hero { width: 100%; } }