@import "/media/css/arialmt.css";
.constructor-page {user-select: none;position: relative}
.constructor__door-inner img:not(#doors)#doorNal- {    width: 116%;
    left: -8%;z-index: 3;
}
.constructor__door-inner img:not(#doors)#doorNal-100 {width: 122.21%;left:-11.1%;z-index: 3}
.constructor__door-inner img:not(#doors)#doorNal-200 {width: 133.3%;left:-11%;z-index: 3}
.constructor__door-inner img:not(#doors)#doorNal-300 {width: 143.9%;left:-11.1%;z-index: 3}
.constructor__door-inner img:not(#doors)#doorNal-400 {width: 154.7%;left:-11.1%;z-index: 3}
.constructor-page .container{display: flex;}
.constructor-page *{user-select: none}
.constructor-page img{pointer-events: none; }
.constructor__left {width: 60%;display: flex;flex-shrink: 0;align-items: flex-start;position: relative;left:0;}
.constructor__bgs {width: 15%;display: flex;flex-direction: column;padding-right:20px}
.constructor__bgs div {margin-bottom: 10px;position: relative;cursor: pointer}
.constructor__bgs div:before {content:'';width: calc(100% + 10px);height: calc(100% + 10px);position: absolute;left:-5px;top:-5px;transition: .2s}
.constructor__bgs div.active:before {background: #ffbf00}
.constructor__bgs div:not(.active):hover:before {background: #999}
.constructor__bgs div img {display: block;width: 100%;position: relative;z-index: 2}
.constructor__result{width: 65%;position: sticky;left:0;top:50px;}
.constructor__result-data{width: 20%;display: flex;flex-direction: column;padding-left:20px}
.constructor__result #frame {display: block;width: 100%;}
.constructor__result #door {display: block;width: 100%;}

.constructor__result-item {display: flex;flex-direction: column;margin-bottom: 15px;font-size: 14px}
.constructor__result-item span:first-child{font-weight: 400;color:#555}
.constructor__result-item span:last-child{font-weight: 600;color:#000}
.constructor__right {width: 50%;display: flex;flex-direction: column;padding-left: 20px}
.constructor__nav-tabs {display: flex;align-items: center;flex-wrap: wrap;width: 100%;transition: .3s}
/*.constructor__nav-tabs > div {max-width: 100%; transition: max-width 2s ease;}
.constructor__nav-tabs > div.has-childrens {width: 100%}*/

.constructor__nav-tabs > .btn,.constructor__nav-tabs > .group-block {margin-right: 10px;margin-bottom: 10px}
.constructor__nav-tabs .btn.btn-default {color:#666;background: #ddd;}
.constructor__nav-tabs .btn.btn-default:hover {color:#333;background: #bbb;}
.constructor__variants {display: flex;flex-direction: column;margin-top:20px}
.constructor__variant{width: 100%;display: flex;}
.constructor__variant-items {display: grid;grid-template-columns:repeat(5,1fr);grid-gap: 20px;width: 100%}
.constructor__variant-item {position: relative;display: flex;flex-direction: column;transition: .3s}
.constructor__variant-item:before {content:'';width: calc(100% + 10px);height: calc(100% + 10px);position: absolute;left:-5px;top:-5px;transition: .2s}
.constructor__variant-item div{display: block;width: 100%;position: relative}
.constructor__variant-item div:after {content:'';display: block;width: 100%;padding-bottom: 120%;}
.constructor__variant-item.active:before {background: #ffbf00}
.constructor__variant-item:not(.active):hover:before {background: #ddd}


.constructor__variants .constructor__variant:not(.active){display: none}
.constructor__variant-item img {width: 100%;position: absolute;z-index: 2;left:0;top:0;height: 100%;object-fit: contain}
.constructor__variant-item span {width: 100%;text-align: center;z-index: 2;background: #fff;bottom: 0;left:0;margin-top:10px;font-size: 13px;    overflow-wrap: anywhere;}
.constructor__door{position: sticky;width: 100%;left:0;top:50px;}
.constructor__bg img {position: relative;display: block;width: 100%;}
.constructor__door-inner {position: absolute;width: 34%;left:21%;bottom: 7.5%;}
.constructor__door-inner #doors {position: relative;display: block;width: 100%;}
.constructor__door-inner img:not(#doors) {position: absolute;left:0;bottom:0;width: 100%;z-index: 2}

.constructor-page {position: relative}
#app {width: 100%;display: flex;}
.constructor__page {display: flex;width: 100%;}
.select-doors__wrapper {width: 100%;display: flex;flex-direction: column}
.select-doors__container {margin:auto;display: flex;flex-direction: column;width: 100%;}
.select-doors__container >span {width: 100%;text-align: center;margin-bottom: 40px;font-size: 32px;font-weight: 800}
.select-doors__items {display: grid;grid-template-columns: 1fr 1fr;grid-gap: 20px;}
.select-door__item {position: relative;display: flex;}
.door__item-image {width: 100%;position: relative;overflow: hidden}
.door__item-image:after {content:'';width: 100%;padding-bottom: 60%;display: block}
.door__item-image:before {content:'';width: 100%;height: 100%;opacity: 0;background: rgba(0,0,0,.6);transition: .2s;z-index: 2;position: absolute}

.door__item-image img {position: absolute;left:0;top:0;width: 100%;height: 100%;object-fit: cover;transition: .2s}
.door__item-image:hover img {transform: scale(1.05)}
.door__item-image:hover:before {opacity: 1}
.select-door__item span {position: absolute;left:10%;top:50%;transform: translateY(-50%);background: #ffbf00;color:#fff;font-size: 24px;padding: 10px 25px;font-weight: 400;z-index: 3}
.constructor__tab-types {display: flex;width: 100%;margin-bottom: 20px;}
.constructor__tab-types .btn:not(.btn-site){background: #ddd;color:#666}
.constructor__tab-types .btn:not(.btn-site):hover{background: #bbb;color:#333}

/*.constructor__tab-types + .constructor__nav-tabs .btn.btn-site{background: #ffc819;border:1px solid #ffc819}
.constructor__tab-types + .constructor__nav-tabs .btn.btn-site:hover{background: #ffc819;border:1px solid #ffc819}*
.category-tree .constructor__tab-types:nth-child(1) .btn-site{background: #ffdd71;color:#111}
.category-tree .constructor__tab-types:nth-child(2) .btn-site{background: #ffebab;color:#111}
.category-tree .constructor__tab-types:nth-child(3) .btn-site{background: #f4ebc7;color:#111}*/
.constructor__tab-types > * + * {margin-left: 10px}
#preloader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff; /* Задний фон прелоадера */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #ccc;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.category-tree {display: flex;max-width: 100%;flex-wrap: wrap}
/*.constructor__nav-subtabs {border-radius: 5px;margin:10px 0}*/
/*.constructor__nav-subtabs button {padding: 3px 5px;border-radius: 3px;color:#555;margin:5px;}
.constructor__nav-subtabs button:not(.active):hover {background: #ddd;color:#333}
.constructor__nav-subtabs button.active {color: #000;text-decoration: underline}*/
/* Анимация вращения */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.constructor__mobile-btns{display: none}
.show-detail-data,.constructor__result-head {display: none}
/*
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: cover; /* можно заменить на contain, repeat и т.п. */

.category-tree__item {
    margin: 4px;
    border-radius: 5px;
    flex-direction: column;
    align-items: flex-start;
    display: flex;flex-wrap: wrap;
    transition: width 2s ease;
    width: auto;
    max-width: 100%;
}
.category-tree__item.fullWidth {width: 100%;padding: 5px;}
.category-tree__item .btn {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
}

.category-tree__item .arrow {
    display: inline-block;
    transform: rotate(0deg);
    transition: transform 0.2s ease;
}

.category-tree__item .arrow.active {
    transform: rotate(90deg);
}
.group-block { max-width: 300px;transition: width 10s ease}
.has-childrens{padding: 5px;background: #f0f0f0;margin-bottom: 10px;width: 100%;max-width: 100%}

@media (max-width: 992px){
    .select-doors__container >span {font-size: 16px;margin-bottom: 10px;}
    .select-door__item span {font-size: 16px}
    .select-doors__items {grid-template-columns: 1fr}
    .constructor__page{flex-direction: column}
    .constructor__left{top:0;position: relative;width: 100%;flex-wrap: wrap}
    .constructor__right{padding-left: 0;padding-top: 20px;width: 100%;}
    .constructor__bgs{width: 20%;padding-right: 10px}
    .constructor__result{width: 80%;position: relative}
    .constructor__result-data {order:3;width: 100%;padding: 10px 0 0 0;}


    .constructor__result-data{position: absolute;right:100%;top:0;background: #fff;z-index: 10;padding: 20px;transition: .2s}
    .constructor__result-data.active{right:0}
    .constructor__left{position: sticky;top:61px;width: calc(100% + 50px);background: #fff;padding: 5px;z-index: 5;margin-left: -25px;}

    .constructor__variant-items{grid-template-columns: repeat(3,1fr)}
    .constructor__variant-item span{font-size: 10px}
    .show-detail-data {position: absolute;right:5px;bottom: 5px;background: #ffbf00;color:#fff;padding: 5px 12px;border-radius: 3px;display: block;z-index: 5}
    .constructor__result-head {display: flex;align-items: center}
    .constructor__result-head span {font-weight: bold;font-size: 16px}
    .constructor__result-head button{color:#000;margin-left: auto}
}
.number-variants {display: flex;flex-wrap: wrap;width: 100%}
.number-variants > div {position: relative;border-radius: 5px;background: #fff;padding: 5px;margin:5px;width: calc(25% - 10px)}
.number-variants > div strong{font-weight: 600;color:#333}
.number-variants > div ul {list-style: none;display: flex;flex-direction: column;background: #fff;/*box-shadow: 0 5px 5px rgba(0,0,0,.3);position: absolute;padding: 5px;width: 100%;top:100%;left:0*/margin-top:10px}
.number-variants > div ul li {margin-top:5px}
.number-variants > div ul li label{display: flex;align-items: center}
.number-variants > div ul li label > span{margin-left: 5px;color:#333;font-size: 13px}

.number-variants > div ul input[type="radio"] {width: 20px;height: 20px;border-radius: 50px;background: #ccc}

.number-variants > div ul input[type="radio"]:checked {background: #ffbf00;}
.door-number {position: absolute;z-index: 112;font-weight: bold;font-size: 20px;line-height: 1}
.door-number span:not(.mask-3d){ -webkit-background-clip:text;font-family: 'Arial MT';font-weight: 600;
    -webkit-text-fill-color: transparent;position: relative;z-index: 2}
.door-number span.is3d{  filter: drop-shadow(2px 2px #222);}
/*.door-number.inside.number-door.number-direction-horizontal{left:89%;top:1%}
.door-number.inside.number-door.number-direction-vertical {left:93%;top:0%;word-wrap: break-word;width: 1px}
.door-number.inside.number-top{left:89%;top:-4%}
.door-number.inside.number-right.number-direction-horizontal {left:104%;top:1%}
.door-number.inside.number-right.number-direction-vertical {left:104%;top:0%;word-wrap: break-word;width: 1px}*/
.door-number.outside{position: absolute;left:120%;top:0%;width: 33%}
.door-number.outside.doorNumberNal-100{}
.door-number.outside.doorNumberNal-200{left:131%}
.door-number.outside.doorNumberNal-300{left:142%}
.door-number.outside.doorNumberNal-400{left:153%}
.door-number img {display: block;position: relative !important;}
.door-number.outside span{position: absolute;bottom:5%;width: 100%;text-align: center;z-index: 3;font-size: 2vw;}
.door-number.outside span.mask-3d{z-index: 2;position: absolute;bottom:calc(5% - 1px);text-indent:1px;color: #000;opacity: .7;font-weight: 600;}
.number-direction-horizontal.number-position-1.number-subposition-1.doorNumberNal- {}
.door-number.inside{font-size: 1.85vw;line-height: 1;font-weight: normal;position: absolute;}

.door-number.inside span.mask-3d{z-index: 1;position: absolute;left:1px;top:2px;color: #000;opacity: .7;font-weight: 600;font-family: 'Arial MT';}
.door-number.inside.number-direction-vertical.number-position-1 span.mask-3d,
.door-number.inside.number-direction-vertical.number-position-2 span.mask-3d,
.door-number.inside.number-direction-vertical.number-position-4  span.mask-3d,
.door-number.inside.number-position-2.number-subposition-1 span.mask-3d,.number-position-2 span {width: 24px;word-wrap: break-word}
.number-position-2 {    left: -10.5%;
    top: 2%;
    width: 5px;word-wrap: break-word;
    line-height: 85% !important;
}
.door-number.inside.number-position-1.number-subposition-1{left:2%;top:1.5%}
.door-number.inside.number-position-1.number-subposition-3{left:50%;top:1.5%;transform: translateX(-50%)}
.door-number.inside.number-position-1.number-subposition-2{right:2%;top:1.5%;}

.door-number.inside.number-direction-vertical {width: 24px;word-wrap: break-word;line-height: 85%;}
.number-position-1.number-direction-vertical {top:2% !important;}
.door-number__input {margin-left:20px;display: flex;align-items:center;border:none;}
.door-number__input strong{font-weight: 600;color:#333}
.door-number__input input[type=number]{padding: 6px;margin-left:10px;border:1px solid #ccc;width: 50px;text-align: center}
.door-number__input input[type=text]{padding: 6px;margin-left:10px;border:1px solid #ccc;width: 50px;text-align: center}
.door-number__input input[type=checkbox]{width: 20px;height: 20px;border-radius: 50px;background: #ccc;margin-right: 5px}
.door-number__input input[type=checkbox]:checked {background: #ffbf00;}
.door-number__tree {width: 100%}

/* наличник верх */
.door-number.inside.number-position-3 {bottom:101.2%;width: auto}
.door-number.inside.number-position-3.number-subposition-1{left:-10.5%;}
.door-number.inside.number-position-3.number-subposition-3{left:50%;transform: translateX(-50%)}
.door-number.inside.number-position-3.number-subposition-2{right:-8.5%}
.door-number.inside.number-position-3.number-subposition-2.doorNumberNal-200{right:-19.5%}
.door-number.inside.number-position-3.number-subposition-2.doorNumberNal-300{right:-30%}
.door-number.inside.number-position-3.number-subposition-2.doorNumberNal-400{right:-35.5%}

/* наличник справа */
.door-number.inside.number-position-4 {top:4.5%;text-align: center}
.door-number.inside.number-position-4.number-direction-vertical{top:5%}
.door-number.inside.number-position-4.doorNumberNal- {left:111%;}
.door-number.inside.number-position-4.number-direction-vertical.doorNumberNal- {left:111%;}
.door-number.inside.number-position-4.doorNumberNal-100 {left:101%;}
.door-number.inside.number-position-4.number-direction-vertical.doorNumberNal-100 {left:101%;}
.door-number.inside.number-position-4.doorNumberNal-200:not(.number-direction-vertical) {left:102%;width: 20%;}
.door-number.inside.number-position-4.number-direction-vertical.doorNumberNal-200 {left:107%;}
.door-number.inside.number-position-4.doorNumberNal-300:not(.number-direction-vertical) {left:103%;width: 30%}
.door-number.inside.number-position-4.number-direction-vertical.doorNumberNal-300 {left:113%;}
.door-number.inside.number-position-4.doorNumberNal-400:not(.number-direction-vertical) {left:109%;width: 30%}

.door-number.inside.number-position-4.number-direction-vertical.doorNumberNal-400 {left:117%;}



.number-check {width: 100%;display: flex;margin-top:10px;align-items: center}
.number-check label {margin-right: 10px;display: flex;align-items: center;}
.number-check label span {    margin-left: 5px;color: #333;font-size: 13px;}
.number-check input[type="radio"] {width: 20px;height: 20px;border-radius: 50px;background: #ccc}
.number-check input[type="radio"]:checked {background: #ffbf00;}

.constructor__trims_colors{margin-top:20px;padding: 10px;background: #f0f0f0;border-radius: 5px}
.color-trims-categories .btn:not(.btn-site){background: #ddd;color:#666;}
.color-trims-categories .btn:not(.btn-site):hover{color: #333;
    background: #bbb;}