/* Pricing carousel, mobile only.
   Above 520px the plans stay a comparison grid (styles.css). At <=520px, where
   they would stack into one long column, they become a swipeable carousel with
   arrows and dots showing one plan at a time. Loaded after styles.css so the
   flex track overrides the 1-column grid. */

.pc-controls{ display: none; }

@media (max-width: 520px){
  #pricing .plans{
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -4px;      /* let a card breathe to the edges */
    padding: 2px 4px 4px;
  }
  #pricing .plans::-webkit-scrollbar{ display: none; }
  #pricing .plans > .plan{
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: center;
  }

  .pc-controls{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
  }
  .pc-arrow{
    width: 40px; height: 40px; flex: 0 0 auto;
    display: grid; place-items: center; cursor: pointer;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-rgb), 0.30);
    background: #fff; color: var(--accent);
    transition: opacity .15s ease, background .15s ease, transform .1s ease;
  }
  .pc-arrow:active{ transform: scale(0.94); }
  .pc-arrow:disabled{ opacity: .32; cursor: default; }
  .pc-dots{ display: flex; align-items: center; gap: 7px; }
  .pc-dot{
    width: 7px; height: 7px; padding: 0; border: 0; cursor: pointer;
    border-radius: 999px; background: rgba(var(--accent-rgb), 0.28);
    transition: width .18s ease, background .18s ease;
  }
  .pc-dot.is-on{ width: 22px; background: var(--accent); }
}