/* [APLICATIVO] layout Super-App — mobilidade inDrive + split mapa */
:root {
  --bg: #090A0F;
  --card: rgba(18, 22, 32, 0.88);
  --line: rgba(124, 58, 237, 0.32);
  --text: #e8eef8;
  --muted: #94a3b8;
  --accent: #10b981;
  --cyan: #60a5fa;
  --offer: #F59E0B;
  --violet: #7c3aed;
  --ibr-topbar: 52px;
  --ibr-nav: 0px;
  --ibr-avisos: 44px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow-x: hidden; max-width: 100%; }
body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 10% 0%, rgba(37, 99, 235, 0.16), transparent 40%),
    radial-gradient(ellipse at 90% 100%, rgba(124, 58, 237, 0.14), transparent 44%);
  color: var(--text);
  container-type: inline-size;
  container-name: app-shell;
}
.super-app {
  min-height: 100%; display: flex; flex-direction: column;
  max-width: 100%; min-width: 0; overflow-x: hidden;
  position: relative;
  container-type: inline-size;
  container-name: super-app;
}
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 6px 8px; background: rgba(18, 22, 32, 0.9); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  flex-wrap: nowrap;
  flex: 0 0 auto;
  min-width: 0;
  position: relative;
  z-index: 40;
}
.app-hist {
  display: flex; gap: 6px; align-items: center;
}
.super-app > .app-hist {
  position: absolute;
  z-index: 42;
  left: max(8px, env(safe-area-inset-left, 0px));
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  flex: none;
  width: auto;
  pointer-events: none;
}
.app-hist-btn {
  appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  margin: 0;
  font: inherit;
  line-height: 0;
  color: var(--text);
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid rgba(124, 58, 237, 0.45);
  background: rgba(18, 22, 32, 0.82);
  box-shadow: 0 4px 14px rgba(9, 10, 15, 0.35);
  backdrop-filter: blur(10px);
}
.app-hist-btn:disabled { opacity: 0.35; cursor: default; }
.app-hist-btn:not(:disabled):hover {
  border-color: rgba(245, 158, 11, 0.55);
  color: #F59E0B;
}
.super-app:has(#pane-games.taxi-playing) > .app-hist,
.super-app:has(#pane-games.mm2-playing) > .app-hist {
  visibility: visible;
  pointer-events: auto;
}
.avisos-slot {
  flex: 0 0 var(--ibr-avisos);
  width: var(--ibr-avisos);
  height: var(--ibr-avisos);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topbar strong { flex: 0 0 auto; font-size: 14px; letter-spacing: 0.02em; }
html.layout-desktop .topbar strong { margin-left: 76px; }
.mode-tabs-header {
  flex: 1 1 auto; min-width: 0; max-width: 280px; margin: 0 0 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
}
.mode-tabs-header .mode-btn {
  padding: 6px 6px; font-size: 11px; min-height: 36px;
}
.mode-tabs-header .mode-btn img {
  width: 18px; height: 14px;
}
.topbar-normas {
  font-size: 12px; font-weight: 700; color: #38bdf8; text-decoration: none;
  white-space: nowrap; min-height: 32px; display: inline-flex; align-items: center;
  padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line);
}
@media (max-width: 420px) {
  .topbar-normas { font-size: 11px; max-width: 100%; }
}
.menu-navegacao-app {
  display: none !important;
}
.menu-navegacao-app .nav-item {
  flex: 1 1 0; min-width: 72px; min-height: 44px; display: flex; align-items: center; justify-content: center;
  text-align: center; text-decoration: none; color: var(--text); font-weight: 700; font-size: 11px;
  padding: 4px 8px; border-radius: 12px; background: #0a2236; border: 1px solid var(--line);
  white-space: normal; line-height: 1.2;
}
.menu-navegacao-app .nav-item.highlight {
  background: linear-gradient(90deg, #F59E0B, #7c3aed); color: #090A0F; border-color: transparent;
}
.btn-super-whatschat {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 75px;
}
.pills { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.pills span {
  font-size: 10px; padding: 3px 7px; border-radius: 999px; background: #12344c; color: #9fd7ff;
}
.pills span.off { opacity: 0.45; }
.split { flex: 1 1 auto; min-height: 0; min-width: 0; }
.sheet { padding: 12px 14px 8px; overflow: auto; min-height: 0; min-width: 0; }
.mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.mode-btn {
  border: 1px solid var(--line); background: #0a2236; color: var(--muted);
  font-weight: 800; padding: 10px 8px; border-radius: 12px; cursor: pointer; font-size: 12px;
}
.mode-btn.active {
  color: #090A0F; background: linear-gradient(90deg, #F59E0B, #7c3aed); border-color: transparent;
}
label { display: block; margin: 8px 0 4px; font-size: 12px; color: var(--muted); }
.sheet input, .cards input, .chat-drawer input, .ride-board input, .sheet select {
  width: 100%; background: #06111c; border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 10px;
}
.offer-input { font-size: 1.35rem; font-weight: 800; color: var(--offer); border-color: #166534; }
.pay-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  flex: 1; min-width: 72px; border: 1px solid var(--line); background: #0a2236; color: var(--text);
  border-radius: 999px; padding: 8px; cursor: pointer; font-weight: 700;
}
.chip.active { background: #14532d; border-color: var(--offer); color: #bbf7d0; }
.muted { color: var(--muted); font-size: 12px; }
.accent { color: var(--accent); font-weight: 700; }
.ride { margin: 10px 0; font-size: 13px; }
.cta {
  background: linear-gradient(90deg, #F59E0B, #10b981); color: #090A0F; border: 0;
  font-weight: 800; padding: 14px 14px; border-radius: 12px; cursor: pointer; width: 100%;
  margin-top: 8px; font-size: 15px;
}
.cta-ghost {
  background: #12344c; color: #e8f4ff; border: 1px solid var(--line);
  font-weight: 700; padding: 8px 10px; border-radius: 8px; cursor: pointer; width: 100%;
}
#btnAddRideStop { margin: 0; font-size: 13px; font-weight: 600; padding: 8px 10px; min-height: 44px; }
#portariaStopHint { margin: 0 0 8px; }
.ride-add-stop-wrap {
  position: relative;
  z-index: 760;
  margin: 6px 0 2px;
}
.ride-add-stop-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 760;
  display: grid;
  gap: 4px;
  padding: 6px;
  max-height: min(36vh, calc(100dvh - 168px - env(safe-area-inset-bottom, 0px)));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #0a2236;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(9, 10, 15, 0.5);
}
.ride-add-stop-menu[hidden] { display: none !important; }
.ride-add-stop-wrap.is-dropup .ride-add-stop-menu {
  top: auto;
  bottom: calc(100% + 4px);
}
.ride-add-stop-opt {
  width: 100%;
  min-height: 44px;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #12344c;
  color: #e8f4ff;
  font-weight: 700;
  cursor: pointer;
}
.ride-add-stop-opt:disabled {
  opacity: 0.55;
  cursor: default;
}
.ride-stops { display: grid; gap: 4px; }
.ride-stop-row { margin: 2px 0 0; }
.ride-stop-row label { margin: 6px 0 2px; }
.ride-stop-fields { display: flex; gap: 6px; align-items: center; }
.ride-stop-fields input { flex: 1; min-width: 0; }
.ride-stop-kind {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.35;
  overflow-wrap: anywhere; margin: 0;
}
.ride-stop-fee { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.ride-extra-stop {
  margin: 4px 0; font-size: 13px; font-weight: 700; color: var(--offer);
}
.ride-stop-remove {
  flex: 0 0 auto; width: 28px; height: 28px; padding: 0; margin: 0;
  background: transparent; border: 0; color: var(--muted);
  cursor: pointer; font-size: 18px; line-height: 1; opacity: 0.7;
}
.ride-stop-remove:hover { opacity: 1; color: var(--text); }
.ride-board { display: grid; grid-template-columns: 1fr; gap: 4px; min-width: 0; overflow: visible; }
.ride-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px;
  min-width: 0; max-width: 100%; overflow-x: hidden;
}
.ride-card p { overflow-wrap: anywhere; }
.ride-card strong { color: var(--offer); font-size: 1.1rem; }
.ride-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 8px; }
.ride-card-actions .cta, .ride-card-actions .cta-ghost { min-height: 44px; }
.ride-offer-strip {
  padding: 0;
  overflow: visible;
  border-radius: 8px;
}
.ride-strip-hit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "route fare badge" "pickup pickup badge";
  column-gap: 8px;
  row-gap: 0;
  width: 100%;
  margin: 0;
  padding: 5px 8px;
  min-height: 44px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 8px;
  box-sizing: border-box;
}
.ride-strip-route {
  grid-area: route;
  min-width: 0;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ride-strip-fare {
  grid-area: fare;
  font-size: 14px;
  font-weight: 800;
  color: var(--offer);
  white-space: nowrap;
}
.ride-strip-pickup {
  grid-area: pickup;
  font-size: 12px;
  line-height: 1.25;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ride-strip-badge {
  grid-area: badge;
  justify-self: end;
  align-self: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #1c1917;
  background: #fbbf24;
  border-radius: 999px;
  padding: 1px 5px;
  line-height: 1.35;
}
.ride-offer-strip.ride-card--demo { border-style: dashed; }
.ride-offer-strip:not(.ride-card--demo) .ride-strip-badge {
  color: #ecfeff;
  background: #0e7490;
}
.ride-strip-panel {
  padding: 0 10px 8px;
  overflow: visible;
}
.ride-strip-panel[hidden] { display: none !important; }
.ride-strip-details-label {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cyan);
}
.ride-strip-panel p { margin: 3px 0; font-size: 12px; line-height: 1.35; }
.ride-offer-strip .ride-card-actions { margin: 8px 0 4px; gap: 6px; }
.ride-offer-strip .ride-card-actions .cta,
.ride-offer-strip .ride-card-actions .cta-ghost {
  min-height: 44px;
  font-size: 14px;
  padding: 8px 6px;
}
.ride-offer-strip .peer-chip { margin: 4px 0; }
.ride-offer-strip .peer-chip img { width: 22px; height: 22px; }
.offers-screen-title, .offers-heading { margin: 8px 0 6px; color: var(--cyan); font-size: 1rem; }
.driver-settings-pane, .driver-offers-pane { min-width: 0; max-width: 100%; }
#driverSettingsPane[hidden], #driverOffersPane[hidden] { display: none !important; }
#btnDriverSettingsBack { width: 100%; min-height: 44px; margin-bottom: 10px; }
.demo-offer-banner {
  font-weight: 800; letter-spacing: 0.02em; text-align: center;
  color: #1c1917; background: #fbbf24; border-radius: 8px;
  padding: 8px 10px; margin: 0 0 10px;
}
.ride-card--demo { border-color: #f59e0b; border-style: dashed; }
.demo-offer-note { margin: 8px 0 0; color: #fde68a; }
.offer-k { color: var(--cyan); font-weight: 700; }
.map-col { position: relative; display: flex; flex-direction: column; min-height: 280px; }
.map-stage { flex: 1; min-height: 280px; background: #082536; position: relative; }
.driver-dest-overlay {
  position: absolute; z-index: 792; top: 12px; left: 12px;
  width: min(260px, 42%);
  background: rgba(18, 22, 32, 0.78); backdrop-filter: blur(18px);
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 14px; padding: 10px 12px;
  box-shadow: 0 12px 36px rgba(9, 10, 15, 0.45), inset 0 1px 0 rgba(255,255,255,0.06);
}
.driver-dest-overlay[hidden], .driver-idle-split[hidden], .below-table-warn[hidden] { display: none !important; }
.driver-dest-overlay label { margin-top: 0; color: var(--cyan); }
.driver-dest-overlay input { width: 100%; background: #06111c; border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 8px; }
.driver-idle-split {
  position: absolute; z-index: 786; top: 8px; right: 8px; bottom: 44px;
  width: calc(50% - 12px);
  overflow: auto;
  background: rgba(18, 22, 32, 0.82); backdrop-filter: blur(18px);
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 14px; padding: 10px 12px;
  box-shadow: 0 16px 48px rgba(9, 10, 15, 0.5);
}
.idle-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.idle-offer-list { display: grid; gap: 8px; }
.super-app.driver-idle .fare-sim-overlay { right: calc(50% + 16px); }
/* [PACOTE-SUPERAPP 2026-10-08] antes escondia sempre o cartao "Nova oferta" (#offerToast) com o motorista livre; agora so quando [hidden] */
.super-app.driver-idle .offer-toast[hidden] { display: none !important; }
.below-table-warn {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(245, 158, 11, 0.55);
  background: rgba(120, 53, 15, 0.4);
  color: #fde68a;
  font-size: 13px;
  font-weight: 650;
}
.fare-sim-overlay {
  position: absolute; z-index: 790; top: 12px; right: 12px; left: auto;
  width: min(248px, calc(100% - 28px));
  pointer-events: none;
  background: rgba(18, 22, 32, 0.72); backdrop-filter: blur(18px);
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 14px; padding: 10px 12px;
  box-shadow: 0 12px 36px rgba(9, 10, 15, 0.45), inset 0 1px 0 rgba(255,255,255,0.06);
}
.fare-sim-overlay[hidden] { display: none !important; }
.fare-sim-overlay h3 { margin: 0 0 6px; color: var(--cyan); font-size: 0.82rem; letter-spacing: 0.02em; }
.fare-sim-overlay ul { margin: 0; padding-left: 16px; font-size: 12px; }
.fare-sim-overlay li { margin: 3px 0; color: var(--text); }
.fare-sim-overlay .fare-total { margin: 8px 0 2px; }
.fare-sim-overlay .muted { margin: 0; }
.pin-origin-wrap, .pin-dest-wrap { background: transparent; border: 0; }
.pin-origin, .pin-dest {
  display: block; width: 18px; height: 18px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 4px 10px rgba(0,0,0,0.45);
}
.pin-origin {
  background: radial-gradient(circle at 35% 30%, #ecfeff, #22d3ee 42%, #34d399);
  border: 2px solid #a7f3d0;
}
.pin-dest {
  background: radial-gradient(circle at 35% 30%, #c4b5fd, #5b21b6 48%, #090A0F);
  border: 2px solid #7c3aed;
}
.pin-stop-wrap { background: transparent; border: 0; }
.pin-stop {
  display: block; width: 10px; height: 10px; border-radius: 50%;
  background: #F59E0B; border: 2px solid #fde68a;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.map-caption { margin: 0; padding: 6px 10px; font-size: 11px; color: var(--muted); background: #061a2b; }
.overlay-pane {
  position: absolute; inset: 0; overflow: auto; background: rgba(4, 17, 29, 0.96);
  padding: 14px 16px 16px; z-index: 20;
  min-width: 0; max-width: 100%;
}
.overlay-pane input, .overlay-pane select, .overlay-pane textarea {
  width: 100%; background: #06111c; border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 10px;
}
#passengerMode[hidden], #driverMode[hidden], .overlay-pane[hidden] { display: none !important; }
h2 { margin: 0 0 12px; font-size: 1.15rem; color: var(--cyan); }
h3 { margin: 0 0 8px; font-size: 0.95rem; }
.cards { display: grid; gap: 10px; }
.cards article { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.videos { display: grid; gap: 8px; }
.video-card {
  height: 120px; border-radius: 12px; display: flex; align-items: flex-end; padding: 10px;
  background: linear-gradient(180deg, transparent, #000a), #123;
}
.feed { margin-top: 10px; font-size: 13px; }
.feed p { background: var(--card); border-radius: 10px; padding: 10px; border: 1px solid var(--line); }
.chat-drawer {
  background: #061a2b; border-top: 1px solid var(--line); padding: 0 12px 8px;
  color: var(--text);
}
.chat-drawer summary {
  appearance: none;
  -webkit-appearance: none;
  list-style: none;
  font: inherit;
  color: var(--cyan);
  background: transparent;
  border: 0;
}
.chat-drawer summary::-webkit-details-marker { display: none; }
.super-app:not(.view-transport) #chatDrawer { display: none; }
.ride-safety-bar, .ride-safety-inline {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 12px; padding: 10px 12px; margin: 8px 0;
}
.ride-safety-bar .cta-ghost, .ride-safety-inline .cta-ghost { width: auto; min-height: 44px; }
.wc-inbox { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.wc-inbox-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wc-social-actions .cta-ghost { width: auto; min-height: 44px; }
.chat-drawer summary { cursor: pointer; font-weight: 700; padding: 10px 0; color: var(--cyan); }
.supervisor-bar {
  display: flex; align-items: center; gap: 10px;
  background: rgba(14, 116, 144, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 12px; padding: 8px 10px; margin-bottom: 8px;
}
.supervisor-bar img { width: 36px; height: 36px; border-radius: 50%; background: #0a2236; }
.supervisor-copy { flex: 1; min-width: 0; }
.supervisor-copy strong { display: block; color: var(--cyan); font-size: 13px; }
.supervisor-copy p { margin: 0; font-size: 11px; color: var(--muted); }
.supervisor-bar .cta-ghost { width: auto; padding: 6px 10px; white-space: nowrap; }
.ride-invoice { margin-top: 8px; font-size: 12px; background: #06111c; border-radius: 10px; padding: 8px 10px; border: 1px solid var(--line); overflow: visible; }
.ride-invoice h4 { margin: 0 0 6px; color: var(--cyan); font-size: 12px; }
.ride-invoice li { margin: 2px 0; }
.ride-invoice-total { margin: 0 0 4px; }
.ride-invoice-summary { margin: 0 0 4px; padding-left: 16px; }
.ride-fare-compact { display: none; margin: 0; font-size: 12px; line-height: 1.35; color: var(--muted); }
.ride-calc-details { overflow: visible; max-height: none; }
.ride-calc-details > summary {
  cursor: pointer;
  color: var(--cyan);
  font-weight: 700;
  font-size: 13px;
  padding: 4px 0;
}
.fare-summary--compact {
  background: transparent;
  border-color: rgba(148, 163, 184, 0.28);
}
#paxAwaitToolbar[hidden],
#paxRouteReviewBar[hidden],
#paxTabPedir[hidden],
#paxTabOfertas[hidden] { display: none !important; }
.pax-ride-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 10px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(180deg, rgba(9, 10, 15, 0.98), rgba(9, 10, 15, 0.9));
  padding: 6px 0 8px;
}
.pax-modality,
.drv-modality {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 10px;
}
.pax-modality .chip,
.drv-modality .chip {
  min-height: 48px;
  font-size: 0.95rem;
  font-weight: 800;
  padding: 10px 8px;
}
#passengerMode[data-pax-modality="interurban"] #fareSummary,
#passengerMode[data-pax-modality="interurban"] .menu-extras-passageiro,
#passengerMode[data-pax-modality="interurban"] #payLaterRow,
#passengerMode[data-pax-modality="interurban"] .logistics-row,
#passengerMode[data-pax-modality="interurban"] #rideAddStopWrap,
#passengerMode[data-pax-modality="interurban"] #rideStops,
#passengerMode[data-pax-modality="interurban"] #portariaStopHint {
  display: none !important;
}
.interurban-note {
  margin: 6px 0 10px;
  font-size: 13px;
}
.pax-ride-tabs .cta,
.pax-ride-tabs .cta-ghost {
  min-height: 52px;
  font-size: 1rem;
  font-weight: 800;
  padding: 12px 8px;
}
.pax-search-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 10px;
}
.pax-search-toolbar .cta-ghost {
  width: 100%;
  min-height: 48px;
  font-weight: 800;
}
.pax-route-review {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  margin: 8px 0;
}
.pax-route-review-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pax-route-review-actions .cta,
.pax-route-review-actions .cta-ghost {
  width: 100%;
  min-height: 48px;
}
.pax-offer-sort {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0 10px;
  position: sticky;
  top: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(9, 10, 15, 0.96), rgba(9, 10, 15, 0.88));
  padding: 4px 0 8px;
}
.pax-offer-sort .cta,
.pax-offer-sort .cta-ghost {
  min-height: 52px;
  font-size: 1rem;
  font-weight: 800;
  padding: 12px 8px;
}
.pax-offer-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 16px;
}
.pax-offer-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
}
.pax-offer-card .pax-offer-price {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--offer);
}
.pax-offer-card p { margin: 4px 0; font-size: 13px; }
.pax-offer-card .cta {
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
}
.pax-offer-empty {
  text-align: center;
  padding: 28px 10px;
  font-size: 1.05rem;
  font-weight: 700;
}
.pax-offer-card--compact {
  padding: 8px 10px;
}
.pax-offer-card--compact .pax-offer-price {
  margin: 0 0 2px;
  font-size: 1.2rem;
}
.pax-offer-card--demo {
  border-color: #f59e0b;
  border-style: dashed;
}
.pax-offer-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.pax-offer-card-actions .cta,
.pax-offer-card-actions .cta-ghost {
  width: 100%;
  min-height: 48px;
  margin-top: 0;
}
.pax-demo-note {
  margin: 6px 0 8px;
  color: #fde68a;
  font-weight: 700;
}
.layout-desktop .ride-fare-compact { display: none !important; }
.layout-desktop .fare-summary { display: flex; flex-direction: column; }
.layout-desktop .fare-summary > .ride-calc-details { display: contents; }
.layout-desktop .fare-summary > .ride-calc-details > summary { display: none; }
.layout-desktop #fareBreakdown { order: 1; }
.layout-desktop #fareTotalLine { order: 2; }
.layout-desktop #farePayLine { order: 3; }
.layout-desktop #rideInvoicePublic { order: 4; }
.layout-desktop .ride-invoice-summary,
.layout-desktop .ride-invoice-total { display: none; }
.layout-desktop .ride-invoice > .ride-calc-details { display: contents; }
.layout-desktop .ride-invoice > .ride-calc-details > summary { display: none; }
.peer-chip { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.peer-chip img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #12344c; }
.tag-chip { display: inline-block; margin: 3px; padding: 5px 8px; border-radius: 999px; border: 1px solid var(--line); background: #0a2236; color: var(--text); font-size: 11px; cursor: pointer; }
.tag-chip.on { background: #14532d; border-color: var(--accent); }
.chat-body { min-height: 56px; font-size: 13px; white-space: pre-wrap; }
.chat-drawer form { display: flex; gap: 6px; margin-top: 8px; align-items: stretch; }
.chat-drawer input {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: var(--text);
  background: #06111c;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
}
.chat-drawer form button {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 8px 12px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  color: #090A0F;
  background: linear-gradient(90deg, #F59E0B, #7c3aed);
  border: 0;
  border-radius: 10px;
}
.foot-shortcuts {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: #041018; border-top: 1px solid var(--line); font-size: 12px;
  flex-wrap: wrap; min-width: 0;
}
.quiet-link {
  background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px 8px;
  text-decoration: underline; text-underline-offset: 3px;
}
.quiet-link.active { color: var(--accent); text-decoration: none; font-weight: 700; }
.sep { color: #334155; }

.bottom-bar {
  display: none;
  position: relative;
  flex: 0 0 auto;
  background: #061a2b; border-top: 1px solid var(--line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  width: 100%; max-width: 100%; overflow: hidden;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px;
  z-index: 50;
}
.nav-btn {
  min-width: 0; background: transparent; border: 0; color: var(--muted); font-weight: 700;
  padding: 8px 2px; border-radius: 10px; cursor: pointer; font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: none; box-sizing: border-box;
}
.nav-btn.active { color: var(--accent); background: #0c2f28; }
.more-grid { display: grid; gap: 10px; }
.more-grid .more-link { min-height: 44px; text-decoration: none; }
#pane-web3 .pills { margin: 0 0 12px; justify-content: flex-start; }

.overlay-pane.pane-videos-browser:not([hidden]) {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
.vid-browser { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; }
.vid-browser-chrome {
  flex: 0 0 auto; position: sticky; top: 0; z-index: 2;
  background: #061018; border-bottom: 1px solid var(--line);
  padding: 8px 10px; display: grid; gap: 6px;
}
.vid-browser-ctrls { display: flex; gap: 4px; }
.vid-ctrl {
  min-width: 40px; min-height: 40px; border-radius: 10px; cursor: pointer;
  background: #0a2236; border: 1px solid var(--line); color: var(--text); font-weight: 700;
  padding: 0 8px; white-space: nowrap;
}
.vid-ctrl:disabled { opacity: 0.4; cursor: default; }
.vid-browser-form { display: flex; gap: 6px; align-items: center; }
.vid-browser-form input { flex: 1; min-width: 0; }
.vid-browser-form select {
  min-width: 110px; height: 40px; border-radius: 10px;
  background: #0a2236; border: 1px solid var(--line); color: var(--text);
}
.vid-privacy-btn { color: #fde68a; border-color: #854d0e; }
.vid-privacy-panel { flex: 1; min-height: 0; overflow: auto; padding: 12px 16px; }
.vid-privacy-panel[hidden] { display: none !important; }
.vid-privacy-list { color: var(--muted); padding-left: 18px; }
.vid-go { width: auto; padding: 0 12px; }
.vid-browser-hint { margin: 0; font-size: 11px; color: var(--muted); word-break: break-all; }
.vid-browser-hint.is-external { color: #fbbf24; }
.vid-browser-home { flex: 1; min-height: 0; overflow: auto; padding: 12px; }
#ibrSocialHome { max-width: 880px; }
#ibrSocialHome h2 { font-size: 12px; margin: 14px 0 6px; color: #7dd3fc; letter-spacing: 0.04em; text-transform: uppercase; }
.ibr-social-name { margin: 0 0 8px; font-size: 13px; color: #f5c542; font-weight: 700; }
.ibr-social-note { margin: 0 0 8px; font-size: 12px; color: #94a3b8; }
.ibr-social-banner {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
  height: 28px; box-sizing: border-box; margin: 0 0 8px; padding: 0 4px 0 10px;
  border-radius: 8px; background: #0b0b0b; border: 1px solid #b8860b; overflow: hidden;
}
.ibr-social-banner-title {
  flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1; color: #f5c542;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ibr-social-banner-actions { flex: 0 0 auto; display: flex; gap: 4px; }
a.ibr-social-banner-btn {
  height: 20px; line-height: 20px; padding: 0 10px; font-size: 12px; border-radius: 999px;
  background: #d4a017; color: #0b0b0b; font-weight: 700; text-decoration: none; box-sizing: border-box;
}
a.ibr-social-banner-btn.ghost { background: transparent; color: #f5c542; border: 1px solid #b8860b; line-height: 18px; }
.ibr-social-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ibr-social-card {
  display: block; border-radius: 12px; overflow: hidden; background: #122033;
  border: 1px solid #1e3a5f; color: #e8eef8; text-decoration: none;
}
.ibr-social-card.recent { border-color: #a16207; }
.ibr-social-thumb {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; background: linear-gradient(135deg, #0f3b5c, #1e3a5f); overflow: hidden;
}
.ibr-social-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ibr-social-ph { font-size: 13px; font-weight: 700; }
.ibr-social-badge {
  position: absolute; z-index: 1; left: 3px; top: 3px; padding: 1px 5px; border-radius: 999px;
  background: rgba(4, 18, 31, 0.85); color: #7dd3fc; font-size: 11px; max-width: calc(100% - 6px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ibr-social-card.recent .ibr-social-badge { color: #fde68a; }
.ibr-social-body { display: block; padding: 5px 6px 6px; }
.ibr-social-body strong, .ibr-social-body span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ibr-social-body strong { font-size: 13px; }
.ibr-social-plat { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: #7dd3fc; }
.ibr-social-body span:last-child { font-size: 12px; color: #94a3b8; }
.ibr-social-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ibr-social-shortcuts a {
  display: block; padding: 8px 10px; border-radius: 10px; background: #122033;
  border: 1px solid #1e3a5f; color: #e8eef8; text-decoration: none;
}
.ibr-social-shortcuts a.primary { background: #0a2236; border-color: #38bdf8; }
.ibr-social-shortcuts strong { display: block; font-size: 14px; }
.ibr-social-shortcuts span { color: #94a3b8; font-size: 12px; }
@media (max-width: 860px) {
  .ibr-social-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ibr-social-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vid-home-note { font-size: 12px; margin: 0 0 10px; }
.vid-home-cards { display: grid; gap: 14px; margin-bottom: 16px; }
.vid-portal-h { margin: 4px 0 0; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cyan); }
.vid-portal-top, .vid-portal-ext { display: grid; gap: 10px; }
.vid-insp-note { margin: 0; font-size: 12px; color: var(--muted); }
.vid-portal-insp {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vid-insp-card {
  padding: 12px 14px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line);
}
.vid-insp-plat { margin: 0 0 4px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cyan); }
.vid-insp-card strong { display: block; margin-bottom: 6px; }
.vid-insp-url { margin: 0 0 10px; font-size: 11px; color: var(--muted); word-break: break-all; }
.vid-insp-open {
  display: inline-block; padding: 8px 12px; border-radius: 999px; cursor: pointer;
  background: #0a2236; border: 1px solid #38bdf8; color: inherit; font: inherit; font-size: 13px;
}
.vid-portal-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.vid-home-card {
  display: flex; align-items: stretch; gap: 0; padding: 0; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; cursor: pointer;
  text-align: left; width: 100%; color: inherit; font: inherit;
}
.vid-home-card.is-unavailable { opacity: 0.9; border-color: #854d0e; background: #1a1208; cursor: default; }
.vid-home-card.is-unavailable span { color: #fde68a; }
.vid-home-card img, .vid-card-art {
  width: 112px; min-height: 72px; object-fit: cover; flex-shrink: 0; display: block;
}
.vid-card-art { display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; }
.vid-home-card .vid-card-body { padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.vid-home-card strong { display: block; }
.vid-home-card span { font-size: 11px; color: var(--muted); }
.vid-biblioteca h3 { margin: 8px 0 6px; color: var(--cyan); }
.vid-browser-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.vid-browser-stage[hidden] { display: none !important; }
.vid-external-bar {
  flex: 0 0 auto; padding: 8px 10px; background: #1a1208; border-bottom: 1px solid #854d0e;
}
.vid-external-bar p { margin: 0 0 8px; font-size: 11px; color: #fde68a; }
.vid-external-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.vid-external-actions .cta-ghost { width: auto; padding: 8px 10px; font-size: 12px; }
#vidBrowserFrame {
  flex: 1; min-height: 36vh; width: 100%; border: 0; background: #000;
}
.vid-browser-host {
  flex: 1; min-height: 36vh; width: 100%; background: #000;
}
.vid-browser-host[hidden] { display: none !important; }
.pane-downloads .dl-app-list { display: grid; gap: 12px; }
.pane-downloads .dl-pending { margin: 8px 0; }
.pane-downloads a.cta { display: inline-block; width: auto; text-decoration: none; }
.vid-frame-fallback { padding: 8px 10px 16px; font-size: 12px; }
@media (max-width: 720px) {
  .vid-portal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vid-portal-insp { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .vid-ctrl { min-width: 36px; min-height: 36px; font-size: 13px; }
  .vid-home-card img, .vid-card-art { width: 88px; }
}
.shorts-feed { display: flex; flex-direction: column; gap: 12px; max-height: none; overflow: visible; scroll-snap-type: none; }
.short-card { scroll-snap-align: start; background: #0a2236; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.short-stage {
  min-height: 280px; display: flex; align-items: flex-end; padding: 16px;
  background: linear-gradient(180deg, transparent, #000c), #1a3a55;
  font-weight: 800;
}
.short-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; align-items: center; }
.short-actions button { background: #12344c; color: #e8f4ff; border: 0; border-radius: 999px; padding: 8px 12px; cursor: pointer; }
.short-rew { font-size: 11px; color: var(--accent); }
.game-portal { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px; min-width: 0; }
.game-slot, .html5-slot { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.html5-slot { grid-column: 1 / -1; min-height: 180px; }
#pane-games.taxi-playing,
#pane-games.mm2-playing {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
#pane-games.taxi-playing > h1,
#pane-games.taxi-playing > h2,
#pane-games.taxi-playing > p,
#pane-games.taxi-playing #gamePortal,
#pane-games.mm2-playing > h1,
#pane-games.mm2-playing > h2,
#pane-games.mm2-playing > p,
#pane-games.mm2-playing #gamePortal {
  display: none !important;
}
#taxiMadrugadaRoot { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#taxiMadrugadaRoot[hidden] { display: none !important; }
#mm2Root { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#mm2Root[hidden] { display: none !important; }
.mm2-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #070b14;
}
.game-chrome {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 10px 4px;
  background: #0a101c;
  border-bottom: 1px solid #1e293b;
}
.game-chrome .taxi-status, .game-chrome .mm2-status {
  position: static; flex: 1 1 140px; margin: 0; font-size: 12px;
  color: #e8eef8; text-shadow: none; pointer-events: auto;
}
.game-help {
  flex: 0 0 auto; margin: 0; padding: 4px 10px 0;
  font-size: 11px; color: #94a3b8; line-height: 1.3;
}
.game-canvas-wrap {
  flex: 1 1 0; min-height: 0; min-width: 0;
  display: flex; align-items: stretch; justify-content: stretch;
  background: #05060c; overflow: hidden;
}
#mm2Canvas, #taxiCanvas {
  display: block; width: 100%; height: 100%; flex: 1;
  object-fit: contain; object-position: center;
  image-rendering: pixelated; image-rendering: crisp-edges;
  outline: none;
}
.mm-daily-host { z-index: 7; }
.mm-daily ul { padding-left: 18px; font-size: 13px; }
.mm-daily li { margin: 8px 0; }
.game-controls-dock {
  flex: 0 0 auto;
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  padding: 8px 10px max(10px, env(safe-area-inset-bottom, 0px));
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px;
  background: linear-gradient(180deg, transparent, rgba(10,16,28,0.88) 28%);
  border-top: 0;
  pointer-events: auto; touch-action: none;
}
.game-controls-dock.taxi-hud, .mm2-hud.game-controls-dock { pointer-events: auto; }
.taxi-hud.taxi-hud-dim { display: none !important; }
.taxi-pause { position: static; min-width: 72px; }
.mm2-overlay {
  position: absolute; z-index: 4; inset: 52px 8px auto;
  max-height: 46%;
  overflow: auto;
  background: rgba(7,11,20,0.92);
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 10px;
  color: #e8eef8;
}
.mm2-overlay[hidden] { display: none !important; }
.mm2-menu-row { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 180px; }
.mm2-dpad { display: grid; grid-template-rows: auto auto auto; justify-items: center; gap: 6px; margin-left: auto; }
.taxi-stage, .mm2-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #070b14;
}
.taxi-foot, .taxi-car {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 10px; width: 100%;
}
.taxi-foot[hidden], .taxi-car[hidden] { display: none !important; }
.taxi-dpad {
  display: grid; grid-template-rows: auto auto auto; justify-items: center; gap: 6px;
}
.taxi-dpad-mid { display: flex; gap: 28px; }
.taxi-actions, .taxi-car { gap: 8px; }
.taxi-btn {
  min-width: 52px; min-height: 52px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  background: rgba(18, 22, 32, 0.88);
  color: #e8eef8; font-weight: 800; font-size: 13px;
  touch-action: none;
  user-select: none;
}
.taxi-btn.taxi-big { min-width: 72px; min-height: 56px; }
.taxi-btn[hidden] { display: none !important; }
.taxi-pause-menu {
  position: absolute; z-index: 6;
  left: max(16px, env(safe-area-inset-left, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  top: 20%;
  margin: 0 auto; max-width: 360px;
  background: rgba(18, 22, 32, 0.96);
  border: 1px solid var(--line); border-radius: 16px; padding: 14px;
  display: grid; gap: 8px;
}
.taxi-pause-menu[hidden], .taxi-lock[hidden] { display: none !important; }
.taxi-pause-menu label { display: grid; gap: 4px; font-size: 13px; }
.taxi-lock {
  position: absolute; z-index: 5; inset: 12% 16px auto;
  max-width: 400px; margin: 0 auto;
  background: rgba(18, 22, 32, 0.94);
  border: 1px solid var(--line); border-radius: 16px; padding: 14px;
}
.super-app:not(.view-transport) .driver-idle-split,
.super-app:not(.view-transport) .driver-dest-overlay,
.super-app:not(.view-transport) .fare-sim-overlay,
.super-app:not(.view-transport) .offer-toast,
.super-app:not(.view-transport) .map-pin-choice,
.super-app:not(.view-transport) .gps-arrival-dock {
  display: none !important;
}
.ride-overlay-on-game { position: static !important; }
.taxi-overlay-pause .taxi-hud { display: none !important; }
.map-pin-choice {
  position: absolute; z-index: 810; left: 12px; right: 12px; top: 12px;
  max-width: 340px;
  background: rgba(18, 22, 32, 0.94); backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px;
  box-shadow: 0 12px 40px rgba(124, 58, 237, 0.28);
}
.map-pin-choice[hidden] { display: none !important; }
.map-pin-choice p { margin: 0 0 8px; font-size: 13px; color: var(--text); }
.map-pin-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.offer-toast {
  position: absolute; z-index: 800; left: 12px; right: 12px; bottom: 48px;
  background: rgba(18, 22, 32, 0.92); backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-radius: 14px; padding: 12px;
  box-shadow: 0 12px 40px rgba(124, 58, 237, 0.28);
}
.offer-toast[hidden] { display: none !important; }
.offer-toast h4 { margin: 0 0 6px; color: var(--offer); }
.offer-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 8px; }
.driver-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.driver-quick #btnDriverConfig { grid-column: 1 / -1; }
.logistics-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menu-extras-passageiro {
  display: grid;
  gap: 6px;
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
}
.menu-extras-passageiro label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  cursor: pointer;
}
.menu-extras-passageiro span,
.menu-extras-passageiro .extras-resumo-total {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}
.menu-extras-passageiro select {
  width: 100%;
  min-height: 40px;
}
.city-fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px 10px; margin: 8px 0; }
.city-fieldset legend { color: var(--cyan); font-size: 12px; font-weight: 700; }
.fare-summary {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; margin: 10px 0;
}
.fare-summary h3 { margin: 0 0 6px; color: var(--offer); font-size: 0.95rem; }
.fare-summary ul { margin: 0; padding-left: 18px; font-size: 13px; }
.fare-summary li { margin: 3px 0; }
.fare-total { font-weight: 800; color: var(--accent); margin: 8px 0 4px; font-size: 1.05rem; }
.board-pay-note {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.12);
  color: #fcd34d;
  font-size: 13px;
  font-weight: 650;
}
.board-pay-note.held {
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(14, 116, 144, 0.22);
  color: #7dd3fc;
}
.board-pay-note[hidden], .escrow-alert[hidden] { display: none !important; }
.escrow-alert {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.35);
  color: #fecaca;
  font-size: 13px;
}
.pay-later-row { margin: 8px 0 4px; }
#payLaterRow[hidden] { display: none !important; }
.loyalty-info {
  margin: 6px 0 4px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(6, 17, 28, 0.55);
  max-width: 100%;
}
.loyalty-info-title {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 800;
  color: var(--cyan);
  letter-spacing: 0.01em;
}
.loyalty-info p {
  margin: 1px 0;
  font-size: 11px;
  line-height: 1.3;
}
.loyalty-deduct {
  color: #bbf7d0;
  font-weight: 700;
  font-size: 11px;
}
.loyalty-deduct[hidden],
.loyalty-use-btn[hidden] { display: none !important; }
.loyalty-use-btn {
  width: auto;
  margin-top: 4px;
  margin-bottom: 0;
  padding: 6px 10px;
  min-height: 32px;
  font-size: 12px;
}
.loyalty-use-btn.active {
  border-color: var(--accent);
  color: #bbf7d0;
}
.tag-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 4px 0; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 8px; margin: 0 0 10px; }
.bloco-container { margin: 6px 0 12px; }
.tags-container { display: flex; flex-wrap: wrap; gap: 8px; min-height: 28px; margin: 8px 0; }
.tag-bloqueio {
  display: inline-flex; align-items: center; gap: 6px;
  background: #06111c; border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; padding: 4px 8px 4px 10px; font-size: 12px;
}
.btn-remover {
  background: transparent; border: 0; color: #94a3b8; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 2px;
}
.input-add-wrapper { margin: 4px 0 0; }
#input-novo-bloqueio { width: 100%; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #06111c; border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; padding: 4px 8px 4px 10px; font-size: 12px;
}
.tag-chip button {
  background: transparent; border: 0; color: #94a3b8; cursor: pointer; font-size: 14px; line-height: 1;
}
.ride-history { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.ride-history h3 { margin: 0 0 8px; color: var(--cyan); font-size: 0.95rem; }
.history-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-bottom: 8px; font-size: 13px; }
.history-card ul { margin: 6px 0 0; padding-left: 18px; }
.wait-panel { margin-top: 8px; padding: 8px; border-radius: 10px; border: 1px dashed var(--line); }
.wait-meter { margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.45); color: #F59E0B; font-weight: 700; }
.wait-meter.live { animation: waitPulse 1.6s ease-in-out infinite; }
.wait-meter.waived { background: rgba(34, 197, 94, 0.12); border-color: #22c55e; color: #86efac; }
.wait-meter.grace { background: rgba(56, 189, 248, 0.12); border-color: #38bdf8; color: #7dd3fc; }
.board-pin-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.board-pin-row input { width: 4.5rem; letter-spacing: 0.25em; text-align: center; font-weight: 700; }
.boarding-charge { margin: 8px 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); }
.gps-arrival-dock {
  position: relative;
  z-index: 650;
  margin: 0 8px 8px;
  background: #061a2b;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px 10px 8px;
}
.gps-arrival-dock summary { cursor: pointer; font-weight: 700; color: var(--cyan); padding: 8px 0; font-size: 13px; }
.gps-arrival-mini { height: 120px; border-radius: 10px; margin: 6px 0; background: #041018; }
body.has-gps-dock .super-app { padding-bottom: 0; }
.wait-debt-banner { margin: 8px 0; padding: 10px; border-radius: 10px; border: 1px solid #ef4444; background: rgba(127, 29, 29, 0.35); color: #fecaca; }
.wait-debt-banner p { margin: 0 0 8px; }
@keyframes waitPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }
#btnRide:disabled, .cta:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.3); }
.bag-check { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; color: var(--text); font-size: 13px; cursor: pointer; }
.driver-settings select { width: 100%; background: #06111c; border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 10px; }
#driverSettings:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  max-height: none;
  overflow: visible;
  position: relative;
  z-index: 2;
}
.role-chip {
  font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  background: rgba(245, 158, 11, 0.2); color: #F59E0B; white-space: nowrap;
  display: none;
}
html[data-ibr-profile="passenger"] .topbar #roleChip,
html[data-ibr-profile="driver"] .topbar #roleChip {
  display: inline-flex;
}
.assist-log { height: min(32vh, 220px); min-height: 120px; overflow: auto; background: #05060a; padding: 10px; border-radius: 8px; font-size: 13px; white-space: pre-wrap; margin: 8px 0; }
.assist-status { min-height: 1.2em; margin: 0 0 6px; }
.assist-status.is-busy { color: #f87171; }
#btnAssistSend[disabled] { opacity: 0.55; }
.factory-dock { margin: 0; padding: 8px 12px; font-size: 11px; color: #94a3b8; text-align: center; }
.factory-dock a { color: #38bdf8; }
.super-app.role-passenger .factory-dock { display: none !important; }
#driverSettings[hidden] { display: none !important; }
html[data-ibr-profile="passenger"] #btnModeDriver,
html[data-ibr-profile="passenger"] #driverMode,
html[data-ibr-profile="passenger"] #factoryDock,
html[data-ibr-profile="passenger"] .mode-tabs { display: none !important; }
html[data-ibr-profile="driver"] #btnModePassenger,
html[data-ibr-profile="driver"] #passengerMode,
html[data-ibr-profile="driver"] #factoryDock,
html[data-ibr-profile="driver"] .mode-tabs { display: none !important; }

.mode-btn, .cta-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.mode-btn img, .cta-ghost img, .nav-btn img, .role-chip img {
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
  pointer-events: none;
  image-rendering: auto;
}
.mode-btn img, .cta-ghost img {
  width: 22px;
  height: 16px;
}
.nav-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.nav-btn img {
  width: clamp(22px, 7vw, 36px);
  height: clamp(16px, 5vw, 26px);
}
.role-chip { align-items: center; gap: 6px; }
html[data-ibr-profile="passenger"] .topbar #roleChip,
html[data-ibr-profile="driver"] .topbar #roleChip { align-items: center; gap: 6px; }
.role-chip img { width: 22px; height: 16px; }
.normas-modal-card { max-width: 560px; }
.normas-accept-body { font-size: 13px; max-height: min(28vh, 220px); overflow: auto; margin: 8px 0; }
.normas-accept-body h2 { font-size: 14px; color: #60a5fa; margin: 12px 0 6px; }
.normas-pending, .normas-banner { color: #F59E0B; }

.ibrx-ve-fab {
  display: none;
  position: fixed; z-index: 9300; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  border: 1px solid rgba(245, 158, 11, 0.55);
  background: rgba(18, 22, 32, 0.92); color: #F59E0B;
  border-radius: 999px; padding: 10px 14px; font-weight: 800; font-size: 13px; cursor: pointer;
  box-shadow: 0 12px 36px rgba(9, 10, 15, 0.45);
}
html.ibrx-ve-ready .ibrx-ve-fab { display: inline-flex; }
.ibrx-ve-toggle, .ibrx-ve-reset, .ibrx-ve-apply, .ibrx-ve-undo, .ibrx-ve-collapse {
  border: 1px solid rgba(96, 165, 250, 0.35);
  background: rgba(10, 34, 54, 0.85); color: #e8f4ff;
  border-radius: 10px; padding: 8px 10px; cursor: pointer; font-weight: 700; font-size: 12px;
}
.ibrx-ve-toggle { width: 100%; margin: 6px 0 10px; }
.ibrx-ve-toggle.active { border-color: #F59E0B; color: #F59E0B; }
.ibrx-ve-reset { border-color: rgba(245, 158, 11, 0.4); color: #fde68a; }
.ibrx-ve-panel {
  display: none;
  position: fixed; z-index: 9201; top: 0; right: 0;
  width: min(360px, 100%); height: 100dvh; max-height: 100dvh; overflow: auto;
  background: rgba(18, 22, 32, 0.94); backdrop-filter: blur(20px);
  border-left: 1px solid rgba(124, 58, 237, 0.45);
  padding: 14px 14px 88px;
  box-shadow: -16px 0 48px rgba(9, 10, 15, 0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}
html.ibrx-ve-ready .ibrx-ve-panel { display: block; }
html.ibrx-ve-ready .ibrx-ve-panel.ibrx-ve-collapsed { display: none; }
.ibrx-ve-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ibrx-ve-panel h3 { margin: 0; color: #F59E0B; font-size: 15px; }
.ibrx-ve-note { font-size: 11px; color: #94a3b8; margin: 8px 0; }
.ibrx-ve-path { font-size: 10px; color: #94a3b8; word-break: break-all; margin: 0 0 8px; }
.ibrx-ve-panel label { margin: 6px 0 3px; display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.ibrx-ve-badge { color: #F59E0B; font-variant-numeric: tabular-nums; }
.ibrx-ve-pair { display: grid; grid-template-columns: 1fr 72px; gap: 8px; align-items: center; }
.ibrx-ve-panel input, .ibrx-ve-panel select {
  width: 100%; background: #06111c; border: 1px solid rgba(124, 58, 237, 0.32);
  color: #e8eef8; border-radius: 10px; padding: 8px; box-sizing: border-box;
}
.ibrx-ve-panel input[type="range"] { padding: 0; height: 32px; }
.ibrx-ve-panel input[type="color"] { height: 36px; padding: 2px; }
.ibrx-ve-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.ibrx-ve-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
.ibrx-ve-msg { font-size: 11px; color: #7dd3fc; min-height: 1.2em; }
html.ibrx-ve-on [data-ve-hover] { outline: 1px dashed rgba(96, 165, 250, 0.95); outline-offset: 2px; }
html.ibrx-ve-on [data-ve-selected] { outline: 2px solid #F59E0B; outline-offset: 2px; }
@media (max-width: 767px) {
  .ibrx-ve-panel {
    top: auto; right: 0; left: 0; width: 100%; height: min(72dvh, 560px);
    border-left: 0; border-top: 1px solid rgba(124, 58, 237, 0.45);
    border-radius: 16px 16px 0 0;
  }
}

.app-account-slot {
  display: flex; align-items: center; gap: 6px; margin-left: auto;
  flex: 0 1 auto; min-width: 0;
}
.app-account-btn { width: auto; padding: 6px 10px; margin: 0; font-size: 12px; }
html.app-account-on .app-account-btn { display: none; }
html:not(.app-account-on) #appAccountChip { display: none !important; }
.app-login-gate {
  position: fixed; inset: 0; z-index: 9800;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: #090A0Fcc;
}
.app-login-gate[hidden] { display: none !important; }
.app-login-card {
  width: min(400px, 94vw);
  background: rgba(18, 22, 32, 0.94);
  border: 1px solid rgba(124, 58, 237, 0.4);
  border-radius: 16px; padding: 22px 20px;
  box-shadow: 0 16px 48px rgba(9, 10, 15, 0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(18px);
}
.app-login-card h1 { margin: 0 0 8px; color: #F59E0B; font-size: 1.2rem; }
.app-login-card input { width: 100%; background: #06111c; border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 12px; }
.cta-ghost.is-stub, .cta-ghost:disabled {
  opacity: 0.45; cursor: not-allowed; margin-top: 8px;
}
html.app-locked .ibrx-ve-fab, html.app-locked .ibrx-ve-panel { display: none !important; }
.profile-photo-row { display: flex; gap: 12px; align-items: flex-start; }
.profile-photo-preview {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  background: #12344c; border: 1px solid var(--line); flex: 0 0 auto;
}
.fluid-list { display: grid; gap: 8px; margin: 8px 0; }
.fluid-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #06111c; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
  font-size: 13px;
  min-height: 44px;
  min-width: 0;
}
.fluid-item button { width: auto; padding: 6px 10px; margin: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.wc-pane {
  background: #f4f7fb;
  color: #1a2332;
  border-radius: 16px;
  padding: 10px 12px 16px;
}
#pane-whatschat.overlay-pane {
  background: #f4f7fb;
  color: #1a2332;
}
#pane-whatschat.overlay-pane input,
#pane-whatschat.overlay-pane select,
#pane-whatschat.overlay-pane textarea {
  background: #fff;
  color: #1a2332;
  border: 1px solid #d7dee8;
}
#pane-whatschat.overlay-pane h2,
#pane-whatschat.overlay-pane h3 { color: #1a2332; }
#pane-whatschat .cards article.wc-card {
  background: #fff;
  border: 1px solid #d7dee8;
  color: #1a2332;
}
.wc-pane h2, .wc-pane h3 { color: #1a2332; margin: 0 0 8px; }
.wc-pane .muted, .wc-pane label { color: #5b6577; }
.wc-pane a { color: #0369a1; }
.wc-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.wc-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wc-blurb { line-height: 1.45; font-size: 13px; }
.wc-idcard { margin: 0 0 12px; }
.wc-idline { font-size: 15px; word-break: break-all; margin: 4px 0 8px; color: #1a2332; }
.wc-qr { display: block; width: 128px; height: 128px; border: 1px solid #d7dee8; border-radius: 8px; background: #fff; }
.wc-add-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.wc-add-row input { flex: 1 1 160px; min-height: 44px; }
.wc-add-row .cta { width: auto; min-height: 44px; }
.wc-conv-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.wc-conv {
  min-height: 44px; text-align: left; cursor: pointer;
  background: #fff; color: #1a2332; border: 1px solid #d7dee8;
  border-radius: 12px; padding: 10px 12px; font-weight: 600;
}
.wc-conv.active { border-color: #10b981; background: #ecfdf5; }
.wc-composer { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin: 8px 0; }
.wc-composer input { flex: 1 1 160px; min-height: 44px; }
.wc-composer .cta { width: auto; min-height: 44px; min-width: 88px; }
.wc-thread-title { font-weight: 700; color: #1a2332; }
.wc-thread {
  display: flex; flex-direction: column; gap: 10px;
  max-height: min(42vh, 360px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 4px 0 12px;
  min-width: 0;
}
.wc-card {
  background: #fff; border: 1px solid #d7dee8; border-radius: 16px;
  padding: 12px 14px; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  color: #1a2332;
}
.wc-card.mine { border-color: #6ee7b7; background: #ecfdf5; }
.wc-card p { margin: 0; }
.wc-card .muted { margin-bottom: 6px; }
.wc-info { margin: 0 0 10px; }
.wc-info ul.wc-meta { margin: 8px 0 0; padding-left: 18px; color: #5b6577; font-size: 13px; line-height: 1.45; }
.wc-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 6px 0; }
.wc-stickers { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.wc-sticker {
  min-width: 44px; min-height: 44px; font-size: 22px; border-radius: 12px;
  border: 1px solid #d7dee8; background: #fff; cursor: pointer;
}
.suporte-ticket-meta {
  font-size: 13px; font-weight: 700; color: var(--muted);
  background: #06111c; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; min-height: 44px;
}
.suporte-ticket-meta.on { color: var(--accent); border-color: rgba(16, 185, 129, 0.45); }
.suporte-resume-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.suporte-resume-row input { flex: 1 1 140px; min-height: 44px; }
.suporte-resume-row .cta-ghost { width: auto; min-height: 44px; min-width: 44px; padding: 10px 14px; }
.suporte-ticket-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.suporte-ticket-btn {
  min-height: 44px; text-align: left; cursor: pointer;
  background: #0a2236; color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; font-weight: 700;
}
#aegisSuporteLog, #aegisSuporteInput { max-height: min(40vh, 280px); overflow: auto; }
#aegisSuporteSend { min-height: 44px; }

.aegis-atend-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 10px;
}
.aegis-atend-panel-head h2 { margin: 0; flex: 1; min-width: 0; }
.aegis-atend-close {
  flex: 0 0 auto; min-height: 44px; min-width: 72px; width: auto; padding: 10px 14px;
}
.aegis-atend-fab {
  position: relative;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  margin: 0;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: grab;
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #fff; font-size: 22px;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.4);
  touch-action: none; overflow: visible;
  -webkit-user-select: none; user-select: none;
  pointer-events: auto;
  flex: 0 0 44px;
}
.aegis-atend-fab .fab-title {
  position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  font-size: 8px; font-weight: 800; white-space: nowrap; letter-spacing: 0.02em;
  pointer-events: none; text-shadow: 0 1px 4px #000;
}
.aegis-atend-fab .fab-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px; background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 800; line-height: 18px; pointer-events: none;
}
.aegis-atend-fab[aria-expanded="true"] {
  box-shadow: 0 0 22px rgba(16, 185, 129, 0.45);
}
.aegis-atend-fab.is-dragging { cursor: grabbing; position: fixed; z-index: 680; }
#aegisRideNotifPanel.aegis-ride-notif {
  position: fixed;
  inset: auto;
  z-index: 675;
  left: 8px;
  right: 8px;
  top: calc(var(--ibr-topbar) + env(safe-area-inset-top, 0px) + 8px);
  bottom: auto;
  width: auto;
  max-width: min(420px, calc(100vw - 16px));
  margin-left: auto;
  max-height: min(42vh, calc(100dvh - var(--ibr-topbar) - var(--ibr-nav) - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  overflow: auto;
  padding: 12px 14px 14px;
  background: rgba(4, 17, 29, 0.96);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(9, 10, 15, 0.55);
  pointer-events: auto;
}
#aegisRideNotifPanel.aegis-ride-notif[hidden] { display: none !important; }
.aegis-ride-notif-note { margin: 0 0 8px; font-size: 12px; }
.aegis-ride-notif-list { display: flex; flex-direction: column; gap: 6px; }
.aegis-ride-notice {
  min-height: 44px; text-align: left; cursor: pointer;
  background: #0a2236; color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; font-weight: 700;
}
.aegis-ride-notice .muted { font-weight: 500; display: block; margin-top: 4px; }
.aegis-ride-offer-card { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.aegis-ride-offer-card p { margin: 0 0 6px; }
.aegis-ride-offer-actions { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 8px; }
.aegis-ride-offer-actions .cta, .aegis-ride-offer-actions .cta-ghost { min-height: 44px; }
.suporte-ride-pick { margin: 0 0 12px; }

#pane-shop:not([hidden]) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-x: hidden;
  padding-bottom: 12px;
}
.shop-head { flex: 0 0 auto; min-width: 0; }
.shop-head h2 { margin-bottom: 6px; }
.shop-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  height: auto;
  max-height: none;
  overflow: hidden;
}
.shop-panel {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 12px calc(20px + env(safe-area-inset-bottom, 0px));
}
.shop-panel--sponsored {
  border-color: rgba(245, 158, 11, 0.55);
  box-shadow: inset 4px 0 0 #F59E0B;
}
.shop-badge {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #1c1917;
  background: #fbbf24;
}
.shop-list { display: grid; gap: 10px; }
.shop-empty, .shop-card {
  background: #06111c;
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 12px;
}
.shop-empty p { margin: 0 0 8px; }
.shop-empty p:last-child { margin-bottom: 0; }
.shop-switch { margin: 8px 0 10px; flex-wrap: nowrap; }
.shop-switch .chip {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==== [BARRA-MOTORISTA 2026-10-08] Barra Passageiro/Motorista, aviso "Crie sua conta", botoes e imagens ====
   Causa: .mode-tabs-header era grid "1fr 1fr" (minimo = largura do conteudo) numa .topbar sem quebra
   de linha; com "Entrar" + "Criar conta" na mesma linha, o botao Motorista (107 px) ficava fora do ecra
   / por baixo de "Avisos" em 320-412 px. So apresentacao; o formulario de conta continua igual. */
.topbar .mode-tabs-header {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  flex: 0 1 300px;
  min-width: 0;
  max-width: 300px;
  margin: 0 auto;
}
.topbar .app-account-slot { margin-left: 0; }
.topbar .mode-tabs-header .mode-btn {
  min-width: 0;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.topbar .mode-tabs-header .mode-btn img { width: 20px; height: auto; object-fit: contain; }
/* "Criar conta" passa para o aviso acima do mapa; "Entrar" fica (o formulario tem Entrar/Criar conta) */
.topbar #btnAppAccountSignup { display: none; }
/* o botao Voltar tapava o nome IBR-X no layout de telemovel ([PACOTE-SUPERAPP] Voltar menor: 38 -> 32 px) */
html.layout-phone .topbar strong { margin-left: 32px; }
/* [PACOTE-SUPERAPP 2026-10-08] no telemovel Passageiro/Motorista sairam da barra: sem quebra de linha nem --ibr-topbar 96px.
   A quebra fica so para a web estreita (sem layout-phone). */
@media (max-width: 600px) {
  html:not(.layout-phone) .topbar { flex-wrap: wrap; row-gap: 4px; }
  html:not(.layout-phone) .topbar .app-account-slot { margin-left: auto; }
  html:not(.layout-phone) .topbar .mode-tabs-header {
    order: 10;
    flex: 1 0 100%;
    max-width: 360px;
    margin: 0 auto;
  }
  html:not(.layout-phone) .topbar .mode-tabs-header .mode-btn { min-height: 36px; font-size: 12px; }
}

/* Aviso pequeno "Crie sua conta" (criado por transporte.js; some para sempre ao fechar ou ao entrar) */
.ibrx-aviso-conta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
  margin: 6px 8px 0;
  padding: 4px 4px 4px 12px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.12);
  color: var(--text);
  font-size: 13px;
}
.ibrx-aviso-conta-txt { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.ibrx-aviso-conta .ibrx-aviso-conta-abrir { flex: 0 0 auto; width: auto; min-height: 32px; margin: 0; padding: 4px 12px; font-size: 12px; }
.ibrx-aviso-conta-fechar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
html.app-account-on .ibrx-aviso-conta,
.super-app:not(.view-transport) .ibrx-aviso-conta { display: none !important; }

/* "Pedir corrida"/"Ofertas" e cartoes de categoria mais baixos (>= 44 px para toque) */
#passengerMode .pax-ride-tabs .cta,
#passengerMode .pax-ride-tabs .cta-ghost { min-height: 44px; padding: 8px 6px; font-size: 0.95rem; }
.pax-modality,
.drv-modality { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#passengerMode .pax-modality .chip,
#driverMode .drv-modality .chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  padding: 4px 6px;
  font-size: 13px;
  line-height: 1.1;
  white-space: normal;
  text-align: center;
}
.pax-mod-count { display: block; margin-top: 1px; font-size: 11px; font-weight: 600; opacity: 0.85; }

/* Imagens proporcionais e quadrados menores */
.supervisor-bar img { object-fit: contain; }
.chat-drawer .supervisor-bar img { width: 28px; height: 28px; }
#avatar-preview { width: 64px; height: 64px; }
.profile-photo-preview { width: 56px; height: 56px; }
img[src*="/assets/avatar_"],
img[src*="_icon.png"] { object-fit: contain; }
/* ==== fim [BARRA-MOTORISTA 2026-10-08] ==== */

/* ==== [PACOTE-SUPERAPP 2026-10-08] Interface do Super-App (geral; regras so de telemovel em layouts/phone/app-phone.css) ==== */
/* Mapa: isola os z-index do Leaflet (panes 400-700, controlos 1000) para o robo, os paineis e os avisos
   nunca ficarem por tras/cortados pelo mapa. */
.map-stage { isolation: isolate; }
.aegis-atend-fab.is-dragging,
.aegis-atend-fab[style*="left"] { z-index: 1200; }
#aegisRideNotifPanel.aegis-ride-notif { z-index: 1250; }

/* [pacote-superapp 2026-10-08] Ofertas removido a pedido do usuario: o botao/separador "Ofertas" do passageiro
   fica escondido (o codigo do separador continua; a app ainda pode abrir esse painel sozinha). */
#btnPaxTabOfertas { display: none !important; }
#passengerMode .pax-ride-tabs { display: none !important; }

/* "Pedir corrida" (urbana) / "Pedir viagem" (interurbana): 36 px visiveis, ~44 px de toque */
.pax-modality .chip { position: relative; }
#passengerMode .pax-modality .chip,
#ibrxTopo .pax-modality .chip {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 36px;
  height: 36px;
  padding: 0 8px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}
.pax-modality .chip::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.pax-mod-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pax-modality .chip .pax-mod-count { display: inline; flex: 0 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }

/* Ofertas de motoristas na regiao (#paxDriverOffersList; preenchida por IBRX.transporte.renderDriverOffers / evento ibrx:driver-offers) */
.pax-driver-offers { margin: 6px 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(18, 22, 32, 0.6); }
.pax-driver-offers[hidden] { display: none !important; }
.pax-driver-offers-titulo { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.pax-driver-offers-itens { display: grid; gap: 4px; max-height: 132px; overflow-y: auto; }
.pax-driver-offers-vazio { margin: 0; font-size: 12px; }
.pax-driver-offers .pax-driver-oferta { display: block; width: 100%; min-height: 36px; margin: 0; padding: 6px 8px; text-align: left; font-size: 13px; }

/* Aviso "Crie sua conta IBR-X": Entrar (em cima) + Criar conta (em baixo) ao lado do texto, ~40 px cada */
.ibrx-aviso-conta { padding: 6px 4px 6px 12px; }
.ibrx-aviso-conta-txt { white-space: normal; line-height: 1.25; }
.ibrx-aviso-conta-acoes { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.ibrx-aviso-conta .ibrx-aviso-conta-acoes .cta,
.ibrx-aviso-conta .ibrx-aviso-conta-acoes .cta-ghost { width: 112px; min-height: 40px; height: 40px; margin: 0; padding: 0 10px; font-size: 13px; }
.ibrx-aviso-conta-acoes [hidden] { display: none !important; }
.ibrx-aviso-conta-fechar { width: 40px; height: 40px; }

/* Janela Entrar/Criar conta: x de 44 px, rola com o teclado */
.app-login-gate { overflow-y: auto; align-items: safe center; }
.app-login-card { position: relative; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
.app-login-card h1 { padding-right: 40px; }
.app-login-x {
  position: absolute; top: 4px; right: 4px; z-index: 1;
  width: 44px; height: 44px; padding: 0; margin: 0;
  border: 0; border-radius: 12px; background: transparent;
  color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer;
}
.app-login-x:hover, .app-login-x:focus-visible { color: #F59E0B; }

/* Menu do Super-App (folha que abre para cima; aberto pelo botao unico sob o mapa) */
.ibrx-menu { position: fixed; inset: 0; z-index: 1300; display: flex; flex-direction: column; justify-content: flex-end; }
.ibrx-menu[hidden] { display: none !important; }
.ibrx-menu-fundo { position: absolute; inset: 0; background: rgba(9, 10, 15, 0.55); }
.ibrx-menu-folha {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
  width: min(480px, 100%); margin: 0 auto;
  max-height: 70vh; max-height: 70dvh; overflow-y: auto;
  padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 16, 26, 0.98); border-top: 1px solid var(--line);
  border-radius: 16px 16px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
}
.ibrx-menu-item {
  display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; margin: 0;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(18, 22, 32, 0.9);
  color: var(--text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.ibrx-menu-item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ibrx-menu-item.active { color: var(--accent); border-color: rgba(16, 185, 129, 0.6); }
.ibrx-menu-modo, .ibrx-menu-conta { grid-column: 1 / -1; }
.ibrx-menu-item[hidden] { display: none !important; }
.ibrx-btn-menu {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex: 0 0 auto;
  min-width: 64px; height: 44px; margin: 0; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(18, 22, 32, 0.9);
  color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.ibrx-btn-menu svg { width: 16px; height: 16px; flex: none; transition: transform 0.15s; }
.ibrx-btn-menu[aria-expanded="true"] svg { transform: rotate(180deg); }
.ibrx-btn-menu.active { color: var(--accent); border-color: rgba(16, 185, 129, 0.6); }
.nav-btn-txt { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* superchat da corrida: linha fina (~36 px) e so com corrida activa (ou se o codigo o abrir) */
html:not(.ibrx-corrida-ativa) #chatDrawer:not([open]) { display: none; }
#chatDrawer:not([open]) > summary { min-height: 36px; padding: 8px 0; line-height: 20px; box-sizing: border-box; }
/* cartao fixado no ecra superchat durante a corrida */
.ibrx-sc-corrida { display: flex; align-items: center; gap: 10px; margin: 8px 0; border-color: rgba(245, 158, 11, 0.5); }
.ibrx-sc-corrida[hidden] { display: none !important; }
.ibrx-sc-corrida-txt { flex: 1 1 auto; min-width: 0; }
.ibrx-sc-corrida-txt strong { display: block; font-size: 13px; }
.ibrx-sc-corrida-txt p { margin: 2px 0 0; font-size: 12px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ibrx-sc-corrida .cta { flex: 0 0 auto; width: auto; min-height: 40px; margin: 0; padding: 0 14px; }
/* #passengerLive (estado, PIN de embarque, alterar rota, progresso da viagem) vive dentro de #paxTabOfertas.
   Sem o botao Ofertas, com pedido/corrida activo o painel continua visivel mesmo com o separador "Pedir" aberto. */
#passengerMode #paxTabOfertas[hidden]:has(> #passengerLive:not([data-offer-sig="empty"]):not(:empty)) { display: block !important; }
html.ibrx-corrida-ativa #passengerMode #paxTabOfertas[hidden] { display: block !important; }
#passengerMode #paxTabOfertas[hidden] > :not(#passengerLive) { display: none !important; }
/* "Pedir viagem" + contador de corridas em duas linhas dentro dos 36 px (sem cortar a 360 px) */
#passengerMode #btnPaxModInter,
#ibrxTopo #btnPaxModInter { flex-direction: column; gap: 1px; line-height: 1.05; }
#btnPaxModInter .pax-mod-count { font-size: 10px; }
/* ==== fim [PACOTE-SUPERAPP 2026-10-08] ==== */
/* [avisos-toggles 2026-10-08] quadradinhos de tipos de aviso no painel do robô */
.avisos-prefs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 4px; margin: 0 0 8px; }
.avisos-prefs .av-sq { display: flex; align-items: center; gap: 4px; min-width: 0; margin: 0; padding: 3px 5px; border: 1px solid rgba(245, 158, 11, 0.35); border-radius: 6px; font-size: 10.5px; line-height: 1.2; color: #e8eef8; background: rgba(9, 10, 15, 0.5); cursor: pointer; text-align: left; }
.avisos-prefs .av-sq input { width: 13px; height: 13px; margin: 0; flex: 0 0 auto; accent-color: #f59e0b; }
.avisos-prefs .av-sq span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avisos-prefs .av-sq em { font-style: normal; font-size: 8.5px; color: #f59e0b; white-space: nowrap; }
.avisos-prefs .av-sq.is-standby { opacity: 0.55; border-style: dotted; }
.avisos-prefs .av-x { flex: 0 0 auto; margin: 0 0 0 2px; padding: 0 3px; border: 0; background: none; color: #94a3b8; font-size: 12px; line-height: 1; cursor: pointer; }
.avisos-prefs .av-add { justify-content: center; border-style: dashed; color: #f59e0b; }
.avisos-ask { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 11px; }
.avisos-ask input[type="text"] { flex: 1 1 140px; min-width: 0; font-size: 12px; padding: 4px 6px; }
.avisos-ask .cta, .avisos-ask .cta-ghost { width: auto; min-height: 0; font-size: 11px; padding: 3px 8px; }
.avisos-note { grid-column: 1 / -1; margin: 0; font-size: 10.5px; color: #94a3b8; }
@media (max-width: 360px) { .avisos-prefs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* [botoes-jogos 2026-10-08] mini-jogos (Roda, Quiz, Tap) dentro da aba Jogos */
.mini-game { grid-column: 1 / -1; padding: 12px; border: 1px solid rgba(245, 158, 11, 0.45); border-radius: 14px; background: rgba(4, 17, 29, 0.92); }
.mini-game[hidden] { display: none !important; }
.mini-game h3 { margin: 0 0 8px; color: #f59e0b; }
.mini-game .mini-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0 0; }
.mini-game .cta, .mini-game .cta-ghost { width: auto; }
.mini-wheel { width: 96px; height: 96px; margin: 8px auto; border-radius: 50%; border: 4px solid #f59e0b; display: grid; place-items: center; font-size: 26px; font-weight: 700; color: #fbbf24; background: conic-gradient(#14110a 0 25%, #231c0f 0 50%, #14110a 0 75%, #231c0f 0); }
.mini-wheel.is-spin { animation: miniSpin 0.3s linear infinite; }
@keyframes miniSpin { to { transform: rotate(360deg); } }
.mini-quiz-opts { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.mini-tap { display: block; width: min(200px, 70vw); aspect-ratio: 1; margin: 8px auto; border-radius: 50%; font-size: 22px; line-height: 1.2; }
@media (prefers-reduced-motion: reduce) { .mini-wheel.is-spin { animation: none; } }

/* [alinhar-jogos 2026-10-08] botões dos cards da aba Jogos na mesma linha (só acrescenta; não altera regras anteriores) */
#gamePortal.game-portal { align-items: stretch; }
#gamePortal > .game-slot { display: flex; flex-direction: column; min-width: 0; }
#gamePortal > .game-slot > h3 { margin: 0 0 6px; line-height: 1.25; min-height: 2.5em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
#gamePortal > .game-slot > p { margin: 0 0 10px; line-height: 1.35; min-height: 4.05em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
#gamePortal > .game-slot > .cta { margin-top: auto; align-self: stretch; }

/* [zindex-avisos 2026-10-08] painel/balao de avisos (fallback quando nao ha notificacao nativa): sempre acima do
   mapa (Leaflet ate ~1000), do "+ Adicionar parada" (760) e dos outros botoes. Fica no body (hoistAtendEl). */
html body > #aegisRideNotifPanel.aegis-ride-notif { position: fixed; z-index: 10000; }
/* [menu-politicas 2026-10-09] entrada Normas do menu Mais: chip compacto (antes 44px de altura, largura total) */
.more-grid .more-link.more-normas-compact { min-height: 28px; width: auto; justify-self: start; padding: 3px 10px; font-size: 11px; font-weight: 600; border-radius: 999px; }