@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.htmx-indicator { opacity: 0; transition: opacity 150ms ease-in; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* Subtle fade-in for swapped content */
#product-list.htmx-swapping { opacity: 0.4; transition: opacity 120ms ease-in; }

/* Cart badge + sticky CTA: brief pop on update */
@keyframes pop-in {
    0% { transform: scale(1); }
    30% { transform: scale(1.08); }
    100% { transform: scale(1); }
}
#cart-badge, #sticky-cta > div {
    animation: pop-in 220ms ease-out;
}

/* HTMX swap transition on sticky CTA for smoother appear/disappear */
#sticky-cta.htmx-swapping > div { opacity: 0; transform: translateY(8px); }
#sticky-cta > div { transition: opacity 180ms ease-out, transform 180ms ease-out; }

/* Shopping mode: tickable items */
.shop-item { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.shop-check {
    width: 28px; height: 28px; border-radius: 999px;
    border: 2px solid #cbd5e1;
    background: #fff;
    position: relative;
    transition: transform 120ms ease-out, background 120ms, border-color 120ms;
}
.shop-check:hover { border-color: #94a3b8; }
.shop-item:active .shop-check { transform: scale(0.92); }
.shop-item--done .shop-check {
    background: #12935a;
    border-color: #12935a;
}
.shop-item--done .shop-check::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
}
.shop-item--done .shop-label {
    text-decoration: line-through;
    opacity: 0.55;
}