/** * Smart Laundry Connect — Mobile Responsive Patch * File: /assets/css/mobile.css * * Add to every public HTML page's AFTER existing stylesheets: * * * Breakpoints: * 960px — tablet landscape / small desktop * 720px — tablet portrait * 540px — large phone * 400px — small phone * * Organised by: Global → Public pages → Dashboards → Auth → Modals → Print */ /* ═══════════════════════════════════════════════════════════════════ GLOBAL RESETS ═══════════════════════════════════════════════════════════════════ */ /* Prevent horizontal scroll everywhere */ html, body { max-width: 100%; overflow-x: hidden; } /* Fluid images */ img { max-width: 100%; height: auto; } /* Remove fixed widths that break on mobile */ @media (max-width: 540px) { .modal, [class*="modal"] { max-width: 100% !important; margin: 0 .75rem !important; border-radius: 16px !important; } } /* ═══════════════════════════════════════════════════════════════════ NAVIGATION — all pages ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { nav { padding: 0 1rem; gap: .5rem; } .nav-ml .nav-link { display: none; } /* hide secondary links */ .nav-ml { gap: .5rem; } } @media (max-width: 400px) { .nav-book, .nav-signin { padding: 7px 12px; font-size: .78rem; } } /* ═══════════════════════════════════════════════════════════════════ HOMEPAGE (index.html) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { .hero-grid, .hero-inner { grid-template-columns: 1fr !important; gap: 2rem !important; } .hero-visual, .hero-card-wrap { display: none !important; } .hero-content h1, .hero-left h1 { font-size: clamp(2rem, 6vw, 3rem) !important; } .how-grid, .steps-grid { grid-template-columns: 1fr 1fr !important; } .stats-row, .features-grid { grid-template-columns: 1fr 1fr !important; } .testimonials-grid, .testi-grid { grid-template-columns: 1fr !important; } .pricing-grid { grid-template-columns: 1fr !important; max-width: 400px; margin: 0 auto; } .cta-banner-inner { grid-template-columns: 1fr !important; text-align: center; } } @media (max-width: 540px) { .how-grid, .steps-grid { grid-template-columns: 1fr !important; } .hero-btns, .hero-cta { flex-direction: column !important; align-items: stretch !important; } .hero-btns a, .hero-btns button, .cta-btn { text-align: center !important; justify-content: center !important; } .stats-row { grid-template-columns: 1fr 1fr !important; } } /* ═══════════════════════════════════════════════════════════════════ STORE LISTING (stores.html / stores-location.html) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { .stores-layout, .page-wrap { grid-template-columns: 1fr !important; } .stores-sidebar { position: static !important; display: none; } /* hidden; use filter modal */ .stores-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 540px) { .stores-grid { grid-template-columns: 1fr !important; } .store-card-meta { flex-wrap: wrap !important; gap: .35rem !important; } .location-drill { flex-direction: column !important; } .ld-select { width: 100% !important; } } /* ═══════════════════════════════════════════════════════════════════ STORE PROFILE (store-profile.html) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { .page-wrap { grid-template-columns: 1fr !important; } .sidebar { position: static !important; order: -1; } .photo-strip { grid-template-columns: 1fr 1fr !important; grid-template-rows: 180px 180px !important; } .services-grid { grid-template-columns: 1fr !important; } .hero-meta { flex-wrap: wrap !important; } .info-row-grid { grid-template-columns: 1fr !important; } } @media (max-width: 540px) { .photo-strip .thumb:nth-child(n+3) { display: none; } .photo-strip { grid-template-columns: 1fr !important; grid-template-rows: 220px !important; } .sh-right { align-items: stretch !important; } .book-btn, .write-review-btn { width: 100% !important; } } /* ═══════════════════════════════════════════════════════════════════ STORE REVIEWS (store-reviews.html) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { .main-layout { grid-template-columns: 1fr !important; } .sidebar { position: static !important; order: -1; } .rb-inner { grid-template-columns: 1fr !important; } .wr-row { grid-template-columns: 1fr !important; } .review-filters { gap: .3rem !important; } .rf-btn { font-size: .72rem !important; padding: 5px 10px !important; } } @media (max-width: 540px) { .store-header { grid-template-columns: 1fr !important; } .rating-summary { flex-wrap: wrap !important; gap: .75rem !important; } .rs-divider { display: none !important; } .rs-stats { flex-wrap: wrap !important; gap: 1rem !important; } .hero-inner { padding-bottom: 0 !important; } } /* ═══════════════════════════════════════════════════════════════════ BOOKING (book-improved.html) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 960px) { .book-layout, .booking-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } .book-sidebar, .order-summary-sticky { position: static !important; order: -1; } } @media (max-width: 720px) { .date-grid { grid-template-columns: repeat(7, 1fr) !important; } .service-grid { grid-template-columns: 1fr 1fr !important; } .store-picker-grid { grid-template-columns: 1fr !important; } .slot-grid { grid-template-columns: repeat(3, 1fr) !important; } .step-indicators { gap: .25rem !important; padding: 0 .5rem !important; } .step-label { display: none !important; } /* show icons only */ } @media (max-width: 540px) { .service-grid { grid-template-columns: 1fr !important; } .slot-grid { grid-template-columns: 1fr 1fr !important; } .date-grid { gap: 3px !important; font-size: .72rem !important; } .pay-btn, .next-btn { width: 100% !important; } .address-grid { grid-template-columns: 1fr !important; } } /* ═══════════════════════════════════════════════════════════════════ TRACKING (track.html) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { .tracker-steps { grid-template-columns: repeat(4, 1fr) !important; gap: .25rem !important; } .step-label { font-size: .58rem !important; } .rider-card { grid-template-columns: 1fr !important; text-align: center !important; } .track-grid, .track-layout { grid-template-columns: 1fr !important; } } @media (max-width: 400px) { .tracker-steps { grid-template-columns: repeat(3, 1fr) !important; } .step-dot { width: 28px !important; height: 28px !important; font-size: .65rem !important; } } /* ═══════════════════════════════════════════════════════════════════ FOR STORES / FOR RIDERS (for-stores.html, for-riders.html) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { .hi, .hero-inner, .hero-two-col { grid-template-columns: 1fr !important; } .hero-visual, .calc-card, .earnings-card { order: -1; margin-bottom: 1.5rem; } .features-4col { grid-template-columns: 1fr 1fr !important; } .steps-3col { grid-template-columns: 1fr !important; max-width: 440px; margin: 0 auto; } .comparison-table th, .comparison-table td { padding: .5rem .6rem !important; font-size: .78rem !important; } } @media (max-width: 540px) { .features-4col { grid-template-columns: 1fr !important; } .hero-btns { flex-direction: column !important; } .hero-btns a, .hero-btns button { width: 100% !important; text-align: center !important; } .vehicle-grid { grid-template-columns: 1fr 1fr !important; } .calc-sliders { padding: 1.25rem !important; } } /* ═══════════════════════════════════════════════════════════════════ REFERRAL LANDING (referral.html) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { .hero-inner { grid-template-columns: 1fr !important; } .hero-card-wrap { display: none !important; } .reward-split { grid-template-columns: 1fr !important; } .share-section { grid-template-columns: 1fr !important; padding: 2rem 1.25rem !important; } .share-right { display: none !important; } .testi-grid { grid-template-columns: 1fr !important; } .sticky-cta { display: flex !important; } body { padding-bottom: 80px !important; } } @media (max-width: 540px) { .share-channels { gap: .4rem !important; } .share-btn { padding: .75rem 1rem !important; } .offer-badges { flex-direction: column !important; gap: .5rem !important; } } /* ═══════════════════════════════════════════════════════════════════ LOYALTY REWARDS (loyalty-redeem.html) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { .hero-inner { grid-template-columns: 1fr !important; } .hero-card, .multiplier-card { display: none !important; } .rewards-grid { grid-template-columns: 1fr 1fr !important; } .tiers-grid { grid-template-columns: 1fr 1fr !important; } .balance-bar { flex-wrap: wrap !important; gap: .75rem !important; } } @media (max-width: 540px) { .rewards-grid { grid-template-columns: 1fr !important; } .tiers-grid { grid-template-columns: 1fr !important; } .hero-stats { gap: .6rem !important; } .hs-item { min-width: 72px !important; padding: .6rem .75rem !important; } .tier-progress-bar .tp-labels { font-size: .62rem !important; } .tabs-inner { overflow-x: auto !important; padding-bottom: 0 !important; white-space: nowrap; } .tab { padding: 10px 12px !important; font-size: .78rem !important; } } /* ═══════════════════════════════════════════════════════════════════ LOYALTY (loyalty.html) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { .loyalty-layout { grid-template-columns: 1fr !important; } .tier-cards { grid-template-columns: 1fr 1fr !important; } .rewards-list { grid-template-columns: 1fr !important; } .referral-share { flex-direction: column !important; align-items: stretch !important; } } @media (max-width: 540px) { .tier-cards { grid-template-columns: 1fr !important; } .points-row { flex-wrap: wrap !important; } } /* ═══════════════════════════════════════════════════════════════════ CUSTOMER DASHBOARD (customer-dashboard.html) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { .dashboard-layout { grid-template-columns: 1fr !important; } .dash-sidebar { display: none !important; } /* collapsed; replaced by bottom tab bar */ .kpi-grid, .stats-grid { grid-template-columns: 1fr 1fr !important; } .orders-table-wrap { overflow-x: auto !important; } .orders-table { min-width: 560px !important; } .form-grid { grid-template-columns: 1fr !important; } .address-grid { grid-template-columns: 1fr !important; } } @media (max-width: 540px) { .kpi-grid, .stats-grid { grid-template-columns: 1fr 1fr !important; } .dash-content { padding: 1rem !important; } .order-card { flex-wrap: wrap !important; gap: .5rem !important; } .section-tabs { overflow-x: auto !important; white-space: nowrap !important; } } /* ═══════════════════════════════════════════════════════════════════ PROFILE (profile.html) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { .profile-layout { grid-template-columns: 1fr !important; } .profile-nav { display: flex !important; overflow-x: auto !important; border-right: none !important; border-bottom: 1px solid var(--border) !important; } .pn-item { border-left: none !important; border-bottom: 2px solid transparent !important; white-space: nowrap !important; flex-shrink: 0 !important; } .pn-item.active { border-bottom-color: var(--p) !important; } .form-grid-2 { grid-template-columns: 1fr !important; } .address-cards { grid-template-columns: 1fr 1fr !important; } .session-list-row { flex-wrap: wrap !important; } } @media (max-width: 540px) { .address-cards { grid-template-columns: 1fr !important; } .profile-header { flex-direction: column !important; align-items: flex-start !important; gap: .75rem !important; } .avatar-section { flex-direction: column !important; align-items: flex-start !important; } } /* ═══════════════════════════════════════════════════════════════════ RIDER ONBOARDING (rider-onboarding.html) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { .onboarding-layout { grid-template-columns: 1fr !important; } .onboard-sidebar { display: none !important; } .vehicle-grid { grid-template-columns: 1fr 1fr !important; } .avail-grid { grid-template-columns: repeat(7, 1fr) !important; } .step-header-text h1 { font-size: clamp(1.4rem, 4vw, 1.8rem) !important; } } @media (max-width: 540px) { .vehicle-grid { grid-template-columns: 1fr !important; } .form-row-2 { grid-template-columns: 1fr !important; } .avail-grid { gap: 3px !important; } .avail-slot { padding: .3rem .25rem !important; font-size: .6rem !important; } .doc-drop-grid { grid-template-columns: 1fr 1fr !important; } .step-progress { overflow-x: auto !important; } } /* ═══════════════════════════════════════════════════════════════════ COMPLAINTS (complaints.html) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { .complaints-layout { grid-template-columns: 1fr !important; } .complaint-sidebar { display: none !important; } .priority-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 540px) { .complaint-tabs { overflow-x: auto !important; white-space: nowrap !important; } .priority-grid { grid-template-columns: 1fr 1fr !important; } .attachment-grid { grid-template-columns: 1fr 1fr !important; } .form-row { grid-template-columns: 1fr !important; } } /* ═══════════════════════════════════════════════════════════════════ BLOG (blog-index.html, blog-article.html) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { .blog-layout { grid-template-columns: 1fr !important; } .blog-sidebar { display: none !important; } .blog-grid { grid-template-columns: 1fr 1fr !important; } .featured-post { grid-template-columns: 1fr !important; } .featured-post .post-img { height: 220px !important; } .article-layout { grid-template-columns: 1fr !important; } .article-sidebar { display: none !important; } } @media (max-width: 540px) { .blog-grid { grid-template-columns: 1fr !important; } .article-hero { height: 220px !important; } .article-body { font-size: .9rem !important; line-height: 1.8 !important; } .pull-quote { margin: 1.5rem 0 !important; padding: 1rem 1.25rem !important; } } /* ═══════════════════════════════════════════════════════════════════ FAQ (faq.html) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { .faq-layout { grid-template-columns: 1fr !important; } .faq-nav { display: none !important; } .faq-hero-inner { grid-template-columns: 1fr !important; } } @media (max-width: 540px) { .faq-cats { overflow-x: auto !important; white-space: nowrap !important; padding-bottom: .5rem !important; } .faq-cat-btn { flex-shrink: 0 !important; } } /* ═══════════════════════════════════════════════════════════════════ CONTACT (contact.html) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { .page { grid-template-columns: 1fr !important; } .dg { grid-template-columns: 1fr 1fr !important; } .frow { grid-template-columns: 1fr !important; } .contact-hero .hi { grid-template-columns: 1fr !important; } .contact-info-sidebar { order: -1; } } @media (max-width: 540px) { .dg { grid-template-columns: 1fr !important; } } /* ═══════════════════════════════════════════════════════════════════ RECEIPT / INVOICE (receipt.html, invoice.html) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 540px) { .receipt-header { flex-direction: column !important; gap: .75rem !important; align-items: flex-start !important; } .receipt-meta-grid { grid-template-columns: 1fr !important; } .item-row { grid-template-columns: 1fr auto !important; } .totals-section { margin-left: 0 !important; max-width: 100% !important; } .qr-section { flex-direction: column !important; align-items: flex-start !important; gap: 1rem !important; } .receipt-actions { flex-wrap: wrap !important; gap: .5rem !important; } .receipt-actions button { flex: 1 !important; min-width: 120px !important; } } /* ═══════════════════════════════════════════════════════════════════ MESSENGER (messenger.html) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { .messenger-layout { grid-template-columns: 1fr !important; } .conversation-list { display: none !important; } /* show on thread view only */ .messenger-layout.show-list .conversation-list { display: block !important; } .messenger-layout.show-list .chat-window { display: none !important; } .chat-back-btn { display: flex !important; } } /* ═══════════════════════════════════════════════════════════════════ NOTIFICATIONS (notifications.html) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { .notif-layout { grid-template-columns: 1fr !important; } .notif-settings-panel { display: none !important; } .notif-feed { border-right: none !important; } } @media (max-width: 540px) { .notif-item { flex-wrap: wrap !important; } .notif-actions { margin-left: 0 !important; width: 100% !important; } } /* ═══════════════════════════════════════════════════════════════════ ADMIN DASHBOARDS (dark theme) Admin is primarily desktop but needs basic tablet support ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .sidebar { width: 200px !important; } .kpi-strip, .kpi-row { grid-template-columns: repeat(4, 1fr) !important; } .chart-grid { grid-template-columns: 1fr !important; } .chart-grid-3 { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 860px) { /* Hide sidebar, show hamburger area */ body.admin { overflow: hidden; } .sidebar { display: none !important; } .main { width: 100% !important; } .kpi-strip, .kpi-row { grid-template-columns: repeat(2, 1fr) !important; } .chart-grid-3 { grid-template-columns: 1fr !important; } .chart-grid-eq { grid-template-columns: 1fr !important; } /* Tables: horizontal scroll */ .payout-card, .data-table, .audit-card, .perf-table, .payout-table { overflow-x: auto !important; } .payout-table, .perf-table, .cohort-table { min-width: 600px !important; } .dt-head, .dt-row { min-width: 500px !important; } /* Analytics */ .insight-grid { grid-template-columns: 1fr !important; } .tiers-grid { grid-template-columns: 1fr 1fr !important; } .chart-grid { grid-template-columns: 1fr !important; } } @media (max-width: 540px) { .kpi-strip, .kpi-row { grid-template-columns: 1fr 1fr !important; } .topbar { padding: 0 .875rem !important; gap: .4rem !important; } .topbar-title span { display: none !important; } .range-pills { gap: 1px !important; } .rp { padding: 4px 8px !important; font-size: .7rem !important; } .reward-split { grid-template-columns: 1fr !important; } } /* ═══════════════════════════════════════════════════════════════════ STORE DASHBOARD / RIDER DASHBOARD ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { .store-dash-layout, .dash-body { grid-template-columns: 1fr !important; } .dash-nav { display: flex !important; overflow-x: auto !important; white-space: nowrap !important; flex-direction: row !important; border-right: none !important; border-bottom: 1px solid var(--border) !important; } .dash-nav-item { border-left: none !important; border-bottom: 2px solid transparent !important; flex-shrink: 0 !important; } .orders-grid { grid-template-columns: 1fr !important; } } /* ═══════════════════════════════════════════════════════════════════ STORE APPROVAL / RIDER ONBOARDING ADMIN ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 960px) { .approval-layout { grid-template-columns: 1fr !important; } .approval-list-pane { display: none !important; } .approval-detail-pane { border-left: none !important; } .score-breakdown { grid-template-columns: 1fr 1fr !important; } } /* ═══════════════════════════════════════════════════════════════════ PAYOUTS ADMIN ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { .next-payout-banner { flex-direction: column !important; align-items: flex-start !important; gap: 1rem !important; } .npb-summary { flex-wrap: wrap !important; gap: 1rem !important; } .npb-actions { margin-left: 0 !important; } .chart-row { grid-template-columns: 1fr !important; } } /* ═══════════════════════════════════════════════════════════════════ LOGIN / REGISTER (auth pages) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { body.auth-page, .auth-grid { grid-template-columns: 1fr !important; } .auth-hero, .auth-left { display: none !important; } .auth-form-col { padding: 2rem 1.25rem !important; } .row-2 { grid-template-columns: 1fr !important; } } @media (max-width: 400px) { .auth-form-col { padding: 1.5rem 1rem !important; } .auth-logo { margin-bottom: 1.5rem !important; } } /* ═══════════════════════════════════════════════════════════════════ WHATSAPP BOT CONSOLE ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { .main { flex-direction: column !important; overflow: auto !important; } .phone-col { width: 100% !important; height: 60vh !important; border-right: none !important; border-bottom: 1px solid var(--border) !important; } .debug-col { width: 100% !important; height: auto !important; border-right: none !important; } .right-col { display: none !important; } } /* ═══════════════════════════════════════════════════════════════════ BULK APPROVALS ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { /* Tables scroll horizontally */ .dt-head-stores, .dt-row-stores, .dt-head-riders, .dt-row-riders { grid-template-columns: 32px 1fr 80px 70px 70px !important; } /* Hide less important columns */ .dt-head-stores .dt-col:nth-child(7), .dt-head-stores .dt-col:nth-child(6), .dt-row-stores > div:nth-child(7), .dt-row-stores > div:nth-child(6) { display: none !important; } } @media (max-width: 540px) { .bulk-bar { flex-direction: column !important; align-items: flex-start !important; gap: .5rem !important; } .bb-actions { flex-wrap: wrap !important; width: 100% !important; } .bb-btn { flex: 1 !important; justify-content: center !important; } .toolbar { flex-direction: column !important; align-items: stretch !important; } .search-bar, .filter-select { width: 100% !important; } } /* ═══════════════════════════════════════════════════════════════════ LEGAL PAGES (privacy.html, terms.html, etc.) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { .legal-layout { grid-template-columns: 1fr !important; } .legal-nav { display: none !important; } .legal-body { padding: 1.5rem 1.25rem !important; } } /* ═══════════════════════════════════════════════════════════════════ ERROR PAGES (404, 403, 500) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 540px) { .error-page { padding: 2rem 1.25rem !important; } .error-actions { flex-direction: column !important; align-items: center !important; } .error-actions a, .error-actions button { width: 100% !important; max-width: 280px !important; text-align: center !important; } } /* ═══════════════════════════════════════════════════════════════════ MODALS — full-screen on small phones ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 540px) { .modal-overlay { align-items: flex-end !important; padding: 0 !important; } .modal, .modal-overlay > div > div { border-radius: 20px 20px 0 0 !important; max-width: 100% !important; width: 100% !important; max-height: 90vh !important; overflow-y: auto !important; padding: 1.5rem 1.25rem !important; } .modal-btns { flex-direction: column !important; } .modal-cancel, .modal-confirm, .modal-close { width: 100% !important; } } /* ═══════════════════════════════════════════════════════════════════ TABS — horizontal scroll on mobile (all pages) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 540px) { .tabs, .tabs-inner, .tabs-wrap .tabs-inner { overflow-x: auto !important; white-space: nowrap !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } .tabs::-webkit-scrollbar, .tabs-inner::-webkit-scrollbar { display: none !important; } .tab { flex-shrink: 0 !important; font-size: .78rem !important; padding: 10px 14px !important; } } /* ═══════════════════════════════════════════════════════════════════ BREADCRUMBS ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 540px) { .breadcrumb, .breadcrumb-inner { font-size: .68rem !important; flex-wrap: wrap !important; gap: .2rem !important; } /* Show only last 2 breadcrumb items */ .breadcrumb-inner > *:not(:nth-last-child(-n+3)) { display: none !important; } } /* ═══════════════════════════════════════════════════════════════════ HERO SECTIONS — text sizing ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 540px) { h1, .hero h1 { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; letter-spacing: -.3px !important; } .section-title { font-size: clamp(1.3rem, 5vw, 2rem) !important; } .hero-sub, .section-sub { font-size: .875rem !important; } } /* ═══════════════════════════════════════════════════════════════════ FORMS — full-width inputs on mobile ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 540px) { .field-input, .field-select, .field-textarea, .wr-input, .wr-select, .wr-textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], textarea, select { font-size: 16px !important; /* prevents iOS zoom on focus */ } } /* ═══════════════════════════════════════════════════════════════════ PRINT — hide nav/sidebar for receipts ═══════════════════════════════════════════════════════════════════ */ @media print { nav, .sidebar, .topbar, .breadcrumb, .sticky-cta, .nav-book, .receipt-actions, .print-hide { display: none !important; } body { background: #fff !important; color: #000 !important; } .receipt, .invoice { box-shadow: none !important; border: none !important; } } /* ═══════════════════════════════════════════════════════════════════ OFFLINE PAGE (offline.html) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 540px) { .offline-features { grid-template-columns: 1fr 1fr !important; } .actions { flex-direction: column !important; align-items: center !important; } .btn-retry, .btn-home { width: 100% !important; max-width: 320px !important; justify-content: center !important; } }