/* Optional: Import Inter font if not loaded by your theme */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); */

#ccf-isolated-container .ccf-body-wrapper {
    font-family: 'Inter', sans-serif;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    box-sizing: border-box;
}

#ccf-isolated-container div,
#ccf-isolated-container span,
#ccf-isolated-container h1,
#ccf-isolated-container p,
#ccf-isolated-container a,
#ccf-isolated-container img,
#ccf-isolated-container form,
#ccf-isolated-container label,
#ccf-isolated-container select,
#ccf-isolated-container textarea,
#ccf-isolated-container button,
#ccf-isolated-container input {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
    background: transparent;
    color: inherit;
}

#ccf-isolated-container button,
#ccf-isolated-container input[type="button"],
#ccf-isolated-container input[type="submit"],
#ccf-isolated-container input[type="file"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#ccf-isolated-container select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#ccf-isolated-container .ccf-main-layout-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center items for mobile view */
    padding: 0.75rem;
    width: 100%;
    max-width: 1600px;
    /* Give a max-width for very large screens */
    margin: 20px auto;
}

#ccf-isolated-container .ccf-product-image-container {
    width: 100%;
    margin-bottom: 1rem;
    text-align: center;
    display: flex;
    /* Use flexbox to center image */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

#ccf-isolated-container .ccf-form-options-container {
    position: relative;
    z-index: 20;
}

#ccf-isolated-container .ccf-product-image-container img {
    /* Show the image at its intrinsic (natural) size by default.
       This prevents forcing it to fill the container. For responsiveness,
       images will still scale down if they exceed their container via
       max-width on the container or page-level rules. */
    width: auto;
    max-width: none;
    height: auto;
    border-radius: 10px;
    box-shadow: none;
    transition: opacity 0.3s ease-in-out;
    display: block;
}

#ccf-isolated-container .ccf-product-image-frame {
    position: relative;
    display: inline-block;
}

#ccf-isolated-container .ccf-rounded-corner-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    padding: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    display: none;
    /* Hidden unless rounded is selected */
    z-index: 5;
    pointer-events: none;
    /* Do not intercept clicks */
}

#ccf-isolated-container .ccf-rounded-corner-badge.show {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#ccf-isolated-container .ccf-rounded-corner-badge svg {
    display: block;
}

/* Rounded-corner badge animations */
#ccf-isolated-container .ccf-rounded-corner-badge {
    will-change: transform, opacity;
}

/* Continuous gentle float when visible (idle state) */
#ccf-isolated-container .ccf-rounded-corner-badge.show:not(.appearing):not(.hiding) {
    animation: ccfBadgeFloat 3.2s ease-in-out infinite alternate;
}

/* Pop-in when becoming visible, then start floating */
#ccf-isolated-container .ccf-rounded-corner-badge.show.appearing {
    animation:
        ccfBadgePopIn 240ms cubic-bezier(0.22, 1, 0.36, 1),
        ccfBadgeFloat 3.2s ease-in-out 240ms infinite alternate;
}

/* Pop-out when hiding (JS removes .show after animation ends) */
#ccf-isolated-container .ccf-rounded-corner-badge.show.hiding {
    animation: ccfBadgePopOut 160ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes ccfBadgeFloat {
    0% {
        transform: translateY(-1.5px);
    }

    100% {
        transform: translateY(1.5px);
    }
}

@keyframes ccfBadgePopIn {
    0% {
        opacity: 0;
        transform: scale(0.78) translateY(-6px);
    }

    60% {
        opacity: 1;
        transform: scale(1.06) translateY(0);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes ccfBadgePopOut {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    100% {
        opacity: 0;
        transform: scale(0.84) translateY(-6px);
    }
}

/* 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;
    }
}

#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;
}

/* Pop-out / Pop-in animation for title changes */
@keyframes _ccf_pop-out-anim {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0.8);
        opacity: 0;
    }
}

@keyframes _ccf_pop-in-anim {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#ccf-isolated-container ._ccf_pop-out {
    animation: _ccf_pop-out-anim 0.38s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
}

#ccf-isolated-container ._ccf_pop-in {
    animation: _ccf_pop-in-anim 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

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

/* New styles for the text block moved below the image */
#ccf-isolated-container .ccf-image-text-below-image {
    text-align: center;
    color: #1a2b48;
    margin-bottom: 1rem;
    /* Add some space below the text */
}

#ccf-isolated-container .ccf-image-text-below-image .ccf-product-category-title {
    /* Match the Business Cards product title style: gradient-filled, uppercase, bold */
    display: block;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.2;
    margin: 0 auto 10px auto;
    padding: 0;
    white-space: pre-wrap;
    /* Allow line breaks from \n in textContent */
    border: 0;
    background: linear-gradient(135deg, #8B9DC3 0%, #DFB3E6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 2px 4px rgba(139, 157, 195, 0.3);
    margin-bottom: 1rem;
}

/* Unique styling for size description text - will not affect any other elements on the page */
#ccf-isolated-container .ccf-image-text-below-image .ccf-size-description-text {
    text-align: center;
    color: #1a2b48;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
    margin: 5px auto 10px auto;
    padding: 0;
    max-width: 300px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-family: 'Inter', sans-serif;
    /* Ensure animation properties work with carousel */
    opacity: 1;
    transform: scale(1);
}


#ccf-isolated-container .ccf-form-container {
    background-image: linear-gradient(to top right, #f9fcff, #f3f7fb);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(60, 90, 130, 0.06), 0 4px 10px rgba(60, 90, 130, 0.03);
    padding: 1.25rem 1.5rem;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    #ccf-isolated-container .ccf-main-layout-container {
        display: grid;
        grid-template-columns: auto 380px 380px;
        /* Image column, form column, price column */
        align-items: flex-start;
        justify-content: center;
        gap: 10px;
        /* The requested 10px gap */
        padding: 1rem;
    }

    #ccf-isolated-container .ccf-product-image-container {
        width: 100%;
        /* Fill the grid area */
        margin-bottom: 0;
        position: sticky;
        top: 7rem;
    }

    #ccf-isolated-container .ccf-form-options-container {
        width: 100%;
        /* Each column takes full width of its grid area */
        margin-bottom: 0;
    }

    #ccf-isolated-container .ccf-price-shipping-container {
        width: 100%;
        /* Each column takes full width of its grid area */
        margin-bottom: 0;
        position: sticky;
        /* Make the shipping section sticky */
        top: 7rem;
        /* Align with the product image */
    }

    #ccf-isolated-container .ccf-form-container {
        margin: 0;
        /* Remove auto margins */
    }
}

#ccf-isolated-container .ccf-form-title {
    color: #1a2b48;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.2rem;
    font-family: 'Inter', sans-serif;
}

#ccf-isolated-container .ccf-share-product-btn {
    background-color: transparent;
    color: #3b82f6;
    font-weight: 500;
    padding: 0.3rem 0;
    border-radius: 5px;
    transition: color 0.3s ease, background-color 0.3s ease;
    display: inline-block;
    margin-bottom: 0.75rem;
    text-decoration: none;
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
}

#ccf-isolated-container .ccf-share-product-btn:hover {
    color: #2563eb;
    background-color: rgba(239, 246, 255, 0.7);
}

#ccf-isolated-container .ccf-form-label {
    display: block;
    color: #4a5c79;
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    position: relative;
    font-family: 'Inter', sans-serif;
}

#ccf-isolated-container .ccf-form-select {
    width: 100%;
    padding: 0.55rem 2.8rem 0.55rem 1rem;
    border: 1px solid #D1D5DB;
    border-radius: 9999px;
    background-color: #ffffff;
    color: #334155;
    font-size: 0.85rem;
    line-height: 1.3;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg fill='none'%3E%3Crect width='22' height='22' rx='11' fill='%23E5E7EB'/%3E%3Cpath stroke='%234B5563' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M7 9l4 4 4-4'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.4rem center;
    background-size: 1.375rem 1.375rem;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

#ccf-isolated-container .ccf-form-select:disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Styling for optgroup labels */
#ccf-isolated-container .ccf-form-select optgroup {
    font-size: 0.9rem;
    /* Slightly larger font for category headers */
    font-weight: 700;
    /* Bold for emphasis */
    color: #1a2b48;
    /* Darker color for category headers */
    padding: 8px 10px;
    /* Add padding for better visual separation */
    background-color: #eef2f7;
    /* Light background for category headers */
    border-bottom: 1px solid #d1d5db;
    /* Separator line */
    margin-top: 10px;
    /* Space above each category */
    margin-bottom: 5px;
    /* Space below each category */
    border-radius: 5px;
    /* Slightly rounded corners for categories */
}

#ccf-isolated-container .ccf-form-select optgroup:first-of-type {
    margin-top: 0;
    /* No top margin for the first category */
}

#ccf-isolated-container .ccf-form-select option {
    padding: 6px 15px;
    /* Padding for individual options */
    font-size: 0.85rem;
    /* Standard font size for options */
    color: #334155;
    /* Keep size black */
    background-color: #ffffff;
    /* White background for options */
}

#ccf-isolated-container .ccf-form-select option .ccf-size-description {
    color: #6b7280;
    /* Lighter gray for the description */
}

#ccf-isolated-container .ccf-form-select option:hover {
    background-color: #f0f4f8;
    /* Light hover effect for options */
}

/* --- CUSTOM DROPDOWN STYLES --- */
#ccf-isolated-container .ccf-custom-dropdown {
    position: relative;
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    z-index: 9999;
    /* Ensure the entire dropdown component is on top */
}

#ccf-isolated-container .ccf-custom-dropdown-selected {
    width: 100%;
    padding: 0.55rem 2.8rem 0.55rem 1rem;
    border: 1px solid #D1D5DB;
    border-radius: 9999px;
    background-color: #ffffff;
    color: #334155;
    line-height: 1.3;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg fill='none'%3E%3Crect width='22' height='22' rx='11' fill='%23E5E7EB'/%3E%3Cpath stroke='%234B5563' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M7 9l4 4 4-4'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.4rem center;
    background-size: 1.375rem 1.375rem;
    cursor: pointer;
    user-select: none;
}

#ccf-isolated-container .ccf-custom-dropdown-selected:focus,
#ccf-isolated-container .ccf-custom-dropdown.active .ccf-custom-dropdown-selected {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

#ccf-isolated-container .ccf-custom-dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    margin-top: 4px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 9999;
    display: none;
    /* Hidden by default */
}

#ccf-isolated-container .ccf-custom-dropdown.active .ccf-custom-dropdown-options {
    display: block;
}

#ccf-isolated-container .ccf-custom-optgroup-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1a2b48;
    padding: 8px 12px;
    background-color: #eef2f7;
    border-bottom: 1px solid #e5e7eb;
    border-top: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 1;
}

#ccf-isolated-container .ccf-custom-optgroup-label:first-child {
    border-top: none;
}

#ccf-isolated-container .ccf-custom-option {
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#ccf-isolated-container .ccf-custom-option:hover {
    background-color: #f3f4f6;
}

#ccf-isolated-container .ccf-custom-option.selected {
    background-color: #eff6ff;
    color: #1e3a8a;
}

#ccf-isolated-container .ccf-option-size {
    font-weight: 700;
    /* Bold size numbers */
    color: #334155;
    margin-right: 4px;
}

#ccf-isolated-container .ccf-option-desc {
    color: #9ca3af;
    /* Light gray */
    font-weight: 400;
    /* Normal text */
}

/* Highlight selected styling in dropdown option list */
#ccf-isolated-container .ccf-custom-option.selected .ccf-option-size {
    color: #1e40af;
}

/* --- END CUSTOM DROPDOWN STYLES --- */


#ccf-isolated-container .ccf-form-input,
#ccf-isolated-container .ccf-form-textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid #d1d9e6;
    border-radius: 5px;
    background-color: #ffffff;
    color: #334155;
    font-size: 0.85rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-family: 'Inter', sans-serif;
}

#ccf-isolated-container .ccf-form-textarea {
    min-height: 70px;
    resize: vertical;
}

#ccf-isolated-container .ccf-form-select:focus,
#ccf-isolated-container .ccf-form-input:focus,
#ccf-isolated-container .ccf-form-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

#ccf-isolated-container .ccf-form-group {
    margin-bottom: 1rem;
    position: relative;
    /* Needed for z-index layering of dropdowns */
    z-index: 1;
}

/* Stagger z-indices of form groups so top ones stack above lower ones.
   This allows dropdowns from higher fields to overflow visibly over lower fields. */
#ccf-isolated-container .ccf-form-container>.ccf-form-group:nth-of-type(1) {
    z-index: 50;
}

#ccf-isolated-container .ccf-form-container>.ccf-form-group:nth-of-type(2) {
    z-index: 49;
}

#ccf-isolated-container .ccf-form-container>.ccf-form-group:nth-of-type(3) {
    z-index: 48;
}

#ccf-isolated-container .ccf-form-container>.ccf-form-group:nth-of-type(4) {
    z-index: 47;
}

#ccf-isolated-container .ccf-form-container>.ccf-form-group:nth-of-type(5) {
    z-index: 46;
}

#ccf-isolated-container .ccf-form-container>.ccf-form-group:nth-of-type(6) {
    z-index: 45;
}

#ccf-isolated-container .ccf-form-container>.ccf-form-group:nth-of-type(7) {
    z-index: 44;
}

/* If a form-group is nested inside another form-group (used for compact option groups
   like Size -> Corners) add a little extra top spacing so labels don't sit too tight. */
#ccf-isolated-container .ccf-form-group>.ccf-form-group {
    margin-top: 0.6rem;
    margin-bottom: 1rem;
}

#ccf-isolated-container .ccf-additional-options-toggle {
    background-color: #e0e7ff;
    color: #374151;
    padding: 0.55rem 0.8rem;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 0.85rem;
    margin-top: 1.25rem;
    margin-bottom: 0.6rem;
    transition: background-color 0.3s ease;
    font-family: 'Inter', sans-serif;
}

#ccf-isolated-container .ccf-additional-options-toggle:hover {
    background-color: #c7d2fe;
}

#ccf-isolated-container .ccf-additional-options-toggle .ccf-toggle-icon {
    font-size: 1rem;
    transition: transform 0.3s ease;
    font-family: 'Inter', sans-serif;
}

#ccf-isolated-container .ccf-additional-options-content {
    padding-top: 0.6rem;
    border-top: 1px solid #d1d9e6;
    margin-top: -0.6rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

#ccf-isolated-container .ccf-additional-options-content.open {
    max-height: 2500px;
}

#ccf-isolated-container .ccf-additional-options-toggle.open .ccf-toggle-icon {
    transform: rotate(45deg);
}

#ccf-isolated-container .ccf-turnaround-info {
    background-color: #e0f2fe;
    border-left: 3px solid #3b82f6;
    padding: 0.6rem 0.8rem;
    border-radius: 5px;
    color: #0c4a6e;
    font-size: 0.8rem;
    margin-top: 0.25rem;
    font-family: 'Inter', sans-serif;
}

#ccf-isolated-container .ccf-turnaround-info p {
    margin-bottom: 0.15rem;
    font-family: 'Inter', sans-serif;
}

#ccf-isolated-container .ccf-turnaround-info p:last-child {
    margin-bottom: 0;
}

/* UPDATED File Uploader Styles */
#ccf-isolated-container .ccf-file-uploader {
    /* This is div#ccf-file-dropzone */
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 0.75rem 1.5rem;
    /* Reduced vertical padding */
    text-align: center;
    background-image: linear-gradient(to bottom right, #fdfdfd, #f0f2f5);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

#ccf-isolated-container .ccf-file-uploader:hover,
#ccf-isolated-container .ccf-file-uploader.dragover {
    border-color: #3b82f6;
    background-image: linear-gradient(to bottom right, #ffffff, #e8f0fe);
    box-shadow: 0 6px 16px rgba(60, 90, 130, 0.1);
    transform: translateY(-2px);
}

#ccf-isolated-container .ccf-file-uploader-icon {
    margin-bottom: 0.4rem;
    /* Reduced margin */
    line-height: 0;
}

#ccf-isolated-container .ccf-file-uploader-icon svg {
    width: 32px;
    /* Reduced icon size */
    height: 32px;
    /* Reduced icon size */
    color: #3b82f6;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: inline-block;
}

#ccf-isolated-container .ccf-file-uploader:hover .ccf-file-uploader-icon svg {
    transform: scale(1.1);
}

#ccf-isolated-container .ccf-file-uploader-text {
    color: #4a5c79;
    font-weight: 500;
    font-size: 0.85rem;
    /* Slightly smaller text if needed, or keep 0.9rem */
    font-family: 'Inter', sans-serif;
    margin: 0;
}

#ccf-isolated-container .ccf-file-uploader-text .text-blue-600 {
    color: #3b82f6;
    font-weight: 600;
}

#ccf-isolated-container #ccf-file-input,
#ccf-isolated-container #ccf-file-input-back {
    display: none;
}

/* Styles from uploaderv4.php, adapted and scoped for #ccf-isolated-container */
#ccf-isolated-container {
    --primary-color: #3b82f6;
    --primary-hover: #2563eb;
    --danger-color: #ef4444;
    --danger-hover: #dc2626;
    --success-color: #15803d;
    --light-gray: #f3f4f6;
    --medium-gray: #d1d5db;
    --dark-gray: #374151;
    --text-color: #1a2b48;
    --border-radius: 8px;
    --shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

#ccf-isolated-container #ccf-loading-indicator {
    display: none;
    text-align: center;
    margin: 10px 0;
    font-size: 0.8em;
    color: var(--primary-color);
    font-family: 'Inter', sans-serif;
}

#ccf-isolated-container #ccf-loading-indicator .ccf-loading-spinner {
    animation: ccfSpin 1s linear infinite;
    display: inline-block;
    margin-right: 5px;
}

@keyframes ccfSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#ccf-isolated-container .results-section {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    padding-top: 10px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, opacity 0.3s 0.1s ease-in-out;
    font-family: 'Inter', sans-serif;
}

#ccf-isolated-container .results-section.active {
    max-height: 800px;
    opacity: 1;
    overflow-y: auto;
}

#ccf-isolated-container .file-result-item {
    background-color: #fff;
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius);
    padding: 8px;
    width: 100%;
    /* Make each uploaded file item take full width of its uploader column */
    max-width: 240px;
    /* Prevent extremely wide tiles on large screens */
    box-sizing: border-box;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 0.9em;
    font-family: 'Inter', sans-serif;
    margin: 6px 0;
    /* vertical spacing between stacked items */
}

/* When results are laid out inside a wider results-section we still want them to flow naturally.
   Make the results-section use column direction so items stack vertically inside each uploader,
   avoiding the previous 'double compression' caused by percent widths inside narrow containers.
*/
#ccf-isolated-container .results-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: flex-start;
    padding-top: 10px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, opacity 0.3s 0.1s ease-in-out;
    font-family: 'Inter', sans-serif;
}

#ccf-isolated-container .results-section.active {
    max-height: 800px;
    opacity: 1;
    overflow-y: auto;
}

/* Keep mobile behavior sensible */
@media (max-width: 480px) {
    #ccf-isolated-container .file-result-item {
        max-width: 100%;
        width: 100%;
    }
}


#ccf-isolated-container .thumbnail-wrapper {
    width: 100%;
    height: 70px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--light-gray);
    border-radius: calc(var(--border-radius) - 4px);
    overflow: hidden;
}

#ccf-isolated-container .thumbnail-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

#ccf-isolated-container .thumbnail-wrapper a.no-thumbnail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: var(--dark-gray);
    font-weight: bold;
}

#ccf-isolated-container .thumbnail-wrapper a.no-thumbnail span {
    font-size: 1.5em;
    margin-bottom: 3px;
}

#ccf-isolated-container .thumbnail-wrapper a.no-thumbnail small {
    font-size: 0.8em;
}

#ccf-isolated-container .file-name-narrow {
    /* Softer, smaller file name styling for a cleaner/cuter look */
    font-weight: 500;
    color: #6b7280;
    /* softer gray */
    margin: 0 0 4px 0;
    word-break: normal;
    /* avoid aggressive breaking */
    white-space: nowrap;
    /* keep filename on a single line and use ellipsis */
    font-size: 0.75rem;
    /* noticeably smaller */
    line-height: 1.1;
    max-height: 2.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    letter-spacing: 0.2px;
}

#ccf-isolated-container .file-size-narrow {
    color: #6c757d;
    margin: 0 0 4px 0;
    font-size: 0.85em;
}

#ccf-isolated-container .message {
    padding: 5px;
    border-radius: calc(var(--border-radius) - 2px);
    margin-bottom: 5px;
    width: 100%;
    font-size: 0.85em;
    line-height: 1.2;
    box-sizing: border-box;
}

#ccf-isolated-container .message.success.file-status-narrow {
    background-color: transparent;
    border: none;
    color: var(--success-color);
    font-weight: 600;
    padding: 0;
    margin-bottom: 5px;
    text-align: center;
}

#ccf-isolated-container .message.error {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

#ccf-isolated-container .action-buttons-narrow {
    width: 100%;
    margin-top: auto;
}

#ccf-isolated-container .btn-remove-styled {
    background-color: #fee2e2;
    color: var(--danger-color);
    border: 1px solid #fecaca;
    padding: 5px 8px;
    width: 100%;
    border-radius: calc(var(--border-radius) - 2px);
    font-weight: 600;
    font-size: 0.85em;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-family: 'Inter', sans-serif;
}

#ccf-isolated-container .btn-remove-styled:hover {
    background-color: #fecaca;
    color: var(--danger-hover);
}

#ccf-isolated-container .btn-view-styled {
    background-color: #dbeafe;
    /* Light blue */
    color: #1e40af;
    /* Darker blue text */
    border: 1px solid #bfdbfe;
    /* Blue border */
    padding: 5px 8px;
    width: 100%;
    border-radius: calc(var(--border-radius) - 2px);
    font-weight: 600;
    font-size: 0.85em;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-family: 'Inter', sans-serif;
    margin-bottom: 5px;
    /* Space between buttons */
}

#ccf-isolated-container .btn-view-styled:hover {
    background-color: #bfdbfe;
    /* Slightly darker blue on hover */
    color: #1e3a8a;
    /* Even darker blue text on hover */
}


#ccf-isolated-container .ccf-price-display {
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    margin-top: 1rem;
}

#ccf-isolated-container .ccf-price-display.mt-2 {
    margin-top: 0.5rem;
}

#ccf-isolated-container .ccf-price-display .ccf-price-line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* Changed from center to flex-start */
    margin-bottom: 0.3rem;
}

#ccf-isolated-container .ccf-price-display .ccf-price-line:last-child {
    margin-bottom: 0;
}

#ccf-isolated-container .ccf-price-label {
    color: #15803d;
    font-weight: 500;
    font-size: 0.8rem;
    margin-bottom: 0;
    margin-right: 0.5rem;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    /* Re-add to prevent first line of label from wrapping */
    flex-grow: 1;
    /* Allow label to grow */
    flex-shrink: 0;
    /* Prevent label from shrinking */
}

#ccf-isolated-container .ccf-price-amount {
    color: #166534;
    font-weight: 600;
    font-size: 1.3rem;
    font-family: 'Inter', sans-serif;
    display: inline-block;
    /* For transform to work correctly */
    white-space: nowrap;
    /* Ensure amount does not wrap */
    flex-grow: 0;
    /* Prevent amount from growing */
    flex-shrink: 0;
    /* Prevent amount from shrinking */
    text-align: right;
    /* Align amount to the right */
}

#ccf-isolated-container .ccf-price-display .ccf-form-label {
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
    text-align: left;
    font-family: 'Inter', sans-serif;
}

#ccf-isolated-container .ccf-price-display .ccf-form-select {
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    font-family: 'Inter', sans-serif;
}

#ccf-isolated-container .ccf-submit-button {
    background-color: #2563eb;
    color: white;
    font-weight: 600;
    padding: 0.65rem 1rem;
    border-radius: 5px;
    width: 100%;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
    cursor: pointer;
    font-size: 0.9rem;
    margin-top: 1.25rem;
    border: none;
    font-family: 'Inter', sans-serif;
}

#ccf-isolated-container .ccf-submit-button:hover {
    background-color: #1d4ed8;
    transform: translateY(-1px);
}

#ccf-isolated-container .ccf-submit-button:active {
    transform: translateY(0px);
}

#ccf-isolated-container .ccf-submit-button:disabled {
    background-color: #9ca3af;
    /* A grey color */
    cursor: not-allowed;
    opacity: 0.6;
    /* Slightly less opaque than the JS-set 0.5 to ensure visibility */
    pointer-events: none;
    /* Ensure no click events */
}

#ccf-isolated-container .ccf-add-to-cart-message {
    text-align: center;
    font-size: 0.7rem;
    /* Made smaller */
    color: #6b7280;
    /* Grey color */
    margin-top: 0.5rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 3s ease-out, transform 3s ease-out;
    /* 3-second animation */
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    /* Ensure it stays on one line */
    overflow: hidden;
    /* Hide overflow if it still doesn't fit */
    text-overflow: ellipsis;
    /* Add ellipsis if it overflows */
}

#ccf-isolated-container .ccf-add-to-cart-message.show {
    opacity: 1;
    transform: translateY(0);
}

/* Styles for the processing button and spinner */
#ccf-isolated-container .ccf-processing-button {
    position: relative;
    overflow: hidden;
    background-color: #9ca3af;
    /* Grey background when processing */
    cursor: not-allowed;
    opacity: 0.8;
    /* Slightly transparent */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Space between spinner and text */
}

#ccf-isolated-container .ccf-processing-button .ccf-spinner {
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid #ffffff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: ccf-spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

@keyframes ccf-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes ccfFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#ccf-isolated-container .ccf-form-group.initially-visible {
    animation: ccfFadeIn 0.35s ease-out forwards;
    opacity: 0;
}

#ccf-isolated-container .ccf-form-group.initially-visible:nth-child(1) {
    animation-delay: 0.03s;
}

#ccf-isolated-container .ccf-form-group.initially-visible:nth-child(2) {
    animation-delay: 0.06s;
}

#ccf-isolated-container .ccf-form-group.initially-visible:nth-child(3) {
    animation-delay: 0.09s;
}

#ccf-isolated-container .ccf-form-group.initially-visible:nth-child(4) {
    animation-delay: 0.12s;
}

#ccf-isolated-container .ccf-form-group.initially-visible:nth-child(5) {
    animation-delay: 0.15s;
}


#ccf-isolated-container .ccf-turnaround-info-container,
#ccf-isolated-container .ccf-price-display,
#ccf-isolated-container .ccf-submit-button {
    animation: ccfFadeIn 0.35s ease-out forwards;
    opacity: 0;
}

#ccf-isolated-container .ccf-price-display:nth-of-type(1) {
    animation-delay: 0.18s;
}

#ccf-isolated-container .ccf-price-display:nth-of-type(2) {
    animation-delay: 0.21s;
}

#ccf-isolated-container .ccf-submit-button {
    animation-delay: 0.24s;
}

/* Price Jump Animation */
@keyframes ccfPriceJump {
    0% {
        transform: translateY(0) scale(1);
    }

    30% {
        transform: translateY(-8px) scale(1.1);
    }

    /* Bigger jump and zoom in */
    60% {
        transform: translateY(0) scale(0.9);
    }

    /* Zoom out slightly */
    100% {
        transform: translateY(0) scale(1);
    }
}

#ccf-isolated-container .ccf-price-amount.jumping {
    animation: ccfPriceJump 0.4s ease-in-out;
    /* Slightly longer animation for more noticeable effect */
}

#ccf-isolated-container #ccf-estimated-arrival-display {
    font-size: 0.9rem;
    /* Smaller font size for ETA */
    font-weight: 500;
    /* Less bold for an estimate */
    text-align: right;
}

#ccf-isolated-container .ccf-price-line .ccf-eta-label {
    font-size: 0.8rem;
    line-height: 1.4;
    text-align: left;
}

#ccf-isolated-container .ccf-eta-subtext {
    font-size: 0.8em;
    display: block;
    color: #6b7280;
}

#ccf-isolated-container .ccf-grand-total-box {
    width: fit-content;
    margin: 0.5rem auto 0 auto;
    /* Adjust top margin as needed, center horizontally */
    padding: 0.8rem 1.2rem;
    /* Adjust padding for better appearance */
}

#ccf-isolated-container .ccf-grand-total-line {
    flex-direction: column;
    /* Stack label and amount vertically */
    align-items: center;
    /* Center items horizontally */
    margin-bottom: 0;
    /* Remove bottom margin if not needed */
}

#ccf-isolated-container .ccf-grand-total-line .ccf-price-label,
#ccf-isolated-container .ccf-grand-total-line .ccf-price-amount {
    text-align: center;
    /* Center text within its own span */
    white-space: normal;
    /* Allow text to wrap if necessary */
    margin-right: 0;
    /* Remove right margin */
}

#ccf-isolated-container .ccf-grand-total-line .ccf-price-label {
    font-size: 1.1rem;
    /* Make label slightly larger */
    font-weight: 700;
    /* Make label bolder */
    margin-bottom: 0.2rem;
    /* Space between label and amount */
}

#ccf-isolated-container .ccf-grand-total-line .ccf-price-amount {
    font-size: 1.8rem;
    /* Make amount larger */
    font-weight: 800;
    /* Make amount bolder */
}


#ccf-isolated-container .ccf-tooltip-icon {
    display: inline-block;
    margin-left: 5px;
    color: #6b7f9e;
    background-color: #eef2f7;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 16px;
    font-size: 0.7rem;
    font-weight: bold;
    cursor: help;
    position: relative;
    vertical-align: middle;
    user-select: none;
    font-family: 'Inter', sans-serif;
}

#ccf-isolated-container .ccf-tooltip-icon::before,
#ccf-isolated-container .ccf-tooltip-icon::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    z-index: 10000;
}

#ccf-isolated-container .ccf-tooltip-icon::before {
    content: attr(data-tooltip);
    bottom: calc(100% + 7px);
    background-color: #2d3748;
    color: #ffffff;
    padding: 5px 8px;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: normal;
    line-height: 1.3;
    white-space: pre-wrap;
    width: max-content;
    max-width: 200px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    font-family: 'Inter', sans-serif;
}

#ccf-isolated-container .ccf-tooltip-icon::after {
    content: '';
    bottom: calc(100% + 2px);
    border-width: 5px;
    border-style: solid;
    border-color: #2d3748 transparent transparent transparent;
}

#ccf-isolated-container .ccf-tooltip-icon:hover::before,
#ccf-isolated-container .ccf-tooltip-icon:hover::after {
    opacity: 1;
    visibility: visible;
}

#ccf-isolated-container .ccf-form-note {
    font-size: 0.75rem;
    color: #4a5c79;
    margin-top: 0.2rem;
    display: none;
    font-family: 'Inter', sans-serif;
}

/* PDF Viewer Modal Styles */
#ccf-isolated-container .ccf-viewer-modal-overlay {
    /* display: none; */
    /* Controlled by JS */
    position: fixed;
    z-index: 10000;
    /* Ensure it's on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* overflow: auto; */
    /* Let content handle scroll if needed, or viewer itself */
    background-color: rgba(0, 0, 0, 0.75);
    /* Slightly darker overlay */
    justify-content: center;
    align-items: center;
    font-family: 'Inter', sans-serif;
    /* Inherit font */
    display: flex;
    /* Added for centering */
}

#ccf-isolated-container .ccf-viewer-modal-content {
    background-color: #282a2d;
    /* Darker background for the modal content area */
    color: #f1f1f1;
    /* Light text for dark background */
    margin: auto;
    padding: 0;
    border: 1px solid #444;
    /* Darker border */
    width: 85%;
    height: 90%;
    /* Increased height */
    max-width: 1200px;
    max-height: 95vh;
    /* Increased max height */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    /* Stronger shadow */
    animation-name: ccfViewerAnimatetop;
    animation-duration: 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 8px;
    /* Rounded corners for the modal box */
    overflow: hidden;
    /* Prevent content from spilling before it's ready */
}

@keyframes ccfViewerAnimatetop {
    from {
        transform: translateY(-50px);
        opacity: 0
    }

    /* Smoother animation */
    to {
        transform: translateY(0);
        opacity: 1
    }
}

#ccf-isolated-container .ccf-viewer-modal-close-button {
    color: #ccc;
    /* Lighter color for close button on dark bg */
    position: absolute;
    top: 10px;
    /* Adjusted for better spacing */
    right: 15px;
    font-size: 30px;
    /* Slightly smaller */
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    z-index: 10001;
    padding: 5px;
    /* Make it easier to click */
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#ccf-isolated-container .ccf-viewer-modal-close-button:hover,
#ccf-isolated-container .ccf-viewer-modal-close-button:focus {
    color: #fff;
    /* White on hover */
    background-color: rgba(255, 0, 0, 0.7);
    /* Reddish background on hover for emphasis */
    text-decoration: none;
}

#ccf-isolated-container .ccf-viewer-modal-body {
    flex-grow: 1;
    padding: 0;
    /* Remove padding, viewer should handle its own */
    overflow: hidden;
    /* Critical for iframe/canvas to not cause double scrollbars */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
    /* Background for the body itself, if viewer doesn't fill */
}

/* Ensure iframe/canvas from viewer takes full space */
#ccf-isolated-container .ccf-viewer-modal-body>iframe,
#ccf-isolated-container .ccf-viewer-modal-body>div {
    /* PDF.js often wraps in a div */
    width: 100%;
    height: 100%;
    border: none;
}

#ccf-isolated-container .ccf-viewer-modal-body>div>canvas {
    /* Specific to PDF.js canvas */
    width: 100% !important;
    /* Override inline styles if necessary */
    height: auto !important;
    /* Maintain aspect ratio */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#ccf-isolated-container .thumbnail-wrapper .ccf-thumbnail-interactive {
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#ccf-isolated-container .thumbnail-wrapper .ccf-thumbnail-interactive img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#ccf-isolated-container .thumbnail-wrapper a.no-thumbnail.ccf-thumbnail-interactive {
    cursor: pointer;
}

/* Layout tweaks for inline Front / Back uploaders */
#ccf-isolated-container .ccf-uploaders-flex {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

/* Default: single uploader layout — front occupies full width, divider hidden, back may be hidden */
#ccf-isolated-container .ccf-uploaders-flex .ccf-uploader-side {
    flex: 1 1 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Divider between uploaders - hidden by default */
#ccf-isolated-container .ccf-uploader-divider {
    display: none;
}

/* Two-up layout when back uploader is visible.
   Requirement: front stays visually 100% when alone.
   When two-up is active:
     - Front: 40%
     - Divider: 20%
     - Back: 40%
*/
#ccf-isolated-container .ccf-uploaders-flex.two-up .ccf-uploader-side {
    min-width: 0;
    box-sizing: border-box;
}

/* Two-up layout using CSS Grid to guarantee the uploaders always fit inside
   the form column regardless of padding or surrounding layout. Grid columns
   are: left panel | 1px divider | right panel. A column-gap creates breathing
   space visually without increasing the required width for the panels.
*/
#ccf-isolated-container .ccf-uploaders-flex.two-up {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    /* panels + 1px divider */
    column-gap: 24px;
    /* visual breathing space between panels */
    width: 100%;
    box-sizing: border-box;
    align-items: start;
}

/* Divider: keep it a 1px visual column, no extra margin (spacing handled by column-gap) */
#ccf-isolated-container .ccf-uploaders-flex.two-up .ccf-uploader-divider {
    display: block;
    width: 1px;
    background: linear-gradient(to bottom, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.04));
    align-self: stretch;
    border-radius: 1px;
    box-shadow: none;
}

/* Panels: let each panel fill its grid cell and never exceed container width.
   Using width:100% and box-sizing ensures internal padding doesn't force overflow.
*/
#ccf-isolated-container .ccf-uploaders-flex.two-up .ccf-uploader-side {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* When not in two-up mode (only one uploader visible), allow full width */
#ccf-isolated-container .ccf-uploaders-flex:not(.two-up) .ccf-uploader-side {
    flex: 1 1 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Ensure inner uploader content wraps cleanly and doesn't overflow */
#ccf-isolated-container .ccf-file-uploader {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Make uploader text concise and allow wrapping if needed for small widths */
#ccf-isolated-container .ccf-file-uploader-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}

/* Ensure uploader panels stretch nicely and align content */
#ccf-isolated-container .ccf-file-uploader {
    min-height: 86px;
    /* gives the divider something to match visually */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Responsive: stack on small screens — divider hidden and panels full width */
@media (max-width: 900px) {
    #ccf-isolated-container .ccf-uploaders-flex {
        flex-wrap: wrap;
        /* Ensure grid is not active on small screens if .two-up is present */
        display: flex !important;
        flex-direction: column;
        /* Stack items vertically */
        gap: 12px;
        /* Add some vertical spacing between stacked uploaders */
    }

    #ccf-isolated-container .ccf-uploaders-flex .ccf-uploader-side {
        flex: 1 1 100% !important;
        min-width: 0;
    }

    #ccf-isolated-container .ccf-uploader-divider {
        display: none !important;
    }
}

/* Custom Notification Styles */
.notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.notification-box {
    background: linear-gradient(145deg, #e6e9f0, #f8f9fa);
    padding: 20px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 320px;
    width: 90%;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    position: relative;
}

.notification-overlay.visible {
    opacity: 1;
}

.notification-overlay.visible .notification-box {
    transform: scale(1);
}

.notification-message {
    font-size: 1rem;
    color: #333;
    margin-bottom: 0;
}

.notification-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 20px;
}

#ccf-isolated-container .thumbnail-wrapper .ccf-thumbnail-interactive {
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#ccf-isolated-container .thumbnail-wrapper .ccf-thumbnail-interactive img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#ccf-isolated-container .thumbnail-wrapper a.no-thumbnail.ccf-thumbnail-interactive {
    cursor: pointer;
}

/* Layout tweaks for inline Front / Back uploaders */
#ccf-isolated-container .ccf-uploaders-flex {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

/* Default: single uploader layout — front occupies full width, divider hidden, back may be hidden */
#ccf-isolated-container .ccf-uploaders-flex .ccf-uploader-side {
    flex: 1 1 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Divider between uploaders - hidden by default */
#ccf-isolated-container .ccf-uploader-divider {
    display: none;
}

/* Two-up layout when back uploader is visible.
   Requirement: front stays visually 100% when alone.
   When two-up is active:
     - Front: 40%
     - Divider: 20%
     - Back: 40%
*/
#ccf-isolated-container .ccf-uploaders-flex.two-up .ccf-uploader-side {
    min-width: 0;
    box-sizing: border-box;
}

/* Two-up layout using CSS Grid to guarantee the uploaders always fit inside
   the form column regardless of padding or surrounding layout. Grid columns
   are: left panel | 1px divider | right panel. A column-gap creates breathing
   space visually without increasing the required width for the panels.
*/
#ccf-isolated-container .ccf-uploaders-flex.two-up {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    /* panels + 1px divider */
    column-gap: 24px;
    /* visual breathing space between panels */
    width: 100%;
    box-sizing: border-box;
    align-items: start;
}

/* Divider: keep it a 1px visual column, no extra margin (spacing handled by column-gap) */
#ccf-isolated-container .ccf-uploaders-flex.two-up .ccf-uploader-divider {
    display: block;
    width: 1px;
    background: linear-gradient(to bottom, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.04));
    align-self: stretch;
    border-radius: 1px;
    box-shadow: none;
}

/* Panels: let each panel fill its grid cell and never exceed container width.
   Using width:100% and box-sizing ensures internal padding doesn't force overflow.
*/
#ccf-isolated-container .ccf-uploaders-flex.two-up .ccf-uploader-side {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* When not in two-up mode (only one uploader visible), allow full width */
#ccf-isolated-container .ccf-uploaders-flex:not(.two-up) .ccf-uploader-side {
    flex: 1 1 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Ensure inner uploader content wraps cleanly and doesn't overflow */
#ccf-isolated-container .ccf-file-uploader {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Make uploader text concise and allow wrapping if needed for small widths */
#ccf-isolated-container .ccf-file-uploader-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}

/* Ensure uploader panels stretch nicely and align content */
#ccf-isolated-container .ccf-file-uploader {
    min-height: 86px;
    /* gives the divider something to match visually */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Responsive: stack on small screens — divider hidden and panels full width */
@media (max-width: 900px) {
    #ccf-isolated-container .ccf-uploaders-flex {
        flex-wrap: wrap;
        /* Ensure grid is not active on small screens if .two-up is present */
        display: flex !important;
        flex-direction: column;
        /* Stack items vertically */
        gap: 12px;
        /* Add some vertical spacing between stacked uploaders */
    }

    #ccf-isolated-container .ccf-uploaders-flex .ccf-uploader-side {
        flex: 1 1 100% !important;
        min-width: 0;
    }

    #ccf-isolated-container .ccf-uploader-divider {
        display: none !important;
    }
}

/* Custom Notification Styles */
.notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.notification-box {
    background: linear-gradient(145deg, #e6e9f0, #f8f9fa);
    padding: 20px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 320px;
    width: 90%;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    position: relative;
}

.notification-overlay.visible {
    opacity: 1;
}

.notification-overlay.visible .notification-box {
    transform: scale(1);
}

.notification-message {
    font-size: 1rem;
    color: #333;
    margin-bottom: 0;
}

.notification-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 20px;
}

#ccf-isolated-container .thumbnail-wrapper .ccf-thumbnail-interactive {
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#ccf-isolated-container .thumbnail-wrapper .ccf-thumbnail-interactive img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#ccf-isolated-container .thumbnail-wrapper a.no-thumbnail.ccf-thumbnail-interactive {
    cursor: pointer;
}

/* Layout tweaks for inline Front / Back uploaders */
#ccf-isolated-container .ccf-uploaders-flex {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

/* Default: single uploader layout — front occupies full width, divider hidden, back may be hidden */
#ccf-isolated-container .ccf-uploaders-flex .ccf-uploader-side {
    flex: 1 1 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Divider between uploaders - hidden by default */
#ccf-isolated-container .ccf-uploader-divider {
    display: none;
}

/* Two-up layout when back uploader is visible.
   Requirement: front stays visually 100% when alone.
   When two-up is active:
     - Front: 40%
     - Divider: 20%
     - Back: 40%
*/
#ccf-isolated-container .ccf-uploaders-flex.two-up .ccf-uploader-side {
    min-width: 0;
    box-sizing: border-box;
}

/* Two-up layout using CSS Grid to guarantee the uploaders always fit inside
   the form column regardless of padding or surrounding layout. Grid columns
   are: left panel | 1px divider | right panel. A column-gap creates breathing
   space visually without increasing the required width for the panels.
*/
#ccf-isolated-container .ccf-uploaders-flex.two-up {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    /* panels + 1px divider */
    column-gap: 24px;
    /* visual breathing space between panels */
    width: 100%;
    box-sizing: border-box;
    align-items: start;
}

/* Divider: keep it a 1px visual column, no extra margin (spacing handled by column-gap) */
#ccf-isolated-container .ccf-uploaders-flex.two-up .ccf-uploader-divider {
    display: block;
    width: 1px;
    background: linear-gradient(to bottom, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.04));
    align-self: stretch;
    border-radius: 1px;
    box-shadow: none;
}

/* Panels: let each panel fill its grid cell and never exceed container width.
   Using width:100% and box-sizing ensures internal padding doesn't force overflow.
*/
#ccf-isolated-container .ccf-uploaders-flex.two-up .ccf-uploader-side {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* When not in two-up mode (only one uploader visible), allow full width */
#ccf-isolated-container .ccf-uploaders-flex:not(.two-up) .ccf-uploader-side {
    flex: 1 1 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Ensure inner uploader content wraps cleanly and doesn't overflow */
#ccf-isolated-container .ccf-file-uploader {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Make uploader text concise and allow wrapping if needed for small widths */
#ccf-isolated-container .ccf-file-uploader-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}

/* Ensure uploader panels stretch nicely and align content */
#ccf-isolated-container .ccf-file-uploader {
    min-height: 86px;
    /* gives the divider something to match visually */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Responsive: stack on small screens — divider hidden and panels full width */
@media (max-width: 900px) {
    #ccf-isolated-container .ccf-uploaders-flex {
        flex-wrap: wrap;
        /* Ensure grid is not active on small screens if .two-up is present */
        display: flex !important;
        flex-direction: column;
        /* Stack items vertically */
        gap: 12px;
        /* Add some vertical spacing between stacked uploaders */
    }

    #ccf-isolated-container .ccf-uploaders-flex .ccf-uploader-side {
        flex: 1 1 100% !important;
        min-width: 0;
    }

    #ccf-isolated-container .ccf-uploader-divider {
        display: none !important;
    }
}

/* Custom Notification Styles */
.notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.notification-box {
    background: linear-gradient(145deg, #e6e9f0, #f8f9fa);
    padding: 20px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 320px;
    width: 90%;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    position: relative;
}

.notification-overlay.visible {
    opacity: 1;
}

.notification-overlay.visible .notification-box {
    transform: scale(1);
}

.notification-message {
    font-size: 1rem;
    color: #333;
    margin-bottom: 0;
}

.notification-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 20px;
    color: #888;
    cursor: pointer;
    transition: color 0.2s ease;
}

.notification-close:hover {
    color: #333;
}

/* Standalone Form Image Carousel CSS (independent of page CSS)
   Provides slide-out/in animations used by the external JS module.
   Scope kept minimal to avoid leaking styles. */

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

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

/* Classes toggled by the module */
._fic_slide-out {
  animation: _fic_slide-out-left 0.38s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
}

._fic_slide-in {
  animation: _fic_slide-in-right 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Ensure transition property applies to transform, overcoming any specificity issues or previous 'transition: opacity' */
#ccf-isolated-container .ccf-product-image-container img[data-fic-main-image],
#ccf-isolated-container .ccf-product-image-container img.ccf-product-main-image,
#ccf-isolated-container [data-fic-main-image],
#ccf-isolated-container .ccf-product-main-image {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out !important;
  will-change: transform; /* Optimize for smoother animation */
}

#ccf-isolated-container [data-fic-main-image]:hover,
#ccf-isolated-container .ccf-product-main-image:hover {
  transform: scale(1.10) !important; /* Zoom in 10% more than its real size on mouse over */
  z-index: 10; /* Bring the image to front on hover */
}



/* 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 */