/* Orientation lock overlay — bloqueia o uso do site em paisagem no mobile.
   Visibilidade 100% controlada por media query (sem JS). */
#simulaked-orientation-lock {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px;
  text-align: center;
  /* Preto translúcido (mesma técnica de #simulaked-global-modal-overlay em
     modal.css, rgba(0,0,0,0.4)) em vez de fundo opaco, para a página por
     trás continuar visível — mais escuro que o modal para manter contraste
     legível com o texto branco sobre conteúdo de página arbitrário. */
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  font-family: var(--montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial);
}

#simulaked-orientation-lock .ol-logo {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 72px;
  height: auto;
}

#simulaked-orientation-lock .ol-icon {
  width: 64px;
  height: 64px;
  animation: ol-rotate-hint 1.6s ease-in-out infinite;
}

#simulaked-orientation-lock h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  /* _headings.css define `h2 { color: var(--black) }` globalmente; sem
     regra própria aqui, isso vence a herança de `color:#fff` do container
     (valores herdados perdem para qualquer regra que bata direto no elemento). */
  color: #fff;
}

#simulaked-orientation-lock p {
  margin: 0;
  max-width: 320px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

@keyframes ol-rotate-hint {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-90deg); }
}

@media (orientation: landscape) and (max-width: 1000px) {
  #simulaked-orientation-lock {
    display: flex;
  }

  html,
  body {
    overflow: hidden !important;
    height: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #simulaked-orientation-lock .ol-icon {
    animation: none !important;
  }
}