/* =========================================
   空室確認カレンダー用スタイル
   =========================================

   このファイルは空室カレンダー機能に関連する
   すべてのスタイルを管理します。
   - ssi/avail.html のUI
   - js/availability_calendar.js と連携
========================================= */

/* =========================================
   ローディング表示
========================================= */
.matrix-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 0;
}
.matrix-loading img {
  max-width: 64px;
  height: auto;
}

/* =========================================
   空き状況マトリクス：高さを固定してスクロール
   （ヘッダー1行 + 本文8行 くらいが見える高さ）
========================================= */
#top #container .sec006#search #matrixContainer,
.sec006#search #matrixContainer{
  /* 1行あたり約44px想定。9行(=ヘッダー1 + 本文8) */
  max-height: calc(44px * 12);
  overflow-y: scroll;
  overflow-x: scroll; /* iOSはautoより確実 */
  -webkit-overflow-scrolling: touch; /* iOS Safari でタッチスクロールを有効化 */
  border: 1px solid var(--avail-border, #e4dccf);
  background: #B7B7B7;
}

/* スクロール中もヘッダー行が見えるように */
#top #container .sec006#search table.avail-matrix thead th,
.sec006#search table.avail-matrix thead th{
  position: sticky;
  top: 0;
  z-index: 8;
  background: #40341C;
  color: #fff;
  border-top: 3px solid #cfc7bb;
  /* 下線はセルのborderで描画する */
  box-shadow: none;
  background-clip: padding-box;
}

/* 左の時間列を固定 */
#top #container .sec006#search table.avail-matrix tbody th,
.sec006#search table.avail-matrix tbody th{
  position: sticky;
  left: 0;
  z-index: 4;
  background: #fff;
}

/* コーナーセル（「時間」）：縦横どちらのスクロールでも固定 */
#top #container .sec006#search table.avail-matrix thead th:first-child,
.sec006#search table.avail-matrix thead th:first-child{
  left: 0;
  z-index: 10; /* thead th(8) / tbody th(4) より高く */
}

/* スマホは画面が小さいので少し低めに */
@media (max-width: 500px){
  #top #container .sec006#search #matrixContainer,
  .sec006#search #matrixContainer{
    max-height: 55vh;
    overflow-y: scroll;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================================
   空室確認ウィジェット
========================================= */
#top #container .sec006#search .avail-widget,
.sec006#search .avail-widget{
  font-family: "Segoe UI", sans-serif;
  padding: 20px;
  background: #faf8f1;
  color: #383635;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: left;
}

#top #container .sec006#search .avail-desc,
.sec006#search .avail-desc{
  margin: 0 0 16px;
  color: #6b5f4a;
}

/* スマホ用：空き状況パネル内の説明文（デフォルト非表示） */
.avail-desc-sp {
  display: none;
  margin: 0 0 10px;
  color: #6b5f4a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}

#top #container .sec006#search .avail-layout,
.sec006#search .avail-layout{
  display: grid;
  gap: 16px;
}

#top #container .sec006#search .avail-panel,
.sec006#search .avail-panel{
  background: #fff;
  border: 1px solid #e2e7ef;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
  box-sizing: border-box;
}


/* 予約状況見出し行（空き状況 + タグ） */
#top #container .sec006#search .avail-status-header,
.sec006#search .avail-status-header{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

/* タグ（選択日、凡例など） */
#top #container .sec006#search .avail-tag,
.sec006#search .avail-tag{
  display: inline-block;
  background: #f1ede3;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  color: #5b4927;
}

/* カレンダー */
#top #container .sec006#search .avail-cal-header,
.sec006#search .avail-cal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#top #container .sec006#search .avail-cal-header button,
.sec006#search .avail-cal-header button{
  background: #5b4927;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}

#top #container .sec006#search .avail-cal-header button:disabled,
.sec006#search .avail-cal-header button:disabled{
  background: #d9d9d9;
  color: #777777;
  opacity: 1;
  cursor: not-allowed;
}

#top #container .sec006#search .avail-cal-grid,
.sec006#search .avail-cal-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 10px;
}

#top #container .sec006#search .avail-day-name,
.sec006#search .avail-day-name{
  text-align: center;
  font-size: 12px;
  color: #6b7687;
}

#top #container .sec006#search .avail-date-cell,
.sec006#search .avail-date-cell{
  text-align: center;
  padding: 10px 0;
  background: #f5f0e6;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}

#top #container .sec006#search .avail-date-cell.today,
.sec006#search .avail-date-cell.today{
  outline: 2px solid #5b4927;
}

#top #container .sec006#search .avail-date-cell.selected,
.sec006#search .avail-date-cell.selected{
  background: #5b4927;
  color: #fff;
}

/* 過去日（選択不可） */
#top #container .sec006#search .avail-date-cell.disabled,
.sec006#search .avail-date-cell.disabled{
  opacity: 0.35;
  background: #eeeeee;
  color: #9a9a9a;
  cursor: not-allowed;
}

/* 空き状況マトリクス */
#top #container .sec006#search table.avail-matrix,
.sec006#search table.avail-matrix{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 0;
  font-size: 20px;
  /* stickyヘッダー下に出る隙間の色をボーダー色に揃える */
  background: #cfc7bb;
}

#top #container .sec006#search table.avail-matrix th,
#top #container .sec006#search table.avail-matrix td,
.sec006#search table.avail-matrix th,
.sec006#search table.avail-matrix td{
  /* border-collapse: separate 前提で、線を二重にしない */
  border: 0;
  border-right: 3px solid #cfc7bb;
  border-bottom: 3px solid #cfc7bb;
  padding: 15px;
  text-align: center;
  font-weight: 400;
}

/* 先頭列だけ外枠を補う */
#top #container .sec006#search table.avail-matrix th:first-child,
#top #container .sec006#search table.avail-matrix td:first-child,
.sec006#search table.avail-matrix th:first-child,
.sec006#search table.avail-matrix td:first-child{
  border-left: 3px solid #cfc7bb;
}

#top #container .sec006#search table.avail-matrix th,
.sec006#search table.avail-matrix th{
  background: #fff;
  font-weight: 500;
  font-size: large;
}

#top #container .sec006#search td.avail-busy,
.sec006#search td.avail-busy{
  background: #B7B7B7;
  color: #b10000;
}

#top #container .sec006#search td.avail-free,
.sec006#search td.avail-free{
  cursor: pointer;
  background: #fff7e6;
}

/* 仮予約（〇と×の中間色） */
#top #container .sec006#search td.avail-provisional,
.sec006#search td.avail-provisional{
  background: #DBD7CF;
  color: #40341C;
  cursor: not-allowed;
  font-size: 0.95em;
  font-weight: 1000;
}

/* 現在時刻以前（過去スロット） */
#top #container .sec006#search td.avail-past,
.sec006#search td.avail-past{
  background: #B7B7B7;
  color: #9a9a9a;
  cursor: not-allowed;
}

#top #container .sec006#search td.avail-selected,
.sec006#search td.avail-selected{
  background: #5B4927;
  font-weight: 700;
  vertical-align: top; /* 結合セルの上に寄せる */
  padding-top: 12px;    /* 「選択中」を上部に */
  color: #ffffff;
}


/* マトリクス：日付選択後のコンテナ余白 */
#top #container .sec006#search .avail-matrix-container,
.sec006#search .avail-matrix-container{
  margin-top: 8px;
}

#top #container .sec006#search .avail-matrix-wrap,
.sec006#search .avail-matrix-wrap{
  position: relative;
}

#top #container .sec006#search .avail-loading,
.sec006#search .avail-loading{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}

#top #container .sec006#search .avail-matrix-wrap.is-loading .avail-loading,
.sec006#search .avail-matrix-wrap.is-loading .avail-loading{
  opacity: 1;
  pointer-events: all;
}

#top #container .sec006#search .avail-spinner,
.sec006#search .avail-spinner{
  width: 32px;
  height: 32px;
  background: url("images/bx_loader.gif") center center no-repeat;
  background-size: contain;
  border: 0;
  border-radius: 0;
  animation: none;
}

@keyframes avail-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  #top #container .sec006#search .avail-spinner,
  .sec006#search .avail-spinner{
    animation: none;
  }
}

/* 選択中の枠（サマリー） */
#top #container .sec006#search .avail-summary table,
.sec006#search .avail-summary table{
  width: 100%;
  border-collapse: collapse;
}

#top #container .sec006#search .avail-summary th,
#top #container .sec006#search .avail-summary td,
.sec006#search .avail-summary th,
.sec006#search .avail-summary td{
  border: 1px solid #cfc7bb;
  padding: 6px;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
}

#top #container .sec006#search .avail-summary th,
.sec006#search .avail-summary th{
  background: #f1ede3;
}

#top #container .sec006#search .avail-summary-actions,
.sec006#search .avail-summary-actions{
  text-align: right;
  margin-top: 12px;
}

/* ボタン */
#top #container .sec006#search .avail-btn-primary,
.sec006#search .avail-btn-primary{
  background: #5b4927;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
}

#top #container .sec006#search .avail-btn-primary:disabled,
.sec006#search .avail-btn-primary:disabled{
  background: #b6ab97;
  cursor: not-allowed;
}

#top #container .sec006#search .avail-small-btn,
.sec006#search .avail-small-btn{
  border: none;
  background: #e74c3c;
  color: #fff;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
}

#top #container .sec006#search .avail-small-btn--gray,
.sec006#search .avail-small-btn--gray{
  background: #7f8c8d;
}

/* モーダル */
#top #container .sec006#search .avail-modal-backdrop,
.sec006#search .avail-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

#top #container .sec006#search .avail-modal,
.sec006#search .avail-modal{
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  width: 320px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

#top #container .sec006#search .avail-modal h3,
.sec006#search .avail-modal h3{
  margin: 0 0 10px;
}

#top #container .sec006#search .avail-modal-row,
.sec006#search .avail-modal-row{
  margin-bottom: 10px;
  font-size: 14px;
}

#top #container .sec006#search .avail-modal select,
.sec006#search .avail-modal select{
  width: 100%;
  padding: 6px;
}

#top #container .sec006#search .avail-modal-actions,
.sec006#search .avail-modal-actions{
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

/* ルーム名：デスクトップはフル表示、スマホは短縮表示 */
.avail-room-short { display: none; }
.avail-room-full  { display: inline; }

/* レスポンシブ */
@media (max-width: 768px) {
  /* grid blowout 防止: テーブルが広くてもパネルがページをはみ出さないよう min-width を 0 に */
  #top #container .sec006#search .avail-panel,
  .sec006#search .avail-panel{
    min-width: 0;
  }

  /* ウィジェット全体の余白を縮める */
  #top #container .sec006#search .avail-widget,
  .sec006#search .avail-widget{
    padding: 10px;
  }

  /* マトリクステーブル：フォントサイズとセルpadding縮小 */
  #top #container .sec006#search table.avail-matrix,
  .sec006#search table.avail-matrix{
    font-size: 11px;
  }

  #top #container .sec006#search table.avail-matrix th,
  #top #container .sec006#search table.avail-matrix td,
  .sec006#search table.avail-matrix th,
  .sec006#search table.avail-matrix td{
    padding: 8px 4px;
  }

  /* th の font-size: large をモバイルでリセット・Room表示は小さめに */
  #top #container .sec006#search table.avail-matrix th,
  .sec006#search table.avail-matrix th{
    font-size: 9px;
    white-space: nowrap;
    min-width: 45px;
  }

  /* 貸切列の幅を他のRoom列と統一 */
  #top #container .sec006#search table.avail-matrix td,
  .sec006#search table.avail-matrix td{
    min-width: 45px;
  }

  /* ルーム名：スマホでもフル表示（"Room A"等）を維持 */
  .avail-room-full  { display: inline; }
  .avail-room-short { display: none; }

  /* ○/× アイコン（疑似要素）をモバイルサイズに縮小 */
  #top #container .sec006#search td.avail-free::before,
  #top #container .sec006#search td.avail-busy::before,
  .sec006#search td.avail-free::before,
  .sec006#search td.avail-busy::before{
    font-size: 18px;
  }

  /* 選択中のご利用枠 テーブルのフォントサイズ縮小 */
  #top #container .sec006#search .avail-summary th,
  #top #container .sec006#search .avail-summary td,
  .sec006#search .avail-summary th,
  .sec006#search .avail-summary td{
    font-size: 13px;
    padding: 5px 6px;
  }

  /* スマホ：上部の説明文を非表示、空き状況パネル内に表示 */
  #top #container .sec006#search .avail-desc,
  .sec006#search .avail-desc{
    display: none;
  }
  .avail-desc-sp {
    display: block;
  }

  #top #container .sec006#search .avail-cal-grid,
  .sec006#search .avail-cal-grid{
    gap: 4px;
  }

  #top #container .sec006#search .avail-date-cell,
  .sec006#search .avail-date-cell{
    padding: 8px 0;
  }
}

/* =========================================
   Google Material Icons
   （ligature方式：textをアイコンに変換）
========================================= */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 15px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* タグ内（○=空き/×=予約不可）のアイコンは少し小さめ */
#top #container .sec006#search .avail-tag .material-icons,
.sec006#search .avail-tag .material-icons{
  font-size: 10px;
  vertical-align: middle;
}

/* 凡例の仮予約表示 */
#top #container .sec006#search .avail-legend-provisional,
.sec006#search .avail-legend-provisional{
  display: inline-block;
  background: #DBD7CF;
  color: #40341C;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  vertical-align: middle;
}

/* 仮予約の注釈 */
#top #container .sec006#search .avail-provisional-note,
.sec006#search .avail-provisional-note{
  color: #40341C;
  font-size: 12px;
  font-weight: 600;
  margin: 4px 0 0;
}

/* ○/× 表示（Google Material Icons で表示） */
#top #container .sec006#search td.avail-free,
#top #container .sec006#search td.avail-busy,
.sec006#search td.avail-free,
.sec006#search td.avail-busy{
  position: relative;
  color: transparent; /* 元のセル文字（○/×）は見えないようにする */
  text-align: center;
}

/* 疑似要素に Material Icons を適用（共通） */
#top #container .sec006#search td.avail-free::before,
#top #container .sec006#search td.avail-busy::before,
.sec006#search td.avail-free::before,
.sec006#search td.avail-busy::before{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Material Icons';
  font-weight: 700;
  font-style: normal;
  font-size: 32px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  color: #40341C;
  pointer-events: none;
  text-align: center;
}

#top #container .sec006#search td.avail-free::before,
.sec006#search td.avail-free::before{
  content: "radio_button_unchecked";
}

#top #container .sec006#search td.avail-busy::before,
.sec006#search td.avail-busy::before{
  content: "close";
}

.avail-summary-title{
    margin:0 0 15px;
    font-weight: 700;
}

/* =========================================
   ご請求予定金額テーブル
========================================= */
.estimated_amount_table{
  width: 100%;
  max-width: none;
  border-collapse: collapse;
  margin-top: 6px;
}
.estimated_amount_table th,
.estimated_amount_table td{
  border: 1px solid #e4dccf;
  padding: 10px 12px;
  font-size: 1.4rem;
}
.estimated_amount_table th{
  width: 40%;
  text-align: left;
  background: #faf8f1;
  font-weight: 700;
}
.estimated_amount_table td{
  text-align: right;
  font-weight: 700;
}
.estimated_amount_table tr.total th,
.estimated_amount_table tr.total td{
  font-size: 1.6rem;
  font-weight: 900;
}

#calculate-price-button{
  max-width: 240px;
  padding: 12px 16px;
}

#estimated_amount_note{
  margin-top: 10px;
}

/* 計算ボタン：中央寄せ＋上下余白 */
#estimated_amount_wrap .controls_container{
  display: flex;
  flex-direction: column;
}

#estimated_amount_wrap #calculate-price-button{
  display: block;
  align-self: center;
  margin: 16px auto;
}