/* public/style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
    margin: 20px;
}

form {
      max-width: 600px;
      margin: 0 auto;
    }

#logo {
        display: block; /* Ensure it's treated as a block element */
        margin: 0 auto; /* Center the logo horizontally */
        max-width: 200px; /* Ensure the logo doesn't exceed the container's width */
        height: 10%; /* Maintain aspect ratio */
        margin-bottom: 20px; /* Add some space below the logo */
    }

header {
        text-align: center; /* Center the content */
        margin-bottom: 30px; /* Add some space below the logo */
    }

h2 {
    text-align: center;
    color: #4CAF50;
}

input, select, textarea {
    width: 98%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
}

button {
    display: block;
    margin: 0 auto;
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 20px;
    margin-bottom: 20px;
}

button:hover {
    background-color: #45a049;
}

.bold-label {
    font-weight: bold;
}

div {
    margin-bottom: 20px;
}

/* Container to hold both form sections */
.form-container {
    display: flex;                /* Use flexbox to align items horizontally */
    gap: 20px;                    /* Add space between the two sections */
    justify-content: space-between; /* Distribute the space between the items */
    flex-wrap: wrap;               /* Ensure the sections wrap on smaller screens */
}

/* Individual form section */
.form-section {
    flex: 1;                      /* Allow form sections to take equal width */
    min-width: 250px;              /* Prevent sections from shrinking too small */
    max-width: 100%;                /* Ensure the sections don't get too wide */
}

/* Ensure that the label and select elements stack vertically */
.form-section label {
    display: block; /* Makes the label a block element */
    margin-bottom: 8px; /* Adds space between the label and the dropdown */
}

.form-section select {
    width: 100%; /* Ensures the select dropdown takes up the full width of the form section */
    padding: 8px; /* Adds padding inside the dropdown for a better visual appearance */
    box-sizing: border-box; /* Ensures the width calculation includes padding */
}

/* Ensure checkbox and label are aligned properly */
.checkbox-label {
    display: inline-flex;
    align-items: center; /* Ensures the checkbox and text are vertically aligned */
    gap: 8px; /* Adds space between the text and the checkbox */
    cursor: pointer; /* Ensures the whole label is clickable */
}

/* Optional: Customize the checkbox style */
.checkbox-label input {
    /* You can add custom styles for the checkbox if needed */
    width: 16px;
    height: 16px;
}
label {
    margin-bottom: 5px;
    display: block;                /* Ensure labels are block-level */
    font-weight: bold;             /* Make labels bold */
    display: inline-flex;
}

.distance-result {
    display: block;                /* Use flexbox to arrange items horizontally */
    justify-content: space-between; /* Distribute space between the two items */
    align-items: center;           /* Vertically align the items */
    gap: 20px;                     /* Optional: space between the two blocks */
    margin-top: 20px;              /* Optional: space above the result */
}

.distance-result div {
    display: flex;                /* Use flexbox for each container */
   /*  margin-bottom: 10px; Add space between Distance and Price sections */
}

.distance-result label {
    margin-right: 10px;           /* Space between the label and value */
}

distance-result div label {
    margin-bottom: 5px; /* Space between the label and value */
   /*  display: block;     Ensure labels are block level */
}

/* Make the Payment Method field smaller */
#paymentMethod {
    width: 30%; /* Adjust the width as needed */
    font-size: 0.85em; /* Optional: reduce the font size to make it smaller */
    padding: 8px; /* Optional: adjust padding to make it less bulky */
}

h3 {
    margin-bottom: 15px;           /* Add space after headings */
}

@media (max-width: 500px) {
    #logo {
        max-width: 40%; /* Logo will take 80% of the container width on small screens */
    }
}