/* Native mobile scroll rail for the three payment plans. */
.km-root .km-sp-slider-ui { display: none; }

@media (max-width: 959px) {
  .km-root #km-plans .km-payment-grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 4px 24px 18px 0;
    box-sizing: border-box;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 0;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .km-root #km-plans .km-payment-grid { scrollbar-color: #ffffffb3 transparent; }

  .km-root #km-plans .km-payment-card {
    flex: 0 0 calc(100% - 12px);
    box-sizing: border-box;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .km-root #km-plans .km-payment-ribbon { display: none !important; }

  /* A clipped peek must remain visible even when the page reveal observer has
     not yet intersected the next card inside this horizontal scroller. */
  .km-root #km-plans .km-payment-grid > .km-payment-card.km-enter {
    opacity: 1 !important;
    translate: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .km-root #km-plans .km-payment-grid > .km-payment-card .km-payment-saving {
    opacity: 1 !important;
    translate: none !important;
  }

  .km-root .km-sp-slider-ui {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 2px 0 0;
    min-width: 0;
  }
  .km-root .km-sp-slider-hint {
    margin: 0;
    color: #244050;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
  }
  .km-root #km-plans .km-sp-slider-hint { color: #fff; }
  .km-root .km-sp-slider-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
  }
  .km-root .km-sp-slider-status {
    color: #244050;
    font: 700 12px/1.5 'KM Inter', 'KM Noto Sans JP', sans-serif;
    min-width: 45px;
    text-align: center;
    white-space: nowrap;
  }
  .km-root #km-plans .km-sp-slider-status { color: #fff; }
  .km-root .km-sp-slider-nav button {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #3078ec;
    border-radius: 50%;
    background: #fff;
    color: #244050;
    font: 700 22px/1 'KM Noto Sans JP', sans-serif;
    cursor: pointer;
  }
  .km-root .km-sp-slider-nav button:disabled { opacity: .45; cursor: default; }
  .km-root .km-sp-slider-nav button:focus-visible,
  .km-root .km-payment-grid:focus-visible {
    outline: 3px solid #ffdf2c;
    outline-offset: 2px;
  }
}

@media (max-width: 359px) {
  .km-root .km-sp-slider-ui { gap: 5px; }
  .km-root .km-sp-slider-nav { gap: 4px; }
  .km-root .km-sp-slider-hint { font-size: 11px; }
}