:root {
    --request-ink: #14251b;
    --request-muted: #607066;
    --request-border: #dce5df;
    --request-soft: #f5f8f6;
    --request-green: #157347;
    --request-green-soft: #eaf6ef;
}

.service-request {
    color: var(--request-ink);
}

.service-request__header {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--request-border);
}

.service-request__header h2 {
    margin: .25rem 0 .3rem;
    font-weight: 850;
    letter-spacing: -.02em;
}

.service-request__eyebrow {
    color: var(--request-green);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.service-request__summary,
.service-request__intro {
    color: var(--request-muted);
}

.service-request__summary {
    margin: 0;
    font-size: .92rem;
}

.service-request__intro {
    margin: 1rem 0 0;
    line-height: 1.55;
}

.service-request-form {
    display: grid;
    gap: .9rem;
    margin-top: 1rem;
}

.service-request .progressive-hidden {
    display: none !important;
}

.booking-step {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--request-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(18, 35, 26, .035);
}

.booking-step__heading {
    margin-bottom: .8rem;
}

.booking-step__heading h3,
.booking-step__label {
    color: var(--request-ink);
    font-size: 1rem;
    font-weight: 800;
}

.booking-step__heading h3 {
    margin: 0 0 .25rem;
}

.booking-step__heading p,
.booking-step__help {
    color: var(--request-muted);
    font-size: .86rem;
    line-height: 1.45;
}

.booking-step__heading p,
.booking-step__help {
    margin: 0 0 .7rem;
}

.booking-step__label {
    display: block;
    margin-bottom: .25rem;
}

.service-request .form-control,
.service-request .form-select,
.service-request .input-group-text {
    min-height: 48px;
    border-color: #cbd7cf;
}

.service-request textarea.form-control {
    min-height: 118px;
    resize: vertical;
}

.service-request .form-control:focus,
.service-request .form-select:focus {
    border-color: var(--request-green);
    box-shadow: 0 0 0 .2rem rgba(21, 115, 71, .13);
}

.booking-location-controls {
    display: flex;
    flex-wrap: nowrap;
}

.booking-location-controls .form-control {
    min-width: 0;
}

.booking-use-location {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 48px;
    white-space: nowrap;
    font-weight: 700;
}

.booking-location-map {
    position: relative;
    z-index: 0;
    isolation: isolate;
    width: 100%;
    height: 300px;
    overflow: hidden;
    border: 1px solid #cbd7cf;
    border-radius: 12px;
    background: var(--request-soft);
}

.booking-distance-summary {
    margin: .75rem 0 0;
    border-color: var(--request-border);
}

.booking-step--time {
    background: var(--request-green-soft);
    border-color: #c9e3d3;
}

.booking-time-status {
    min-height: 1.4em;
    margin: .65rem 0 0;
    color: #315b43;
    font-size: .85rem;
    font-weight: 650;
}

.booking-duration-control {
    max-width: 19rem;
}

.booking-step--note textarea {
    line-height: 1.5;
}

.booking-registration {
    background: var(--request-soft);
}

.booking-registration .alert {
    border-radius: 10px;
}

.booking-step--acknowledgement {
    padding: .75rem;
    background: var(--request-soft);
}

.service-request .booking-acknowledgement {
    max-width: none;
    border: 0;
    background: transparent;
}

.service-request-submit {
    position: relative;
    z-index: 1;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border-radius: 12px;
}

.service-request__submit-status {
    margin: -.25rem 0 0;
    color: var(--request-muted);
    font-size: .82rem;
    line-height: 1.45;
}

.service-request-submit:focus-visible,
.booking-use-location:focus-visible,
.booking-info-toggle:focus-visible {
    outline: 3px solid rgba(21, 115, 71, .35);
    outline-offset: 3px;
}

dialog#quick-service-booking {
    box-sizing: border-box;
    width: min(46rem, calc(100vw - 2rem)) !important;
    max-width: 46rem;
    max-height: min(90dvh, 58rem) !important;
    margin: auto;
    padding: 0 !important;
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    background: #fff;
    color: var(--request-ink);
    box-shadow: 0 24px 70px rgba(10, 30, 19, .3);
}

dialog#quick-service-booking[open] {
    display: flex;
    flex-direction: column;
}

dialog#quick-service-booking::backdrop {
    background: rgba(9, 25, 16, .66);
    backdrop-filter: blur(3px);
}

dialog#quick-service-booking > .quick-service-booking__header,
dialog#quick-service-booking > [data-booking-dialog-header],
dialog#quick-service-booking > .d-flex:first-child {
    position: sticky;
    top: 0;
    z-index: 20;
    flex: 0 0 auto;
    min-height: 64px;
    margin: 0;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--request-border);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 4px 14px rgba(18, 35, 26, .07);
}

dialog#quick-service-booking [data-close-booking] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-left: .75rem;
    border-radius: 999px;
    touch-action: manipulation;
}

dialog#quick-service-booking [data-close-booking] span {
    display: block;
    font: 1.9rem/1 Arial, sans-serif;
    transform: translateY(-1px);
}

dialog#quick-service-booking [data-close-booking]:focus-visible {
    outline: 3px solid rgba(21, 115, 71, .35);
    outline-offset: 2px;
}

dialog#quick-service-booking > [data-booking-content] {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1rem 1.2rem 1.25rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

dialog#quick-service-booking .service-request {
    position: static;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 575px) {
    .service-request {
        padding: 1rem;
        border-radius: 14px;
    }

    .service-request-form {
        gap: .75rem;
    }

    .booking-step {
        padding: .85rem;
        border-radius: 12px;
    }

    .booking-location-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: .55rem;
    }

    .booking-location-controls > .form-control,
    .booking-location-controls > .btn {
        width: 100%;
        border-radius: .5rem !important;
    }

    .booking-use-location {
        min-height: 50px;
    }

    .booking-location-map {
        height: min(46vh, 320px) !important;
        min-height: 250px;
    }

    .booking-duration-control {
        max-width: none;
    }

    .service-request-submit {
        position: sticky;
        bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
        z-index: 10;
        box-shadow: 0 8px 24px rgba(18, 35, 26, .2);
    }

    dialog#quick-service-booking {
        inset: 0;
        width: 100vw !important;
        max-width: none;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0;
        border-radius: 0;
    }

    dialog#quick-service-booking > .quick-service-booking__header,
    dialog#quick-service-booking > [data-booking-dialog-header],
    dialog#quick-service-booking > .d-flex:first-child {
        min-height: calc(60px + env(safe-area-inset-top, 0px));
        padding: calc(.65rem + env(safe-area-inset-top, 0px)) calc(.85rem + env(safe-area-inset-right, 0px)) .65rem calc(.85rem + env(safe-area-inset-left, 0px));
    }

    dialog#quick-service-booking > [data-booking-content] {
        padding: .85rem calc(.85rem + env(safe-area-inset-right, 0px)) calc(1.25rem + env(safe-area-inset-bottom, 0px)) calc(.85rem + env(safe-area-inset-left, 0px));
        scrollbar-gutter: auto;
    }

    dialog#quick-service-booking [data-close-booking] {
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
        padding: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-request *,
    .service-request *::before,
    .service-request *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}