/* Leave room for the approved card and its invitation bubble. Only the site's
   existing mobile action changes; CueVue owns all of its own positioning. */
@media (max-width: 767px) {
  .mobile-cta {
    left: var(--space-12);
    right: 252px;
    bottom: calc(var(--space-12) + env(safe-area-inset-bottom));
    max-width: 172px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .mobile-cta > span,
  .mobile-cta .button svg {
    display: none;
  }

  .mobile-cta .button {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: var(--space-12) var(--space-8);
    font-size: var(--type-ui);
    line-height: 1.4;
    white-space: normal;
    text-align: center;
  }
}

/* Narrower phones need the full label width. Keep the action beside the card
   and just above its invitation bubble, without changing the provider UI. */
@media (max-width: 389px) {
  .mobile-cta {
    right: 188px;
    bottom: calc(92px + env(safe-area-inset-bottom));
  }
}