/* =============================================
   Carousel Cover-Flow Patch
   Loaded AFTER style.css?v=11 — adds the
   "center sharp, neighbors blurred peek" look
   without touching the working main stylesheet.
   ============================================= */

   .ic-carousel {
    /* one knob controls slide width on every breakpoint */
    --ic-item-w: 200px;
    /* cap viewport so neighbors land at half-visible width naturally */
    max-width: min(100%, calc(var(--ic-item-w) * 2));
    margin-inline: auto;
}
@media (max-width: 600px) { .ic-carousel { --ic-item-w: 170px; } }
@media (max-width: 400px) { .ic-carousel { --ic-item-w: 150px; } }

/* Track: scroll-snap so every snap target lands centered in the viewport.
   padding-inline gives the first/last items room to actually reach center. */
.ic-carousel__track {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    padding-inline: calc(50% - var(--ic-item-w) / 2) !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.ic-carousel__track::-webkit-scrollbar {
    display: none !important;
}

/* Each card: fixed width + center snap.
   Default state = neighbor look (blur + dim + slightly shrunk). */
.ic-carousel__item {
    flex: 0 0 var(--ic-item-w) !important;
    width: var(--ic-item-w) !important;
    scroll-snap-align: center !important;
    transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease !important;
    filter: blur(5px) brightness(0.88);
    opacity: 0.55;
    transform: scale(0.92);
    cursor: pointer;
}

/* Active card: sharp, full opacity, full size */
.ic-carousel__item.active {
    filter: none !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    z-index: 2;
    cursor: default;
}

/* Remove (X) only visible on the active card —
   prevents accidental delete from a blurred neighbor. */
.ic-carousel__item .ic-carousel__remove {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.ic-carousel__item.active .ic-carousel__remove {
    opacity: 1;
    pointer-events: auto;
}

/* "Keeping JPG, PNG" tag styling (since the Original button is gone,
   this tag is the visual cue that we're keeping the input format). */
.ic-format-tag {
    font-size: 10px;
    font-weight: 600;
    color: #15803d;
    margin-left: 6px;
    padding: 2px 8px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 10px;
    letter-spacing: 0.3px;
    display: inline-block;
    vertical-align: middle;
}