/*
  Estilo da página de aviso. Os valores copiam as classes Tailwind da tela
  PaywallScreen do app reservas-cfmoto, para a página ficar igual à original.
*/

/* border-box faz o padding entrar na largura; sem isso a coluna estoura no
   celular. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Margem zero tira o espaço padrão do navegador em volta da tela.
   Fundo quase preto igual ao layout da rota /paywall, para não aparecer faixa
   branca se a tela rolar. Inter vem do Google Fonts; a lista depois dela é a
   mesma de reserva do app (apps/web/lib/fonts.ts). */
body {
  margin: 0;
  background-color: #080808;
  font-family: 'Inter', system-ui, 'Helvetica Neue', Helvetica, Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Tela cheia com o conteúdo no centro (flex min-h-screen items-center
   justify-center). overflow hidden corta o brilho borrado que passa da borda.
   position relative ancora as camadas de fundo absolutas. Padding 48px/24px
   copia "px-6 py-12". */
.tela {
  position: relative;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #18181b;
  padding: 48px 24px;
}

/* Primeira camada: leve escurecimento azulado no centro, igual ao gradiente
   radial do original. inset 0 cobre a tela toda. */
.fundo-radial {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(20, 24, 28, 0.5),
    transparent 46%
  );
}

/* Segunda camada: o brilho ciano atrás do texto. Tamanho 760x420, posição
   (-50%, -44%) e blur 30px vêm direto das classes do original. max-width
   limita o brilho no celular para ele não ficar mais largo que a tela. */
.brilho-ciano {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 760px;
  max-width: 180vw;
  height: 420px;
  transform: translate(-50%, -44%);
  background:
    radial-gradient(
      ellipse 62% 30% at 50% 50%,
      rgba(17, 176, 202, 0.18),
      rgba(10, 28, 36, 0.1) 34%,
      rgba(5, 9, 12, 0.03) 52%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 80% 36% at 50% 50%,
      rgba(15, 132, 154, 0.09),
      transparent 66%
    );
  opacity: 0.9;
  filter: blur(30px);
}

/* Coluna central. position relative põe o conteúdo acima das camadas de
   fundo, que são absolutas e vêm antes no HTML. Largura máxima 420px copia
   "max-w-[420px]". */
.conteudo {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 420px;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Logo com 36px de altura e 32px de espaço embaixo ("mb-8 h-9 w-auto").
   brightness(0) deixa a arte preta e invert(1) vira branco, como no app. */
.logo {
  height: 36px;
  width: auto;
  margin-bottom: 32px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* Aviso no estilo do subtítulo original: 19px e cinza claro #c5c9d1.
   Entrelinha 1.75 (um pouco acima do "leading-relaxed" 1.625 do app) dá mais
   respiro entre as linhas, como o dono pediu. Largura máxima de 380px deixa
   cada linha com umas 40 letras, tamanho confortável de ler. */
.aviso {
  max-width: 380px;
  font-size: 19px;
  line-height: 1.75;
  color: #c5c9d1;
}

/* Cada frase é um parágrafo. margin 0 tira a margem padrão do navegador para
   o espaço entre as frases vir só da regra de baixo. */
.aviso p {
  margin: 0;
}

/* 28px entre os parágrafos: o "enter" entre as frases que o dono pediu.
   Só aplica do segundo parágrafo em diante, para não empurrar o texto para
   longe do logo. */
.aviso p + p {
  margin-top: 28px;
}

/* Data e hora em branco e semi-negrito: destaca o dado mais procurado sem
   mudar a cor do resto do aviso. nowrap mantém "hoje (30/09) às 12h00" numa
   linha só; no celular ela quebrava no meio e a data ficava separada da hora. */
.aviso strong {
  color: #ffffff;
  font-weight: 600;
  white-space: nowrap;
}