.boxfc{
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 999999;
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    gap: 12px;

    text-decoration: none;
    color: #0b1b1c;
    border-radius: 999px;
    padding: 12px 14px 12px 12px;

    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    overflow: hidden;
    transform: translateZ(0);

    /* fallback tła (jeśli SVG nie dojdzie) */
    background: linear-gradient(135deg, #9CC31A, #37B6B8);
}

/* tło SVG z pliku */
.boxfc__bg{
    position:absolute;
    inset:0;
    background: center / cover no-repeat;
    opacity: 1;
    pointer-events:none;
}

/* KRYTYCZNE: gdy pusty koszyk -> znika całkiem */
.boxfc.is-hidden{
    display: none !important;
}

.boxfc__icon{
    position: relative;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(6px);
}

.boxfc__icon svg{
    fill: currentColor;
    display:block;
}

.boxfc__meta{
    position: relative;
    display: grid;
    gap: 2px;
    min-width: 150px;
}

.boxfc__title{
    font-size: 13px;
    font-weight: 800;
    line-height: 1.1;
}

.boxfc__total{
    font-size: 13px;
    font-weight: 700;
    opacity: .92;
    line-height: 1.1;
}

.boxfc__badge{
    position: relative;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    display: grid;
    place-items: center;

    background: rgba(0,0,0,.72);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

/* =========================
   DARK MODE (theme-nowosci / theme-promocje)
   - spójne z dark-bg.svg + ogólnie ciemniejszy UI
========================= */
body.theme-nowosci .boxfc,
body.theme-promocje .boxfc{
    color: rgba(255,255,255,.92);
    /* fallback tła dla dark, gdyby SVG nie dojechało */
    background: linear-gradient(135deg, #0F1418, #1E2A33);
}

body.theme-nowosci .boxfc__icon,
body.theme-promocje .boxfc__icon{
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(6px);
}

body.theme-nowosci .boxfc__badge,
body.theme-promocje .boxfc__badge{
    background: rgba(255,255,255,.22);
    color: rgba(255,255,255,.95);
}

/* MOBILE: mniejsze i zgrabniejsze */
@media (max-width: 520px){
    .boxfc{
        right: 10px;
        bottom: 10px;
        gap: 10px;
        padding: 9px 10px 9px 9px;
    }

    .boxfc__icon{
        width: 36px;
        height: 36px;
    }

    .boxfc__icon svg{
        width: 20px;
        height: 20px;
    }

    .boxfc__meta{
        min-width: 0;
    }

    .boxfc__title{
        font-size: 12px;
        font-weight: 800;
    }

    .boxfc__total{
        font-size: 12px;
    }

    .boxfc__badge{
        min-width: 24px;
        height: 24px;
        font-size: 11px;
        padding: 0 7px;
    }
}

:root{
    --boxfc-safe: env(safe-area-inset-bottom, 0px);
    --boxfc-gap: 12px;
    --boxfc-reserve: 88px; /* ile miejsca rezerwujemy na dole */
}

/* przycisk niech uwzględnia safe-area (iPhone) */
.boxfc{
    bottom: calc(var(--boxfc-gap) + var(--boxfc-safe));
}

/* gdy przycisk jest aktywny -> dociążamy dół strony, żeby footer był widoczny */
body.has-boxfc{
    padding-bottom: calc(var(--boxfc-reserve) + var(--boxfc-safe));
}

@media (max-width: 520px){
    :root{
        --boxfc-gap: 40px;
        --boxfc-reserve: 76px; /* mniejsze na mobile */
    }
}

.boxfc.is-bounce{
    animation: boxfc-bounce 560ms cubic-bezier(.2,.9,.2,1);
    will-change: transform;
}

@keyframes boxfc-bounce{
    0%   { transform: translate3d(0,0,0) scale(1); }
    18%  { transform: translate3d(0,-8px,0) scale(1.07); }  /* jump up */
    42%  { transform: translate3d(0,0,0)  scale(0.98); }    /* land */
    64%  { transform: translate3d(0,-3px,0) scale(1.02); }  /* small rebound */
    100% { transform: translate3d(0,0,0)  scale(1); }
}