/* App picker: a download button that opens a small panel with the App Store and Google Play
   badges. Disclosure pattern (button + aria-expanded + aria-controls), see js/app-picker.js.

   Motion: the panel scales in from the button it belongs to (origin-aware), 180ms strong
   ease-out, and leaves faster (120ms). No movement under prefers-reduced-motion, only a fade. */

.app-picker { position: relative; display: inline-flex; }
/* the trigger blooms white (a black fill disappears on the dark hero and the glass nav) */
.app-picker .arrow-btn--yellow { --ab-fill: #FFFFFF; --ab-text-on: var(--h10-ink); }

.app-picker__panel {
  position: absolute; z-index: 20;
  top: calc(100% + 10px); inset-inline-start: 0;
  display: grid; gap: 8px;
  width: max-content; min-width: 100%;
  padding: 8px;
  border-radius: 20px;
  /* solid, not frosted: inside the nav a second backdrop-filter would only blur the nav */
  background: rgba(24, 26, 31, 0.97);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 18px 40px -12px rgba(0, 0, 0, 0.6);
  transform-origin: top right;           /* the panel hangs from the button's start edge (RTL) */
  opacity: 0; transform: translateY(-4px) scale(0.96); visibility: hidden;
  transition: opacity 120ms ease, transform 120ms var(--ease-out), visibility 0s linear 120ms;
}
.app-picker__panel:dir(ltr) { transform-origin: top left; }
/* data-align="end": hang from the button's end edge (for a button near the screen edge) */
.app-picker[data-align="end"] .app-picker__panel { inset-inline-start: auto; inset-inline-end: 0; transform-origin: top left; }
.app-picker[data-align="end"] .app-picker__panel:dir(ltr) { transform-origin: top right; }

.app-picker__panel[data-open] {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity 180ms ease, transform 180ms var(--ease-out), visibility 0s;
}
.app-picker__title { margin: 2px 8px 2px; font-size: 13px; font-weight: 600; color: var(--dim-on-dark); }
.app-picker__panel .store { justify-content: flex-start; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .app-picker__panel, .app-picker__panel[data-open] { transform: none; }
}

/* "Contact us" panel (components/wa-btn): the same panel with a call row and a chat row instead of
   the store badges. White rows like the badges, an icon in a yellow circle, the number in small. */
.contact-option {
  display: flex; align-items: center; gap: 12px;
  min-height: 58px; padding: 8px 18px 8px 10px;
  border-radius: 16px;
  background: #FFFFFF; color: var(--h10-ink);
  text-decoration: none; text-align: start;
  transition: background-color 150ms ease, transform 160ms var(--ease-out);
}
:root[dir="rtl"] .contact-option { padding: 8px 10px 8px 18px; }
.contact-option:active { transform: scale(0.97); }
.contact-option:focus-visible { outline: 3px solid var(--h10-yellow); outline-offset: 2px; }
.contact-option__icon {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--h10-yellow); color: var(--h10-ink);
}
.contact-option__icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contact-option b { display: block; font-size: 16px; line-height: 1.25; }
.contact-option small { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--ink-muted); }
:root[dir="rtl"] .contact-option small[dir="ltr"] { text-align: right; }
.contact-picker .app-picker__panel { min-width: max(100%, 260px); }

@media (hover: hover) and (pointer: fine) {
  .contact-option:hover { background: var(--h10-yellow); }
  .contact-option:hover .contact-option__icon { background: var(--h10-ink); color: var(--h10-yellow); }
  .contact-option:hover small { color: var(--h10-ink); }
}