/* ─────────────────────────────────────────────────────────
   Bulli CTA Cart v3.0
   Animation 3: Cart-Box oben, Conveyor-Cards unten,
   active Card mit schwarzem Outline, fliegt nach oben in den Cart.
   ───────────────────────────────────────────────────────── */

.bulli-cta-cart {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    user-select: none;
}


/* ── Cart-Box (vertikal mittig, rechts) ─────────────── */
.bulli-cta-cart__cart-box {
    position: absolute;
    top: 50%;
    right: 8%;
    margin-top: -65px;
    width: 130px;
    background: #fff;
    border: 1.5px solid var(--bk-border, #e8e8e8);
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    transition:
        transform 0.25s cubic-bezier(0.34, 1.6, 0.64, 1),
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    z-index: 10;
}

/* Beim "Atmen": schwarzer Border + verstärkter Shadow */
.bulli-cta-cart__cart-box.is-bouncing {
    transform: scale(1.08);
    border-color: var(--e-global-color-text);
    box-shadow: 0 0 0 1px var(--e-global-color-text), 0 8px 24px rgba(0, 0, 0, 0.28);
}

.bulli-cta-cart__cart-icon {
    width: 100%;
    aspect-ratio: 1;
    background: #f5f5f5;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1c1c1c;
    padding: 14px;
}

.bulli-cta-cart__cart-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.bulli-cta-cart__counter {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #c00;
    color: #fff;
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition:
        opacity 0.25s ease,
        transform 0.3s cubic-bezier(0.34, 1.6, 0.64, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 11;
}

.bulli-cta-cart__counter.is-visible {
    opacity: 1;
    transform: scale(1);
}


/* ── Conveyor-Slot ─────────────────────────────────────── */
/* Cards vertikal mittig, gleiche Y-Achse wie Cart-Box.
   Card width 280, höher als die Cart-Box → margin-top für Mitte. */
.bulli-cta-cart-slot {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -110px;       /* halbe Card-Höhe für vertikale Mitte */
    transform-origin: 50% 50%;
    transition:
        transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.45s ease;
    will-change: transform, opacity;
}

/* Card-Komponente */
.bulli-cta-cart-card {
    width: 200px;
    background: #fff;
    border: 1.5px solid var(--bk-border, #e8e8e8);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.bulli-cta-cart-card__preview {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: #f5f5f5;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.bulli-cta-cart-card__product {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.bulli-cta-cart-card__product svg {
    width: 100%;
    height: 100%;
}

.bulli-cta-cart-card__overlay {
    position: absolute;
    pointer-events: none;
}

.bulli-cta-cart-card__overlay svg {
    width: 100%;
    height: auto;
    display: block;
}

.bulli-cta-cart-card__overlay .elementor,
.bulli-cta-cart-card__overlay .elementor-section-wrap,
.bulli-cta-cart-card__overlay .elementor-section,
.bulli-cta-cart-card__overlay .elementor-container,
.bulli-cta-cart-card__overlay .elementor-widget-wrap,
.bulli-cta-cart-card__overlay .elementor-widget {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.bulli-cta-cart-card__label {
    font-family: var(--e-global-typography-accent-font-family, 'Roboto Mono'), Sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #555;
    line-height: 1.3;
    margin: 0;
}


/* ── Slot-Positionen ──────────────────────────────────
   Card-Width 200, Gap 15px, alle 30% (= 60px) weiter rechts. */
.bulli-cta-cart-slot[data-pos="off-left"] {
    transform: translate(-180%, 0);
    opacity: 0;
    z-index: 1;
}

.bulli-cta-cart-slot[data-pos="0"] {
    transform: translate(-73%, 0);
    opacity: 1;
    z-index: 2;
}

.bulli-cta-cart-slot[data-pos="1"] {
    transform: translate(34%, 0);
    opacity: 1;
    z-index: 3;
}

/* Pos 2 = "active": rechtmöglichste Position vor Cart */
.bulli-cta-cart-slot[data-pos="2"] {
    transform: translate(142%, 0);
    opacity: 1;
    z-index: 4;
}

/* Pool: tiefer hinter off-left versteckt */
.bulli-cta-cart-slot[data-pos="pool"] {
    transform: translate(-230%, 0);
    opacity: 0;
    z-index: 0;
}

/* Fly: keyframe — Card fliegt horizontal in die Cart-Box (gleiche Y-Achse) */
.bulli-cta-cart-slot[data-pos="fly"] {
    animation: cart-fly 0.75s cubic-bezier(0.5, 0, 0.6, 1) forwards;
    z-index: 5;
}

@keyframes cart-fly {
    0% {
        transform: translate(142%, 0) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(185%, -25%) scale(0.55);
        opacity: 1;
    }
    100% {
        transform: translate(225%, 0) scale(0.15);
        opacity: 0;
    }
}


/* ── Reduced Motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bulli-cta-cart-slot,
    .bulli-cta-cart__cart-box,
    .bulli-cta-cart__counter {
        animation: none !important;
        transition: opacity 0.2s ease !important;
    }
}


/* ── Mobile (16:9 Wrapper, kleinere Cards die in die Höhe passen) ── */
@media (max-width: 767px) {
    .bulli-cta-cart-card { width: 95px; padding: 7px; }
    .bulli-cta-cart-card__label { font-size: 9px; }
    .bulli-cta-cart-slot { margin-top: -65px; }    /* halbe Card-Höhe */
    .bulli-cta-cart__cart-box {
        width: 60px;
        padding: 6px;
        margin-top: -34px;
        right: 4%;
    }
    .bulli-cta-cart__counter {
        width: 22px;
        height: 22px;
        font-size: 10px;
        top: -8px;
        right: -8px;
    }

    /* Mobile Slot-Positionen — passend zu 95px Card auf ~360px-Phone */
    .bulli-cta-cart-slot[data-pos="off-left"] { transform: translate(-220%, 0); }
    .bulli-cta-cart-slot[data-pos="0"]        { transform: translate(-110%, 0); }
    .bulli-cta-cart-slot[data-pos="1"]        { transform: translate(10%, 0); }
    .bulli-cta-cart-slot[data-pos="2"]        { transform: translate(130%, 0); }
    .bulli-cta-cart-slot[data-pos="pool"]     { transform: translate(-280%, 0); }

    .bulli-cta-cart-slot[data-pos="fly"] {
        animation: cart-fly-mobile 0.75s cubic-bezier(0.5, 0, 0.6, 1) forwards;
    }

    /* Mobile Fly: zielt auf Cart-Box (kürzerer Translate-Weg, Card schrumpft) */
    @keyframes cart-fly-mobile {
        0% {
            transform: translate(130%, 0) scale(1);
            opacity: 1;
        }
        50% {
            transform: translate(195%, -18%) scale(0.5);
            opacity: 1;
        }
        100% {
            transform: translate(245%, 0) scale(0.12);
            opacity: 0;
        }
    }
}