/* =============================================================================
   CraveShield — official App Store / Google Play badge component
   Shared by index.html, quit-*.html and urge-surfing.html.
   Badge URLs are NOT set here — see /js/store-links.js (single source of truth).
   ============================================================================= */

.cs-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 26px 0 0;
}

/* Left-aligned variant, for the homepage hero column. */
.cs-badges--start { justify-content: flex-start; }

.cs-badge {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: 9px;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s ease, filter .2s ease;
}

/* Both official badges are cropped/normalised to the same content height, so a
   single height here keeps them optically matched. */
.cs-badge img {
  display: block;
  height: 44px;
  width: auto;
}

.cs-badge:hover { transform: translateY(-2px); filter: brightness(1.14); }
.cs-badge:focus-visible { outline: 2px solid var(--b1, #00C6FF); outline-offset: 3px; }

/* Honesty note under the badges — text is written by /js/store-links.js.
   Uses --muted rather than --dim: at 13px, --dim (#3A6088) falls under the AA
   contrast floor on this background, and this note is a disclosure, not decoration. */
.cs-badge-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted, #7EB3E8);
  margin: 14px 0 0;
  text-align: center;
}
.cs-badges--start + .cs-badge-note { text-align: left; margin-bottom: 30px; }

/* Each half of the note is an atomic box, so when the full line does not fit the
   break lands between the two phrases rather than inside one ("No / ads").
   inline-block rather than nowrap on purpose: below ~330px the first phrase no
   longer fits either, and this lets it wrap internally instead of overflowing.
   Where the note already fits on one line (desktop) nothing changes. */
.cs-note-part { display: inline-block; }

/* Footer placement gets a little breathing room + a divider from the page above. */
.cs-badges-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 34px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.cs-badges-footer .cs-badges { margin-top: 0; }

.cs-badges-label {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim, #7C8DA6);
  margin: 0 0 14px;
}

@media (max-width: 560px) {
  .cs-badge img { height: 40px; }
  .cs-badges { gap: 12px; }
  .cs-badges--start { justify-content: center; }
  .cs-badges--start + .cs-badge-note { text-align: center; }
}

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