/* ========================================================================= Sticky mobile buy bar — aimatin.com money pages Markup (end of ): Rules: shown only ≤768px; hidden while the watched price panel is in view (buybar.js), while the popup deal bar is on (body.pb-bar-on) and while the mobile menu is open (body.menu-open). Logical properties only (RTL-first). ========================================================================= */ .buybar { display: none; position: fixed; inset-inline: 0; bottom: 0; z-index: 9980; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); border-top: 1px solid #e6eaf0; box-shadow: 0 -10px 28px -14px rgba(15, 23, 42, 0.22); font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif; transform: translateY(110%); transition: transform .25s ease; } @media (max-width: 768px) { .buybar { display: flex; } } .buybar.is-on { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .buybar { transition: none; } } /* keep the footer and the chat launcher clear of the bar while it is shown */ body.buybar-on { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } body.buybar-on #am-chat-launcher { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } /* the popup deal bar owns the bottom edge when it is present */ body.pb-bar-on .buybar, body.menu-open .buybar { display: none; } .buybar-price { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; } .buybar-price strong { font-size: 16px; font-weight: 800; color: #1a1d21; font-variant-numeric: tabular-nums; white-space: nowrap; } .buybar-price span { font-size: 12px; color: #565a60; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .buybar-go { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border-radius: 12px; background: #066ac9; color: #fff; font-weight: 800; font-size: 14px; text-decoration: none; white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(6, 106, 201, 0.6); } .buybar-go:hover, .buybar-go:focus-visible { background: #0555a1; color: #fff; } .buybar-go svg { width: 14px; height: 14px; }