/* YAEYAMA BASE CORE – 海色の予約先選択モーダル（既存スタイルを変更しない） */
.ybc-booking-modal,
.ybc-booking-modal * { box-sizing: border-box; }
.ybc-booking-modal[hidden] { display: none !important; }
.ybc-booking-modal {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  padding: 24px;
  font-family: 'Zen Maru Gothic', sans-serif;
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s ease, visibility .32s ease;
}
.ybc-booking-modal.is-open { opacity: 1; visibility: visible; }
.ybc-booking-mask {
  position: absolute;
  inset: 0;
  background: rgba(38, 111, 128, .25);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.ybc-booking-panel {
  isolation: isolate;
  position: relative;
  width: min(100%, 510px);
  max-height: min(90dvh, 760px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(31px, 5vw, 44px) clamp(23px, 5vw, 42px) clamp(25px, 4vw, 38px);
  border: 2px solid #fff;
  border-radius: 18px;
  background: linear-gradient(135deg, #f4fcfd 0%, #e8f8fa 50%, #daf2f6 100%);
  box-shadow: 0 16px 56px rgba(20, 90, 111, .22), 0 4px 14px rgba(36, 120, 141, .10);
  transform: translateY(14px) scale(.89);
  transition: transform .4s cubic-bezier(.19, 1.35, .32, 1);
  font-family: 'Zen Maru Gothic', sans-serif;
  color: #245668;
}
.ybc-booking-modal.is-open .ybc-booking-panel { transform: translateY(0) scale(1); }
.ybc-booking-panel::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -55%;
  background: radial-gradient(circle, rgba(115, 203, 219, .25) 0%, rgba(115, 203, 219, .08) 39%, transparent 67%);
  animation: ybcBookingFloat 7s ease-in-out infinite;
}
.ybc-booking-panel::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 250px;
  height: 250px;
  right: -95px;
  bottom: -105px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .63), transparent 70%);
}
@keyframes ybcBookingFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(12px, -9px) rotate(120deg); }
  66% { transform: translate(-7px, 8px) rotate(240deg); }
}
.ybc-booking-content { position: relative; z-index: 1; text-align: center; }
.ybc-booking-eyebrow {
  margin: 0 0 7px;
  color: #4f9daf;
  font: 500 12px/1.5 'Zen Maru Gothic', sans-serif;
  letter-spacing: .15em;
}
.ybc-booking-panel h2 {
  margin: 0 0 12px;
  color: #245d70;
  font: 500 clamp(23px, 5vw, 29px)/1.5 'Zen Maru Gothic', sans-serif;
  letter-spacing: .045em;
}
.ybc-booking-description {
  margin: 0 0 25px;
  color: #477b8a;
  font: 400 14px/1.8 'Zen Maru Gothic', sans-serif;
}
.ybc-booking-links { display: grid; grid-template-columns: 1fr; gap: 13px; }
.ybc-booking-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 10px 32px 10px 18px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .84);
  background: linear-gradient(135deg, #88d2dd 0%, #55b7cc 48%, #268eae 100%);
  color: #fff;
  box-shadow: 0 5px 15px rgba(51, 144, 170, .23);
  text-decoration: none;
  font: 500 16px/1.5 'Zen Maru Gothic', sans-serif;
  letter-spacing: .025em;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.ybc-booking-link[href]:hover,
.ybc-booking-link[href]:focus-visible {
  background: linear-gradient(135deg, #53b9cc 0%, #2493b1 55%, #176d98 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(39, 124, 153, .30);
  color: #fff;
  text-decoration: none;
}
.ybc-booking-link[href]::after {
  content: '↗';
  position: absolute;
  right: 19px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
}
.ybc-booking-link.is-unavailable {
  background: rgba(183, 221, 229, .43);
  color: #608e9d;
  border: 1px solid rgba(255, 255, 255, .94);
  box-shadow: none;
  cursor: default;
  min-height: 64px;
  pointer-events: none;
  flex-direction: column;
  padding: 8px 18px;
  gap: 2px;
}
.ybc-booking-state { font: 400 11px/1.4 'Zen Maru Gothic', sans-serif; }
.ybc-booking-state:empty { display: none; }
.ybc-booking-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #5ab6c7;
  color: #fff;
  font: 400 23px/1 'Zen Maru Gothic', sans-serif;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease;
}
.ybc-booking-close:hover,
.ybc-booking-close:focus-visible { background: #248da8; transform: scale(1.07); }
.ybc-booking-legacy {
  display: inline-block;
  margin-top: 15px;
  padding: 4px 2px;
  color: #226f88;
  font: 400 13px/1.7 'Zen Maru Gothic', sans-serif;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ybc-booking-legacy[hidden] { display: none; }
.ybc-booking-footnote {
  margin: 21px 0 0;
  color: #7095a0;
  font: 400 11px/1.7 'Zen Maru Gothic', sans-serif;
}
body.ybc-booking-modal-open { overflow: hidden; }
@media (max-width: 480px) {
  .ybc-booking-modal { padding: 15px; }
  .ybc-booking-panel { width: 100%; padding: 36px 20px 28px; border-radius: 17px; }
  .ybc-booking-panel h2 { font-size: 24px; }
  .ybc-booking-description { font-size: 13px; margin-bottom: 22px; }
  .ybc-booking-link { min-height: 53px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .ybc-booking-modal, .ybc-booking-panel, .ybc-booking-link, .ybc-booking-close { transition: none; }
  .ybc-booking-panel::before { animation: none; }
}
/* 元の予約ボタンがbuttonに切り替わった場合もクリック可能な見た目にする。 */
.header-book[aria-haspopup='dialog'],
.facility-floor-booking .pill-button[aria-haspopup='dialog'],
body.single-facility .detail-spec .pill-button[aria-haspopup='dialog'] { cursor: pointer; }