/* Mobile app promotion: desktop footer QR + mobile smart banner.
   Brand colour comes from --primary-color, which both theme layouts already
   inject into :root from the theme_color setting. */

/* ── Desktop footer QR ──────────────────────────────────────────────────────── */

.app-promo-qr {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.app-promo-qr img {
  width: 100px;
  height: 100px;
  display: block;
  background: #fff;
  padding: 6px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.app-promo-qr__caption {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.85;
}

.app-promo__content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.app-promo__content .app-promo-qr {
  flex: 0 0 auto;
}

.app-promo__content .app-promo__body {
  flex: 1 1 0%;
  min-width: 0;
}

/* Desktop-only in EVERY variant. */
@media (max-width: 991px) {
  .app-promo-qr {
    display: none;
  }
}

/* ── Footer promo container bounds & alignment ──────────────────────── */

.footer-left-app-promo {
  max-width: 100% !important;
  overflow: hidden;
}

.footer-left-app-promo .app-promo__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  max-width: 100%;
}

.footer-left-app-promo .app-promo-qr img {
  width: 112px !important;
  height: 112px !important;
  padding: 6px !important;
  border-radius: 10px !important;
}

.footer-left-app-promo .app-promo-qr__caption {
  font-size: 10px !important;
  letter-spacing: 0.8px !important;
}

.footer-left-app-promo .app-promo__body {
  flex: 1 1 0%;
  min-width: 140px;
  max-width: 100%;
}

.compact-features-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 8px !important;
  margin-bottom: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.compact-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 10px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  margin: 0 !important;
  max-width: 100% !important;
  background: rgba(128, 128, 128, 0.08) !important;
  border: 1px solid rgba(128, 128, 128, 0.2) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  color: inherit !important;
}

.app-store-btns {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  max-width: 100% !important;
}

.store-badge-link {
  flex: 0 0 auto !important;
  padding: 5px 10px !important;
  gap: 6px !important;
  border-radius: 6px !important;
}

.store-badge-link .badge-sub {
  font-size: 7.5px !important;
}

.store-badge-link .badge-main {
  font-size: 11px !important;
}

.store-badge-link .badge-icon-svg svg {
  width: 15px !important;
  height: 15px !important;
}

/* ── Mobile footer promo ─────────────────────────────────────────────── */

@media (max-width: 767px) {
  .footer-left-app-promo {
    text-align: center !important;
    margin-bottom: 28px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2) !important;
  }

  .footer-left-app-promo .compact-features-pills {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 8px !important;
    justify-content: center !important;
    margin: 12px auto 16px !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .footer-left-app-promo .compact-pill {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .footer-left-app-promo .app-store-btns {
    justify-content: center !important;
  }
}

/* ── /app landing page ──────────────────────────────────────────────────────── */

.app-promo--landing {
  text-align: center;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.app-promo--landing .compact-features-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px 12px !important;
  margin: 20px auto 28px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.app-promo--landing .compact-pill {
  padding: 7px 16px !important;
  font-size: 12px !important;
  border-radius: 20px !important;
  margin: 0 !important;
}

.app-promo--landing .app-store-btns {
  justify-content: center !important;
}

/* ── Order-success card ─────────────────────────────────────────────────────── */

.app-promo--order {
  text-align: center;
  max-width: 460px;
  margin: 0 auto 28px;
  padding: 24px 20px;
  background: #fff;
  border: 1px solid rgba(128, 128, 128, 0.2);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.app-promo--order .app-promo-qr {
  margin-top: 16px;
}

/* From tablet up the card goes two-column — QR on the left, copy and badges on
   the right. A single vertical stack is needlessly tall on desktop, and the QR
   reads as the subject of the card rather than an afterthought.
   Grid lets the QR sit in column 1 while every sibling flows into column 2, so
   the DOM order (copy first, QR last) stays correct for screen readers and for
   the mobile layout, where the QR is hidden entirely. */
@media (min-width: 768px) {
  /* Exactly two grid items — QR and copy — both on row 1, so neither can stretch
     the other. */
  .app-promo--order {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 26px;
    align-items: center;
    justify-content: center;
    text-align: left;
    max-width: 680px;
    padding: 26px;
  }

  .app-promo--order .app-promo-qr {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
  }

  .app-promo--order .app-promo__body {
    grid-column: 2;
    grid-row: 1;
  }

  /* The badges are the last thing in the body; no trailing gap needed. */
  .app-promo--order .app-store-btns {
    margin-bottom: 0;
  }
}

/* ── Mobile smart banner — floating frosted-glass card, iOS notification style ── */

/* position:fixed keeps it out of flow, so it can never shift page content — the
   banner contributes exactly zero CLS no matter when it appears. It slides in with
   a transform, which is also excluded from layout-shift scoring. This is why the
   banner overlays the top of the page instead of pushing the body down: pushing at
   ~30s with no preceding user input would be a real, counted layout shift.

   Inset from the edges (rather than edge-to-edge) and rounded, like an iOS
   notification banner, with a blurred translucent background instead of a solid
   bar. Still position:fixed, so it stays pinned to the same spot on screen as the
   page scrolls — only the shape changed, not the "stuck to the top" behaviour.

   z-index 3050 sits above .fixed-top (1030 in ml/mart-theme.css) and the header's
   language switcher (position:relative but z-index:3000 in _language_switcher.php
   — it renders in normal flow near the top of the page, so at small scroll
   offsets it still occupies the same screen area as the banner and would
   otherwise render in front of it), and below the cart drawer overlay/panel
   (99998/99999 in main.css), so it can never cover a drawer or modal. */
#ml-app-banner {
  position: fixed;
  top: max(4px, env(safe-area-inset-top));
  left: 4px;
  right: 4px;
  z-index: 3050;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 12px;
  border-radius: 16px;
  /* Low opacity for a genuinely visible glass effect; a heavy 40px blur is what
     keeps it reading as FROSTED glass rather than a see-through tinted panel —
     whatever's behind becomes a soft wash of colour, never a recognisable image.
     Opacity is cheap (GPU alpha blend); blur radius is the expensive part, so more
     "glassiness" comes from lowering opacity, not raising the blur further. */
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
  font-family: inherit;
  transform: translateY(-150%);
  transition: transform 0.36s cubic-bezier(0.34, 1.15, 0.64, 1);
  will-change: transform;
}

/* Browsers without backdrop-filter support (rare on mobile, but graceful) get a
   near-opaque card instead of a translucent one over unblurred content. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #ml-app-banner {
    background: rgba(255, 255, 255, 0.96);
  }
}

#ml-app-banner.is-in {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  #ml-app-banner {
    transition: none;
  }
}

.ml-app-banner__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 10px;
  object-fit: contain;
  background: #f3f3f3;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.06);
}

.ml-app-banner__text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
}

.ml-app-banner__title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1c1c1e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ml-app-banner__sub {
  display: block;
  font-size: 12.5px;
  /* Solid, not translucent-gray: measured against the card's rendered background
     (which shifts colour depending on whatever page content sits behind the
     blur), rgba(60,60,67,0.68) only reached a 3.87:1 contrast ratio — below the
     4.5:1 WCAG AA minimum for this text size. This colour keeps a safe margin
     above it across the range of backgrounds the banner appears over. */
  color: #3a3a3e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ml-app-banner__cta {
  flex: 0 0 auto;
  background: var(--primary-color, #212129);
  color: #fff !important;
  text-decoration: none !important;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
}

/* Small round "clear" button, matching iOS notification-center styling, but kept
   inline (not a swipe gesture) so it stays keyboard- and screen-reader-reachable.
   The visible circle is 26px; the invisible padding brings the tap target to 44px
   without inflating the card. */
.ml-app-banner__close {
  flex: 0 0 auto;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(60, 60, 67, 0.8);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ml-app-banner__close::before {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(120, 120, 128, 0.16);
}

.ml-app-banner__close span {
  position: relative;
}

#ml-app-banner :focus-visible {
  outline: 2px solid var(--primary-color, #212129);
  outline-offset: 2px;
}

/* Keep in-page anchor targets clear of the banner while it is open. */
html.ml-app-banner-open {
  scroll-padding-top: 84px;
}