/* Bloco de doações da Terceira Madrugada.
   Isolado neste arquivo para não alterar outras telas do aplicativo. */

/* O espaço entre o título e os valores vem da margem de .doacao-dia-03__opcoes,
   e não de `gap`: a VTurb revela o bloco escrevendo `display: block !important`
   por cima (e deixa a classe --oculta), e com display: block o gap some e o
   título cola nos valores. Medido em 27/09: 0 px no ar, 16 px na prévia. */
.doacao-dia-03 {
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--surface-alt);
}

/* A VTurb revela esta classe quando o vídeo chega ao tempo configurado. */
.doacao-dia-03--oculta {
  display: none;
}

.doacao-dia-03__titulo {
  max-width: 32ch;
  margin: 0 auto;
  color: var(--ink);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}

.doacao-dia-03__opcoes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.doacao-dia-03__botao {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 102px;
  padding: 14px 48px 14px 16px;
  border: 1px solid color-mix(in oklch, var(--accent-strong) 48%, var(--surface-alt));
  border-radius: 16px;
  background: color-mix(in oklch, var(--surface-alt) 62%, var(--accent));
  box-shadow:
    inset 0 1px 0 oklch(0.98 0.02 85 / 0.78),
    0 5px 14px oklch(0.38 0.06 70 / 0.13);
  color: var(--dark-on-accent);
  font-family: 'Manrope', sans-serif;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.doacao-dia-03__botao span,
.doacao-dia-03__botao strong,
.doacao-dia-03__botao small {
  display: block;
}

.doacao-dia-03__botao span {
  margin-bottom: 4px;
  color: oklch(0.4 0.035 62);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.035em;
}

/* 20px porque o preço virou a mensagem inteira do botão. Os 17px antigos
   eram o tamanho de uma linha do meio, entre a descrição e o que acompanha. */
.doacao-dia-03__botao strong {
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.015em;
}

.doacao-dia-03__botao small {
  margin-top: 5px;
  color: oklch(0.42 0.025 62);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.doacao-dia-03__botao--destaque {
  border-color: color-mix(in oklch, var(--accent-strong) 68%, var(--surface-alt));
  background: color-mix(in oklch, var(--surface-alt) 54%, var(--accent));
  box-shadow:
    inset 0 1px 0 oklch(0.98 0.02 85 / 0.82),
    0 7px 17px oklch(0.4 0.08 72 / 0.18);
}

.doacao-dia-03__botao::after {
  content: '›';
  position: absolute;
  top: 50%;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-strong);
  color: var(--on-accent);
  font-size: 25px;
  font-weight: 600;
  line-height: 25px;
  transform: translateY(-50%);
}

.doacao-dia-03__botao:hover {
  background: color-mix(in oklch, var(--surface-alt) 52%, var(--accent));
  box-shadow:
    inset 0 1px 0 oklch(0.98 0.02 85 / 0.82),
    0 7px 18px oklch(0.38 0.06 70 / 0.18);
  transform: translateY(-2px);
}

.doacao-dia-03__botao:active {
  box-shadow: 0 4px 12px oklch(0.18 0.02 45 / 0.14);
  transform: translateY(0) scale(0.985);
}

.doacao-dia-03__botao:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 3px;
}

@media (max-width: 360px) {
  .doacao-dia-03 {
    padding: 18px 14px;
  }

  .doacao-dia-03__titulo {
    font-size: 18px;
  }

  .doacao-dia-03__botao strong {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .doacao-dia-03__botao {
    transition: none;
  }
}