:root{
  --brand:#0b57d0;
  --brand-dark:#0948ac;
  --bg:#f6f7f9;
  --text:#111;
  --header:#0a0a0a; /* igual ao site */
  --muted:#cfd3da;
  --card:#ffffff;
  --border:#dde3ee;

  /* Melhor leitura global */
  --fs-base:16px;
  --fs-small:0.9rem;
  --fs-sub:0.95rem;
  --fs-title:1.25rem;
}

*{
  box-sizing:border-box;
}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  margin:0;
  font-size:var(--fs-base);
}

.container{
  max-width:980px;
  margin:0 auto;
  padding:16px;
}

/* ========================================
   HEADER – alinhado com o WordPress
======================================== */

/* Container do header (equivalente à .ob-container) */
.site-header .container{
  max-width:1000px;
  margin:0 auto;
  padding:12px 16px;
}

/* Barra do cabeçalho */
.site-header{
  background:#0a0a0a;
  color:#ddd;
  border-bottom:1px solid #151515;
  min-height:72px; /* evita saltos de layout */
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* Marca: logo + texto */
.header-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

/* Logo (funciona com ou sem class="header-logo") */
.header-brand img,
.header-logo{
  height:28px;
  width:auto;
  display:block;
  object-fit:cover;
  border-radius:6px;
}

/* Título ao lado do logo – agora branco no APP */
.header-title{
  font-weight:700;
  color:#ffffff; /* branco no APP */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:0.98rem;
}

@media (min-width:768px){
  .header-title{
    font-size:1.05rem;
  }
}

/* NAV PRINCIPAL */
.main-navigation{
  background:transparent;
  position:relative;
  z-index:50;
}

/* Links do menu no header */
.site-header .main-navigation a{
  color:#fff !important;
}

.site-header .main-navigation a:hover{
  color:#e6f0ff !important;
  background:rgba(255,255,255,.06);
}

/* Estado "ativo" (se algum dia usares current-menu-item) */
.site-header .main-navigation .current-menu-item > a{
  color:#0b57d0 !important;
  border-bottom:2px solid #0b57d0;
}

/* Botão hambúrguer (mobile) */
.main-navigation .menu-toggle{
  display:none;
  background:transparent;
  border:0;
  color:#eee;
  padding:8px;
  border-radius:8px;
  cursor:pointer;
  line-height:0;
}

.main-navigation .menu-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:#e5e9f0;
  border-radius:2px;
  margin:5px 0; /* mais espaço entre as barras para não parecer uma linha */
}

/* Wrapper do menu (lista + botão cookies) */
.ob-nav{
  display:flex;
  align-items:center;
  gap:16px;
}

/* Lista UL do menu */
.ob-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:10px;
}

/* Links individuais do menu */
.ob-nav a{
  display:block;
  padding:8px 10px;
  border-radius:8px;
  text-decoration:none;
}

/* Botão "Definições de cookies" no header */
.ob-cookies-btn{
  display:inline-block;
  background:#1f1f1f;
  border:1px solid #2a2a2a;
  color:#ddd;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  font-size:.95rem;
  line-height:1.2;
  text-decoration:none;
}

.ob-cookies-btn:hover{
  background:#252525;
}

/* ========================================
   RESPONSIVO HEADER (mobile)
======================================== */

@media (max-width:820px){

  .main-navigation .menu-toggle{
    display:inline-flex;
    align-items:center;
  }

  .ob-nav{
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    background:#0f0f0f;
    border:1px solid #1d1d1d;
    padding:10px;
    border-radius:10px;
    position:absolute;
    right:0;
    top:calc(100% + 8px);
    min-width:220px;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
  }

  /* o JS adiciona .open na .main-navigation */
  .main-navigation.open .ob-nav{
    display:flex;
  }

  .ob-nav ul{
    flex-direction:column;
    gap:4px;
    width:100%;
  }

  .ob-nav a{
    width:100%;
  }

  .ob-cookies-btn{
    width:100%;
    text-align:left;
  }
}

/* ========================================
   CARTÕES E BOTÕES
======================================== */

.card{
  background:var(--card);
  border-radius:12px;
  padding:16px;
  margin:14px 0;
  box-shadow:0 2px 4px rgba(0,0,0,.06);
  border:1px solid var(--border);
}

.btn{
  display:inline-block;
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  border:none;
  padding:10px 16px;
  border-radius:10px;
  cursor:pointer;
  font-size:.9rem;
  font-weight:500;
  transition:background .15s ease, transform .1s ease;
}

.btn:hover{
  background:var(--brand-dark);
}

.btn-sec{
  background:#e6f0ff;
  color:var(--brand);
}

.btn-sec:hover{
  background:#d4e3ff;
}

.small{
  font-size:var(--fs-small);
  color:#444;
}

/* ========================================
   LAYOUT DO PLANEADOR
======================================== */

.planner-layout{
  display:grid;
  gap:20px;
  grid-template-columns:1.2fr 1fr;
}

@media(max-width:880px){
  .planner-layout{
    grid-template-columns:1fr;
  }
}

.planner-title{
  font-size:var(--fs-title);
  margin:0 0 6px;
}

.planner-sub{
  font-size:var(--fs-sub);
  color:#555;
  margin:0 0 12px;
}

.planner-sub-steps{
  font-size:1rem;
  font-weight:600;
  margin-top:8px;
}

.campo{
  position:relative;
}

.campo-icone{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  opacity:.65;
}

.input{
  width:100%;
  padding:10px 12px 10px 30px;
  border:1px solid #ccc;
  border-radius:10px;
  background:#f9fafb;
}

.input:focus{
  outline:2px solid #e4edff;
  border-color:var(--brand);
  background:#fff;
}

.row{
  display:grid;
  gap:14px;
}

.cols-2{
  grid-template-columns:1fr 1fr;
}

@media(max-width:720px){
  .cols-2{
    grid-template-columns:1fr;
  }
}

.acoes-form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

/* Sugestões (autocomplete) */
.ob-sugestoes{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  margin-top:4px;
  max-height:260px;
  overflow-y:auto;
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
  box-shadow:0 6px 16px rgba(0,0,0,0.08);
  z-index:9999;
  display:none;
}

.ob-sugestoes button{
  width:100%;
  padding:9px 12px;
  background:#fff;
  border:0;
  text-align:left;
  border-bottom:1px solid #f1f1f1;
}

.ob-sugestoes button:hover{
  background:#eef4ff;
}

/* ========================================
   RESUMO + PASSOS
======================================== */

#resumo-rota{
  padding:12px;
  border-radius:12px;
  border:1px dashed var(--border);
  font-size:1rem;
  background:#f9fafb;
  margin:12px 0;
}

#passos-rota{
  list-style:none;
  padding:0;
  margin:0;
}

.passo{
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
  margin-bottom:10px;
}

.passo-cabecalho{
  display:flex;
  gap:8px;
  align-items:center;
}

.passo-numero{
  color:#6b7280;
  font-size:.8rem;
}

.etiqueta-modo{
  background:#eef2ff;
  padding:3px 10px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:600;
}

.passo-texto{
  margin-left:1.6rem;
  font-size:.95rem;
  line-height:1.5;
}

#link-maps{
  color:var(--brand);
  font-size:.85rem;
  text-decoration:none;
}

#link-maps:hover{
  text-decoration:underline;
}

/* ========================================
   MAPA + ANÚNCIO
======================================== */

#map{
  width:100%;
  height:360px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#e5e5e5;
}

.planner-note{
  font-size:.85rem;
  color:#555;
  margin-top:8px;
}

/* Anúncio placeholder */
.ad-placeholder{
  padding:14px;
  background:#fffbeb;
  border:1px dashed #f4d060;
  border-radius:12px;
  min-height:110px;
  margin-top:14px;
  color:#6b4500;
  font-size:.95rem;
}

/* ========================================
   ALERTAS
======================================== */

#ob-alertas{
  background:#f7f9ff;
  border:1px solid rgba(0,0,0,.06);
  padding:14px;
  border-radius:12px;
  margin-top:18px;
}

#ob-alertas-title{
  font-size:1rem;
  margin:0 0 4px;
}

#ob-alertas-intro{
  font-size:.85rem;
  color:#666;
  margin:0 0 10px;
}

.ob-alertas-loading{
  font-size:.85rem;
  color:#666;
  font-style:italic;
  margin:0;
}

/* ========================================
   FOOTER
======================================== */

footer{
  background:#0a0a0a;
  color:#bbb;
  margin-top:30px;
  padding-top:20px;
}

footer .grid{
  display:grid;
  gap:20px;
  grid-template-columns:2fr 1fr 1fr;
}

@media(max-width:720px){
  footer .grid{
    grid-template-columns:1fr;
  }
}

footer a{
  color:#ddd;
  text-decoration:none;
}

footer a:hover{
  text-decoration:underline;
}

.footer-logo img{
  height:26px;
}

.chip{
  display:inline-block;
  background:#1b1b1b;
  border:1px solid #2a2a2a;
  color:#ddd;
  padding:6px 10px;
  border-radius:999px;
  font-size:.85rem;
  margin-right:6px;
}

.muted{
  color:#888;
  font-size:.9rem;
}

.legal{
  border-top:1px solid #222;
  padding-top:12px;
  margin-top:20px;
  text-align:center;
}

/* ========================================
   OBConsent (mantido)
======================================== */

.ob-consent{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(720px, 100% - 32px);
  background:#111;
  color:#e8eaef;
  border-radius:12px;
  padding:16px;
  border:1px solid #2a2d37;
  z-index:9999;
}

.ob-consent__buttons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* ========================================
   Botão "Instalar app ONDEBUS"
======================================== */

.btn-install-app {
  margin: 10px 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;           /* estilo pílula */
  border: 1px solid rgba(11, 87, 208, 0.2);
  background: linear-gradient(135deg, #0b57d0, #2563eb);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  transition:
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out,
    background 0.15s ease-out,
    opacity 0.15s ease-out;
}

.btn-install-app:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
}

.btn-install-app:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.35);
  opacity: 0.95;
}

.btn-install-app .btn-install-icon {
  font-size: 1.1rem;
}

.btn-install-app .btn-install-text {
  white-space: nowrap;
}

/* Forçar hambúrguer em coluna com mais espaço entre as barras */
.main-navigation .menu-toggle{
  display:flex;                 /* em vez de inline-flex */
  flex-direction:column;        /* barras uma por baixo da outra */
  justify-content:center;
  align-items:center;
  padding:6px 8px;              /* só para ter um “quadradinho” em volta */
}

.main-navigation .menu-toggle span{
  width:22px;
  height:2px;
  background:#e5e9f0;
  border-radius:2px;
  margin:3px 0;                 /* espaço vertical → fica - / - / - */
}

/* ========================================
   Destaque Partida / Chegada (sem mexer no JS)
   - Funciona mesmo que o texto venha do Google/JS
======================================== */

/* 1) Melhorar o “chip” do modo para parecer mais forte */
.etiqueta-modo{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* 2) Destacar o 1º e o último passo (partida/chegada) */
#passos-rota .passo:first-child{
  border-color: rgba(11,87,208,.25);
  background: rgba(11,87,208,.06);
}

#passos-rota .passo:last-child{
  border-color: rgba(16,185,129,.28);
  background: rgba(16,185,129,.07);
}

/* 3) Rótulos automáticos “Partida” e “Chegada” (sem mexer no HTML) */
#passos-rota .passo:first-child .passo-cabecalho::after{
  content: "PARTIDA";
  margin-left:auto;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.06em;
  padding:4px 10px;
  border-radius:999px;
  color:#0b57d0;
  background: rgba(11,87,208,.12);
  border: 1px solid rgba(11,87,208,.20);
}

#passos-rota .passo:last-child .passo-cabecalho::after{
  content: "CHEGADA";
  margin-left:auto;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.06em;
  padding:4px 10px;
  border-radius:999px;
  color:#0f766e;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.22);
}

/* 4) Se o texto tiver “Origem:” / “Destino:” / “Partida” / “Chegada”, sublinhar visualmente */
#passos-rota .passo-texto{
  position:relative;
}

#passos-rota .passo-texto strong{
  font-weight:800;
}

/* opcional: se o teu JS envolver “Origem/Destino” em <strong>, fica logo destacado */

/* ========================================
   Destaque de HORAS (Partida / Chegada)
======================================== */

.ob-time{
  display:inline-block;
  font-weight:800;
  padding:2px 8px;
  border-radius:999px;
  font-size:.85rem;
  line-height:1.6;
  margin:0 2px;
  border:1px solid transparent;
}
.ob-time--dep{
  color:#0b57d0;
  background:rgba(11,87,208,.10);
  border-color:rgba(11,87,208,.18);
}
.ob-time--arr{
  color:#0f766e;
  background:rgba(16,185,129,.10);
  border-color:rgba(16,185,129,.20);
}