@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
--wcnc-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
--wcnc-bg-color: #f4f7f6;
--wcnc-card-bg: #ffffff;
--wcnc-text-primary: #1a202c;
--wcnc-text-secondary: #4a5568;
--wcnc-border-color: #e2e8f0;
--wcnc-accent-primary: #ff7618;
--wcnc-accent-primary-hover: #e66a15;
--wcnc-accent-secondary: #2d3748;
--wcnc-accent-secondary-hover: #1a202c;
--wcnc-danger-color: #e53e3e;
--wcnc-danger-hover: #c53030;
--wcnc-success-color: #38a169;
--wcnc-success-hover: #2f855a;
--wcnc-radius-md: 8px;
--wcnc-radius-lg: 12px;
--wcnc-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
--wcnc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
}
#wcnc-container {
max-width: 90vw;
width: 1200px;
margin: 40px auto;
padding: 0;
background: transparent;
font-family: var(--wcnc-font-family);
color: var(--wcnc-text-primary);
}
#wcnc-bulk-upload-area {
border: 2px dashed var(--wcnc-border-color);
border-radius: var(--wcnc-radius-lg);
padding: 40px;
text-align: center;
margin-bottom: 30px;
background-color: var(--wcnc-card-bg);
transition: all 0.3s ease;
box-shadow: var(--wcnc-shadow);
}
#wcnc-bulk-upload-area label {
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
#wcnc-bulk-upload-area label::before {
content: '';
display: block;
width: 48px;
height: 48px;
background-color: var(--wcnc-accent-primary);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 16.5V9.75m0 0l-3 3m3-3l3 3m0 0l-3 3m3-3l3 3M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-18 0v-2.25A2.25 2.25 0 015.25 12h13.5A2.25 2.25 0 0121 14.25v2.25' /%3E%3C/svg%3E") no-repeat center;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 16.5V9.75m0 0l-3 3m3-3l3 3m0 0l-3 3m3-3l3 3M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-18 0v-2.25A2.25 2.25 0 015.25 12h13.5A2.25 2.25 0 0121 14.25v2.25' /%3E%3C/svg%3E") no-repeat center;
transition: all 0.3s ease;
}
#wcnc-bulk-upload-area p {
font-size: 1.125rem;
font-weight: 600;
color: var(--wcnc-text-primary);
margin: 0;
}
#wcnc-bulk-upload-area span {
color: var(--wcnc-text-secondary);
display: block;
margin: 0;
}
#wcnc-bulk-upload-area strong {
color: var(--wcnc-accent-primary);
text-decoration: none;
font-weight: 600;
}
#wcnc-bulk-upload-area.dragover,
#wcnc-bulk-upload-area:hover {
border-color: var(--wcnc-accent-primary);
background-color: #fffaf0;
box-shadow: var(--wcnc-shadow-lg);
}
#wcnc-bulk-upload-area:hover label::before {
transform: scale(1.1) translateY(-2px);
}
.job-item {
background: var(--wcnc-card-bg);
border: 1px solid var(--wcnc-border-color);
border-radius: var(--wcnc-radius-lg);
padding: 24px;
margin-bottom: 24px;
display: flex;
gap: 24px;
align-items: flex-start;
box-shadow: var(--wcnc-shadow);
transition: box-shadow 0.3s ease;
}
.job-item:focus-within {
box-shadow: var(--wcnc-shadow-lg);
border-color: var(--wcnc-accent-primary);
}
.job-inputs {
flex: 1;
min-width: 0;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-weight: 600;
margin-bottom: 8px;
font-size: 0.875rem;
color: var(--wcnc-text-primary);
}
.job-item input[type="file"],
.job-item select,
.job-item input[type="number"] {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--wcnc-border-color);
border-radius: var(--wcnc-radius-md);
box-sizing: border-box;
font-size: 0.9375rem;
background: #fdfdfd;
transition: all 0.2s ease;
color: var(--wcnc-text-primary);
}
.job-item input[type="file"] {
padding: 10px;
font-size: 0.875rem;
background: var(--wcnc-card-bg);
}
.job-item input[type="file"]::file-selector-button {
margin-right: 12px;
padding: 8px 12px;
border: none;
border-radius: var(--wcnc-radius-md);
background: var(--wcnc-accent-secondary);
color: white;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s ease;
}
.job-item input[type="file"]::file-selector-button:hover {
background: var(--wcnc-accent-secondary-hover);
}
.job-item select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 1.2em;
padding-right: 40px;
}
.job-item input[type="file"]:focus,
.job-item select:focus,
.job-item input[type="number"]:focus {
outline: none;
border-color: var(--wcnc-accent-primary);
box-shadow: 0 0 0 2px var(--wcnc-accent-primary-hover);
}
.dxf-preview-wrapper {
flex-shrink: 0;
width: 260px;
text-align: center;
padding: 20px;
background: var(--wcnc-bg-color);
border-radius: var(--wcnc-radius-md);
}
.dxf-preview-canvas {
/* --- STYLE UPDATE --- */
border: 1px solid #a0aec0; /* Made border darker for better contrast */
/* --- END STYLE UPDATE --- */
background: #ffffff;
border-radius: var(--wcnc-radius-md);
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
}
.dxf-info {
margin-top: 15px;
font-size: 0.8125rem;
text-align: left;
color: var(--wcnc-text-secondary);
word-wrap: break-word;
}
.dxf-info p {
margin: 0 0 8px 0;
line-height: 1.5;
}
.dxf-info strong {
color: var(--wcnc-text-primary);
font-weight: 600;
}
.dxf-info .dxf-filename {
font-style: italic;
color: var(--wcnc-text-primary);
font-weight: 500;
}
.dxf-info .dxf-component-cost {
font-weight: 600;
color: var(--wcnc-success-color);
}
.dxf-info .dxf-component-weight {
font-weight: 600;
color: var(--wcnc-text-primary);
}
.wcnc-buttons {
display: flex;
gap: 16px;
margin-bottom: 24px;
}
#wcnc-add-job,
#wcnc-calculate,
.wcnc-remove-job,
#wcnc-add-to-cart {
padding: 14px 28px;
font-size: 1rem;
font-weight: 700;
border: none;
border-radius: var(--wcnc-radius-md);
cursor: pointer;
transition: all 0.2s ease-in-out;
text-align: center;
font-family: var(--wcnc-font-family);
box-shadow: var(--wcnc-shadow);
}
#wcnc-calculate {
flex-grow: 1;
background: var(--wcnc-accent-primary);
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
}
#wcnc-calculate:hover {
background: var(--wcnc-accent-primary-hover);
box-shadow: var(--wcnc-shadow-lg);
transform: translateY(-1px);
}
#wcnc-calculate:disabled {
background: #ccc;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
#wcnc-calculate.is-complete:disabled {
background: var(--wcnc-accent-secondary);
color: white;
cursor: not-allowed;
opacity: 0.8;
}
#wcnc-calculate.is-complete:disabled::after {
content: '✓';
font-size: 1.2em;
font-weight: 700;
line-height: 1;
}
#wcnc-add-job {
background: var(--wcnc-accent-secondary);
color: white;
}
#wcnc-add-job:hover {
background: var(--wcnc-accent-secondary-hover);
box-shadow: var(--wcnc-shadow-lg);
transform: translateY(-1px);
}
.wcnc-remove-wrapper {
margin-top: 20px;
text-align: right;
border-top: 1px solid var(--wcnc-border-color);
padding-top: 20px;
}
.job-item:only-child .wcnc-remove-wrapper {
display: none;
}
.wcnc-remove-job {
padding: 8px 16px;
font-size: 0.875rem;
font-weight: 600;
color: white;
background-color: var(--wcnc-danger-color);
box-shadow: none;
}
.wcnc-remove-job:hover {
background-color: var(--wcnc-danger-hover);
transform: translateY(-1px);
}
#wcnc-progress-container {
width: 100%;
}
#wcnc-progress-status {
font-size: 1rem;
color: var(--wcnc-text-primary);
font-weight: 600;
margin: 0 0 10px 0;
text-align: center;
}
#wcnc-progress-bar-wrapper {
background: var(--wcnc-border-color);
border-radius: 999px;
padding: 4px;
overflow: hidden;
}
#wcnc-progress-bar {
height: 24px;
background: transparent !important;
border-radius: 999px;
transition: none !important;
box-shadow: none !important;
position: relative;
overflow: hidden;
}
#wcnc-progress-bar::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
background-image: linear-gradient(
90deg,
var(--wcnc-accent-primary) 20px,
transparent 0
) !important;
background-size: 24px 100% !important;
-webkit-mask: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent calc(100% - 24px));
mask: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent calc(100% - 24px));
}
#wcnc-progress-bar::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
right: 0px !important;
width: 24px !important;
background-image: linear-gradient(90deg, var(--wcnc-accent-primary) 20px, transparent 0) !important;
background-size: 100% 100% !important;
background-repeat: no-repeat !important;
z-index: 2 !important;
animation: wcnc-flash-opacity 1s infinite !important;
}
@keyframes wcnc-flash-opacity {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
#wcnc-result {
margin-top: 0;
padding: 20px 24px;
border: 1px solid var(--wcnc-border-color);
background: var(--wcnc-card-bg);
border-radius: var(--wcnc-radius-lg);
font-size: 1.125rem;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: var(--wcnc-shadow);
}
#wcnc-result .price {
font-weight: 700;
font-size: 1.5rem;
color: var(--wcnc-accent-primary);
}
@media (min-width: 768px) {
#wcnc-add-to-cart {
padding: 12px 180px;
background: var(--wcnc-success-color);
font-size: 1rem;
font-weight: 700;
color: white;
}
}
@media (max-width: 767px) {
#wcnc-add-to-cart {
padding: 12px 24px;
background: var(--wcnc-success-color);
font-size: 1rem;
font-weight: 700;
color: white;
}
}
#wcnc-add-to-cart:hover {
background: var(--wcnc-success-hover);
box-shadow: var(--wcnc-shadow-lg);
transform: translateY(-1px);
}
@media (max-width: 768px) {
#wcnc-container {
max-width: 100%;
margin: 10px auto;
padding: 10px;
}
.job-item {
flex-direction: column;
padding: 20px;
}
.job-inputs {
width: 100%;
}
.dxf-preview-wrapper {
width: 100%;
box-sizing: border-box;
padding: 15px;
}
.wcnc-buttons {
flex-direction: column;
gap: 12px;
}
#wcnc-add-job,
#wcnc-calculate {
width: 100%;
padding: 16px;
font-size: 1.125rem;
}
#wcnc-result {
flex-direction: column;
gap: 15px;
padding: 20px;
}
#wcnc-result .price {
font-size: 1.25rem;
}
#wcnc-add-to-cart {
width: 100%;
}
#wcnc-bulk-upload-area {
padding: 25px;
margin-bottom: 20px;
}
}
.wcnc-cart-thumbnail {
width: 100px;
height: auto;
border: 1px solid #ddd;
border-radius: 4px;
}
.wc-item-meta,
.wc-block-cart-item__product .wc-block-components-product-metadata__value {
font-size: 0.9em;
color: #555;
}
.wcnc-parts-breakdown hr {
border: 0;
border-top: 1px solid #eee;
margin: 8px 0;
}
.wc-item-meta,
.wc-block-cart-item__product .wc-block-components-product-metadata__value {
font-size: 0.9em;
color: #555;
}
.wc-item-meta li.wc-item-meta-key-wcnc_separator {
margin: 0.5em 0 !important;
padding: 0 !important;
border-top: 1px solid #eee;
}
.wc-item-meta li.wc-item-meta-key-wcnc_separator p {
display: none;
}
.wc-block-components-product-metadata ul {
display: flex;
flex-direction: column;
gap: 1em;
}
.wcnc-meta-item {
display: flex;
align-items: flex-start;
gap: 15px;
border-top: 1px solid #eee;
padding-top: 1em;
}
.wc-block-components-product-metadata ul > li:first-child.wcnc-meta-item {
border-top: none;
padding-top: 0;
}
.wcnc-meta-item__image {
width: 130px;
height: auto;
border: 1px solid #ddd;
border-radius: 4px;
flex-shrink: 0;
}
.page-id-16 .wcnc-meta-item__image {
width: 60px;
height: auto;
border: 1px solid #ddd;
border-radius: 4px;
flex-shrink: 0;
}
.page-id-16 .wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-components-product-metadata {
font-size: 0.8em;
}
.page-id-16 .wc-block-components-product-metadata ul.wc-block-components-product-details {
gap: 1em;
}
.wcnc-meta-item__details div {
line-height: 1.5;
}
.wc-item-meta,
.wc-block-cart-item__product .wc-block-components-product-metadata__value,
.wc-block-components-order-summary-item__description .wc-block-components-product-metadata {
font-size: 0.9em;
color: #555;
}
.wc-item-meta li.wc-item-meta-key-wcnc_separator {
margin: 0.5em 0 !important;
padding: 0 !important;
border-top: 1px solid #eee;
}
.wc-item-meta li.wc-item-meta-key-wcnc_separator p,
.wc-block-components-product-details li[class*="__wcnc-separator"] span {
display: none;
}
.wc-block-components-product-details li[class*="__wcnc-separator"] {
padding-top: 0.5em !important;
margin-top: 0.5em !important;
border-top: 1px solid #ddd;
}
.wc-block-components-product-metadata ul {
display: flex;
flex-direction: column;
gap: 1em;
}
.wcnc-meta-item {
display: flex;
align-items: flex-start;
gap: 15px;
border-top: 1px solid #eee;
padding-top: 1em;
}
.wc-block-components-product-metadata ul > li:first-child.wcnc-meta-item {
border-top: none;
padding-top: 0;
}
.wcnc-meta-item__details div {
line-height: 1.5;
}
.fkcart-item-meta-content .fkcart-attr-wrap {
display: block;
margin-bottom: 4px;
}
.fkcart-item-meta-content .fkcart-attr-key {
font-weight: 600;
}
.fkcart-attr-key[data-attr-key*="wcnc_separator"] {
display: none;
}
.fkcart-attr-key[data-attr-key*="wcnc_separator"] + .fkcart-attr-value {
display: block;
height: 1px;
background-color: #e0e0e0;
margin: 10px 0;
padding: 0;
}
.job-item:only-child .wcnc-remove-wrapper {
display: none;
}
@keyframes scanline-lr {
0% {
left: 0;
}
100% {
left: calc(100% - 3px);
}
}
.dxf-canvas-container {
position: relative;
border-radius: var(--wcnc-radius-md);
overflow: hidden;
line-height: 0;
}
.dxf-canvas-container.is-scanning::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: var(--wcnc-accent-primary);
box-shadow: 0 0 10px 2px var(--wcnc-accent-primary);
opacity: 0.75;
animation: scanline-lr 2.5s linear infinite alternate;
}
.wcnc-material-select-wrapper {
display: flex;
align-items: center;
gap: 10px;
}
.wcnc-material-select-wrapper select {
flex: 1;
}
.wcnc-apply-material-to-all {
padding: 8px 12px;
font-size: 0.875rem;
font-weight: 600;
background: var(--wcnc-accent-secondary);
color: white;
border: none;
border-radius: var(--wcnc-radius-md);
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
display: none;
}
.wcnc-apply-material-to-all:hover {
background: var(--wcnc-accent-secondary-hover);
transform: translateY(-1px);
}
.dxf-info .dxf-part-error {
margin-top: 8px;
color: var(--wcnc-danger-color);
font-weight: 600;
font-size: 0.8125rem;
line-height: 1.5;
word-wrap: break-word;
}
.job-item.has-error {
border-color: var(--wcnc-danger-color);
box-shadow: 0 0 0 2px var(--wcnc-danger-color);
}

/* ... Add to bottom of file ... */

/* Result Wrapper Layout */
#wcnc-result {
    flex-wrap: wrap; /* Allow wrapping */
}

.wcnc-result-actions {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

/* Gallery Container */
.wcnc-nesting-gallery {
    display: flex;
    gap: 20px;
    overflow-x: auto; /* Horizontal scroll */
    padding-bottom: 15px;
    /* Smooth scrolling */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Individual Preview Cards */
.wcnc-result-preview-item {
    flex: 0 0 auto; /* Don't shrink */
    width: 250px;
    background: #fff;
    border: 1px solid var(--wcnc-border-color);
    border-radius: var(--wcnc-radius-md);
    padding: 10px;
    text-align: center;
    box-shadow: var(--wcnc-shadow);
}

.wcnc-result-preview-item p {
    margin: 10px 0 0 0;
    font-weight: 600;
    color: var(--wcnc-text-secondary);
    font-size: 0.9rem;
}

/* The Canvas */
.dxf-result-canvas {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    border: 1px solid #eee;
    background-color: #fff;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .wcnc-result-actions {
        flex-direction: column;
        gap: 15px;
    }
    .wcnc-result-preview-item {
        width: 200px;
    }
}

/* Diagnostics (admin-only) */
.wcnc-diagnostics {
    margin-top: 20px;
    padding: 15px;
    background: #fff;
    border: 1px solid var(--wcnc-border-color);
    border-radius: var(--wcnc-radius-md);
    box-shadow: var(--wcnc-shadow);
}

.wcnc-diagnostics h4 {
    margin-top: 0;
}

.wcnc-diagnostics table {
    width: 100%;
    border-collapse: collapse;
}

.wcnc-diagnostics th,
.wcnc-diagnostics td {
    border-bottom: 1px solid #eee;
    padding: 6px 8px;
    text-align: left;
    font-size: 0.9rem;
}

.wcnc-diagnostics details {
    margin-top: 10px;
}


/* Diagnostics breakdown lists */
.wcnc-diag-subrow th {
    border-bottom: none;
}
.wcnc-diag-subrow td {
    border-bottom: 1px solid #eee;
    padding-top: 0;
}
.wcnc-diag-breakdown {
    margin: 6px 0 0 0;
    padding-left: 18px;
    font-size: 0.85rem;
}
.wcnc-diag-breakdown li {
    margin: 2px 0;
    list-style: disc;
    overflow: hidden;
}
.wcnc-diag-breakdown li span:first-child {
    display: inline-block;
    max-width: 70%;
}