.form {
    background-color: white;
    margin: 0 auto;
    border-radius: 0.35rem;
    padding: 1.5rem;
    z-index: 1;
}
.bg-ffff{
    background-color: #FFF;
}
.input-group {
    margin: 0.5rem 0;
}

.form-step {
    display: none;
}
.form-step h3{
    margin-top: 50px;
    font-family: 'Marcellus', serif;
}
.form-step.active {
    display: block;
    transform-origin: top;
    animation: animate .5s;
}


/* Button */
.btn-group {
    display: flex;
    justify-content: space-between;
    padding-top: 30px;
}

.btn {
    padding: 0.75rem;
    display: block;
    text-decoration: none;
    width: min-content;
    border-radius: 5px;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
    width: 30%;
    font-size: 16px;
}
.step-one-btn .btn-next{
    margin-top: 30px;
    width: 100%;
}

.btn-next {
    background: linear-gradient(135deg, #fd4d00, #d95415, #f54704, #ff5b1d);
    color: white;
    
}


.btn:hover {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px linear-gradient(to right, #ff7919, #ff7f1e, #ff6d06, #fd3907);
}

textarea {
    resize: vertical;
}

/* Prefixes */



/* End Prefixes */


/* Progress bar */

.progress-bar {
    position: relative;
    display: flex;
    justify-content: space-between;
    counter-reset: step;
    margin: auto;
}

.progress-bar::before,
.progress {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    width: 100%;
    background-color: #dcdcdc;
    z-index: 1;
}

.progress {
    background: linear-gradient(to right, #ff9b53, #fd8a32, #ff9950, #fd3907);
    width: 0;
    transition: .5s;
}

.progress-step {
    width: 12px;
    height: 12px;
    background-color: #dcdcdc;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}


.progress-step::after {
    content: attr(data-title);
    position: absolute;
    top: calc(100% + 0.20rem);
    font-size: 0.85rem;
    color: black !important;
    font-family: 'Marcellus', serif;
}

.progress-step.active {
    background-color: #fd3907;
    color: white;
}
.apply-button {
  background: linear-gradient(to right,  #ff6d06, #fd3907);
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 14px;
}



@keyframes animate {
    from {
        transform: scale(1, 0);
        opacity: 0;
    }

    to {
        transform: scale(1, 1);
        opacity: 1;
    }
}

/* End Progress bar */

/* Add Experience Btn */


.add-experience {
    margin-bottom: 20px;
    display: none;
}


.calendar-container {
    background: #fff;
    border-radius: 10px;
    max-width: 400px;
    width: 100%;
    margin-top: 25px;
  }
  .calendar-container h2 {
    margin-bottom: 10px;
    text-align: center;
  }
  .date-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }

  .date-picker button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: #ffa726;
  }
  .slots {
    margin-top: 20px;
  }
  .slots h3 {
    margin-bottom: 10px;
    margin-top: 30px;
    display: flex;
    justify-content: center;
  }
  .slot {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 5px;
    text-align: center;
    cursor: pointer;
    transition: background 0.3s;
  }
  .slot:hover {
    background: #ffe0b2;
  }
  .slot.active {
    background: linear-gradient(to right, #f7a56a, #ff9748, #ff6d06, #fd3907);
    color: #fff;
    border: 2px solid #f54704;
  }
.last-btn-group{
    display: none;
}
  .puja-type{
    padding: 10px;
    margin-top: 30px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 5px;
    text-align: center;
    cursor: pointer;
    font-size: 15px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    transition: all 0.3s ease;
    font-family: 'Marcellus', serif;
  }
  .puja-type-price{
    color: #fd3907;
    font-size: 15px;
  }

  .puja-type.active {
    background: linear-gradient(to right, #f7a56a, #ff9748, #ff6d06, #fd3907);
    color: #fff;
    border: 2px solid #f54704;
  }

  .puja-type.active .puja-type-price{
    color: #FFF;
  }
  .barcode{
    margin: auto;
  }
  .confirmed-img{
    width: 40%;
  }
  .confirmed-details{
    font-size: 13px;
    text-align: left;
  }
  .align-items-center{
    align-items: center;
  }
  .booking-para{
    font-size: 10px;
    padding-top: 0.5rem;
  }
  .congrats{
    padding-top: 0.5rem;
  }
  /* Popup modal styling */
.popup-modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Black background with transparency */
  overflow: auto; /* Enable scrolling if needed */
}

/* Popup content */
.popup-content {
  background-color: #fff;
  margin: 25% auto;
  padding: 15px;
  border: 1px solid #888;
  width: 90%;
  max-width: 500px;
  text-align: center;
  border-radius: 8px;
}

/* Close button */
.closeBtn {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 5%;
  right: 20px;
}

.closeBtn:hover,
.closeBtn:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Class to show the modal */
.popup-modal.show {
  display: block;
}

.bg-grey{
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 10px;
}
.user-booking-icon{
  background-color: #dcdcdc;
  border-radius: 50%;
  padding: 10px;

}
.waiting-box{

  background-color: rgba(40, 41, 40, 0.699);
  color: #FFF;
  padding: 8px;
  border-radius: 8px;
}

.complete-box{
  background-color: rgba(0, 161, 0, 0.699);
  color: #FFF;
  padding: 8px;
  border-radius: 8px;
}

.assigned-box{
  background-color: rgba(161, 5, 0, 0.699);
  color: #FFF;
  padding: 8px;
  border-radius: 8px;
}
.booked-box{
  background-color: #B05011;
  color: #FFF;
  padding: 8px;
  border-radius: 8px;
}
.barcode-container {
  position: relative;
  display: inline-block;
}

.barcode-overlay {
  position: absolute;
  top: 0;
  left: 90px;
  right: 0;
  bottom: 0;
  background-color: rgb(0 0 0 / 78%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  width: 50%;
}

.overlay-text {
  text-align: center;
}
.upcomingTab{
  width: 50%;
  text-align: center;
}
.completeTab{
  width: 50%;
  text-align: center;
}
.vrt-puja{
  width: 280px !important;
}
.bck-btn{
  padding-left: 5px;
  padding-top: 5px;
}
.phys-bkng{
  width: 250px;
}
.swiper-pagination-bullet-active{
  background-color:  #fd3907 !important;
}
.puja-type.active {
  border: 1px solid #fd3907; /* Highlight with orange border */
}
.puja-type p {
  text-align: left;
}
.puja-type.active span{
  color: #FFF;
}
.add-btn{
  background: #d8d7d7;
  color: #000;
  width: fit-content;
}
.person-entry {
  padding-bottom: 30px;
  
}
.remove-person {
  margin-top: 15px;
}
.date-bkg{
  width: 95%;
}

.btn-skip{
  background: linear-gradient(135deg, #fd4d00, #d95415, #f54704, #ff5b1d);
color: white;
}
#chadava-options .puja-type.selected{
  background: linear-gradient(to right, #f7a56a, #ff9748, #ff6d06, #fd3907);
    color: #fff;
    border: 1px solid #f54704;
}

.puja-type.selected .puja-type-price {
  color: #FFF;
}