/*
 * Sticky app-download banner — shared by all 32 pages.
 *
 * Loaded by every locale page (which also loads style.css) AND by the six
 * content pages (which style themselves with an inline <style> block and never
 * load style.css). It must therefore be fully self-contained: nothing here may
 * depend on a rule in style.css, and nothing here may reach into page layout
 * beyond the bottom clearance below.
 *
 * Link it LAST in <head> so its `html body` clearance rule lands after the
 * page's own body padding.
 */

:root {
  /* Total bottom clearance reserved for the fixed banner, safe-area included.
     banner.js overwrites it with the banner's measured border-box height once
     it renders (translations, font swap and wrapping all move it) — that
     measurement already includes the inset, which is why the inset is added
     here rather than at the point of use. This literal is the no-JS fallback. */
  --app-banner-h: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* Bottom clearance so the fixed banner can never cover the footer.
   `html body` (0,0,2) outranks style.css's `body` rule and the content pages'
   inline `body` rule regardless of source order, so this cannot be lost to a
   cascade accident on any of the 32 pages. It *replaces* that rule rather than
   adding to it, so the 24px restores the breathing room the page's own bottom
   padding used to provide between the last content and the bar. */
html body {
  padding-bottom: calc(var(--app-banner-h) + 24px);
}

.app-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  /* Above .floating-btn (z-index: 10); below third-party anchor ads, which use
     a near-max z-index of their own. */
  z-index: 100;
  display: flex;
  align-items: center;
  gap: clamp(10px, 3vw, 16px);
  box-sizing: border-box;
  padding: 10px clamp(12px, 4vw, 20px);
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  /* Promotion surface — same gradient as .app-promotion. */
  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
  color: #fff;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
}

.app-banner__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: contain;
}

.app-banner__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Keeps the bar one line tall: a long translation ellipsizes instead of
     wrapping and pushing the CTA out. min-width:0 lets a flex item shrink
     below its content width, which is what makes the ellipsis possible. */
  min-width: 0;
}

.app-banner__title,
.app-banner__subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-banner__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.app-banner__subtitle {
  font-size: 13px;
  line-height: 1.3;
  opacity: 0.85;
}

.app-banner__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Logical property: pushes the CTAs to the trailing edge in LTR *and* RTL. */
  margin-inline-start: auto;
}

/* Compact restyle of .app-button: white pill, ink text, 12px radius. */
.app-banner__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  box-sizing: border-box;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 12px;
  background: #fff;
  color: #2d3748;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.app-banner__cta img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.app-banner__cta:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.app-banner__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (hover: hover) {
  .app-banner__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }
}

/* Platform-matched CTA. banner.js sets data-os on <html>; with the attribute
   absent (JS disabled or not yet run) BOTH stores show — a safe fallback. */
html[data-os="ios"] .app-banner__cta--android,
html[data-os="android"] .app-banner__cta--ios {
  display: none;
}

@media (max-width: 480px) {
  :root {
    --app-banner-h: calc(60px + env(safe-area-inset-bottom, 0px));
  }

  .app-banner {
    gap: 10px;
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .app-banner__icon {
    width: 36px;
    height: 36px;
  }

  .app-banner__title {
    font-size: 14px;
  }

  .app-banner__subtitle {
    font-size: 12px;
  }

  .app-banner__cta {
    padding: 8px 14px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-banner__cta {
    transition: none;
  }
}

@media print {
  .app-banner {
    display: none;
  }

  html body {
    padding-bottom: 0;
  }
}
