/* MAIN SHIP FORM*/
.wrapper__booking {
    grid-template-areas:
            "shipment shipment "
            "contact address"
            "contact address"
            "extras extras";
}


#address-select {
    max-width: 100%; /* Constrain width to parent container */
    width: 100%; /* Ensure it takes up full width of the container */
    overflow: hidden;
    text-overflow: ellipsis; /* Truncate text with ellipsis */
    white-space: nowrap; /* Prevent text wrapping */
}

.inputs {
    /*max-width: 100%;*/
    /*overflow: hidden; !* Prevent overflow *!*/
    display: grid;
    border: 2px solid black;
    padding: 1rem;
    /*gap: .5rem;*/
    border-radius: 1rem;
}

.ship-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    /*min-width: 8rem;*/
    align-items: center;
}

.inputs__extras {
    grid-area: extras;
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;

}
.inputs__extras > div {
    flex: 1 1 0; /* Grow and shrink equally */
    min-width: 0; /* Allows flex items to shrink below their content's minimum width */
}
.inputs__ship {
    /*width: 13rem;*/
    grid-area: shipment;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    /*width: 100%;*/
    margin-block: auto;
    /*#own_label {*/
    /*    display: none;*/
    /*    !*opacity: 0;*!*/
    /*}*/

    select {
        text-align: center;
        /*text-align-last: center; !* For option alignment in most browsers *!*/
    }

}

/*.inputs__ship label {*/
/*    margin-bottom: 0.2rem;*/
/*}*/

/*.inputs__ship input,*/
/*.inputs__ship select {*/
/*    margin-bottom: 0.8rem;*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*}*/

.inputs__contact {
    /*width: 18rem;*/
    grid-area: contact;
}


.inputs__address {
    /*width: 20rem;*/
    grid-area: address;
}


#score-span {
    /*display: none;*/
    display: flex;
    justify-content: center;
    text-align: center;

    border-radius: 1rem;
    padding-inline: .6rem;
    padding-block: .2rem;
    margin-top: .5rem;
}

.high-score {
    background-color: var(--clr-success);
}

.medium-score {
    background-color: var(--clr-warning);
}

.low-score {
    background-color: var(--clr-danger);
}


.postcode-div {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    /*align-items: center;*/
    /*margin-block: 1rem;*/

    .postcode-pair {
        display: flex;
        flex-direction: column;
        /*gap: 1rem;*/
    }

    #postcode {
        /*max-width: max(50%, 150px);*/
        /*display: inline;*/
    }

    button {
        align-self: end;
        font-size: 18px;
    }
}


button {
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    padding-inline: .5rem;
    align-self: end;
    margin-left: 3rem;

    /*padding-block: .2rem;*/
    background-color: var(--clr-btn);
    color: var(--clr-success-font);
    font-size: 1.2rem;
    line-height: 2rem;
}


button.update-address-btn {
    /*font-size: 18px;*/
}

button:hover {
    background-color: var(--clr-btn-hover);
}


input:focus,
select:focus {
    border: 3px solid #186d9a;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}


/* Shipment booking results*/
.wrapper__requested {
    /*display: grid;*/
    grid-template-areas:
        "head      head    head      head    head "
         "col-cont col-add rec-cont rec-add details";
}

.wrapper__results {
    /*display: flex*/
}

.requested {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    border-radius: 1rem;
}

.requested__head {
    grid-area: head;
    display: flex;
    flex-direction: row;
    align-items: center;
    /*gap: .5rem;*/
    justify-content: center;
    text-align: center;
}

.requested-title {
    /*grid-area: title;*/
}

.requested__col_contact {
    grid-area: col-cont;
}

.requested__col_address {
    grid-area: col-add;
}

.requested__contact {
    grid-area: rec-cont;

}

.requested__address {
    grid-area: rec-add;

}

.requested__details {
    grid-area: details;
}

.requested__notes {
    grid-area: notes;
}

.requested__collection {
    grid-area: collection;
}

.result {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-radius: var(--border-radius);
    padding: .5rem 1rem;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
}

.result__success {
    background-color: var(--clr-success);
}


.result__fail {
    background-color: var(--clr-danger);
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.label-action {

}


.email-form {
    background: var(--clr-wrapper);
    display: flex;
    flex-direction: row;
    gap: 2rem;
    border-radius: var(--border-radius);
}

.label-actions {
    display: flex;
    flex-direction: row;
    gap: 4rem
}

/*.label-action__email {*/
/*    display: flex;*/
/*    flex-direction: row;*/

/*}*/

/*.label-email-options {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*}*/


/*#service {*/
/*    width: 11rem; !* Normal width *!*/
/*    transition: width 0.2s ease;*/
/*    text-overflow: ellipsis;*/
/*    white-space: nowrap;*/
/*    overflow: hidden;*/
/*}*/

/*#service:focus,*/
/*#service:active {*/
/*    width: max-content; !* Expand to fit content *!*/
/*    min-width: 11rem; !* Don't shrink below original size *!*/
/*    max-width: 35rem; !* Prevent it from getting too wide *!*/
/*    z-index: 1000; !* Higher z-index to appear above other elements *!*/
/*    position: relative;*/
/*}*/

/*!* Ensure it shrinks back when not focused *!*/
/*#service:not(:focus):not(:active) {*/
/*    width: 11rem;*/
/*}*/

/*!* Style the dropdown options when open *!*/
/*#service option {*/
/*    white-space: normal; !* Allow text wrapping in options *!*/
/*    word-wrap: break-word;*/
/*}*/

#service {
    width: 11rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#service option {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

#collect_times {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
}
#weight_kg {
    width: 4rem;
}