.rental-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 80px;
}

.rental-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rental-form .datetime-row {
    display: flex;
    flex-wrap: wrap; /* allows wrapping on smaller screens */
    gap: 80px;
}

.rental-form .datetime-row label,
.rental-form .vehicle-type-row label {
    display: flex;
    flex-direction: column;
    font-weight: bold;
}

.rental-form .datetime-row select {
    min-width: 70px;
}

.rental-form .datetime-group {
    display: flex;
    gap: 1rem;
}

@media (max-width: 800px) {
    .rental-form .datetime-row {
        gap: 16px;
    }
}

.rental-form .vehicle-type-row {
}

#cost-alert {
    color: #fa1010;
    margin-bottom: 1rem;
    display: none;
}

#cost-server-error {
    color: #fa1010;
    border: solid 1px rgba(250, 16, 16, 0.5);
    padding: 4px 6px;
    margin-bottom: 1rem;
    display: none;
}

.rental-form .date-inputs {
    display: flex;
    flex-wrap: wrap; /* allows wrapping on smaller screens */
    gap: 1rem;
}
.rental-form .date-inputs label {
    display: flex;
    flex-direction: column;
    font-weight: bold;
}
.rental-form .date-inputs input {
    margin-top: 0.25rem;
}

@media (max-width: 768px) {
    .date-inputs {
        flex-direction: column;
    }
}

/* for radio buttons and checkboxes */
.rental-form fieldset label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rental-form fieldset {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid #ccc;
    padding: 1rem;
}

.rental-form legend {
    font-weight: bold;
}

/* Appliance container: place checkbox, label, and quantity on one line */
.rental-form .appliance-container {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 24px;
}
.rental-form .appliance-container > label {
    min-width: 180px;
}

/* Hide quantity input by default */
.rental-form .appliance-qty {
    display: none;
}
.rental-form .appliance-qty input {
    width: 60px;
    padding: 0.2rem; /* smaller padding so it's not too tall */
    box-sizing: border-box; /* ensures width includes padding */
}

.rental-form .applianceRentalNote {
    margin-top: 6px;
    font-size: 12px;
}

.rental-form button[type='submit'] {
    margin-top: 1rem;
    padding: 0.75rem 1.2rem;
    cursor: pointer;
    border-radius: 4px;
}

.rental-form button[type='submit']:disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.rental-form .vehicle-select {
    min-width: 200px;
}

.rental-form .selected-vehicle {
    display: flex;
    flex-direction: column;
}

.rental-form .selected-vehicle .details {
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 8px 8px 8px 0px;
}

.rental-form .selected-vehicle .title {
    font-weight: bold;
}

.rental-form .selected-vehicle .photo {
    width: 80px;
    border: 4px solid #ededed;
}

.rental-form .selected-vehicle .vehicle-name {
    font-size: 14px;
}

.rental-form .rental-submit {
    width: fit-content;
}

#priceCalculation {
    display: none;
    margin-top: 1rem;
}
#priceCalculation table td {
    color: #555555;
    font-size: 14px;
    font-weight: bold;
}

#priceCalculation table td.label {
    color: #555555;
}

#priceCalculation table td.price {
    color: #555555;
}

#priceCalculation table .extraCostRow .label {
    font-weight: normal;
    padding-left: 32px;
}

#priceCalculation table .extraCostRow .value {
    font-weight: normal;
}

#priceCalculation .depositCostRow {
    margin-bottom: 18px;
}

.contactFormContainer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    min-height: 24px;
}

.contactFormContainer .contactFormRow {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.contactFormContainer .contactFormRow label {
    min-width: 110px;
}

.contactFormContainer .contactFormRow input {
    min-width: 200px;
}

.deliveryFormRow {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 24px;
    line-height: 1;
}

.rental-form .input-error {
    color: #fa1010;
    font-size: 12px;
    font-weight: normal;
    margin-left: 12px;
}

#bottomSection {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.infoBox {
    padding: 3px 6px;
    font-size: 12px;
    border-radius: 2px;
    background-color: rgba(221, 154, 23, 0.12);
}

.infoBox.large {
    padding: 18px;
    font-size: 14px;
    border-radius: 4px;
}

.infoBox .title {
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: bold;
}

.infoBox ul {
    list-style-position: outside; /* bullet stays outside the content */
    padding-left: 20px; /* controls the indent */
}

.infoBox ul li {
    padding-left: 6px; /* space between bullet and text */
}

/* otherwise datepicker falls behind header when it opens upwards */
#fromDate,
#toDate {
    position: relative;
    z-index: 100;
}