/* ==========================================================================
   09 · CONSULTA DOS NÚMEROS (fundo claro) · consulta só pelo CPF
   1. Layout (painel com foto + formulário)  2. Painel visual
   3. Formulário  4. Resultado encontrado  5. Pedido
   ========================================================================== */

/* Fundo creme com luz dourada suave à esquerda, atrás da foto */
.lookup {
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(45% 55% at 20% 40%, rgb(237 203 125 / 0.3), transparent 70%),
    var(--cream-100);
}

/* ---------- 1. Layout ---------- */
.lookup__layout {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 64rem) {
  .lookup__layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2rem;
  }
  .lookup__visual {
    grid-column: 1 / span 6;
  }
  .lookup__panel {
    grid-column: 8 / span 5;
  }
}

/* ---------- 2. Painel visual ----------
   Estrutura:
     .lookup__visual  → caixa de referência (sem recorte: o balão pode vazar)
       .lookup__frame → moldura arredondada com fundo, foto, lettering e assinatura
       .lookup__dream → balão do sonho, maior e vazando o canto superior direito
       .lookup__dream-dot → bolinhas do pensamento
       .lookup__ticket → bilhete ilustrativo, vazando o canto inferior esquerdo
   Tudo é posicionado em % da caixa, então acompanha qualquer tamanho de tela.
   ---------------------------------------------------------------------- */
.lookup__visual {
  position: relative;
  aspect-ratio: 4 / 5; /* retrato: mantém o rosto inteiro */
  width: 100%;
  max-width: 34rem;   /* no tablet não fica gigante */
  margin: 2.5rem auto 1.5rem; /* respiro para o balão e o bilhete que vazam */
}

@media (min-width: 64rem) {
  .lookup__visual {
    max-width: none;
    margin: 2rem 0;
  }
}

/* Moldura com fundo escuro e a luz quente do KV */
.lookup__frame {
  position: absolute;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(70% 60% at 65% 55%, rgb(146 85 24 / 0.55), transparent 70%),
    var(--ink-950);
  box-shadow: 0 40px 80px -40px rgb(11 10 9 / 0.55);
}

/* Foto oficial recortada (fundo transparente), ancorada na base.
   Ocupa 88% da altura para deixar o topo livre para o lettering. */
.lookup__photo {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 88%;
  object-fit: cover;
  object-position: 50% 100%;
  z-index: -1;
}

/* Lettering oficial no canto superior esquerdo */
.lookup__lettering {
  position: absolute;
  top: 6%;
  left: 6%;
  width: 34%;
}

/* Assinatura do protagonista sobre a manta escura (centro-base, ao lado do bilhete) */
.lookup__signature {
  position: absolute;
  left: 46%;
  bottom: 4%;
  width: 30%;
  opacity: 0.95;
  rotate: -6deg;
}

/* ---- Balão do sonho ----
   Vaza o canto superior direito da caixa e fica longe do rosto.
   Tamanho: width. Posição: top/right (valores negativos = para fora da caixa). */
.lookup__dream {
  position: absolute;
  z-index: 2;
  top: -11%;     /* celular: bem alto, longe do rosto */
  right: -3%;
  width: 46%;
  animation: dream-float 6s ease-in-out infinite;
}

@media (min-width: 40rem) {
  .lookup__dream {
    top: -7%;
    right: -4%;
    width: 56%;
  }
}

@media (min-width: 64rem) {
  .lookup__dream {
    top: -9%;
    right: -16%;   /* desktop: sai bem para fora, sobre o espaço entre as colunas */
    width: 62%;
  }
}

/* A nuvem em si: recorte orgânico com borda dourada e brilho suave */
.lookup__dream-cloud {
  aspect-ratio: 1.15 / 1;
  overflow: hidden;
  border-radius: 58% 42% 52% 48% / 52% 48% 52% 48%;
  border: 3px solid var(--gold-300);
  background: var(--cream-50);
  box-shadow:
    0 0 0 8px rgb(237 203 125 / 0.16),
    0 0 60px -10px rgb(237 203 125 / 0.55),
    0 30px 60px -24px rgb(0 0 0 / 0.65);
}

.lookup__dream-cloud img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  scale: 1.08;
}

/* Etiqueta dourada presa na base do balão
   (celular: alinhada à direita para não passar da tela; tablet+: centralizada) */
.lookup__dream-tag {
  position: absolute;
  right: 0;
  bottom: -0.875rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--gold-300);
  box-shadow: 0 12px 24px -10px rgb(0 0 0 / 0.5);
  color: var(--ink-950);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (min-width: 40rem) {
  .lookup__dream-tag {
    right: auto;
    left: 50%;
    translate: -50% 0;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
  }
}

@media (min-width: 64rem) {
  .lookup__dream-tag {
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
  }
}

/* Bolinhas do pensamento: saem do topo da cabeça (≈ 46%, 21%) em direção ao balão */
.lookup__dream-dot {
  position: absolute;
  z-index: 2;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--gold-300);
  background: var(--cream-50);
  animation: dream-float 6s ease-in-out infinite;
}

.lookup__dream-dot--1 { top: 12%;   left: 51%; width: 4.2%; animation-delay: 0.2s; }
.lookup__dream-dot--2 { top: 16.5%; left: 48.5%; width: 3%; animation-delay: 0.4s; }
.lookup__dream-dot--3 { top: 20.5%; left: 46.5%; width: 2%; animation-delay: 0.6s; }

/* Flutuação bem sutil (desligada em prefers-reduced-motion pelo 02-base.css) */
@keyframes dream-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

/* A etiqueta já usa translate para centralizar: a flutuação vem do balão pai */
.lookup__dream .lookup__dream-tag {
  animation: none;
}

/* ---- Bilhete ilustrativo: vaza o canto inferior esquerdo ---- */
.lookup__ticket {
  position: absolute;
  z-index: 2;
  left: -4%;
  bottom: 12%;
  display: flex;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--cream-50);
  box-shadow: 0 24px 50px -20px rgb(0 0 0 / 0.7);
  rotate: -4deg;
  /* celular: menor, para não cobrir a assinatura */
  scale: 0.8;
  transform-origin: 0 100%;
}

@media (min-width: 40rem) {
  .lookup__ticket {
    scale: 1;
  }
}

@media (min-width: 64rem) {
  .lookup__ticket {
    left: -8%;
  }
}

.lookup__ticket-stub {
  display: grid;
  place-items: center;
  width: 3rem;
  border-right: 1px dashed rgb(21 18 15 / 0.2);
  background: var(--gold-300);
  color: var(--ink-950);
}

.lookup__ticket-stub .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.lookup__ticket-body {
  display: flex;
  flex-direction: column;
  padding: 0.625rem 1rem 0.625rem 0.875rem;
}

.lookup__ticket-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--gold-700);
}

.lookup__ticket-value {
  margin-top: 0.125rem;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text-on-light);
}

.lookup__ticket-status {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--success-ink);
}

@media (min-width: 64rem) {
  .lookup__ticket-body {
    padding: 0.75rem 1.25rem 0.75rem 1rem;
  }
  .lookup__ticket-value {
    font-size: 2rem;
  }
}

/* ---------- 3. Formulário ---------- */
.lookup__form {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.lookup__form .btn {
  margin-top: 0.25rem;
}

.lookup__privacy {
  display: flex;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-on-light-muted);
}

.lookup__privacy .icon {
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
  color: var(--gold-700);
}

/* Resultados: largura total, abaixo do painel. Somem enquanto vazios. */
.lookup__results {
  margin-top: 4rem;
  outline: none;
}

.lookup__results:empty {
  display: none;
}

/* ---------- 4. Resultado encontrado ---------- */
.participation {
  animation: fade-up 0.5s var(--ease-silk) both;
}

.participation__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--ink-950);
}

.participation__hello {
  font-size: 0.9375rem;
  color: var(--text-on-light-muted);
}

.participation__total {
  margin-top: 0.25rem;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  font-weight: 600;
  font-variant-numeric: lining-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.participation__email {
  font-size: var(--fs-small);
  color: var(--text-on-light-muted);
}

/* ---------- 5. Pedido ---------- */
.order {
  padding-block: 1.75rem;
  border-bottom: 1px solid rgb(21 18 15 / 0.1);
}

.order:last-child {
  border-bottom: 0;
}

.order__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.order__title {
  font-size: var(--fs-body-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.order__meta {
  margin-top: 0.125rem;
  font-size: var(--fs-small);
  color: var(--text-on-light-muted);
}

.order__reason {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--text-on-light-muted);
}

.order__reason:empty {
  display: none;
}

.order .lucky-list {
  margin-top: 1.25rem;
}

.order .lucky-list:empty {
  display: none;
}