/* ajuste maior no mobile, se precisar */
@media (max-width: 768px) {
  .theme-toggle {
    margin-left: 0.5rem;
  }
}

/* Força a cor dos ícones SVG da barra fixa com base no tema */

html.theme-dark body .mobile-footer-controls svg {
  stroke: #888888;
}

body:not(.theme-dark) .mobile-footer-controls svg {
  stroke: #888888;
}

/* ------------------------------------------------------------------
   Header Mobile e Barra Fixa de Controles (usando .header-mobile)
-------------------------------------------------------------------*/
@media (max-width: 1108px) {
  /* 1. Header mobile simplificado */
  .header-mobile {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0.3rem;
    background: var(--header-bg);
    z-index: 1000;
  }

  .header-mobile .mobile-logo img {
    max-height: 17vw; /* ajuste conforme necessidade */
    width: 100px;
  }

  .header-mobile .menu-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #888888;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 2. Espaço para a barra fixa não cobrir o conteúdo */
  body {
    padding-bottom: 56px; /* idêntico à altura da barra fixa */
  }

  /* 3. Barra fixa no rodapé */
  .mobile-footer-controls {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 56px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: var(--header-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
  }

  .mobile-footer-controls button {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Feedback visual para botões da barra fixa */
  .mobile-footer-controls button {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: inherit;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: background 0.2s ease, transform 0.1s ease;
  }

  .mobile-footer-controls button:active {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(0.9);
  }

  /* ─── Botão "ir para o topo" ─────────────────────────────────────── */

  .scroll-top-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: inherit;
    cursor: pointer;
    align-items: center;
    justify-content: center;
  }

  /* mostra quando tiver a classe .visible */
  .scroll-top-toggle.visible {
    display: flex;
  }

  /* mostra só o sol no tema claro, só a lua no tema escuro */
  .theme-toggle .icon-sun-wrapper,
  .theme-toggle .icon-moon-wrapper {
    display: none;
  }

  /* tema claro: sol visível */
  html:not(.theme-dark) body .theme-toggle .icon-sun-wrapper {
    display: flex;
  }

  /* tema escuro: lua visível */
  html.theme-dark body .theme-toggle .icon-moon-wrapper {
    display: flex;
  }
}