/* CONFUT: menu do celular dos eventos (Nordeste, Sudamericana, USA e Euro).
   Os quatro headers têm a mesma estrutura com prefixos diferentes (ne, suda, usa, euro);
   este arquivo, carregado por último, iguala o painel: ícone que vira X, itens de 56px,
   seta única para submenus, botão de compra com largura total e sem os flutuantes por cima. */
:root {
  --emn-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 991.98px) {
  .ne-header__toggle-box,
  .suda-header__toggle-box,
  .usa-header__toggle-box,
  .euro-header__toggle-box {
    position: relative !important;
    display: block !important;
    width: 22px !important;
    height: 16px !important;
  }

  html body .ne-header__toggle-box .ne-header__toggle-bar,
  html body .suda-header__toggle-box .suda-header__toggle-bar,
  html body .usa-header__toggle-box .usa-header__toggle-bar,
  html body .euro-header__toggle-box .euro-header__toggle-bar {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 2px !important;
    transform-origin: 50% 50% !important;
    transition:
      transform 0.38s var(--emn-ease),
      opacity 0.26s ease,
      top 0.38s var(--emn-ease) !important;
  }

  html body .ne-header__toggle-box .ne-header__toggle-bar:nth-child(1),
  html body .suda-header__toggle-box .suda-header__toggle-bar:nth-child(1),
  html body .usa-header__toggle-box .usa-header__toggle-bar:nth-child(1),
  html body .euro-header__toggle-box .euro-header__toggle-bar:nth-child(1) {
    top: 0 !important;
  }

  html body .ne-header__toggle-box .ne-header__toggle-bar:nth-child(2),
  html body .suda-header__toggle-box .suda-header__toggle-bar:nth-child(2),
  html body .usa-header__toggle-box .usa-header__toggle-bar:nth-child(2),
  html body .euro-header__toggle-box .euro-header__toggle-bar:nth-child(2) {
    top: 7px !important;
  }

  html body .ne-header__toggle-box .ne-header__toggle-bar:nth-child(3),
  html body .suda-header__toggle-box .suda-header__toggle-bar:nth-child(3),
  html body .usa-header__toggle-box .usa-header__toggle-bar:nth-child(3),
  html body .euro-header__toggle-box .euro-header__toggle-bar:nth-child(3) {
    top: 14px !important;
  }

  html body.ne-nav--open .ne-header__toggle-box .ne-header__toggle-bar:nth-child(1),
  html body.suda-nav--open .suda-header__toggle-box .suda-header__toggle-bar:nth-child(1),
  html body.usa-nav--open .usa-header__toggle-box .usa-header__toggle-bar:nth-child(1),
  html body.euro-nav--open .euro-header__toggle-box .euro-header__toggle-bar:nth-child(1) {
    top: 7px !important;
    transform: rotate(45deg) !important;
  }

  html body.ne-nav--open .ne-header__toggle-box .ne-header__toggle-bar:nth-child(2),
  html body.suda-nav--open .suda-header__toggle-box .suda-header__toggle-bar:nth-child(2),
  html body.usa-nav--open .usa-header__toggle-box .usa-header__toggle-bar:nth-child(2),
  html body.euro-nav--open .euro-header__toggle-box .euro-header__toggle-bar:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }

  html body.ne-nav--open .ne-header__toggle-box .ne-header__toggle-bar:nth-child(3),
  html body.suda-nav--open .suda-header__toggle-box .suda-header__toggle-bar:nth-child(3),
  html body.usa-nav--open .usa-header__toggle-box .usa-header__toggle-bar:nth-child(3),
  html body.euro-nav--open .euro-header__toggle-box .euro-header__toggle-bar:nth-child(3) {
    top: 7px !important;
    transform: rotate(-45deg) !important;
  }


  /* Painel: mesma margem dos dois lados, sem o rótulo "Menu" e a folga em cima. */

  .ne-header__nav-label,
  .suda-header__nav-label,
  .usa-header__nav-label,
  .euro-header__nav-label {
    display: none !important;
  }

  html body .ne-header__nav-panel,
  html body .suda-header__nav-panel,
  html body .usa-header__nav-panel,
  html body .euro-header__nav-panel {
    padding: 8px 20px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body .ne-header__nav-panel > #mainmenu,
  html body .suda-header__nav-panel > #mainmenu,
  html body .usa-header__nav-panel > #mainmenu,
  html body .euro-header__nav-panel > #mainmenu,
  html body .ne-header__nav-panel > #mainmenu#mainmenu,
  html body .suda-header__nav-panel > #mainmenu#mainmenu,
  html body .usa-header__nav-panel > #mainmenu#mainmenu,
  html body .euro-header__nav-panel > #mainmenu#mainmenu {
    position: relative !important;
    top: auto !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }


  /* Itens: linha de 56px, texto maior, separador discreto e tudo alinhado na mesma margem. */

  html body .ne-header__nav-panel #mainmenu > li,
  html body .suda-header__nav-panel #mainmenu > li,
  html body .usa-header__nav-panel #mainmenu > li,
  html body .euro-header__nav-panel #mainmenu > li {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  html body .ne-header__nav-panel #mainmenu > li > .ne-header__menu-link,
  html body .suda-header__nav-panel #mainmenu > li > .suda-header__menu-link,
  html body .usa-header__nav-panel #mainmenu > li > .usa-header__menu-link,
  html body .euro-header__nav-panel #mainmenu > li > .euro-header__menu-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 52px 0 0 !important;
    font-size: 1.0625rem !important;
    line-height: 1.25 !important;
    text-align: left !important;
    background: none !important;
    border: 0 !important;
  }


  /* Seta única para submenu e troca de evento: à direita, área de 44px. */

  html body .ne-header__nav-panel #mainmenu > li > span,
  html body .suda-header__nav-panel #mainmenu > li > span,
  html body .usa-header__nav-panel #mainmenu > li > span,
  html body .euro-header__nav-panel #mainmenu > li > span {
    position: absolute !important;
    top: 6px !important;
    right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  html body .ne-header__nav-panel #mainmenu > li > span::after,
  html body .suda-header__nav-panel #mainmenu > li > span::after,
  html body .usa-header__nav-panel #mainmenu > li > span::after,
  html body .euro-header__nav-panel #mainmenu > li > span::after {
    display: none !important;
  }

  html body .ne-header__nav-panel #mainmenu > li > span::before,
  html body .ne-header__nav-panel .event-menu-switcher__trigger::after,
  html body .suda-header__nav-panel #mainmenu > li > span::before,
  html body .suda-header__nav-panel .event-menu-switcher__trigger::after,
  html body .usa-header__nav-panel #mainmenu > li > span::before,
  html body .usa-header__nav-panel .event-menu-switcher__trigger::after,
  html body .euro-header__nav-panel #mainmenu > li > span::before,
  html body .euro-header__nav-panel .event-menu-switcher__trigger::after {
    content: "" !important;
    display: block !important;
    width: 9px !important;
    height: 9px !important;
    margin-top: -4px !important;
    border: 0 !important;
    border-right: 2px solid rgba(255, 255, 255, 0.8) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.8) !important;
    background: none !important;
    border-radius: 0 !important;
    transform: rotate(45deg) !important;
    transition: transform 0.3s var(--emn-ease) !important;
  }

  html body .ne-header__nav-panel #mainmenu > li > span.active::before,
  html body .ne-header__nav-panel .event-menu-switcher.is-open .event-menu-switcher__trigger::after,
  html body .suda-header__nav-panel #mainmenu > li > span.active::before,
  html body .suda-header__nav-panel .event-menu-switcher.is-open .event-menu-switcher__trigger::after,
  html body .usa-header__nav-panel #mainmenu > li > span.active::before,
  html body .usa-header__nav-panel .event-menu-switcher.is-open .event-menu-switcher__trigger::after,
  html body .euro-header__nav-panel #mainmenu > li > span.active::before,
  html body .euro-header__nav-panel .event-menu-switcher.is-open .event-menu-switcher__trigger::after {
    margin-top: 4px !important;
    transform: rotate(-135deg) !important;
  }

  html body .ne-header__nav-panel .event-menu-switcher__trigger,
  html body .suda-header__nav-panel .event-menu-switcher__trigger,
  html body .usa-header__nav-panel .event-menu-switcher__trigger,
  html body .euro-header__nav-panel .event-menu-switcher__trigger {
    position: relative !important;
    width: 100% !important;
  }

  html body .ne-header__nav-panel .event-menu-switcher__trigger::after,
  html body .suda-header__nav-panel .event-menu-switcher__trigger::after,
  html body .usa-header__nav-panel .event-menu-switcher__trigger::after,
  html body .euro-header__nav-panel .event-menu-switcher__trigger::after {
    position: absolute !important;
    top: 50% !important;
    right: 17px !important;
    left: auto !important;
    height: 9px !important;
    bottom: auto !important;
    border-radius: 0 !important;
    background: none !important;
    margin-top: -6px !important;
  }

  html body .ne-header__nav-panel .event-menu-switcher.is-open .event-menu-switcher__trigger::after,
  html body .suda-header__nav-panel .event-menu-switcher.is-open .event-menu-switcher__trigger::after,
  html body .usa-header__nav-panel .event-menu-switcher.is-open .event-menu-switcher__trigger::after,
  html body .euro-header__nav-panel .event-menu-switcher.is-open .event-menu-switcher__trigger::after {
    margin-top: -2px !important;
  }

  html body .ne-header__nav-panel .event-menu-switcher__trigger-caret,
  html body .suda-header__nav-panel .event-menu-switcher__trigger-caret,
  html body .usa-header__nav-panel .event-menu-switcher__trigger-caret,
  html body .euro-header__nav-panel .event-menu-switcher__trigger-caret {
    display: none !important;
  }


  /* O seletor de evento é um <button>: sem largura total a seta caía em cima do nome. */
  html body .ne-header__nav-panel #mainmenu > li > .event-menu-switcher__trigger,
  html body .suda-header__nav-panel #mainmenu > li > .event-menu-switcher__trigger,
  html body .usa-header__nav-panel #mainmenu > li > .event-menu-switcher__trigger,
  html body .euro-header__nav-panel #mainmenu > li > .event-menu-switcher__trigger {
    width: 100% !important;
  }

  /* Subitens: recuo único e altura de toque confortável. */

  html body .ne-header__nav-panel .ne-header__submenu-link,
  html body .suda-header__nav-panel .suda-header__submenu-link,
  html body .usa-header__nav-panel .usa-header__submenu-link,
  html body .euro-header__nav-panel .euro-header__submenu-link {
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 0.9375rem !important;
  }


  /* Botão de compra: largura total, 52px, sempre no pé do painel. */

  html body .ne-header__nav-footer,
  html body .suda-header__nav-footer,
  html body .usa-header__nav-footer,
  html body .euro-header__nav-footer {
    margin-top: auto !important;
    padding: 20px 0 0 !important;
    border: 0 !important;
  }

  html body .ne-header__nav-footer .ne-header__nav-cta,
  html body .suda-header__nav-footer .suda-header__nav-cta,
  html body .usa-header__nav-footer .usa-header__nav-cta,
  html body .euro-header__nav-footer .euro-header__nav-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 52px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    font-size: 1rem !important;
    opacity: 1 !important;
  }


  /* USA: o botão do painel herdava só a cor do texto e ficava sem fundo. */
  html body .usa-header__nav-footer .usa-header__nav-cta {
    background: #cf1c31 !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
  }

  html body .ne-header__nav-panel #mainmenu#mainmenu > li > span,
  html body .suda-header__nav-panel #mainmenu#mainmenu > li > span,
  html body .usa-header__nav-panel #mainmenu#mainmenu > li > span,
  html body .euro-header__nav-panel #mainmenu#mainmenu > li > span {
    top: 6px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* Submenu aberto: recuo curto, alinhado com o texto do item. */
  html body .ne-header__nav-panel #mainmenu#mainmenu .ne-header__submenu,
  html body .suda-header__nav-panel #mainmenu#mainmenu .suda-header__submenu,
  html body .usa-header__nav-panel #mainmenu#mainmenu .usa-header__submenu,
  html body .euro-header__nav-panel #mainmenu#mainmenu .euro-header__submenu {
    margin: 0 0 8px !important;
    padding: 0 0 0 16px !important;
    border: 0 !important;
  }

  /* Euro: Programação tem só dois itens e fica sempre aberta, então não há seta. */
  html body .euro-header__nav-panel #mainmenu#mainmenu > li.euro-header__menu-item--dropdown > span {
    display: none !important;
  }

  html body .ne-header__nav-panel #mainmenu#mainmenu .ne-header__submenu > li,
  html body .suda-header__nav-panel #mainmenu#mainmenu .suda-header__submenu > li,
  html body .usa-header__nav-panel #mainmenu#mainmenu .usa-header__submenu > li,
  html body .euro-header__nav-panel #mainmenu#mainmenu .euro-header__submenu > li {
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .ne-header__nav-panel #mainmenu#mainmenu .ne-header__submenu-link,
  html body .suda-header__nav-panel #mainmenu#mainmenu .suda-header__submenu-link,
  html body .usa-header__nav-panel #mainmenu#mainmenu .usa-header__submenu-link,
  html body .euro-header__nav-panel #mainmenu#mainmenu .euro-header__submenu-link {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }

  /* Com o menu aberto, WhatsApp, idioma e voltar ao topo saem da frente do botão de compra. */

  html body.ne-nav--open :is(.wa-float, .a11y-trigger, #confut-back-to-top, .float-text),
  html body.suda-nav--open :is(.wa-float, .a11y-trigger, #confut-back-to-top, .float-text),
  html body.usa-nav--open :is(.wa-float, .a11y-trigger, #confut-back-to-top, .float-text),
  html body.euro-nav--open :is(.wa-float, .a11y-trigger, #confut-back-to-top, .float-text) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .ne-header__toggle-box .ne-header__toggle-bar,
  html body .suda-header__toggle-box .suda-header__toggle-bar,
  html body .usa-header__toggle-box .usa-header__toggle-bar,
  html body .euro-header__toggle-box .euro-header__toggle-bar,
  html body .ne-header__nav-panel #mainmenu > li > span::before,
  html body .suda-header__nav-panel #mainmenu > li > span::before,
  html body .usa-header__nav-panel #mainmenu > li > span::before,
  html body .euro-header__nav-panel #mainmenu > li > span::before,
  html body .ne-header__nav-panel .event-menu-switcher__trigger::after,
  html body .suda-header__nav-panel .event-menu-switcher__trigger::after,
  html body .usa-header__nav-panel .event-menu-switcher__trigger::after,
  html body .euro-header__nav-panel .event-menu-switcher__trigger::after {
    transition: none !important;
  }
}