/* Componentes reutilizáveis: botões, cards, badges, formulários, alertas. */

/* --- Botões ------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: 0.875rem 2rem;
  border: 1px solid transparent;
  border-radius: var(--raio-pill);
  background: var(--accent-deep);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.botao:hover {
  background: #45403a;
  color: #fff;
  box-shadow: var(--sombra);
}

.botao:active {
  transform: translateY(1px);
}

.botao--secundario {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.botao--secundario:hover {
  background: var(--ink);
  color: #fff;
}

.botao--claro {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--linha);
}

.botao--claro:hover {
  background: var(--surface-alt);
  color: var(--ink);
}

.botao--bloco {
  display: flex;
  width: 100%;
}

.botao--grande {
  padding: 1.125rem 2.5rem;
  font-size: 1.0625rem;
}

.botao[disabled],
.botao--desabilitado {
  background: var(--linha);
  color: var(--ink-muted);
  border-color: transparent;
  pointer-events: none;
}

/* --- Grade e card de presente ------------------------------------------- */

.grade-presentes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e5);
}

@media (min-width: 481px) {
  .grade-presentes {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 769px) {
  .grade-presentes {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1025px) {
  .grade-presentes {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra);
}

.card__figura {
  position: relative;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  background: var(--surface-alt);
  overflow: hidden;
}

.card__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card--indisponivel .card__figura img {
  filter: grayscale(1);
  opacity: 0.55;
}

.card__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e4);
  flex: 1;
}

.card__categoria {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.card__titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.375rem;
  line-height: 1.2;
}

.card__titulo a {
  color: inherit;
  text-decoration: none;
}

.card__valor {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
}

.card__rodape {
  margin-top: auto;
  padding-top: var(--e3);
}

/* --- Badges ------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding: 0.25rem 0.75rem;
  border-radius: var(--raio-pill);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge--disponivel {
  background: var(--sucesso-bg);
  color: var(--sucesso);
}

.badge--reservado {
  background: var(--aviso-bg);
  color: var(--aviso);
}

.badge--presenteado {
  background: var(--surface-alt);
  color: var(--ink-soft);
}

.badge--flutuante {
  position: absolute;
  top: var(--e3);
  left: var(--e3);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--sombra);
}

/* --- Progresso de cotas ------------------------------------------------- */

.progresso {
  height: 5px;
  border-radius: var(--raio-pill);
  background: var(--surface-alt);
  overflow: hidden;
}

.progresso__barra {
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}

.progresso__texto {
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin-top: var(--e1);
}

/* --- Filtros ------------------------------------------------------------ */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  justify-content: center;
  margin-bottom: var(--e6);
}

.filtro {
  padding: 0.5rem 1.125rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-pill);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}

.filtro:hover {
  border-color: var(--accent-soft);
  color: var(--ink);
}

.filtro[aria-current="true"] {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
}

/* --- Formulários -------------------------------------------------------- */

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--e5);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}

.campo > label,
.campo__rotulo {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo textarea,
.campo select {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(168, 139, 106, 0.16);
}

.campo textarea {
  resize: vertical;
  min-height: 110px;
}

.campo__ajuda {
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.campo__erro {
  font-size: 0.8125rem;
  color: var(--erro);
  font-weight: 500;
}

.campo--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--e3);
}

.campo--checkbox input {
  margin-top: 0.3rem;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent-deep);
  flex-shrink: 0;
}

.campo--checkbox label {
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}

/* Opções de cota em formato de cartão selecionável */
.opcoes {
  display: grid;
  gap: var(--e3);
  list-style: none;
  padding: 0;
}

.opcoes li {
  display: block;
}

.opcoes label {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e4);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.opcoes label:hover {
  border-color: var(--accent-soft);
}

.opcoes input[type="radio"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--accent-deep);
  flex-shrink: 0;
}

.opcoes input[type="radio"]:checked + span,
.opcoes label:has(input:checked) {
  border-color: var(--accent);
  background: var(--surface-alt);
}

/* --- Alertas ------------------------------------------------------------ */

.alertas {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  margin-bottom: var(--e5);
}

.alerta {
  padding: var(--e4);
  border-radius: var(--raio);
  border-left: 3px solid;
  font-size: 0.9375rem;
}

.alerta--sucesso {
  background: var(--sucesso-bg);
  border-color: var(--sucesso);
  color: #1f5a3e;
}

.alerta--aviso {
  background: var(--aviso-bg);
  border-color: var(--aviso);
  color: #7d5613;
}

.alerta--erro {
  background: var(--erro-bg);
  border-color: var(--erro);
  color: #7c2b25;
}

.alerta--info,
.alerta--debug {
  background: var(--surface-alt);
  border-color: var(--accent);
  color: var(--ink);
}

/* --- Caixa de conteúdo -------------------------------------------------- */

.caixa {
  background: var(--surface);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: var(--e5);
}

@media (min-width: 769px) {
  .caixa {
    padding: var(--e6);
  }
}

.caixa--destaque {
  background: var(--surface-alt);
  border-color: var(--accent-soft);
}

.lista-dados {
  display: grid;
  gap: var(--e3);
  margin: 0;
}

.lista-dados div {
  display: flex;
  justify-content: space-between;
  gap: var(--e4);
  padding-bottom: var(--e3);
  border-bottom: 1px dashed var(--linha);
}

.lista-dados div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.lista-dados dt {
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.lista-dados dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

/* --- Mural -------------------------------------------------------------- */

.mural {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e4);
}

@media (min-width: 641px) {
  .mural {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .mural {
    grid-template-columns: repeat(3, 1fr);
  }
}

.recado {
  background: var(--surface);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

.recado__texto {
  font-family: var(--fonte-titulo);
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--ink);
}

.recado__assinatura {
  font-family: var(--fonte-assinatura);
  font-size: 1.375rem;
  color: var(--accent);
}

.recado__presente {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: auto;
}

/* --- Estado vazio ------------------------------------------------------- */

.vazio {
  text-align: center;
  padding: var(--e8) var(--e4);
  color: var(--ink-soft);
}

.vazio__icone {
  font-size: 2.5rem;
  margin-bottom: var(--e3);
  opacity: 0.4;
}

/* --- Carrossel de presentes (uma linha, na página inicial) -------------- */

.carrossel {
  position: relative;
}

.carrossel__trilho {
  display: flex;
  gap: var(--e4);
  list-style: none;
  margin: 0;
  /* O padding vertical dá ar para a sombra do card no hover não ser cortada. */
  padding: var(--e2) 0 var(--e4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* `proximity` em vez de `mandatory`: encaixa o card no fim do gesto sem
     obrigar o dedo a pular um item inteiro num arrasto curto. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-soft) transparent;
}

.carrossel__trilho::-webkit-scrollbar {
  height: 6px;
}

.carrossel__trilho::-webkit-scrollbar-thumb {
  background: var(--accent-soft);
  border-radius: var(--raio-pill);
}

.carrossel__trilho:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--raio);
}

.carrossel__item {
  /* No celular o card seguinte aparece cortado: o convidado vê que há mais. */
  flex: 0 0 clamp(240px, 76vw, 272px);
  scroll-snap-align: start;
  display: flex;
}

.carrossel__item > .card {
  width: 100%;
}

@media (min-width: 769px) {
  .carrossel__item {
    flex-basis: 268px;
  }
}

/* Setas — só aparecem quando há o que rolar e o ponteiro é preciso. */
.carrossel__seta {
  position: absolute;
  top: calc(50% - 1.25rem);
  z-index: 2;
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--linha);
  border-radius: 50%;
  box-shadow: var(--sombra);
  transition: background 0.2s ease, opacity 0.2s ease;
}

.carrossel__seta:hover {
  background: var(--surface-alt);
}

.carrossel__seta[disabled] {
  opacity: 0.35;
  pointer-events: none;
}

.carrossel__seta--antes {
  left: calc(var(--e5) * -1);
}

.carrossel__seta--depois {
  right: calc(var(--e5) * -1);
}

@media (hover: hover) and (min-width: 900px) {
  .carrossel__seta:not([hidden]) {
    display: flex;
  }
}