/* ====== COT – Upsell Scroller (v1.3.0) ====== */

/* Root/wrap never force page width */
.cot-upsell-root,
.cot-upsell-wrap {
    max-width: 100%;
    overflow: visible;
    /* don't clip child scroller */
}

/* Title */
.cot-upsell-h {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 10px;
    color: #253d4e;
}

/* The horizontal scroller */
.cot-upsell-track {
    display: flex;
    gap: 12px;
    /* space between cards */
    padding: 0 4px 10px;
    /* bottom room for scrollbar */
    overflow-x: auto;
    /* KEY: enable horizontal scroll */
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    /* iOS momentum */
    touch-action: pan-x;
    /* allow horizontal swipe even if libs listen */
    scroll-snap-type: x proximity;
    /* nice-to-have */
    position: relative;
}

/* Make sure nothing inside expands the row unexpectedly */
.cot-upsell-track * {
    max-width: 100%;
    box-sizing: border-box;
}

.cot-upsell-track img {
    display: block;
    width: 100%;
    height: auto;
}

/* Card */
.cot-upsell-card {
    flex: 0 0 auto;
    /* fixed-width items in a horizontal flow */
    width: 72vw;
    /* mobile default: ~2 per view */
    max-width: 300px;
    /* cap growth */
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 10px;
    padding: 12px;
}

/* Card parts */
.cot-upsell-media {
    display: block;
    border-radius: 8px;
    overflow: hidden;
}

.cot-upsell-body {
    margin-top: 8px;
}

.cot-upsell-title-sm {
    font-size: .95rem;
    margin: 0 0 6px;
    line-height: 1.2;
}

.cot-upsell-price {
    font-size: .9rem;
}

/* Actions */
.cot-upsell-actions {
    margin-top: 10px;
}

.cot-btn {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 10px 12px;
    border-radius: 8px;
    background: #3bb77e !important;
    color: #ffffff !important;
}

/* ---- Desktop sizing ---- */
@media (min-width: 768px) {
    .cot-upsell-track {
        overflow-x: visible;
    }

    /* desktop usually fits; keep clean */
    .cot-upsell-card {
        width: 165px;
    }

    /* standard card width */
}

/* Control visible cards via classes set from shortcode  */
/* Desktop: per-1..per-6 set a max container width hint (not mandatory) */
@media (min-width: 992px) {
    .cot-upsell-track.per-1 {
        --per: 1;
    }

    .cot-upsell-track.per-2 {
        --per: 2;
    }

    .cot-upsell-track.per-3 {
        --per: 3;
    }

    .cot-upsell-track.per-4 {
        --per: 4;
    }

    .cot-upsell-track.per-5 {
        --per: 5;
    }

    .cot-upsell-track.per-6 {
        --per: 6;
    }

    /* When there's room, cards will line up and no scrollbar is needed */
    .cot-upsell-track[style*="--per"] .cot-upsell-card {
        width: calc((100% - (var(--per) - 1) * 12px) / var(--per));
        max-width: none;
    }
}

/* Mobile explicit count via perm-1..perm-4 */
@media (max-width: 991.98px) {
    .cot-upsell-track.perm-1 .cot-upsell-card {
        width: 92vw;
    }

    .cot-upsell-track.perm-2 .cot-upsell-card {
        width: 38vw;
    }

    .cot-upsell-track.perm-3 .cot-upsell-card {
        width: 50vw;
    }

    .cot-upsell-track.perm-4 .cot-upsell-card {
        width: 40vw;
    }
}

/* Safety: if any ancestor or sticky header overlays, let scroller still receive touches */
.cot-upsell-track {
    z-index: 2;
}

.cot-upsell-track::before,
.cot-upsell-track::after {
    content: "";
    flex: 0 0 1px;
}

/* avoid clamp on ends */

/* Optional: thin scrollbar on desktop only */
@media (min-width: 1024px) {
    .cot-upsell-track {
        scrollbar-width: thin;
    }

    .cot-upsell-track::-webkit-scrollbar {
        height: 6px;
    }
}

/* === Continuous shiny effect for CTA === */
.cot-upsell-actions .cot-btn {
    position: relative;
    overflow: hidden;
    /* clip the shine */
}

/* the “shine” */
.cot-upsell-actions .cot-btn::after {
    content: "";
    position: absolute;
    top: -150%;
    left: -50%;
    width: 50%;
    height: 400%;
    transform: rotate(25deg);
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .35) 50%,
            rgba(255, 255, 255, 0) 100%);
    animation: cotShine 2.5s linear infinite;
    pointer-events: none;
}

/* pause shine when the button becomes a link to cart */
.cot-upsell-actions .cot-btn.added::after {
    display: none;
}

@keyframes cotShine {
    0% {
        transform: translateX(-140%) rotate(25deg);
    }

    100% {
        transform: translateX(240%) rotate(25deg);
    }
}

/* be nice to users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cot-upsell-actions .cot-btn::after {
        animation: none;
    }
}

/* Hide WooCommerce's default appended "View cart" link inside our upsell block */
.cot-upsell-root .cot-upsell-track .cot-upsell-actions a.added_to_cart.wc-forward {
    display: none !important;
}