/* ==========================================================================
 * modules/offers/css/sticky_cta.css
 * --------------------------------------------------------------------------
 * Owner: main-domain offers UI/UX redesign — Batch 7
 *   (plan: ~/.claude/plans/main_domain_offers_uiux_redesign.md, section 5)
 *
 * Scope: mobile-only sticky purchase bar (<aside data-sticky-cta>) that the
 *   companion JS toggles via the `inert` attribute (WCAG-friendly: removes
 *   the link from focus order while hidden, no aria-hidden-on-focusable trap)
 *   once the user has scrolled ~60% past the hero AND the plan strip is no
 *   longer in view. The bar always sits
 *   above the cookie banner via --ui-cookie-banner-height and respects iOS
 *   safe-area-inset-bottom. Hidden entirely when printing.
 * ========================================================================== */

.sticky-cta {
  position: fixed;
  inset-inline: 0;
  inset-block-end: calc(var(--ui-cookie-banner-height, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  background: var(--surface);
  border-block-start: 1px solid var(--border);
  box-shadow: 0 -10px 24px rgba(var(--text-rgb), 0.08);
  transform: translateY(calc(110% + var(--ui-cookie-banner-height, 0px)));
  transition: transform var(--dur-base, 200ms) var(--ease-decelerate, ease-out);
  pointer-events: none;
}

.sticky-cta:not([inert]) {
  transform: translateY(0);
  pointer-events: auto;
}

body.offers-sticky-cta-visible {
  padding-bottom: calc(
    var(--offers-sticky-cta-height, 72px)
    + max(var(--ui-cookie-banner-height, 0px), env(safe-area-inset-bottom, 0px))
  );
}

.sticky-cta__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-inline-size: 720px;
  margin-inline: auto;
}

.sticky-cta__info {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  flex: 1 1 auto;
  line-height: 1.3;
}

.sticky-cta__name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-strong, var(--text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky-cta__price {
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky-cta__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary);
  color: var(--primary-contrast);
  border-radius: 999px;
  padding-block: 10px;
  padding-inline: 18px;
  min-block-size: 44px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}

.sticky-cta__btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.sticky-cta__btn[aria-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
}

@media (min-width: 769px) {
  .sticky-cta { display: none !important; }
}

@media print {
  .sticky-cta { display: none !important; }
}

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