/*
 * 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;
}