/* NPSCare's three mobile swipe areas only — 16 October 2026.
   No original layout, styles, or card markup is changed at desktop widths. */
.care-swipe-meta,
.care-swipe-controls { display: none; }

@media (max-width: 800px) {
  /* Native horizontal scrolling preserves normal vertical page scrolling. */
  .care-page .care-process .process-grid,
  .care-page .care-benefits .feature-grid.four,
  .care-page .care-plans .plans-grid {
    --care-swipe-card-width: min(80vw, 410px);
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    max-width: none;
    gap: 12px;
    margin: 0;
    padding: 5px 1px 13px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .care-page .care-process .process-grid::-webkit-scrollbar,
  .care-page .care-benefits .feature-grid.four::-webkit-scrollbar,
  .care-page .care-plans .plans-grid::-webkit-scrollbar { display: none; }

  /* The last card can snap all the way to the left, just like the first. */
  .care-page .care-process .process-grid::after,
  .care-page .care-benefits .feature-grid.four::after,
  .care-page .care-plans .plans-grid::after {
    content: '';
    flex: 0 0 max(0px, calc(100% - var(--care-swipe-card-width) - 12px));
    pointer-events: none;
  }
  .care-page .care-process .process-grid > .process-card,
  .care-page .care-benefits .feature-grid.four > .feature-card,
  .care-page .care-plans .plans-grid > .plan-card {
    box-sizing: border-box;
    flex: 0 0 var(--care-swipe-card-width);
    min-width: 0;
    width: auto;
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
  .care-page .care-process .process-grid > .process-card { min-height: 244px; }
  .care-page .care-benefits .feature-grid.four > .feature-card { min-height: 218px; }
  .care-page .care-plans .plans-grid > .plan-card { min-height: 265px; }

  /* Hint, position counter, dots, and optional arrow controls match the
     already-approved Home service swipe interaction, adapted to dark cards. */
  .care-swipe-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0 0 9px;
  }
  .care-swipe-hint {
    color: #65c8de;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
  }
  .care-swipe-hint-arrow { margin-right: 7px; font-size: 16px; vertical-align: -1px; }
  .care-swipe-counter {
    color: #9caeb4;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .1em;
    white-space: nowrap;
  }
  .care-swipe-counter-current { color: #65c8de; }
  .care-swipe-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
  }
  .care-swipe-arrow {
    appearance: none;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #65c8de;
    background: #181e22;
    border: 1px solid #3a494f;
    border-radius: 50%;
    cursor: pointer;
  }
  .care-swipe-arrow svg { width: 19px; height: 19px; }
  .care-swipe-arrow:disabled { color: #657478; opacity: .55; cursor: default; }
  .care-swipe-dots {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
  }
  .care-swipe-dot {
    appearance: none;
    flex: 0 0 26px;
    width: 26px;
    height: 42px;
    border: 0;
    border-radius: 20px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
  }
  .care-swipe-dot span {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 9px;
    background: #65767c;
    transition: width .2s ease, background-color .2s ease;
  }
  .care-swipe-dot[aria-current="true"] span {
    width: 17px;
    background: #46bfd9;
  }
  .care-swipe-arrow:focus-visible,
  .care-swipe-dot:focus-visible,
  .care-page .care-process .process-grid:focus-visible,
  .care-page .care-benefits .feature-grid.four:focus-visible,
  .care-page .care-plans .plans-grid:focus-visible {
    outline: 3px solid #54cee4;
    outline-offset: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .care-swipe-dot span { transition: none; }
  .care-page .care-process .process-grid,
  .care-page .care-benefits .feature-grid.four,
  .care-page .care-plans .plans-grid { scroll-behavior: auto; }
}