/* ══════════════════════════════════════════════════════════════════
   FuiNomeado — Global Mobile Responsive Overrides
   Loaded LAST on every user-facing page so it overrides per-page CSS.
   Targets common breakage patterns: 100vw containers, fixed pixel
   widths, absolute-positioned overlays, rigid grids, oversized fonts.
   Breakpoint strategy:
     ≤ 991px  → tablet
     ≤ 768px  → phablet
     ≤ 480px  → small phone
   ══════════════════════════════════════════════════════════════════ */

/* ─── Universal safety: never overflow horizontally ─────────────── */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}

/* Tables tend to blow up the layout — let them scroll instead */
table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════════════════════
   ≤ 991px — tablet & below
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  /* Pages that hard-code 100vw containers (parceirologado, parceirotoken,
     parceirologadoengagement) cause horizontal scroll on mobile. Force
     them to fit the viewport. */
  .parceirologado-container2,
  .parceirotoken-container2,
  .parceirologadoengagement-container2 {
    min-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
  }

  /* Nav/header inner padding shrink */
  .navbarparceiros-container2 {
    padding: 12px 16px !important;
  }
  .navbarparceiros-image1 {
    height: 2.5rem !important;
  }

  /* Generic two-column grids → single column */
  .pricing-grid,
  .pay-grid,
  .features-grid,
  .testimonials-grid,
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  /* index hero/section padding shrink */
  .hero1-container,
  .hero1-max-width,
  .hero1-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ≤ 768px — phablet & below
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Body & root padding sane defaults */
  body {
    font-size: 15px;
  }

  h1 { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; line-height: 1.25 !important; }
  h2 { font-size: clamp(1.35rem, 5vw, 1.85rem) !important; line-height: 1.3 !important; }
  h3 { font-size: clamp(1.15rem, 4.5vw, 1.45rem) !important; line-height: 1.35 !important; }

  /* Inline forms → stacked */
  form, .forms-box, .forms-frame31, .pay-grid, .form-row {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  textarea,
  select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }

  /* Buttons full width-ish on phones */
  .forms-button,
  button[type="submit"],
  .button-primary,
  .cta-button {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Footer columns stack */
  .footer-inner,
  .footer4-content,
  .footer4-logo {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
  }
  .footer-links {
    justify-content: center !important;
  }

  /* Common section padding */
  .thq-section-padding {
    padding: 32px 16px !important;
  }

  /* parceirologado fixed height collapse */
  .parceirologado-container2 {
    height: auto !important;
  }
  .parceirotoken-container2 {
    height: auto !important;
  }

  /* comprapix menu positioned overlay → stack */
  .menu-menu {
    height: auto !important;
    flex-direction: column !important;
    padding: 12px !important;
    gap: 8px !important;
  }
  .menu-frame1 {
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
  }
  .menu-frame2 {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    background: transparent !important;
  }
  .menu-logo {
    width: 100% !important;
    align-items: center !important;
  }
  .menu-image {
    width: auto !important;
    height: 48px !important;
  }

  /* Forms section paddings */
  .forms-forms,
  .forms-frame4,
  .forms-frame5 {
    padding: 12px !important;
  }
  .forms-box {
    flex-direction: column !important;
  }

  /* parceiro internal area: dashboards */
  .parceiro-interno-container,
  .parceiro-externo-container,
  .parceirologadoconfiguracao-container,
  .parceirologadoengagement-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* 404 fixed-width card */
  .error-card,
  .error-box {
    width: auto !important;
    max-width: 92vw !important;
    margin: 0 auto !important;
  }

  /* Pricing cards stack */
  .pricing-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Decorative absolutely-positioned shapes are usually purely visual.
     Hide them on phones rather than letting them overflow. */
  .deco-blob,
  .bg-shape,
  .floating-decor,
  .hero-decor {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ≤ 480px — small phones
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  body {
    font-size: 14.5px;
  }

  .nav-inner {
    padding: 0 16px !important;
    height: 64px !important;
  }
  .nav-logo {
    height: 48px !important;
  }
  .footer-inner {
    padding: 24px 16px !important;
  }
  .footer-legal {
    padding: 16px 16px 20px !important;
    font-size: .72rem !important;
  }

  /* Cards: tighter padding */
  .card,
  .pricing-card,
  .feature-card {
    padding: 16px !important;
  }

  /* Pricing toggle wrap */
  .pricing-toggle,
  .billing-toggle {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Touch target hygiene
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  a, button, .button, input[type="submit"], input[type="button"], [role="button"] {
    min-height: 44px;
  }
}