.tutuBookingForm {
    min-height: 600px;
    /*border: 1px solid red;*/
    max-width:80%;
    margin: 0 auto;
}

.flex-wrap {
  flex-wrap: nowrap !important;
}

.sideBarSelectionResult{
    color: white;
}


.locationBtn {
    width: 100%;
    text-align: center;
     margin: 0px 10px 20px 10px;
}

#bookingFormDiv{
    /*height:100%;*/
     min-height: 100%;
    border-radius: 0 20px 20px 0;
    background-color: #faf8f6;
}

#formSideBar{
    border-radius:20px 0 0 20px;
    background-color: #f4ccc8;
     min-height: 100%;
}
.tutu-title{
     display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
}
    
.tutu-title h2 {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

#tutu-formRow{
     min-height: 600px;
     /*height:100%;*/
     margin:inherit ;
     width:100%;
}


.tutu-FormDiv{
    padding:1%;
    height:100%;
    width:100%;
}

.middle-row{
    min-height:80%;
    width:100%;
    padding-top:5%;
    /*border: 1px solid blue;*/
}

.top-row{
    border-bottom: 2px solid grey ;
    height:10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*border:1px solid purple;*/
}

.bottom-row {
    /*padding-top: 1%;*/
    /*border: 1px solid red;*/
    display: flex;
    flex-direction: column; /* Change to column direction */
    align-items: stretch; /* Stretch the buttons to fill the width */
}


.continueBtnDiv{
    display: flex;
    justify-content:flex-end; /* Aligns items to the right */
}

.continueBtn, .backBtn{
    height:90%;
}


.continueBackBtnDiv {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 10px; /* Add margin at the bottom */
}


.continueBackBtnDiv button {
    flex: 1;
    margin: 5px;
    padding: 10px;
    font-size: 16px;
    white-space: nowrap;
    /*max-width:40%;*/
    min-width: 0; /* Allow buttons to shrink when necessary */
    margin-bottom:20px;
}


#payment-title-countdown {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#payment-title-countdown strong {
  flex: 0 0 auto;
}

#paymentCountDown {
  margin-left: auto;
}
    
.tutu-title h4{
    color: green;
}


.dateInput{
    max-width:50%;
}

label{
    margin-top:1%;
}

.sideElementDiv {
    padding: 5px;
    border: 2px solid black;
    margin-top: 10px;
    border-radius: 10px;
    display: block; /* This ensures that the div acts as a block container */
}

.inlineContainer {
    display: flex; /* Use flexbox for horizontal alignment */
    align-items: center; /* Center items vertically */
    width: 100%; /* Ensure the container takes full width */
}

.checkmark {
    flex-shrink: 0;
    background-color: #FFFCF4;
    border: 3px solid #245eb5;
    border-radius: 50%;
    color: white;
    width: 25px; /* Fixed width for consistency */
    height: 25px; /* Same as width to maintain a circle */
    display: flex;
    justify-content: center; /* Center the checkmark horizontally */
    align-items: center; /* Center the checkmark vertically */
    font-size: 10px;
    margin-right: 5px;
}

.sideBarWord {
    flex-grow: 1; /* Allows the text to take up remaining space */
    overflow: hidden; /* Hides overflow text */
    white-space: nowrap; /* Prevents text wrapping */
    text-overflow: ellipsis; /* Adds an ellipsis for overflow text */
    color:black;
}

/* Styles for dynamically added <p> tags */
.sideElementDiv strong {
    display: block; /* Makes the <strong> element behave like a block-level element */
    width: 100%; /* Ensures it spans the full width of its container */
    overflow: hidden; /* Hides any overflow text */
    white-space: nowrap; /* Prevents the text from wrapping to the next line */
    text-overflow: ellipsis; /* Adds an ellipsis to indicate text truncation */
    margin-top: 5px; /* Adds vertical spacing if needed */
}

#summaryPanel{
    /*border:1px solid blue;*/
    width:100%;
}

#paymentSummary{
     width:100%;
     height:100%;
}

#RadioOptions {
    /*border:1px solid blue;*/
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  /*width:100%;*/
}

#RadioOptions label{
  /*display: flex;*/
  /*align-items: center;*/
  padding: 5px 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#RadioOptions label:hover{
  background-color: #e0e0e0;
}

#RadioOptions input[type="radio"]{
  /*margin-right: 10px;*/
}

 @media (min-width: 450px) and (max-width: 1120px) {
        .checkmark {
            font-size: 8px; /* Adjust font size */
            width: 15px; /* Width of the circle */
            height: 15px; /* Height of the circle */
        }
        
        .tutuBookingForm {
            /*height:600px;*/
            min-height: 600px;
            max-width:100%;
            margin: 0 auto;
        }
        
        #title-PD, #h4-PD{
            font-size:20px;
        }
       
}


/*for phone*/
 @media (max-width: 500px)  {
    #formSideBar{
        display:none;    
    }
    
    .tutuBookingForm {
        min-height: 600px;
        max-width:100%;
        margin: 0 auto;
    }
    
     #bookingFormDiv.col-10 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    
    #bookingFormDiv{
        /*height:100%;*/
        min-height: 100%;
        border-radius: 20px 20px 20px 20px;
    }
    
     #title-PD, #h4-PD{
        font-size:15px;
    }
    
    #payment-title, #payment-progress{
        font-size:20px;
    }

           
}

/*css for **BD checkbox images*/

.image-checkbox {
    position: relative;
    display: inline-block;
}

.image-checkbox input[type="checkbox"] {
    display: none;
}


.custom-control-label {
    cursor: pointer;
    position: relative;
}

.custom-control-label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(40, 167, 69, 0.5);  /* Blue overlay */
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 10px; /* This rounds the overlay corners */
}

.custom-control-label::after {
    content: '✓';  /* Checkmark symbol */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 24px;
    opacity: 0;
    transition: opacity 0.3s;
}

.image-checkbox input[type="checkbox"]:checked + .custom-control-label::before {
    opacity: 1;
}

.image-checkbox input[type="checkbox"]:checked + .custom-control-label::after {
    opacity: 1;
}

/* Optional: Add a border or shadow to show it's clickable */
.custom-control-label img {
    border: 2px solid transparent;
    transition: border-color 0.3s;
    border-radius: 10px; /* This adds rounded corners */
}

.image-checkbox input[type="checkbox"]:checked + .custom-control-label img {
    border-color: #007bff;  /* Blue border when selected */
}

/* Keep your existing image-checkbox CSS and add these new styles */

.product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 10px;
}

.product-title {
    margin-bottom: 5px;
    font-size: 1rem;
    font-weight: 500;
}

.product-price {
    margin-top: 5px;
    font-weight: bold;
    color: #28a745; /* Green color for price */
}

.custom-control-label img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.image-checkbox {
    width: 100%; /* Make the image container take full width */
    margin: 10px 0;
}

/* Add these styles to your existing CSS */
.custom-control-label {
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
}

/* Also add it to the checkmark symbol to be safe */
.custom-control-label::after {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}


.col-6 {
    padding: 0 15px;
}

.product-card {
    height: 100%;
}