/* JF Mobilidade - /pedir */
/* Convertido de inline → arquivo externo */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:'Outfit',system-ui,-apple-system,sans-serif;background:#0a0b0e;color:#f0f1f4;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:#5b9aff;text-decoration:none}

/* Acessibilidade: skip-link */
.skip-link:focus{top:16px}

/* Foco visível apenas em navegação por teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{outline:3px solid #4f8cff;outline-offset:3px;border-radius:4px}

/* ═══════════════════════════════════════════════
   LAYOUT: Mapa fullscreen + painel lateral
   ═══════════════════════════════════════════════ */
#fullmap{position:fixed;inset:0;z-index:0}
#fullmap .leaflet-container{background:#0a0b0e}

/* Painel principal */
.ride-panel{
  position:fixed;top:0;right:0;bottom:0;width:420px;z-index:10;
  background:rgba(13,14,18,.92);backdrop-filter:blur(24px) saturate(1.6);
  border-left:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;
  box-shadow:-8px 0 40px rgba(0,0,0,.5);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
@media(max-width:520px){
  .ride-panel{width:100%;border-left:none;border-top-left-radius:24px;border-top-right-radius:24px;
    top:auto;bottom:0;max-height:85vh;box-shadow:0 -8px 40px rgba(0,0,0,.6)}
}

/* Header do painel */
.panel-header{
  padding:20px 24px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;gap:12px;
  flex-shrink:0;
}
.panel-header .brand-icon{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,#4f8cff 0%,#2563eb 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(79,140,255,.35);
}
.panel-header .brand-icon svg{width:22px;height:22px;fill:#fff}
.panel-header .brand-text h1{font-size:17px;font-weight:700;letter-spacing:-.3px;line-height:1.2}
.panel-header .brand-text span{font-size:12px;color:#7a8194;font-weight:500}
.panel-header .auth-btn{
  margin-left:auto;padding:7px 14px;border-radius:8px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  color:#c0c6d2;font-size:13px;font-weight:600;cursor:pointer;
  transition:all .15s;
}
.panel-header .auth-btn:hover{background:rgba(255,255,255,.1);color:#fff}

/* Conteúdo rolável */
.panel-body{flex:1;overflow-y:auto;padding:20px 24px 32px}
.panel-body::-webkit-scrollbar{width:4px}
.panel-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}

/* Título da seção */
.section-title{font-size:22px;font-weight:800;letter-spacing:-.4px;margin-bottom:20px;
  background:linear-gradient(135deg,#fff 30%,#7a8194);-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* Campo de entrada com ícone */
.input-group{position:relative;margin-bottom:14px}
.input-group .icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;display:flex;align-items:center;justify-content:center;
  z-index:2;pointer-events:none;
}
.input-group .icon svg{width:16px;height:16px}
.input-group .icon.pickup svg{fill:#34d399}
.input-group .icon.dest svg{fill:#f97066}
.input-group input{
  width:100%;padding:14px 14px 14px 44px;font-size:14.5px;font-weight:500;
  border-radius:12px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);color:#fff;outline:none;
  font-family:'Outfit',sans-serif;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.input-group input::placeholder{color:#555b6e}
.input-group input:focus{
  border-color:rgba(79,140,255,.5);background:rgba(79,140,255,.06);
  box-shadow:0 0 0 3px rgba(79,140,255,.12);
}

/* Linha vertical conectando os dois campos */
.route-connector{
  position:absolute;left:34px;top:48px;width:2px;height:16px;
  background:linear-gradient(to bottom,#34d399,#f97066);border-radius:1px;
  z-index:1;
}
.route-fields{position:relative}

/* Autocomplete */
.ac{
  position:absolute;left:0;right:0;top:100%;z-index:1001;
  background:rgba(22,24,30,.97);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.08);border-radius:12px;
  margin-top:6px;overflow:hidden;max-height:220px;overflow-y:auto;
  display:none;box-shadow:0 12px 36px rgba(0,0,0,.5);
}
.ac.show{display:block}
.ac div{
  padding:12px 14px 12px 44px;font-size:13.5px;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.04);color:#c0c6d2;
  position:relative;transition:background .12s;
}
.ac div::before{
  content:'';position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.15);
}
.ac div:last-child{border-bottom:0}
.ac div:hover{background:rgba(79,140,255,.1);color:#fff}
.ac div:hover::before{border-color:rgba(79,140,255,.5)}

/* Mini mapa no painel */
.mini-map{
  height:160px;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.06);margin:4px 0 16px;
  position:relative;
}
.mini-map #map{height:100%;width:100%}

/* Quote */
.quote-card{
  background:linear-gradient(135deg,rgba(79,140,255,.12) 0%,rgba(79,140,255,.04) 100%);
  border:1px solid rgba(79,140,255,.2);border-radius:14px;
  padding:16px 18px;margin:0 0 16px;display:none;
  animation:fadeUp .3s ease;
}
.quote-card.show{display:block}
.quote-card .fare{font-size:28px;font-weight:800;letter-spacing:-.5px;
  background:linear-gradient(135deg,#fff,#5b9aff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.quote-card .meta{font-size:13px;color:#7a8194;margin-top:3px;display:flex;align-items:center;gap:8px}
.quote-card .meta svg{width:14px;height:14px;fill:#5b9aff;flex-shrink:0}

/* Pagamento */
.pay-row{display:flex;gap:8px;margin-bottom:16px}
.pay-opt{
  flex:1;padding:12px 10px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  cursor:pointer;text-align:center;font-size:13px;font-weight:600;
  color:#7a8194;transition:all .15s;display:flex;flex-direction:column;
  align-items:center;gap:6px;
}
.pay-opt svg{width:22px;height:22px;fill:#555b6e;transition:fill .15s}
.pay-opt.active{
  background:rgba(79,140,255,.1);border-color:rgba(79,140,255,.35);color:#fff;
}
.pay-opt.active svg{fill:#5b9aff}
.pay-opt:hover{background:rgba(255,255,255,.07)}
select#pay{display:none}

/* Botões */
.btn-quote{
  width:100%;padding:13px;font-size:14px;font-weight:600;
  border-radius:12px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.06);color:#c0c6d2;cursor:pointer;
  font-family:'Outfit',sans-serif;margin-bottom:10px;
  transition:all .15s;display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-quote:hover{background:rgba(255,255,255,.1);color:#fff}
.btn-quote:disabled{opacity:.5;cursor:default}
.btn-quote svg{width:18px;height:18px;fill:currentColor}

.btn-ride{
  width:100%;padding:15px;font-size:15px;font-weight:700;
  border-radius:14px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#4f8cff 0%,#2563eb 100%);
  color:#fff;font-family:'Outfit',sans-serif;
  box-shadow:0 6px 20px rgba(79,140,255,.35);
  transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-ride:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(79,140,255,.45)}
.btn-ride:active{transform:translateY(0)}
.btn-ride:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.btn-ride svg{width:20px;height:20px;fill:#fff}

/* Mensagens */
.msg{margin-top:12px;padding:12px 14px;border-radius:12px;font-size:13px;font-weight:500;display:none;animation:fadeUp .3s ease}
.msg.show{display:flex;align-items:flex-start;gap:8px}
.msg.ok{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.2);color:#6ee7b7}
.msg.err{background:rgba(249,112,102,.1);border:1px solid rgba(249,112,102,.2);color:#fca5a1}

/* Spinner */
.spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:4px}
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ═══════════════════════════════════════════════
   MODAL AUTH
   ═══════════════════════════════════════════════ */
.overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px}
.overlay.show{display:flex}
.modal{
  width:100%;max-width:400px;
  background:rgba(18,20,26,.96);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:24px;
  box-shadow:0 24px 80px rgba(0,0,0,.5);animation:fadeUp .3s ease;
}
.modal h3{margin:0 0 4px;font-size:18px;font-weight:700}
.modal p.sub{margin:0 0 18px;color:#7a8194;font-size:13.5px}
.tabs{display:flex;gap:4px;background:rgba(255,255,255,.04);border-radius:10px;padding:4px;margin-bottom:18px}
.tabs button{flex:1;padding:9px;border-radius:8px;background:transparent;color:#7a8194;font-size:14px;font-weight:600;border:none;cursor:pointer;transition:all .15s;font-family:'Outfit',sans-serif}
.tabs button.active{background:linear-gradient(135deg,#4f8cff,#2563eb);color:#fff;box-shadow:0 2px 10px rgba(79,140,255,.3)}
.close{position:absolute;top:16px;right:18px;font-size:22px;color:#555b6e;cursor:pointer;background:none;border:none;line-height:1;transition:color .15s}
.close:hover{color:#fff}
.modal .wrap-rel{position:relative}
.hidden{display:none!important}
.modal .field{position:relative;margin-bottom:12px}
.modal .field label{display:block;font-size:12px;color:#7a8194;margin-bottom:6px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.modal .field input{
  width:100%;padding:13px 14px;font-size:14.5px;font-weight:500;
  border-radius:12px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);color:#fff;outline:none;
  font-family:'Outfit',sans-serif;transition:border-color .2s,box-shadow .2s;
}
.modal .field input:focus{border-color:rgba(79,140,255,.5);box-shadow:0 0 0 3px rgba(79,140,255,.1)}
.modal .btn{
  width:100%;padding:14px;font-size:15px;font-weight:700;
  border-radius:12px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#4f8cff,#2563eb);color:#fff;
  font-family:'Outfit',sans-serif;transition:all .15s;
}
.modal .btn:hover{box-shadow:0 4px 16px rgba(79,140,255,.35)}
.modal .btn:disabled{opacity:.5;cursor:default}
.modal .btn-ghost{background:rgba(255,255,255,.06);color:#c0c6d2;border:1px solid rgba(255,255,255,.08)}
.modal .btn-ghost:hover{background:rgba(255,255,255,.1)}
.modal .row{display:flex;gap:10px}
.modal .row>*{flex:1}
.modal .msg{margin-top:12px;font-size:13px}

/* ═══════════════════════════════════════════════
   CHAT LATERAL
   ═══════════════════════════════════════════════ */
#chatToggle{
  position:fixed;left:16px;bottom:16px;z-index:20;width:52px;height:52px;border-radius:14px;
  background:linear-gradient(135deg,#4f8cff,#2563eb);color:#fff;font-size:22px;
  box-shadow:0 4px 20px rgba(79,140,255,.4);display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;transition:all .2s;
}
#chatToggle:hover{transform:scale(1.06);box-shadow:0 6px 28px rgba(79,140,255,.5)}
#chatToggle svg{width:24px;height:24px;fill:#fff}

#chatPanel{
  position:fixed;top:0;left:0;bottom:0;width:360px;z-index:30;
  background:rgba(13,14,18,.96);backdrop-filter:blur(20px);
  border-right:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;
  box-shadow:8px 0 40px rgba(0,0,0,.4);
  transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
}
#chatPanel.open{transform:translateX(0)}
.chat-head{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:12px}
.chat-head .ch-icon{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,#4f8cff,#2563eb);
  display:flex;align-items:center;justify-content:center;
}
.chat-head .ch-icon svg{width:18px;height:18px;fill:#fff}
.chat-head h3{margin:0;font-size:15px;font-weight:700}
.chat-head .st{font-size:12px;color:#7a8194;font-weight:500}
.chat-head .x{margin-left:auto;width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.06);border:none;cursor:pointer;color:#7a8194;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.chat-head .x:hover{background:rgba(255,255,255,.1);color:#fff}
.chat-msgs{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:10px}
.bub{max-width:85%;padding:11px 14px;border-radius:16px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;animation:fadeUp .2s ease}
.bub.a{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);align-self:flex-start;border-bottom-left-radius:4px;color:#c0c6d2}
.bub.u{background:linear-gradient(135deg,#4f8cff,#2563eb);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.bub.typing{color:#555b6e;font-style:italic}
.chat-in{padding:14px 16px;border-top:1px solid rgba(255,255,255,.06);display:flex;gap:8px}
.chat-in input{flex:1;padding:12px 14px;font-size:14px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#fff;outline:none;font-family:'Outfit',sans-serif;transition:border-color .2s}
.chat-in input:focus{border-color:rgba(79,140,255,.4)}
.chat-in button{width:44px;border:none;border-radius:12px;background:linear-gradient(135deg,#4f8cff,#2563eb);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.chat-in button:hover{box-shadow:0 2px 12px rgba(79,140,255,.3)}
.chat-in button svg{width:18px;height:18px;fill:#fff}

/* ═══════════════════════════════════════════════
   CONTROLES DO MAPA
   ═══════════════════════════════════════════════ */
.map-controls{position:fixed;left:16px;top:16px;z-index:5;display:flex;flex-direction:column;gap:8px}
.map-ctrl-btn{
  width:40px;height:40px;border-radius:10px;
  background:rgba(13,14,18,.85);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.08);
  color:#c0c6d2;font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.map-ctrl-btn:hover{background:rgba(255,255,255,.1);color:#fff}
.map-ctrl-btn svg{width:18px;height:18px;fill:currentColor}

/* ═══════════════════════════════════════════════
   SEÇÃO INFERIOR (Como funciona / Canais)
   ═══════════════════════════════════════════════ */
.info-toggle{
  position:fixed;bottom:16px;right:440px;z-index:5;
  padding:8px 16px;border-radius:10px;
  background:rgba(13,14,18,.85);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.08);color:#7a8194;
  font-size:13px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:6px;
  transition:all .15s;font-family:'Outfit',sans-serif;
}
.info-toggle:hover{background:rgba(255,255,255,.1);color:#fff}
.info-toggle svg{width:14px;height:14px;fill:currentColor}
@media(max-width:520px){.info-toggle{right:16px;bottom:auto;top:16px}}

/* Leaflet overrides */
.leaflet-container{background:#0a0b0e!important}
.leaflet-control-attribution{font-size:10px!important;background:rgba(0,0,0,.5)!important;color:#555!important;border-radius:6px!important}
.leaflet-control-attribution a{color:#5b9aff!important}

/* Cancel ride */
.cancel-section{margin-top:14px;display:none;animation:fadeUp .3s ease}
.cancel-section.show{display:block}
.btn-cancel{
  width:100%;padding:13px;font-size:14px;font-weight:600;
  border-radius:12px;border:1px solid rgba(249,112,102,.25);
  background:rgba(249,112,102,.08);color:#fca5a1;cursor:pointer;
  font-family:'Outfit',sans-serif;transition:all .15s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-cancel:hover{background:rgba(249,112,102,.15);border-color:rgba(249,112,102,.4)}
.btn-cancel:disabled{opacity:.5;cursor:default}
.btn-cancel svg{width:18px;height:18px;fill:currentColor}

/* Cancel reasons modal */
.cancel-overlay{position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px}
.cancel-overlay.show{display:flex}
.cancel-modal{
  width:100%;max-width:400px;
  background:rgba(18,20,26,.97);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:24px;
  box-shadow:0 24px 80px rgba(0,0,0,.5);animation:fadeUp .3s ease;
}
.cancel-modal h3{margin:0 0 6px;font-size:18px;font-weight:700}
.cancel-modal p.sub{margin:0 0 18px;color:#7a8194;font-size:13.5px}
.reason-list{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.reason-item{
  padding:13px 16px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:#c0c6d2;font-size:14px;font-weight:500;cursor:pointer;
  transition:all .15s;text-align:left;font-family:'Outfit',sans-serif;
}
.reason-item:hover{background:rgba(249,112,102,.08);border-color:rgba(249,112,102,.25);color:#fca5a1}
.reason-item.selected{background:rgba(249,112,102,.12);border-color:rgba(249,112,102,.4);color:#f97066}
.btn-confirm-cancel{
  width:100%;padding:14px;font-size:15px;font-weight:700;
  border-radius:12px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;
  font-family:'Outfit',sans-serif;transition:all .15s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-confirm-cancel:hover{box-shadow:0 4px 16px rgba(220,38,38,.35)}
.btn-confirm-cancel:disabled{opacity:.5;cursor:default}
.btn-back-cancel{
  width:100%;padding:12px;font-size:14px;font-weight:600;
  border-radius:12px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);color:#7a8194;cursor:pointer;
  font-family:'Outfit',sans-serif;margin-top:8px;transition:all .15s;
}
.btn-back-cancel:hover{background:rgba(255,255,255,.08);color:#c0c6d2}

/* Breakpoint 768px - tablets e desktops pequenos */
@media(min-width:768px){
  .ride-panel{width:480px}
  .section-title{font-size:clamp(20px, 4vw, 28px)}
  .panel-header .brand-text h1{font-size:clamp(15px, 2vw, 18px)}
}

/* Breakpoint 1024px - desktops */
@media(min-width:1024px){
  .ride-panel{width:520px}
  .section-title{font-size:clamp(22px, 4.5vw, 32px)}
  .panel-header{padding:24px 28px 20px}
  .panel-body{padding:24px 28px 36px}
}