@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Share+Tech+Mono&display=swap');

.page-id-8602 #qodef-page-inner {
padding: 50px 0px 104px!important;
}
.page-id-8602 #qodef-page-outer {
background: rgb(26, 29, 36);
}
#wcnc-container {
margin: 20px auto;
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 5px;
background: #f9f9f9;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.job-item {
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
padding: 20px;
margin-bottom: 20px;
display: flex;
gap: 20px;
align-items: flex-start;
}
.job-inputs {
flex: 1;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
font-weight: 600;
margin-bottom: 5px;
font-size: 14px;
color: #333;
}
.job-item input[type="file"],
.job-item select,
.job-item input[type="number"] {
color:#fff!important;
width: 100%;
padding: 10px;
border: 1px solid #ff7618;
border-radius: 4px;
box-sizing: border-box;
font-size: 14px;
background: #ff7618;
}
.job-item input[type="file"] {
padding: 7px;
}
.job-item input[type="number"] {
margin: 0;
}
.dxf-preview-wrapper {
flex-shrink: 0;
width: 300px;
text-align: center;
position: relative;
overflow: hidden;
border-radius: 4px;
}
.dxf-info {
margin-top: 10px;
font-size: 12px;
text-align: left;
word-wrap: break-word;
color: #555;
}
.dxf-info p {
margin: 0 0 5px 0;
}
.dxf-info .dxf-filename {
font-style: italic;
}
.wcnc-buttons {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
#wcnc-add-job,
#wcnc-calculate {
padding: 12px 25px;
font-size: 16px;
font-weight: bold;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
#wcnc-add-job {
background: #555;
}
#wcnc-add-job:hover {
background: #333;
}
#wcnc-calculate {
background: #ff7618;
}
#wcnc-calculate:hover {
background: #e66a15;
}
#wcnc-calculate:disabled {
background: #ccc;
cursor: not-allowed;
}
.wcnc-remove-wrapper {
margin-top: 15px;
text-align: right;
padding-top: 15px;
}
.wcnc-remove-job {
padding: 8px 15px;
font-size: 14px;
color: white;
background-color: #d63638;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
.wcnc-remove-job:hover {
background-color: #b22222;
}
#wcnc-result {
margin-top: 20px;
padding: 15px;
border: 1px solid #ddd;
background: #fff;
border-radius: 4px;
font-size: 1.2em;
display: flex;
justify-content: space-between;
align-items: center;
}
#wcnc-result .price {
font-weight: bold;
color: #ff7618;
}
#wcnc-add-to-cart {
padding: 10px 20px;
background: #28a745;
font-size: 16px;
font-weight: bold;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
#wcnc-add-to-cart:hover {
background: #218838;
}
#wcnc-bulk-upload-area {
border: 2px dashed #ccc;
border-radius: 5px;
padding: 30px;
text-align: center;
margin-bottom: 20px;
background-color: #fdfdfd;
transition: border-color 0.2s, background-color 0.2s;
}
#wcnc-bulk-upload-area label {
cursor: pointer;
display: block;
}
#wcnc-bulk-upload-area p {
font-size: 1.2em;
font-weight: 600;
color: #555;
margin: 0 0 10px 0;
}
#wcnc-bulk-upload-area span {
color: #999;
display: block;
margin-bottom: 10px;
}
#wcnc-bulk-upload-area strong {
color: #ff7618;
text-decoration: underline;
}
#wcnc-bulk-upload-area.dragover {
border-color: #ff7618;
background-color: #fff8f2;
}
#wcnc-progress-status {
font-size: 16px;
color: #333;
font-family: Roboto, sans-serif;
font-weight: 600;
}
.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;
}

#wcnc-container {
background: #1a1d24;
border: 1px solid #444;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
color: #e0e0e0;
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
@keyframes scanline {
0% {
top: 0;
opacity: 0.7;
}
100% {
top: 100%;
opacity: 0;
}
}
#wcnc-bulk-upload-area {
position: relative;
overflow: hidden;
border: 2px dashed #ff7618;
background: #242830;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
#wcnc-bulk-upload-area:hover {
background: #2a2e37;
box-shadow: inset 0 0 15px rgba(255, 118, 24, 0.2);
}
#wcnc-bulk-upload-area.dragover {
background: #3a3f4a;
box-shadow: inset 0 0 20px rgba(255, 118, 24, 0.5);
}
#wcnc-bulk-upload-area p {
color: #fff;
font-weight: 700;
}
#wcnc-bulk-upload-area span {
color: #888;
}
.job-item {
background: #242830;
border: 1px solid #444;
transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.job-item:hover {
background: #2a2e37;
border-color: #ff7618;
box-shadow: 0 0 15px rgba(255, 118, 24, 0.2);
}
.form-group label {
color: #ff7618;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 13px;
}
.job-item input[type="file"],
.job-item select,
.job-item input[type="number"] {
background: #1f2229;
border: 1px solid #444;
color: #e0e0e0;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
color-scheme: dark;
}
.job-item input[type="file"]::file-selector-button {
background: #444;
border: none;
color: #e0e0e0;
border-right: 1px solid #555;
padding: 8px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.job-item input[type="file"]::file-selector-button:hover {
background: #555;
}
.dxf-preview-canvas {
width:300px;
height:225px;
border: 1px solid #444;
background-color: #1f2229;
background-image:
linear-gradient(rgba(0, 234, 255, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 234, 255, 0.1) 1px, transparent 1px);
background-size: 20px 20px;
transition: border-color 0.3s ease;
}
.job-item:hover .dxf-preview-canvas {
border-color: #ff7618;
}
.dxf-info {
color: #aab8c5;
}
.dxf-info p,
.dxf-info span {
font-family: 'Share Tech Mono', monospace;
font-size: 13px;
}
#wcnc-add-job,
#wcnc-calculate,
#wcnc-add-to-cart,
.wcnc-remove-job {
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
transition: all 0.3s ease;
}
#wcnc-add-job:hover,
#wcnc-calculate:hover,
#wcnc-add-to-cart:hover,
.wcnc-remove-job:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
#wcnc-calculate {
box-shadow: 0 0 10px rgba(255, 118, 24, 0.3);
}
#wcnc-calculate:hover {
box-shadow: 0 0 15px rgba(255, 118, 24, 0.7);
}
#wcnc-calculate:disabled {
background: #555;
color: #999;
box-shadow: none;
transform: none;
}
@keyframes progress-move {
0% {
background-position: 0 0;
}
100% {
background-position: 40px 40px;
}
}
#wcnc-progress-container {
padding: 15px;
border: 1px solid #444;
background: #242830;
border-radius: 4px;
}
#wcnc-progress-status {
color: #fff;
font-family: 'Share Tech Mono', monospace;
text-align: center;
font-size: 18px;
text-shadow: 0 0 5px #ff7618;
}
#wcnc-progress-bar-wrapper {
background: #1a1d24;
border: 1px solid #444;
padding: 3px;
box-shadow: inset 0 2px 5px rgba(0,0,0,0.4);
}
#wcnc-progress-bar {
background-color: #ff7618;
background-image: linear-gradient(
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
background-size: 40px 40px;
animation: progress-move 2s linear infinite;
box-shadow: 0 0 10px rgba(255, 118, 24, 0.5);
}
#wcnc-result {
background: #242830;
border: 1px solid #444;
color: #fff;
}
#wcnc-result .price {
font-family: 'Share Tech Mono', monospace;
font-size: 1.3em;
}
.job-item select:invalid {
color: #888;
}
.job-item select {
color: #e0e0e0;
}
.job-item select option {
background-color: #242830;
color: #fff;
padding: 8px 10px;
color-scheme: dark;
}
.job-item select option[value=""] {
color: #888;
}
.job-item select option:hover {
    background: #ff7618 !important;
    color: #000 !important;
}

select:active, select:hover {
    outline-color: #ff7618;
}

/* This rule was changed back to color: #ffffff */
.job-item select option:checked {
    background: #ff7618 !important;
    color: #ffffff !important; /* Changed this back from #000 */
}

#wcnc-container .job-item input[id^="quantity-input"]:focus {
    color: #ffffff !important; 
    border-color: #ff7618 !important; 
    box-shadow: 0 0 10px rgba(255, 118, 24, 0.5) !important; 
    outline: 1px solid #ff7618 !important; 
}
#wcnc-container .job-item select[id^="material-select"]:focus {
    color: #ffffff !important; 
    border-color: #ff7618 !important; 
    box-shadow: 0 0 10px rgba(255, 118, 24, 0.5) !important; 
    outline: 1px solid #ff7618 !important; 
}
@keyframes scanline-lr {
0% {
left: 0;
opacity: 0.7;
}
100% {
left: calc(100% - 3px);
opacity: 0.7;
}
}
.dxf-preview-wrapper::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3px;
height:225px;
background: linear-gradient(0deg, transparent, #ff7618, transparent);
box-shadow: 0 0 8px #ff7618;
border-radius: 3px;
z-index: 10;
opacity: 0;
animation: none;
transition: opacity 0.5s ease;
}
.dxf-preview-wrapper.scanning::after {
opacity: 0.7;
animation: scanline-lr 2.5s linear infinite alternate;
}
}