/* =========================================================
   CLIPHORIUM_PRICING_COMPARE_MOBILE_FIX_V1
   Fixes the Compare table on iPhone:
   - prevents text overlap
   - enables smooth horizontal scroll
   - keeps it clean + premium
   ========================================================= */

@media (max-width: 860px){

  /* Try to catch any compare wrapper you use */
  .ch-compare,
  .pricing-compare,
  .compare,
  .compare-wrap,
  .pricing-compare-wrap{
    width: calc(100% - 28px) !important;
    max-width: 100% !important;
    margin: 16px auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 10px !important;
  }

  /* If you already have a table-wrap, use it */
  .ch-compare .table-wrap,
  .pricing-compare .table-wrap,
  .compare .table-wrap{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 18px !important;
  }

  /* Make the table wider than the phone so it can scroll */
  .ch-compare table,
  .pricing-compare table,
  .compare table{
    min-width: 860px !important; /* key fix: stops stacking/overlap */
    width: 860px !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  /* Keep plan columns readable */
  .ch-compare th,
  .pricing-compare th,
  .compare th,
  .ch-compare td,
  .pricing-compare td,
  .compare td{
    padding: 12px 12px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important; /* prevents “IncludedIncludedIncluded” overlap */
  }

  /* First column (capability) should wrap nicely */
  .ch-compare th:first-child,
  .pricing-compare th:first-child,
  .compare th:first-child,
  .ch-compare td:first-child,
  .pricing-compare td:first-child,
  .compare td:first-child{
    white-space: normal !important;
    width: 260px !important;
  }

  /* Give plan columns consistent width */
  .ch-compare th:not(:first-child),
  .pricing-compare th:not(:first-child),
  .compare th:not(:first-child),
  .ch-compare td:not(:first-child),
  .pricing-compare td:not(:first-child),
  .compare td:not(:first-child){
    width: 150px !important;
    text-align: center !important;
  }

  /* Soft edge fade so the scroll looks intentional/premium */
  .ch-compare::before,
  .pricing-compare::before,
  .compare::before{
    content:"";
    position: sticky;
    left: 0;
    display:block;
    width: 18px;
    height: 1px;
  }

}