/**
 * Mobile optimizations — afripayeasyfunnel.com & afripaysalesfunnel.com
 * Loaded after page-specific warriorplus-*.css on both funnel programs.
 */

/* ── Stop horizontal overflow (header + hero) ── */
html:has(.wp-home),
html:has(body.wp-home) {
  overflow-x: hidden;
  max-width: 100%;
}

.wp-home {
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

.wp-hero {
  overflow-x: clip;
  max-width: 100%;
}

.wp-hero .wp-wrap,
.wp-hero .wp-grid-hero,
.wp-hero .wp-grid-hero > * {
  min-width: 0;
  max-width: 100%;
}

.wp-hero__glow::before,
.wp-hero__glow::after {
  max-width: 100%;
}

.wp-nav {
  width: 100%;
  max-width: 100%;
}

.wp-nav__left,
.wp-nav__right,
.wp-nav__center {
  min-width: 0;
  max-width: 100%;
}

.wp-brand {
  min-width: 0;
  max-width: 100%;
}

.wp-brand > div {
  min-width: 0;
}

.wp-brand__title,
.wp-brand__sub,
.wp-h1,
.wp-h1 em,
.wp-lead,
.wp-pill {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.wp-visual {
  overflow: hidden;
  max-width: 100%;
}

.wp-frame,
.wp-frame__inner,
.wp-frame__iframe {
  max-width: 100%;
}

/* ── Touch targets ── */
.wp-nav-toggle {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0.65rem;
  -webkit-tap-highlight-color: transparent;
}

.wp-nav__links a,
.wp-btn,
.wp-oto1__cta-primary,
.wp-oto2__cta-primary,
.wp-oto3__cta-primary,
.wp-oto4__cta-primary,
.wp-oto5__cta-primary,
.wp-bundle__cta-primary,
.wp-rs__cta-primary {
  min-height: 2.75rem;
}

/* ── Prevent horizontal scroll (clip avoids body overflow-y:auto side effect) ── */
.al-funnel-public {
  overflow-x: clip;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

[class^="wp-oto"],
.wp-bundle,
.wp-rs,
.wp-thank-you {
  max-width: 100%;
  overflow-x: clip;
}

/* ── Header + hero: tablet / phone ── */
@media (max-width: 899px) {
  .wp-wrap {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    box-sizing: border-box;
  }

  .wp-nav {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem 0.5rem;
    margin-bottom: 1.75rem;
  }

  .wp-nav__right {
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 0.5rem;
  }

  .wp-nav__right .wp-btn--ghost {
    padding: 0 0.85rem;
    font-size: 0.82rem;
    white-space: nowrap;
  }

  .wp-badge-wp {
    white-space: normal;
    text-align: center;
    font-size: clamp(0.62rem, 2.8vw, 0.72rem);
    line-height: 1.35;
    max-width: 100%;
    padding: 0.4rem 0.75rem;
    box-sizing: border-box;
  }

  .wp-nav__center {
    max-width: 100%;
    padding: 0 0.25rem;
  }

  .wp-grid-hero {
    padding-bottom: 2rem;
    gap: 1.75rem;
  }

  .wp-h1 {
    font-size: clamp(1.65rem, 6.8vw, 2.35rem);
  }

  .wp-lead {
    max-width: 100%;
  }

  .wp-pill {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    justify-content: center;
    line-height: 1.4;
  }

  .wp-float-top {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    display: flex;
    max-width: 100%;
    margin: 0 0 0.85rem 0;
    box-sizing: border-box;
  }

  .wp-float-social {
    position: relative;
    left: 0 !important;
    right: auto;
    bottom: auto;
    width: 100% !important;
    max-width: 100%;
    margin-top: 1rem;
    box-sizing: border-box;
  }

  .wp-guarantee {
    position: relative;
    right: auto !important;
    left: auto;
    bottom: auto;
    margin: 1rem auto 0;
    width: fit-content;
    max-width: 100%;
  }

  .wp-visual {
    padding: 0 0 1rem;
    min-height: 0;
    width: 100%;
  }

  .wp-frame__inner {
    min-height: 200px;
  }
}

/* ── Nav badge & layout (narrow phones) ── */
@media (max-width: 640px) {
  .wp-brand__title {
    font-size: clamp(0.95rem, 4.2vw, 1.15rem);
  }

  .wp-brand__mark {
    width: 2rem;
    height: 2rem;
  }

  .wp-nav__right .wp-btn--ghost {
    padding: 0 0.65rem;
    font-size: 0.78rem;
  }
}

@media (max-width: 400px) {
  .wp-brand__sub {
    display: none;
  }

  .wp-nav {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .wp-btn--yellow,
  .wp-btn--outline {
    min-height: 3.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    font-size: 0.92rem;
  }

  .wp-trust-row {
    gap: 0.5rem 0.85rem;
    font-size: 0.8rem;
  }

  .wp-trust-row span {
    max-width: 100%;
  }
}

/* ── Hero CTAs & trust row ── */
@media (max-width: 479px) {
  .wp-features {
    grid-template-columns: 1fr;
  }

  .wp-trust-strip__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .wp-cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .wp-cta-row .wp-btn {
    width: 100%;
    justify-content: center;
  }

  .wp-trust-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
}

/* ── Guarantee seal readability ── */
@media (max-width: 899px) {
  .wp-guarantee__seal-inner em {
    font-size: max(0.55rem, 9px);
  }
}

/* ── Dashboard preview on mobile ── */
@media (max-width: 899px) {
  .wp-frame__inner {
    min-height: 220px;
    aspect-ratio: 16 / 11;
  }

  .wp-float-top,
  .wp-float-social {
    font-size: 0.72rem;
    padding: 0.5rem 0.75rem;
  }

  .wp-visual {
    margin-top: 0.5rem;
  }

  .wp-nav.wp-nav--open .wp-nav__links a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.65rem 0.5rem;
  }

  .wp-nav__right .wp-btn {
    min-height: 44px;
    padding: 0.55rem 1rem;
  }
}

/* ── Testimonials: static cards on mobile (no marquee) ── */
@media (max-width: 639px) {
  .wp-testimonials-marquee {
    -webkit-mask-image: none;
    mask-image: none;
    overflow: visible;
  }

  .wp-testimonials-track {
    animation: none;
    display: grid;
    grid-template-columns: 1fr;
    width: auto;
    gap: 1rem;
  }

  .wp-testimonials-track .wp-testimonial-card:nth-child(n + 4) {
    display: none;
  }

  .wp-testimonial-card {
    width: auto;
    max-width: none;
  }
}

/* ── Pricing block ── */
@media (max-width: 639px) {
  .wp-pro-pricing {
    overflow-x: clip;
    overflow-y: visible;
    padding-bottom: 3.5rem;
  }

  .wp-pro-card {
    overflow: visible;
  }

  .wp-pro-card__grid {
    grid-template-columns: 1fr;
  }

  .wp-pro-offer {
    text-align: center;
  }

  .wp-pro-cta--primary,
  .wp-pro-cta--secondary {
    width: 100%;
    box-sizing: border-box;
  }
}

/* ── Sticky CTA: unify OTO4/5 with OTO1–3 (tablets included) ── */
@media (max-width: 767px) {
  .wp-oto4__sticky,
  .wp-oto5__sticky {
    display: block;
  }
}

@media (min-width: 768px) {
  .wp-oto4__sticky,
  .wp-oto5__sticky {
    display: none;
  }
}

/* ── OTO2 template gallery ── */
@media (max-width: 639px) {
  .wp-oto2__gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* ── OTO pages: spacing & full-width CTAs ── */
@media (max-width: 479px) {
  .wp-oto1__page,
  .wp-oto2__page,
  .wp-oto3__page,
  .wp-oto4__page,
  .wp-oto5__page,
  .wp-bundle__page,
  .wp-rs__page,
  .wp-thank-you__page {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .wp-oto1__cta-primary,
  .wp-oto2__cta-primary,
  .wp-oto3__cta-primary,
  .wp-oto4__cta-primary,
  .wp-oto5__cta-primary,
  .wp-bundle__cta-primary,
  .wp-rs__cta-primary {
    width: 100%;
    box-sizing: border-box;
  }
}

/* ── Sticky bar buttons ── */
.wp-oto1__sticky a,
.wp-oto2__sticky a,
.wp-oto3__sticky a,
.wp-oto4__sticky a,
.wp-oto5__sticky a,
.wp-bundle__sticky a,
.wp-rs__sticky a {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Comparison tables edge scroll ── */
@media (max-width: 479px) {
  .wp-oto2__table-wrap,
  .wp-oto5__table-wrap {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* ── SaaS footer CTAs ── */
@media (max-width: 639px) {
  .af-saas-footer__cta-btn {
    min-height: 2.75rem;
    width: 100%;
  }

  .af-saas-footer__cta-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── Dev nav strip (preview mode) ── */
.al-dev-strip {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.al-dev-strip::-webkit-scrollbar {
  display: none;
}

.al-dev-strip__flow,
.al-dev-strip__links {
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* ── USP sell-types & compare (homepages) ── */
.wp-usp-sell-types .wp-wrap,
.wp-usp-sell-types .wp-wrap--section {
  text-align: center;
}

.wp-usp-compare-grid {
  gap: 1rem;
}

@media (max-width: 768px) {
  .wp-band--sell-types,
  .wp-usp-compare {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .wp-usp-sell-grid {
    gap: 0.5rem;
  }

  .wp-usp-sell-chip {
    font-size: 0.8rem;
  }

  .wp-usp-compare-card {
    padding: 1.15rem;
  }

  .wp-flow-row {
    margin-bottom: 2rem;
  }

  .wp-flow-visual {
    padding: 1rem;
  }

  .wp-flow-mock--form,
  .wp-flow-mock--generated {
    font-size: 0.92rem;
  }
}

/* ── OTO6 / OTO7 (bundle pages use wp-bundle__*) ── */
@media (max-width: 479px) {
  .wp-bundle__page,
  .wp-bundle__column {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .wp-bundle__cta-primary,
  .wp-bundle__cta-decline {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  .wp-bundle__module-grid,
  .wp-bundle__stack {
    gap: 0.85rem;
  }

  .wp-oto1__column,
  .wp-oto2__column,
  .wp-oto3__column,
  .wp-oto4__column,
  .wp-oto5__column {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(5rem, calc(4.5rem + env(safe-area-inset-bottom)));
  }

  .wp-oto1__feature-grid,
  .wp-oto2__feature-grid,
  .wp-oto3__feature-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .wp-oto1__cta-decline,
  .wp-oto2__cta-decline,
  .wp-oto3__cta-decline,
  .wp-oto4__cta-decline,
  .wp-oto5__cta-decline,
  .wp-rs__cta-decline {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.82rem;
    line-height: 1.45;
    word-break: break-word;
  }

  .wp-oto1__dashboard-figure,
  .wp-oto2__dashboard-figure,
  .wp-oto3__dashboard-figure,
  .wp-oto4__dashboard-figure,
  .wp-oto5__dashboard-figure {
    margin-left: 0;
    margin-right: 0;
  }
}