/**
 * Flyers Price Form Image Carousel Styles
 * Extracted from style.css for better maintainability
 *
 * NOTE: This file includes product-scoped animation classes suffixed with
 * a unique numeric token to avoid collisions across products.
 * SUFFIX: 74839256410293847
 */

/* Slide-out / Slide-in animation used when changing the preview image */
@keyframes _ccf_slide-out-left {
    0% {
        transform: translateX(0%);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes _ccf_slide-in-right {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

/* Existing (global) slide classes - image JS relies on these names */
#ccf-isolated-container ._ccf_slide-out {
    animation: _ccf_slide-out-left 0.38s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
}
#ccf-isolated-container ._ccf_slide-in {
    animation: _ccf_slide-in-right 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Z-index layering for form components */
#ccf-isolated-container {
    position: relative;
    z-index: 50;
}

/* Container for form options */
.ccf-form-options-container { position: relative; z-index: 30; }

/* Actual form background box */
.ccf-form-container { position: relative; z-index: 35; }

/* Small transform while clicking size to give feedback */
#ccf-isolated-container .ccf-size-clicked {
    transform: scale(1.02);
    transition: transform 0.25s ease;
}

/* Text animation keyframes (re-usable) */
@keyframes _ccf_text-out {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes _ccf_text-in {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Original (non-suffixed) text classes kept for compatibility */
#ccf-isolated-container ._ccf_text-out { animation: _ccf_text-out 0.36s ease forwards; }
#ccf-isolated-container ._ccf_text-in  { animation: _ccf_text-in  0.36s ease forwards; }

/* Product-scoped suffixed text classes to avoid collisions */
#ccf-isolated-container ._ccf_text-out-74839256410293847 { animation: _ccf_text-out 0.36s ease forwards !important; }
#ccf-isolated-container ._ccf_text-in-74839256410293847  { animation: _ccf_text-in  0.36s ease forwards !important; }

/* Container that holds the title + subtitle under the product image */
#ccf-isolated-container .ccf-image-text-below-image {
    display: inline-block;
    text-align: center;
    will-change: opacity, transform;
    box-sizing: border-box;
    max-width: 360px;
    padding: 10px 14px;
    margin: 12px auto 0;
    background: transparent;
    border-radius: 12px;
    box-shadow: none;
    color: #0f172a;
    -webkit-text-fill-color: initial !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

/* Ensure descendants also display normal text color */
#ccf-isolated-container .ccf-image-text-below-image,
#ccf-isolated-container .ccf-image-text-below-image * {
    -webkit-text-fill-color: #0f172a !important;
    color: #0f172a !important;
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
}

/* subtle lift when hovering or focusing the caption area (keyboard accessibility) */
#ccf-isolated-container .ccf-image-text-below-image:hover,
#ccf-isolated-container .ccf-image-text-below-image:focus-within {
    transform: translateY(-4px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 250, 255, 0.80));
}

/* Title styling (caption) - override to support JS shrink-to-fit */
#ccf-isolated-container .ccf-image-text-below-image .ccf-product-category-title {
    margin: 0;
    color: #0f172a !important;
    font-weight: 800;
    font-size: 20px;
    line-height: 1.12;
    text-shadow: none !important;
    white-space: normal; /* fallback - JS will enforce nowrap when running shrinker */
    word-break: break-word;
    overflow-wrap: break-word;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    opacity: 0.98;
}

/* Big label under image */
#ccf-isolated-container .ccf-image-text-below-image .ccf-form-title {
    margin: 6px 0 0;
    color: #063970 !important;
    font-weight: 800;
    font-size: 15px;
    line-height: 1.15;
    text-shadow: none !important;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    display: inline-block;
    padding: 6px 10px;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    letter-spacing: 0.4px;
}

/* Make sure the main image size is constrained so caption changes don't resize it */
#ccf-isolated-container .ccf-product-image-container img,
#ccf-isolated-container .ccf-product-main-image {
    max-width: 420px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Highest-specificity fixes to ensure caption is readable */
#ccf-isolated-container .ccf-product-image-container,
#ccf-isolated-container .ccf-product-image-container .ccf-image-text-below-image,
#ccf-isolated-container .ccf-product-image-container .ccf-image-text-below-image * {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    text-shadow: none !important;
}

/* Remove background on the image container and repurpose colors for caption text */
#ccf-isolated-container .ccf-product-image-container {
    background: transparent !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    color: inherit !important;
    text-shadow: none !important;
}

/* Scoped gradient text styles for Bulk Flyers page only */
#ccf-isolated-container .ccf-product-image-container .ccf-image-text-below-image p.ccf-product-category-title {
    color: #7c3aed !important;
    background-image: linear-gradient(90deg, #6d28d9, #a78bfa) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 10px 24px rgba(109, 40, 217, 0.28), 0 2px 6px rgba(17, 24, 39, 0.12) !important;
}

/* Description under the title */
#ccf-isolated-container .ccf-product-image-container .ccf-image-text-below-image h2.ccf-form-title {
    color: #9ca3af !important;
    background-image: linear-gradient(90deg, #9ca3af, #c7ced9) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 8px 18px rgba(17, 24, 39, 0.12) !important;
}

/* Form section title on the right column ONLY: same purple gradient treatment
   Scoped with a unique class to avoid affecting other products:
   class: _ff_form-title-gradient-74839256410293847 */
#ccf-isolated-container .ccf-form-options-container .ccf-form-container>h1.ccf-form-title._ff_form-title-gradient-74839256410293847 {
    color: #7c3aed !important;
    background-image: linear-gradient(90deg, #6d28d9, #a78bfa) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 10px 24px rgba(109, 40, 217, 0.28), 0 2px 6px rgba(17, 24, 39, 0.12) !important;
}

/* Hover zoom effect (product-scoped suffixed classes) */
/* The JS will toggle these suffixed classes to control enter/leave easing precisely */
#ccf-isolated-container .ccf-product-main-image {
    transition: transform 1s cubic-bezier(0.2, 0.9, 0.2, 1);
}
#ccf-isolated-container .ccf-product-main-image.ccf-hover-zoom-in-74839256410293847 {
    transform: scale(1.12) !important;
    z-index: 20 !important;
}
#ccf-isolated-container .ccf-product-main-image.ccf-hover-zoom-out-74839256410293847 {
    transform: scale(1) !important;
    transition: transform 600ms cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* Fixed-width carousel column on desktop, full-width on mobile */
@media (min-width: 900px) {
    #ccf-isolated-container .ccf-product-image-container {
        width: 450px;
        flex: 0 0 450px;
        max-width: 450px;
    }
}
@media (max-width: 899px) {
    #ccf-isolated-container .ccf-product-image-container {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Force single-line layout for caption title with NO ELLIPSIS (clip).
   JS shrinker will reduce font-size to fit the container width automatically. */
#ccf-isolated-container .ccf-image-text-below-image .ccf-product-category-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    max-width: 100% !important;
}

/* Prefers reduced motion: minimize animations for accessibility */
@media (prefers-reduced-motion: reduce) {
    #ccf-isolated-container ._ccf_slide-out,
    #ccf-isolated-container ._ccf_slide-in,
    #ccf-isolated-container ._ccf_text-out,
    #ccf-isolated-container ._ccf_text-in,
    #ccf-isolated-container ._ccf_text-out-74839256410293847,
    #ccf-isolated-container ._ccf_text-in-74839256410293847,
    #ccf-isolated-container .ccf-product-main-image {
        animation-duration: 0.001s !important;
        transition-duration: 0.01s !important;
    }
}

/* CCF-UPLOADER-FIX-START */
#ccf-isolated-container .results-section {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    justify-content: center !important;
    align-items: center !important;
    padding-top: 10px !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow-y: visible !important;
    transition: none !important;
}
#ccf-isolated-container .results-section.active {
    max-height: none !important;
    opacity: 1 !important;
    overflow-y: visible !important;
}
#ccf-isolated-container .results-section > .file-result-item,
#ccf-isolated-container .file-result-item {
    width: 100% !important;
    max-width: 480px !important;
    box-sizing: border-box !important;
    margin: 6px auto !important;
    float: none !important;
    clear: both !important;
}
#ccf-isolated-container .results-section * {
    float: none !important;
    clear: both !important;
}
/* CCF-UPLOADER-FIX-END */