@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans+Arabic:wght@100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Vazirmatn:wght@100..900&display=swap'); /* ================================================================ THEME SYSTEM — Dark / Light / System (auto) Usage: JS reads prefers-color-scheme and applies the class. ================================================================ */ :root, [data-theme="dark"] { --glass-bg: rgba(4, 15, 30, 0.45); --glass-border: rgba(255, 255, 255, 0.08); --glass-highlight: rgba(255, 255, 255, 0.12); --neon-blue: #0074ac; --neon-purple: #20b34d; --neon-teal: #20b34d; --cosmic-bg: #020b18; /* Theme-specific tokens */ --bg-primary: #020b18; --bg-secondary: rgba(4, 15, 30, 0.85); --bg-panel: rgba(4, 18, 36, 0.65); --bg-card: rgba(255, 255, 255, 0.02); --text-primary: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #4b5563; --border-subtle: rgba(255,255,255,0.07); --border-mid: rgba(255,255,255,0.12); --nav-bg: rgba(2,11,24,0.0); --nav-scrolled: rgba(2,11,24,0.85); --input-bg: rgba(4,15,30,0.8); --scrollbar-track: #020b18; --blob-opacity: 0.22; --particle-color: rgba(255,255,255,0.3); } [data-theme="light"] { --glass-bg: rgba(240, 248, 255, 0.75); --glass-border: rgba(0, 0, 0, 0.08); --glass-highlight: rgba(0, 116, 172, 0.1); --neon-blue: #0065a0; --neon-purple: #1a9e42; --neon-teal: #1a9e42; --cosmic-bg: #f0f8ff; --bg-primary: #f0f8ff; --bg-secondary: rgba(230, 243, 255, 0.95); --bg-panel: rgba(255, 255, 255, 0.80); --bg-card: rgba(255, 255, 255, 0.70); --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; --border-subtle: rgba(0,0,0,0.07); --border-mid: rgba(0,116,172,0.2); --nav-bg: rgba(240,248,255,0.0); --nav-scrolled: rgba(240,248,255,0.90); --input-bg: rgba(255,255,255,0.9); --scrollbar-track: #e2edf8; --blob-opacity: 0.10; --particle-color: rgba(0,116,172,0.25); } /* ── theme transition — smooth on all elements ── */ *, *::before, *::after { transition: background-color 0.35s ease, border-color 0.35s ease, color 0.2s ease; } /* but NOT layout/transform/opacity transitions (would break animations) */ .neon-blob, .particle, .glass-card, [class*="animate-"] { transition: none; } /* Theme switcher button */ #themeSwitcherBtn { transition: transform 0.3s ease, background 0.2s ease; } #themeSwitcherBtn:hover { transform: rotate(20deg) scale(1.15); } /* ── Light theme overrides for glass panels ── */ [data-theme="light"] .glass-panel { background: rgba(255,255,255,0.82) !important; border-color: rgba(0,116,172,0.12) !important; box-shadow: 0 4px 24px rgba(0,116,172,0.08); } [data-theme="light"] .glass-panel:hover { border-color: rgba(0,116,172,0.28) !important; box-shadow: 0 8px 32px rgba(0,116,172,0.12); } [data-theme="light"] .glass-nav { border-bottom-color: rgba(0,116,172,0.12) !important; } [data-theme="light"] .navbar-scrolled { background: rgba(245,252,255,0.94) !important; border-bottom-color: rgba(0,116,172,0.2) !important; backdrop-filter: blur(20px) saturate(160%) !important; box-shadow: 0 4px 24px rgba(0,116,172,0.10) !important; } [data-theme="light"] body { background-color: var(--bg-primary); background-image: radial-gradient(at 10% 20%, rgba(0,116,172,0.07) 0px, transparent 50%), radial-gradient(at 90% 80%, rgba(26,158,66,0.06) 0px, transparent 50%), radial-gradient(at 50% 50%, rgba(240,248,255,1) 0px, transparent 100%); color: var(--text-primary); } /* ── Light theme text fixes — targeted, not blanket ── */ /* Headings and general body text */ [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6 { color: #0f172a !important; } [data-theme="light"] p, [data-theme="light"] span.text-white, [data-theme="light"] div.text-white, [data-theme="light"] td.text-white, [data-theme="light"] li.text-white { color: #0f172a !important; } [data-theme="light"] .text-gray-200 { color: #334155 !important; } [data-theme="light"] .text-gray-300 { color: #475569 !important; } [data-theme="light"] .text-gray-400 { color: #64748b !important; } [data-theme="light"] .text-gray-500 { color: #94a3b8 !important; } /* Nav links */ [data-theme="light"] .nav-link { color: #334155 !important; } [data-theme="light"] .nav-link:hover { color: #0074ac !important; background: rgba(0,116,172,0.08) !important; } /* Buttons keep white text (they have colored backgrounds) */ [data-theme="light"] .btn-neon-blue { color: #0065a0 !important; background: linear-gradient(135deg, rgba(0,116,172,0.12), rgba(0,116,172,0.05)) !important; text-shadow: none !important; } [data-theme="light"] .btn-neon-blue:hover { color: #fff !important; background: #0074ac !important; } [data-theme="light"] .btn-neon-teal { color: #1a9e42 !important; background: linear-gradient(135deg, rgba(26,158,66,0.12), rgba(26,158,66,0.05)) !important; text-shadow: none !important; } [data-theme="light"] .btn-neon-teal:hover { color: #fff !important; background: #20b34d !important; } [data-theme="light"] .btn-neon-purple { color: #1a9e42 !important; background: linear-gradient(135deg, rgba(26,158,66,0.12), rgba(26,158,66,0.05)) !important; text-shadow: none !important; } [data-theme="light"] .btn-neon-purple:hover { color: #fff !important; background: #20b34d !important; } /* Inputs / Selects / Textareas */ [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { background: rgba(255,255,255,0.95) !important; color: #0f172a !important; border-color: rgba(0,116,172,0.22) !important; } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: #94a3b8 !important; } [data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus { border-color: rgba(0,116,172,0.5) !important; box-shadow: 0 0 0 3px rgba(0,116,172,0.1) !important; } [data-theme="light"] select option { background: #f8fafc; color: #0f172a; } /* Borders */ [data-theme="light"] .border-white\/5 { border-color: rgba(0,0,0,0.06) !important; } [data-theme="light"] .border-white\/8 { border-color: rgba(0,0,0,0.07) !important; } [data-theme="light"] .border-white\/10 { border-color: rgba(0,116,172,0.12) !important; } [data-theme="light"] .border-white\/20 { border-color: rgba(0,116,172,0.20) !important; } /* Subtle backgrounds */ [data-theme="light"] .bg-white\/5 { background-color: rgba(0,116,172,0.04) !important; } [data-theme="light"] .bg-white\/\[0\.03\] { background-color: rgba(0,116,172,0.03) !important; } [data-theme="light"] .hover\:bg-white\/5:hover { background-color: rgba(0,116,172,0.06) !important; } [data-theme="light"] .bg-cosmic\/30, [data-theme="light"] .bg-cosmic\/40 { background-color: rgba(255,255,255,0.80) !important; } [data-theme="light"] .bg-cosmic { background-color: #f0f8ff !important; } [data-theme="light"] [class*="bg-cosmic"] { background-color: rgba(240,248,255,0.92) !important; } /* Glass cards (post cards) */ [data-theme="light"] .glass-card { background: rgba(255,255,255,0.72) !important; border-color: rgba(0,116,172,0.10) !important; } [data-theme="light"] .glass-card:hover { background: rgba(255,255,255,0.92) !important; border-color: rgba(0,116,172,0.28) !important; box-shadow: 0 15px 35px -10px rgba(0,116,172,0.15) !important; } /* Mobile glass overrides — hardcoded dark backgrounds need theme awareness */ @media (max-width: 1023px) { [data-theme="light"] .glass-panel { background: rgba(255,255,255,0.97) !important; border-color: rgba(0,116,172,0.12) !important; } [data-theme="light"] .glass-card { background: rgba(240,248,255,0.97) !important; border-color: rgba(0,116,172,0.10) !important; } } /* Mobile bottom nav */ [data-theme="light"] .fixed.bottom-0 { background: rgba(245,252,255,0.97) !important; border-top-color: rgba(0,116,172,0.15) !important; } /* Neon blobs softer in light */ [data-theme="light"] .neon-blob { opacity: 0.09 !important; } [data-theme="light"] .particle { background: rgba(0,116,172,0.2) !important; } /* Ticket blueprint light */ [data-theme="light"] .ticket-blueprint { background-image: radial-gradient(rgba(0,116,172,0.10) 1px, transparent 0) !important; border-color: rgba(0,116,172,0.28) !important; } /* Dropdown filter list */ [data-theme="light"] .pf-list { background: linear-gradient(160deg, rgba(255,255,255,0.99), rgba(240,248,255,1)) !important; border-color: rgba(0,116,172,0.22) !important; box-shadow: 0 20px 50px rgba(0,116,172,0.12) !important; } [data-theme="light"] .pf-option { color: #334155 !important; } [data-theme="light"] .pf-option:hover { background: rgba(0,116,172,0.08) !important; color: #0f172a !important; } [data-theme="light"] .pf-option.is-active { background: linear-gradient(135deg,rgba(0,116,172,0.14),rgba(26,158,66,0.08)) !important; color: #0f172a !important; } [data-theme="light"] .pf-trigger { background: linear-gradient(135deg, rgba(0,116,172,0.10), rgba(240,248,255,0.96)) !important; color: #0f172a !important; border-color: rgba(0,116,172,0.3) !important; } [data-theme="light"] .pf-trigger-icon { background: rgba(0,116,172,0.12) !important; border-color: rgba(0,116,172,0.25) !important; color: #0074ac !important; } [data-theme="light"] .pf-chevron { color: #0074ac !important; } [data-theme="light"] .pf-opt-icon { background: rgba(0,116,172,0.07) !important; border-color: rgba(0,116,172,0.15) !important; color: #64748b !important; } /* Scrollbar */ [data-theme="light"] ::-webkit-scrollbar-track { background: #e8f4ff; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,116,172,0.2); } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #0074ac; } /* Mobile menu overlay */ [data-theme="light"] #mobileMenu { background: rgba(248,252,255,0.98) !important; border-top-color: rgba(0,116,172,0.15) !important; } [data-theme="light"] #mobileMenu a { color: #334155 !important; } /* Footer */ [data-theme="light"] footer.glass-panel, [data-theme="light"] footer { background: rgba(240,248,255,0.90) !important; border-top-color: rgba(0,116,172,0.12) !important; } /* Section text elements that use Tailwind inline white */ [data-theme="light"] .text-neonBlue { color: #0065a0 !important; } [data-theme="light"] .text-neonTeal { color: #1a9e42 !important; } [data-theme="light"] .text-neonPurple { color: #1a9e42 !important; } /* Booking result ticket — needs dark text on light bg */ [data-theme="light"] #bookingResult .text-gray-500 { color: #64748b !important; } [data-theme="light"] #bookingResult .border-white\/5 { border-color: rgba(0,0,0,0.08) !important; } [data-theme="light"] .font-mono { color: inherit; } /* ================================================================ ORIGINAL CSS (unchanged below) ================================================================ */ /* Custom Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--cosmic-bg); } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--neon-blue); } html { overflow-x: hidden; /* Safari: prevents horizontal scroll without breaking position:fixed children */ } body { font-family: 'Plus Jakarta Sans', 'Vazirmatn', 'Noto Sans Arabic', sans-serif; background-color: var(--cosmic-bg); background-image: radial-gradient(at 10% 20%, rgba(0, 116, 172, 0.08) 0px, transparent 50%), radial-gradient(at 90% 80%, rgba(32, 179, 77, 0.08) 0px, transparent 50%), radial-gradient(at 50% 50%, rgba(2, 11, 24, 1) 0px, transparent 100%); background-attachment: fixed; color: #e2e8f0; overflow-x: hidden; } /* Glassmorphism Styles (Optimized with lower blur on devices for extreme scroll performance) */ .glass-panel { background: rgba(4, 18, 36, 0.65); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.07); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* HW acceleration for smooth transitions */ transform: translateZ(0); backface-visibility: hidden; } @media (max-width: 1023px) { /* Disable expensive backdrop blur filters on mobile & tablet GPUs to completely eliminate load/scroll lag */ .glass-panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(4, 15, 30, 0.95) !important; /* Premium semi-opaque dark background */ transform: none !important; /* iOS Safari: remove GPU layer that makes elements invisible inside position:fixed */ backface-visibility: initial !important; } .glass-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(8, 22, 44, 0.96) !important; transform: none !important; /* Avoid expensive transform hover calcs on mobile scrolling */ } .glass-card:hover { transform: none !important; } /* Completely hide neon blobs and floating particles container on mobile devices */ .neon-blob, #particles-container { display: none !important; } } .glass-panel:hover { border-color: rgba(32, 179, 77, 0.3); box-shadow: 0 10px 40px -10px rgba(0, 116, 172, 0.2); } .glass-nav { background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease; z-index: 100; } /* Dynamic Navbar Style applied when scrolling via JS to keep it ultra polished and clean */ .navbar-scrolled { background: rgba(2, 11, 24, 0.85) !important; backdrop-filter: blur(25px) saturate(180%) !important; -webkit-backdrop-filter: blur(25px) saturate(180%) !important; border-bottom-color: rgba(255, 255, 255, 0.1) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); } .nav-link { transition: all 0.3s ease; border-radius: 8px; padding: 0.5rem 0.75rem; } .nav-link:hover { background: rgba(0, 116, 172, 0.1); color: #0074ac; } .glass-card { background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%); border: 1px solid rgba(255, 255, 255, 0.04); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1); } .glass-card:hover { transform: translateY(-8px) scale(1.01); background: rgba(255, 255, 255, 0.04); border-color: rgba(32, 179, 77, 0.3); box-shadow: 0 15px 35px -10px rgba(32, 179, 77, 0.15); } /* Neo-Futuristic Buttons */ .btn-neon-blue { background: linear-gradient(135deg, rgba(0, 116, 172, 0.15), rgba(0, 116, 172, 0.05)); border: 1px solid #0074ac; text-shadow: 0 0 8px rgba(0, 116, 172, 0.4); box-shadow: 0 0 15px rgba(0, 116, 172, 0.05); color: #ffffff; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } .btn-neon-blue:hover { background: #0074ac; color: #ffffff; box-shadow: 0 0 25px rgba(0, 116, 172, 0.35); transform: translateY(-1px); } .btn-neon-purple { background: linear-gradient(135deg, rgba(32, 179, 77, 0.15), rgba(32, 179, 77, 0.05)); border: 1px solid #20b34d; text-shadow: 0 0 8px rgba(32, 179, 77, 0.4); box-shadow: 0 0 15px rgba(32, 179, 77, 0.05); color: #ffffff; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } .btn-neon-purple:hover { background: #20b34d; color: #ffffff; box-shadow: 0 0 25px rgba(32, 179, 77, 0.35); transform: translateY(-1px); } .btn-neon-teal { background: linear-gradient(135deg, rgba(32, 179, 77, 0.15), rgba(32, 179, 77, 0.05)); border: 1px solid #20b34d; text-shadow: 0 0 8px rgba(32, 179, 77, 0.4); box-shadow: 0 0 15px rgba(32, 179, 77, 0.05); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } .btn-neon-teal:hover { background: #20b34d; color: #ffffff; box-shadow: 0 0 25px rgba(32, 179, 77, 0.35); transform: translateY(-1px); } /* Posts filter dropdown */ .pf-dropdown { position: relative; z-index: 40; } .pf-trigger { width: 100%; display: flex; align-items: center; gap: 0.55rem; padding: 0.78rem 1rem; border-radius: 16px; border: 1px solid rgba(56, 189, 248, 0.35); background: linear-gradient(135deg, rgba(0,116,172,0.28), rgba(4,18,36,0.96)); color: #e0f2fe; font-size: 13px; font-weight: 800; cursor: pointer; transition: all 0.22s ease; box-shadow: 0 8px 24px rgba(0,116,172,0.18); } .pf-trigger:hover { border-color: rgba(56,189,248,0.6); background: linear-gradient(135deg, rgba(0,116,172,0.4), rgba(4,18,36,0.98)); } .pf-trigger-icon { width: 26px; height: 26px; border-radius: 50%; background: rgba(125,211,252,0.15); border: 1px solid rgba(125,211,252,0.3); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #7dd3fc; flex-shrink: 0; } .pf-trigger-label { flex: 1; text-align: left; } .pf-chevron { font-size: 10px; color: #7dd3fc; transition: transform 0.22s ease; } .pf-dropdown.is-open .pf-chevron { transform: rotate(180deg); } .pf-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; border-radius: 16px; border: 1px solid rgba(56,189,248,0.25); background: linear-gradient(160deg, rgba(4,18,36,0.98), rgba(2,11,24,0.99)); box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(125,211,252,0.08); padding: 0.4rem; display: flex; flex-direction: column; gap: 0.3rem; animation: pfDropIn 0.2s ease; } .pf-list.hidden { display: none; } @keyframes pfDropIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .pf-option { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.68rem 0.85rem; border-radius: 12px; border: 1px solid transparent; background: transparent; color: #cbd5e1; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.18s ease; text-align: left; } .pf-option:hover { background: rgba(0,116,172,0.2); border-color: rgba(56,189,248,0.3); color: #e0f2fe; } .pf-option.is-active { background: linear-gradient(135deg, rgba(0,116,172,0.38), rgba(32,179,77,0.18)); border-color: rgba(56,189,248,0.45); color: #e0f2fe; } .pf-opt-icon { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; color: #94a3b8; flex-shrink: 0; } .pf-option.is-active .pf-opt-icon { background: rgba(125,211,252,0.15); border-color: rgba(125,211,252,0.4); color: #7dd3fc; } /* Animated Neon Blobs */ .neon-blob { position: absolute; border-radius: 50%; filter: blur(140px); opacity: 0.22; z-index: 0; pointer-events: none; animation: floatBlob 22s infinite ease-in-out alternate; } .blob-blue { background: #0074ac; width: 450px; height: 450px; top: 5%; left: -10%; animation-delay: 0s; } .blob-purple { background: #20b34d; width: 500px; height: 500px; bottom: 10%; right: -15%; animation-delay: 3s; } .blob-teal { background: #0074ac; width: 400px; height: 400px; top: 50%; left: 40%; animation-delay: 6s; opacity: 0.15; } @keyframes floatBlob { 0% { transform: translate(0px, 0px) scale(1) rotate(0deg); } 33% { transform: translate(50px, -70px) scale(1.15) rotate(120deg); } 66% { transform: translate(-40px, 60px) scale(0.9) rotate(240deg); } 100% { transform: translate(0px, 0px) scale(1) rotate(360deg); } } /* Floating Particles Container */ #particles-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } .particle { position: absolute; background: rgba(255, 255, 255, 0.3); border-radius: 50%; animation: rise 15s linear infinite; bottom: -20px; } @keyframes rise { 0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 0; } 10% { opacity: 0.5; } 90% { opacity: 0.5; } 100% { transform: translateY(-110vh) scale(0.2) rotate(360deg); opacity: 0; } } /* Custom RTL adaptations */ [dir="rtl"] { font-family: 'Vazirmatn', 'Noto Sans Arabic', sans-serif; } /* AI Test Elements */ .scanner-ray { height: 3px; background: linear-gradient(90deg, transparent, #0074ac, transparent); box-shadow: 0 0 12px #0074ac; animation: scannerMotion 2.5s infinite ease-in-out; } @keyframes scannerMotion { 0% { top: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } } /* Radial interactive light effects */ .hover-glow { position: relative; overflow: hidden; } .hover-glow::after { content: ''; position: absolute; width: 15rem; height: 15rem; background: radial-gradient(circle, rgba(0, 116, 172, 0.15) 0%, transparent 70%); top: var(--y, 0px); left: var(--x, 0px); transform: translate(-50%, -50%); pointer-events: none; transition: opacity 0.3s; opacity: 0; } .hover-glow:hover::after { opacity: 1; } /* Custom interactive eye badge */ .eye-badge { box-shadow: inset 0 0 15px rgba(0, 116, 172, 0.2), 0 0 15px rgba(0, 116, 172, 0.15); animation: pulseGlow 3s infinite alternate; } @keyframes pulseGlow { 0% { box-shadow: inset 0 0 10px rgba(0, 116, 172, 0.1), 0 0 10px rgba(0, 116, 172, 0.1); } 100% { box-shadow: inset 0 0 25px rgba(0, 116, 172, 0.3), 0 0 25px rgba(0, 116, 172, 0.3); } } /* Doctor Hologram Frame */ .holo-frame { position: relative; } .holo-frame::before { content: ''; position: absolute; inset: -3px; background: linear-gradient(135deg, #0074ac, #20b34d); border-radius: inherit; z-index: -1; opacity: 0.4; transition: opacity 0.3s; } .holo-frame:hover::before { opacity: 1; } /* AI diagnostics interactive wheel */ .dial-container { animation: spinDial 30s linear infinite; } @keyframes spinDial { 100% { transform: rotate(360deg); } } /* Ticket blueprint mockup */ .ticket-blueprint { background-image: radial-gradient(rgba(0, 240, 255, 0.15) 1px, transparent 0); background-size: 16px 16px; border: 2px dashed rgba(0, 240, 255, 0.3); } /* ── Print: A6 medical ticket ─────────────────────────────── */ @media print { /* Hide everything except the print ticket */ body > *:not(#printPreviewModal) { display: none !important; } #printPreviewModal { position: fixed !important; inset: 0 !important; background: #fff !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; overflow: visible !important; } .print-modal-actions, h3, p { display: none !important; } #printTicketA6 { width: 105mm !important; min-height: 148mm !important; padding: 5mm !important; box-shadow: none !important; border-radius: 0 !important; } @page { size: A6 portrait; margin: 0; } * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } } /* Mobile App feeling overrides */ @media (max-width: 1279px) { /* Push content up slightly so the bottom nav bar never overlaps text fields or buttons at the bottom */ body { padding-bottom: 6rem; } /* Move floating social bubbles up on mobile/tablets so they do not overlap with the app tab bar */ #floating-social-widget { bottom: 6.5rem !important; /* Raised higher so it stays clearly above the mobile bottom tab bar */ right: 1.25rem !important; gap: 0.6rem !important; } #social-hub-trigger { width: 3rem !important; height: 3rem !important; font-size: 1.2rem !important; } #social-channels-group a { width: 2.6rem !important; height: 2.6rem !important; font-size: 1rem !important; } /* ── Mobile notification bell: explicit visibility safeguards ── These rules guarantee the bell is shown on all mobile browsers (Samsung Internet, iPhone Safari, etc.) independent of whether Tailwind CDN JIT classes load and apply correctly. */ #mobile-header-row { display: flex !important; align-items: center; justify-content: space-between; width: 100%; min-width: 0; } #mobile-nav-actions { display: flex !important; align-items: center; gap: 0.5rem; flex-shrink: 0; } #notif-bell-btn-mobile { display: flex !important; visibility: visible !important; opacity: 1 !important; z-index: 60; -webkit-appearance: none; appearance: none; } /* ── iPhone Safari notch/status-bar safe area ── */ header.glass-nav { padding-top: env(safe-area-inset-top, 0px); } }