/*
 * REBBIFY RIDE PROCESS — LAYOUT CONTRACT
 * =======================================
 * Fonte final de verdade para a geometria/responsividade de /solicite-uma-viagem-pelo-app-da-rebbify.
 *
 * POR QUE ESTE ARQUIVO EXISTE
 * O frontend legado possui várias camadas históricas em process-step.css,
 * process-step-home-request.css e passenger-experience.css. Alterações novas de
 * layout feitas em qualquer um desses arquivos voltavam a se sobrescrever.
 * Este arquivo é carregado POR ÚLTIMO apenas na tela de corrida para estabilizar
 * a interface sem alterar regras de negócio, rotas ou APIs.
 *
 * REGRA PARA FUTURAS ALTERAÇÕES ASSISTIDAS
 * 1. Não criar outro “hotfix” de header/mapa/painel no fim de process-step.css.
 * 2. Não usar position:absolute para montar as duas linhas do header mobile.
 * 3. Não inventar z-index gigantes. Use somente a escala --ride-z-* abaixo.
 * 4. Não alterar width/height/padding no :focus de inputs.
 * 5. Agendamento é INLINE no painel esquerdo. Nunca voltar a transformá-lo em modal.
 * 6. O botão #rideSearchBtn não possui seta lateral.
 *
 * Se uma regra deste contrato precisar mudar, altere-a aqui e documente o motivo.
 */

#rebbifyRideApp {
    --ride-z-map: 1;
    --ride-z-map-control: 20;
    --ride-z-floating: 60;
    --ride-z-topbar: 200;
    --ride-z-dropdown: 320;
    --ride-z-actionbar: 400;
    --ride-z-modal: 1100;
    --ride-z-checkout: 1120;
    --ride-z-critical: 1140;
}

/* ---------- Header: uma estrutura real, sem sobreposição ---------- */
#rebbifyRideApp .rebbify-ride-topbar {
    z-index: var(--ride-z-topbar) !important;
    overflow: visible !important;
}

#rebbifyRideApp .rebbify-profile-menu-wrap {
    position: relative !important;
    z-index: var(--ride-z-dropdown) !important;
}

#rebbifyRideApp .rebbify-profile-menu-wrap .rebbify-profile-menu,
#rebbifyRideApp .rebbify-profile-menu-wrap.is-open .rebbify-profile-menu {
    z-index: var(--ride-z-dropdown) !important;
}

/* ---------- Camadas: escala curta e previsível ---------- */
body > .rebbify-reserve-terms-modal,
body > .rebbify-request-city-modal,
body > .rebbify-login-gate,
body > .modal.show {
    z-index: var(--ride-z-modal, 1100) !important;
}

body > .rebbify-payment-modal {
    z-index: var(--ride-z-checkout, 1120) !important;
}

body > .rebbify-checkout-screen {
    z-index: var(--ride-z-critical, 1140) !important;
}

#rebbifyRideApp .ride-safety-floating-button,
#rebbifyRideApp .ride-chat-floating-button,
#rebbifyRideApp .rebbify-map-route-summary {
    z-index: var(--ride-z-floating) !important;
}

/* ---------- Contrato do agendamento: sempre inline ---------- */
#rideScheduleEditor.rebbify-schedule-editor,
#rideScheduleEditor.rebbify-schedule-editor.is-modal-open {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.rebbify-schedule-modal-backdrop,
.rebbify-schedule-modal-backdrop.is-open {
    display: none !important;
}

body.rebbify-schedule-modal-open #rebbifyRideApp {
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ---------- CTA Pesquisar: texto central, sem seta ---------- */
#rebbifyRideApp #rideSearchBtn .rebbify-primary-btn__arrow,
#rebbifyRideApp .rebbify-search-ride-btn .rebbify-primary-btn__arrow {
    display: none !important;
}

#rebbifyRideApp #rideSearchBtn {
    justify-content: center !important;
    padding-inline: 18px !important;
}

#rebbifyRideApp #rideSearchBtn[aria-busy="true"] {
    opacity: .72 !important;
    cursor: wait !important;
    pointer-events: none !important;
}

/* ---------- Inputs: foco não muda geometria nem desloca ícones ---------- */
#rebbifyRideApp .ride-location-field:focus-within,
#rebbifyRideApp .rebbify-location-control:focus-within,
#rebbifyRideApp .input-group-custom:focus-within {
    outline: 0 !important;
    box-shadow: none !important;
}

#rebbifyRideApp .ride-location-field .input-group-custom__input:focus,
#rebbifyRideApp .ride-location-field .input-group-custom__input:focus-visible {
    outline: 0 !important;
    box-shadow: none !important;
}

/* ---------- Desktop/tablet: impede corte causado por alturas concorrentes ---------- */
@media (min-width: 768px) {
    #rebbifyRideApp .rebbify-ride-stage {
        min-width: 0 !important;
    }

    #rebbifyRideApp .rebbify-booking-wrapper,
    #rebbifyRideApp .rebbify-booking-panel,
    #rebbifyRideApp .rebbify-map-panel {
        min-width: 0 !important;
    }
}

/* ---------- Mobile: header em DUAS LINHAS REAIS ---------- */
@media (max-width: 767px) {
    #rebbifyRideApp {
        --ride-topbar-height: 104px !important;
    }

    #rebbifyRideApp .rebbify-ride-topbar,
    #rebbifyRideApp.is-service-selection .rebbify-ride-topbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: 44px 40px !important;
        grid-template-areas:
            "brand actions"
            "modes modes" !important;
        column-gap: 10px !important;
        row-gap: 4px !important;
        align-items: center !important;
        align-content: center !important;
        width: 100% !important;
        height: var(--ride-topbar-height) !important;
        min-height: var(--ride-topbar-height) !important;
        padding: 8px 12px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        isolation: isolate !important;
    }

    /* display:contents permite que logo e modos ocupem linhas diferentes da grade
       sem mover/duplicar nenhum elemento no Blade. */
    #rebbifyRideApp .rebbify-ride-topbar__left {
        display: contents !important;
    }

    #rebbifyRideApp .rebbify-ride-brand {
        grid-area: brand !important;
        align-self: center !important;
        width: 78px !important;
        height: 32px !important;
        min-width: 0 !important;
        margin: 0 !important;
        position: static !important;
    }

    #rebbifyRideApp .rebbify-ride-brand img {
        width: 78px !important;
        max-width: 100% !important;
        height: auto !important;
    }

    #rebbifyRideApp .rebbify-ride-topbar__right {
        grid-area: actions !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 7px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        z-index: calc(var(--ride-z-dropdown) - 1) !important;
    }

    #rebbifyRideApp .rebbify-ride-modes {
        grid-area: modes !important;
        position: static !important;
        inset: auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: center !important;
        width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 3px !important;
        gap: 4px !important;
        border-radius: 10px !important;
        background: var(--rb-soft, #f3f3f3) !important;
        z-index: auto !important;
        box-sizing: border-box !important;
    }

    #rebbifyRideApp .rebbify-mode-tab {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    #rebbifyRideApp .rebbify-mode-tab.is-active {
        background: var(--rb-solid, #fff) !important;
        color: var(--rb-brand, #7c4dff) !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .10) !important;
    }

    /* Dropdown abre por cima da segunda linha, mas sem valores extremos de z-index. */
    #rebbifyRideApp .rebbify-profile-menu-wrap .rebbify-profile-menu,
    #rebbifyRideApp .rebbify-profile-menu-wrap.is-open .rebbify-profile-menu {
        position: fixed !important;
        top: 56px !important;
        right: 10px !important;
        left: auto !important;
        width: min(310px, calc(100vw - 20px)) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 70px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        z-index: var(--ride-z-dropdown) !important;
    }

    #rebbifyRideApp .rebbify-ride-stage,
    #rebbifyRideApp.is-service-selection .rebbify-ride-stage {
        display: block !important;
        height: auto !important;
        min-height: calc(100vh - var(--ride-topbar-height)) !important;
        min-height: calc(100dvh - var(--ride-topbar-height)) !important;
        padding: 10px 10px calc(18px + env(safe-area-inset-bottom)) !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    #rebbifyRideApp .rebbify-booking-wrapper {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 12px !important;
        overflow: visible !important;
    }

    /* O formulário vem antes do mapa. Isso evita o usuário ter de rolar pelo mapa
       para conseguir informar a rota e mantém o fluxo de solicitação utilizável. */
    #rebbifyRideApp .rebbify-booking-panel {
        order: 1 !important;
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        transform: none !important;
    }

    #rebbifyRideApp .rebbify-map-panel {
        order: 2 !important;
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: clamp(260px, 36dvh, 360px) !important;
        min-height: 260px !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    #rebbifyRideApp .booking-wrapper__right #map,
    #rebbifyRideApp #map {
        width: 100% !important;
        height: 100% !important;
        min-height: 260px !important;
    }

    #rebbifyRideApp.is-service-selection .rebbify-map-panel {
        display: none !important;
    }

    #rebbifyRideApp.is-service-selection .ride_location_wrapper {
        display: none !important;
    }

    #rebbifyRideApp.is-service-selection .rebbify-service-results {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        overflow: visible !important;
    }

    #rebbifyRideApp.is-service-selection .rebbify-service-flow {
        width: 100% !important;
        min-width: 0 !important;
        padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    }

    #rebbifyRideApp.is-service-selection .rebbify-booking-actionbar {
        z-index: var(--ride-z-actionbar) !important;
    }

    #rebbifyRideApp .search-input-dropdown__wrapper,
    #rebbifyRideApp .search-input-dropdown__wrapper-two,
    #rebbifyRideApp .rebbify-location-dropdown {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 520px) {
    #rebbifyRideApp .rebbify-top-city-btn {
        display: none !important;
    }

    #rebbifyRideApp .rebbify-activity-link {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #rebbifyRideApp .rebbify-activity-link span {
        display: none !important;
    }

    #rebbifyRideApp .rebbify-profile-chip img {
        width: 36px !important;
        height: 36px !important;
    }

    #rebbifyRideApp .rebbify-guest-register-link {
        display: none !important;
    }
}

@media (max-width: 360px) {
    #rebbifyRideApp {
        --ride-topbar-height: 100px !important;
    }

    #rebbifyRideApp .rebbify-ride-topbar,
    #rebbifyRideApp.is-service-selection .rebbify-ride-topbar {
        grid-template-rows: 42px 38px !important;
        padding: 7px 8px !important;
        column-gap: 6px !important;
    }

    #rebbifyRideApp .rebbify-ride-brand,
    #rebbifyRideApp .rebbify-ride-brand img {
        width: 70px !important;
    }

    #rebbifyRideApp .rebbify-ride-modes {
        height: 38px !important;
    }

    #rebbifyRideApp .rebbify-mode-tab {
        height: 32px !important;
        min-height: 32px !important;
        padding-inline: 6px !important;
        font-size: 12px !important;
    }
}

/* ========================================================================
   2026-09-25 — CONTRATO DO AGENDAMENTO NO PAINEL ESQUERDO (REGRESSAO #AGD-01)
   ------------------------------------------------------------------------
   Objetivo obrigatório:
   - Ao abrir "Agendar corrida", o painel de origem/destino é SUBSTITUÍDO pela
     tela "Quando você quer partir?".
   - O CTA "Pesquisar" NÃO pode aparecer durante essa etapa.
   - O editor NÃO é modal, NÃO é popover e NÃO é inserido por cima do mapa.
   - Voltar/Apagar devolvem exatamente a visão anterior.

   IMPORTANTE PARA FUTURAS ALTERACOES ASSISTIDAS:
   NÃO remover estas regras para "corrigir" o card inicial. O card inicial e o
   editor de agendamento são dois estados visuais do MESMO painel lateral.
   ======================================================================== */

/* Estado de edição: esconda de forma inequívoca tudo que pertence ao card de busca. */
#rebbifyRideApp.is-schedule-editing .rebbify-request-card.is-schedule-editing .rebbify-request-card__title,
#rebbifyRideApp.is-schedule-editing .rebbify-request-card.is-schedule-editing .rebbify-reference-field-group,
#rebbifyRideApp.is-schedule-editing .rebbify-request-card.is-schedule-editing #rideStopsContainer,
#rebbifyRideApp.is-schedule-editing .rebbify-request-card.is-schedule-editing .rebbify-search-actions,
#rebbifyRideApp.is-schedule-editing .rebbify-request-card.is-schedule-editing #rideSearchBtn {
    display: none !important;
}

/* O bloco que contém o agendamento passa a ser o único conteúdo útil do painel. */
#rebbifyRideApp.is-schedule-editing .rebbify-request-card.is-schedule-editing .rebbify-reference-options-row {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#rebbifyRideApp.is-schedule-editing .rebbify-request-card.is-schedule-editing #rideRequestTime {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

#rebbifyRideApp.is-schedule-editing .rebbify-request-card.is-schedule-editing #rideTimeSummaryButton {
    display: none !important;
}

/* Mantém o MESMO card lateral da referência, em vez de desmontá-lo. */
#rebbifyRideApp .rebbify-request-card.rebbify-home-request-clone.is-schedule-editing {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px !important;
    border: 1px solid var(--rb-border, #e7e7ea) !important;
    border-radius: 14px !important;
    background: var(--rb-request-card-bg, var(--rb-surface, #fff)) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03) !important;
    overflow: visible !important;
}

#rebbifyRideApp .rebbify-request-card.is-schedule-editing .rebbify-request-fields.is-schedule-editing {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Editor inline propriamente dito. */
#rebbifyRideApp.is-schedule-editing #rideScheduleEditor.rebbify-schedule-editor,
#rebbifyRideApp.is-schedule-editing #rideScheduleEditor.rebbify-schedule-editor[aria-hidden="false"],
#rebbifyRideApp.is-schedule-editing #rideScheduleEditor.rebbify-schedule-editor.is-modal-open {
    display: block !important;
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-schedule-editor__topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: transparent !important;
}

#rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-schedule-back {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--rb-brand-soft, #f1ecff) !important;
    color: var(--rb-brand, #7c4dff) !important;
    box-shadow: none !important;
}

#rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-schedule-clear {
    margin: 0 !important;
    padding: 4px 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--rb-text, #111111) !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

#rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-schedule-editor__title {
    margin: 0 0 14px !important;
    color: var(--rb-text, #111111) !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
}

/* Data e horário: linha compacta igual à referência; o input nativo continua
   cobrindo a linha, invisível, para manter o seletor do navegador/iOS. */
#rebbifyRideApp.is-schedule-editing #rideScheduleEditor .ride-schedule-fields {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
}

#rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-schedule-picker {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) 16px !important;
    align-items: center !important;
    column-gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--rb-soft, #f3f3f4) !important;
    color: var(--rb-text, #111111) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    overflow: hidden !important;
}

#rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-schedule-picker__icon,
#rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-schedule-picker__chevron {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    color: var(--rb-brand, #7c4dff) !important;
    pointer-events: none !important;
}

#rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-schedule-picker__chevron {
    width: 16px !important;
    justify-self: end !important;
}

#rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-schedule-picker__text {
    display: block !important;
    min-width: 0 !important;
    color: var(--rb-text, #111111) !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: none !important;
}

#rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-schedule-picker input[type="date"],
#rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-schedule-picker input[type="time"] {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: transparent !important;
    opacity: 0 !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

#rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-reserve-info {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
}

#rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-reserve-info__item {
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rb-border, #ececef) !important;
    color: var(--rb-text, #222222) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
}

#rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-reserve-info__item:last-child {
    border-bottom: 0 !important;
}

#rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-reserve-info__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--rb-brand, #7c4dff) !important;
}

#rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-reserve-terms-link {
    display: inline-block !important;
    width: auto !important;
    margin: 6px 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--rb-brand, #7c4dff) !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    text-align: left !important;
    text-decoration: underline !important;
}

#rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-schedule-advance {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 24px) !important;
    min-height: 38px !important;
    margin: 0 12px 10px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: var(--rb-brand, #7c4dff) !important;
    color: var(--rb-on-accent, #ffffff) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

#rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-schedule-advance:hover,
#rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-schedule-advance:active {
    background: var(--rb-brand-hover, #6840e8) !important;
    color: var(--rb-on-accent, #ffffff) !important;
}

/* REGRESSAO #AGD-02 — identidade visual do agendamento.
   O layout segue a referência fornecida pelo usuário, mas a ação principal e os
   ícones do agendamento usam o roxo oficial da Rebbify em claro e escuro. Não
   voltar o botão Avançar/ícones para preto ao ajustar o layout. */
/* Tema escuro: mantém o mesmo desenho, trocando apenas superfícies/contraste. */
html[data-theme="dark"] #rebbifyRideApp .rebbify-request-card.rebbify-home-request-clone.is-schedule-editing {
    border-color: var(--rb-border, #303038) !important;
    background: var(--rb-surface, #1c1c22) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] #rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-schedule-picker {
    background: var(--rb-soft, #27272f) !important;
}

html[data-theme="dark"] #rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-schedule-back {
    background: var(--rb-brand-soft, rgba(124, 77, 255, .16)) !important;
    color: var(--rb-brand, #7c4dff) !important;
}

html[data-theme="dark"] #rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-schedule-advance {
    background: var(--rb-brand, #7c4dff) !important;
    color: #ffffff !important;
}

@media (max-width: 767px) {
    #rebbifyRideApp .rebbify-request-card.rebbify-home-request-clone.is-schedule-editing {
        padding: 14px !important;
        border-radius: 14px !important;
    }

    #rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-schedule-editor__title {
        font-size: 20px !important;
    }

    #rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-schedule-picker {
        min-height: 48px !important;
    }

    #rebbifyRideApp.is-schedule-editing #rideScheduleEditor .rebbify-schedule-advance {
        min-height: 44px !important;
        font-size: 13px !important;
    }
}

/* ========================================================================
   REGRESSAO #RIDE-INFO-01 — dados da corrida não podem ficar espremidos
   ------------------------------------------------------------------------
   Quando já existe uma corrida, o painel esquerdo deixa de ser o formulário
   compacto de busca. Ele passa a exibir rota, status, distância, duração,
   valor, motorista e ações. No desktop esse conteúdo precisa de uma coluna
   própria mais larga; manter 300px comprime os dados no canto.

   IMPORTANTE: esta regra vale SOMENTE para data-has-running-ride="1".
   Não aumentar o card inicial "Peça uma viagem" por causa deste ajuste.
   ======================================================================== */
#rebbifyRideApp[data-has-running-ride="1"] :is(
    .ride_location_wrapper,
    .ride_detail_wrapper,
    .active_ride_wrapper,
    .running_ride_wrapper,
    .ride_end_wrapper
) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

#rebbifyRideApp[data-has-running-ride="1"] :is(
    .ride_location_wrapper,
    .ride_detail_wrapper,
    .active_ride_wrapper,
    .running_ride_wrapper,
    .ride_end_wrapper
) > .common-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

#rebbifyRideApp[data-has-running-ride="1"] .ride-booking__calculation-container {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

#rebbifyRideApp[data-has-running-ride="1"] .ride-booking__calculation-item,
#rebbifyRideApp[data-has-running-ride="1"] .ride-booking__value,
#rebbifyRideApp[data-has-running-ride="1"] .ride-booking__label,
#rebbifyRideApp[data-has-running-ride="1"] .driver-details,
#rebbifyRideApp[data-has-running-ride="1"] .ride-confirmation__driver-info {
    min-width: 0 !important;
}

#rebbifyRideApp[data-has-running-ride="1"] .ride-booking__value,
#rebbifyRideApp[data-has-running-ride="1"] .ride-booking__label,
#rebbifyRideApp[data-has-running-ride="1"] .driver-name,
#rebbifyRideApp[data-has-running-ride="1"] .car-model {
    overflow-wrap: anywhere !important;
}

#rebbifyRideApp[data-has-running-ride="1"] .ride-confirmation__header {
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

@media (min-width: 1200px) {
    /* O formulário inicial continua com sua largura original. Somente uma
       corrida existente ganha espaço para os dados não ficarem no canto. */
    #rebbifyRideApp[data-has-running-ride="1"] .rebbify-booking-wrapper {
        grid-template-columns: clamp(420px, 33vw, 500px) minmax(0, 1fr) !important;
        gap: 28px !important;
    }

    #rebbifyRideApp[data-has-running-ride="1"] .rebbify-booking-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding-right: 6px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #rebbifyRideApp[data-has-running-ride="1"] .ride-booking__calculation-container {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 0 !important;
    }

    #rebbifyRideApp[data-has-running-ride="1"] .ride-booking__calculation-item {
        width: 100% !important;
        max-width: none !important;
        padding: 10px 12px !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    #rebbifyRideApp[data-has-running-ride="1"] .rebbify-booking-wrapper {
        grid-template-columns: minmax(360px, .92fr) minmax(0, 1.08fr) !important;
    }

    #rebbifyRideApp[data-has-running-ride="1"] .rebbify-booking-panel {
        min-width: 0 !important;
        overflow-x: hidden !important;
    }
}

@media (max-width: 767px) {
    #rebbifyRideApp[data-has-running-ride="1"] .rebbify-booking-panel,
    #rebbifyRideApp[data-has-running-ride="1"] :is(
        .ride_location_wrapper,
        .ride_detail_wrapper,
        .active_ride_wrapper,
        .running_ride_wrapper,
        .ride_end_wrapper
    ) {
        width: 100% !important;
        max-width: none !important;
    }

    #rebbifyRideApp[data-has-running-ride="1"] :is(
        .ride_location_wrapper,
        .ride_detail_wrapper,
        .active_ride_wrapper,
        .running_ride_wrapper,
        .ride_end_wrapper
    ) > .common-card {
        margin-top: 12px !important;
    }
}


/* ========================================================================
   2026-09-26 — FORMULÁRIO DE SOLICITAÇÃO / PARADAS (#RIDE-FORM-02)
   URL canônica: /solicite-uma-viagem-pelo-app-da-rebbify (#RIDE-URL-01).
   O container de paradas vazio não cria espaço morto; ao receber paradas volta
   automaticamente a participar do fluxo. O relógio é outline roxo e o texto
   "Viajar agora" replica a tipografia dos inputs. Não criar novo hotfix fora
   deste contrato para estes pontos.
   ======================================================================== */
#rebbifyRideApp[data-has-running-ride="0"][data-active-service-type="ride"]:not(.is-service-selection) #rideStopsContainer:empty {
    display: none !important;
}
#rebbifyRideApp[data-has-running-ride="0"][data-active-service-type="ride"]:not(.is-service-selection) #rideStopsContainer:not(:empty) {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    /* #RIDE-STOPS-04: NÃO usar overflow/max-height aqui. O dropdown de
       sugestões é filho de cada parada (position:absolute) e seria cortado. */
    position: relative !important;
    overflow: visible !important;
    max-height: none !important;
}
#rebbifyRideApp[data-has-running-ride="0"][data-active-service-type="ride"]:not(.is-service-selection) .rebbify-request-fields {
    gap: 10px !important;
}
#rebbifyRideApp[data-has-running-ride="0"][data-active-service-type="ride"]:not(.is-service-selection) .ride-stop-row {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    display: grid !important;
    grid-template-columns: 28px 24px minmax(0, 1fr) 32px !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 7px 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background-color: #f5f5f5 !important;
    box-shadow: none !important;
    position: relative !important;
    cursor: default !important;
}
#rebbifyRideApp[data-has-running-ride="0"][data-active-service-type="ride"]:not(.is-service-selection) .ride-stop-row.is-search-open {
    z-index: 80 !important;
}
#rebbifyRideApp[data-has-running-ride="0"][data-active-service-type="ride"]:not(.is-service-selection) .ride-stop-row.is-reordering {
    opacity: 1 !important;
    z-index: 90 !important;
    background-color: #ece6ff !important;
    outline: 2px solid #7c4dff !important;
    cursor: grabbing !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.14) !important;
}
#rebbifyRideApp[data-has-running-ride="0"][data-active-service-type="ride"]:not(.is-service-selection) .ride-stop-index {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    background: #7c4dff !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}
#rebbifyRideApp[data-has-running-ride="0"][data-active-service-type="ride"]:not(.is-service-selection) .ride-stop-drag { cursor: grab !important; }
#rebbifyRideApp[data-has-running-ride="0"][data-active-service-type="ride"]:not(.is-service-selection) .ride-stop-row.is-reordering .ride-stop-drag,
body.ride-stop-reordering #rebbifyRideApp .ride-stop-drag { cursor: grabbing !important; }
#rebbifyRideApp[data-has-running-ride="0"][data-active-service-type="ride"]:not(.is-service-selection) .ride-add-stop-circle {
    background: rgba(124, 77, 255, .10) !important;
    color: var(--rebbify-purple, #7c4dff) !important;
}
#rebbifyRideApp[data-has-running-ride="0"][data-active-service-type="ride"]:not(.is-service-selection) .ride-add-stop-circle svg {
    color: var(--rebbify-purple, #7c4dff) !important;
}
#rebbifyRideApp[data-has-running-ride="0"][data-active-service-type="ride"]:not(.is-service-selection) #rideTimeSummaryButton .rebbify-time-summary__icon {
    color: var(--rebbify-purple, #7c4dff) !important;
    background: transparent !important;
}
#rebbifyRideApp[data-has-running-ride="0"][data-active-service-type="ride"]:not(.is-service-selection) #rideTimeSummaryButton .rebbify-time-summary__icon svg {
    fill: none !important;
    background: transparent !important;
}
#rebbifyRideApp[data-has-running-ride="0"][data-active-service-type="ride"]:not(.is-service-selection) #rideTimeSummaryButton .rebbify-time-summary__copy strong {
    color: var(--rb-request-ink, #17171b) !important;
    font-family: inherit !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
}
@media (max-width: 767px) {
    #rebbifyRideApp[data-has-running-ride="0"][data-active-service-type="ride"]:not(.is-service-selection) .ride-stop-row { padding-inline: 10px !important; }
}
html[data-theme="dark"] #rebbifyRideApp[data-has-running-ride="0"][data-active-service-type="ride"]:not(.is-service-selection) .ride-stop-row {
    background-color: #27272f !important;
}

/* ========================================================================
   #WAIT-VUE-05 — Espere e Economize: tela inteira em fluxo normal
   Sem overlay, sem mapa, sem inputs de rota durante dispatch_phase=waiting.
   Referência: duas colunas + rodapé horizontal de atalhos.
   ======================================================================== */
#rebbifyRideApp.has-wait-save-overlay {
    background: #fff !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-ride-topbar {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    background: #fff !important;
    border-bottom: 1px solid #e6e6e6 !important;
}

/* No estado waiting o header fica somente com os controles da referência. */
#rebbifyRideApp.has-wait-save-overlay .rebbify-top-city-btn {
    display: none !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-ride-stage {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: calc(100dvh - var(--ride-topbar-height, 54px)) !important;
    height: auto !important;
    padding: 26px 52px 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    background: #fff !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-booking-wrapper {
    display: grid !important;
    grid-template-columns: 330px minmax(0, 1fr) !important;
    grid-template-rows: minmax(456px, calc(100dvh - 164px)) !important;
    align-items: stretch !important;
    gap: 28px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-booking-panel {
    position: static !important;
    width: 330px !important;
    min-width: 330px !important;
    max-width: 330px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    background: transparent !important;
}

/* O estado de espera não exibe nenhum editor/autocomplete/paradas do pedido. */
#rebbifyRideApp.has-wait-save-overlay .rebbify-booking-panel > .ride_location_wrapper,
#rebbifyRideApp.has-wait-save-overlay .rebbify-booking-panel > .rebbify-service-flow,
#rebbifyRideApp.has-wait-save-overlay .rebbify-booking-panel > .active_ride_wrapper,
#rebbifyRideApp.has-wait-save-overlay .rebbify-booking-panel > .running_ride_wrapper,
#rebbifyRideApp.has-wait-save-overlay .rebbify-booking-panel > .ride_end_wrapper {
    display: none !important;
}

#rebbifyRideApp.has-wait-save-overlay .ride_detail_wrapper {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-map-panel {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 456px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    isolation: auto !important;
    background: #f3f3f3 !important;
}

/* O mapa sai completamente do fluxo: a tela de espera NÃO é uma cobertura. */
#rebbifyRideApp.has-wait-save-overlay .rebbify-map-panel > #map,
#rebbifyRideApp.has-wait-save-overlay .rebbify-map-route-summary,
#rebbifyRideApp.has-wait-save-overlay .ride-map-picker-center,
#rebbifyRideApp.has-wait-save-overlay .ride-map-picker-panel,
#rebbifyRideApp.has-wait-save-overlay #rideMobileEditRouteBtn,
#rebbifyRideApp.has-wait-save-overlay #rideSafetyFloatingButton,
#rebbifyRideApp.has-wait-save-overlay #rideChatFloatingButton {
    display: none !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-save-map {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 456px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f3f3f3 !important;
    color: #111 !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-save-map__shell {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-save-map__content {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 456px !important;
    padding: 52px 26px 42px 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f3f3f3 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-sizing: border-box !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-state {
    display: none !important;
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-state.is-active {
    display: block !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-state[hidden] {
    display: none !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-save-map__title {
    margin: 0 !important;
    max-width: 920px !important;
    color: #050505 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(27px, 2.15vw, 36px) !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    letter-spacing: -.025em !important;
}

/* #WAIT-LIVE-05 — o tempo ("1-10 min") e o relógio usam SEMPRE o roxo da marca.
   tabular-nums evita o texto "pular" de largura a cada segundo. */
#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-save-map__time {
    color: var(--rb-brand, #7C4DFF) !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-save-map__lead {
    margin: 8px 0 0 !important;
    color: #111 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-save-map__note {
    margin: 21px 0 0 !important;
    color: #626262 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-save-map__clock {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    margin: 14px 0 0 !important;
    color: var(--rb-brand, #7C4DFF) !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-save-map__clock-value {
    color: inherit !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
    font-variant-numeric: tabular-nums !important;
}

html[data-theme="dark"] #rebbifyRideApp.has-wait-save-overlay :is(.rebbify-wait-save-map__time, .rebbify-wait-save-map__clock, .rebbify-wait-save-map__clock-value) {
    color: #a78bff !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-loader {
    width: 32px !important;
    height: 32px !important;
    display: inline-block !important;
    margin: 0 0 18px !important;
    border: 3px solid rgba(111,73,255,.18) !important;
    border-top-color: var(--rebbify-purple, #6f49ff) !important;
    border-radius: 50% !important;
    animation: rebbify-wait-spin .8s linear infinite !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-found-icon {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 18px !important;
    border-radius: 50% !important;
    background: var(--rebbify-purple, #6f49ff) !important;
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 900 !important;
}

@keyframes rebbify-wait-spin { to { transform: rotate(360deg); } }

/* Card lateral — somente leitura, com dados reais da ride. */
#rebbifyRideApp.has-wait-save-overlay .rideDetailDiv[data-wait-save="1"] {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-card {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 15px 14px 13px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-card__title {
    margin: 0 0 27px !important;
    color: #111 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-route {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: repeating-linear-gradient(to bottom, #111 0 4px, transparent 4px 8px) 8px 13px / 1px calc(100% - 26px) no-repeat !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-route__line {
    display: none !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-route__point {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 13px !important;
    min-width: 0 !important;
    margin: 0 !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-route__marker {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 3px !important;
    background: #fff !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-route__marker--circle {
    width: 12px !important;
    height: 12px !important;
    margin-left: 2px !important;
    border: 4px solid #111 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-route__marker--square {
    width: 8px !important;
    height: 8px !important;
    margin-left: 4px !important;
    border: 2px solid #111 !important;
    box-sizing: border-box !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-route__marker--stop {
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0 !important;
    border-radius: 3px !important;
    background: #111 !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-route__point strong {
    display: block !important;
    margin: 0 !important;
    color: #111 !important;
    font-size: 14px !important;
    line-height: 1.42 !important;
    font-weight: 600 !important;
    overflow-wrap: anywhere !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-route__point small,
#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-meta small {
    display: block !important;
    margin-top: 2px !important;
    color: #696969 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    overflow-wrap: anywhere !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-destination-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-destination-row > strong {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-change {
    flex: 0 0 auto !important;
    min-height: 29px !important;
    padding: 5px 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #f2f2f2 !important;
    color: #111 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-meta {
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 27px !important;
    padding-top: 0 !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-meta__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    min-width: 22px !important;
    color: #111 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-meta strong {
    display: block !important;
    color: #111 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-cancel {
    width: 100% !important;
    min-height: 39px !important;
    margin-top: 23px !important;
    padding: 8px 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #f1f1f1 !important;
    color: #d00024 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

/* Rodapé abaixo DAS DUAS colunas, com scroll horizontal. */
#rebbifyWaitActions {
    display: none;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-actions--full {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    gap: 10px !important;
    margin: 12px 0 0 !important;
    padding: 8px 8px 13px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-top: 1px solid #e4e4e4 !important;
    background: #fff !important;
    scrollbar-width: thin !important;
    box-sizing: border-box !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-action-card {
    min-width: 230px !important;
    flex: 0 0 230px !important;
    min-height: 70px !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 16px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    border: 1px solid #e7e7e7 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #111 !important;
    text-align: left !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-action-card__icon {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9px !important;
    background: #f2f2f2 !important;
    color: #111 !important;
    font-size: 19px !important;
    font-weight: 700 !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-action-card strong,
#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-action-card small {
    display: block !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-action-card strong {
    color: #111 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
}

#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-action-card small {
    margin-top: 3px !important;
    color: #666 !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
}

@media (min-width: 768px) and (max-width: 1199px) {
    #rebbifyRideApp.has-wait-save-overlay .rebbify-ride-stage {
        padding-inline: 28px !important;
    }
    #rebbifyRideApp.has-wait-save-overlay .rebbify-booking-wrapper {
        grid-template-columns: 320px minmax(0, 1fr) !important;
        gap: 20px !important;
    }
    #rebbifyRideApp.has-wait-save-overlay .rebbify-booking-panel {
        width: 320px !important;
        min-width: 320px !important;
        max-width: 320px !important;
    }
    #rebbifyRideApp.has-wait-save-overlay .rebbify-wait-save-map__content {
        padding: 46px 24px !important;
    }
}

@media (max-width: 767px) {
    #rebbifyRideApp.has-wait-save-overlay .rebbify-ride-stage {
        padding: 12px 10px calc(16px + env(safe-area-inset-bottom)) !important;
    }
    #rebbifyRideApp.has-wait-save-overlay .rebbify-booking-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        min-height: 0 !important;
    }
    #rebbifyRideApp.has-wait-save-overlay .rebbify-booking-panel,
    #rebbifyRideApp.has-wait-save-overlay .rebbify-map-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    #rebbifyRideApp.has-wait-save-overlay .rebbify-map-panel,
    #rebbifyRideApp.has-wait-save-overlay .rebbify-wait-save-map,
    #rebbifyRideApp.has-wait-save-overlay .rebbify-wait-save-map__content {
        min-height: 330px !important;
    }
    #rebbifyRideApp.has-wait-save-overlay .rebbify-wait-save-map__content {
        padding: 28px 20px !important;
    }
    #rebbifyRideApp.has-wait-save-overlay .rebbify-wait-save-map__title {
        font-size: 27px !important;
    }
    #rebbifyRideApp.has-wait-save-overlay .rebbify-wait-actions--full {
        margin-top: 10px !important;
    }
    #rebbifyRideApp.has-wait-save-overlay .rebbify-wait-action-card {
        min-width: 220px !important;
        flex-basis: 220px !important;
    }
}

/* Elementos do WAIT-VUE permanecem realmente ocultos fora do estado waiting. */
#rebbifyWaitDriverVueRoot[hidden],
#rebbifyWaitActions[hidden],
#rebbifyWaitShareButton[hidden],
#rebbifyRideApp.has-wait-save-overlay .rebbify-wait-state[hidden] {
    display: none !important;
}

/* Tema escuro real para Espere e Economize — usa os mesmos tokens do passageiro. */
html[data-theme="dark"] #rebbifyRideApp.has-wait-save-overlay,
html[data-theme="dark"] #rebbifyRideApp.has-wait-save-overlay .rebbify-ride-topbar,
html[data-theme="dark"] #rebbifyRideApp.has-wait-save-overlay .rebbify-ride-stage {
    background: var(--rb-bg, #101014) !important;
    color: var(--rb-text, #f5f5f8) !important;
    border-color: var(--rb-border, #32323b) !important;
}

html[data-theme="dark"] #rebbifyRideApp.has-wait-save-overlay .rebbify-map-panel,
html[data-theme="dark"] #rebbifyRideApp.has-wait-save-overlay .rebbify-wait-save-map,
html[data-theme="dark"] #rebbifyRideApp.has-wait-save-overlay .rebbify-wait-save-map__content {
    background: var(--rb-soft, #24242b) !important;
    color: var(--rb-text, #f5f5f8) !important;
}

html[data-theme="dark"] #rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-card,
html[data-theme="dark"] #rebbifyRideApp.has-wait-save-overlay .rebbify-wait-actions--full,
html[data-theme="dark"] #rebbifyRideApp.has-wait-save-overlay .rebbify-wait-action-card {
    background: var(--rb-solid, #18181d) !important;
    color: var(--rb-text, #f5f5f8) !important;
    border-color: var(--rb-border, #32323b) !important;
}

html[data-theme="dark"] #rebbifyRideApp.has-wait-save-overlay :is(
    .rebbify-wait-save-map__title,
    .rebbify-wait-save-map__lead,
    .rebbify-wait-trip-card__title,
    .rebbify-wait-trip-route__point strong,
    .rebbify-wait-trip-meta strong,
    .rebbify-wait-trip-meta__icon,
    .rebbify-wait-action-card strong,
    .rebbify-wait-action-card__icon,
    .rebbify-wait-trip-change
) {
    color: var(--rb-text, #f5f5f8) !important;
}

html[data-theme="dark"] #rebbifyRideApp.has-wait-save-overlay :is(
    .rebbify-wait-save-map__note,
    .rebbify-wait-trip-route__point small,
    .rebbify-wait-trip-meta small,
    .rebbify-wait-action-card small
) {
    color: var(--rb-muted, #c2c2cc) !important;
}

html[data-theme="dark"] #rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-change,
html[data-theme="dark"] #rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-cancel,
html[data-theme="dark"] #rebbifyRideApp.has-wait-save-overlay .rebbify-wait-action-card__icon {
    background: var(--rb-soft, #24242b) !important;
    border-color: var(--rb-border, #32323b) !important;
}

html[data-theme="dark"] #rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-route__marker--circle,
html[data-theme="dark"] #rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-route__marker--square {
    border-color: var(--rb-text, #f5f5f8) !important;
}

html[data-theme="dark"] #rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-route {
    background: repeating-linear-gradient(to bottom, var(--rb-text, #f5f5f8) 0 4px, transparent 4px 8px) 8px 13px / 1px calc(100% - 26px) no-repeat !important;
}

html[data-theme="dark"] #rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-route__marker {
    background: var(--rb-solid, #18181d) !important;
}

html[data-theme="dark"] #rebbifyRideApp.has-wait-save-overlay .rebbify-wait-trip-route__marker--stop {
    background: var(--rb-brand, #7c4dff) !important;
    color: #fff !important;
}

html[data-theme="dark"] #rebbifyRideApp.has-wait-save-overlay .rebbify-wait-actions--full {
    border-top-color: var(--rb-border, #32323b) !important;
}

/* #WAIT-VUE-06 — ação de compartilhar da tela de espera. */
#rebbifyRideApp .rebbify-ride-share-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--rb-text, #111) !important;
    cursor: pointer !important;
}
#rebbifyRideApp .rebbify-ride-share-btn:hover {
    background: var(--rb-soft, #f1f1f1) !important;
}


/* ========================================================================
   2026-09-28 — MULTI PARADAS (#RIDE-STOPS-04)
   - container sem overflow: sugestões não podem ser cortadas;
   - dropdown da parada igual ao de partida/destino (até 10 opções);
   - arraste só pelo puxador (Pointer Events), sem HTML5 drag na linha.
   ======================================================================== */
#rebbifyRideApp .ride-stop-row .ride-stop-input-wrap { min-width: 0 !important; }
#rebbifyRideApp .ride-stop-row .ride-stop-input {
    width: 100% !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}
#rebbifyRideApp .ride-stop-row .ride-stop-suggestions {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(420px, 55vh) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    z-index: 120 !important;
    box-sizing: border-box !important;
}
#rebbifyRideApp .ride-stop-row .ride-stop-suggestions:empty { display: none !important; }
#rebbifyRideApp .ride-stop-drag { touch-action: none !important; cursor: grab !important; }
body.ride-stop-reordering, body.ride-stop-reordering * { cursor: grabbing !important; user-select: none !important; }

/* ==========================================================================
   #ROUTE-DROPDOWN-01 — 2026-09-28
   Sugestões de partida/destino, coluna do formulário e "Viajar agora".
   Escopo: /solicite-uma-viagem-pelo-app-da-rebbify, estado inicial (sem corrida
   em andamento e fora da seleção de serviços). Não altera JS, busca, API ou rota.

   1) "Viajar agora" ficava POR CIMA da lista de sugestões.
      Causa: .rebbify-booking-time (z-index 40) e .rebbify-request-time (z-index 60)
      disputavam a mesma camada dos campos (origem 40 / destino 30) e venciam.
      Correção: o grupo origem/destino vira uma camada própria acima da linha de
      opções; a linha "Viajar agora" e o botão Pesquisar ficam abaixo (z-index 1).
      Não subir esses valores de volta: o dropdown só precisa vencer os irmãos.
   2) Coluna do formulário mais larga (o mapa começa mais à direita) e o card sem
      o teto de 350px do process-step.css.
   3) Itens das sugestões mais compactos e legíveis: ícone roxo preservado, nome
      completo (até 2 linhas) e endereço (até 2 linhas) em vez de "Rodoviária de B…".
   ========================================================================== */

/* 1) Empilhamento: sugestões sempre acima de "Viajar agora" e de Pesquisar. */
#rebbifyRideApp[data-has-running-ride="0"]:not(.is-service-selection) .rebbify-request-fields {
    position: relative !important;
}

#rebbifyRideApp[data-has-running-ride="0"]:not(.is-service-selection) .rebbify-reference-field-group {
    position: relative !important;
    z-index: 70 !important;
}

#rebbifyRideApp[data-has-running-ride="0"]:not(.is-service-selection) #rideStopsContainer {
    position: relative !important;
    z-index: 60 !important;
}

#rebbifyRideApp[data-has-running-ride="0"]:not(.is-service-selection):not(.is-schedule-editing) .rebbify-reference-options-row,
#rebbifyRideApp[data-has-running-ride="0"]:not(.is-service-selection):not(.is-schedule-editing) .rebbify-request-time,
#rebbifyRideApp[data-has-running-ride="0"]:not(.is-service-selection):not(.is-schedule-editing) .rebbify-booking-time,
#rebbifyRideApp[data-has-running-ride="0"]:not(.is-service-selection):not(.is-schedule-editing) .rebbify-search-actions {
    position: relative !important;
    z-index: 1 !important;
}

/* 2) Formulário mais largo em desktop; mapa encurtado na mesma medida. */
@media (min-width: 1200px) {
    #rebbifyRideApp[data-has-running-ride="0"]:not(.is-service-selection):not(.has-wait-save-overlay) .rebbify-booking-wrapper {
        grid-template-columns: clamp(340px, 24.5vw, 420px) minmax(0, 1fr) !important;
    }

    #rebbifyRideApp[data-has-running-ride="0"]:not(.is-service-selection):not(.has-wait-save-overlay) :is(.rebbify-request-card, .booking-location-box) {
        width: 100% !important;
        max-width: none !important;
    }
}

/* 3) Lista de sugestões (partida e destino). */
#rebbifyRideApp #pickup_suggestions.rebbify-location-dropdown,
#rebbifyRideApp #destination_suggestions.rebbify-location-dropdown {
    max-height: min(460px, 66vh) !important;
    padding: 6px 0 !important;
}

#rebbifyRideApp #pickup_suggestions.rebbify-location-dropdown .search-input-dropdown__item,
#rebbifyRideApp #destination_suggestions.rebbify-location-dropdown .search-input-dropdown__item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;
    padding: 9px 14px !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

/* Ícone: mesmo círculo lilás com pin roxo, só um pouco menor. */
#rebbifyRideApp #pickup_suggestions.rebbify-location-dropdown .search-input-dropdown__item > .location__icon,
#rebbifyRideApp #destination_suggestions.rebbify-location-dropdown .search-input-dropdown__item > .location__icon,
#rebbifyRideApp #pickup_suggestions.rebbify-location-dropdown .search-input-dropdown__item > .menu-icon,
#rebbifyRideApp #destination_suggestions.rebbify-location-dropdown .search-input-dropdown__item > .menu-icon {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex: 0 0 40px !important;
}

#rebbifyRideApp #pickup_suggestions.rebbify-location-dropdown .search-input-dropdown__item > .location__icon > img,
#rebbifyRideApp #destination_suggestions.rebbify-location-dropdown .search-input-dropdown__item > .location__icon > img,
#rebbifyRideApp #pickup_suggestions.rebbify-location-dropdown .search-input-dropdown__item > .menu-icon > img,
#rebbifyRideApp #destination_suggestions.rebbify-location-dropdown .search-input-dropdown__item > .menu-icon > img,
#rebbifyRideApp #pickup_suggestions.rebbify-location-dropdown .search-input-dropdown__item > .menu-icon > svg,
#rebbifyRideApp #destination_suggestions.rebbify-location-dropdown .search-input-dropdown__item > .menu-icon > svg {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
}

#rebbifyRideApp #pickup_suggestions.rebbify-location-dropdown .search-input-dropdown__item .menu-icon,
#rebbifyRideApp #destination_suggestions.rebbify-location-dropdown .search-input-dropdown__item .menu-icon > svg {
    color: var(--rb-brand, #6c3cff) !important;
}

/* Texto: quebra em vez de cortar. Os spans têm nowrap inline, por isso !important. */
#rebbifyRideApp #pickup_suggestions.rebbify-location-dropdown .location-result-copy,
#rebbifyRideApp #destination_suggestions.rebbify-location-dropdown .location-result-copy {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    gap: 2px !important;
}

#rebbifyRideApp #pickup_suggestions.rebbify-location-dropdown .location-name,
#rebbifyRideApp #destination_suggestions.rebbify-location-dropdown .location-name,
#rebbifyRideApp #pickup_suggestions.rebbify-location-dropdown .location-subtitle,
#rebbifyRideApp #destination_suggestions.rebbify-location-dropdown .location-subtitle {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    text-overflow: ellipsis !important;
}

#rebbifyRideApp #pickup_suggestions.rebbify-location-dropdown .location-name,
#rebbifyRideApp #destination_suggestions.rebbify-location-dropdown .location-name {
    font-size: 14px !important;
    line-height: 1.25 !important;
}

#rebbifyRideApp #pickup_suggestions.rebbify-location-dropdown .location-subtitle,
#rebbifyRideApp #destination_suggestions.rebbify-location-dropdown .location-subtitle {
    font-size: 12px !important;
    line-height: 1.3 !important;
}

#rebbifyRideApp #pickup_suggestions.rebbify-location-dropdown .location-distance,
#rebbifyRideApp #destination_suggestions.rebbify-location-dropdown .location-distance {
    flex: 0 0 auto !important;
    margin-left: 4px !important;
    font-size: 11px !important;
}

/* Mobile results only, 2026-10-26. Desktop and the initial route form are untouched.
 * The existing .is-service-selection state is the only trigger; no new body class.
 * !important is limited to overriding legacy !important declarations in the three
 * older ride stylesheets (including display:none on the map and fixed CTA geometry).
 * The existing topbar is preserved; map/sheet start below --ride-topbar-height.
 */
@media (max-width: 991.98px) {
    /* Trava a rolagem da pagina somente durante os resultados, mantendo o scroll na lista. */
    body:has(#rebbifyRideApp.is-service-selection:not(.is-schedule-editing)) {
        overflow: hidden;
        overscroll-behavior: none;
    }

    /* Define alturas compartilhadas do mapa e da barra, com fallback vh e safe area. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) {
        --ride-results-map-height: 30vh;
        --ride-results-map-height: 30dvh;
        --ride-results-actionbar-height: calc(140px + env(safe-area-inset-bottom, 0px));
    }

    /* Mantem o formulario inicial fora da etapa de resultados sem modificar seu estado ou markup. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .ride_location_wrapper {
        display: none !important;
    }

    /* Neutraliza a grade legada somente na selecao mobile. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-booking-panel {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }

    /* Fixa o Mapbox no topo da area de resultados abaixo do cabecalho preservado. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-map-panel {
        position: fixed !important;
        display: block !important;
        inset: auto !important;
        top: var(--ride-topbar-height, 64px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: var(--ride-results-map-height) !important;
        min-height: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        z-index: var(--ride-z-map) !important;
    }

    /* Permite que o canvas encolha para a altura de 30dvh. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) #map {
        height: 100% !important;
        min-height: 0 !important;
        width: 100% !important;
        border-radius: 0 !important;
    }

    /* Exibe a unica seta de voltar sobre o mapa. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) #rideMobileEditRouteBtn {
        position: absolute !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        top: calc(12px + env(safe-area-inset-top, 0px)) !important;
        left: 12px !important;
        width: 56px !important;
        height: 56px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: #fff !important;
        color: #171717 !important;
        box-shadow: 0 2px 10px #0002 !important;
        z-index: var(--ride-z-floating) !important;
    }

    /* Esconde a seta duplicada do titulo no mobile. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) #rideEditRouteBtn {
        display: none !important;
    }

    /* Posiciona o resumo existente entre a seta e os controles sem inventar dados de chegada. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) #rideRouteSummary:not([hidden]) {
        position: absolute !important;
        display: flex;
        align-items: center;
        top: calc(12px + env(safe-area-inset-top, 0px)) !important;
        bottom: auto !important;
        left: 80px !important;
        right: 64px !important;
        width: auto !important;
        max-width: none !important;
        min-height: 56px;
        max-height: 72px;
        padding: 8px 10px !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: #fff !important;
        color: #202027 !important;
        box-shadow: 0 2px 10px #0002 !important;
        font-size: 12px !important;
        line-height: 1.3;
        overflow: hidden;
        overflow-wrap: anywhere;
    }

    /* Reserva uma coluna a direita para os controles do Mapbox. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .mapboxgl-ctrl-bottom-right {
        top: calc(12px + env(safe-area-inset-top, 0px)) !important;
        bottom: auto !important;
        right: 12px !important;
    }

    /* Retira margens legadas que deslocavam os controles do mapa. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl {
        margin: 0 0 6px !important;
    }

    /* Mantem zoom compacto e tocavel no mapa menor. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .mapboxgl-ctrl-group button {
        width: 36px;
        height: 36px;
    }

    /* Monta a sheet com sobreposicao de 16px sobre o mapa. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-flow {
        position: fixed !important;
        top: calc(var(--ride-topbar-height, 64px) + var(--ride-results-map-height) - 16px) !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        border-radius: 16px 16px 0 0;
        background: #fff;
        box-shadow: 0 -4px 16px #00000014;
        z-index: var(--ride-z-floating);
    }

    /* Divide a sheet em cabecalho fixo e lista flexivel. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) #rebbifyServiceResults {
        display: flex !important;
        flex-direction: column;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: inherit;
        background: #fff;
    }

    /* Mantem titulo e horario visiveis durante a rolagem da lista. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-results__header {
        position: sticky !important;
        top: 0 !important;
        flex: 0 0 auto;
        width: 100%;
        padding: 18px 0 10px !important;
        background: #fff !important;
        border-radius: 16px 16px 0 0;
        z-index: var(--ride-z-map-control);
    }

    /* Desenha a alca da sheet sem alterar o Blade. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-results__header::before {
        content: "";
        position: absolute;
        width: 40px;
        height: 4px;
        top: 7px;
        left: calc(50% - 20px);
        border-radius: 4px;
        background: #d1d1d1;
    }

    /* Centraliza o titulo e desenha sua divisoria. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-title-row {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 0 12px 10px !important;
        margin: 0 !important;
        border-bottom: 1px solid #e8e8e8;
    }

    /* Aplica o tamanho e peso do titulo da referencia. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) #rideServiceScreenTitle {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 1.4;
        text-align: center;
        color: #171717 !important;
    }

    /* Exibe somente os controles ja existentes, sem criar Para mim. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-mobile-options {
        display: flex !important;
        align-items: center;
        gap: 8px;
        padding: 10px 16px 0 !important;
        margin: 0 !important;
    }

    /* Transforma o horario existente em uma pilula cinza. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) #rideServiceMobileTimeBtn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 36px;
        padding: 8px 12px !important;
        border: 0 !important;
        border-radius: 24px !important;
        background: #f3f3f3 !important;
        color: #202027 !important;
        font-size: 12px !important;
    }

    /* Faz somente a lista rolar e deixa folga para o ultimo servico acima da barra. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .serviceDiv {
        flex: 1 1 0;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
        padding: 2px 12px calc(var(--ride-results-actionbar-height) + 16px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scroll-padding-bottom: calc(var(--ride-results-actionbar-height) + 16px);
        box-sizing: border-box;
    }

    /* Retira espacos extras de categorias dentro da sheet. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-group {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Mantem os grupos reais do catalogo discretos. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-group__title {
        margin: 6px 4px !important;
        font-size: 12px !important;
        color: #62626f !important;
    }

    /* Reduz a distancia entre servicos sem mudar sua ordem. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-group__list {
        gap: 6px !important;
    }

    /* Prepara a borda de selecao sem deslocar o conteudo ao selecionar. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-item {
        margin: 0 0 6px !important;
        padding: 0 !important;
        border: 2px solid transparent !important;
        border-radius: 12px !important;
        background: #fff !important;
    }

    /* Destaca o radio selecionado com a cor da plataforma. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-item.is-selected,
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-item:has(input:checked) {
        border-color: var(--rb-brand, #6F3BF5) !important;
        background: var(--rb-brand-soft, #f3edff) !important;
    }

    /* Alinha carro, nome e preco usando a mesma grade. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-label {
        display: grid !important;
        grid-template-columns: 80px minmax(0, 1fr) max-content !important;
        grid-template-rows: auto auto auto !important;
        align-items: start !important;
        gap: 3px 8px !important;
        padding: 10px 6px !important;
        min-height: 100px !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Reserva 80px para a imagem do veiculo. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-image {
        grid-column: 1 !important;
        grid-row: 1 / 4 !important;
        align-self: center;
        width: 80px !important;
        height: 64px !important;
    }

    /* Permite que meta e descricao usem o espaco abaixo do preco sem mover elementos. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-copy {
        display: contents !important;
    }

    /* Mantem nome e capacidade na primeira linha. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-name-row {
        grid-column: 2;
        grid-row: 1;
        gap: 3px 4px !important;
        min-width: 0;
    }

    /* Preserva nomes longos sem rolagem horizontal. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-name {
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        color: #202027 !important;
        overflow-wrap: anywhere;
    }

    /* Mantem capacidade e icone existentes com menor destaque. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-capacity {
        font-size: 11px !important;
        color: #62626f !important;
    }

    /* Coloca o tempo ou a estimativa existente na segunda linha. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-meta {
        grid-column: 2 / 4;
        grid-row: 2;
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        color: #62626f !important;
    }

    /* Coloca a descricao real em cinza na terceira linha. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-description {
        grid-column: 2 / 4;
        grid-row: 3;
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        color: #62626f !important;
    }

    /* Alinha o preco a direita na linha do nome. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-price {
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        align-self: start;
        align-items: flex-end !important;
        min-width: 0 !important;
        text-align: right !important;
    }

    /* Mantem os valores em cinza escuro e legiveis. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-price strong {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #202027 !important;
    }

    /* Evita que descontos desloquem o valor para baixo. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-price__current {
        justify-content: flex-end !important;
        text-align: right !important;
        gap: 3px !important;
    }

    /* Oculta visualmente o texto legado somente no mobile, mantendo o texto direto e o risco de desconto identicos no desktop. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-price__current strong,
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-price__original {
        font-size: 0 !important;
        letter-spacing: 0 !important;
    }

    /* Exibe o valor brasileiro ou Reservar somente no mobile, vencendo hidden do Bootstrap. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-price__mobile[hidden] {
        display: inline !important;
        font-size: 14px !important;
    }

    /* Mantem o tamanho discreto do valor anterior no desconto mobile. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-price__original .rebbify-service-price__mobile {
        font-size: 11px !important;
    }

    /* Exibe Reservar com a cor da marca em qualquer servico marcado. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) [data-reserve-only="1"] .rebbify-service-price strong {
        color: var(--rb-brand, #6F3BF5) !important;
    }

    /* Evita precos riscados e selos de desconto junto de Reservar. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) [data-reserve-only="1"] .rebbify-service-price__original,
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) [data-reserve-only="1"] .rebbify-service-discount-icon {
        display: none !important;
    }

    /* Fixa pagamento e CTA em duas linhas; o ancestral display:none continua ocultando a barra. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .find_driver_wrapper .rebbify-booking-actionbar {
        position: fixed !important;
        inset: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 52px 52px;
        gap: 8px !important;
        align-content: center;
        width: 100% !important;
        height: var(--ride-results-actionbar-height);
        margin: 0 !important;
        padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        border: 0 !important;
        border-top: 1px solid #e8e8e8 !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: 0 -3px 14px #0000000d !important;
        transform: none !important;
        z-index: var(--ride-z-actionbar) !important;
        box-sizing: border-box;
    }

    /* Organiza icones, perfil e forma de pagamento sem mudar o modal. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) #ridePaymentModalTrigger {
        display: grid !important;
        grid-template-columns: 64px minmax(0, 1fr) 16px;
        align-items: center;
        gap: 10px !important;
        width: 100%;
        height: 52px;
        text-align: left;
        color: #202027 !important;
    }

    /* Apresenta os icones existentes na pilula de perfil. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-actionbar-option__icon--profile {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 64px !important;
        min-width: 64px !important;
        height: 42px !important;
        padding: 4px !important;
        border-radius: 12px !important;
        background: var(--rb-brand, #6F3BF5) !important;
    }

    /* Destaca o perfil pessoal sem criar um seletor funcional novo. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-actionbar-option__icon--profile .la-user {
        display: grid;
        place-items: center;
        width: 28px;
        height: 32px;
        border-radius: 7px;
        background: #fff;
        color: var(--rb-brand, #6F3BF5);
        font-size: 20px;
    }

    /* Mantem a maleta existente apagada e decorativa. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-actionbar-option__icon--profile .la-briefcase {
        display: inline-block !important;
        color: #ddd;
        font-size: 18px;
    }

    /* Oculta visualmente Pagar com somente nesta composicao mobile. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-actionbar-option__copy strong {
        font-size: 0 !important;
        line-height: 20px;
        color: #202027 !important;
    }

    /* Exibe o titulo solicitado sem alterar o Blade do pagamento. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-actionbar-option__copy strong::after {
        content: "Perfil pessoal";
        font-size: 14px;
        font-weight: 700;
    }

    /* Preserva o texto dinamico da forma de pagamento. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) #ridePaymentSelectedLabel {
        display: block;
        margin: 0;
        font-size: 13px !important;
        line-height: 18px;
        color: #62626f !important;
    }

    /* Aplica o CTA roxo de largura total. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .findDriverBtn {
        width: 100% !important;
        height: 52px;
        min-height: 52px !important;
        padding: 10px 12px !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: var(--rb-brand, #6F3BF5) !important;
        color: #fff !important;
        font-size: 16px !important;
    }

    /* Usa o token de hover da plataforma com fallback secundario. */
    #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .findDriverBtn:hover:not(:disabled) {
        background: var(--rb-brand-hover, #8B5CF6) !important;
    }

    /* Mantem a barra inerte atras do modal durante foco e abertura do teclado. */
    body.rebbify-payment-modal-open #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-booking-actionbar {
        visibility: hidden;
        pointer-events: none;
    }

}

/* Passageiro convidado e imagens maiores apenas na seleção mobile. */
@media (max-width: 991.98px) {
  #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-label {grid-template-columns: 100px minmax(0,1fr) max-content !important;}
  #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-image {width:100px !important;height:76px !important;}
  #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-image img {width:100% !important;height:100% !important;max-width:100px !important;max-height:76px !important;object-fit:contain !important;}
  #rebbifyRideApp .rebbify-guest-chip {max-width:50%;min-width:0;}
  #rideGuestSelectLabel {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .rebbify-guest-dialog {width:min(92vw,420px);max-height:85dvh;border:0;border-radius:18px;padding:0;color:#202027;background:#fff;box-shadow:0 12px 44px #0005;}
  .rebbify-guest-dialog::backdrop {background:rgba(0,0,0,.55);}
  .rebbify-guest-dialog__body {padding:24px;overflow-y:auto;}
  .rebbify-guest-dialog h2 {font-size:21px;line-height:1.25;margin:0 0 18px;}
  .rebbify-guest-choice {display:flex;align-items:center;gap:10px;min-height:44px;}
  .rebbify-guest-choice input {accent-color:var(--rb-brand,#6F3BF5);}
  #rideGuestFields label {display:block;font-weight:600;margin:12px 0 6px;}
  #rideGuestFields input {width:100%;min-height:44px;padding:10px 12px;border:1px solid #777;border-radius:8px;color:#202027;background:#fff;}
  #rideGuestFields p {font-size:12px;color:#53535b;margin:10px 0;}
  .rebbify-guest-error {color:#a11717;font-weight:600;}
  .rebbify-guest-actions {display:flex;justify-content:flex-end;gap:10px;margin-top:20px;}
  .rebbify-guest-actions button {min-height:44px;padding:0 16px;border:1px solid #777;border-radius:8px;background:#fff;color:#202027;}
  .rebbify-guest-actions #rideGuestSave {border-color:var(--rb-brand,#6F3BF5);background:var(--rb-brand,#6F3BF5);color:#fff;}
  .rebbify-guest-dialog :focus-visible,.rebbify-guest-chip:focus-visible {outline:3px solid var(--rb-brand,#6F3BF5);outline-offset:3px;}
}
@media (max-width: 991.98px) {
  /* As regras legadas definiam flex-basis de 44–48px no próprio img, mesmo com o quadro maior. */
  #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-image img {flex:0 0 100px !important;width:100px !important;min-width:100px !important;max-width:100px !important;height:76px !important;min-height:0 !important;max-height:76px !important;transform:scale(1.15) !important;}
  #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-image img.is-fallback {transform:scale(1.75) !important;}
}
@media (max-width: 991.98px) {
  #rebbifyRideApp.is-service-selection:not(.is-schedule-editing) .rebbify-service-image {min-height:76px !important;max-height:76px !important;}
}
@media (max-width:991.98px){#rebbifyRideApp .rebbify-guest-unavailable{margin:4px 12px;font-size:12px;color:#6b2940;}}
@media (min-width:992px){#rebbifyRideApp .rebbify-guest-unavailable{display:none;}}
@media (max-width:991.98px){
  #rebbifyRideApp[data-active-service-type="delivery"] .rebbify-guest-chip,
  #rebbifyRideApp:has(.serviceOption:checked[data-service-type="delivery"]) .rebbify-guest-chip {display:none !important;}
}