body {
    font-family: 'Arial', sans-serif;
    background: #ffff;
    margin: 0;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

  }
  .input-wrapper {    position: relative; /* Ensure proper positioning for pseudo-element */

    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.938);
    border-radius: 22px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
    max-width: 500px;
    width: 80%;
    margin-bottom: 20px;
    background-image: url("../images/bg.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-attachment: fixed;  background-position: center;    margin: 0 auto;


  }


  .input-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Adjust the opacity as needed */
    border-radius: 22px;    z-index: 0; /* Lower than all other content */

}

/* Ensure content is above the overlay */
.input-wrapper > * {
    position: relative;
    z-index: 1;
}


/* Media query for smaller screens */
@media screen and (max-width: 768px) {
  .input-wrapper {
      background-image: url("../images/bbs.png");
  }
}

/* Media query for larger screens */
@media screen and (min-width: 1200px) {
  .input-wrapper {
      background-image: url("../images/bg.png");
  }
}

  .field-container {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: -15px;  position: relative; /* This should establish a stacking context */
    z-index: 10; /* Ensure it's higher than other base-level content */
  }
  .icon-container {
    background: white;
    border: 2px solid #FFA500;
    border-radius: 50%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    position: relative;  z-index: 2; /* Keep icons above input fields but below suggestions */

  }

  .section-title {
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    padding-left: 58px;
    margin-top: 30px;
    margin-bottom: 10px;
    text-align: left;
  }
  .icon-container::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -45px; /* Adjust this value based on the actual spacing */
    height: 40px; /* Adjust this value based on the actual spacing */
    width: 8px;
    background-color: transparent;
    border-left: 2px dotted orange; /* Using border to create the dotted effect */
  }
  .input-field {
    border: none;
    outline: none;
    font-size: 16px;
    width: 100%;
    background:  white;
    padding: 12px 45px 12px 12px; /* adjusted padding for icon spacing */
    border-radius: 22px;
    color: #000000; z-index: 2; /* Keep icons above input fields but below suggestions */
  }
  .input-field::placeholder {
    color: #dbceceb4;
  }
  .gps-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    stroke: #A0A0A0;
    width: 24px;
    height: 24px; z-index: 2; /* Keep icons above input fields but below suggestions */
  }
  h3 {
    color: #ffffff;
    font-size: 13px;
    width: 100%;
    text-align: left; /* Align text to the left */
    padding-left: 130px; /* Align with the input fields, adjust this value as needed */
     }

     .tit {
    color: #ffffff;
    font-size: 13px;
    padding-bottom: 5px;
    width: 100%;
    text-align: left; /* Align text to the left */
    padding-left: 80px; /* Align with the input fields, adjust this value as needed */
     }
  /* This will prevent the line from appearing after the last icon */
  .last-icon::after {
    display: none;
  }

  .details-form button {
  width: 100%;
  padding: 15px;
  margin-top: 10px;
  border: none;
  border-radius: 25px; /* More rounded borders */
  background-color: orange;
  color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.details-form button:hover {
  background-color: #e67e22; /* Darken the button on hover */
  transform: scale(1.05); /* Slight increase in size on hover */
}

@media (max-width: 768px) {
  .container {
    box-shadow: none;
  } }

  
.submit-details{
  width: 80%; /* Matches the input fields' width */
  padding: 15px;
  margin-top: 10px; /* Adds space above the button */
  border-radius: 25px; /* Rounded corners for the button */
  border: 2px solid orange; /* Border color matches the button's background */
  background-color: orange;
  color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-details {
  background-color: orange; /* Darker shade on hover */
}


/* Basic Styling for the form and labels */
.payment-method {
  font-family: Arial, sans-serif;
  margin: 10px;
  padding-left: 10px;    color: #ffffff;

}
.payment-method {
  font-family: Arial, sans-serif;    color: #ffffff;

  margin: 10px;
  padding-left: 30px; /* Ensure that the labels start from the edge */
  width: 100%; /* Ensure full width to align with other input fields */
  display: block; /* Change display to block to align with other fields */
}
.payment-method input[type="radio"] {
  appearance: none; /* Disables the default browser styling */
  -webkit-appearance: none; /* Specifically for WebKit browsers like Safari */
  width: 0; /* Removes the element from the flow without hiding it */
  height: 0; /* Ensures it takes up no space */
  margin: 0; /* Removes any default margin */
  padding: 0; /* Removes any default padding */
  position: absolute; /* Takes it out of the document flow */
}

.payment-method input[type="radio"] + label {
  position: relative;
  padding-left: 35px; /* Space for custom radio button */
  cursor: pointer;
  line-height: 25px;
  display: inline-block; /* Ensures label aligns correctly with custom radio */
}

.payment-method input[type="radio"] + label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 2px solid #FFA500;
  border-radius: 50%;
  background-color: white;
}

.payment-method input[type="radio"]:checked + label:after {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px; /* Adjust the size to fill the outer circle */
  height: 15px;
  border-radius: 50%;
  background: #FFA500;
}


.payment-info {
  color: rgb(255, 255, 255); /* Set the text color to gray */
  display: none; /* Hide initially */
  font-size: 1em; /* Smaller text size */
  margin-top: 5px; /* Small space below the checkbox */
}

.section {
  width: 100%;
  font-size: 24px; /* Increased font size */
  font-weight: bold;
  color: #FFA500; /* A vivid orange color for vibrancy */
  padding: 20px 0; /* Add padding for better spacing */
  text-align: center; /* Center alignment for better focus */
  border-bottom: 3px solid #FFA500; /* Add a solid underline for emphasis */
  margin-bottom: 10px; /* Increase margin for better separation from content */
  background-color: #FFF0E0; /* Soft background color to highlight the title */
  border-radius: 10px; /* Rounded corners for a softer look */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for a 3D effect */
  text-align: center;
  display: flex; /* Use flexbox to align items */
  justify-content: center; /* Center items horizontally */
  align-items: center; /* Center items vertically */
}
.logo {
  height: 50px; /* Set the logo height */
  width: auto; /* Maintain aspect ratio */
  vertical-align: middle; /* Align with the text */
  margin-right: 10px; /* Space between logo and text */
}
.dialog-hidden {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Dimmed background */
  z-index: 1001;
}
.info-display {
  display: inline-block;
  min-width: 200px; /* Ensure enough space for text */
  padding: 15px;
  width: 80%;
  background-color: #f2f2f2; /* Light grey background for visibility */
  border-radius: 25px; /* Rounded corners */
  margin-left: 10px; /* Spacing from icon */
  vertical-align: middle; /* Align text with icons */
  font-size: 16px; /* Legible text size */
}

.dialog-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 500px;
  padding: 30px; /* Increased padding for better spacing */
  background-color: white;
  border-radius: 15px; /* Rounded corners */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Enhanced shadow for 3D effect */
  z-index: 1002;
}

.close-icon {
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  color: #707070; /* More subtle color */
}

.close-icon:hover {
  color: #FF4500; /* Modern orange hover effect */
}

.request-delivery-btn {
 
  font-size: 18px; /* Larger font for readability */
  margin-top: 30px; /* More spacing from the last element */
  margin-left: 50px; /* More spacing from the last element */
  width: 80%; /* Matches the input fields' width */
  padding: 15px;
  margin-top: 10px; /* Adds space above the button */
  border-radius: 25px; /* Rounded corners for the button */
  border: 2px solid orange; /* Border color matches the button's background */
  background-color: orange;
  color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background-color 0.3s;
  align-items: center;

}

.cost-text {
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  margin-top: 20px;
}

.request-delivery-btn:hover {
  background-color: #E44000; /* Darker shade on hover */
}

.address-info p {
  margin: 5px 0;
}
/* Reset margins and padding */
/* CSS for the suggestions container */
/* CSS for the suggestions container */



#suggestions-container {

  list-style: none;
  margin: 0;
  padding: 0;
  
  display: none;

  position: absolute;
  border: 1px solid #ddd;
  border-top: none;
  z-index: 1000; /* Increased z-index to ensure it's above other elements */
  top: 100%;
  width: 80%;
  background: white;
  margin-left: 60px;
}

.field-contain {
  display: flex;
  background-color: white;
  align-items: center;
  width: 80%;
  position: relative; /* This should establish a stacking context */
  z-index: 10; /* Ensure it's higher than other base-level content */
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
  margin-left: 60px;

}

.field-contain  div {
  padding: 10px;
  cursor: pointer;
  text-align: left;
}


#suggestions-container div {
  padding: 10px;
  cursor: pointer;
  text-align: left;
}

#suggestions-container div:hover {
  background-color: #f2f2f2;
}

.field-container {
  position: relative; /* Ensure the parent container has a relative position */
  z-index: 1; /* Lower z-index for the field-container */
}

.icon-container, .gps-icon {
  z-index: 2; /* Ensure icons do not go below the input fields */
}

#tp {  
  transition: opacity 0.3s ease;  
z-index: 1;
}
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1500; /* Ensure it's below suggestions but above other content */
}

@keyframes spinner {
  to {transform: rotate(360deg);}
}

.loading-spinner {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  width: 16px;
  height: 16px;
  animation: spinner 1s ease-in-out infinite;
  align-items: center;
  justify-content: center;
}