/* Paleta Omni8 */
:root {
  --o8-navy:   #2d3443;
  --o8-gold:   #f0b429;
  --o8-white:  #ffffff;
}

/* ============================
   BOTÃO PRINCIPAL (ACCENT)
   ============================ */

/* Regra bem específica para ganhar de .btn, .btn--primary etc */
.btn.btn--primary.o8-btn.o8-btn--accent,
.o8-card__actions .btn.btn--primary.o8-btn.o8-btn--accent {
  --btn-bg: var(--o8-gold);
  --btn-fg: var(--o8-navy);
  --btn-bd: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  padding: .85rem 1.15rem;
  min-width: 12rem;

  font: 600 0.95rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-decoration: none;
  text-transform: none;
  letter-spacing: .2px;

  color: var(--btn-fg);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--btn-bg) 92%, #fff 8%),
    var(--btn-bg)
  );
  border: 2px solid var(--btn-bd);
  border-radius: 999px;

  /* ⭐ sombra LEVE padrão */
  box-shadow: 0 3px 8px rgba(15, 23, 42, .28) !important;

  cursor: pointer;

  transition:
    color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    transform .06s ease;
}

/* Hover: cores invertidas + sombra mais forte */
.btn.btn--primary.o8-btn.o8-btn--accent:hover,
.o8-card__actions .btn.btn--primary.o8-btn.o8-btn--accent:hover {
  --btn-bg: var(--o8-navy);
  --btn-fg: var(--o8-gold);
  --btn-bd: var(--o8-gold);

  color: var(--btn-fg);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--btn-bg) 92%, #000 8%),
    var(--btn-bg)
  );
  border-color: var(--btn-bd);

  /* ⭐ sombra MAIS FORTE no hover */
  box-shadow: 0 8px 20px rgba(15, 23, 42, .42) !important;
}

/* Active: efeito “apertado”, sombra intermediária */
.btn.btn--primary.o8-btn.o8-btn--accent:active,
.o8-card__actions .btn.btn--primary.o8-btn.o8-btn--accent:active {
  transform: translateY(1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .35) !important;
}

/* Focus visível (teclado) */
.btn.btn--primary.o8-btn.o8-btn--accent:focus-visible,
.o8-card__actions .btn.btn--primary.o8-btn.o8-btn--accent:focus-visible {
  outline: none;
  box-shadow:
    0 8px 20px rgba(15, 23, 42, .42) !important,
    0 0 0 3px var(--o8-white),
    0 0 0 6px var(--o8-gold);
}

/* Desabilitado */
.btn.btn--primary.o8-btn.o8-btn--accent[disabled],
.btn.btn--primary.o8-btn.o8-btn--accent.disabled,
.btn.btn--primary.o8-btn.o8-btn--accent[aria-disabled="true"],
.o8-card__actions .btn.btn--primary.o8-btn.o8-btn--accent[disabled],
.o8-card__actions .btn.btn--primary.o8-btn.o8-btn--accent.disabled,
.o8-card__actions .btn.btn--primary.o8-btn.o8-btn--accent[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none !important;
}

/* Links usados como botão */
a.btn.btn--primary.o8-btn.o8-btn--accent,
a.btn.btn--primary.o8-btn.o8-btn--accent:hover,
a.btn.btn--primary.o8-btn.o8-btn--accent:focus {
  text-decoration: none;
}

/* Menos animação se o usuário preferir */
@media (prefers-reduced-motion: reduce) {
  .btn.btn--primary.o8-btn.o8-btn--accent,
  .o8-card__actions .btn.btn--primary.o8-btn.o8-btn--accent {
    transition: none;
  }
}

/* ============================
   LAYOUT NO CARD
   ============================ */

.o8-card__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  align-items: center;
  margin-top: .75rem;
}

/* Lado a lado em telas maiores */
.o8-card__actions .btn.btn--primary.o8-btn.o8-btn--accent {
  width: auto !important;
  padding: .6rem 1.2rem;
  white-space: nowrap;
}

/* Empilha no mobile */
@media (max-width: 480px) {
  .o8-card__actions {
    flex-direction: column;
    gap: .5rem;
  }
  .o8-card__actions .btn.btn--primary.o8-btn.o8-btn--accent {
    width: 100% !important;
  }
}

/* Espaço extra no corpo do card para os botões */
.o8-card .o8-card__body {
  padding-bottom: 1rem;
}