/* =========================================================
   CANCELAR PRESENÇA — ônibus animado + motivo
   Toda animação usa só transform/opacity (não trava a tela)
   e é desligada para quem pediu "reduzir movimento".
========================================================= */
.bcx-overlay{
  position: fixed; inset: 0; z-index: 420;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(10, 18, 35, .52); opacity: 0;
  transition: opacity .22s ease;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.bcx-overlay.on{ opacity: 1; }
body.bcx-locked{ overflow: hidden; }

.bcx-box{
  position: relative; width: min(520px, 100%); max-height: 94vh; overflow-y: auto;
  scrollbar-width: none;                 /* esconde a barra; rola por toque/roda do mouse */
  background: #fff; border-radius: 24px 24px 0 0;
  box-shadow: 0 -24px 60px -24px rgba(10, 18, 35, .55);
  transform: translateY(16px) scale(.98); opacity: .6;
  transition: transform .3s cubic-bezier(.2, .9, .25, 1), opacity .25s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
.bcx-box::-webkit-scrollbar{ width: 0; height: 0; display: none; }
.bcx-overlay.on .bcx-box{ transform: none; opacity: 1; }
@media (min-width: 721px){
  .bcx-overlay{ align-items: center; }
  .bcx-box{ border-radius: 24px; }
}

.bcx-x{
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, .22); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.bcx-x svg{ width: 18px; height: 18px; }
.bcx-x:hover{ background: rgba(255, 255, 255, .34); }
.bcx-x:focus-visible{ outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- Palco do ônibus ---------- */
.bcx-stage{
  border-radius: 24px 24px 0 0; overflow: hidden; padding: 0;
  background: linear-gradient(180deg, #3fb2bf 0%, #74cbd2 55%, #bfe9e2 100%);
}
@media (min-width: 721px){ .bcx-stage{ border-radius: 24px 24px 0 0; } }
.bcx-svg{ display: block; width: 100%; height: auto; }

/* ---------- Cenário em movimento (paralaxe) ----------
   A pista corre mais rápido que as árvores, e a cidade fica parada:
   é isso que dá a sensação de que o ônibus está andando de verdade.
   Os passos (60 na pista, 136 nas árvores) são os mesmos do desenho,
   então a volta ao início não tem emenda. */
.bcx-dashes{ animation: bcxDash .92s linear infinite; }
@keyframes bcxDash{ to{ transform: translateX(-60px); } }
.bcx-trees{ animation: bcxTrees 4s linear infinite; }
@keyframes bcxTrees{ to{ transform: translateX(-136px); } }

/* o ônibus entra pela esquerda; depois só balança de leve */
.bcx-bus{ animation: bcxEnter .8s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes bcxEnter{ from{ transform: translateX(-330px); } to{ transform: translateX(0); } }
.bcx-bus-bob{
  transform-box: fill-box; transform-origin: center;
  animation: bcxBob 2.4s ease-in-out .8s infinite;
}
@keyframes bcxBob{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-1.4px); } }

.bcx-wheel{ transform-box: fill-box; transform-origin: center; animation: bcxSpin .5s linear infinite; }
@keyframes bcxSpin{ to{ transform: rotate(360deg); } }

.bcx-lamp{ animation: bcxLamp 1.8s ease-in-out infinite; }
@keyframes bcxLamp{ 0%, 100%{ opacity: 1; } 50%{ opacity: .55; } }

/* carimbo e onda de impacto ficam invisíveis até o cancelamento gravar */
.bcx-stamp{ opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(2.2) rotate(-18deg); }
.bcx-shock{ opacity: 0; transform-box: fill-box; transform-origin: center; }

/* ---------- Depois de confirmar: freia, tinge e carimba ----------
   As variáveis --bcx-* são gravadas pelo JS no instante da freada,
   para a desaceleração começar de onde o cenário estava. */
.bcx-overlay.bcx-done .bcx-dashes{ animation: bcxDashStop .85s cubic-bezier(.17, .84, .3, 1) forwards; }
@keyframes bcxDashStop{
  from{ transform: translateX(var(--bcx-dash-x, 0px)); }
  to{ transform: translateX(calc(var(--bcx-dash-x, 0px) - 24px)); }
}
.bcx-overlay.bcx-done .bcx-trees{ animation: bcxTreeStop .85s cubic-bezier(.17, .84, .3, 1) forwards; }
@keyframes bcxTreeStop{
  from{ transform: translateX(var(--bcx-tree-x, 0px)); }
  to{ transform: translateX(calc(var(--bcx-tree-x, 0px) - 13px)); }
}
.bcx-overlay.bcx-done .bcx-wheel{ animation: bcxSpinStop .85s cubic-bezier(.17, .84, .3, 1) forwards; }
@keyframes bcxSpinStop{
  from{ transform: rotate(var(--bcx-wheel-r, 0deg)); }
  to{ transform: rotate(calc(var(--bcx-wheel-r, 0deg) + 200deg)); }
}
/* o corpo avança um tiquinho e a frente mergulha, como numa freada */
.bcx-overlay.bcx-done .bcx-bus{ animation: bcxNudge .85s cubic-bezier(.17, .84, .3, 1) forwards; }
@keyframes bcxNudge{
  0%{ transform: translateX(0); } 55%{ transform: translateX(8px); } 100%{ transform: translateX(5px); }
}
.bcx-overlay.bcx-done .bcx-bus-bob{ animation: bcxDip .85s cubic-bezier(.3, .9, .3, 1) forwards; }
@keyframes bcxDip{
  0%{ transform: rotate(0); } 35%{ transform: rotate(1.6deg); }
  70%{ transform: rotate(-.5deg); } 100%{ transform: rotate(0); }
}
.bcx-overlay.bcx-done .bcx-lamp{ animation: none; opacity: .3; }
.bcx-overlay.bcx-done .bcx-stamp{ animation: bcxStamp .5s cubic-bezier(.2, 1.3, .4, 1) .45s forwards; }
@keyframes bcxStamp{
  0%{ opacity: 0; transform: scale(2.2) rotate(-18deg); }
  70%{ opacity: 1; transform: scale(.92) rotate(3deg); }
  100%{ opacity: 1; transform: scale(1) rotate(-6deg); }
}
/* Só o CENÁRIO perde a cor e é tingido de vermelho; o ônibus e o X
   ficam com a cor cheia. (Vermelho sobre o ciano do céu daria marrom,
   por isso tira-se a cor antes de tingir.) */
.bcx-overlay.bcx-done .bcx-scene{ filter: saturate(.3); transition: filter .5s ease; }
.bcx-overlay.bcx-done .bcx-shock{ animation: bcxShock .55s ease-out .58s both; }
@keyframes bcxShock{
  0%{ opacity: .75; transform: scale(.92); } 100%{ opacity: 0; transform: scale(1.55); }
}
.bcx-overlay.bcx-done .bcx-stage{ background: linear-gradient(160deg, #5B1F14 0%, #8C2F1C 60%, #B2402A 100%); transition: background .5s ease; }

/* camada vermelha sobre a cena ao confirmar o cancelamento */
.bcx-redwash{ opacity: 0; }
.bcx-overlay.bcx-done .bcx-redwash{ animation: bcxRedWash .5s ease .1s forwards; }
@keyframes bcxRedWash{ to{ opacity: .5; } }

/* ---------- Conteúdo ---------- */
.bcx-body{ padding: 18px 20px 20px; }
.bcx-body h3{ margin: 0 0 4px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: #0F1B33; }
.bcx-sub{ margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--ink-soft, #4A5565); }
.bcx-sub b{ color: #0F1B33; }

.bcx-reasons{ border: 0; margin: 0; padding: 0; }
.bcx-reasons legend{ padding: 0; font-size: 14.5px; font-weight: 800; color: #0F1B33; }
.bcx-req{ font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: #B42318; background: #FDECEA; border-radius: 999px; padding: 2px 8px; margin-left: 6px; }
.bcx-hint{ margin: 4px 0 10px; font-size: 12.5px; color: var(--text-muted, #667085); }

.bcx-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.bcx-chip{
  min-height: 44px; padding: 10px 14px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid #D9E0EA; background: #fff; color: #1C2A44;
  font: inherit; font-size: 14px; font-weight: 600;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .12s ease;
}
.bcx-chip:hover{ border-color: #B9C4D3; background: #F7F9FC; }
.bcx-chip:active{ transform: scale(.97); }
.bcx-chip.on{ border-color: #B42318; background: #FDECEA; color: #8C1D16; font-weight: 700; }
.bcx-chip:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(180, 35, 24, .3); }

.bcx-other{ display: block; margin-top: 12px; font-size: 13px; font-weight: 700; color: #0F1B33; }
/* o "display: block" acima vence o atributo hidden, então é preciso
   dizer explicitamente que escondido é escondido */
.bcx-other[hidden]{ display: none; }
.bcx-other input{
  display: block; width: 100%; margin-top: 6px; min-height: 48px;
  border: 1.5px solid #D9E0EA; border-radius: 12px; padding: 10px 14px;
  font: inherit; font-size: 16px; font-weight: 400;
}
.bcx-other input:focus{ outline: none; border-color: #B42318; box-shadow: 0 0 0 3px rgba(180, 35, 24, .16); }

.bcx-warn{
  margin: 12px 0 0; padding: 10px 12px; border-radius: 12px;
  background: #FDECEA; border: 1px solid #F3C4BD; color: #8C1D16;
  font-size: 13.5px; font-weight: 600;
}

.bcx-actions{ display: flex; gap: 10px; margin-top: 18px; }
.bcx-actions .btn{ flex: 1 1 0; min-height: 50px; }
.bcx-danger{
  background: linear-gradient(180deg, #CC2E20, #A81D12); border: 1px solid #A81D12; color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 6px 14px -6px rgba(168, 29, 18, .6);
}
.bcx-danger:hover:not(:disabled){ background: linear-gradient(180deg, #D8382A, #B52316); }
.bcx-danger:disabled{ opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ---------- Cartão de quem cancelou (visão dos responsáveis) ---------- */
.bus-cancelled-row{
  border-left: 3px solid #E4572E; background: #FEF6F4;
  border-radius: 10px; padding: 10px 12px; margin-top: 8px;
}
.bus-cancelled-row b{ color: #8C1D16; }
.bus-cancelled-why{ display: block; margin-top: 3px; font-size: 12.5px; color: #6B4A42; }

@media (prefers-reduced-motion: reduce){
  .bcx-overlay, .bcx-box, .bcx-dashes, .bcx-trees, .bcx-bus, .bcx-bus-bob,
  .bcx-wheel, .bcx-lamp, .bcx-stamp, .bcx-shock, .bcx-chip{
    animation: none !important; transition: none !important;
  }
  .bcx-overlay.bcx-done .bcx-stamp{ opacity: 1; transform: rotate(-6deg); }
  .bcx-overlay.bcx-done .bcx-redwash{ opacity: .5; }
}