/* App Store + Google Play badges in marketing footers. Markup is generated by
   scripts/generate-app-badges.mjs. The badges follow the stores' own look
   (black, thin grey border, white mark) so they read the same on the light
   and dark footers. Logical properties keep RTL. Rules are scoped under
   .app-badges to outrank footer rules like `.join-footer ul`. */
.app-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-block: 24px;
}
.app-badges .app-badges-label {
  margin: 0;
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}
.app-badges .app-badges-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.app-badges .app-badges-list li { margin: 0; padding: 0; }
.app-badges .app-badges-list li::before { content: none; }
.app-badges .app-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  padding-block: 6px;
  padding-inline: 12px 16px;
  border: 1px solid #a6a6a6;
  border-radius: 9px;
  background: #000;
  color: #fff;
  text-decoration: none;
  opacity: 1;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.app-badges .app-badge:hover { border-color: #fff; transform: translateY(-1px); }
.app-badges .app-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.app-badges .app-badge svg { flex: 0 0 auto; inline-size: 22px; block-size: 22px; fill: currentColor; }
.app-badges .app-badge-text { display: flex; flex-direction: column; line-height: 1.1; text-align: start; }
.app-badges .app-badge-small { font-size: 10px; font-weight: 500; letter-spacing: 0.02em; }
.app-badges .app-badge-large { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }

/* Stacked footers: centred on testimonials, start-aligned on the gift page */
.foot .app-badges { flex-direction: column; }
.footer__inner .app-badges { flex-direction: column; align-items: flex-start; }
/* Sample plan mutes its footer text already; don't compound the fade */
.plan-footer .app-badges { color: #f7f7f2; }

@media (prefers-reduced-motion: reduce) {
  .app-badges .app-badge { transition: none; }
  .app-badges .app-badge:hover { transform: none; }
}