/* Menu (esquerda) e conta (direita) do celular — padrão da home nova (azul-marinho + amarelo).
   Carregado depois de site.css e custom.css; só sobrescreve o visual de header .menu-mobile. */
header .menu-mobile {
  --pbm-navy: #0A1A33; --pbm-navy-2: #102748; --pbm-line: rgba(233,239,248,.09);
  --pbm-on: #E9EFF8; --pbm-on-2: #A9BAD1; --pbm-gold: #F5B800; --pbm-blue: #1E6FD9; --pbm-red: #FF7A7A;
}

/* botões da barra do topo */
header .menu-mobile button.btn-menu,
header .menu-mobile button.btn-profile {
  width: 40px; height: 40px; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px; font-size: 18px; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
header .menu-mobile button.btn-menu { left: 10px; }
header .menu-mobile button.btn-profile { right: 10px; }
header .menu-mobile button.btn-menu:active,
header .menu-mobile button.btn-profile:active { background: rgba(255,255,255,.18); }

/* painéis */
header .menu-mobile .box-mobile {
  background: var(--pbm-navy);
  width: min(86vw, 360px); height: 100vh; height: 100dvh;
  top: 0; left: 0; right: auto;
  opacity: 1; visibility: hidden;
  transform: translateX(-105%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, visibility 0s linear .28s;
  overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  font-family: Roboto, "Segoe UI", Arial, sans-serif; text-align: left;
  z-index: 2147482500;
}
header .menu-mobile .box-mobile.open {
  visibility: visible; transform: none;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, visibility 0s;
  box-shadow: 0 0 0 100vmax rgba(5,12,26,.6), 16px 0 40px rgba(0,0,0,.35);
}
header .menu-mobile .box-profile { left: auto; right: 0; transform: translateX(105%); }
header .menu-mobile .box-profile.open { box-shadow: 0 0 0 100vmax rgba(5,12,26,.6), -16px 0 40px rgba(0,0,0,.35); }
@media (prefers-reduced-motion: reduce) { header .menu-mobile .box-mobile { transition: none; } }
html.pbm-lock, html.pbm-lock body { overflow: hidden; }

/* topo do painel */
header .menu-mobile .pbm-head {
  display: flex; align-items: center; gap: 10px; min-height: 68px;
  padding: 14px 64px 14px 20px; border-bottom: 1px solid var(--pbm-line);
  color: #fff; font-weight: 800; font-size: 16px; letter-spacing: .02em;
}
header .menu-mobile .pbm-head img { height: 22px; width: auto; }
header .menu-mobile .pbm-head b { color: var(--pbm-gold); font-weight: 800; }
header .menu-mobile .pbm-head small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pbm-on-2); margin-top: 2px; }
header .menu-mobile button.close {
  top: 14px; left: auto; right: 14px; transform: none;
  width: 40px; height: 40px; border-radius: 12px;
  background: transparent; color: var(--pbm-on-2); border: 1px solid var(--pbm-line);
  font-size: 17px; display: flex; align-items: center; justify-content: center;
}
header .menu-mobile button.close:active { color: #fff; background: rgba(255,255,255,.06); }

/* menu da esquerda */
header .menu-mobile .box-menu > ul { position: static; top: auto; width: 100%; margin: 0; padding: 6px 0 0; }
header .menu-mobile .box-menu > ul > li,
header .menu-mobile .box-menu > ul > li li,
header .menu-mobile .box-menu > ul > li li li { background: transparent; border-bottom: 1px solid var(--pbm-line); }
header .menu-mobile .box-menu li:last-child { border-bottom: 0; }
header .menu-mobile .box-menu > ul > li a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  text-align: left; color: var(--pbm-on); font-size: 15.5px; font-weight: 500; line-height: 1.35;
  padding: 15px 20px; position: relative;
}
header .menu-mobile .box-menu > ul > li > a:active { background: rgba(255,255,255,.05); }
header .menu-mobile .box-menu a span::after,
header .menu-mobile .box-menu a span:after {
  content: "\f107"; font-family: FontAwesome; font-size: 16px; width: auto; height: auto;
  color: var(--pbm-on-2); display: inline-block; transition: transform .2s;
}
header .menu-mobile .box-menu a.open span::after,
header .menu-mobile .box-menu a.open span:after { content: "\f107"; transform: rotate(180deg); color: var(--pbm-gold); }
header .menu-mobile .box-menu a.open { color: #fff; font-weight: 700; }
header .menu-mobile .box-menu .submenu { background: var(--pbm-navy-2); padding: 4px 0; }
header .menu-mobile .box-menu .submenu li { border-bottom: 0 !important; }
header .menu-mobile .box-menu .submenu a { font-size: 14px; font-weight: 400; color: var(--pbm-on-2); padding: 11px 20px 11px 32px; }
header .menu-mobile .box-menu .submenu a:active { color: #fff; }
header .menu-mobile .box-menu a[onclick*="pbAbrirPromo"] { color: var(--pbm-gold); font-weight: 700; }

/* conta da direita */
header .menu-mobile .box-profile ul { position: static; top: auto; left: auto; transform: none; margin: 0; padding: 8px 0 0; }
header .menu-mobile .box-profile li { margin: 0; border-bottom: 1px solid var(--pbm-line); }
header .menu-mobile .box-profile li:last-child { border-bottom: 0; }
header .menu-mobile .box-profile a {
  display: flex; align-items: center; gap: 14px; text-align: left; white-space: normal;
  color: var(--pbm-on); font-size: 15px; font-weight: 500; padding: 14px 20px; line-height: 1.3;
}
header .menu-mobile .box-profile a:active { background: rgba(255,255,255,.05); }
header .menu-mobile .box-profile a .fa { width: 20px; text-align: center; font-size: 16px; color: var(--pbm-on-2); flex: none; }
header .menu-mobile .pbm-user { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--pbm-line); }
header .menu-mobile .pbm-user img,
header .menu-mobile .pbm-user .pbm-ini {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid var(--pbm-gold); background: #E8F1FC;
}
header .menu-mobile .pbm-user .pbm-ini { display: flex; align-items: center; justify-content: center; color: #0B4A8C; font-weight: 800; font-size: 18px; }
header .menu-mobile .pbm-user b { display: block; color: #fff; font-size: 16px; }
header .menu-mobile .pbm-user small { display: block; color: var(--pbm-on-2); font-size: 12.5px; word-break: break-all; }
header .menu-mobile .pbm-badge {
  margin-left: auto; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 11px;
  background: var(--pbm-gold); color: var(--pbm-navy); font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
header .menu-mobile .pbm-chip { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 3px 8px; border-radius: 20px; background: rgba(245,184,0,.15); color: var(--pbm-gold); }
header .menu-mobile .box-profile a.pbm-sair,
header .menu-mobile .box-profile a.pbm-sair .fa { color: var(--pbm-red); }
header .menu-mobile .pbm-cta { display: grid; gap: 10px; padding: 18px 20px; }
header .menu-mobile .box-profile .pbm-cta a { justify-content: center; border-radius: 11px; padding: 13px; font-weight: 700; }
header .menu-mobile .box-profile .pbm-cta a.pbm-gold-btn { background: var(--pbm-gold); color: var(--pbm-navy); }
header .menu-mobile .box-profile .pbm-cta a.pbm-gold-btn .fa { color: var(--pbm-navy); }
header .menu-mobile .box-profile .pbm-cta a.pbm-line-btn { border: 1px solid rgba(233,239,248,.25); }
header .menu-mobile .box-mobile :focus-visible { outline: 3px solid var(--pbm-gold); outline-offset: -3px; }

/* com um painel aberto, WhatsApp e faixa da promoção saem da frente */
html.pbm-lock #pb-wa-float, html.pbm-lock #pn-bar, html.pbm-lock #pb-vbubble { display: none !important; }