@import url(https://db.onlinewebfonts.com/c/12ff62164c9778917bddb93c6379cf47?family=Aeonik+Pro+Regular);  /* Global */

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  font-family: "Aeonik Pro Regular";

}

/* Fullscreen section */
.first-screen {
  overflow: hidden;
  position: relative;

  margin: 3% 0 0 0;
}

/* Step navigation titles */
.step-titles {
  display: flex;
  justify-content:space-between;
  gap: 40px;

  margin-bottom:-4%;
  top: 0;
  background: #fff;
}

.step-nav-title {
  font-size: 18px;

  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #6e6e6e;
}
.step-nav-title-title{
  font-size: 24px;
}
.step-nav-title-subtitle{
  font-size: 36px;
}
.step-nav-title.active {
  font-weight: bold;
  color: #000;
}
/* Progress bar */
.progress-bar-container {
  position: relative;
  
  padding:1rem 0 4rem 0;
}

.progress-bar-line {
  position: absolute;
  top: 22%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #e0e0e0;
  z-index: 1;
}

.configurator-progress-bar {
  display: flex;
  position: relative;
  z-index: 2;
}

.step-indicator {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.circle-number {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 1px solid #e0e0e0;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #000;
}

.step-indicator.active .circle-number {
  border-color: #141414;
}

.step-label {
  font-size: 12px;
  color: #333;
  margin-top: 5px;
  text-align: center;
}

/* Swiper container and slides */
.swiper-container {
  width: 68%;
  margin: 0 auto;
  overflow: hidden;



}

@media (max-width: 992px) {
  .swiper-container {
    width:100%
  }
}




.configurator-skeleton .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  width: 100%;

}

/* Step content */
/* 
.step {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  width: 100%;
}
*/

.step .step-image-svg {
  /* width: 50%;  */
  height: 400px;
  object-fit: contain; 


}
.set-info-set-result-valid{
display:flex;
}
/* .step-content {
  flex: 1;
  height: auto;        
  max-height: none;     
  overflow: visible;
} */

.step-count {
  font-size: 36px;
  color: #888;
}
.step-count-active-slide{
  color: #000;
}
.step-name {
  font-size: 64px;
  margin: 0;
  line-height:80%;
}
.step-description {
  font-size: 24px;
  color: #000;
  margin: 2rem 0 1.5rem 0;
}
.step input[type="radio"] {
  margin-right: 10px;
}

/* Navigation footer */


@media (max-width: 992px) {
.navigation-footer-container{
  width: 96%;
  margin: 0px auto;

}
@media (min-width: 768px) {
.navigation-footer-container{
  width: 68%;
  margin: 0px auto;


}
}

.navigation-footer{
flex-direction:row
}


.navigation-footer button {
  padding: 10px 20px;
  background-color: #fff;
  border: 1px solid #000;
  color: #000;
  font-size: 14px;
  cursor: pointer;
}

.navigation-footer button:hover {
  background-color: #f2f2f2;
}

.footer-note {
  font-size: 12px;
  width: 300px;
  margin-top:1rem;
}
.button-container{
  display: flex;
  flex-direction: row;
  justify-content:flex-end;
}
.button-previous{
  margin-right: 1rem;
}

#setInfo {
  display: none;
}
.set-info{
  height: 100%;

}
.set-info-set-result-valid{
  display: flex;
  flex-direction: row;
}
.set-results-right-box, .set-results-left-box{
  width: 50%;
}
.config-maker-set-add-btn-container button{
  padding: 10px 20px;
  background-color: #fff;
  border: 1px solid #000;
  color: #000;
  font-size: 14px;
  cursor: pointer;
}
.summary-image-text-container{
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
}
.set-results-image-title-container{
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
}
.result-title-set{
font-size: 36px;
}
.custom-set-info {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
}

.custom-set-content {
  display: flex;
  flex-direction: row;
  gap: 3rem;
  width: 100%;
  width: 100%;
  align-items: flex-start;
}

.custom-set-text {
  flex: 1;
  padding-right: 10%;
}

.custom-set-text h3 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.custom-set-text p {
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.5;
}

.custom-set-form-container{
  width: 50%;
}
.custom-set-text-title{
  font-size: 64px;

}
.custom-set-text-p1,.custom-set-text-p2,.custom-set-text-p3{
  font-size: 24px;
}
.custom-set-text-p1{
  margin: 0 0 0 0;
}
.custom-set-text-p2{
  margin: 0 0 2rem 0;
}
/* Container for name and lastname */
.input-name-lastname-container {
  display: flex;
  gap: 1rem;
  width: 100%;
}

/* Each individual input field wrapper */
.input-field {
  width: 100%;
  margin-bottom: 1rem;
}

/* Style all inputs and textarea uniformly */
.input-name,
.input-lastname,
#userEmail,
#userNotes {
  width: 100%;
  height: 50px;
  padding: 0 1rem;
  font-size: 1rem;
  border: 1px solid black;
  border-radius: 0px;
  box-sizing: border-box;
}

/* Specific for textarea to allow bigger height */
#userNotes {
  height: 150px;
  padding: 1rem;
  resize: vertical;
  font-size: 12px;
}

/* Button styling */
button[type="submit"] {
  width: 100%;
  padding: 1rem;
  background-color: black;
  color: white;
  font-size: 1rem;
  border: none;
  border-radius: 0px;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* Hover effect */
button[type="submit"]:hover {
  background-color: #333;
}

.button-row {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
  width: 50%;
}

.button-row button {
  padding: 10px 20px;
  background-color: #fff;
  border: 1px solid #000;
  color: #000;
  font-size: 14px;
  cursor: pointer;
  max-width: 100px;
}

#customBackBtn {
  background-color: transparent;
  color: black;
}

#customSubmitBtn {
  background-color: transparent;
  color: black;
}

#customBackBtn:hover {
  background-color: #e0e0e0;
}

#customSubmitBtn:hover {
  background-color: #e0e0e0;
}
.custom-next-set-btn, .custom-add-to-cart-btn{
  padding: 10px 20px;
    background-color: #fff;
    border: 1px solid #000;
    color: #000;
    font-size: 14px;
    cursor: pointer;
}

.final-result-text-left{
  padding-right: 10rem;
}

.results-image-text-container{
  display: flex;
  flex-direction: row;
  width: 80%;
}
.results-image-text-container img{
width: 140px;
height: 140px;
}
.results-text-container{
  margin-left:1rem;
  display:flex;
  flex-direction: column;
  justify-content:space-between;
}
.results-text-title{
  font-size: 20px;
  margin-bottom: 0.3rem;
}
.results-text-subtitle{
  font-size: 12px;
  color: #6e6e6e;
  margin-bottom: 0.3rem;
}

.results-button-back-and-change{
  padding: 10px 20px;
  background-color: #fff;
  border: 1px solid #000;
  color: #000;
  font-size: 14px;
  cursor: pointer;
  width: 200px;
}

.input-field textarea{
color:black;
}

}

/* mobile friendly */
@media (max-width: 600px) {
  .input-name-lastname-container {
    flex-direction: column;
  }
}


@media (max-width: 768px) {
    .step {
        flex-direction: column;
    }
    .step-titles {
        width: 90%;        
        gap: 20px;         
        margin: 1rem auto 0;
        overflow-x: auto;    
        scroll-snap-type: x mandatory; 
    }
    .step-nav-title {
        flex: 0 0 80%;      
        min-width: 80%;       
        scroll-snap-align: start; 
    }
    .step-nav-title:last-child {
        /* 100% container width minus 80% card width = 20% */
        margin-right: 20%;}


    .step-titles::-webkit-scrollbar { display: none; }
    .step-content{
        width: 100%;
    }
    .step-label{
        display: none;
    }
    .navigation-footer {
        width: 100%;
    }
   
    .step .step-image-svg {
        width: 100%;
        height: auto;
    }
   
    .swiper-wrapper {
        height: auto;
    }

    
}