/* =====================
   CF7 Stock Reservation Calendar Styles
   変更したい場合は以下の CSS 変数 or 各セクションを編集してください。
   ===================== */
:root{
  /* --- カラーバリエーション ----------------- */
  --cf7sr-date-bg: #f9f9f9;       /* 平日ヘッダー背景 */
  --cf7sr-sat-header-bg:#e8f4ff;  /* 土曜ヘッダー背景 */
  --cf7sr-sun-header-bg:#ffecec;  /* 日曜ヘッダー背景 */
  --cf7sr-time-bg: #F9F9F9;       /* 左側時間列背景 */
  --cf7sr-open-bg: #eafbe7;       /* ◯ の背景色 */
  --cf7sr-few-bg:  #fffbe6;       /* △ の背景色 */
  --cf7sr-full-bg: #F9F9F9;       /* ✕ の背景色 */
  --cf7sr-none-bg: #ffffff;       /* - の背景色 */
  --cf7sr-past-bg: #F9F9F9;       /* 過去枠背景色 */
  --cf7sr-active-bg: #cfe2ff;     /* 選択中枠背景色 */
  --cf7sr-border-color: #dddddd;  /* 罫線色 */
  --cf7sr-border-width: 1px;      /* 罫線太さ */
}

/* ========== ベーステーブルレイアウト ========= */
.cf7sr-cal{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:1.2rem; /* 12px (62.5%基準) */
  margin-bottom: 3rem;
}
.cf7sr-cal th,
.cf7sr-cal td{
  border:var(--cf7sr-border-width) solid var(--cf7sr-border-color);
  text-align:center;
  padding:0.8rem 0.6rem;
  font-size:1.2rem; /* 12px */
  line-height:1.4;
}
/* 平日ヘッダー */
.cf7sr-cal thead th{
  background:var(--cf7sr-date-bg);
  font-size:1.1rem; /* 11px - 日付部分を少し小さく */
  font-weight:500;
  padding:0.8rem 0.4rem;
}
.wday-sat{background:var(--cf7sr-sat-header-bg) !important;}
.wday-sun{background:var(--cf7sr-sun-header-bg) !important;}
/* 左側時間列 */
.cf7sr-cal tbody th{
  background:var(--cf7sr-time-bg);
  font-weight:normal;
  font-size:1.1rem; /* 11px - 時間部分を少し小さく */
  padding:0.8rem 0.6rem;
}

/* ========== ナビゲーション ========== */
.cf7sr-cal-nav{display:flex;gap:.6em;margin:.4em 0}
.cf7sr-cal-nav a{border:var(--cf7sr-border-width) solid var(--cf7sr-border-color);padding:.2em .6em;text-decoration:none}

/* ========== ステータス別セル背景 ========== */
.status-open  {background:var(--cf7sr-open-bg);}  /* 残席あり ◯ */
.status-few   {background:var(--cf7sr-few-bg);}   /* 残りわずか △ */
.status-full  {background:var(--cf7sr-full-bg);}  /* 満席 ✕ */
.status-empty {background:var(--cf7sr-none-bg);}  /* 予約枠なし - */
.status-past  {background:var(--cf7sr-past-bg);}  /* 過去枠 */

/* 選択中（アクティブ）枠 */
.cf7sr-cell.is-selected{background:var(--cf7sr-active-bg) !important;}

/* 第1希望選択中 */
.cf7sr-cell.is-selected-first{
  background: #cfe2ff !important;
  border: 2px solid #2196f3 !important;
  position: relative;
}
.cf7sr-cell.is-selected-first::after{
  content: '第1希望';
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 10px;
  font-weight: 700;
  color: #1976d2;
  background: rgba(255, 255, 255, 0.9);
  padding: 2px 4px;
  border-radius: 2px;
}

/* 第2希望選択中 */
.cf7sr-cell.is-selected-second{
  background: #fff4e6 !important;
  border: 2px solid #ff9800 !important;
  position: relative;
}
.cf7sr-cell.is-selected-second::after{
  content: '第2希望';
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 10px;
  font-weight: 700;
  color: #f57c00;
  background: rgba(255, 255, 255, 0.9);
  padding: 2px 4px;
  border-radius: 2px;
}

/* 選択モード表示 */
.cf7sr-mode-indicator{
  margin-bottom: 1rem;
  padding: 0.8rem;
  font-weight: 700;
  border-radius: 4px;
}
.cf7sr-mode-indicator.cf7sr-mode-first{
  background: #e3f2fd;
  border-left: 4px solid #2196f3;
  color: #1976d2;
}
.cf7sr-mode-indicator.cf7sr-mode-second{
  background: #fff3e0;
  border-left: 4px solid #ff9800;
  color: #f57c00;
}
.cf7sr-mode-indicator.cf7sr-mode-complete{
  background: #e8f5e9;
  border-left: 4px solid #4caf50;
  color: #388e3c;
}

.cf7sr-cell .cf7sr-pick{
  border:0;
  background:transparent;
  cursor:pointer;
  font:inherit;
  font-size:1.4rem; /* 14px - 記号（◯△×）のサイズ */
  line-height:1.2;
}

/* ========== モバイル調整 ========== */
.cf7sr-calendar-wrap{
  overflow-x:visible;
}

/* 固定ヘッダー部分 */
.cf7sr-calendar-header{
  position:relative;
  z-index:10;
}

/* カレンダースクロールラッパー */
.cf7sr-calendar-scroll-wrapper{
  position:relative;
  overflow-x:visible;
  -webkit-overflow-scrolling:touch;
}

/* 500px以下でカレンダー部分のみ横スクロール可能にする */
@media(max-width:500px){
  .cf7sr-calendar-wrap{
    overflow-x:visible;
  }
  
  .cf7sr-calendar-header{
    position:relative;
    width:100%;
    overflow-x:visible;
  }
  
  .cf7sr-calendar-scroll-wrapper{
    overflow-x:auto;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    position:relative;
    width:100%;
    /* スクロールバーを表示 */
    scrollbar-width:thin;
    scrollbar-color:#999 transparent;
  }
  
  .cf7sr-calendar-scroll-wrapper::-webkit-scrollbar{
    height:6px;
  }
  
  .cf7sr-calendar-scroll-wrapper::-webkit-scrollbar-track{
    background:transparent;
  }
  
  .cf7sr-calendar-scroll-wrapper::-webkit-scrollbar-thumb{
    background:#999;
    border-radius:3px;
  }
  
  .cf7sr-cal{
    font-size:1rem; /* 10px */
    min-width:600px;
    margin-bottom:3vw;
  }
  
  .cf7sr-cal th,
  .cf7sr-cal td{
    font-size:1rem; /* 10px */
    padding:0.6rem 0.4rem;
  }
  
  .cf7sr-cal thead th{
    font-size:0.9rem; /* 9px */
  }
  
  .cf7sr-cal tbody th{
    font-size:0.9rem; /* 9px */
  }
  
  .cf7sr-cell .cf7sr-pick{
    font-size:1.2rem; /* 12px */
  }
  
  /* スワイプ誘導アニメーション */
  .cf7sr-swipe-guide{
    position:absolute;
    top:1rem;
    right:1rem;
    background:rgba(100,100,100,0.9);
    color:#fff;
    padding:0.6rem 1rem;
    border-radius:20px;
    font-size:1rem;
    font-weight:700;
    white-space:nowrap;
    pointer-events:none;
    opacity:0;
    transition:opacity 0.3s ease-in-out;
    z-index:100;
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
  }
  
  .cf7sr-swipe-guide.is-visible{
    opacity:1;
    animation:cf7sr-swipe-pulse 2s ease-in-out infinite;
  }
  
  .cf7sr-swipe-guide .cf7sr-swipe-arrow{
    display:inline-block;
    margin-right:0.4rem;
    animation:cf7sr-swipe-arrow 1.5s ease-in-out infinite;
  }
  
  @keyframes cf7sr-swipe-pulse{
    0%,100%{
      transform:scale(1);
    }
    50%{
      transform:scale(1.05);
    }
  }
  
  @keyframes cf7sr-swipe-arrow{
    0%,100%{
      transform:translateX(0);
    }
    50%{
      transform:translateX(-10px);
    }
  }
}

@media(max-width:640px) and (min-width:501px){
  .cf7sr-cal{
    font-size:1rem; /* 10px */
    min-width:600px;
    margin-bottom:3vw;
  }
  .cf7sr-cal th,
  .cf7sr-cal td{
    font-size:1rem; /* 10px */
    padding:0.6rem 0.4rem;
  }
  .cf7sr-cal thead th{
    font-size:0.9rem; /* 9px */
  }
  .cf7sr-cal tbody th{
    font-size:0.9rem; /* 9px */
  }
  .cf7sr-cell .cf7sr-pick{
    font-size:1.2rem; /* 12px */
  }
}