/* Global Styles & Variable Design Tokens */ @import url('local-fonts.css'); /* Dynamic English font choices set via Admin */ body.font-en-outfit { --font-en-primary: 'Plus Jakarta Sans', sans-serif; --font-en-display: 'Outfit', sans-serif; } body.font-en-inter { --font-en-primary: 'Inter', sans-serif; --font-en-display: 'Inter', sans-serif; } body.font-en-playfair-display { --font-en-primary: 'Inter', sans-serif; --font-en-display: 'Playfair Display', serif; } body.font-en-ibm-sans { --font-en-primary: 'IBM Plex Sans', sans-serif; --font-en-display: 'IBM Plex Sans', sans-serif; } body.font-en-arial { --font-en-primary: Arial, sans-serif; --font-en-display: Arial, sans-serif; } body.font-en-jetbrains-mono { --font-en-primary: 'JetBrains Mono', monospace; --font-en-display: 'JetBrains Mono', monospace; } /* Dynamic Arabic font choices set via Admin */ body.font-ar-tajawal { --font-ar-primary: 'Tajawal', sans-serif; --font-ar-display: 'Tajawal', sans-serif; } body.font-ar-cairo { --font-ar-primary: 'Cairo', sans-serif; --font-ar-display: 'Cairo', sans-serif; } body.font-ar-el-messiri { --font-ar-primary: 'Tajawal', sans-serif; --font-ar-display: 'El Messiri', serif; } /* Fallbacks & Base Language assignments */ body { --font-primary: var(--font-en-primary, 'Plus Jakarta Sans', sans-serif); --font-display: var(--font-en-display, 'Outfit', sans-serif); } html[lang="ar"] body, [dir="rtl"] body { --font-primary: var(--font-ar-primary, 'Tajawal', sans-serif); --font-display: var(--font-ar-display, 'Tajawal', sans-serif); } :root { --font-primary: 'Plus Jakarta Sans', sans-serif; --font-display: 'Outfit', sans-serif; /* Defaults overridden dynamically by JS */ --theme-background: #0B0F19; --theme-surface: #FFFFFF; --theme-primary: #0B0F19; --theme-accent: #2563EB; --theme-text: #0F172A; --theme-border: #E2E8F0; --bg-primary: var(--theme-background); --bg-secondary: var(--theme-surface); --bg-tertiary: var(--theme-surface); --accent-color: var(--theme-accent); --accent-color-rgb: 37, 99, 235; --accent-hover: var(--theme-accent); --text-primary: var(--theme-text); --text-secondary: var(--theme-primary); --text-muted: var(--theme-primary); --card-bg: var(--theme-surface); --card-border: var(--theme-border); --glass-blur: 16px; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.15); --shadow-glow: 0 0 20px rgba(var(--accent-color-rgb), 0.2); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px; --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1); --drawer-hidden-transform: translateX(100%); } /* The viewport's scroll behaviour comes from . Setting overflow-x here (not just on body) is what actually clips off-canvas panels parked beyond the right edge and stops the whole page dragging sideways. */ html { /* `hidden` would make a scroll container, which silently breaks every position:sticky descendant (the admin sidebar stopped sticking). `clip` clips the same overflow WITHOUT creating a scroll container, so sticky keeps working. `hidden` stays first as the fallback for old engines. */ overflow-x: hidden; overflow-x: clip; max-width: 100%; } /* Bind layout elements directly to --theme-* variables as requested */ body { background-color: var(--theme-background); color: var(--theme-text); font-family: var(--font-primary); /* dvh, not vh — mobile browser chrome makes 100vh taller than the visible area, which pushes footers and sticky CTAs below the fold on phones. */ min-height: 100dvh; overflow-x: hidden; overflow-x: clip; /* see above — `clip` preserves position:sticky */ /* Off-canvas panels (cart drawer, filter sheet) sit at translateX(100%), i.e. a full panel-width past the right edge. `visibility:hidden` stops them painting but they still extend the scrollable area, so the page could be dragged sideways ~230px. overflow-x on alone does not clip this — the viewport takes its overflow from , set below. */ max-width: 100%; line-height: 1.5; transition: background-color var(--transition-normal); } /* Cards, option panels, and containers surface & outline binding */ .product-card, .customizer-form, .stat-card, .glass, .modal-content, .spreadsheet-container, .auth-card, .preset-preview-box, .orders-sub-tabs, .dev-card, .recommendation-card { background: var(--theme-surface); border: 1px solid var(--theme-border); color: var(--theme-text); } /* Headers, tabs, metrics, labels, text elements text/primary color binding */ h1, h2, h3, h4, h5, h6, .stat-val, label, .tab-link, .order-tag-badge, .contact-link, .product-title, .product-price, .product-desc, .swatch-label { color: var(--theme-text); font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; } .tab-link { color: var(--theme-primary); } /* Main interaction controls, active states, indicators, button backgrounds */ .tab-link.active, .tag-btn.active, .theme-swatch.active, .glow-btn, .add-cart-btn, .order-sub-link.active, .checkout-btn, .status-pill.completed { background-color: var(--theme-accent); border-color: var(--theme-accent); color: #FFFFFF; } .theme-swatch.active { box-shadow: 0 0 12px var(--theme-accent); } .outline-btn { background: transparent; color: var(--theme-text); border: 1.5px solid var(--theme-border); border-radius: var(--radius-md); padding: 0.75rem 1.5rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-primary); font-weight: 600; font-size: 0.95rem; transition: all var(--transition-fast); } .outline-btn:hover { background: rgba(var(--accent-color-rgb), 0.05); border-color: var(--theme-accent); color: var(--theme-accent); } .glow-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-primary); font-size: 0.95rem; font-weight: 600; padding: 0.75rem 1.75rem; border-radius: var(--radius-md); border: 1.5px solid transparent; cursor: pointer; transition: all var(--transition-fast); text-decoration: none; box-shadow: 0 4px 12px rgba(var(--accent-color-rgb), 0.2); } .glow-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(var(--accent-color-rgb), 0.4), var(--shadow-glow); filter: brightness(1.1); } .glow-btn:active { transform: translateY(0); } /* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Scrollbars */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--accent-color); } /* Form Groups */ .form-group { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .form-group label { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); } .form-input { background: rgba(var(--accent-color-rgb), 0.05); border: 1.5px solid var(--theme-border); color: var(--theme-text); padding: 0.8rem 1.2rem; border-radius: var(--radius-md); font-family: var(--font-primary); font-size: 0.95rem; outline: none; width: 100%; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); } .form-input:focus { background: var(--theme-surface); border-color: var(--theme-accent); box-shadow: 0 0 0 4px rgba(var(--accent-color-rgb), 0.15); } /* Modals Overlay */ .modal-overlay { position: fixed; top: 0; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity var(--transition-normal); } .modal-overlay.active { opacity: 1; pointer-events: auto; } .toast-container { position: fixed; bottom: 2rem; inset-inline-end: 2rem; display: flex; flex-direction: column; gap: 0.75rem; z-index: 2000; } .toast { padding: 1rem 1.5rem; border-radius: var(--radius-md); color: #fff; font-weight: 500; display: flex; align-items: center; gap: 0.75rem; box-shadow: var(--shadow-lg); transform: translateY(1rem); opacity: 0; animation: toast-in var(--transition-normal) forwards; } @keyframes toast-in { to { transform: translateY(0); opacity: 1; } } .toast.success { background: #10b981; border-inline-start: 4px solid #047857; } .toast.error { background: #ef4444; border-inline-start: 4px solid #b91c1c; } .toast.info { background: var(--bg-tertiary); border-inline-start: 4px solid var(--accent-color); border: 1px solid var(--card-border); } /* ----------------- LIGHT MODE STYLING & ADAPTIVE SYSTEM ----------------- */ html[data-theme="light"] { --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12); --accent-color: #64748b; --accent-color-rgb: 100, 116, 139; --accent-hover: #475569; --card-bg: rgba(255, 255, 255, 0.95); --card-border: rgba(100, 116, 139, 0.18); --shadow-glow: 0 0 15px rgba(100, 116, 139, 0.1); } html[data-theme="light"].theme-summer-resort { --bg-primary: #fef7f0; --bg-secondary: #ffffff; --bg-tertiary: #feecd8; --accent-color: #ea580c; --accent-color-rgb: 234, 88, 12; --accent-hover: #c2410c; --card-bg: rgba(255, 255, 255, 0.95); --card-border: rgba(234, 88, 12, 0.18); --shadow-glow: 0 0 15px rgba(234, 88, 12, 0.1); } /* Light mode form focus / specific controls input text readability */ html[data-theme="light"] .form-input { background: #ffffff; color: #0f172a; } html[data-theme="light"] .form-input:focus { background: #ffffff; border-color: var(--accent-color); } html[data-theme="light"] select.form-input option { background-color: #ffffff; color: #0f172a; } html[data-theme="light"] .preset-img-btn { background: #f1f5f9; border-color: #cbd5e1; } html[data-theme="light"] .preset-img-btn:hover { background: #e2e8f0; } html[data-theme="light"] .preset-img-btn svg { fill: #475569; } html[data-theme="light"] .tag-btn { background: #ffffff; color: #475569; } html[data-theme="light"] .tag-btn:hover { color: #0f172a; background: #f1f5f9; } html[data-theme="light"] .tag-btn.active { background: var(--accent-color); color: #ffffff; } /* In light mode, some tables need specific border colors */ html[data-theme="light"] table, html[data-theme="light"] th, html[data-theme="light"] td { border-color: #cbd5e1; } html[data-theme="light"] tr { border-bottom: 1px solid #e2e8f0; } html[data-theme="light"] tr:hover { background-color: rgba(0, 0, 0, 0.02); } html[data-theme="light"] th { background-color: #f1f5f9; color: #334155; } html[data-theme="light"] td { color: #334155; } html[data-theme="light"] .contact-link { color: var(--accent-color); } html[data-theme="light"] .order-tag-badge { background: #e2e8f0; color: #334155; } html[data-theme="light"] .outline-btn:hover { background: #f1f5f9; } /* ----------------- CUSTOMIZABLE ANIMATIONS ENGINE ----------------- */ /* 2. Entrance/Load Animations */ .load-stagger-fade { opacity: 0; transition: opacity 0.4s ease-out; } .load-stagger-fade.loaded { opacity: 1; } .load-stagger-slide { opacity: 0; transform: translateY(30px); transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .load-stagger-slide.loaded { opacity: 1; transform: translateY(0); } .load-stagger-zoom { opacity: 0; transform: scale(0.8); transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .load-stagger-zoom.loaded { opacity: 1; transform: scale(1); } .load-text-reveal { clip-path: inset(0 100% 0 0); transition: clip-path 0.8s cubic-bezier(0.76, 0, 0.24, 1); } .load-text-reveal.loaded { clip-path: inset(0 0 0 0); } .load-blur-up { filter: blur(15px); opacity: 0.2; transition: filter 0.8s ease-out, opacity 0.8s ease-out; } .load-blur-up.loaded { filter: blur(0); opacity: 1; } .load-flip { opacity: 0; transform: rotateY(-90deg); transform-style: preserve-3d; perspective: 1000px; transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .load-flip.loaded { opacity: 1; transform: rotateY(0); } .load-parallax-slide { transform: translateY(12%); transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); } .load-parallax-slide.loaded { transform: translateY(0); } .load-bounce-in { opacity: 0; transform: scale(0.3); transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .load-bounce-in.loaded { opacity: 1; transform: scale(1); } /* 1. Hover Card Animations */ .hover-lift { transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal); } .hover-scale { transition: transform var(--transition-normal), box-shadow var(--transition-normal); } .hover-glow { transition: box-shadow var(--transition-normal), border-color var(--transition-normal); } .hover-tilt { transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal); } .hover-trace { position: relative; transition: border-color var(--transition-normal), box-shadow var(--transition-normal); } .hover-trace::after { content: ''; position: absolute; inset: -1px; border: 2px solid var(--theme-accent); border-radius: inherit; opacity: 0; transition: opacity var(--transition-fast); pointer-events: none; z-index: 1; } .product-card.hover-slide-details { position: relative; overflow: hidden; } .hover-slide-details .product-actions { position: absolute; bottom: 0; inset-inline-start: 0; inset-inline-end: 0; background: var(--card-bg); border-top: 1px solid var(--card-border); padding: 1rem; transform: translateY(102%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); z-index: 5; box-shadow: 0 -4px 15px rgba(0,0,0,0.1); } .product-card.hover-focus-blur { transition: opacity var(--transition-normal), filter var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal); } .hover-skew { transition: transform var(--transition-normal), box-shadow var(--transition-normal); } @media (hover: hover) and (pointer: fine) { .hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: rgba(var(--accent-color-rgb), 0.15); } .hover-lift:hover .product-img { transform: scale(1.03); } .hover-scale:hover { transform: scale(1.03); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); } .hover-scale:hover .product-img { transform: scale(1.06); } .hover-glow:hover { box-shadow: 0 0 20px rgba(var(--accent-color-rgb), 0.35); border-color: var(--theme-accent); } .hover-glow:hover .product-img { transform: scale(1.06); } .hover-tilt:hover { transform: perspective(1000px) rotateX(4deg) rotateY(-4deg) translateY(-4px); box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.2); border-color: rgba(var(--accent-color-rgb), 0.2); } .hover-trace:hover::after { opacity: 1; } .hover-trace:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } .hover-slide-details:hover .product-actions { transform: translateY(0); } .product-card.hover-focus-blur:hover { opacity: 1; filter: none; transform: scale(1.02); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); } .hover-skew:hover { transform: skewX(-3deg) scale(1.02); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); } } /* Container-level Focus Blur selectors using modern :has() relational selector */ .products-container:has(.hover-focus-blur:hover) .product-card:not(:hover), .preset-preview-box:has(.hover-focus-blur:hover) .product-card:not(:hover), .recommendations-grid:has(.hover-focus-blur:hover) .product-card:not(:hover) { opacity: 0.45; filter: blur(1.5px); } /* 3. Navigation and Trigger Animations */ .nav-transition-fade { opacity: 0; transform: scale(0.98); transition: opacity 250ms ease, transform 250ms ease; } .nav-transition-slide { opacity: 0; transform: translateX(40px); transition: opacity 250ms ease, transform 250ms ease; } .nav-transition-zoom { opacity: 0; transform: scale(0.9); transition: opacity 250ms ease, transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1); } .nav-transition-drawer { opacity: 0; transform: var(--drawer-hidden-transform); transition: opacity 250ms ease, transform 250ms cubic-bezier(0.16, 1, 0.3, 1); } .nav-transition-scroll-snap { opacity: 0; transform: translateY(50px); transition: opacity 250ms ease, transform 250ms ease; } .nav-transition-cart-bounce { opacity: 0; transform: scale(0.9) translateY(20px); transition: opacity 250ms ease, transform 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275); } .nav-transition-pulse { opacity: 0; transform: scale(0.95); filter: brightness(1.2); transition: opacity 250ms ease, transform 250ms ease, filter 250ms ease; } .nav-transition-flip-page { opacity: 0; transform: rotateY(90deg); perspective: 1000px; transition: opacity 300ms ease, transform 300ms ease; } .drawer-transition { transform: var(--drawer-hidden-transform); transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); } .drawer-transition.active { transform: translateX(0); } @keyframes cartBounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3) translateY(-6px); } } .cart-bounce-anim { animation: cartBounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } @keyframes btnPulse { 0% { box-shadow: 0 0 0 0 var(--theme-accent); } 70% { box-shadow: 0 0 0 10px rgba(var(--accent-color-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-color-rgb), 0); } } .pulse-anim { animation: btnPulse 2s infinite; } /* ----------------- COMPONENT & TYPOGRAPHY SYSTEM EXTENSIONS ----------------- */ /* Global form element font inheritances */ button, input, select, textarea { font-family: var(--font-primary); } /* Premium Modal Layout and Animation System */ .modal-overlay { position: fixed; top: 0; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; background: rgba(11, 15, 25, 0.75); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity var(--transition-normal); padding: 1rem; } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal-content { background: var(--theme-surface); border: 1px solid var(--theme-border); color: var(--theme-text); max-width: 550px; width: 100%; padding: 2.5rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), var(--shadow-glow); backdrop-filter: blur(var(--glass-blur)); position: relative; max-height: 90vh; overflow-y: auto; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; transform: scale(0.95) translateY(10px); opacity: 0; } .modal-overlay.active .modal-content { transform: scale(1) translateY(0); opacity: 1; } /* Premium modal close button */ .modal-close-btn { position: absolute; top: 1.5rem; inset-inline-end: 1.5rem; background: transparent; border: none; color: var(--theme-primary); opacity: 0.5; cursor: pointer; padding: 0.5rem; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); } .modal-close-btn:hover { background: rgba(var(--accent-color-rgb), 0.1); color: var(--theme-accent); opacity: 1; transform: rotate(90deg); } /* Premium Option Checkbox Cards */ .checkout-gift-card { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: rgba(var(--accent-color-rgb), 0.03); border: 1.5px solid var(--theme-border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); } .checkout-gift-card:hover { background: rgba(var(--accent-color-rgb), 0.06); border-color: var(--theme-accent); } .checkout-gift-card input[type="checkbox"] { width: 1.2rem; height: 1.2rem; accent-color: var(--theme-accent); cursor: pointer; } html[dir="rtl"] { font-family: var(--font-primary), 'Tajawal', 'Cairo', system-ui, sans-serif; --drawer-hidden-transform: translateX(-100%); } /* YouTube-Style Text Blending (Plaintext Bidi) */ .product-title, .product-desc, .prod-tag, #shop-name-title, .hub-title, .hub-subtitle, .cart-item-title, .bidi-text { unicode-bidi: plaintext; text-align: start; } /* Global Responsive Breakpoints - Mobile First */ /* Base styles apply to mobile viewport (<768px) */ @media (min-width: 768px) { /* Tablet viewport styles */ } @media (min-width: 1024px) { /* Desktop viewport styles */ } /* Cookie Consent Banner Styling */ .cookie-consent-banner { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); width: calc(100% - 3rem); max-width: 500px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; z-index: 9999; box-shadow: var(--shadow-lg); box-sizing: border-box; } /* Header Currency Selector Dropdown */ .currency-selector-wrapper { position: relative; display: inline-block; } .currency-select { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); padding: 0.35rem 0.65rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: border-color 0.2s; } .currency-select:hover { border-color: var(--accent-color); } /* Premium Responsive Social Embed System */ .social-embed-wrapper { width: 100%; height: 100%; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .social-embed-iframe { border: none; background: transparent; transform-origin: center center; } /* ══════════════════════════════════════════════════════════════════════ [Mobile hardening] Applies to every page (common.css loads everywhere) ══════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* iOS Safari zooms the viewport whenever a focused control is under 16px. Base .form-input is 0.95rem (~15.2px) and .tk-input 0.93rem (~14.9px), so every field on the storefront was triggering it. Phones get 16px; the desktop type scale is untouched. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select, .form-input, .tk-input { font-size: 16px; } /* Comfortable touch height to match the larger text (skill §8 touch-friendly-input). */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, .form-input, .tk-input { min-height: 46px; } /* Kill the legacy 300ms tap delay on anything interactive. */ a, button, input, select, textarea, label, [role="button"], [onclick] { touch-action: manipulation; } /* Never let a phone scroll sideways. `clip` not `hidden` — see note above. */ html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; } /* Long unbroken strings (order IDs, coupon codes, URLs) must wrap. */ body { overflow-wrap: break-word; } } /* Respect the notch / home indicator on any fixed page furniture. */ @supports (padding: max(0px)) { @media (max-width: 768px) { .bottom-nav, .mobile-bottom-nav { padding-bottom: max(0px, env(safe-area-inset-bottom)); } } }