/*-----------------------------------
Sold-Out Product Styling for SureCart
-----------------------------------*/
/* Fade sold-out products only in the grid/list, not on single product page */
.sc-product-item.suredrop-sc-sold-out img {
    opacity: var(--suredrop-fade-sold-out-opacity, 0.5); /* fallback to 50% opacity */
    filter: var(--suredrop-fade-sold-out-filter, grayscale(50%)); /* optional: adds a gray look to emphasize sold-out */
    transition: opacity 0.5s ease, filter 0.5s ease; /* smooth fade */
}


.suredrop-sc-sold-out::after {
    display: var(--suredrop-sold-out-badge-display);
    content: "Sold Out";
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--suredrop-sold-out-color);
    color: #fff;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 6px;
    z-index: 10;
}


/*-----------------------------------
Low Stock Product Styling for SureCart
-----------------------------------*/

/* 1) Make the container positioned */
.suredrop-sc-stock-1.suredrop-collection-status-active { 
  position: relative; 
}


/* Accessibility: no motion if user prefers */
@media (prefers-reduced-motion: reduce) {
  .suredrop-sc-stock-1.suredrop-collection-status-active::after { animation: none; }
}

/* 2) Shiny badge */
.suredrop-sc-stock-1.suredrop-collection-status-active::after {
    display: var(--suredrop-last-one-badge-display);
    content: "Last One";
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(
        120deg,
        var(--suredrop-last-one-color-1) 20%,
        var(--suredrop-last-one-color-2) 40%,
        var(--suredrop-last-one-color-1) 60%
    );
    background-size: 200% 100%;
    color: #000;
    padding: 4px 8px;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 4px;
    z-index: 10;
    animation: badgeshine 2s linear infinite;
}

/* Keyframes for shiny sweep */
@keyframes badgeshine {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}


/*-----------------------------------
Product Image Hover Effect
-----------------------------------*/
.sc-product-item img {
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.sc-product-item:hover img {
    transform: scale(calc(1 + 0.05 * var(--suredrop-product-zoom-enabled)));
    box-shadow: 0 10px 20px rgba(0, 0, 0, calc(0.15 * var(--suredrop-product-zoom-enabled)));
    filter: brightness(calc(1 + 0.05 * var(--suredrop-product-zoom-enabled)));
}


/*-----------------------------------
Product Image Collection Status Styles
-----------------------------------*/
.suredrop-collection-status-upcoming::after {
    display: var(--suredrop-available-soon-badge-display);
    content: "Available Soon" !important;
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, var(--suredrop-available-soon-gradient-1), var(--suredrop-available-soon-gradient-2)); /* subtle dark gradient */
    color: #fff !important;
    padding: 4px 10px;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 6px;
    z-index: 10;

    /* Soft elegant glow */
    box-shadow: 0 0 6px rgba(88, 88, 88, 0.5), 0 0 10px rgba(136, 136, 136, 0.3);

    /* Gentle pulsing effect */
    animation: suredrop-pulse-elegant 2.5s infinite alternate;
}

@keyframes suredrop-pulse-elegant {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.03);
        opacity: 0.95;
    }
}

/* Radial fade for upcoming products */
.sc-product-item.suredrop-collection-status-upcoming img {
    opacity: 1;

    /* Stronger fade: smaller clear center, more edge fade */
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) var(--suredrop-fade-available-soon-opacity), rgba(0,0,0,0) 100%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: cover;

    mask-image: radial-gradient(circle, rgba(0,0,0,1) var(--suredrop-fade-available-soon-opacity), rgba(0,0,0,0) 100%);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;

    /* Optional: smooth transition on hover */
    transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

/*-----------------------------------
Hide Price Based on Collection Status
-----------------------------------*/
.suredrop-collection-status-upcoming .wp-block-surecart-product-list-price {
    display: var(--suredrop-product-price-display-upcoming);
}
.suredrop-collection-status-ended .wp-block-surecart-product-list-price {
    display: var(--suredrop-product-price-display-ended);
}

/*-----------------------------------
Fade in price to avoid it being shown then hidden
-----------------------------------*/
/* Initially hide all prices in loop */
.sc-product-item .wp-block-surecart-product-list-price {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Fade in prices after js processing */
.sc-product-item.suredrop-sc-processed .wp-block-surecart-product-list-price {
    opacity: 1;
}