/* New Booking layout refinement.
 * Presentation only: no field ids, values, validation or behaviour are changed.
 */
.lsm-dispatch .lsm-new-booking .lsm-form {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: stretch !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.lsm-dispatch .lsm-new-booking .lsm-form__header {
    order: 0;
    width: 100%;
    margin-bottom: .8rem !important;
}

/* Interpreter first. No TOOLS card, no extra outer chrome. */
.lsm-dispatch .lsm-new-booking .lsm-ai-container {
    order: 10 !important;
    width: 100% !important;
    margin: 0 0 .8rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lsm-dispatch .lsm-new-booking .lsm-ai-container::before {
    content: none !important;
    display: none !important;
}

/* Booking information follows the interpreter. */
.lsm-dispatch .lsm-new-booking label[for="qb-booking-number"] { order: 20 !important; width: 100% !important; margin-top: 0 !important; }

/* Booking reference + booking type sit together on one compact row. */
.lsm-dispatch .lsm-new-booking #qb-booking-number,
.lsm-dispatch .lsm-new-booking .lsm-booking-type-select {
    order: 21 !important;
}

.lsm-dispatch .lsm-new-booking #qb-booking-source { order: 22 !important; width: 100% !important; }
.lsm-dispatch .lsm-new-booking #qb-booking-brand { order: 23 !important; width: 100% !important; }
.lsm-dispatch .lsm-new-booking #qb-booking-service { order: 24 !important; width: 100% !important; }
.lsm-dispatch .lsm-new-booking #qb-hourly-duration { order: 25 !important; width: 100% !important; }
.lsm-dispatch .lsm-new-booking .lsm-agent-field { order: 26 !important; width: 100% !important; }

/* Agent booking number: compact reference treatment, not a text-box treatment. */
.lsm-dispatch .lsm-new-booking #qb-booking-number {
    width: min(100%, calc(20ch + 1.8rem)) !important;
    max-width: calc(20ch + 1.8rem) !important;
    min-height: 34px !important;
    margin-left: 1rem !important;
    margin-right: .7rem !important;
    padding: .28rem .15rem .22rem 1.55rem !important;
    border: 0 !important;
    border-bottom: 1px solid #91672c !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2391672c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 1.05rem 1.05rem !important;
    box-shadow: none !important;
    color: #2d2b27 !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
    flex: 0 0 auto;
}

.lsm-dispatch .lsm-new-booking #qb-booking-number:focus {
    outline: none !important;
    border-bottom-color: #91672c !important;
    box-shadow: 0 1px 0 #91672c !important;
}

/* Unified booking type selector. The original source and agent controls remain
 * in the DOM and keep the established save/AI/prefill behaviour; this selector
 * is only the user-facing control once JS enhancement is ready. */
.lsm-dispatch .lsm-new-booking .lsm-booking-type-select {
    width: auto !important;
    min-width: 180px !important;
    max-width: 260px !important;
    margin: 0 !important;
    min-height: 38px;
    box-sizing: border-box;
    padding: .48rem 2rem .48rem .7rem !important;
    border: 1px solid #e7e4dc !important;
    border-radius: .5rem !important;
    background: #fff !important;
    color: #2d2b27 !important;
    font-size: .91rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    box-shadow: none !important;
    flex: 0 0 auto;
}

/* Put the two controls on one line while leaving the remaining booking fields
 * in the normal vertical flow. */
.lsm-dispatch .lsm-new-booking #qb-booking-number,
.lsm-dispatch .lsm-new-booking .lsm-booking-type-select {
    align-self: flex-start;
}

.lsm-dispatch .lsm-new-booking #qb-booking-number {
    position: relative;
}

.lsm-dispatch .lsm-new-booking .lsm-booking-type-select {
    margin-top: -34px !important;
    margin-left: calc(1rem + min(100%, calc(20ch + 1.8rem)) + .7rem) !important;
}

.lsm-dispatch .lsm-new-booking.lsm-booking-type-ready #qb-booking-source,
.lsm-dispatch .lsm-new-booking.lsm-booking-type-ready .lsm-agent-field,
.lsm-dispatch .lsm-new-booking #qb-booking-brand {
    display: none !important;
}

/* Trip */
.lsm-dispatch .lsm-new-booking label[for="qb-date"] { order: 30 !important; width: 100% !important; margin-top: .8rem !important; }
.lsm-dispatch .lsm-new-booking .lsm-inline { order: 31 !important; width: 100% !important; }
.lsm-dispatch .lsm-new-booking #qb-from { order: 32 !important; width: 100% !important; }
.lsm-dispatch .lsm-new-booking #qb-to { order: 33 !important; width: 100% !important; }

/* Customer: one continuous editable information card, matching Dispatcher details. */
.lsm-dispatch .lsm-new-booking label[for="qb-name"] {
    order: 40 !important;
    width: 100% !important;
    margin-top: .8rem !important;
    padding-right: 3rem !important;
    border-bottom: 1px solid #e7e4dc !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2391672c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L8 18l-4 1 1-4Z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 1rem 1rem !important;
}

.lsm-dispatch .lsm-new-booking #qb-name,
.lsm-dispatch .lsm-new-booking #qb-pax,
.lsm-dispatch .lsm-new-booking #qb-phone,
.lsm-dispatch .lsm-new-booking #qb-email {
    width: 100% !important;
    min-height: 34px !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: .35rem 1rem .35rem 3rem !important;
    border-top: 0 !important;
    border-right: 1px solid #e7e4dc !important;
    border-bottom: 0 !important;
    border-left: 1px solid #e7e4dc !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    background-repeat: no-repeat !important;
    background-position: 1rem center !important;
    background-size: 1.05rem 1.05rem !important;
    box-shadow: none !important;
    color: #181814 !important;
    font-size: .91rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
}

.lsm-dispatch .lsm-new-booking #qb-name {
    order: 41 !important;
    padding-top: .75rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2391672c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Cpath d='M5.5 20a6.5 6.5 0 0 1 13 0'/%3E%3C/svg%3E") !important;
}

.lsm-dispatch .lsm-new-booking #qb-pax {
    order: 42 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2391672c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='2.5'/%3E%3Ccircle cx='16.5' cy='9' r='2'/%3E%3Cpath d='M4.5 19a4.5 4.5 0 0 1 9 0M13.5 18a3.5 3.5 0 0 1 6.5 0'/%3E%3C/svg%3E") !important;
}

.lsm-dispatch .lsm-new-booking #qb-phone {
    order: 43 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2391672c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 3.5 10 8 8 10c1.4 3 3 4.6 6 6l2-2 4.5 2.5c.3 2.7-1.2 4-3.7 4C10 20.5 3.5 14 3.5 7.2c0-2.5 1.3-4 4-3.7Z'/%3E%3C/svg%3E") !important;
}

.lsm-dispatch .lsm-new-booking #qb-email {
    order: 44 !important;
    min-height: 44px !important;
    padding-bottom: .75rem !important;
    border-bottom: 1px solid #e7e4dc !important;
    border-radius: 0 0 .72rem .72rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2391672c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='1.5'/%3E%3Cpath d='m4.5 7 7.5 6 7.5-6'/%3E%3C/svg%3E") !important;
}

.lsm-dispatch .lsm-new-booking #qb-name:focus,
.lsm-dispatch .lsm-new-booking #qb-pax:focus,
.lsm-dispatch .lsm-new-booking #qb-phone:focus,
.lsm-dispatch .lsm-new-booking #qb-email:focus {
    outline: none !important;
    border-color: #e7e4dc !important;
    background-color: #fbfaf7 !important;
    box-shadow: inset 0 -1px 0 #91672c !important;
}

.lsm-dispatch .lsm-new-booking #qb-name::placeholder,
.lsm-dispatch .lsm-new-booking #qb-pax::placeholder,
.lsm-dispatch .lsm-new-booking #qb-phone::placeholder,
.lsm-dispatch .lsm-new-booking #qb-email::placeholder {
    color: #858179 !important;
    opacity: 1;
}

/* Notes, money and final action */
.lsm-dispatch .lsm-new-booking label[for="qb-notes"] { order: 50 !important; width: 100% !important; margin-top: .8rem !important; }
.lsm-dispatch .lsm-new-booking #qb-notes { order: 51 !important; width: 100% !important; }
.lsm-dispatch .lsm-new-booking label[for="qb-price"] { order: 60 !important; width: 100% !important; margin-top: .8rem !important; }
.lsm-dispatch .lsm-new-booking #qb-price { order: 61 !important; width: 100% !important; }
.lsm-dispatch .lsm-new-booking .lsm-actions { order: 70 !important; width: 100% !important; margin-top: .8rem !important; }

/* Inbound prefill remains immediately below the page header when present. */
.lsm-dispatch .lsm-new-booking .lsm-inbound-prefill {
    order: 5 !important;
    width: 100% !important;
    margin-bottom: .8rem !important;
}

/* Keep the Trip date/time controls in one compact row on desktop. */
.lsm-dispatch .lsm-new-booking .lsm-inline {
    display: grid !important;
    grid-template-columns: minmax(180px, .85fr) minmax(220px, 1.15fr) !important;
}

/* Service mode now belongs to Trip. Keep the original selects for the existing
 * submit logic, but replace their visible UI with compact radio controls. */
.lsm-dispatch .lsm-new-booking.lsm-trip-service-ready #qb-booking-service,
.lsm-dispatch .lsm-new-booking.lsm-trip-service-ready #qb-hourly-duration {
    display: none !important;
}

.lsm-dispatch .lsm-new-booking .lsm-trip-service-controls {
    order: 31 !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem 1rem;
    width: calc(100% - 2rem);
    margin: 0 1rem .65rem !important;
    padding: .2rem 0 .65rem;
    border-bottom: 1px solid #e7e4dc;
}

.lsm-dispatch .lsm-new-booking .lsm-trip-service-option {
    display: inline-flex !important;
    align-items: center;
    gap: .4rem;
    margin: 0 !important;
    color: #2d2b27 !important;
    font-size: .91rem;
    font-weight: 600 !important;
    cursor: pointer;
}

.lsm-dispatch .lsm-new-booking .lsm-trip-service-option input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    accent-color: #91672c;
}

.lsm-dispatch .lsm-new-booking .lsm-hourly-duration-picker {
    width: auto !important;
    min-width: 120px !important;
    max-width: 150px !important;
    min-height: 36px !important;
    margin-left: .2rem !important;
    padding: .4rem 1.8rem .4rem .65rem !important;
    border: 1px solid #e7e4dc !important;
    border-radius: .5rem !important;
    background: #fff !important;
    color: #2d2b27 !important;
    font-size: .88rem !important;
    box-shadow: none !important;
}

.lsm-dispatch .lsm-new-booking .lsm-hourly-duration-picker[hidden] {
    display: none !important;
}

.lsm-dispatch .lsm-new-booking .lsm-inline { order: 32 !important; }
.lsm-dispatch .lsm-new-booking #qb-from { order: 33 !important; }
.lsm-dispatch .lsm-new-booking #qb-to { order: 34 !important; }
.lsm-dispatch .lsm-new-booking #qb-vehicle { order: 35 !important; }
.lsm-dispatch .lsm-new-booking #qb-flight { order: 36 !important; }

/* Vehicle and flight stay as the original editable text fields. This is only a
 * compact presentation: both sit on one row with visual SVG cues. */
.lsm-dispatch .lsm-new-booking label[for="qb-vehicle"],
.lsm-dispatch .lsm-new-booking label[for="qb-flight"] {
    display: none !important;
}

.lsm-dispatch .lsm-new-booking #qb-vehicle,
.lsm-dispatch .lsm-new-booking #qb-flight {
    width: calc(50% - 1.5rem) !important;
    min-height: 40px !important;
    box-sizing: border-box;
    padding: .45rem .2rem .45rem 1.65rem !important;
    border: 0 !important;
    border-bottom: 1px solid #e7e4dc !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 1.1rem 1.1rem !important;
    box-shadow: none !important;
    color: #181814 !important;
    font-size: .91rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

.lsm-dispatch .lsm-new-booking #qb-vehicle {
    align-self: flex-start;
    margin: .1rem 0 .65rem 1rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2391672c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15h16l-1.5-5a2 2 0 0 0-1.9-1.4H7.4A2 2 0 0 0 5.5 10L4 15Z'/%3E%3Cpath d='M3 15v3h2M21 15v3h-2M7 18h10'/%3E%3Ccircle cx='7' cy='15' r='1'/%3E%3Ccircle cx='17' cy='15' r='1'/%3E%3C/svg%3E") !important;
}

.lsm-dispatch .lsm-new-booking #qb-flight {
    align-self: flex-end;
    margin: calc(-40px - .65rem) 1rem .65rem 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2391672c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 7 2 8-8 2 1-5 9 4 2-1 2-5-1-3 3-2-1 1-4-6-3Z'/%3E%3C/svg%3E") !important;
}

.lsm-dispatch .lsm-new-booking #qb-vehicle:focus,
.lsm-dispatch .lsm-new-booking #qb-flight:focus {
    outline: none !important;
    border-bottom-color: #91672c !important;
    box-shadow: 0 1px 0 #91672c !important;
}

.lsm-dispatch .lsm-new-booking #qb-vehicle::placeholder,
.lsm-dispatch .lsm-new-booking #qb-flight::placeholder {
    color: #858179 !important;
    opacity: 1;
}

/* Route-style address editor. The original inputs stay intact so Google Places
 * autocomplete and the existing lat/lng/place-id logic continue to work. */
.lsm-dispatch .lsm-new-booking .lsm-route-addresses {
    order: 33 !important;
    position: relative;
    width: calc(100% - 2rem);
    margin: .05rem 1rem .65rem !important;
    padding: .08rem 0;
}

.lsm-dispatch .lsm-new-booking .lsm-route-addresses::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 25px;
    bottom: 25px;
    border-left: 1.5px dashed #91672c;
    pointer-events: none;
}

.lsm-dispatch .lsm-new-booking .lsm-route-address-row {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    min-height: 48px;
}

.lsm-dispatch .lsm-new-booking .lsm-route-address-row::before {
    content: "";
    grid-column: 1;
    justify-self: center;
    position: relative;
    z-index: 1;
    width: 8px;
    height: 8px;
    box-sizing: border-box;
    border: 2px solid #91672c;
    border-radius: 50%;
    background: #fff;
}

.lsm-dispatch .lsm-new-booking .lsm-route-address-row--to::before {
    width: 11px;
    height: 14px;
    border: 0;
    border-radius: 0;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2391672c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s5-4.4 5-10a5 5 0 1 0-10 0c0 5.6 5 10 5 10Z'/%3E%3Ccircle cx='12' cy='11' r='1.7'/%3E%3C/svg%3E");
}

.lsm-dispatch .lsm-new-booking .lsm-route-address-row #qb-from,
.lsm-dispatch .lsm-new-booking .lsm-route-address-row #qb-to {
    grid-column: 2;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: .5rem 2rem .5rem .15rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2391672c' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5-2 8 3 5-2v13l-5 2-8-3-5 2V6Z'/%3E%3Cpath d='M8 4v13M16 7v13'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .2rem center !important;
    background-size: 1rem 1rem !important;
    box-shadow: none !important;
    color: #181814 !important;
    font-size: .91rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
}

.lsm-dispatch .lsm-new-booking .lsm-route-address-row #qb-from:focus,
.lsm-dispatch .lsm-new-booking .lsm-route-address-row #qb-to:focus {
    outline: none !important;
    background-color: #fbfaf7 !important;
    box-shadow: inset 0 -1px 0 #91672c !important;
}

.lsm-dispatch .lsm-new-booking .lsm-route-address-row #qb-from::placeholder,
.lsm-dispatch .lsm-new-booking .lsm-route-address-row #qb-to::placeholder {
    color: #858179 !important;
    opacity: 1;
}

@media (max-width: 768px) {
    .lsm-dispatch .lsm-new-booking .lsm-form {
        padding: 0 .55rem !important;
    }

    .lsm-dispatch .lsm-new-booking .lsm-inline {
        grid-template-columns: 1fr !important;
    }

    .lsm-dispatch .lsm-new-booking #qb-booking-number {
        width: min(100%, calc(20ch + 1.8rem)) !important;
        margin-left: .75rem !important;
        margin-right: .5rem !important;
    }

    .lsm-dispatch .lsm-new-booking .lsm-booking-type-select {
        min-width: 150px !important;
        max-width: 220px !important;
        margin-left: calc(.75rem + min(100%, calc(20ch + 1.8rem)) + .5rem) !important;
    }

    .lsm-dispatch .lsm-new-booking .lsm-trip-service-controls {
        width: calc(100% - 1.5rem);
        margin-left: .75rem !important;
        margin-right: .75rem !important;
    }

    .lsm-dispatch .lsm-new-booking #qb-vehicle,
    .lsm-dispatch .lsm-new-booking #qb-flight {
        width: calc(100% - 1.5rem) !important;
        align-self: stretch;
        margin-left: .75rem !important;
        margin-right: .75rem !important;
    }

    .lsm-dispatch .lsm-new-booking #qb-flight {
        margin-top: 0 !important;
    }

    .lsm-dispatch .lsm-new-booking .lsm-route-addresses {
        width: calc(100% - 1.5rem);
        margin-left: .75rem !important;
        margin-right: .75rem !important;
    }
}