/* BakedGood consent banner — Party Pal's look.
   The banner is built from the dashboard's own modal pieces (.modal-card,
   .modal-name, .modal-actions, .modal-cta-outline). This file mirrors those
   values, scoped to the banner, so it looks identical on the dashboard and on
   the Next pages (which don't load the dashboard's style.css). Loaded by the
   Next layout and injected into the dashboard by scripts/sync-dashboard.mjs.
   Keep it in step with party-pal/server/dashboard/style.css. */
[data-bakedgood] .modal-card {
  position: relative;
  background: var(--color-card);
  color: var(--color-text);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
  padding: 24px;
  font-size: 14px;
  line-height: 1.5;
  max-height: none;
  animation: bakedgoodCardIn 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
[data-bakedgood] .modal-name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
}
[data-bakedgood] .modal-actions {
  margin-top: 8px; /* + the 16px row gap = the modal's 24px */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 641px) {
  [data-bakedgood] .modal-actions { flex-direction: row; }
}
[data-bakedgood] .modal-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-heading, "Unbounded", "Switzer", sans-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 14px;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
}
[data-bakedgood] .modal-cta-outline {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
[data-bakedgood] .modal-cta-outline:hover {
  background: var(--color-border-soft);
  border-color: var(--color-text-muted);
}
[data-bakedgood] .bakedgood-link {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
[data-bakedgood] .bakedgood-muted { color: var(--color-text-muted); }
[data-bakedgood] :focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }
@keyframes bakedgoodCardIn {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-bakedgood] .modal-card { animation: none; }
}