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

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

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

/* 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 */
    all: initial;
    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;
    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);
}

#ccf-isolated-container .ccf-image-text-below-image .ccf-form-title {
    /* Subtitle style matching the Business Cards selected-shape display */
    text-align: center;
    color: #4a5c79;
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: -5px;
    margin-bottom: 15px;
    line-height: 1.2;
    font-family: 'Inter', sans-serif;
}

#ccf-isolated-container .ccf-form-options-container,
#ccf-isolated-container .ccf-price-shipping-container {
    width: 100%;
    margin-bottom: 1rem;
}

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

/* Free Design page specific gradient for the top-of-size/select H1
   Unique code: 73628194750291837 (keeps CSS scoped and collision-free) */
#ccf-isolated-container .ccf-form-options-container .ccf-form-container > h1._free_form-title-gradient-73628194750291837 {
    color: #7c3aed !important; /* fallback */
    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 8px 20px rgba(109, 40, 217, 0.22), 0 2px 6px rgba(17, 24, 39, 0.10) !important;
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.08;
    margin-bottom: 0.2rem;
}
#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;
}

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

#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: center; /* Centered horizontally */
    align-items: center; /* Centered vertically if container has height */
    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: center; /* Centered horizontally */
    align-items: center; /* Centered vertically if container has height */
    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.3); /* Slightly less dark overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20000;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px); /* Frosted glass effect on the background */
    -webkit-backdrop-filter: blur(4px);
}

.notification-box {
    background: rgba(255, 255, 255, 0.65); /* Semi-transparent white */
    -webkit-backdrop-filter: blur(15px); /* Frosted glass effect for the box */
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 25px 35px;
    border-radius: 20px; /* Cuter, more rounded corners */
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1); /* Softer, modern shadow */
    text-align: center;
    max-width: 340px;
    width: 90%;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease;
    position: relative;
    opacity: 0; /* Start with opacity 0 for fade-in */
}

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

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

.notification-message {
    font-size: 1.05rem; /* Slightly larger font */
    color: #1a2b48; /* Darker, more readable text */
    margin-bottom: 0;
    font-weight: 500;
}

.notification-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    font-size: 16px;
    color: #555;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
}

.notification-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #000;
    transform: rotate(90deg);
}

/* Styles for horizontal dimension inputs */
#ccf-isolated-container .ccf-dimensions-inputs {
    display: flex;
    gap: 10px; /* Space between width and height fields */
    align-items: center;
}

#ccf-isolated-container .ccf-dimensions-inputs .ccf-dimension-input {
    flex: 1; /* Allow inputs to grow and shrink */
    text-align: center; /* Center the text in the input */
}

#ccf-isolated-container .ccf-dimension-separator {
    font-weight: bold;
    color: #4a5c79;
    font-size: 1rem;
}

/* Styles for design icons */
.ccf-design-icons-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Space between icons */
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* Hide the actual file input to prevent double-opening */
#ccf-isolated-container #ccf-sample-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

.ccf-design-icons-container a {
    display: block; /* Make the anchor a block element to contain the image and apply styles */
    width: 150px;
    height: 150px;
    border-radius: 50%; /* Make them circular as in the image */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Initial subtle shadow */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Add transition for smooth effects */
    overflow: hidden; /* Ensure image stays within circular bounds */
    position: relative; /* For positioning the image inside */
}

.ccf-design-icons-container a:nth-child(2) {
    /* Stagger the float animation for the second icon's image */
    /* The float animation is on the img, so this delay should be applied to the img */
}

.ccf-design-icons-container a:hover {
    transform: translateY(-10px) scale(1.08); /* Lift and slightly enlarge on hover */
    box-shadow: 0 15px 30px rgba(0,0,0,0.2); /* More pronounced shadow on hover */
}

.ccf-design-icons-container a.clicked {
    animation: ccf-pop 0.3s ease-out; /* Apply pop animation on click */
}

.ccf-design-icons-container .ccf-design-icon {
    width: 100% !important; /* Image fills the parent anchor */
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    animation: ccf-float 3s ease-in-out infinite;
    object-fit: contain; /* Ensure image scales within its bounds */
    position: absolute; /* Position image within the anchor */
    top: 0;
    left: 0;
}

@keyframes ccf-float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

@keyframes ccf-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); } /* Pop out more */
    100% { transform: scale(1); }
}