html, body { height: 100%; margin: 0; font-family: 'Montserrat', Arial, sans-serif; padding: 0; overflow-x: hidden; } body { min-height: 100vh; display: flex; flex-direction: column; scrollbar-width: none; -ms-overflow-style: none; background: #101218; } /* Landing page: allow scrolling on all screens. This prevents short desktop viewports from trapping modals. */ body.landing { height: auto; min-height: 100svh; overflow-y: auto; overscroll-behavior: auto; touch-action: manipulation; } body.landing .container { min-height: 100svh; height: auto; min-height: 100svh; } /* Portal: page scrolls vertically (footer space); no visible page scrollbar */ body[data-page="portal"] { height: auto; min-height: 100svh; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: auto; scrollbar-width: none; -ms-overflow-style: none; } body[data-page="portal"]::-webkit-scrollbar { width: 0; height: 0; } html:has(body[data-page="portal"]) { height: auto; min-height: 100%; scrollbar-width: none; -ms-overflow-style: none; } html:has(body[data-page="portal"])::-webkit-scrollbar { width: 0; height: 0; } /* Optional: add class portal-hide-main-nav to to hide the in-flow nav (e.g. when you add your own menu/footer links). */ @media (min-width: 701px) { body.portal-hide-main-nav .portal-top-nav--document { display: none !important; } body.portal-hide-main-nav .portal-shell { padding-top: 20px; } } /* Mobile/iOS: keep videos visible. If autoplay is blocked, JS adds body.video-fallback and we simply keep a slightly stronger overlay. */ @media (hover: none) and (pointer: coarse) { body.video-fallback .overlay { background: rgba(0, 0, 0, 0.60) !important; } } body::-webkit-scrollbar { width: 0; height: 0; } .top-nav { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) 16px; background: rgba(8, 10, 20, 0.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 25; } .nav-actions { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 560px; margin: 0 auto; } .nav-btn { min-height: 42px; padding: 0 18px; border-radius: 40px; text-decoration: none; color: #f8fafc; border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(15, 23, 42, 0.45); display: inline-flex; align-items: center; justify-content: center; font-size: 0.95em; font-weight: 600; transition: all 0.2s ease; } .nav-btn:hover { background: rgba(15, 23, 42, 0.72); border-color: rgba(255, 255, 255, 0.65); } .nav-btn-primary { background: linear-gradient(135deg, #5d6dff, #7c49ff); border-color: transparent; } .nav-btn-primary:hover { filter: brightness(1.05); } .mobile-logout-btn { display: none; position: fixed; right: calc(12px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; min-height: 44px; padding: 0 16px; border-radius: 999px; text-decoration: none; font-weight: 800; color: #ffffff; background: rgba(239, 68, 68, 0.82); border: 1px solid rgba(255, 255, 255, 0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .mobile-logout-btn:active { transform: translateY(1px); } .whatsapp-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; background: #000000b6; color: #ffffff; text-decoration: none; border-radius: 40px; font-weight: 700; font-size: 1.1em; line-height: 1; box-shadow: 0px 3px 15px #000000; transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease, background 0.22s ease, border-radius 0.22s ease; } .whatsapp-link:hover { color: #ffffff; background: linear-gradient(135deg, #20c15bb1, #0ea64ba8); border-radius: 40px; transform: translateY(-1px); filter: brightness(1.01); box-shadow: 0 2px 14px #d1d1d1; } .whatsappsvg{ width: 22px; height: 22px; vertical-align: middle; margin-right: 0; transition: transform 0.22s ease; } .whatsapp-link:hover .whatsappsvg { transform: scale(1.08) rotate(-4deg); } /* Video background and overlay */ .bgVideo { position: fixed; top: 0; left: 0; min-width: 100vw; min-height: 100vh; object-fit: cover; z-index: 0; width: 100vw; height: 100vh; pointer-events: none; filter: blur(6px); background: #101218; } .fade { opacity: 0; transform: translateX(100%); transition: transform 0.9s ease, opacity 0.9s ease; will-change: transform, opacity; /* Keep stacked for slide transition */ position: fixed; top: 0; left: 0; min-width: 100vw; min-height: 100vh; width: 100vw; height: 100vh; object-fit: cover; z-index: 0; pointer-events: none; } .fade.show { opacity: 1; transform: translateX(0); } .fade.slide-out-left { opacity: 0; transform: translateX(-100%); } .overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.55); z-index: 1; } body.video-fallback .overlay { background: rgba(0, 0, 0, 0.38); } .vector1 { display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 0px; margin-top: 30px; } .vector1 img { max-width: 400px; width: 100%; height: auto; } /* Centered container */ .container { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 70vh; padding-bottom: 96px; color: #fff; text-align: center; flex: 1 0 auto; } .container, p { font-size: 1.1em; } .container h1 { font-size: 3em; margin-bottom: 0.4em; margin-top: -1.5em; font-weight: 600; letter-spacing: 1px; } .signup-btn { min-height: 52px; padding: 0 26px; background: #000000bd; color: #ffffff; font-size: 1.1em; line-height: 1; border-radius: 40px; text-decoration: none; box-shadow: 0px 3px 15px #000000; transition: background 0.2s; margin-top: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .signup-btn:hover { background: #e1e1e1b6; color: #050505; box-shadow: 0 2px 14px #d1d1d1; border-radius: 8px solid black; } .action-buttons { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; } .action-buttons .signup-btn, .action-buttons .whatsapp-link { width: 240px; min-height: 52px; padding: 0 22px; box-sizing: border-box; font-size: 1.1em; } .action-buttons .nav-btn { width: 240px; min-height: 52px; font-size: 1.1em; border-radius: 40px; box-sizing: border-box; } /* Wraps in-flow nav + grid so content scrolls with the page (no fixed nav bar) */ .portal-shell { position: relative; z-index: 3; width: 100%; max-width: 1280px; margin: 0 auto; padding: 12px 24px 72px; box-sizing: border-box; } .portal-profile-layout { position: relative; z-index: 3; min-height: 0; display: grid; grid-template-columns: minmax(0, min(520px, 100%)) minmax(0, 1fr); gap: 20px; align-items: stretch; padding: 0; box-sizing: border-box; } /* In document flow — not position:fixed (avoids covering content; page can scroll) */ .portal-top-nav.portal-top-nav--document { position: relative; top: auto; left: auto; right: auto; transform: none; width: 100%; max-width: none; margin: 0 0 18px 0; flex-wrap: wrap; justify-content: center; } @media (max-width: 700px) { .portal-shell { padding: 10px 10px 56px; max-width: none; width: 100%; box-sizing: border-box; overflow-x: hidden; } } /* Snap off for infinite-loop teleport (desktop-safe). */ .portal-profile-layout.snap-off { scroll-snap-type: none !important; } /* Mobile-only: during horizontal panel drag, JS drives scrollLeft; nested forms/calendar must not capture the gesture (see portal.js / admin.js touch handlers). */ @media (max-width: 700px), (max-device-width: 900px) { body[data-page="portal"] .portal-profile-layout.carousel-dragging, body[data-page="admin"] .portal-profile-layout.carousel-dragging { scroll-snap-type: none !important; touch-action: none !important; user-select: none; -webkit-user-select: none; will-change: scroll-position; } body[data-page="portal"] .portal-profile-layout.carousel-dragging .portal-profile-panel, body[data-page="admin"] .portal-profile-layout.carousel-dragging .portal-profile-panel { pointer-events: none !important; } } .portal-top-nav { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 12px; border-radius: 999px; background: rgba(8, 10, 20, 0.58); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .portal-nav-icon { width: 16px; height: 16px; display: inline-block; margin-right: 6px; vertical-align: middle; filter: saturate(0.95) brightness(1.05); object-fit: contain; } .portal-nav-paw { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; } .portal-top-nav .nav-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; line-height: 1; } .portal-profile-panel { background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(245, 248, 255, 0.9)); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.6); padding: 26px 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); min-width: 0; max-width: 100%; max-height: min(920px, calc(100svh - 140px)); min-height: 0; align-self: stretch; overflow-y: auto; overflow-x: hidden; /* allow wheel to chain to the page when panel is at scroll top/bottom */ overscroll-behavior-x: none; overscroll-behavior-y: auto; -webkit-overflow-scrolling: touch; } /* Portal: no visible scrollbar on panels; scroll/wheel/touch unchanged (desktop + mobile) */ body[data-page="portal"] .portal-profile-panel { scrollbar-width: none; -ms-overflow-style: none; } body[data-page="portal"] .portal-profile-panel::-webkit-scrollbar { width: 0; height: 0; } body[data-page="portal"] .portal-profile-layout { scrollbar-width: none; -ms-overflow-style: none; } body[data-page="portal"] .portal-profile-layout::-webkit-scrollbar { width: 0; height: 0; } @media (min-width: 701px) { .portal-profile-layout .portal-left-panel { display: flex; flex-direction: column; height: 100%; min-height: min(920px, calc(100svh - 140px)); } } .portal-left-panel { grid-column: 1; grid-row: 1; } .portal-calendar-panel { grid-column: 2; grid-row: 1; } .portal-profile-panel h2 { margin-top: 0; margin-bottom: 12px; color: #1f2937; text-align: center; } .portal-calendar-panel { max-height: min(920px, calc(100svh - 140px)); overflow-x: hidden; overflow-y: auto; overscroll-behavior-x: none; overscroll-behavior-y: auto; /* pan-y only on desktop — on mobile it blocks horizontal swipes on the parent carousel */ display: flex; flex-direction: column; align-items: stretch; align-self: stretch; min-height: 0; -webkit-overflow-scrolling: touch; } @media (min-width: 701px) { /* Same visual height as left column; one scroll area for grid + day details (no nested detail scroller) */ .portal-calendar-panel { min-height: min(920px, calc(100svh - 140px)); touch-action: pan-y; } } .calendar-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; width: 100%; } .calendar-title { font-weight: 800; color: #111827; text-align: center; flex: 1; } .calendar-nav { width: 42px; height: 42px; border-radius: 12px; border: 1px solid #d4dbe7; background: rgba(255, 255, 255, 0.9); font-weight: 900; cursor: pointer; transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease; } .calendar-nav:hover { transform: translateY(-1px); filter: brightness(1.01); box-shadow: 0 10px 20px rgba(93, 109, 255, 0.18); } .calendar-weekdays { display: grid !important; width: 100%; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; font-weight: 800; color: #4b5563; font-size: 0.85em; margin-bottom: 8px; text-align: center; } .calendar-grid { display: grid !important; width: 100%; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 58px; gap: 8px; flex: 0 0 auto; min-height: 280px; } .calendar-day { border: 1px solid #d4dbe7; background: rgba(255, 255, 255, 0.9); border-radius: 12px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; cursor: pointer; user-select: none; position: relative; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .calendar-day:hover { transform: translateY(-1px); box-shadow: 0 14px 26px rgba(93, 109, 255, 0.14); border-color: rgba(93, 109, 255, 0.35); } .calendar-day.is-outside { opacity: 0.45; } .calendar-day.is-today { border-color: rgba(124, 137, 255, 0.9); box-shadow: 0 0 0 3px rgba(124, 137, 255, 0.12); } .calendar-day.is-selected { border-color: rgba(93, 109, 255, 0.95); box-shadow: 0 0 0 4px rgba(93, 109, 255, 0.18); } .calendar-day-number { font-weight: 900; color: #111827; } .calendar-dot { width: 8px; height: 8px; border-radius: 999px; background: linear-gradient(135deg, #5d6dff, #7c49ff); margin: 8px auto 0 auto; } .calendar-day-detail { margin-top: 12px; border-top: 1px solid rgba(212, 219, 231, 0.9); padding-top: 12px; padding-bottom: 4px; flex: 0 0 auto; overflow: visible; width: 100%; } .calendar-day-detail-title { font-weight: 900; color: #111827; margin-bottom: 8px; text-align: center; } .calendar-day-detail-list { display: grid; gap: 8px; } .calendar-apt { border: 1px solid #d4dbe7; background: rgba(255, 255, 255, 0.9); border-radius: 12px; padding: 10px 12px; color: #1f2937; text-align: left; font-size: 0.92em; } .status-pill { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 999px; font-size: 0.78em; font-weight: 900; letter-spacing: 0.02em; border: 1px solid rgba(17, 24, 39, 0.12); } .status-pill.pending { background: rgba(245, 158, 11, 0.16); color: #92400e; border-color: rgba(245, 158, 11, 0.35); } .status-pill.approved { background: rgba(34, 197, 94, 0.14); color: #166534; border-color: rgba(34, 197, 94, 0.35); } .status-pill.cancelled { background: rgba(239, 68, 68, 0.14); color: #7f1d1d; border-color: rgba(239, 68, 68, 0.35); } .status-pill.cancel_requested { background: rgba(245, 158, 11, 0.16); color: #92400e; border-color: rgba(245, 158, 11, 0.35); } .calendar-dot.pending { background: #f59e0b; } .calendar-dot.approved { background: #22c55e; } .calendar-dot.cancelled { background: #ef4444; } .calendar-dot.cancel_requested { background: #f59e0b; } .calendar-apt-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .calendar-apt-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .apt-btn { border: 1px solid #d4dbe7; background: rgba(255, 255, 255, 0.95); border-radius: 10px; padding: 8px 10px; font-weight: 800; cursor: pointer; transition: transform 0.15s ease, filter 0.15s ease; } .apt-btn:hover { transform: translateY(-1px); filter: brightness(1.01); } .apt-btn.approve { border-color: rgba(34, 197, 94, 0.35); } .apt-btn.cancel { border-color: rgba(239, 68, 68, 0.35); } .portal-hero { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; } .portal-pets-panel { margin-top: 20px; width: min(640px, 92%); max-height: 52vh; } .pets-list { display: grid; gap: 10px; } .pet-card { text-align: left; border: 1px solid #d4dbe7; background: rgba(255, 255, 255, 0.9); border-radius: 12px; padding: 12px; color: #1f2937; } .pet-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .pet-card-head .pet-card-title { margin: 0; flex: 1; min-width: 0; } .pet-card-title { margin: 0 0 8px 0; color: #111827; font-weight: 700; } .pet-delete-btn { flex-shrink: 0; background: #ef4444; border: none; color: #ffffff; font-weight: 700; font-size: 0.78rem; padding: 8px 12px; border-radius: 10px; cursor: pointer; transition: filter 0.2s ease, transform 0.2s ease; } .pet-delete-btn:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); } .pet-delete-btn:disabled { opacity: 0.7; cursor: not-allowed; } .pet-card p { margin: 4px 0; font-size: 0.9em; } .pets-empty { color: #1f2937; } .appointments-panel-sections { margin-top: 14px; display: grid; gap: 10px; } .appointments-panel-sections h3 { margin: 8px 0 0 0; color: #1f2937; font-size: 0.96rem; text-align: center; } .appointments-stack { display: grid; gap: 8px; } .powered-by-anna { position: fixed; right: calc(10px + env(safe-area-inset-right)); bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 18; display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.86); background: rgba(8, 10, 20, 0.38); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; user-select: none; } .whatsapp-fab { position: fixed; right: calc(10px + env(safe-area-inset-right)); bottom: calc(40px + env(safe-area-inset-bottom)); z-index: 19; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; text-decoration: none; font-weight: 800; color: #ffffff; background: linear-gradient(135deg, rgba(32, 193, 91, 0.92), rgba(14, 166, 75, 0.86)); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform 0.18s ease, filter 0.18s ease; } .whatsapp-fab:hover { transform: translateY(-1px); filter: brightness(1.02); } .whatsapp-fab-icon { width: 18px; height: 18px; flex: 0 0 auto; color: #ffffff; } .whatsapp-fab-text { font-size: 0.92rem; line-height: 1; white-space: nowrap; } @media (max-width: 520px) { .whatsapp-fab-text { display: none; } .whatsapp-fab { padding: 12px; bottom: calc(42px + env(safe-area-inset-bottom)); } .whatsapp-fab-icon { width: 20px; height: 20px; } } @media (max-width: 700px) { .whatsapp-fab { right: auto; left: calc(12px + env(safe-area-inset-left)); bottom: calc(12px + env(safe-area-inset-bottom)); } } @media (max-width: 700px) { .powered-by-anna { font-size: 0.66rem; padding: 3px 7px; opacity: 0.92; } } /* Mobile logout: slightly smaller on phones */ @media (max-width: 700px), (hover: none) and (pointer: coarse) { .mobile-logout-btn { min-height: 40px; padding: 0 14px; font-size: 0.9rem; } } /* Landing mobile: show WhatsApp above Login button */ .whatsapp-inline { display: none; } @media (max-width: 700px) { body.landing .whatsapp-fab { display: none; } body.landing .action-buttons { flex-direction: column; } body.landing .whatsapp-inline { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 240px; min-height: 52px; padding: 0 22px; border-radius: 40px; box-sizing: border-box; text-decoration: none; font-size: 1.1em; font-weight: 800; color: #ffffff; background: linear-gradient(135deg, rgba(32, 193, 91, 0.92), rgba(14, 166, 75, 0.86)); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22); } body.landing .whatsapp-inline:hover { filter: brightness(1.02); transform: translateY(-1px); } body.landing .whatsapp-inline-icon { width: 18px; height: 18px; flex: 0 0 auto; } } /* Mobile bottom row: WhatsApp (left) + Powered-by (center) + Logout (right) */ @media (max-width: 700px) { /* WhatsApp: circle on mobile */ .whatsapp-fab { width: 46px; height: 46px; padding: 0; justify-content: center; bottom: calc(12px + env(safe-area-inset-bottom)); left: calc(12px + env(safe-area-inset-left)); right: auto; } .whatsapp-fab-text { display: none; } .whatsapp-fab-icon { width: 20px; height: 20px; } /* Powered-by: centered */ .powered-by-anna { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 18; } /* Logout: right */ .mobile-logout-btn { right: calc(12px + env(safe-area-inset-right)); left: auto; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; } } /* Appointment date selectors: keep clean like other form controls */ #appointmentYear, #appointmentMonth, #appointmentDay { scrollbar-width: none; -ms-overflow-style: none; } #appointmentYear::-webkit-scrollbar, #appointmentMonth::-webkit-scrollbar, #appointmentDay::-webkit-scrollbar { width: 0; height: 0; } .top-nav .signup-btn, .top-nav .whatsapp-link { min-height: 44px; font-size: 0.95em; padding: 0 16px; width: 240px; } /* Modal styles+centered form */ .modal { display: none; position: fixed; z-index: 20; left: 0; top: 0; width: 100vw; height: 100vh; align-items: center; justify-content: center; background: rgba(8, 10, 20, 0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .modal-content { display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(245, 248, 255, 0.9)); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.6); max-width: 480px; width: min(92vw, 480px); margin: auto; padding: 34px 26px 24px 26px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); position: relative; scrollbar-width: none; -ms-overflow-style: none; /* Ensure modals remain usable on short viewports (desktop too) */ max-height: calc(100vh - 24px); overflow-y: auto; } .modal-content::-webkit-scrollbar { width: 0; height: 0; } /* Short desktop screens: allow scrolling to reach buttons */ @media (max-height: 720px) { .modal { align-items: flex-start; padding-top: 12px; padding-bottom: 12px; } .modal-content { justify-content: flex-start; padding-top: 48px; /* keeps content below close button */ } } .close { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 1.25em; color: #4c5566; background: rgba(255, 255, 255, 0.85); border: 1px solid #dde4f0; cursor: pointer; pointer-events: auto; touch-action: manipulation; user-select: none; transition: all 0.2s ease; z-index: 12; } .close:hover { color: #111827; background: #ffffff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(17, 24, 39, 0.15); } /* Modal form styling & responsive */ #signupForm, #registerForm, #loginForm, #forgotForm, #petProfileForm, #profileForm, #appointmentForm { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 16px; } .field-group { position: relative; padding-top: 10px; } .password-field { position: relative; width: 100%; display: flex; align-items: stretch; } .password-field input { padding-right: 14px !important; } @media (hover: none) and (pointer: coarse) { .password-field input { padding-right: 88px !important; } } .pw-toggle { display: none; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); height: 34px; width: 40px; padding: 0; border-radius: 999px; border: 1px solid rgba(124, 137, 255, 0.35); background: rgba(255, 255, 255, 0.92); color: #1f2937; font-weight: 800; cursor: pointer; font-size: 0; } .pw-toggle:active { transform: translateY(calc(-50% + 1px)); } .pw-toggle::before { content: "👁"; font-size: 16px; line-height: 1; } .pw-toggle.is-on::before { content: "🙈"; } /* Only show password toggle on touch/mobile */ @media (hover: none) and (pointer: coarse) { .pw-toggle { display: inline-flex; align-items: center; justify-content: center; } } /* Fallback for mobile browsers that report pointer/hover inconsistently */ @media (max-width: 700px), (max-device-width: 900px) { .password-field input { padding-right: 88px !important; } .pw-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 34px !important; min-height: 34px !important; right: 10px !important; left: auto !important; padding: 0 !important; margin: 0 !important; z-index: 3; } } .date-field-group { margin-top: 8px; } .date-field-hint { margin: 0 0 6px 0; padding: 0; color: #7a8394; font-size: 0.82em; letter-spacing: 0.03em; text-align: center; } .date-select-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .date-select-row select { text-align: center; } .pet-field-group { margin-top: 8px; } .pet-detail-field-group { margin-top: 8px; } .field-group input { padding-top: 16px; padding-bottom: 10px; } .field-group select { padding-top: 16px; padding-bottom: 10px; } .field-group label { position: absolute; top: calc(50% + 5px); left: 50%; transform: translate(-50%, -50%); color: #7a8394; font-size: 0.82em; letter-spacing: 0.03em; pointer-events: none; background: rgba(255, 255, 255, 0.95); padding: 0 8px; border-radius: 999px; opacity: 0; transition: all 0.2s ease; } .field-group input:focus + label, .field-group input:not(:placeholder-shown) + label { top: 0; opacity: 1; color: #4f46e5; } .field-group select:focus + label, .field-group select:valid + label { top: 0; opacity: 1; color: #4f46e5; } .phone-field .phone-group + label { top: calc(50% + 5px); } .phone-field:has(.phone-group:focus-within) label, .phone-field:has(#phoneInput:not(:placeholder-shown)) label { top: 0; opacity: 1; color: #4f46e5; } #signupForm input, #signupForm select, #signupForm button:not(.pw-toggle), #registerForm input, #registerForm select, #registerForm button:not(.pw-toggle), #loginForm input, #loginForm select, #loginForm button:not(.pw-toggle), #forgotForm input, #forgotForm select, #forgotForm button:not(.pw-toggle), #petProfileForm input, #petProfileForm select, #petProfileForm button:not(.pw-toggle), #profileForm input, #profileForm select, #profileForm button:not(.pw-toggle), #appointmentForm input, #appointmentForm select, #appointmentForm button:not(.pw-toggle) { width: 100%; color: #1f2937; text-align: center; margin: 0; padding: 13px 14px; border: 1px solid #d4dbe7; border-radius: 12px; font-size: 0.96em; font-weight: 600; box-sizing: border-box; background: rgba(255, 255, 255, 0.9); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } #signupForm input::placeholder, #registerForm input::placeholder, #loginForm input::placeholder, #forgotForm input::placeholder, #petProfileForm input::placeholder, #profileForm input::placeholder, #appointmentForm input::placeholder { text-align: center; color: #7a8394; font-weight: 500; letter-spacing: 0.02em; } /* Optional: Highlight underline on focus */ #signupForm input:focus, #signupForm select:focus, #registerForm input:focus, #registerForm select:focus, #loginForm input:focus, #loginForm select:focus, #forgotForm input:focus, #forgotForm select:focus, #petProfileForm input:focus, #petProfileForm select:focus, #profileForm input:focus, #profileForm select:focus, #appointmentForm input:focus, #appointmentForm select:focus { border-color: #7c89ff; box-shadow: 0 0 0 4px rgba(124, 137, 255, 0.18); background: #ffffff; } #signupForm select, #registerForm select, #loginForm select, #forgotForm select, #petProfileForm select, #profileForm select, #appointmentForm select { appearance: none; text-align: center; font-weight: 500; color: #5b6474; } #signupForm button:not(.pw-toggle), #registerForm button:not(.pw-toggle), #loginForm button:not(.pw-toggle), #forgotForm button:not(.pw-toggle), #petProfileForm button:not(.pw-toggle), #profileForm button:not(.pw-toggle), #appointmentForm button:not(.pw-toggle) { margin-top: 8px; background: linear-gradient(135deg, #5d6dff, #7c49ff); color: #ffffff; font-weight: 700; letter-spacing: 0.02em; border: none; box-shadow: 0 12px 24px rgba(93, 109, 255, 0.28); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } #signupForm button:not(.pw-toggle):hover, #registerForm button:not(.pw-toggle):hover, #loginForm button:not(.pw-toggle):hover, #forgotForm button:not(.pw-toggle):hover, #petProfileForm button:not(.pw-toggle):hover, #profileForm button:not(.pw-toggle):hover, #appointmentForm button:not(.pw-toggle):hover { transform: translateY(-1px); filter: brightness(1.02); box-shadow: 0 16px 30px rgba(93, 109, 255, 0.34); } .phone-group { display: flex; align-items: center; gap: 10px; } .country-prefix { min-width: 108px; padding: 13px 10px; text-align: center; font-weight: 600; color: #4b5563; border: 1px solid #d4dbe7; border-radius: 12px; background: rgba(244, 247, 255, 0.95); appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; } .phone-group input { flex: 1; width: auto !important; margin: 0; padding: 13px 14px; border: 1px solid #d4dbe7 !important; border-radius: 12px; box-shadow: none !important; background: rgba(255, 255, 255, 0.9); } .phone-group input:focus { border-color: #7c89ff; box-shadow: 0 0 0 4px rgba(124, 137, 255, 0.18); background: #ffffff; } .pet-details { display: flex; flex-direction: column; gap: 16px; } #formResponse { margin-top: 12px; text-align: center; } #registerResponse, #loginResponse, #forgotResponse, #petProfileResponse, #profileResponse { margin-top: 12px; text-align: center; } .modal-form-link { margin-top: 4px; text-align: center; color: #4f46e5; text-decoration: underline; font-size: 0.92em; } .modal-form-link:hover { color: #312e81; } @media (max-width: 700px) { .portal-top-nav { display: none; } body[data-page="portal"] .portal-profile-layout, body[data-page="admin"] .portal-profile-layout { -webkit-tap-highlight-color: transparent; overscroll-behavior-x: contain; } .portal-profile-layout { display: flex; flex-direction: row; gap: 14px; padding: 0; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Allow horizontal swipe to scroll this track (children must not use touch-action: pan-y only) */ touch-action: pan-x pan-y; } .portal-profile-layout::-webkit-scrollbar { width: 0; height: 0; } /* 100% of track — 92vw was wider than padded shell and clipped the right edge */ .portal-profile-panel { max-height: none; overflow: hidden; padding: 16px; border-radius: 18px; flex: 0 0 100%; min-width: 0; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; max-height: calc(100vh - 24px); } /* On mobile carousel, always show all panels (no JS toggling) */ #petFormPanel, #myPetsPanel, #myProfilePanel, #appointmentsPanel { display: block !important; } .portal-profile-panel:not(.portal-calendar-panel) > form, .portal-profile-panel:not(.portal-calendar-panel) > #petsListContainer { overflow-y: auto; scrollbar-width: none; } .portal-profile-panel:not(.portal-calendar-panel) > form::-webkit-scrollbar, .portal-profile-panel:not(.portal-calendar-panel) > #petsListContainer::-webkit-scrollbar { width: 0; height: 0; } /* Calendar: one vertical scroll on the panel (grid + details move together) */ .portal-calendar-panel { overflow-x: hidden !important; overflow-y: auto !important; } /* Avoid flex:1 + overflow:hidden collapsing the month grid on short viewports */ .portal-calendar-panel .calendar-grid { flex: 1 1 auto; flex-shrink: 0; min-height: min(360px, 48svh); } .portal-hero { min-height: 34vh; } .portal-top-nav { width: min(94vw, 380px); flex-wrap: wrap; gap: 6px; top: 8px; padding: 8px; left: 50%; transform: translateX(-50%); } .portal-top-nav .nav-btn { min-height: 40px; padding: 0 12px; font-size: 0.84em; } .portal-pets-panel { width: 100%; max-height: none; } .container { justify-content: flex-start; align-items: center; text-align: center; height: auto; min-height: 100vh; padding-top: 26px; padding-bottom: 300px; } .vector1 { margin-top: 0; margin-bottom: 8px; width: 100%; } .vector1 img { width: min(72vw, 330px); max-width: min(72vw, 330px); } .top-nav { left: 50%; right: auto; transform: translateX(-50%); width: min(92vw, 340px); bottom: calc(122px + env(safe-area-inset-bottom)); padding: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .nav-actions { gap: 6px; flex-direction: column; align-items: stretch; width: 100%; } .nav-btn { min-height: 38px; padding: 0 14px; font-size: 0.88em; } .top-nav .signup-btn, .top-nav .whatsapp-link { min-height: 52px; padding: 0 12px; font-size: 1rem; width: 100%; box-sizing: border-box; } .top-nav .signup-btn { background: rgba(255, 255, 255, 0.9); color: #111827; border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2); } .top-nav .whatsapp-link { background: rgba(219, 247, 230, 0.94); color: #166534; border: 1px solid rgba(177, 233, 200, 0.95); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16); } .top-nav .whatsapp-link .whatsappsvg { filter: saturate(0.8) brightness(0.92); } .bgVideo { filter: blur(2px); } .container h1 { font-size: 2.5em; } .container h1 { margin-top: 0; margin-bottom: 8px; } .site-subtitle { margin-top: 0; margin-bottom: 18px; } .action-buttons { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 24; flex-direction: column; align-items: stretch; width: min(92vw, 340px); gap: 6px; } .action-buttons .signup-btn, .action-buttons .whatsapp-link, .action-buttons .nav-btn { width: 100%; min-height: 52px; font-size: 1rem; box-sizing: border-box; } .action-buttons .nav-btn { min-height: 52px; } .modal { align-items: flex-end; background: rgba(8, 10, 20, 0.5); } .modal-content { width: 100vw; max-width: 100vw; border-radius: 22px 22px 0 0; padding: 56px 16px calc(22px + env(safe-area-inset-bottom)) 16px; max-height: 88vh; overflow-y: auto; border-left: none; border-right: none; border-bottom: none; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.28); } .modal-content .close { top: calc(10px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); width: 38px; height: 38px; font-size: 1.35em; z-index: 20; } #signupForm, #appointmentForm { gap: 14px; } #signupForm input, #signupForm select, #signupForm button:not(.pw-toggle), #appointmentForm input, #appointmentForm select, #appointmentForm button:not(.pw-toggle) { min-height: 52px; font-size: 1rem; } .field-group { padding-top: 12px; } .pet-details { gap: 14px; } .phone-group { gap: 12px; } .country-prefix { min-width: 112px; min-height: 52px; display: flex; align-items: center; justify-content: center; } #signupForm button:not(.pw-toggle), #appointmentForm button:not(.pw-toggle) { margin-top: 4px; } #appointmentsPanel .appointments-panel-sections { margin-top: 12px; gap: 8px; } #appointmentsPanel .appointments-panel-sections h3 { font-size: 0.92rem; margin-top: 6px; } } /* Touch-device fallback: Some mobile browsers can report a wide viewport (desktop mode), which prevents the max-width mobile styles from applying and makes the landing page look tiny. This ensures readable sizing on phones. */ @media (hover: none) and (pointer: coarse) { .mobile-logout-btn { display: inline-flex !important; align-items: center; justify-content: center; } .container { justify-content: flex-start; align-items: center; text-align: center; height: auto; min-height: 100vh; padding-top: 26px; padding-bottom: 260px; } .vector1 { margin-top: 0; margin-bottom: 8px; width: 100%; } .vector1 img { width: min(72vw, 330px); max-width: min(72vw, 330px); } .container h1 { font-size: 2.5em; margin-top: 0; margin-bottom: 8px; } .site-subtitle { margin-top: 0; margin-bottom: 18px; } .action-buttons { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 24; flex-direction: column; align-items: stretch; width: min(92vw, 340px); gap: 6px; } .action-buttons .nav-btn { width: 100%; min-height: 52px; font-size: 1rem; box-sizing: border-box; } } @media (min-width: 701px) { .modal { align-items: center; } .modal-content { border-radius: 20px; max-height: 92vh; overflow-y: auto; padding-top: 54px; } .modal-content .close { top: 12px; right: 12px; z-index: 3; } .container { position: relative; height: 100vh; justify-content: flex-start; align-items: center; text-align: center; padding-top: clamp(24px, 4vh, 52px); } .container h1 { position: static; width: auto; margin: clamp(-18px, -2vh, -8px) 0 clamp(4px, 1vh, 10px) 0; font-size: 3em; text-align: center; z-index: 2; } .site-subtitle { position: static; width: auto; margin: 0 0 clamp(28px, 4vh, 46px) 0; font-size: clamp(1.05em, 1.9vh, 1.2em); text-align: center; z-index: 2; } .vector1 { position: static; width: clamp(460px, 52vh, 620px); height: auto; margin: 0; justify-content: center; align-items: center; z-index: 2; } .vector1 img { width: clamp(460px, 52vh, 620px); max-width: clamp(460px, 52vh, 620px); } .whatsapp-link { position: static; padding: 0 22px; } .action-buttons { margin-top: clamp(24px, 3.6vh, 44px); } } /* ========================================================== TOUCH DEVICE OVERRIDES (force mobile UI on phones) Some mobile browsers can report a wide viewport, which prevents max-width rules from applying (and makes everything appear tiny / disables the carousel). These overrides fix that. ========================================================== */ @media (hover: none) and (pointer: coarse) { /* Landing page (no scroll, buttons stacked) */ body.landing { min-height: 100svh !important; overflow: hidden !important; } body.landing .container { min-height: 100svh !important; height: 100svh !important; justify-content: center !important; padding-top: 14px !important; padding-bottom: 14px !important; } body.landing .vector1 { margin-top: 0 !important; margin-bottom: 8px !important; } body.landing .vector1 img { width: min(64vw, 300px) !important; max-width: min(64vw, 300px) !important; } body.landing .container h1 { font-size: 2.4em !important; margin-top: 0 !important; margin-bottom: 6px !important; } body.landing .site-subtitle { margin-top: 0 !important; margin-bottom: 14px !important; } body.landing .action-buttons { position: static !important; transform: none !important; width: min(92vw, 340px) !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; margin-top: 10px !important; } body.landing .action-buttons .nav-btn { width: 100% !important; min-height: 52px !important; font-size: 1rem !important; } /* Portal/admin carousel */ .portal-top-nav { display: none !important; } .portal-profile-layout { display: flex !important; flex-direction: row !important; gap: 14px !important; padding: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; touch-action: pan-x pan-y !important; } .portal-profile-layout::-webkit-scrollbar { width: 0 !important; height: 0 !important; } .portal-profile-panel { flex: 0 0 100% !important; min-width: 0 !important; box-sizing: border-box !important; scroll-snap-align: start !important; scroll-snap-stop: always !important; max-height: calc(100vh - 24px) !important; overflow: hidden !important; padding: 16px !important; border-radius: 18px !important; } /* On carousel, always show all portal panels (swipe navigates) */ #petFormPanel, #myPetsPanel, #myProfilePanel, #appointmentsPanel { display: block !important; } .portal-calendar-panel .calendar-grid { flex: 1 1 auto !important; flex-shrink: 0 !important; min-height: min(360px, 48svh) !important; } } /* Cross-browser portal fallback (Chrome/Opera/Samsung/Firefox on phones/tablets): keep portal carousel behavior consistent when pointer/hover is misreported. */ @media (max-width: 1024px) and (hover: none), (max-width: 1024px) and (pointer: coarse), (max-width: 1024px) and (any-pointer: coarse) { .portal-top-nav { display: none !important; } .portal-profile-layout { display: flex !important; flex-direction: row !important; gap: 14px !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; touch-action: pan-x pan-y !important; } .portal-profile-layout::-webkit-scrollbar { width: 0 !important; height: 0 !important; } .portal-profile-panel { flex: 0 0 100% !important; min-width: 0 !important; box-sizing: border-box !important; scroll-snap-align: start !important; scroll-snap-stop: always !important; max-height: calc(100vh - 24px) !important; overflow: hidden !important; padding: 16px !important; border-radius: 18px !important; } #petFormPanel, #myPetsPanel, #myProfilePanel, #appointmentsPanel { display: block !important; } .portal-calendar-panel .calendar-grid { flex: 1 1 auto !important; flex-shrink: 0 !important; min-height: min(360px, 48svh) !important; } } /* Cross-browser landing sizing fallback: use screen-based scaling so logo/title/buttons stay balanced on phone browsers. */ @media (max-width: 700px), (max-device-width: 900px) { body.landing { min-height: 100vh !important; min-height: 100svh !important; overflow: hidden !important; } body.landing .container { min-height: 100vh !important; min-height: 100svh !important; height: auto !important; justify-content: flex-start !important; gap: 0 !important; padding-top: clamp(16px, 4vh, 34px) !important; padding-bottom: calc(clamp(20px, 5vh, 44px) + env(safe-area-inset-bottom)) !important; } body.landing .vector1 { margin-top: clamp(4px, 1.5vh, 16px) !important; margin-bottom: clamp(14px, 2.5vh, 24px) !important; } body.landing .vector1 img { width: clamp(220px, 62vw, 360px) !important; max-width: clamp(220px, 62vw, 360px) !important; } body.landing .container h1 { font-size: clamp(2rem, 10vw, 3.1rem) !important; line-height: 1.08 !important; margin: clamp(8px, 1.4vh, 14px) 0 2px 0 !important; } body.landing .site-subtitle { font-size: clamp(0.98rem, 4.7vw, 1.35rem) !important; margin: 0 0 clamp(6px, 1.4vh, 10px) 0 !important; } body.landing .action-buttons { position: static !important; transform: none !important; width: min(92vw, 360px) !important; margin-top: auto !important; margin-bottom: clamp(6px, 1.4vh, 14px) !important; gap: clamp(8px, 1.2vh, 12px) !important; } body.landing .action-buttons .nav-btn, body.landing .action-buttons .signup-btn, body.landing .action-buttons .whatsapp-link { min-height: clamp(46px, 7.2vh, 54px) !important; font-size: clamp(0.95rem, 4.2vw, 1.05rem) !important; } } @supports (height: 100dvh) { @media (max-width: 700px), (max-device-width: 900px) { body.landing, body.landing .container { min-height: 100dvh !important; } } } /* JS-assisted mobile fallback for browsers that expose wide viewport on phones. html.phone-ui is set from screen/touch detection in script.js. */ html.phone-ui body.landing { min-height: 100vh !important; min-height: 100svh !important; overflow: hidden !important; } html.phone-ui body.landing .container { min-height: 100vh !important; min-height: 100svh !important; height: auto !important; justify-content: flex-start !important; gap: 0 !important; padding-top: clamp(16px, 4vh, 34px) !important; padding-bottom: calc(clamp(20px, 5vh, 44px) + env(safe-area-inset-bottom)) !important; } html.phone-ui body.landing .vector1 { margin-top: clamp(4px, 1.5vh, 16px) !important; margin-bottom: clamp(14px, 2.5vh, 24px) !important; } html.phone-ui body.landing .vector1 img { width: clamp(220px, 62vw, 360px) !important; max-width: clamp(220px, 62vw, 360px) !important; } html.phone-ui body.landing .container h1 { font-size: clamp(2rem, 10vw, 3.1rem) !important; line-height: 1.08 !important; margin: clamp(8px, 1.4vh, 14px) 0 2px 0 !important; } html.phone-ui body.landing .site-subtitle { font-size: clamp(0.98rem, 4.7vw, 1.35rem) !important; margin: 0 0 clamp(6px, 1.4vh, 10px) 0 !important; } html.phone-ui body.landing .action-buttons { position: static !important; transform: none !important; width: min(92vw, 360px) !important; margin-top: auto !important; margin-bottom: clamp(6px, 1.4vh, 14px) !important; gap: clamp(8px, 1.2vh, 12px) !important; } html.phone-ui body.landing .action-buttons .nav-btn, html.phone-ui body.landing .action-buttons .signup-btn, html.phone-ui body.landing .action-buttons .whatsapp-link, html.phone-ui body.landing .action-buttons .whatsapp-inline { min-height: clamp(46px, 7.2vh, 54px) !important; font-size: clamp(0.95rem, 4.2vw, 1.05rem) !important; } @supports (height: 100dvh) { html.phone-ui body.landing, html.phone-ui body.landing .container { min-height: 100dvh !important; } } /* Exact mobile landing zones: top = larger logo, middle = heading/subtitle, lower = button stack (fully visible). */ @media (max-width: 700px), (max-device-width: 900px) { body.landing { --mobile-buttons-bottom: calc(clamp(30px, 5.5vh, 56px) + env(safe-area-inset-bottom)); --mobile-buttons-stack-height: 122px; --mobile-svg-top: clamp(0px, 2.8vh, 38px); --mobile-svg-height: 58svh; --mobile-heading-gap-below-svg: clamp(0px, 0.6vh, 6px); } body.landing .container { display: grid !important; grid-template-rows: auto auto auto 1fr auto !important; justify-items: center !important; align-content: stretch !important; min-height: 100vh !important; min-height: 100svh !important; padding-top: clamp(14px, 3vh, 26px) !important; padding-bottom: calc(clamp(14px, 2.5vh, 24px) + env(safe-area-inset-bottom)) !important; gap: 0 !important; } body.landing .vector1 { margin-top: clamp(4px, 1.2vh, 12px) !important; margin-bottom: clamp(12px, 2.4vh, 20px) !important; } body.landing .vector1 img { width: clamp(215px, 60vw, 350px) !important; max-width: clamp(215px, 60vw, 350px) !important; } body.landing .container h1 { margin: 0 0 2px 0 !important; line-height: 1.08 !important; } body.landing .site-subtitle { margin: 0 !important; } body.landing .action-buttons { align-self: end !important; margin-top: 0 !important; margin-bottom: clamp(10px, 2vh, 20px) !important; width: min(90vw, 360px) !important; gap: clamp(8px, 1.2vh, 12px) !important; } body.landing .action-buttons .nav-btn, body.landing .action-buttons .signup-btn, body.landing .action-buttons .whatsapp-link { min-height: clamp(48px, 7vh, 54px) !important; } } html.phone-ui body.landing .container { display: grid !important; grid-template-rows: auto auto auto 1fr auto !important; justify-items: center !important; align-content: stretch !important; min-height: 100vh !important; min-height: 100svh !important; padding-top: clamp(14px, 3vh, 26px) !important; padding-bottom: calc(clamp(14px, 2.5vh, 24px) + env(safe-area-inset-bottom)) !important; gap: 0 !important; } html.phone-ui body.landing .vector1 { margin-top: clamp(4px, 1.2vh, 12px) !important; margin-bottom: clamp(12px, 2.4vh, 20px) !important; } html.phone-ui body.landing .vector1 img { width: clamp(215px, 60vw, 350px) !important; max-width: clamp(215px, 60vw, 350px) !important; } html.phone-ui body.landing .container h1 { margin: 0 0 2px 0 !important; line-height: 1.08 !important; } html.phone-ui body.landing .site-subtitle { margin: 0 !important; } html.phone-ui body.landing .action-buttons { align-self: end !important; margin-top: 0 !important; margin-bottom: clamp(10px, 2vh, 20px) !important; width: min(90vw, 360px) !important; gap: clamp(8px, 1.2vh, 12px) !important; } html.phone-ui body.landing .action-buttons .nav-btn, html.phone-ui body.landing .action-buttons .signup-btn, html.phone-ui body.landing .action-buttons .whatsapp-link { min-height: clamp(48px, 7vh, 54px) !important; } /* JS-assisted mobile fallback for portal/admin pages */ html.phone-ui .portal-top-nav { display: none !important; } html.phone-ui .portal-shell { padding: 10px 10px 56px !important; max-width: none !important; width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; } html.phone-ui .portal-profile-layout { display: flex !important; flex-direction: row !important; gap: 14px !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; touch-action: pan-x pan-y !important; } html.phone-ui .portal-profile-layout::-webkit-scrollbar { width: 0 !important; height: 0 !important; } html.phone-ui .portal-profile-panel { flex: 0 0 100% !important; min-width: 0 !important; box-sizing: border-box !important; scroll-snap-align: start !important; scroll-snap-stop: always !important; max-height: calc(100vh - 24px) !important; overflow: hidden !important; padding: 16px !important; border-radius: 18px !important; } html.phone-ui #petFormPanel, html.phone-ui #myPetsPanel, html.phone-ui #myProfilePanel, html.phone-ui #appointmentsPanel { display: block !important; } html.phone-ui .portal-calendar-panel .calendar-grid { flex: 1 1 auto; flex-shrink: 0; min-height: min(360px, 48svh); } html.phone-ui .portal-profile-panel h2 { font-size: clamp(1.05rem, 5vw, 1.35rem) !important; } html.phone-ui .portal-profile-panel input, html.phone-ui .portal-profile-panel select, html.phone-ui .portal-profile-panel button { min-height: 48px !important; font-size: clamp(0.94rem, 3.9vw, 1rem) !important; } /* Final mobile landing alignment: keep buttons in a safe lower zone (not clipped), matching the requested layout. */ @media (max-width: 700px), (max-device-width: 900px) { body.landing .action-buttons { position: fixed !important; left: 50% !important; transform: translateX(-50%) !important; bottom: calc(clamp(28px, 5.5vh, 52px) + env(safe-area-inset-bottom)) !important; width: min(90vw, 360px) !important; margin: 0 !important; z-index: 24 !important; } body.landing .container { padding-bottom: calc(clamp(170px, 26vh, 250px) + env(safe-area-inset-bottom)) !important; } } html.phone-ui body.landing .action-buttons { position: fixed !important; left: 50% !important; transform: translateX(-50%) !important; bottom: calc(clamp(28px, 5.5vh, 52px) + env(safe-area-inset-bottom)) !important; width: min(90vw, 360px) !important; margin: 0 !important; z-index: 24 !important; } html.phone-ui body.landing .container { padding-bottom: calc(clamp(170px, 26vh, 250px) + env(safe-area-inset-bottom)) !important; } /* Final zone placement tweak from visual guide: - SVG centered in upper block - heading/subtitle moved down into middle-lower block above buttons */ @media (max-width: 700px), (max-device-width: 900px) { body.landing .vector1 { margin-top: clamp(20px, 5.8vh, 62px) !important; margin-bottom: clamp(18px, 3.2vh, 30px) !important; } body.landing .container h1 { margin-top: clamp(56px, 10vh, 120px) !important; margin-bottom: 2px !important; } body.landing .site-subtitle { margin-bottom: 0 !important; } } html.phone-ui body.landing .vector1 { margin-top: clamp(20px, 5.8vh, 62px) !important; margin-bottom: clamp(18px, 3.2vh, 30px) !important; } html.phone-ui body.landing .container h1 { margin-top: clamp(56px, 10vh, 120px) !important; margin-bottom: 2px !important; } html.phone-ui body.landing .site-subtitle { margin-bottom: 0 !important; } /* Final mobile landing stack: centered vertical alignment for logo + headings, with clean button spacing. */ @media (max-width: 700px), (max-device-width: 900px) { body.landing .container { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; min-height: 100vh !important; min-height: 100svh !important; text-align: center !important; padding-top: clamp(18px, 4vh, 36px) !important; padding-bottom: calc(clamp(185px, 28vh, 260px) + env(safe-area-inset-bottom)) !important; gap: 0 !important; } body.landing .vector1 { margin: clamp(6px, 1.4vh, 14px) 0 clamp(20px, 3.2vh, 32px) 0 !important; width: 100% !important; display: flex !important; justify-content: center !important; } body.landing .vector1 img { width: clamp(220px, 60vw, 350px) !important; max-width: clamp(220px, 60vw, 350px) !important; height: auto !important; } body.landing .container h1 { position: fixed !important; left: 50% !important; transform: translateX(-50%) !important; top: calc(var(--mobile-svg-top) + var(--mobile-svg-height) + var(--mobile-heading-gap-below-svg) - 68px) !important; bottom: auto !important; margin: 0 !important; font-size: clamp(2rem, 10vw, 3.1rem) !important; line-height: 1.08 !important; width: 100% !important; text-align: center !important; z-index: 26 !important; } body.landing .site-subtitle { position: fixed !important; left: 50% !important; transform: translateX(-50%) !important; top: calc(var(--mobile-svg-top) + var(--mobile-svg-height) + var(--mobile-heading-gap-below-svg) + 0px) !important; bottom: auto !important; margin: 0 !important; font-size: clamp(1rem, 4.5vw, 1.28rem) !important; width: 100% !important; text-align: center !important; z-index: 26 !important; } body.landing .action-buttons { position: fixed !important; left: 50% !important; transform: translateX(-50%) !important; bottom: var(--mobile-buttons-bottom) !important; width: min(90vw, 360px) !important; margin: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; gap: clamp(12px, 1.8vh, 16px) !important; z-index: 24 !important; } body.landing .action-buttons .nav-btn, body.landing .action-buttons .signup-btn, body.landing .action-buttons .whatsapp-link, body.landing .action-buttons .whatsapp-inline { width: 100% !important; min-height: clamp(48px, 7vh, 54px) !important; font-size: clamp(1rem, 4.2vw, 1.08rem) !important; box-sizing: border-box !important; } } html.phone-ui body.landing .container { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; min-height: 100vh !important; min-height: 100svh !important; text-align: center !important; padding-top: clamp(18px, 4vh, 36px) !important; padding-bottom: calc(clamp(185px, 28vh, 260px) + env(safe-area-inset-bottom)) !important; gap: 0 !important; } html.phone-ui body.landing .vector1 { margin: clamp(6px, 1.4vh, 14px) 0 clamp(20px, 3.2vh, 32px) 0 !important; width: 100% !important; display: flex !important; justify-content: center !important; } html.phone-ui body.landing .vector1 img { width: clamp(220px, 60vw, 350px) !important; max-width: clamp(220px, 60vw, 350px) !important; height: auto !important; } html.phone-ui body.landing .container h1 { position: fixed !important; left: 50% !important; transform: translateX(-50%) !important; top: calc(var(--mobile-svg-top) + var(--mobile-svg-height) + var(--mobile-heading-gap-below-svg) - 68px) !important; bottom: auto !important; margin: 0 !important; font-size: clamp(2rem, 10vw, 3.1rem) !important; line-height: 1.08 !important; width: 100% !important; text-align: center !important; z-index: 26 !important; } html.phone-ui body.landing .site-subtitle { position: fixed !important; left: 50% !important; transform: translateX(-50%) !important; top: calc(var(--mobile-svg-top) + var(--mobile-svg-height) + var(--mobile-heading-gap-below-svg) + 0px) !important; bottom: auto !important; margin: 0 !important; font-size: clamp(1rem, 4.5vw, 1.28rem) !important; width: 100% !important; text-align: center !important; z-index: 26 !important; } html.phone-ui body.landing .action-buttons { position: fixed !important; left: 50% !important; transform: translateX(-50%) !important; bottom: var(--mobile-buttons-bottom) !important; width: min(90vw, 360px) !important; margin: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; gap: clamp(12px, 1.8vh, 16px) !important; z-index: 24 !important; } html.phone-ui body.landing { --mobile-buttons-bottom: calc(clamp(30px, 5.5vh, 56px) + env(safe-area-inset-bottom)); --mobile-buttons-stack-height: 122px; --mobile-svg-top: clamp(0px, 2.8vh, 38px); --mobile-svg-height: 58svh; --mobile-heading-gap-below-svg: clamp(0px, 0.6vh, 6px); } html.phone-ui body.landing .action-buttons .nav-btn, html.phone-ui body.landing .action-buttons .signup-btn, html.phone-ui body.landing .action-buttons .whatsapp-link { width: 100% !important; min-height: clamp(48px, 7vh, 54px) !important; font-size: clamp(1rem, 4.2vw, 1.08rem) !important; box-sizing: border-box !important; } /* Phone-ui fallback: keep password toggles compact and usable */ html.phone-ui .password-field input { padding-right: 88px !important; } html.phone-ui .pw-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 34px !important; min-height: 34px !important; right: 10px !important; left: auto !important; padding: 0 !important; margin: 0 !important; z-index: 3; } /* Final mobile SVG scale: make logo occupy roughly half of viewport height on phones. */ @media (max-width: 700px), (max-device-width: 900px) { body.landing .vector1 img { width: auto !important; max-width: 92vw !important; height: var(--mobile-svg-height, 54svh) !important; max-height: var(--mobile-svg-height, 54svh) !important; } } html.phone-ui body.landing .vector1 img { width: auto !important; max-width: 92vw !important; height: var(--mobile-svg-height, 54svh) !important; max-height: var(--mobile-svg-height, 54svh) !important; } @supports (height: 100dvh) { @media (max-width: 700px), (max-device-width: 900px) { body.landing .vector1 img { height: 58dvh !important; max-height: 58dvh !important; } } html.phone-ui body.landing .vector1 img { height: 58dvh !important; max-height: 58dvh !important; } } /* Keep heading/button layout fixed while allowing bigger mobile SVG. SVG is positioned independently so it does not push content down. */ @media (max-width: 700px), (max-device-width: 900px) { body.landing .vector1 { position: fixed !important; left: 50% !important; top: clamp(16px, 4vh, 52px) !important; transform: translateX(-50%) !important; margin: 0 !important; width: auto !important; z-index: 3 !important; pointer-events: none !important; } } html.phone-ui body.landing .vector1 { position: fixed !important; left: 50% !important; top: clamp(16px, 4vh, 52px) !important; transform: translateX(-50%) !important; margin: 0 !important; width: auto !important; z-index: 3 !important; pointer-events: none !important; } /* -------------------------------------------------------------------------- Mobile landing — cross-browser (Chrome / Edge / Opera GX): bottom-anchored title + subtitle so they never collide with fixed buttons. Prior rules used fixed `top` + svh math (-68px) that diverges when browsers disagree on svh or dynamic toolbars; Opera GX often packed subtitle against WhatsApp. -------------------------------------------------------------------------- */ @media (max-width: 700px), (max-device-width: 900px) { body.landing { /* Cap logo height so it cannot push into the heading zone on short viewports */ --mobile-svg-height: min(48svh, 300px); /* Distance from viewport bottom to top of WhatsApp: safe area + bar offset + ~3 buttons + gaps */ --landing-stack-above-safe: calc( env(safe-area-inset-bottom, 0px) + clamp(28px, 5.5vh, 56px) + clamp(158px, 34svh, 210px) ); --landing-gap-subtitle-to-buttons: max(16px, min(4svh, 28px)); --landing-gap-title-to-subtitle: max(8px, min(2svh, 14px)); --landing-subtitle-line-box: clamp(1.15rem, 4.5vw, 1.4rem); } body.landing .vector1 img { height: var(--mobile-svg-height) !important; max-height: var(--mobile-svg-height) !important; } /* Title sits above subtitle; both measured from bottom so button stack stays consistent */ body.landing .site-subtitle { top: auto !important; bottom: calc( var(--landing-stack-above-safe) + var(--landing-gap-subtitle-to-buttons) ) !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; margin: 0 !important; padding: 0 14px !important; max-width: 100% !important; box-sizing: border-box !important; line-height: 1.35 !important; } body.landing .container h1 { top: auto !important; bottom: calc( var(--landing-stack-above-safe) + var(--landing-gap-subtitle-to-buttons) + var(--landing-subtitle-line-box) + var(--landing-gap-title-to-subtitle) ) !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; margin: 0 !important; padding: 0 14px !important; max-width: 100% !important; box-sizing: border-box !important; line-height: 1.08 !important; } } @supports (height: 100dvh) { @media (max-width: 700px), (max-device-width: 900px) { body.landing { --mobile-svg-height: min(44dvh, 300px); } } } html.phone-ui body.landing { --mobile-svg-height: min(48svh, 300px); --landing-stack-above-safe: calc( env(safe-area-inset-bottom, 0px) + clamp(28px, 5.5vh, 56px) + clamp(158px, 34svh, 210px) ); --landing-gap-subtitle-to-buttons: max(16px, min(4svh, 28px)); --landing-gap-title-to-subtitle: max(8px, min(2svh, 14px)); --landing-subtitle-line-box: clamp(1.15rem, 4.5vw, 1.4rem); } html.phone-ui body.landing .vector1 img { height: var(--mobile-svg-height) !important; max-height: var(--mobile-svg-height) !important; } html.phone-ui body.landing .site-subtitle { top: auto !important; bottom: calc( var(--landing-stack-above-safe) + var(--landing-gap-subtitle-to-buttons) ) !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; margin: 0 !important; padding: 0 14px !important; max-width: 100% !important; box-sizing: border-box !important; line-height: 1.35 !important; } html.phone-ui body.landing .container h1 { top: auto !important; bottom: calc( var(--landing-stack-above-safe) + var(--landing-gap-subtitle-to-buttons) + var(--landing-subtitle-line-box) + var(--landing-gap-title-to-subtitle) ) !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; margin: 0 !important; padding: 0 14px !important; max-width: 100% !important; box-sizing: border-box !important; line-height: 1.08 !important; } @supports (height: 100dvh) { html.phone-ui body.landing { --mobile-svg-height: min(44dvh, 300px); } }