/* AuVidi — Pricing Mobile Fix (FINAL) */
/* Scope only pricing area; neutralize ancestor shifts; guarantee full-width center on mobile. */

@media (max-width: 640px){
  :root { --gutter: 12px; }

  /* 0) Global guard */
  html, body {
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  /* 1) Pricing section wrappers */
  #paketler, #packages, .pricing, .plans {
    position: static !important; /* avoid inherited offsets */
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 auto !important;
    padding-inline: var(--gutter) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transform: none !important;
    translate: none !important;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    display: block !important;
  }

  /* 2) Neutralize any transforms/margins on ALL ancestors inside pricing section */
  #paketler *, #packages *, .pricing *, .plans * {
    box-sizing: border-box !important;
  }

  /* 3) Rows/grids => single column & centered */
  #paketler .row, #packages .row, .pricing .row, .plans .row,
  #paketler [class*="grid"], #packages [class*="grid"], .pricing [class*="grid"], .plans [class*="grid"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  /* 4) Each card/plan: clamp to viewport, center, and clip any glow spill */
  #paketler *[class*="plan"], #packages *[class*="plan"],
  .pricing *[class*="plan"], .plans *[class*="plan"],
  #paketler *[class*="card"], #packages *[class*="card"],
  .pricing *[class*="card"], .plans *[class*="card"],
  #paketler .package, #packages .package, .pricing .package, .plans .package,
  #paketler .paket, #packages .paket, .pricing .paket, .plans .paket {
    position: relative !important;
    width: calc(100vw - (var(--gutter) * 2)) !important;
    max-width: calc(100vw - (var(--gutter) * 2)) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    transform: none !important; translate: none !important;
    overflow: hidden !important;
    clip-path: inset(0 round 18px);
    padding-left: 16px !important; padding-right: 16px !important;
  }

  /* 5) Kill pseudo-element glows pushing layout */
  #paketler *[class*="plan"]::before, #paketler *[class*="plan"]::after,
  .pricing *[class*="plan"]::before, .pricing *[class*="plan"]::after,
  #packages *[class*="card"]::before, #packages *[class*="card"]::after,
  .pricing *[class*="card"]::before, .pricing *[class*="card"]::after {
    transform: none !important;
    left: 0 !important; right: 0 !important;
    max-width: 100% !important;
  }

  /* 6) Center badge */
  .price-badge, .plan .price, .plan .price-badge,
  #paketler *[class*="badge"], #packages *[class*="badge"],
  .pricing *[class*="badge"], .plans *[class*="badge"] {
    position: absolute !important;
    top: -14px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: 58px !important;
    max-height: 58px !important;
    pointer-events: none !important;
  }

  /* Space for centered badge */
  #paketler *[class*="plan"], #packages *[class*="plan"],
  .pricing *[class*="plan"], .plans *[class*="plan"],
  #paketler *[class*="card"], #packages *[class*="card"],
  .pricing *[class*="card"], .plans *[class*="card"] {
    padding-top: 42px !important;
  }

  /* 7) CTA buttons full width, centered */
  #paketler button, #packages button, .pricing button, .plans button,
  #paketler .btn, #packages .btn, .pricing .btn, .plans .btn {
    display: block !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 16px auto 0 auto !important;
    border-radius: 14px !important;
  }
}