/* ============================================= UniTrade — Universal Mobile Responsive CSS Linked last in on all pages ============================================= */ /* Base resets */ *, *::before, *::after { box-sizing: border-box; } img { max-width: 100%; height: auto; } html, body { overflow-x: hidden; } /* Touch-friendly links and buttons */ a, button { touch-action: manipulation; } /* ============================================= iOS Safari Compatibility ============================================= */ /* Remove blue tap flash on all clickable elements */ a, button, input, select, textarea, [role="button"], [onclick], label { -webkit-tap-highlight-color: transparent; } /* Prevent iOS landscape font-size inflation */ html { -webkit-text-size-adjust: 100%; } /* Smooth momentum scrolling inside overflow containers */ .chat-messages, .modal-body, .product-grid, .store-grid, .orders-list, .notifications-list, .table-wrap, [class*="-list"], [class*="-scroll"] { -webkit-overflow-scrolling: touch; } /* WebKit backdrop-filter for iOS Safari < 18 */ nav, header, .navbar, .search-results-box, #searchResultsBox, .modal, .modal-overlay, .overlay, .sidebar, .dropdown-menu, .cart-sidebar, .chat-window, .chat-header, .product-card, .store-card, .floating-card, .feature-card { -webkit-backdrop-filter: blur(12px); } /* Safe area insets for notched iPhones (iPhone X and later) — body padding ensures content never hides under the notch or home indicator */ @supports (padding-bottom: env(safe-area-inset-bottom)) { body { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* Bottom nav bars and fixed footers need extra room for home indicator */ .bottom-nav, .tab-bar, nav.fixed-bottom, .chat-input-row, .checkout-footer, .cart-footer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); } } /* iOS fix: background-attachment:fixed is broken on iOS Safari; fall back to scroll so the gradient doesn't tile oddly */ @supports (-webkit-overflow-scrolling: touch) { html, body { background-attachment: scroll !important; } } /* ---- 768px and below ---- */ @media (max-width: 768px) { /* Navbar: wrap instead of overflow */ .navbar { flex-wrap: wrap; gap: 8px; padding: 10px 16px !important; } .nav-links { flex-wrap: wrap; gap: 4px 12px; padding: 0; } .nav-links a, .nav-links li a { font-size: 13px; } /* Nav bar (alternate class used on some pages) */ .nav, header nav { flex-wrap: wrap; gap: 8px; } /* Prevent form inputs triggering iOS auto-zoom (must be >= 16px) */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; } /* Tables: scroll horizontally without page overflow */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; } table { width: 100%; min-width: max-content; } /* Common page containers: reduce padding */ .orders-container, .notifications-container { padding: 0 12px; margin: 8px auto; } /* Product / store grids */ .product-grid, .store-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } /* Page-level wrappers */ .container { padding: 0 12px; } /* Forms: stack label+input pairs */ .form-group { flex-direction: column; } /* Buttons: comfortable tap targets */ .btn, button.btn { min-height: 40px; padding: 8px 14px; } } /* ---- 600px and below ---- */ @media (max-width: 600px) { /* Order cards: stack vertically */ .order-card { flex-direction: column !important; align-items: flex-start !important; gap: 10px; } .order-status { text-align: left !important; min-width: unset !important; width: 100%; } .order-status .btn { width: 100%; display: block; text-align: center; } /* Notification cards: stack */ .notification-card { flex-direction: column; align-items: flex-start; gap: 8px; } /* Section title */ .section-title { font-size: 1.1rem; } /* Chat cards */ .card.chat-card, .card { padding: 10px; } /* Footer */ .footer, footer { padding: 12px; font-size: 12px; } /* Review dashboards: table rows become cards */ .review-row { display: flex; flex-direction: column; gap: 4px; } } /* ---- 480px and below ---- */ @media (max-width: 480px) { /* Scale down headings */ h1 { font-size: clamp(1.3rem, 5vw, 1.8rem); } h2 { font-size: clamp(1.1rem, 4vw, 1.5rem); } /* Smaller logo */ .logo { font-size: 1.2rem !important; } /* Product grids go to 2 columns */ .product-grid, .store-grid { grid-template-columns: 1fr 1fr; gap: 8px; } /* Full-width action buttons inside cards */ .order-status .btn, .card .btn { width: 100%; } }