/* ==========================================================================
   03 · COMPONENTES
   Peças reutilizadas em várias seções.
   Índice:
     1. Botões (.btn)
     2. Tag de conteúdo pendente (.tag-pending)
     3. Painel claro (.panel)
     4. Campos de formulário (.field)
     5. Checkbox (.checkbox)
     6. Alertas (.alert)
     7. Spinner e skeleton
     8. Bilhete do número da sorte (.lucky)
     9. Badge de status (.badge)
    10. Lista com check (.check-list)
    11. Bloco de resultado (.result)
    12. Mensagem / estado vazio
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BOTÕES
   Variações: --primary (dourado) · --outline (sobre escuro)
              --ink (preto, sobre claro) · --outline-ink (contorno, sobre claro)
   Tamanhos:  --sm · (padrão) · --lg · --block (largura total)
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3rem; /* alvo de toque ≥ 44px */
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm); /* retangular com canto levemente arredondado */
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--dur-base) var(--ease-silk),
    border-color var(--dur-base) var(--ease-silk),
    box-shadow var(--dur-base) var(--ease-silk),
    transform var(--dur-fast) var(--ease-silk);
}

.btn:active {
  transform: scale(0.985);
}

.btn .icon {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--dur-base) var(--ease-silk);
}

.btn:hover .icon {
  transform: translateX(2px);
}

.btn--sm {
  min-height: 2.75rem;
  padding: 0 1.25rem;
  font-size: var(--fs-small);
}

.btn--lg {
  min-height: 3.5rem;
  padding: 0 1.75rem;
  font-size: var(--fs-body);
}

.btn--block {
  width: 100%;
}

.btn--primary {
  background: var(--gold-300);
  color: var(--ink-950);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    0 14px 32px -14px rgb(223 180 90 / 0.7);
}
.btn--primary:hover {
  background: var(--gold-200);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    0 18px 38px -14px rgb(223 180 90 / 0.85);
}

.btn--outline {
  border-color: rgb(246 232 199 / 0.35);
  color: var(--text-on-dark);
}
.btn--outline:hover {
  border-color: rgb(246 232 199 / 0.8);
  background: rgb(246 232 199 / 0.06);
}

.btn--ink {
  background: var(--ink-950);
  color: var(--cream-50);
  box-shadow: 0 12px 30px -14px rgb(11 10 9 / 0.6);
}
.btn--ink:hover {
  background: var(--ink-800);
}

.btn--outline-ink {
  border-color: rgb(21 18 15 / 0.25);
  color: var(--text-on-light);
}
.btn--outline-ink:hover {
  border-color: rgb(21 18 15 / 0.7);
  background: rgb(21 18 15 / 0.04);
}

/* Estado de carregamento: o JS adiciona .is-loading e desabilita o botão */
.btn__loading {
  display: none;
  align-items: center;
  gap: 0.75rem;
}
.btn.is-loading {
  cursor: progress;
  opacity: 0.85;
}
.btn.is-loading .btn__label,
.btn.is-loading .btn__icon {
  display: none;
}
.btn.is-loading .btn__loading {
  display: inline-flex;
}

/* --------------------------------------------------------------------------
   2. TAG DE CONTEÚDO PENDENTE
   Sinaliza informação que depende de validação (regulamento, prêmios, datas).
   --light = versão para fundo claro.
   -------------------------------------------------------------------------- */
.tag-pending {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.625rem;
  border: 1px dashed rgb(237 203 125 / 0.45);
  border-radius: var(--radius-pill);
  color: var(--gold-200);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0; /* sem espaçamento entre letras */
  line-height: 1.6;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.tag-pending::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
}

.tag-pending--light {
  border-color: rgb(127 92 10 / 0.5);
  color: var(--gold-700);
}

/* --------------------------------------------------------------------------
   3. PAINEL CLARO ("papel" sobre fundo escuro)
   -------------------------------------------------------------------------- */
.panel {
  position: relative;
  padding: 1.25rem;
  border-radius: var(--radius-xl);
  background: var(--cream-50);
  color: var(--text-on-light);
  box-shadow:
    0 40px 80px -40px rgb(0 0 0 / 0.8),
    0 0 0 1px rgb(246 232 199 / 0.3);
}


@media (min-width: 26rem) {
  .panel { padding: 1.5rem; }
}
@media (min-width: 40rem) {
  .panel { padding: 2.5rem; }
}
@media (min-width: 64rem) {
  .panel { padding: 3rem; }
}

/* --------------------------------------------------------------------------
   4. CAMPOS DE FORMULÁRIO
   Estrutura: .field > label + .field__control (input + ícone) + erro + ajuda
   Estados (classes do JS): .field--invalid · .field--valid
   -------------------------------------------------------------------------- */
.field__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-on-light);
}

.field__control {
  position: relative;
}

.field__input {
  display: block;
  width: 100%;
  height: 3.5rem; /* 56px: confortável no toque */
  padding: 0 3rem 0 1rem;
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text-on-light);
  font-size: var(--fs-body-lg); /* ≥ 16px evita zoom automático no iOS */
  font-weight: 500;
  outline: none;
  transition:
    border-color var(--dur-fast),
    box-shadow var(--dur-fast),
    background-color var(--dur-fast);
}

.field__input::placeholder {
  color: rgb(77 70 61 / 0.6);
  font-weight: 400;
}

.field__input:hover {
  border-color: rgb(66 59 51 / 0.4);
}

.field__input:focus {
  border-color: var(--ink-950);
  box-shadow: 0 0 0 4px rgb(207 156 0 / 0.18);
}

.field__input:disabled {
  opacity: 0.6;
}

/* Ícone de validado (escondido por padrão) */
.field__icon {
  position: absolute;
  top: 50%;
  right: 1rem;
  translate: 0 -50%;
  color: var(--success-ink);
  opacity: 0;
  transition: opacity var(--dur-fast);
  pointer-events: none;
}

.field--valid .field__input {
  border-color: rgb(31 107 65 / 0.5);
}
.field--valid .field__icon {
  opacity: 1;
}

.field--invalid .field__input {
  border-color: var(--danger-ink);
  background: #fff8f6;
}
.field--invalid .field__input:focus {
  box-shadow: 0 0 0 4px rgb(163 38 27 / 0.14);
}

.field__error {
  margin-top: 0.5rem;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--danger-ink);
}

.field__error:empty {
  display: none;
}

.field__hint {
  margin-top: 0.5rem;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-on-light-muted);
}

.field__hint .tag-pending {
  margin-top: 0.375rem;
}

/* --------------------------------------------------------------------------
   5. CHECKBOX
   O <input> real fica invisível sobre a caixa desenhada (.checkbox__box),
   então continua acessível por teclado e leitores de tela.
   -------------------------------------------------------------------------- */
.checkbox__label {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  min-height: 2.75rem;
  padding-block: 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-on-light-muted);
}

.checkbox__label a {
  font-weight: 600;
  color: var(--text-on-light);
  text-underline-offset: 4px;
}

.checkbox__input {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.125rem 0 0;
  opacity: 0;
}

.checkbox__box {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
  flex-shrink: 0;
  border: 1.5px solid rgb(66 59 51 / 0.45);
  border-radius: 0.375rem;
  background: #fff;
  transition:
    background-color var(--dur-fast),
    border-color var(--dur-fast);
}

.checkbox__box .icon {
  width: 1rem;
  height: 1rem;
  stroke-width: 2.5;
  color: var(--gold-300);
  opacity: 0;
}

.checkbox__input:checked + .checkbox__box {
  border-color: var(--ink-950);
  background: var(--ink-950);
}
.checkbox__input:checked + .checkbox__box .icon {
  opacity: 1;
}
.checkbox__input:focus-visible + .checkbox__box {
  outline: 2px solid var(--gold-700);
  outline-offset: 3px;
}
.checkbox--invalid .checkbox__box {
  border-color: var(--danger-ink);
}
.checkbox .field__error {
  margin-top: 0.25rem;
  padding-left: 2.375rem;
}

.checkbox__muted {
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   6. ALERTAS
   -------------------------------------------------------------------------- */
.alert {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  animation: fade-up 0.5s var(--ease-silk) both;
}

.alert .icon {
  margin-top: 0.125rem;
}

.alert__title {
  font-weight: 600;
}

.alert--warning {
  border: 1px solid rgb(133 84 0 / 0.3);
  background: #fff8ec;
  color: var(--warning-ink);
}

/* --------------------------------------------------------------------------
   7. SPINNER E SKELETON (carregamento)
   -------------------------------------------------------------------------- */
.spinner {
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.skeleton {
  display: grid;
  gap: 1rem;
}

.skeleton__line {
  height: 5rem;
  border-radius: var(--radius-md);
  background: rgb(11 10 9 / 0.06);
  animation: pulse 1.6s ease-in-out infinite;
}

.skeleton__line--tall {
  height: 7rem;
}

/* --------------------------------------------------------------------------
   8. BILHETE DO NÚMERO DA SORTE
   Exibe EXATAMENTE o valor recebido do backend. Nunca gerar no navegador.
   .lucky--cancelled = número cancelado (riscado)
   -------------------------------------------------------------------------- */
.lucky-list {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 40rem) {
  .lucky-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 3 colunas só em telas largas — abaixo disso o bilhete fica apertado */
@media (min-width: 90rem) {
  .lucky-list--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.lucky {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
  background: #fff;
  animation: fade-up 0.5s var(--ease-silk) both;
  animation-delay: var(--delay, 0ms);
}

/* Canhoto lateral com a palavra "Nº sorte" na vertical */
.lucky__stub {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  flex-shrink: 0;
  border-right: 1px dashed rgb(21 18 15 / 0.15);
  background: var(--cream-100);
}

.lucky__stub span {
  rotate: -90deg;
  white-space: nowrap;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--gold-700);
}

.lucky__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 0.75rem 1rem;
}

/* Abre espaço para o selo "Exemplo" quando ele existe */
.lucky:has(.lucky__demo) .lucky__body {
  padding-right: 4.75rem;
}

.lucky__value {
  font-family: var(--font-heading);
  font-size: 1.625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-on-light);
}

.lucky__status {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--success-ink);
}

.lucky--cancelled {
  opacity: 0.7;
}
.lucky--cancelled .lucky__value {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.lucky--cancelled .lucky__status {
  color: var(--danger-ink);
}

/* Selo "Exemplo" — só no modo demonstração */
.lucky__demo {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background: var(--ink-950);
  color: var(--gold-200);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   9. BADGE DE STATUS (sempre ícone + texto, nunca só cor)
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

.badge .icon {
  width: 1rem;
  height: 1rem;
}

.badge--approved {
  border-color: rgb(31 107 65 / 0.25);
  background: rgb(31 107 65 / 0.1);
  color: var(--success-ink);
}
.badge--validating {
  border-color: rgb(43 90 138 / 0.25);
  background: rgb(43 90 138 / 0.1);
  color: var(--info-ink);
}
.badge--cancelled {
  border-color: rgb(163 38 27 / 0.25);
  background: rgb(163 38 27 / 0.1);
  color: var(--danger-ink);
}
.badge--not_eligible {
  border-color: rgb(133 84 0 / 0.25);
  background: rgb(133 84 0 / 0.1);
  color: var(--warning-ink);
}
.badge--duplicate_attempt {
  border-color: rgb(21 18 15 / 0.15);
  background: rgb(21 18 15 / 0.06);
  color: var(--text-on-light-muted);
}

/* --------------------------------------------------------------------------
   10. LISTA COM CHECK
   -------------------------------------------------------------------------- */
.check-list {
  display: grid;
  gap: 0.75rem;
  font-size: 0.9375rem;
}

.check-list li {
  display: flex;
  gap: 0.75rem;
}

.check-list .icon {
  margin-top: 0.125rem;
  color: var(--gold-700);
}

.check-list .tag-pending {
  margin-left: 0.25rem;
}

/* --------------------------------------------------------------------------
   11. BLOCO DE RESULTADO (cadastro aprovado / em validação / recusado)
   -------------------------------------------------------------------------- */
.result {
  animation: fade-up 0.5s var(--ease-silk) both;
}

.result__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gold-700);
}
.result__eyebrow .icon {
  width: 1.125rem;
  height: 1.125rem;
}
.result__eyebrow--success { color: var(--success-ink); }
.result__eyebrow--info    { color: var(--info-ink); }
.result__eyebrow--danger  { color: var(--danger-ink); }

.result__title {
  margin-top: 1rem;
  font-family: var(--font-heading); /* sem serifa, igual ao título do formulário */
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
  outline: none;
}

.result__summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1.5rem;
  border-block: 1px solid var(--line-light);
  font-size: var(--fs-small);
}

.result__summary > div {
  padding: 0.875rem 0.75rem 0.875rem 0;
}
.result__summary > div + div {
  padding-left: 0.75rem;
  border-left: 1px solid var(--line-light);
}
.result__summary dt {
  color: var(--text-on-light-muted);
}
.result__summary dd {
  margin-top: 0.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.result .lucky-list {
  margin-top: 1.5rem;
}

.result__text {
  max-width: 32rem;
  margin-top: 1rem;
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  color: var(--text-on-light-muted);
}

.result__text strong {
  font-weight: 600;
  color: var(--text-on-light);
}

.result__text--icon {
  display: flex;
  gap: 0.625rem;
  margin-top: 1.5rem;
  font-size: 0.9375rem;
}
.result__text--icon .icon {
  margin-top: 0.125rem;
  color: var(--gold-700);
}

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

.result__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
}

@media (min-width: 40rem) {
  .result__actions {
    flex-direction: row;
  }
}

/* --------------------------------------------------------------------------
   12. MENSAGEM E ESTADO VAZIO
   -------------------------------------------------------------------------- */
.empty-state,
.message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 16rem;
  padding: 2rem;
  border-radius: var(--radius-lg);
}

.empty-state {
  border: 1px dashed rgb(21 18 15 / 0.2);
}

.message {
  border: 1px solid rgb(21 18 15 / 0.15);
  background: rgb(255 255 255 / 0.6);
  animation: fade-up 0.5s var(--ease-silk) both;
}

.message--warning {
  border-color: rgb(133 84 0 / 0.3);
  background: #fff8ec;
}

.empty-state__icon,
.message__icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--gold-700);
}
.message--warning .message__icon {
  color: var(--warning-ink);
}

.empty-state__title,
.message__title {
  margin-top: 1.25rem;
  font-family: var(--font-heading);
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.empty-state__text,
.message__text {
  max-width: 28rem;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--text-on-light-muted);
}

.message__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  margin-top: 1.25rem;
  font-weight: 600;
  text-underline-offset: 4px;
}

@media (min-width: 40rem) {
  .empty-state,
  .message {
    padding: 2.5rem;
  }
}