/* client/assets/style/fullscreen-views.css  (v4)
   Converte os modais/sheets do app cliente em PÁGINAS no estilo do painel
   do parceiro (/parceiro): topbar e bottom-nav SEMPRE fixas, e a "tela"
   (menu, login, pagamento, chat…) ocupa a área entre elas, deslizando da
   direita com o fundo recuando — igual à transição SPA do parceiro.

   Linguagem visual (mesma do merchant.css):
   fundo #F5F5F5 · cards brancos radius 16 · shadow 0 1px 4px rgba(0,0,0,.06)
   amarelo #F9D515 · texto #1A1A1A · espaçamento lateral 16px, gaps 12px.

   NÃO mexe na lógica JS — o JS continua alternando .open / .is-open /
   body.*-open. Aqui só reescrevemos a APRESENTAÇÃO. Carregado por último. */

:root {
  --rv-topbar-h: calc(env(safe-area-inset-top) + 60px);
  --rv-bottomnav-h: calc(58px + env(safe-area-inset-bottom));
  --rv-bg: #F5F5F5;
  --rv-card: #FFFFFF;
  --rv-black: #1A1A1A;
  --rv-gray-500: #6B6B6B;
  --rv-gray-200: #E8E8E8;
  --rv-yellow: #F9D515;
  --rv-radius: 16px;
  --rv-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* ============================================================
   1) CONTAINER DAS TELAS — entre topbar e bottom-nav
   ============================================================ */
.sideDrawer,
.paySheet,
.chatSheet,
.shareSheet,
#loginModalClient,
#statePayConfirm {
  position: fixed !important;
  top: var(--rv-topbar-h) !important;
  bottom: var(--rv-bottomnav-h) !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: var(--rv-bg) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  z-index: 500 !important;
  transform: translateX(100%);
  opacity: .6;
  /* fechada: invisível p/ cliques — visibility bloqueia até filhos com
     pointer-events próprio (ex: .modal-card do auth.css) */
  visibility: hidden;
  pointer-events: none;
  box-shadow: -8px 0 28px rgba(0,0,0,.14);
  transition: transform .30s cubic-bezier(.4,0,.2,1), opacity .30s ease,
              visibility .30s;
  will-change: transform, opacity;
  display: flex !important;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* aberto = entra da direita (igual spa-enter-right do parceiro) */
.sideDrawer.open,
.sideDrawer[aria-hidden="false"],
.paySheet.open,
.chatSheet.open,
body.share-open .shareSheet,
#loginModalClient.is-open,
#statePayConfirm.active {
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* fundo (mapa + painel) recua — MESMOS valores do spa-exit-left do parceiro:
   translateX(-22%) + opacity .5 (sem scale, sem filtro) */
@media (prefers-reduced-motion: no-preference) {
  /* !important: layout.css trava o mapa com transition:none !important */
  #map {
    transition: transform .30s cubic-bezier(.4,0,.2,1), opacity .30s ease !important;
  }
  /* sem !important: o JS (map.js) seta transition inline de height no painel */
  .content-app {
    transition: transform .30s cubic-bezier(.4,0,.2,1), opacity .30s ease;
  }
  body.rv-screen-open #map,
  body.rv-screen-open .content-app {
    transform: translateX(-22%);
    opacity: .5;
  }
}

/* ============================================================
   2) OVERLAYS LEGADOS — telas não usam véu/blur por cima
   ============================================================ */
.drawerOverlay { display: none !important; }
body.drawer-open::before, body.drawer-open::after,
body.share-open::before,  body.share-open::after,
body.chat-open::before,   body.chat-open::after,
body.pay-open::before,    body.pay-open::after,
body.modal-open::before,  body.modal-open::after { display: none !important; content: none !important; }

/* barras sempre por cima e ativas */
.topbar { z-index: 1100 !important; }
.bottomNav { z-index: 1000 !important; }

/* handles de arrastar não existem em página */
.sideDrawer .drawerHandle,
.paySheet .paySheetHandle,
.chatSheet .chatHandle,
.chatSheet .chatTop::before,
.shareSheet .shareHandle { display: none !important; }

/* ============================================================
   3) MENU (sideDrawer) — página de conta estilo parceiro
   ============================================================ */
.sideDrawer { padding: 0 0 16px !important; }

/* cartão do usuário: card branco igual aos cards do parceiro */
.sideDrawer .drawerUserCard {
  margin: 16px 16px 12px;
  padding: 16px;
  background: var(--rv-card);
  border-radius: var(--rv-radius);
  box-shadow: var(--rv-shadow);
}
.sideDrawer .drawerUserAvatar {
  width: 48px; height: 48px;
  border: 2px solid var(--rv-yellow);
}
.sideDrawer .drawerUserName { font-size: 16px; }
.sideDrawer .drawerUserSub { font-size: 12px; color: var(--rv-gray-500); }

/* sections: cards brancos, divisórias finas */
.sideDrawer .drawerSection {
  margin: 0 16px 12px;
  background: var(--rv-card);
  border: none;
  border-radius: var(--rv-radius);
  box-shadow: var(--rv-shadow);
}
.sideDrawer .drawerSectionItem {
  padding: 14px 16px;
  border-bottom: 1px solid #F0F0F0;
}
.sideDrawer .drawerSectionItem:last-child { border-bottom: none; }
.sideDrawer .dsiIconWrap { width: 36px; height: 36px; border-radius: 10px; }
.sideDrawer .dsiLabel { font-size: 15px; font-weight: 600; }

.sideDrawer .drawerVersion { padding: 8px 0 4px; }

/* sub-views (histórico / perfil): página PRÓPRIA — o card do usuário some
   e o conteúdo entra deslizando, como navegação de página do parceiro */
@keyframes rvPageIn {
  from { transform: translateX(28px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.sideDrawer .drawerView { animation: rvPageIn .25s cubic-bezier(.4,0,.2,1); }
#sideDrawer.rv-sub .drawerUserCard { display: none; }
#sideDrawer.rv-sub { padding-top: 4px !important; }

.sideDrawer .drawerHead {
  padding: 14px 16px 10px;
  border-bottom: none;
  background: transparent;
}
.sideDrawer .drawerTitle { font-size: 17px; font-weight: 800; }
.sideDrawer .drawerBack {
  width: 36px; height: 36px;
  background: var(--rv-card);
  box-shadow: var(--rv-shadow);
  color: var(--rv-black);
}
.sideDrawer .drawerBody { padding: 4px 16px 16px; }

/* perfil: campos dentro de card branco */
#drawerViewProfile .drawerBody {
  margin: 0 16px;
  padding: 16px;
  background: var(--rv-card);
  border-radius: var(--rv-radius);
  box-shadow: var(--rv-shadow);
}
#sideDrawer .input {
  background: #FAFAFA;
  border: 1px solid var(--rv-gray-200);
}
#sideDrawer #btnSaveProfile.btn-primary { border-radius: 14px; margin-top: 16px; }

/* histórico: cards brancos */
.sideDrawer .drawerCard {
  background: var(--rv-card);
  border: none;
  box-shadow: var(--rv-shadow);
}
.sideDrawer .drawerCardPill { background: #F5F5F5; border-color: #ECECEC; }

/* empty state do histórico: centralizado, igual ao parceiro */
#drawerViewHistory #historyMsg:not(:empty) {
  display: block;
  text-align: center;
  padding: 56px 24px 16px;
  font-size: 14px;
  color: var(--rv-gray-500);
}
#drawerViewHistory #historyMsg:not(:empty)::before {
  content: "🕐";
  display: block;
  font-size: 40px;
  margin-bottom: 12px;
  filter: grayscale(.2);
}

/* ============================================================
   4) LOGIN — página de autenticação
   ============================================================ */
#loginModalClient {
  align-items: stretch !important;
  justify-content: flex-start !important;
}
#loginModalClient .modal-card,
#loginModalClient .modal-auth-v2 {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  /* o container já desliza; o card interno não anima por conta própria */
  transform: none !important;
  transition: none !important;
  overflow: visible !important;
}

/* header: logo + tabs sobre o fundo cinza, sem barra branca colada */
#loginModalClient .authHeader {
  position: static !important;
  background: transparent !important;
  border-bottom: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  padding: 16px 16px 0 !important;
}
#loginModalClient .authLogo { text-align: center; }
#loginModalClient .authLogo img { height: 30px; }

/* botão fechar: circular discreto, alinhado ao logo (canto sup. esquerdo) */
#loginModalClient #btnAuthClose,
#loginModalClient .authCloseV2 {
  position: absolute !important;
  left: 14px; right: auto !important;
  top: 14px !important;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--rv-card);
  box-shadow: var(--rv-shadow);
  border: none;
  color: var(--rv-black);
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
}

/* tabs Entrar/Criar conta: segmented control */
#loginModalClient .authTabs {
  display: flex;
  gap: 0;
  margin: 14px 16px 0;
  background: #ECECEC;
  border-radius: 12px;
  padding: 3px;
}
#loginModalClient .authTab {
  flex: 1;
  border: none !important;
  border-radius: 10px !important;
  background: transparent !important;
  font-weight: 700;
  color: var(--rv-gray-500);
  padding: 9px 0 !important;
}
#loginModalClient .authTab.on {
  background: var(--rv-card) !important;
  color: var(--rv-black) !important;
  box-shadow: var(--rv-shadow);
}

/* formulário: card branco compacto, sem vazio gigante */
#loginModalClient .authView { flex: 0 0 auto !important; }
#loginModalClient .authPad {
  margin: 14px 16px 16px;
  padding: 18px 16px !important;
  background: var(--rv-card);
  border-radius: var(--rv-radius);
  box-shadow: var(--rv-shadow);
}

/* ============================================================
   5) PAGAMENTO (paySheet) — carteira estilo dashboard parceiro
   ============================================================ */
.paySheet .paySheetHeader {
  padding: 14px 16px 8px;
  background: transparent;
  border-bottom: none;
}
.paySheet .paySheetTitle { font-size: 17px; font-weight: 800; color: var(--rv-black); }
.paySheet .payCloseBtn {
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--rv-card);
  box-shadow: var(--rv-shadow);
  border: none;
  color: var(--rv-black);
}

/* cartão de saldo preto — mesmo do dashboard do parceiro */
.paySheet .payWalletCard { margin: 4px 16px 12px; }

.paySheet .payBody { padding: 0 16px 16px; }
.paySheet .paySectionLabel {
  font-size: 13px; font-weight: 700; color: var(--rv-gray-500);
  margin: 4px 2px 8px;
}
.paySheet .payList {
  background: var(--rv-card);
  border-radius: var(--rv-radius);
  box-shadow: var(--rv-shadow);
  overflow: hidden;
}
.paySheet .payItem {
  border-bottom: 1px solid #F0F0F0;
  background: transparent;
}
.paySheet .payItem:last-child { border-bottom: none; }

.paySheet .payFooter { padding: 16px 0 0; }
.paySheet .payConfirmBtn {
  background: var(--rv-yellow);
  color: var(--rv-black);
  border-radius: 999px;
  font-weight: 800;
}

/* ============================================================
   5b) CONFIRMAR CORRIDA (statePayConfirm) + COMPARTILHAR (share)
   ============================================================ */
/* o botão "Solicitar corrida" fica fixo no rodapé da tela, respirando */
#statePayConfirm {
  padding-bottom: 12px !important;
  /* bottom-sheet com altura de conteúdo (não estica até a topbar): o botão fica
     logo abaixo dos cards, sem o espaço vazio. overflow:hidden + max-height fazem
     o conteúdo rolar por dentro (pcScrollBody) quando for alto. */
  top: auto !important;
  height: auto !important;
  max-height: calc(100dvh - var(--rv-topbar-h) - var(--rv-bottomnav-h) - 12px) !important;
  overflow: hidden !important;
  border-radius: 20px 20px 0 0 !important;
  box-shadow: 0 -6px 28px rgba(0,0,0,.14) !important;
}
#statePayConfirm .pcScrollBody { padding: 16px 16px 8px; }
#statePayConfirm .pcHeader { border-bottom: none; padding-bottom: 4px; }
#statePayConfirm .pcBackBtn {
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--rv-card); box-shadow: var(--rv-shadow);
  border: none; color: var(--rv-black);
}
#statePayConfirm .pcMethods,
#statePayConfirm .pcBenef {
  background: var(--rv-card);
  border-radius: var(--rv-radius);
  box-shadow: var(--rv-shadow);
}
/* width:auto sobrescreve o width:100% de .btn (base.css). Sheet é flex-column
   (align-items:stretch), então o botão estica dentro das margens de 16px e alinha
   com os cards; sem isso, width:100% + margin somavam ~32px e estourava à direita. */
#statePayConfirm #btnRequestFinal { width: auto; margin: 8px 16px 4px; border-radius: 999px; }

.shareSheet .shareTop {
  padding: 14px 16px 10px;
  background: transparent;
  border-bottom: none;
}
.shareSheet .shareCloseBtn {
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--rv-card); box-shadow: var(--rv-shadow);
  border: none; color: var(--rv-black);
}
.shareSheet .shareBody {
  margin: 0 16px;
  padding: 16px;
  background: var(--rv-card);
  border-radius: var(--rv-radius);
  box-shadow: var(--rv-shadow);
}

/* ============================================================
   6) CHAT — header de página + mensagens sobre fundo cinza
   ============================================================ */
.chatSheet { padding: 0 !important; }
.chatSheet .chatTop {
  flex: 0 0 auto;
  padding: 12px 16px;
  background: var(--rv-card);
  border-bottom: 1px solid #EFEFEF;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.chatSheet .chatClose {
  width: 34px; height: 34px;
  border-radius: 999px;
  background: #F5F5F5;
  border: none;
  color: var(--rv-black);
}
.chatSheet .chatMsgs { flex: 1 1 auto; background: var(--rv-bg); }
.chatSheet .chatComposer {
  flex: 0 0 auto;
  background: var(--rv-card);
  border-top: 1px solid #EFEFEF;
  padding-bottom: 10px;
}

/* ============================================================
   7) DESKTOP — coluna central de 480px (app no meio)
   ============================================================ */
@media (min-width: 1024px) {
  /* o #app faz o papel do .app-shell do parceiro (overflow-x:hidden):
     vira containing block dos elementos fixed e CLIPA o slide na coluna.
     Geometria validada: idêntica com e sem o clip. */
  #app {
    transform: translateZ(0);
    overflow: clip;
  }
  .sideDrawer, .paySheet, .chatSheet, .shareSheet,
  #loginModalClient, #statePayConfirm {
    left: 50% !important; right: auto !important;
    width: 480px !important; margin-left: -240px !important;
  }
}

/* recuo do fundo no desktop: -50% (centralização do layout.css) - 22% (efeito) */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  body.rv-screen-open #map,
  body.rv-screen-open .content-app {
    transform: translateX(-72%) !important;
  }
}

/* ============================================================
   8) ACESSIBILIDADE — sem animação para quem preferir
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sideDrawer, .paySheet, .chatSheet, .shareSheet,
  #loginModalClient, #statePayConfirm {
    transition: opacity .15s ease !important; transform: none !important;
    opacity: 0; visibility: hidden; pointer-events: none;
  }
  .sideDrawer.open, .paySheet.open, .chatSheet.open,
  body.share-open .shareSheet, #loginModalClient.is-open,
  #statePayConfirm.active {
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
  }
}