:root {
--nsk-anthrazit:  #2d2d2d; --nsk-dark:       #1a1a1a; --nsk-mid:        #555555; --nsk-border:     #e0e0e0;
--nsk-border-mid: #c8c8c8;
--nsk-bg:         #f5f5f5; --nsk-bg-indoor:  #efefef; --nsk-white:      #f8f8f8; --nsk-radius:     12px;
--nsk-shadow:     0 1px 4px rgba(0,0,0,.08);
--nsk-hint:       #888;
--nsk-font:       inherit;
}
.nsk-configurator {
max-width: 100%;
width: 100%;
margin: 0 auto 32px;
font-size: 15px;
line-height: 1.5;
font-family: var(--nsk-font);
color: var(--nsk-dark);
} .nsk-card {
background: var(--nsk-white);
border: 1px solid var(--nsk-border);
border-radius: var(--nsk-radius);
padding: 16px 18px 14px;
margin-bottom: 10px;
box-shadow: var(--nsk-shadow);
position: relative;
}
.nsk-card--indoor {
border-color: var(--nsk-border-mid);
background: var(--nsk-bg-indoor);
}
.nsk-card-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.nsk-card-header h4 {
font-size: 15px;
font-weight: 700;
margin: 0;
color: var(--nsk-dark);
}
.nsk-head-sub {
font-weight: 400;
font-size: 13px;
color: var(--nsk-hint);
}
.nsk-card-desc {
font-size: 13px;
color: var(--nsk-hint);
margin: -8px 0 14px;
} .nsk-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
min-width: 26px;
background: var(--nsk-anthrazit);
color: #fff;
font-size: 12px;
font-weight: 700;
border-radius: 50%;
flex-shrink: 0;
} .nsk-card--indoor .nsk-step-num {
background: var(--nsk-mid);
}
.nsk-step-num--icon {
background: none;
font-size: 20px;
width: 26px;
height: 26px;
} .nsk-type-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.nsk-type-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 12px 8px 10px;
border: 2px solid var(--nsk-border);
border-radius: var(--nsk-radius);
cursor: pointer;
text-align: center;
transition: border-color .15s, background .15s;
user-select: none;
position: relative;
background: #ffffff;
}
.nsk-type-card:hover {
border-color: #aaa;
background: var(--nsk-bg);
} .nsk-type-card.nsk-active-outdoor,
.nsk-type-card.nsk-active-indoor {
border-color: var(--nsk-anthrazit);
background: var(--nsk-anthrazit);
color: #fff;
}
.nsk-type-card.nsk-active-outdoor small,
.nsk-type-card.nsk-active-outdoor .nsk-type-label,
.nsk-type-card.nsk-active-indoor small,
.nsk-type-card.nsk-active-indoor .nsk-type-label {
color: rgba(255,255,255,.8);
}
.nsk-type-icon {
font-size: 24px;
line-height: 1;
}
.nsk-type-label {
font-size: 13px;
font-weight: 700;
line-height: 1.3;
}
.nsk-type-label small {
display: block;
font-weight: 400;
font-size: 11px;
color: var(--nsk-hint);
} .nsk-type-badge {
font-size: 10px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 20px;
margin-top: 2px;
}
.nsk-badge-outdoor {
background: #ebebeb;
color: #444;
}
.nsk-badge-indoor {
background: #e0e0e0;
color: #333;
} .nsk-type-card.nsk-active-outdoor .nsk-badge-outdoor,
.nsk-type-card.nsk-active-indoor  .nsk-badge-indoor {
background: rgba(255,255,255,.2);
color: #fff;
} .nsk-indoor-badge {
display: inline-block;
background: #e0e0e0;
color: #333;
font-size: 12px;
font-weight: 700;
padding: 3px 10px;
border-radius: 20px;
margin-bottom: 4px;
} .nsk-checkbox-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.nsk-checkbox-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 16px 10px 12px;
border: 2px solid var(--nsk-border-mid);
border-radius: var(--nsk-radius);
cursor: pointer;
text-align: center;
transition: all .15s;
user-select: none;
background: var(--nsk-white);
}
.nsk-checkbox-card input[type="checkbox"] { display: none; }
.nsk-checkbox-card:hover {
border-color: var(--nsk-mid);
background: var(--nsk-bg);
}
.nsk-checkbox-card.nsk-active {
border-color: var(--nsk-anthrazit);
background: var(--nsk-anthrazit);
color: #fff;
}
.nsk-checkbox-card.nsk-active .nsk-checkbox-label small {
color: rgba(255,255,255,.75);
}
.nsk-checkbox-icon { font-size: 26px; line-height: 1; }
.nsk-checkbox-label {
font-size: 13px;
font-weight: 700;
line-height: 1.3;
}
.nsk-checkbox-label small {
display: block;
font-weight: 400;
font-size: 11px;
color: var(--nsk-hint);
margin-top: 2px;
} .nsk-field { margin-bottom: 10px; }
.nsk-field:last-child { margin-bottom: 0; }
.nsk-field label {
display: block;
font-size: 13px;
font-weight: 600;
margin-bottom: 5px;
color: var(--nsk-dark);
}
.nsk-hint {
display: block;
font-size: 11px;
font-weight: 400;
color: var(--nsk-hint);
margin-top: 1px;
}
.nsk-field input[type="text"],
.nsk-field input[type="number"],
.nsk-field select {
width: 100%;
height: 45px;
padding: 0 12px;
font-size: 15px;
font-family: var(--nsk-font);
border: 1px solid var(--nsk-border);
border-radius: 8px;
box-sizing: border-box;
background: #ffffff;
color: var(--nsk-dark);
transition: border-color .15s;
-webkit-appearance: none;
appearance: none;
}
.nsk-card--indoor .nsk-field input[type="text"],
.nsk-card--indoor .nsk-field input[type="number"],
.nsk-card--indoor .nsk-field select {
border-color: var(--nsk-border-mid);
background: #ffffff;
}
.nsk-field select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 32px;
}
.nsk-field input:focus,
.nsk-field select:focus {
outline: none;
border-color: var(--nsk-anthrazit);
}
.nsk-field input[type="file"] {
width: 100%;
height: 45px;
padding: 0 10px;
font-size: 14px;
font-family: var(--nsk-font);
border: 1px solid var(--nsk-border);
border-radius: 8px;
box-sizing: border-box;
background: #ffffff;
line-height: 45px;
}
.nsk-upload-info {
font-size: 12px;
color: var(--nsk-hint);
margin-top: 4px;
} .nsk-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nsk-row-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.nsk-divider-label {
font-size: 11px;
font-weight: 700;
color: var(--nsk-mid);
text-transform: uppercase;
letter-spacing: .05em;
margin: 18px 0 12px;
}
.nsk-divider-or {
text-align: center;
font-size: 12px;
color: var(--nsk-hint);
margin: 18px 0 14px;
position: relative;
}
.nsk-divider-or::before,
.nsk-divider-or::after {
content: '';
position: absolute;
top: 50%;
width: 28%;
height: 1px;
background: var(--nsk-border);
}
.nsk-divider-or::before { left: 0; }
.nsk-divider-or::after  { right: 0; } .nsk-step-item,
.nsk-area-item,
.nsk-round-step-item {
background: var(--nsk-bg);
border: 1px solid var(--nsk-border);
border-radius: 8px;
padding: 14px;
margin-bottom: 10px;
}
.nsk-room-item {
background: #ebebeb;
border: 1px solid var(--nsk-border-mid);
border-radius: 8px;
padding: 14px;
margin-bottom: 10px;
}
.nsk-item-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.nsk-item-header strong { font-size: 13px; font-weight: 700; } .nsk-btn-add {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 18px;
font-size: 13px;
font-family: var(--nsk-font);
font-weight: 700;
border: 2px solid var(--nsk-border-mid);
border-radius: 8px;
background: #ffffff;
color: var(--nsk-anthrazit);
cursor: pointer;
transition: border-color .15s, background .15s, color .15s;
margin-top: 4px;
letter-spacing: .02em;
}
.nsk-btn-add span { font-size: 17px; font-weight: 400; line-height: 1; }
.nsk-btn-add:hover {
border-color: var(--nsk-anthrazit);
background: var(--nsk-anthrazit);
color: #ffffff;
}
.nsk-btn-remove {
padding: 4px 10px;
font-size: 12px;
font-family: var(--nsk-font);
border: 1px solid #ddd;
border-radius: 6px;
background: var(--nsk-white);
color: #c62828;
cursor: pointer;
transition: background .15s, color .15s;
white-space: nowrap;
}
.nsk-btn-remove:hover { background: #c62828; color: #fff; border-color: #c62828; } .nsk-result-card {
border-radius: var(--nsk-radius);
overflow: hidden;
margin-bottom: 16px;
border: 1px solid var(--nsk-border);
box-shadow: var(--nsk-shadow);
}
.nsk-result-breakdown {
padding: 14px 20px;
background: var(--nsk-bg);
border-bottom: 1px solid var(--nsk-border);
display: none;
}
.nsk-result-breakdown.has-values { display: block; }
.nsk-result-breakdown-row {
display: flex;
justify-content: space-between;
font-size: 13px;
color: #444;
margin-bottom: 5px;
}
.nsk-result-breakdown-row:last-child { margin-bottom: 0; }
.nsk-result-breakdown-label { color: #555; }
.nsk-result-priceinfo {
font-size: 11px;
color: #888;
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid #ddd;
} .nsk-result-total-row {
display: flex;
background: var(--nsk-anthrazit);
color: #fff;
padding: 18px 20px;
gap: 0;
}
.nsk-result-col { flex: 1; }
.nsk-result-col--price { text-align: right; }
.nsk-result-divider {
width: 1px;
background: rgba(255,255,255,.25);
margin: 0 20px;
flex-shrink: 0;
}
.nsk-result-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .05em;
opacity: .7;
margin-bottom: 4px;
}
.nsk-result-value {
font-size: 22px;
font-weight: 700;
line-height: 1.1;
}
.nsk-result-taxnote {
font-size: 11px;
opacity: .6;
margin-top: 3px;
}
.nsk-result-note {
padding: 12px 20px;
font-size: 12px;
color: var(--nsk-hint);
line-height: 1.5;
background: #fafafa;
border-top: 1px solid var(--nsk-border);
} .nsk-price-hint {
display: inline-block;
font-size: 14px;
font-style: italic;
color: var(--nsk-hint);
} .nsk-material-price {
display: none;
margin-top: 4px;
margin-bottom: 8px;
font-size: 13px;
color: var(--nsk-mid);
}
.nsk-material-price.visible {
display: block;
}
.nsk-material-price strong {
color: var(--nsk-anthrazit);
font-size: 15px;
} @media (max-width: 580px) {
.nsk-card { padding: 14px 14px 10px; }
.nsk-type-grid,
.nsk-checkbox-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.nsk-row-2col,
.nsk-row-3col { grid-template-columns: 1fr; gap: 0; }
.nsk-result-total-row { flex-direction: column; gap: 12px; }
.nsk-result-col--price { text-align: left; }
.nsk-result-divider { display: none; }
.nsk-result-value { font-size: 20px; } .nsk-field { margin-bottom: 10px; }
.nsk-field label { font-size: 14px; margin-bottom: 4px; }
.nsk-field .nsk-hint { font-size: 12px; } .nsk-field input[type="text"],
.nsk-field input[type="number"],
.nsk-field select {
font-size: 16px;
height: 45px;
padding: 0 12px;
} .nsk-type-section > .nsk-card,
.nsk-type-section > div > .nsk-card { margin-bottom: 10px; } .nsk-card-header { margin-bottom: 10px; }
.nsk-card-header h4 { font-size: 14px; }
.nsk-card-desc { font-size: 12px; margin-bottom: 8px; }
} .nsk-sqm-preview {
grid-column: 1 / -1;
font-size: 13px;
color: #27ae60;
font-weight: 600;
margin-top: -4px;
margin-bottom: 0;
min-height: 0;
transition: opacity .2s;
}
.nsk-sqm-preview.empty { color: #999; font-weight: 400; } .nsk-profile-meter {
font-size: 12px;
color: #888;
font-style: italic;
} #nsk-configurator select,
#nsk-configurator input[type="text"],
#nsk-configurator input[type="number"] {
height: 45px !important;
min-height: 45px !important;
font-size: 16px !important;
padding: 0 12px !important;
line-height: 45px !important;
-webkit-appearance: none !important;
appearance: none !important;
border-radius: 8px !important;
} .nsk-upload-zone {
border: 2px dashed #ccc;
border-radius: 8px;
padding: 40px 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
background: #fff;
}
.nsk-upload-zone:hover,
.nsk-upload-zone.drag-over {
border-color: #1a73e8;
background: #fff;
}
.nsk-upload-prompt {
font-size: 15px;
color: #666;
pointer-events: none;
} #nsk-files-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.nsk-file-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border: 1px solid #ddd;
border-radius: 6px;
background: #fff;
}
.nsk-file-icon {
font-size: 24px;
flex-shrink: 0;
}
.nsk-file-info {
flex: 1;
min-width: 0;
}
.nsk-file-name {
font-size: 14px;
font-weight: 500;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nsk-file-size {
font-size: 12px;
color: #888;
}
.nsk-file-remove {
background: #fff;
border: 1px solid #e74c3c;
color: #e74c3c;
padding: 6px 14px;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
transition: all 0.2s;
flex-shrink: 0;
}
.nsk-file-remove:hover {
background: #e74c3c;
color: #fff;
}
@media (max-width: 768px) {
.nsk-upload-zone {
padding: 30px 15px;
}
.nsk-file-item {
padding: 10px;
}
} .single_add_to_cart_button {
background: #3d3d3d !important;
color: #fff !important;
border: none !important;
padding: 10px 32px !important;
font-size: 15px !important;
font-weight: 500 !important;
border-radius: 99px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
text-transform: none !important;
letter-spacing: 0 !important;
display: inline-block !important;
text-align: center !important;
line-height: 1.33 !important;
}
.single_add_to_cart_button:hover {
background: #2a2a2a !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.single_add_to_cart_button:active {
transform: translateY(0);
}
.single_add_to_cart_button:disabled {
background: #ccc !important;
cursor: not-allowed !important;
transform: none !important;
} label:has(input[name="nsk_podest_type"]) {
background: #fff;
border: 2px solid #ddd;
transition: all 0.2s;
}
label:has(input[name="nsk_podest_type"]) small {
color: #666;
}
label:has(input[name="nsk_podest_type"]):hover {
border-color: #aaa;
background: #f9f9f9;
}
label:has(input[name="nsk_podest_type"]:checked) {
border-color: #2c2c2c !important;
background: #2c2c2c !important;
}
label:has(input[name="nsk_podest_type"]:checked) div,
label:has(input[name="nsk_podest_type"]:checked) small {
color: #fff !important;
}
.nsk-stair-type-option {
padding: 10px;
border: 2px solid #ddd;
border-radius: 8px;
cursor: pointer;
text-align: center;
transition: all 0.2s;
display: block;
background: #fff;
}
.nsk-stair-type-option small {
color: #666;
}
.nsk-stair-type-option:hover {
border-color: #aaa;
background: #f9f9f9;
}
.nsk-stair-type-option:has(input:checked) {
border-color: #2c2c2c;
background: #2c2c2c;
}
.nsk-stair-type-option:has(input:checked) div,
.nsk-stair-type-option:has(input:checked) small {
color: #fff !important;
}