/**************** ORDER PAGE ****************//**************** ORDER PAGE ****************//**************** ORDER PAGE ****************/
/**************** ORDER PAGE ****************//**************** ORDER PAGE ****************//**************** ORDER PAGE ****************/
/**************** ORDER PAGE ****************//**************** ORDER PAGE ****************//**************** ORDER PAGE ****************/

#order {width: 100%; max-width: 450px; margin: 0px auto; padding: 0px 18px;}

#order .btn {min-height: 48px; padding: 14px 18px 14px 18px; font-size: 14px; line-height: 20px; border-radius: 9px;}
#order .btn > svg {height: 20px;}

#order .btn.geo {position: absolute; top: 12px; right: 18px; min-height: 30px; padding: 0px; background-color: transparent;}
#order .btn.geo > svg {height: 24px;}

#order .order-title {width: 100%; padding: 36px 0px 12px 0px; font-weight: 800; font-size: 24px; line-height: 36px; text-align: center; color: var(--color-first);}

#order .order-date {width: 100%; padding: 0px 0px 24px 0px; font-weight: 400; font-size: 16px; line-height: 24px; text-align: center; color: var(--color-black);}
#order .order-date .date {padding: 6px 0px 0px 0px; font-weight: 800; color: var(--color-first);}

#order .order-top-text {width: 100%; padding: 0px 0px 12px 0px; font-weight: 400; font-size: 16px; line-height: 24px;}
#order .order-top-text .main {padding: 0px 0px 12px 0px; font-weight: 800; text-align: center;}
#order .order-top-text .main.yellow {font-size: 24px; line-height: 36px; color: var(--color-second); text-shadow: 0px 1px 0px hsla(210,80%,20%,0.48);}
#order .order-top-text .li {padding: 0px 0px 12px 36px;}
#order .order-top-text .li svg {display: block; position: absolute; top: 0px; left: 0px; width: 24px; aspect-ratio: 1; fill: var(--color-grey-text);}
#order .order-top-text .li.on svg {fill: var(--color-second);}

/***/ html[dir="rtl"] #order .order-top-text .li {padding: 0px 36px 12px 0px;}
/***/ html[dir="rtl"] #order .order-top-text .li svg {left: auto; right: 0px;}

#order .info-pad {width: 100%; padding: 12px 0px 12px 0px;}
#order .info-wrapper {margin: 0px 9px 9px 0px;}
#order .info-box {width: 100%; padding: 0px 18px 0px 18px; z-index: 2;}
#order .info-bg {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-white); border-radius: 18px; pointer-events: none; overflow: hidden;}
#order .info-bg svg {display: block; position: absolute; top: 0px; right: 0px; width: 100%; aspect-ratio: 2; transform: translate(55%,-45%) rotate(31deg); opacity: 0.24;}
#order .info-shadow {position: absolute; top: 9px; left: 9px; width: 100%; height: 100%; background-color: var(--color-first); border-radius: 20px; z-index: 1;}

/***/ html[dir="rtl"] #order .info-bg svg {right: auto; left: 0px; transform: translate(-55%,-45%) rotate(-31deg);}
/***/ html[dir="rtl"] #order .info-box .item .count {width: 36px; padding: 0px 3px 0px 3px; text-align: center;}

#order .info-box .tail-title {padding: 15px 0px 0px 0px;}
#order .info-box .tail-title b {height: 26px; font-size: 20px; line-height: 26px;}
#order .info-box .tail-title .tail {height: 26px;}

#order .info-box .info-list {width: 100%; padding: 6px 0px 6px 0px;}
#order .info-box .info {width: 100%; padding: 9px 0px 9px 0px; font-weight: 400; font-size: 14px; line-height: 20px; color: var(--color-black); border-bottom: solid 1px var(--color-grey-border);}
#order .info-box .info:last-child {border-bottom: none;}
#order .info-box .info .name {-webkit-flex: 1 20 auto; flex: 1 20 auto;}
#order .info-box .info .name b {font-weight: 800;}
#order .info-box .info .light {width: 100%; color: var(--color-grey-text);}
#order .info-box .info .warning {width: 100%; font-weight: 600; color: var(--color-error-text);}
#order .info-box .info .value {width: 45%; padding: 0px 12px 0px 12px; font-weight: 800; color: var(--color-first);}
#order .info-box .info .value.red {color: var(--color-error-text);}
#order .info-box .info .value a {color: var(--color-second-border);}
#order .info-box .info .brush {background-color: hsla(300,100%,84%,1);}
#order .info-box .item .name.big {color: var(--color-error-text);}
#order .info-box .item .name .plus {color: var(--color-second-border);}
#order .info-box .item .count {width: 60px; text-align: end;}
#order .info-box .info-img {width: 100%; padding: 12px 12px 12px 12px;}
#order .info-box .info-img img {display: block; width: 100%;}
#order .info-box .pay-box {width: 100%; padding: 18px 0px 6px 0px;}
#order .info-box .pay-box > .btn {margin-bottom: 18px;}
#order .info-box .pay-list {width: 100%; padding: 0px 0px 0px 0px;}
#order .info-box .pay-list img {display: block; height: 18px; margin: 0px 6px 6px 6px;}
#order .info-box .pay-check {padding: 18px 0px 12px 0px; font-weight: 800; font-size: 24px; line-height: 36px; text-align: center; color: var(--color-second);}
#order .info-box #pay-warning-text {display: none; width: 100%; padding: 0px 0px 24px 0px; font-weight: 800; font-size: 16px; line-height: 24px; text-align: center; color: var(--color-error-text);}

#order .info-box.form-box {width: 100%; padding: 0px 0px 0px 0px; z-index: 2;}
#order .info-box.form-box .tail-title {padding: 15px 18px 6px 18px;}

#order .form-box .form-list {width: 100%; padding: 6px 6px 6px 6px;}
#order .form-box .form-item-pad {width: 100%; padding: 12px 12px 12px 12px;}
#order .form-box .form-item-pad.floor {width: 30%;}
#order .form-box .form-item-pad.elevator {width: 40%; padding: 12px 0px 12px 0px;}
#order .form-box .form-item-pad.crane {width: 30%;}
#order .form-box .form-item-box {width: 100%;}
#order .form-box .form-item-box legend {display: block; position: absolute; top: -3px; left: 9px; height: 6px; padding: 0px 6px; font-weight: 600; font-size: 14px; line-height: 6px; color: var(--color-first); background-color: var(--color-white);}
#order .form-box .form-item-box .input {height: 48px; border-radius: 9px;}
#order .form-box .form-item-box .input input {padding: 1px 12px 0px 12px; font-weight: 400; font-size: 14px; line-height: 20px;}
#order .form-box .form-item-box .select {height: 48px; padding: 0px 6px 0px 6px; border-radius: 9px;}
#order .form-box .form-item-box .select select {padding: 1px 3px 0px 6px; font-weight: 400; font-size: 14px; line-height: 20px;}
#order .form-box .form-item-box .textarea {width: 100%; height: 84px; padding: 12px 0px 12px 0px; border-radius: 9px;}
#order .form-box .form-item-box .textarea textarea {padding: 1px 12px 0px 12px; font-weight: 400; font-size: 14px; line-height: 20px;}
#order .form-box .form-item-box .input.error {border: solid 1px var(--color-error-border);}
#order .form-box .form-item-box .input.error ~ legend {color: var(--color-error-text);}
#order .form-box .form-item-box .textarea.error {border: solid 1px var(--color-error-border);}
#order .form-box .form-item-box .textarea.error ~ legend {color: var(--color-error-text);}

/**/ html[dir="rtl"] #order .form-box .form-item-box legend {left: auto; right: 9px;}

#order .form-box .form-item-box.readonly {pointer-events: none;}
#order .form-box .form-item-box.readonly legend {background-color: transparent;}
#order .form-box .form-item-box.readonly .input {background-color: var(--color-grey-bg-light); border: solid 1px var(--color-grey-bg-light);}
#order .form-box .form-item-box.readonly .select {background-color: var(--color-grey-bg-light); border: solid 1px var(--color-grey-bg-light);}
#order .form-box .form-item-box.readonly .textarea {background-color: var(--color-grey-bg-light); border: solid 1px var(--color-grey-bg-light);}

#order .info-pad .sync {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-white); border-radius: 24px; opacity: 0; pointer-events: none; transition: opacity linear 200ms;}
#order .info-pad .sync .flexac {width: 100%; height: 100%;}
#order .info-pad .sync svg {width: 60px; aspect-ratio: 1; fill: var(--color-first); animation: iso-sync 2000ms infinite linear;}
#order .info-pad.sync .sync {opacity: 1 !important; pointer-events: auto !important;}
#order .info-pad.nobg .sync {background-color: transparent;}
#order .info-pad.nobg.sync > * {opacity: 0; pointer-events: none;}

#order .info-box .sms-title {padding: 15px 0px 0px 0px; font-weight: 400; font-size: 16px; line-height: 24px; text-align: center;}
#order .info-box .sms-title b {font-weight: 800;}
#order .info-box .sms-send-box {padding: 12px 0px 24px 0px;}
#order .info-box .sms-code-box {padding: 12px 0px 24px 0px;}
#order .info-box .sms-code-box .input {max-width: 180px;}
#order .info-box .sms-code-box .input input {padding: 1px 12px 0px 12px; text-align: center;}
#order .info-box .sms-code-box .error-text {display: none; width: 100%; padding: 12px 0px 0px 0px; font-weight: 400; font-size: 16px; line-height: 24px; text-align: center; color: var(--color-error-text);}
#order #sms-code-box.error .input {border: solid 1px var(--color-error-border);}
#order #sms-code-box.error .error-text {display: block;}

#order .info-line-box {width: 100%; margin: 24px 0px 24px 0px; height: 1px; background-color: var(--color-grey-border);}

#order .contacts-box {width: 100%; padding: 0px 0px 36px 0px;}
#order .contacts-title {width: 100%; padding: 0px 0px 12px 0px; font-weight: 800; font-size: 24px; line-height: 30px; text-align: center; color: var(--color-first);}
#order .contacts {width: auto;}
#order .contacts .icon {width: 36px; aspect-ratio: 1; margin: 0px 0px 0px 24px; border-radius: 9px;}
#order .contacts .icon svg {display: block; width: 100%; height: 100%; fill: var(--color-white);}
#order .contacts .icon.whatsapp {display: block; background-color: #25D366;}
#order .contacts .icon.telegram {display: block; background-color: #2AABEE;}
#order .contacts .phone {margin: 0px 12px 0px 0px;}
#order .contacts .phone .icon {margin: 0px 12px 0px 0px; height: 36px; padding: 8px; background-color: var(--color-second); box-sizing: border-box;}
#order .contacts .phone .text {display: block; padding: 7px 0px 5px 0px; font-weight: 600; font-size: 24px; line-height: 24px; color: var(--color-first);}

#order .info-text-box {margin: 36px 0px 0px 0px; padding: 36px 0px 12px 0px; font-weight: 400; font-size: 14px; line-height: 20px; color: var(--color-black); border-top: solid 1px var(--color-grey-border);}
#order .info-text-box .title {padding: 0px 0px 12px 0px; font-weight: 800; font-size: 24px; line-height: 36px; text-align: center;}
#order .info-text-box .line {width: 100%; margin: 12px 0px 12px 0px; height: 1px; background-color: var(--color-grey-border);}
#order .info-text-box h4 {width: 100%; padding: 12px 0px 12px 0px; font-weight: 800; font-size: inherit; line-height: inherit;}
#order .info-text-box p {width: 100%; padding: 0px 0px 12px 0px;}
#order .info-text-box b {font-weight: 800;}

#order .agreement-scroll-box {width: 100%; height: 420px; margin: 12px 0px 0px 0px; overflow-y: auto; font-weight: 400; font-size: 12px; line-height: 18px; color: var(--color-black);}
#order .agreement-scroll-box .scroll-bg {width: 100%; padding: 12px 12px 12px 12px; background-color: var(--color-grey-bg-light);}
#order .agreement-scroll-box p {width: 100%; padding: 0px 0px 12px 0px;}
#order .agreement-scroll-box p:last-child {padding-bottom: 0px;}
#order .agreement-scroll-box b {font-weight: 800;}
#order .agreement-scroll-box u {font-weight: 800;}
#order .agreement-scroll-box ul {list-style-type: disc; padding-right: 15px;}
#order .agreement-scroll-box li {display: list-item; list-style-type: inherit; padding-bottom: 12px;}
#order .agreement-scroll-box ul.nobull {list-style-type: none; margin-top: -6px; margin-bottom: -6px; padding-right: 0px; padding-bottom: 0px;}
#order .agreement-scroll-box ul.nobull li {display: block; list-style-type: none; padding-bottom: 6px;}

#order .agreement-check-box {width: 100%; padding: 24px 0px 24px 0px;}
#order .agreement-check-box .check-list {width: 100%; padding: 0px 12px 0px 12px;}
#order .agreement-check-box .check-item {width: 100%; padding: 3px 0px 18px 36px; font-weight: 400; font-size: 14px; line-height: 20px; color: var(--color-first); cursor: pointer;}
#order .agreement-check-box .check-item:last-child {padding-bottom: 0px !important;}
#order .agreement-check-box .check-item .check {position: absolute; top: 0px; left: 0px; width: 24px; height: 24px; padding: 3px; background-color: var(--color-grey-bg-light); border-radius: 6px;}
#order .agreement-check-box .check-item .check svg {display: block; width: 100%; height: 100%; fill: var(--color-grey-bg-light);}
#order .agreement-check-box .check-item.on .check {background-color: var(--color-second);}
#order .agreement-check-box .check-item.on .check svg {fill: var(--color-first);}
#order .agreement-check-box .check-item.readonly {pointer-events: none;}
#order .agreement-check-box .btn-box {width: 100%; padding: 24px 0px 0px 0px;}
#order .agreement-check-box .btn.hide {opacity: 0.3; pointer-events: none;}
#order .agreement-check-box .submit-text {width: 100%; padding: 24px 0px 12px 0px; font-weight: 800; font-size: 24px; line-height: 36px; text-align: center; color: var(--color-second); text-shadow: 0px 1px 0px hsla(210,80%,20%,0.48);}

/**/ html[dir="rtl"] #order .agreement-check-box .check-item {padding: 3px 36px 18px 0px;}
/**/ html[dir="rtl"] #order .agreement-check-box .check-item .check {left: auto; right: 0px;}

.stops-line-box {width: 100%; padding: 24px 0px 18px 0px;}
.stops-line-box .line {width: 100%; height: 2px; background-color: var(--color-first);}
.stops-line-box .dots {position: absolute; top: -8px; left: 0px; width: 100%; height: 18px;}
.stops-line-box .dots i {display: block; position: relative; width: 18px; height: 18px; background-color: var(--color-white); border: solid 2px var(--color-first); border-radius: 100%; box-sizing: border-box;}
.stops-line-box .dots i::after {content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0px 0px -5px; background-color: var(--color-second); border-radius: 100%;}
.stops-line-box .dots i.dot::after {background-color: var(--color-first);}

.geo-popup {position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: hsla(0,0%,0%,0.9); opacity: 0; transition: opacity ease 300ms; overflow-y: auto; z-index: 10000;}
.geo-popup.open {opacity: 1;}
.geo-popup .close {position: absolute; top: 9px; right: 9px; width: 48px; height: 48px; cursor: pointer; z-index: 100;}
.geo-popup .close i {display: block; position: absolute; top: 22px; left: 9px; width: 30px; height: 3px; background-color: var(--color-white); border-radius: 8px;}
.geo-popup .close i.line1 {transform: rotate(45deg);}
.geo-popup .close i.line2 {transform: rotate(-45deg);}
.geo-popup .geo-link-list {width: 100%; min-height: 100vh;}
.geo-popup .geo-link-box {width: 100%; padding: 18px 0px;}
.geo-popup .geo-link {display: block; width: 90px;}
.geo-popup .geo-link img {display: block; width: 100%; aspect-ration: 1;}
.geo-popup .geo-link span {display: block; width: 100%; padding-top: 12px; font-weight: 400; font-size: 14px; line-height: 20px; text-align: center; color: var(--color-white);}

.images-list {width: calc(100% + 12px); margin: 0px -6px; padding: 6px 0px 6px 0px;}
.images-list .image-pad {width: 33.333333%; padding: 6px;}
.images-list .image-box {width: 100%; background-color: var(--color-first); cursor: pointer;}
.images-list .image-box img {display: block; width: 100%; aspect-ratio: 1; object-fit: cover;}
.images-list .image-box video {display: block; width: 100%; aspect-ratio: 1; object-fit: cover;}
.images-list .image-box .svg {display: block; position: absolute; bottom: 50%; left: 50%; width: 35%; aspect-ratio: 1; transform: translate(-50%,50%);}
.images-list .image-box .svg svg {display: block; width: 100%; height: 100%; fill: white;}

.gallery-popup {display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-first-ulight); opacity: 0; transition: opacity ease 360ms; z-index: 1000;}
.gallery-popup.open {opacity: 1;}
.gallery-popup .flexac {width: 100%; height: 100%; padding: 36px;}
.gallery-popup .swiper-box {width: 100%; height: 100%;}
.gallery-popup .swiper {width: 100%; height: 100%;}
.gallery-popup .swiper .swiper-slide {width: 100%; height: 100%;}
.gallery-popup .swiper .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: contain;}
.gallery-popup .swiper .swiper-slide video {display: block; width: 100%; height: 100%; object-fit: contain;}

.gallery-popup .close {position: absolute; top: 0px; right: 0px; width: 48px; height: 48px; background-color: var(--color-first); cursor: pointer; z-index: 100;}
.gallery-popup .close i {display: block; position: absolute; top: 22px; left: 9px; width: 30px; height: 3px; background-color: var(--color-second); border-radius: 8px;}
.gallery-popup .close i.line1 {transform: rotate(45deg);}
.gallery-popup .close i.line2 {transform: rotate(-45deg);}

.gallery-popup .swiper-button {position: absolute; top: 66.666666%; width: 36px; height: 54px; margin-top: -27px; background-color:  var(--color-first); cursor: pointer; z-index: 100;}
.gallery-popup .swiper-button.prev {left: 0px;}
.gallery-popup .swiper-button.next {right: 0px;}
.gallery-popup .swiper-button i {display: block; position: relative; width: 100%; height: 100%; padding: 12%;}
.gallery-popup .swiper-button svg {display: block; width: 100%; height: 100%; fill: var(--color-second);}
.gallery-popup .swiper-button.prev i {padding-left: 6%;}
.gallery-popup .swiper-button.prev svg {transform: rotate(180deg);}
.gallery-popup .swiper-button.next i {padding-right: 6%;}
.gallery-popup .swiper-button.next svg {transform: rotate(0deg);}

@media screen and (max-width: 1000px){
    .gallery-popup .flexac {padding: 0px;}
}


/*** ITEMS LIST NEW ***/

#order .info-box .item-list-new {width: calc(100% + 6px); margin: 0px -3px; padding: 12px 0px 18px 0px; font-weight: 400; font-size: 14px; line-height: 20px; color: var(--color-black);}
#order .info-box .item-list-new .item {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: flex-start;}
#order .info-box .item-list-new .item.count0 {display: none;}
#order .info-box .item-list-new .item > div {margin: 3px; padding: 9px 12px; background-color: var(--color-grey-bg-light); border-radius: 9px;}
#order .info-box .item-list-new .item .name {flex: 1 20 auto; width: auto; height: auto;}
#order .info-box .item-list-new .item .name .bold {font-weight: 700;}
#order .info-box .item-list-new .item .name .plus {font-weight: 700;}
#order .info-box .item-list-new .item .name.big-on {color: var(--color-error-text);}
#order .info-box .item-list-new .item .name .plus {display: none; color: var(--color-second-border);}
#order .info-box .item-list-new .item .name .plus.on {display: inline;}
#order .info-box .item-list-new .item .name .date {width: 100%; padding-top: 6px; font-size: 12px; line-height: 12px; color: var(--color-first); opacity: 0.48;}
#order .info-box .item-list-new .item .count {flex: 0 0 auto; width: 60px; height: auto; padding: 0px; font-weight: 700; text-align: center;}