/* ═══════════════════════════════════════════════════════════════════════════
   P0 MOBILE FIXES FOR 375px RESPONSIVE BREAKPOINT
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   P0-1: PRICING TABLE HEADERS INVISIBLE ON MOBILE (375px)
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 375px) {
  /* Fix: Add visible plan headers/labels to pricing comparison table cells on mobile */
  .cmp-table-wrap {
    overflow-x: visible;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }

  .cmp-table {
    display: block;
    width: 100%;
    min-width: auto;
    border-collapse: separate;
    border-spacing: 0;
  }

  .cmp-table thead {
    display: none;
  }

  .cmp-table tbody {
    display: block;
    width: 100%;
  }

  .cmp-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 1rem;
    padding: 0;
    border-bottom: none !important;
  }

  .cmp-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .cmp-table td {
    display: block;
    padding: 0.75rem 0.75rem;
    text-align: left;
    border-bottom: none !important;
    font-size: 0.8rem;
    color: #374151;
    word-wrap: break-word;
  }

  .cmp-table td:first-child {
    grid-column: 1 / -1;
    padding: 1rem 0.75rem;
    font-weight: 600;
    color: #111827;
    background: #fafbfc;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 8px 8px 0 0;
  }

  .cmp-table td:last-child {
    border-bottom: none;
    padding-bottom: 0.75rem;
  }

  .cmp-table td.cmp-td--feature {
    background: #fafbfc;
    font-weight: 700;
    color: #111827;
    grid-column: 1 / -1;
    padding: 1rem 0.75rem;
    border-radius: 8px 8px 0 0;
  }

  /* Add visible plan labels via ::before pseudo-elements with data attributes */
  .cmp-table td[data-plan]::before {
    content: attr(data-plan);
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    opacity: 0.8;
  }

  /* Fallback labels for each plan type based on column position */
  .cmp-table tbody tr td:nth-child(2)::before {
    content: 'FREE';
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
  }

  .cmp-table tbody tr td:nth-child(3)::before {
    content: 'PRO';
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #22c55e;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
  }

  .cmp-table tbody tr td:nth-child(4)::before {
    content: 'PRO+';
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #22c55e;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
  }

  .cmp-table tbody tr td:nth-child(5)::before {
    content: 'FAMILY';
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #22c55e;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
  }

  /* Ensure checkmarks and X marks are readable */
  .cmp-table .cmp-yes,
  .cmp-table .cmp-yes-gold,
  .cmp-table .cmp-yes-indigo,
  .cmp-table .cmp-no {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    font-size: 0.85rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   P0-3: PAYOUT CALCULATOR TEXT OVERFLOW ON MOBILE (375px)
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 375px) {
  /* Fix: Reduce font sizes and ensure proper text wrapping for 375px screens */
  .pc-table-header {
    display: none;
  }

  .pc-desktop-only {
    display: none !important;
  }

  .pc-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }

  /* Make all row sections stack vertically and show labels */
  .pc-row-settlement {
    padding-bottom: 4px;
  }

  .pc-row-title {
    font-size: 13px;
  }

  .pc-row-fund {
    font-size: 12px;
    padding: 4px 0;
  }

  .pc-row-fund::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    color: #475569;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2px;
  }

  .pc-row-claimants {
    font-size: 12px;
    padding: 4px 0;
  }

  .pc-row-claimants::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    color: #475569;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2px;
  }

  /* P0-3: Fix "EST. PER PERSON" text overflow */
  .pc-row-payout {
    font-size: 13px;
    padding: 4px 0;
    word-wrap: break-word;
    white-space: normal;
  }

  .pc-row-payout::before {
    content: 'EST. PER PERSON';
    display: block;
    font-size: 10px;
    color: #475569;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2px;
  }

  .pc-row-deadline {
    font-size: 12px;
    padding: 4px 0;
  }

  .pc-row-deadline::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    color: #475569;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2px;
  }

  .pc-row-cta {
    justify-content: flex-start;
    margin-top: 4px;
  }

  .pc-row-cta-btn {
    font-size: 12px;
    padding: 6px 12px;
  }

  /* Adjust search bar for 375px */
  .pc-search-input {
    max-width: 100%;
    font-size: 13px;
    padding: 8px 12px;
  }

  /* Adjust hero for 375px */
  .pc-hero h1 {
    font-size: 22px;
  }

  .pc-hero-sub {
    font-size: 14px;
  }

  .pc-how-step {
    gap: 8px;
  }

  .pc-how-step strong {
    font-size: 12px;
  }

  .pc-how-step span {
    font-size: 10px;
  }

  .pc-email-text {
    font-size: 12px;
  }

  .pc-email-input {
    width: 150px;
    font-size: 12px;
    padding: 6px 10px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   P0-2: SETTLEMENT DETAIL 2-COLUMN LAYOUT DOESN'T COLLAPSE (375px)
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 375px) {
  /* Fix: Collapse all 2-column layouts to single column */

  /* Common multi-column layouts */
  [class*="col-"], [class*="cols-"],
  [class*="grid-"], [style*="grid-template-columns"],
  [style*="columns:"], [style*="display: flex"][style*="gap"] {
    display: block !important;
    column-count: 1 !important;
  }

  /* Flex layouts that might create 2-column effect */
  .detail-content,
  .detail-row,
  .settlement-details,
  [class*="detail"][class*="flex"],
  [class*="detail"][class*="grid"] {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Ensure text content is fully readable */
  .settlement-detail-section,
  .settlement-section,
  [class*="detail-section"] {
    margin-bottom: 1rem;
  }

  /* Ensure modal/card sections don't create 2-column effect */
  .settlement-card,
  .detail-card,
  [class*="detail-card"] {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* Fix horizontal scrolling by constraining content width */
  main, .container, [role="main"] {
    width: 100vw;
    overflow-x: hidden;
  }

  /* Ensure inline styles don't create overflow */
  [style*="width: 646px"],
  [style*="width:646px"],
  [style*="min-width: 646px"],
  [style*="min-width:646px"] {
    width: 100% !important;
    min-width: 100% !important;
  }

  /* Fix any flex containers that might cause 2-column layout */
  .flex-row,
  [style*="display: flex"][style*="flex-row"],
  [style*="display: flex"][style*="gap"] {
    flex-direction: column !important;
    gap: 1rem !important;
  }
}