/* Install banner — see pwa-install.js. Pinned to the bottom so it never pushes
   the hero around, and kept clear of the iPhone home indicator.

   RIGHT CLEARANCE: the landing pages load the AYON conditions widget
   (ayonecosystem.com/widget/loader.js, data-position="right"), which floats a
   round tab in this exact corner. The first version ran the banner full-bleed
   and the tab sat on top of its dismiss button. The inset is generous enough
   for that tab at any size, since its geometry belongs to another origin and
   can change without this file knowing. */
.ayon-pwa {
  position: fixed;
  left: 12px;
  right: 88px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  border-radius: 16px;
  background: rgba(15, 31, 53, 0.97);
  border: 1px solid rgba(0, 212, 255, 0.28);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", sans-serif;
  /* Animated in by a class so it cannot flash over the hero at load. */
  transform: translateY(140%);
  opacity: 0;
  transition: transform 260ms ease, opacity 260ms ease;
}
.ayon-pwa.is-in { transform: translateY(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ayon-pwa { transition: none; } }

/* The pressable row. A <button> on iOS, a plain div where the CTA is its own
   button — same box either way. */
.ayon-pwa-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 40px 12px 14px;   /* right room for the dismiss × */
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  border-radius: 16px;
}
button.ayon-pwa-head { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.ayon-pwa-head:active { background: rgba(255, 255, 255, 0.04); }

.ayon-pwa-icon {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 212, 255, 0.15);
  color: #00d4ff;
}
.ayon-pwa-text { flex: 1 1 auto; min-width: 0; }
.ayon-pwa-text b {
  display: block;
  font-size: 14px; font-weight: 700; line-height: 1.25;
}
.ayon-pwa-text span {
  display: block;
  font-size: 12px; line-height: 1.35;
  color: rgba(255, 255, 255, 0.66);
  margin-top: 2px;
}

/* The chevron is the whole affordance on iOS: it is what says "this opens". */
.ayon-pwa-chev {
  flex: none;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  transition: transform 200ms ease;
}
.ayon-pwa.is-open .ayon-pwa-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .ayon-pwa-chev { transition: none; } }

.ayon-pwa-cta {
  flex: none;
  padding: 9px 15px;
  border-radius: 11px;
  background: #00d4ff;
  color: #06222c;
  font-size: 13px; font-weight: 800;
  cursor: pointer;
}
.ayon-pwa-cta:active { opacity: 0.85; }

.ayon-pwa-steps {
  margin: 0;
  padding: 0 16px 14px 46px;      /* aligns under the text, not the icon */
  list-style: decimal;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
}
.ayon-pwa-steps li { margin-top: 6px; }
.ayon-pwa-steps li::marker { color: #00d4ff; font-weight: 700; }

.ayon-pwa-x {
  position: absolute;
  top: 8px; right: 8px;
  border: 0; background: none; cursor: pointer;
  color: rgba(255, 255, 255, 0.45);
  font-size: 20px; line-height: 1;
  padding: 4px 6px;
  font-family: inherit;
  border-radius: 8px;
}
.ayon-pwa-x:hover { color: rgba(255, 255, 255, 0.85); }

/* On a wide screen it is a card in the corner. The floating widget sits lower,
   so the banner clears it by sitting above rather than beside. */
@media (min-width: 720px) {
  .ayon-pwa { left: auto; right: 20px; bottom: 96px; max-width: 400px; }
}