/*
 * Falcon Shop Boost — shopping feedback styles (see shop-ux.js).
 * Every class is prefixed fsx- so a theme can restyle it without colliding with anything.
 */

:root {
    --fsx-skel-base: #eef1f5;
    --fsx-skel-shine: #f8fafc;
    --fsx-done: #10b981;
    --fsx-fail: #e11d48;
}

/* ---- Button states ------------------------------------------------------------------------ */
.fsx-btn { position: relative; }
.fsx-btn.is-busy,
.fsx-btn.is-done { color: transparent !important; pointer-events: none; }
.fsx-btn.is-busy > *,
.fsx-btn.is-done > * { visibility: hidden; }

.fsx-btn.is-busy::after,
.fsx-btn.is-done::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    box-sizing: border-box;
}
.fsx-btn.is-busy::after {
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: fsx-spin .7s linear infinite;
}
/* A light button (white background, coloured text) gets a spinner in its own text colour. */
.fsx-btn.is-busy.bg-white::after { border-color: rgba(0, 0, 0, .12); border-top-color: currentColor; }

.fsx-btn.is-done { background-color: var(--fsx-done) !important; border-color: var(--fsx-done) !important; }
.fsx-btn.is-done::after {
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: fsx-pop .35s cubic-bezier(.34, 1.56, .64, 1);
}

.fsx-btn.is-fail {
    background-color: var(--fsx-fail) !important;
    border-color: var(--fsx-fail) !important;
    color: #fff !important;
    animation: fsx-shake .45s ease;
}

@keyframes fsx-spin { to { transform: rotate(360deg); } }
@keyframes fsx-pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fsx-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(2px); }
}

/* ---- Fly to cart + badge bump ----------------------------------------------------------------- */
.fsx-flyer {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .28);
    will-change: transform, opacity;
}
.fsx-flyer--dot { border-radius: 50%; background: var(--primary, #0091ea); }

.fsx-bump { animation: fsx-bump .5s cubic-bezier(.34, 1.56, .64, 1); }
.fsx-nudge { animation: fsx-nudge .5s ease; }
@keyframes fsx-bump {
    0% { transform: scale(1); }
    40% { transform: scale(1.6); }
    100% { transform: scale(1); }
}
@keyframes fsx-nudge {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-12deg); }
    50% { transform: rotate(10deg); }
    75% { transform: rotate(-5deg); }
}

/* ---- Free shipping bar ------------------------------------------------------------------------- */
.fsx-ship { font-size: 13px; line-height: 1.4; color: #475569; }
.fsx-ship--cart {
    margin-bottom: 24px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    font-size: 14px;
}
.fsx-ship__text { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.fsx-ship__text strong { color: #0f172a; font-weight: 700; }
.fsx-ship__icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--primary, #0091ea); }
.fsx-ship__track { height: 6px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.fsx-ship__fill {
    height: 100%;
    border-radius: inherit;
    background: var(--primary, #0091ea);
    transition: width .8s cubic-bezier(.22, 1, .36, 1);
}
.fsx-ship.is-reached .fsx-ship__icon { color: var(--fsx-done); }
.fsx-ship.is-reached .fsx-ship__fill { background: var(--fsx-done); }
.fsx-ship--celebrate .fsx-ship__icon { animation: fsx-bump .6s cubic-bezier(.34, 1.56, .64, 1) .5s; }
.fsx-ship--celebrate .fsx-ship__fill {
    background-image: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: fsx-sheen 1.2s ease .6s 2;
}
@keyframes fsx-sheen { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* ---- Skeletons ----------------------------------------------------------------------------------- */
.fsx-skel {
    display: block;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--fsx-skel-base) 25%, var(--fsx-skel-shine) 45%, var(--fsx-skel-base) 65%);
    background-size: 300% 100%;
    animation: fsx-shimmer 1.3s linear infinite;
}
.fsx-skel-list { padding: 4px 0; }
.fsx-skel-row { display: flex; gap: 12px; padding: 16px 20px; }
.fsx-skel--thumb { width: 64px; height: 64px; flex-shrink: 0; border-radius: 6px; }
.fsx-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.fsx-skel--line { height: 12px; }
.fsx-skel--short { width: 45%; }
@keyframes fsx-shimmer { from { background-position: 100% 0; } to { background-position: -200% 0; } }

/* Product images: the frame shimmers until the picture has loaded, then it fades in sharp.
   html.fsx-skel is set only when the setting is on, and a failsafe reveals the image anyway
   if the script never runs. */
html.fsx-skel .fsx-media:not(.is-loaded) {
    background-image: linear-gradient(90deg, var(--fsx-skel-base) 25%, var(--fsx-skel-shine) 45%, var(--fsx-skel-base) 65%);
    background-size: 300% 100%;
    animation: fsx-shimmer 1.3s linear infinite;
}
html.fsx-skel .fsx-media:not(.is-loaded) img { opacity: 0; animation: fsx-failsafe 0s linear 3s forwards; }
html.fsx-skel .fsx-media.is-loaded img { animation: fsx-img-in .6s ease-out; }
@keyframes fsx-img-in {
    from { opacity: 0; filter: blur(12px); transform: scale(1.04); }
    to { filter: blur(0); transform: scale(1); }
}
@keyframes fsx-failsafe { to { opacity: 1; } }

/* Filtering the shop: the cards turn into their own skeleton while the next page loads, in
   place of the plain fade product-filters.css gives them. */
html.fsx-skel #falcon-results[data-falcon-busy] { opacity: 1; }
html.fsx-skel #falcon-results[data-falcon-busy] .fsx-media img,
html.fsx-skel #falcon-results[data-falcon-busy] .fsx-media > span { visibility: hidden; }
html.fsx-skel #falcon-results[data-falcon-busy] .fsx-media,
html.fsx-skel #falcon-results[data-falcon-busy] .fsx-line,
html.fsx-skel #falcon-results[data-falcon-busy] .fsx-actions > * {
    color: transparent !important;
    border-color: transparent !important;
    background: linear-gradient(90deg, var(--fsx-skel-base) 25%, var(--fsx-skel-shine) 45%, var(--fsx-skel-base) 65%) !important;
    background-size: 300% 100% !important;
    animation: fsx-shimmer 1.3s linear infinite;
    border-radius: 4px;
}
html.fsx-skel #falcon-results[data-falcon-busy] .fsx-line * { color: transparent !important; visibility: hidden; }
html.fsx-skel #falcon-results[data-falcon-busy] .fsx-line { width: fit-content; min-width: 45%; }
html.fsx-skel #falcon-results[data-falcon-busy] .fsx-card .absolute.bottom-3 { visibility: hidden; }

/* ---- Reduced motion: states still show, nothing moves. ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .fsx-btn.is-busy::after { animation-duration: 1.6s; }
    .fsx-btn.is-done::after,
    .fsx-btn.is-fail,
    .fsx-bump,
    .fsx-nudge,
    .fsx-ship--celebrate .fsx-ship__icon,
    .fsx-ship--celebrate .fsx-ship__fill,
    html.fsx-skel .fsx-media.is-loaded img { animation: none; }
    .fsx-ship__fill { transition: none; }
    .fsx-skel,
    html.fsx-skel .fsx-media:not(.is-loaded),
    html.fsx-skel #falcon-results[data-falcon-busy] .fsx-media,
    html.fsx-skel #falcon-results[data-falcon-busy] .fsx-line,
    html.fsx-skel #falcon-results[data-falcon-busy] .fsx-actions > * { animation: none; }
}