:root{
  --frame_width: 30px;
  --slip_width: 30px;
}

#page__calculator { 

    .content_calc {
      display: flex;
      justify-content: space-between;
      padding-bottom: 60px;
      font-weight: 400;

        .preview {
          width: 50%;
          padding: 0px 30px 20px 0px;

          figure {
            position: relative;
            /* width: 35%; */
            margin: 0;
            overflow-y: auto;
            scrollbar-width: none;  

            .result {
              /* width: 100%; */
              height: 100%;
              background: rgb(255, 255, 255);
              z-index: 1;
              padding: calc(var(--frame_width) - 2px);
              transition: transform 0.5s ease-in-out;

              .frame {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 1;
                overflow: hidden;

                .corner, .side{
                  display: flex;
                  flex-direction: row;
                  position: absolute;
                  height: var(--frame_width);
        
                  img{
                    display: block;
                    width: auto;
                    height: 100%;
                    margin-right: -1px;
                  }
                }
        
                --corner: calc(100% - var(--frame_width));
        
                .side{
                  clip-path: polygon(0 0, 100% 0, var(--corner) 100%, var(--frame_width) 100%);
                  -webkit-clip-path: polygon(0 0, 100% 0, var(--corner) 100%, var(--frame_width) 100%);
        
                  img{
                    min-width: 15px;
                    flex-shrink: 0;
        
                    -webkit-transform: scale(1.01);
                    transform: scale(1.01);
        
                    /* Віздзеркаення частинки для правильного стикування зображення */
                    &:nth-child(2n){
                      -webkit-transform: scale(1.01) scaleX(-1);
                      transform: scale(1.01) scaleX(-1);
                    }
                  }
                }
        
                .corner{
                  z-index: 3;
                }
        
                .corner.tr{
                  right: 0;
                  transform: rotate(90deg);
                }
        
                .corner.br{
                  right: 0; bottom: 0;
                  transform: rotate(180deg);
                }
        
                .corner.bl{
                  left: 0; bottom: 0;
                  transform: rotate(-90deg);
                }
        
                @supports (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) {
                  .corner{
                    display: none;
                  }
                }
        
                .side.top{
                  
                  z-index: 2;
                }
        
                .side.right{
                  width: auto;
                  left: 100%;
                  transform: rotate(90deg);
                  transform-origin: top left;
                  z-index: 1;
                }
        
                .side.bottom{
                  bottom: 0px;
                  transform: rotate(180deg);
                  z-index: 2;
                }
        
                .side.left{
                  width: auto;
                  left: 0; top: 100%;
                  transform: rotate(270deg);
                  transform-origin: top left;
                  z-index: 1;
                }
                
              }

              .paspartu, .slip{
                @include flex(row, center, center);
                position: relative;
                /* width: 100%;  */
                height: 100%;
              }

              .slip{
                padding: var(--slip_width);
                overflow: hidden;

                .side{
                  width: 100%;
                  height: var(--slip_width);
                  display: flex;
                  flex-direction: row;
                  position: absolute;

                  --corner: calc(100% - var(--slip_width));

                  clip-path: polygon(0 0, 100% 0, var(--corner) 100%, var(--slip_width) 100%);
                  -webkit-clip-path: polygon(0 0, 100% 0, var(--corner) 100%, var(--slip_width) 100%);

                  img{
                    display: block;
                    width: auto;
                    height: 100%;
                    margin-right: -1px;
                  }
                }

                .side{

                  img{
                    min-width: 15px;
                    flex-shrink: 0;

                    -webkit-transform: scale(1.01);
                    transform: scale(1.01);

                    /* Віздзеркаення частинки для правильного стикування зображення */
                    &:nth-child(2n){
                      -webkit-transform: scale(1.01) scaleX(-1);
                      transform: scale(1.01) scaleX(-1);
                    }
                  }
                }

                .side.top{
                  width: 100%;
                  top: 0; left: 0;
                  z-index: 2;
                }

                .side.right{
                  width: auto; top: 0;
                  left: 100%;
                  transform: rotate(90deg);
                  transform-origin: top left;
                  z-index: 1;
                }

                .side.bottom{
                  width: 100%;
                  bottom: 0px;
                  left: 0px;
                  transform: rotate(180deg);
                  z-index: 2;
                }

                .side.left{
                  width: auto;
                  left: 0; top: 100%;
                  transform: rotate(270deg);
                  transform-origin: top left;
                  z-index: 1;
                }
              }

              .picture {
                display: flex;
                flex-flow: row;
                align-items: center;
                justify-content: center;
                background: rgb(255, 255, 255);
                width: 100%;
                border: 1px solid rgba(0, 0, 0, 0.1);

                .empty_frame {
                  display: flex;
                  flex-flow: column;
                  align-items: center;
                  justify-content: center;
                  width: 100%;
                  height: 300px;
                  padding: 10px;
                  border-radius: 2px;
                  z-index: 3;

                  label {
                    display: flex;
                    flex-flow: column;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                    height: 100%;
                    border: 2px dashed 	#ED1C24;
                    border-radius: 2px;
                    transition: 0.2s ease-in-out;
                    cursor: pointer;

                    svg {
                      fill: #ED1C24;
                      margin: 0 0 10px;
                      width: 50px;
                      height: 50px;
                    }

                    input {
                      display: none;
                    }

                    span {
                      font-weight: 500;
                      color: rgb(225, 1, 38);
                      text-align: center;
                    }

                  }
                }

                img {
                  display: block;
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  cursor: pointer;
                }
              }

              .hidden {
                padding: 0 !important;
              
                > .side {
                  display: none;
                }
              }


            }
          }
        }
    }

  }

/* #page__calculator  figure .result .hidden > .side {
  display: none;
} */

#page__calculator .col_dop_prod input {
  width: 30px;
  height: 15px;
  cursor: pointer;
}


/* #page__calculator .picture {
  text-align: center;
  align-content: center;
  width: 300px;
  height: 300px;
  
  background: rgb(0, 0, 0, 0.1);
  margin: auto;
} */



#row_paspartu .paspartu_params {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: center;
}

#row_paspartu .paspartu_params input {
    width: 85px;
}

#row_paspartu .paspartu_params .inner, #row_paspartu .paspartu_params .outer {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: calc(50% - 5px);
}

#row_paspartu .paspartu_params .inner .paspartu_list, #row_paspartu .paspartu_params .outer .paspartu_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
    width: 100%;
    max-height: 300px;
    background: rgb(255, 255, 255);
    box-shadow: 0 15px 25px -5px rgba(17, 17, 17, 0.15);
    overflow-y: auto;
    scrollbar-width: none;
    padding: 5px;

    img {
      cursor: pointer;
      width: 100%;
      border: 1px solid transparent;        
    }
    img.active {
          border-color: rgb(225, 1, 38);
          box-shadow: 0 10px 15px -5px rgba(17, 17, 17, 0.15);
    }
}

#page__calculator select {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  background: white;
  width: 170px;
  height: 35px;
  padding: 5px 10px;
  margin: 2px 0px;
}

/* Modal Overlay */
#modal-overlay {
    position: fixed; /* Stays in the same position even if the page scrolls */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Black with 50% opacity for dimming */
    display: none; /* Hidden by default */
    z-index: 999; /* Ensures it's on top of most content */
}

/* Modal Window */
#modal-window {
    position: fixed;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjusts for exact centering */
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    min-width: 275px; /* Adjust as needed */
    max-width: 500px; /* Maximum width for larger screens */
    text-align: center;
    display: none; /* Hidden by default */
    z-index: 1000; /* Ensures it's on top of the overlay */
}

#modal-window p {    
    line-height: 1.5;
    text-align: left;
}

#modal-window p:first-child {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
#modal-window #edit-order {
  margin-top: 20px;
  color: #12121280;
  cursor: pointer;
}

#modal-window .modal-data {
  text-align: center;
  /* width: 60%; */
}

#add-to-cart {
    background-color: #ED1C24;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 20px;
}

#close-modal:hover {
    background-color: #0f0f0f;
}

#page__calculator input {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  background: white;
  width: 70px;
  height: 20px;
  padding: 5px 10px;
  margin: 2px 0px;
}

#page__calculator .type_work {
  margin-bottom: 10px;
  text-align: center;
}

#page__calculator .size_img {
  margin-top: 10px;
  text-align: center;	
}

#page__calculator .warning_text {
  color: red;
}

#page__calculator .params {
  width: 50%;
}

#page__calculator .params .slips_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  width: 100%;
  background: rgb(255, 255, 255);
  padding: 10px;
  /* box-shadow: 0 10px 15px -5px rgba(17, 17, 17, 0.15); */
  border-radius: 5px;
}

#page__calculator .params .slips_list img.active {
  border-color: rgb(225, 1, 38);
  box-shadow: 0 10px 15px -5px rgba(17, 17, 17, 0.15);
}

#page__calculator .params .slips_list img {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgb(238, 238, 238);
  cursor: pointer;
  transition: 0.1s ease-in-out;
  border-radius: 5px;
}

#page__calculator .row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 5px 0px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#page__calculator #row_title {
  padding-bottom: 20px;
}

#page__calculator #row_general {
  padding-top: 20px;
}

#page__calculator .row:last-child {
  border-bottom: none;
}

#page__calculator .row .col {
  align-content: center;
  text-align: right;
}

#page__calculator .row .col:first-child {
  text-align: left;
  width: 85%;
}

#page__calculator .row .col:last-child {
  width: 15%;
}

#page__calculator .row_dop_prod {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#page__calculator  .col_dop_prod_param {
  text-align: right;
  width: 240px;
}

#page__calculator  .res_products_view {
  padding: 0 20px 20px 20px;
  display: flex;
  
}


.f_bold {
  font-weight: bold;
}

.product__item.product.active {
  box-shadow: 3.92933px 3.92933px 20.9564px #f70912;
}

div#products.grid {
  grid-template-columns: repeat(4, 1fr);
  display: none;
}

.product__item.product {
  cursor: pointer;
}



@media screen and (max-width: 1023px){

}

@media screen and (max-width: 767px){

  div#products.grid {
    grid-template-columns: repeat(1, 1fr);
    display: none;
  }

  #page__calculator .params {
    width: 100%;
  }

  #page__calculator .content_calc .preview {
    width: 100%;
    padding: 0px 0px 20px 0px;
  }

  #page__calculator .content_calc {
    display: inline-block;
    padding-bottom: 60px;
    font-weight: 400;
  }

}