html, body, .page {
    height: 100%;
}

.page {
    width: 100%;
}

#loading-page {
    display: flex;
    align-items: center;
    justify-content: center;
}

#welcome-page {
    display: flex;
    align-items: center;
    justify-content: center;
}

#demo-page[data-has-photo="false"] .choose-product {
    opacity: 0.2;
    pointer-events: none;
}

#images > div, #products > div {
    min-height: 160px;
    margin-bottom: 1rem;
}

.photo, .selected-photo, .product {
    width: 100%;
    height: 160px;
    overflow: hidden;
    border-radius: 1rem;
    display: flex;
    flex-direction: row;
}

.selected-photo img {
    border-radius: 1rem;
}

.photo img, .product img {
    flex: 1;
    object-fit: cover;
    opacity: 0.8;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: opacity 0.2s, transform 2s;
}

.photo:hover img, .product:hover img {
    opacity: 1;
    transform: scale(1.05);
}

.upload-container {
    position: relative;
}

#upload {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
}

#upload:hover {
    cursor: pointer;
}

#upload:hover + #trigger-upload {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

#trigger-upload {
    border-radius: 1rem;
}

#image-processing {
    overflow: hidden;
    position: relative;
}

#image-processing img {
    width: 100%;
    opacity: 0.5;
}

.scanline {
    position: absolute;
    width: 100%;
    height: 40px;
    background: rgba(0, 255, 255, 0.2);
    backdrop-filter: invert(70%);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.7), 0 0 20px rgba(0, 255, 255, 0.5);
    animation: move-scanline 3s linear infinite;
}

.btn-material {
    display: inline-block;
    width: 50px;
    height: 50px;
    max-height: 50px;
    min-height: 50px;
    background-size: cover;
    border: 2px solid transparent;
    opacity: 0.7;
}

.btn-material.active {
    border: 2px solid #fff;
    opacity: 1;
}

.btn-material:hover {
    opacity: 1;
}

.btn-material.chrome {
    background-image: url('materials/chrome.jpeg');
}

.btn-material.stainless {
    background-image: url('materials/stainless.jpeg');
}

.btn-material.brass {
    background-image: url('materials/brass.jpeg');
}

.btn-material.black {
    background-image: url('materials/black.jpeg');
}

@keyframes move-scanline {
    0% {
        top: -40px;
    }
    50% {
        top: 100%;
    }
    100% {
        top: -40px;
    }
}

.loader {
    width: 40px;
    aspect-ratio: 1;
    position: relative;
    background: radial-gradient(10px,currentColor 94%,#0000);
  }
  .loader:before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
      radial-gradient(9px at bottom right,#0000 94%,currentColor) top    left,
      radial-gradient(9px at bottom left ,#0000 94%,currentColor) top    right,
      radial-gradient(9px at top    right,#0000 94%,currentColor) bottom left,
      radial-gradient(9px at top    left ,#0000 94%,currentColor) bottom right;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    animation: l18 1.5s infinite cubic-bezier(0.3,1,0,1);
  }
  @keyframes l18 {
     33%  {inset:-10px;transform: rotate(0deg)}
     66%  {inset:-10px;transform: rotate(90deg)}
     100% {inset:0    ;transform: rotate(90deg)}
  }



#preview {
    width: 100%;
    position: relative;
    background-color: rgba(0,0,0,0.2);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: contain;
    aspect-ratio: 2/3;
    overflow: hidden;
}

#preview img,
#preview canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    /*opacity: 0;*/
}

#preview canvas {
    z-index: 3;
    opacity: 0 !important;
    pointer-events: none;
}

#preview .placeholder-img {
    z-index: 1;
}

#preview .bg {
    z-index: 2;
    opacity: 0;
}