@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

 /* font-family: "Inter", sans-serif; */
body {
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  background: #000000;
  color: #ffffff;
  font-weight:400;
  letter-spacing:1px;
}
* {
  box-sizing: border-box;
}



.loader-overlay{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* background: linear-gradient(135deg, #ec4a2a3f 0%, #a31caf41 100%); */
 background: #ffffff9a;
 z-index: 11;


}


/* HTML: <div class="loader"></div> */
.loader {
  width: 70px;
  height: 26px;
  background: linear-gradient(135deg, #ec4b2a 0%, #a21caf 100%);
  border-radius: 50px;
  --c:no-repeat radial-gradient(farthest-side,#ffffff 92%,#0000);
  --s:18px 18px;
  -webkit-mask:
    var(--c) left  4px top 50%,
    var(--c) center,
    var(--c) right 4px top 50%,
    linear-gradient(#ffffff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation: l1 1.5s infinite;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

}


@keyframes l1 {
  0%    {-webkit-mask-size:0    0  ,0    0  ,0    0  ,auto}
  16.67%{-webkit-mask-size:var(--s),0    0  ,0    0  ,auto}
  33.33%{-webkit-mask-size:var(--s),var(--s),0    0  ,auto}
  50%   {-webkit-mask-size:var(--s),var(--s),var(--s),auto}
  66.67%{-webkit-mask-size:0    0  ,var(--s),var(--s),auto}
  83.33%{-webkit-mask-size:0    0  ,0    0  ,var(--s),auto}
  100%  {-webkit-mask-size:0    0  ,0    0  ,0    0  ,auto}
}






.container-wrap{
    width: 100%;
    max-width: 1400px;
    padding: 0 16px;
    display: block;
    margin: 0 auto;
    
}


.top-header-blk {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 0px;
  padding: 0 24px;
  background: #000000;
  position: relative;
}


.logo-home-btn{
  width: 48px;
  height: 48px;
  background: #141414;
  border: 1px solid #252525;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left:24px;
  top:50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: all ease 0.3s;



}

.logo-home-btn svg{
  fill: #ffffff;
  width: 24px;
  height:24px;
  transition: all ease 0.3s;
 
}


.logo-home-btn:hover{
    background:#ffffff;
    border: 1px solid #252525;
}

.logo-home-btn:hover svg{
  fill: #000000;
}

.top-header-blk .head-logo {
  width: auto;
  height: auto;
  padding: 8px;
  background: #000000;
  border-radius: 8px;
  line-height: 0;
}
.top-header-blk .head-logo img {
  width: auto;
  height: 80px;
}
.main {
  display: flex;
  padding: 16px;
  justify-content: space-between;
  gap: 0px;
  max-width: 100%;
  margin: auto;
}
.main .left,
.main .right {

  /* background: white;
  border-radius: 16px;
  padding: 24px; */
 
}


.main .left-col-blk{
width: 70%;
display: inline-block;
padding: 0 5% 0 0;
}


.main .rgt-col-blk{
width: 30%;
display: inline-block;
}

.main .left{
    background: #000000;
    border: 1px solid #252525;
    padding: 16px;
    line-height: 0;
    width:100%;
    flex-shrink: 0;
    flex-grow: 0;
     border-radius: 16px;
}
.main .right{
    /* background: #141414;
    border: 1px solid #252525; */
    /* padding: 16px; */
    line-height: 0;
     width: 100%;
    flex-shrink: 0;
    flex-grow: 0;
}

.image-mockuppreview{
  width: 100%;
  display: inline-block;
  max-width:500px;
  margin: 0 auto;
}

.image-mockuppreview .default-preview-img{
    max-width: 100%;
    border-radius: 8px;
    filter: grayscale(100%);
    opacity: 0.5;
}

.left-col-blk .ai-genrate-blk{
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 1rem;
  margin: 0;
  color: #ffffff;
  border: none;
  gap:8px;
  
}



.left-col-blk .ai-genrate-blk .ai-generate-area{
  width: 100%;
  position: relative;
  display: block;
}

.left-col-blk .ai-genrate-blk h2{
  color: #ffffff;
  font-size: 16px;
  font-weight:500;
}

.left-col-blk .ai-genrate-blk textarea {
  width: 100%;
  padding: 16px 16px 48px 16px;
  border-radius: 8px;
  border: 1px solid #252525;
  resize: none;
  min-height: 120px;
  background: #141414;
  font-family: inherit;
  letter-spacing: 1px;
  font-weight:400;
  color: #ffffff;
  font-size: 16px;
  
}

.left-col-blk .ai-genrate-blk textarea::placeholder {
  color: #ffffff3f;
    font-size: 14px;
}

.left-col-blk .ai-genrate-blk textarea:focus {
  outline: none;
  box-shadow: none;
    border: 1px solid #ffffff;
}



.animate-borderColor {
    animation: borderColor 4s linear infinite
}


@keyframes borderColor {
    0%,to {
        border-color: #f53434
    }

    25% {
        border-color: #3a80d1
    }

    50% {
        border-color: #1eda4d
    }

    75% {
        border-color: #eeee28
    }
}








button {
  padding: 12px;
  width: 100%;
  font-size: 14px;
  background:#000000;
  color: white;
  border: none;
  border-radius: 32px;
  cursor: pointer;
  margin-top: 16px;
  transition: all ease 0.3s;
  font-weight:600;
}


button:hover {
  background: linear-gradient(135deg, #ec4b2a 0%, #a21caf 100%);
}

button.generate-ai-btn{
  width:40px;
  height:40px;
  background: #2c2c2c;
  border-radius: 100px;
  position: absolute;
  left: auto;
  top: auto;
  bottom:12px;
  right: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor:not-allowed;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .2s;
   margin: 0;
  padding: 0;

}

button.generate-ai-btn svg{
  width: auto;
  height:20px;
  fill: #ffffff6c;
 transition: all ease 0.3s;

}


button.generate-ai-btn.active-ai-btn{
  background: linear-gradient(135deg, #ec4b2a 0%, #a21caf 100%);
  cursor: pointer;
}


button.generate-ai-btn.active-ai-btn svg{
 fill: #ffffff;
}



.upload-row {
  border-radius: 8px;
  padding:0px;
  width: 100%;
  display: flex;
  flex-direction: column;
    background: #141414;
    border: 1px solid #252525;
    margin-bottom: 16px;
}

.upload-row h2{
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  border-bottom: 1px solid #252525;
  width: 100%;
  display: inline-block;
  line-height: normal;
  margin: 0;
  background: 141414;
  border-radius: 8px 8px 0 0; 
}


.upload-row .upload-content-box{
width: 100%;
display: inline-block;
padding: 16px;
}
.image-preview{
width: 100%;
text-align: center;
padding: 16px 0;
font-size: 16px;
font-weight: 500;
letter-spacing: 4px;
  
}

.image-preview img.default-preview-img {
  max-width: 100%;
  border-radius: 8px;
  filter: grayscale(100%);
  opacity: 0.1;
  aspect-ratio: 16/9;
  object-fit: contain
}

.image-preview img{
 max-width:100%;
 height: auto;
 border-radius: 8px;
 aspect-ratio: 16/9;
 object-fit: contain
}

.mockup-badge-blk{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin:8px 0 0 0;
}

.mockup-badge-blk h4{
  color: #ffffff;
  width: auto;
  padding:8px 16px;
  background: #000000;
  border-radius: 32px;
  line-height: 0;
  border: 1px solid #727272;
  font-weight:400;
  font-size: 14px;
  letter-spacing: 2px;
  color: #727272;
  display: inline-block;
  line-height: normal;
  margin: 0;

}




.options {
  margin-top: 0px;
}
select {
  width: 48%;
  padding: 10px;
  border-radius: 6px;
  margin-right: 4%;
  margin-bottom: 10px;
}
.product-images {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.product-images img {
  width: 70px;
  height: auto;
  border-radius: 8px;
  border: 1px solid #ddd;
  cursor: pointer;
}
.mockup {
  margin-top:0px;
  text-align: center;
  position: relative;
  width: 100%;
  display: inline-block;
}
.mockup-container {
  position: relative;
  width: 600px;
  height: auto;
  margin: 0 auto;
}
.mockup-base,
.mockup-design {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
}
.mockup-design {
  top: 180px;
  left: 195px;
  width: 220px;
  height: auto;
  z-index: 2;
  position: absolute;
}
.mockup-base {
  z-index: 1;
}
.thumb-strip {
  display: none;
    justify-content: center;
    gap: 16px;
    margin-bottom: 0;
    position: absolute;
    flex-direction: column;
    left: auto;
    right: 0;
}
.thumb-strip img {
  width: 64px;
  height: auto;
  border-radius: 4px;
  border: 1px solid #252525;
  cursor: pointer;
  background: #141414;
  transition: all ease 0.3s;
}

.thumb-strip img.selected-tab{
  border: 1px solid #ffffff;
  background: #000000;
}


.button-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.button-row button {
  width: 48%;
  margin: 0;
}
@media (max-width: 767px) {
  .main {
    flex-direction: column;
    padding: 8px 0 0;
      gap: 16px;
    }
    
    .top-header-blk {
      padding: 0;
      margin: 0;
    }
    
    .main .left-col-blk {
      width: 100%;
      padding: 0;
    }
    
    .left-col-blk .ai-genrate-blk {
      padding: 0;
    }
    
    .main .rgt-col-blk {
      width: 100%;
    }
    
    .main .right {
      width: 100%;
    }
    
    .top-header-blk .head-logo img {
      height: 64px;
    }
    
    .logo-home-btn {
      left: 0;
    }
    
    .thumb-strip img {
      width: 48px;
      border: 1px solid #898989;
        background: #141414;
    }
    
    .image-preview {
      padding: 0;
    }
    
    .image-preview img {
      aspect-ratio: initial;
      max-width: 20%;
    }
    }
#loader {
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  color: #555;
}


.ai-row {
  border: solid;
  margin-top: 20px;
  padding: 10px;
}
#options {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#options > div {
  flex: 1;
  margin-right: 10px;
}
#options > div:last-child {
  margin-right: 0;
}
#options select {
  width: 100%;
}
.email-modal-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000b3;
  z-index: 9999;
  display: none;
}

.email-modal-popup .email-form-box {
  width: 100%;
  height: auto;
  padding: 24px;
  background: #ffffff;
  border-radius: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 480px;
}

.email-modal-popup .email-form-box .input-row {
  width: 100%;
  display: inline-block;
  position: relative;
}

.email-modal-popup .email-form-box .email-input {
  width: 100%;
  padding: 20px 200px 20px 16px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #000000;
  box-sizing: border-box;
  font-size: 16px;
  color: #000000;
  font-family: inherit;
  font-weight: 500;
}
.email-modal-popup .email-form-box .submit-button {
  width: auto;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  padding: 14px 20px;
  background-color: #000000;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin: 0;
  transition: all 0.3s ease;
}
.email-modal-popup .email-form-box .submit-button:hover {
  background: #000000b9;
}


@media screen and (max-width:1400px) { 
  .image-mockuppreview,
  .mockup-container{
    max-width: 360px;
  }

  .mockup-design {
    top: 100px;
    left: 50%;
    width: 120px;
    height: auto;
    z-index: 2;
    position: absolute;
    transform: translateX(-50%);
}

  
  
}
@media (max-width: 575px) {
  .top-header-blk .head-logo img {
    height: 56px;
  }

  .logo-home-btn {
    width: 42px;
    height: 42px;
  }

  .image-mockuppreview,
  .mockup-container {
    max-width: 100%;
  }

  .mockup-design {
width: 100%;
  top: 30%;
height: auto;
  max-width: 33.333%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  }

  .thumb-strip {
    position: relative;
    top: 0;
    left: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0 0 16px 0;
    order: 1;
  }

  .mockup {
    display: flex;
    flex-direction: column;
  }

  .mockup-badge-blk {
    margin: 0;
  }

  .mockup-badge-blk h4 {
    font-size: 12px;
    padding: 4px 8px;
    letter-spacing: normal;
  }


  .left-col-blk .ai-genrate-blk textarea {
    padding: 8px 8px 32px 8px;
    font-size: 12px;
    letter-spacing: normal;
  }

  button.generate-ai-btn {
    width: 32px;
    height: 32px;
    bottom: 8px;
  }


  button.generate-ai-btn svg {
    width: 16px;
    height: auto;
  }

}