@charset "UTF-8";

/* ---------- 1. 読み込み中プレースホルダ ---------- */
#app .js-animation-loading_course,
#app .js-animation-loading_option,
#app .js-animation-loading_restore,
#app .js-animation-loading_reservation_dt,
#app .js-animation-loading_reservation_time {
  width: 100%;
  margin: 16px 0;
  border-radius: var(--rsv-radius);
  background-color: var(--rsv-bg-tint);
  background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 0) 100% );
  background-repeat: no-repeat;
  background-size: 200px 100%;
  background-position: -200px 0;
  animation: rsv-skeleton 1.2s ease-in-out infinite;
}

#app .js-animation-loading_course {
  min-height: 120px;
}

#app .js-animation-loading_option {
  min-height: 96px;
}

#app .js-animation-loading_restore {
  min-height: 240px;
}

#app .js-animation-loading_reservation_dt {
  min-height: 320px;
}

#app .js-animation-loading_reservation_time {
  min-height: 96px;
}

#app [class^="js-animation-loading"]:not(:empty) {
  min-height: 0;
  background: none;
  animation: none;
}

@keyframes rsv-skeleton {
  to {
    background-position: calc(100% + 200px) 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app [class^="js-animation-loading"] {
    animation: none;
  }
}

/* ---------- 2. 操作不可状態の統一 ---------- */
#app .calendar-header-frame .is-disabled,
#app #daily-calendar-button .is-disabled {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

/* ---------- 3. ローディング表示 ---------- */
#app [class^="js-animation-loading"] .block-loading {
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

#app .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}