/* ═══════════════════════════════════════════════════════════════════════════
   BUGFIX — Task #1447358: Pricing page + sitewide bubble/outline fixes

   Root causes:
     1. mobile-motion-1327338.css §16 forces ALL a to min-height:44px; min-width:44px
     2. mobile-contrast-typography-1327415.css §3 forces a[href] to same
     3. These cascade into pricing card links, badge text, feature lists,
        plan names, and every other element inside .pr-card that contains
        an anchor or button, creating visible "bubbles" / boxes
     4. Same issue affects other pages: settlement cards, badges, pills,
        nav elements, inline text anywhere

   Fix strategy:
     Targeted resets on pricing page elements AND sitewide contexts where
     44px forced sizing creates visual artifacts. Preserves real button/CTA
     touch targets.

   Loads AFTER bugfix-mobile-nav-bubbles-1445386.css
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 1. PRICING PAGE — Reset forced sizing on card elements ──────────────
   Inside pricing cards, anchors are CTA buttons (already have explicit
   sizing via .pr-cta) or inline text — neither needs forced 44px.
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Reset min-width on all pricing card internal elements */
  .pr-card a:not(.pr-cta),
  .pr-card span,
  .pr-card p,
  .pr-card li,
  .pr-card strong,
  .pr-card cite,
  .pr-otp-card a:not(.pr-otp-cta),
  .pr-otp-card span,
  .pr-otp-card p {
    min-height: 0 !important;
    min-width: 0 !important;
  }

  /* Feature list items — inline flow, no box sizing */
  .pr-features li {
    min-height: 0 !important;
    min-width: 0 !important;
  }

  .pr-features li a {
    min-height: 0 !important;
    min-width: 0 !important;
    display: inline !important;
  }

  /* Savings badge/pill — should be inline pill, not a 44px box */
  .pr-savings-row,
  .pr-save-global-badge,
  .pr-otp-badge,
  .pr-tier-badge,
  .pr-popular-badge,
  .pr-best-value-badge {
    min-height: 0 !important;
    min-width: 0 !important;
  }

  /* Plan names, tags, headings — should not be forced to 44px */
  .pr-card-name,
  .pr-card-tag,
  .pr-feature-head,
  .pr-price-num,
  .pr-price-num small,
  .pr-plan-tagline,
  .pr-testimonial,
  .pr-testimonial cite,
  .pr-loss-frame,
  .pr-upgrade-count,
  .pr-annual-nudge,
  .pr-billing-note,
  .pr-price-block {
    min-height: 0 !important;
    min-width: 0 !important;
  }

  /* Toggle elements */
  .pr-toggle-label,
  .pr-toggle-switch {
    min-width: 0 !important;
  }

  /* Hero elements */
  .pr-hero-sub,
  .pr-biz-link,
  .pr-urgency-bar,
  .pr-section-eyebrow,
  .pr-section-title,
  .pr-section-sub,
  .pr-final-cta-note {
    min-height: 0 !important;
    min-width: 0 !important;
  }

  /* Comparison table elements */
  .pr-compare-table a,
  .pr-compare-table span,
  .pr-compare-table td,
  .pr-compare-table th {
    min-height: 0 !important;
    min-width: 0 !important;
  }

  /* FAQ elements */
  .pr-faq-q,
  .pr-faq-a,
  .pr-faq-item span {
    min-width: 0 !important;
  }

  /* Trust strip elements */
  .pr-trust-strip span,
  .pr-trust-strip p,
  .pr-trust-strip a:not([class*="cta"]) {
    min-height: 0 !important;
    min-width: 0 !important;
  }

  /* OTP (one-time products) cards */
  .pr-otp-name,
  .pr-otp-price,
  .pr-otp-price small,
  .pr-otp-desc {
    min-height: 0 !important;
    min-width: 0 !important;
  }
}


/* ── 2. SITEWIDE — Extend bubble fixes beyond nav/inline text ────────────
   bugfix-mobile-nav-bubbles-1445386.css handles nav and p/li/td/article a.
   These additional selectors cover remaining bubble-creating contexts.
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Settlement cards — links inside cards should flow naturally */
  .sr-card a:not(.btn):not([class*="cta"]):not([role="button"]),
  .dir-card a:not(.btn):not([class*="cta"]):not([role="button"]) {
    min-height: 0 !important;
    min-width: 0 !important;
  }

  /* Badge/pill elements across all pages */
  [class*="badge"],
  [class*="pill"],
  [class*="chip"],
  [class*="tag-"] {
    min-height: 0 !important;
    min-width: 0 !important;
  }

  /* Testimonial and quote elements */
  [class*="testimonial"] a,
  [class*="testimonial"] cite,
  [class*="testimonial"] span,
  blockquote a,
  cite a {
    min-height: 0 !important;
    min-width: 0 !important;
  }

  /* Pricing-specific anchors across the site (Pro, Pro+, Family, etc.) */
  .pro-feature-item a,
  .proplus-feature-item a,
  .fam-feature-item a,
  [class*="feature-item"] a,
  [class*="feature-list"] a {
    min-height: 0 !important;
    min-width: 0 !important;
    display: inline !important;
  }

  /* Social proof ticker elements */
  .sp-ticker a,
  .sp-ticker span,
  [class*="social-proof"] a,
  [class*="social-proof"] span {
    min-height: 0 !important;
    min-width: 0 !important;
  }

  /* Loss frame / nudge text */
  [class*="loss-frame"],
  [class*="nudge"],
  [class*="upgrade-count"] {
    min-height: 0 !important;
    min-width: 0 !important;
  }

  /* Data attribution / disclaimer links */
  .sr-data-attribution a,
  .sr-pricing-disclaimer a,
  [class*="disclaimer"] a,
  [class*="attribution"] a {
    min-height: 0 !important;
    min-width: 0 !important;
    display: inline !important;
  }

  /* Smart CTA inline elements — the CTA button itself keeps 44px,
     but text inside shouldn't create bubbles */
  .sr-smart-cta-card a:not([class*="btn"]):not([class*="cta-action"]),
  .sr-smart-cta-card span,
  .sr-smart-cta-card p {
    min-height: 0 !important;
    min-width: 0 !important;
  }

  /* Header search results links */
  .hn-search-results a {
    min-width: 0 !important;
  }

  /* Streak / gamification badges */
  [class*="streak"] span,
  [class*="streak"] a:not([class*="btn"]),
  [class*="game"] span,
  [class*="score"] span {
    min-height: 0 !important;
    min-width: 0 !important;
  }
}


/* ── 3. PRICING — Contrast fixes for pills/badges ──────────────────────
   Ensure all pricing pills have sufficient contrast (4.5:1 minimum)
   ──────────────────────────────────────────────────────────────────────── */

/* Savings row: emerald text on mint bg — darken for better contrast */
.pr-savings-row {
  color: #065F46 !important; /* emerald-800: 7.1:1 on #E6F9F3 */
  -webkit-text-fill-color: #065F46 !important;
}

/* Global savings badge in toggle area */
.pr-save-global-badge {
  color: #065F46 !important; /* emerald-800: 7.1:1 on #E6F9F3 */
  -webkit-text-fill-color: #065F46 !important;
}

/* OTP badge — emerald text on mint bg */
.pr-otp-badge {
  color: #065F46 !important;
  -webkit-text-fill-color: #065F46 !important;
}

/* Tier badges — on white bg, emerald border */
.pr-tier-badge {
  color: #065F46 !important;
  -webkit-text-fill-color: #065F46 !important;
}

/* Autopilot card — white text elements on dark gradient */
.pr-card--autopilot .pr-card-tag,
.pr-card--autopilot .pr-upgrade-count {
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
}

.pr-card--autopilot .pr-savings-row {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.15) !important;
}

.pr-card--autopilot .pr-annual-nudge {
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
}

.pr-card--autopilot .pr-testimonial {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
  border-left-color: rgba(255, 255, 255, 0.3) !important;
}

.pr-card--autopilot .pr-testimonial cite {
  color: rgba(255, 255, 255, 0.85) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}

.pr-card--autopilot .pr-loss-frame {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Feature head text — ensure readability */
.pr-feature-head {
  color: #4B5563 !important; /* gray-700: 7.5:1 on white */
  -webkit-text-fill-color: #4B5563 !important;
}

/* Card tag — small uppercase text, needs good contrast */
.pr-card-tag {
  color: #4B5563 !important;
  -webkit-text-fill-color: #4B5563 !important;
}

/* Upgrade count — social proof numbers */
.pr-upgrade-count {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}


/* ── 4. PRICING — Layout / spacing cleanup ─────────────────────────────
   Consistent card padding, proper alignment, clean gaps
   ──────────────────────────────────────────────────────────────────────── */

/* Ensure cards fill grid cells equally */
.pr-card {
  display: flex !important;
  flex-direction: column !important;
}

/* Feature list fills available space — push CTA and loss frame to bottom */
.pr-features {
  flex: 1 !important;
}

/* Testimonial consistent spacing */
.pr-testimonial {
  margin-bottom: 0.85rem !important;
}

/* Loss frame always at card bottom */
.pr-loss-frame {
  margin-top: auto !important;
}

/* Upgrade count — fix spacing at top of card */
.pr-upgrade-count {
  font-size: 0.72rem !important;
  margin-bottom: 0.3rem !important;
}


/* ── 5. PRICING — Fix "See details" / Autopilot card layout ──────────── */

/* Autopilot card features — ensure proper spacing */
.pr-card--autopilot .pr-features li {
  gap: 0.5rem !important;
}

/* Autopilot card inner spacing */
.pr-card--autopilot .pr-feature-head {
  color: rgba(255, 255, 255, 0.85) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}


/* ── 6. CENTERING — Ensure plans grid is centered at all breakpoints ── */

.pr-plans-section {
  display: flex !important;
  justify-content: center !important;
}

.pr-plans-inner {
  width: 100% !important;
  max-width: 1100px !important;
}

@media (max-width: 560px) {
  .pr-plans-inner {
    max-width: 420px !important;
  }
}