/* App feel (js/app.js): progress bar, cart messages, smooth page changes */

/* thin bar at the very top while the next page loads */
.zs-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 2000; background: #fe696a; box-shadow: 0 0 8px rgba(254, 105, 106, .6); opacity: 0; pointer-events: none; }
.zs-progress.run { opacity: 1; animation: zs-progress 8s cubic-bezier(.1, .7, .3, 1) forwards; }
.zs-progress.done { opacity: 0; width: 100%; transition: opacity .3s; }
@keyframes zs-progress { 0% { width: 0; } 10% { width: 35%; } 40% { width: 70%; } 100% { width: 92%; } }

/* "Added to your cart" messages */
.zs-toasts { position: fixed; left: 12px; right: 12px; bottom: 76px; z-index: 2050; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
@media (min-width: 992px) { .zs-toasts { bottom: 24px; left: auto; right: 24px; align-items: flex-end; } }
.zs-toast { pointer-events: auto; display: flex; align-items: center; gap: .6rem; max-width: 420px; width: 100%; background: #2b3445; color: #fff; border-radius: .6rem; padding: .75rem 1rem; font-size: .9rem; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .2); transform: translateY(12px); opacity: 0; transition: transform .25s, opacity .25s; }
.zs-toast.show { transform: none; opacity: 1; }
.zs-toast i { font-size: 1.2rem; }
.zs-toast.ok i { color: #42d697; }
.zs-toast.bad i { color: #fe696a; }
.zs-toast span { flex: 1; }
.zs-toast a { color: #fff; font-weight: 500; text-decoration: underline; white-space: nowrap; }

/* cart badge pops when it changes; button shows it is working */
.zs-bump { animation: zs-bump .4s; }
@keyframes zs-bump { 50% { transform: scale(1.35); } }
.zs-busy { position: relative; color: transparent !important; }
.zs-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1rem; height: 1rem; margin: -.5rem 0 0 -.5rem; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: zs-spin .7s linear infinite; }
@keyframes zs-spin { to { transform: rotate(360deg); } }

/* smooth change between pages instead of a white flash (Chrome, Edge, Safari 18+); bottom menu stays put */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
.handheld-toolbar { view-transition-name: zs-toolbar; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }