.hb-details-fields {
    display: block; /* Change from grid to block for more control */
}

.hb-details-fields p {
    display: block;
    margin-bottom: 20px;
}

/* First name and last name side by side */
.hb-details-fields p:has(#hb-form-1-first_name),
.hb-details-fields p:has(#hb-form-1-last_name) {
    display: inline-block;
    width: calc(50% - 10px);
    vertical-align: top;
}

.hb-details-fields p:has(#hb-form-1-last_name) {
    margin-left: 20px;
}

/* Zip code and city side by side */
.hb-details-fields p:has(#hb-form-1-zip_code) {
    display: inline-block;
    width: calc(25% - 10px);
    vertical-align: top;
    margin-right: 20px;
    margin-bottom: 0;
}

.hb-details-fields p:has(#hb-form-1-city) {
    display: inline-block;
    width: calc(75% - 10px);
    vertical-align: top;
    margin-bottom: 20px;
}

/* Ensure labels and inputs are full width within their containers */
.hb-details-fields label {
    display: block;
    margin-bottom: 5px;
}

.hb-details-fields input,
.hb-details-fields textarea,
.hb-details-fields select {
    width: 100%;
    box-sizing: border-box;
}

/* Mobile responsive */
@media (max-width: 1024px) {
    .hb-details-fields p:has(#hb-form-1-first_name),
    .hb-details-fields p:has(#hb-form-1-last_name),
    .hb-details-fields p:has(#hb-form-1-zip_code),
    .hb-details-fields p:has(#hb-form-1-city) {
        display: block;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 20px;
    }
}