@charset "utf-8";
/* =================================================================
   CombPass Base Styles
   ================================================================= */
.cbp-wrap {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Hiragino Sans', 'Yu Gothic UI', 'Helvetica Neue', Arial, sans-serif;
  color: #333;
}

.cbp-label {
  margin: 0 0 0.75rem;
  font-weight: 700;
  font-size: 1.1rem;
  color: #2c3e50;
}

/* =================================================================
   Slot Grid
   ================================================================= */
.cbp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
  transition: opacity 0.2s ease;
}

.cbp-group-head {
  grid-column: 1 / -1;
  font-weight: 700;
  margin: 1rem 0 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid #f0f0f0;
  color: #333;
}

/* =================================================================
   Slot Button
   ================================================================= */
.cbp-slot {
position: relative;
  appearance: none;
  border: 1px solid #ddd;
  background: #fff;
  text-align: left;
  width: 100%;
  font-size: inherit;
  font-family: inherit;
  margin: 0;
  
  border-radius: 12px;
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
}

.cbp-slot:not(.soldout):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #007cba;
}

/* Slot States */
.cbp-slot.low {
  border-color: #ffb900;
  background-color: #fffaf0;
}

.cbp-slot.soldout {
  color: #aaa;
  background-color: #f9f9f9;
  cursor: not-allowed;
  opacity: 0.8;
}

/* --- UX改善：AJAX処理中のグリッド --- */
.cbp-grid.cbp-processing .cbp-slot:not(.active) {
  opacity: 0.5;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

/* --- UX改善：クリック中のスロット --- */
.cbp-grid .cbp-slot.active {
  background-color: #007cba;
  border-color: #006ba1;
  cursor: wait;
}

.cbp-slot .time {
  font-weight: 600;
  color: #181818;
}

.cbp-slot .stock {
  white-space: nowrap;
  margin-left: 0.5rem;
  font-weight: 500;
}

/* Stock status color hints */
.cbp-slot .stock { color: #191919; }
.cbp-slot.ok .stock { color: #27ae60; }
.cbp-slot.low .stock { color: #d35400; }
.cbp-slot.soldout .stock { color: #95a5a6; }

/* =================================================================
   Banner / Toast Notification
   ================================================================= */
.cbp-banner {
  margin-top: 1rem;
  display: none; /* Controlled by JS */
}

.cbp-toast {
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.cbp-toast-error {
  background-color: #fff5f5;
  border-color: #ffb8b8;
  color: #c52222;
}
.cbp-toast-error strong {
  color: #c52222;
}

/* =================================================================
   Check-in Page (Admin)
   ================================================================= */
.cbp-checkin input[type=text] {
  width: 100%;
  max-width: 480px;
  padding: 10px;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
#cbp-checkin-result .notice {
  margin-top: 1rem;
}

/* =================================================================
   QR Code Display
   ================================================================= */
.cbp-qr {
  text-align: center;
  margin: 2rem auto;
  max-width: 300px;
}
#cbp-qr-code {
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  margin-bottom: 1rem;
}
#cbp-qr-code canvas {
  display: block;
  margin: 0 auto;
}

/* =================================================================
   スロット内の配置
   ================================================================= */
.cbp-slot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.cbp-slot .time {
  margin-bottom: 0.25rem;
}

/* アクティブ状態での調整 */
.cbp-slot.active .cbp-slot-inner .time {
  font-size: 1rem;
}

/* =================================================================
   選択中スロットのスタイル
   ================================================================= */
.cbp-slot.is-selected {
  border-color: #007cba;
  background-color: #e5f5ff;
  box-shadow: 0 0 0 2px #007cba inset;
}
.cbp-slot.is-selected .time {
  color: #005a87;
}
.cbp-slot.is-selected .stock {
  color: #005a87;
  font-weight: 700;
}

/* =================================================================
   カートアクションバー
   ================================================================= */
.cbp-cart-actions {
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  padding: 1rem;
  border-top: 1px solid #eee;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
  text-align: center;
  z-index: 100;

  display: flex;
  justify-content: space-between;
  align-items: center;
    margin-top: 2em;
}

.cbp-cart-actions .cbp-button {
  color: #fff;
  border: none;
    padding: 9px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cbp-cart-actions .cbp-button:hover {
}

.cbp-cart-actions .cbp-button:disabled {
  background-color: #bdc3c7;
  cursor: not-allowed;
}

/* タイマー表示 */
.cbp-timer {
  font-weight: 500;
  color: #c0392b;
}
.cbp-timer #cbp-countdown {
  font-weight: 700;
    font-size: 1.2em;
  min-width: 50px;
  display: inline-block;
  text-align: center;
padding: 7px 14px;
    background-color: #B8494A;
    color: #FFFFFF;
    border-radius: 15px;
}

/* 期限切れスロット */
.cbp-slot.is-expired {
  opacity: 0.6;
  background-color: #f5f5f5;
  border-color: #ddd;
  cursor: not-allowed;
}
.cbp-slot.is-expired:after {
  content: '期限切れ';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
}

/* =================================================================
   グループヘッダー
   ================================================================= */
.cbp-group-header {
  grid-column: 1 / -1;
  margin: 2rem 0 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #f0f0f0;
}

.cbp-group-title {
}

.cbp-group-description {
  color: #666;
}

/* 旧 .cbp-group-head は非表示にする */
.cbp-group-head {
  display: none; 
}

/* =================================================================
   残数ステータスのカラー表現
   ================================================================= */
.cbp-slot .stock {
  font-weight: 700;
  transition: all 0.2s ease-in-out;
}

/* 3〜4残：通常 */
.cbp-slot.remaining-high .stock,
.cbp-slot.remaining-4 .stock,
.cbp-slot.remaining-3 .stock {
}

.cbp-slot.remaining-3 {
    border-color: #328017;
}
.cbp-slot.remaining-3 .stock {
    color: #328017;
}

/* 残2：注意 */
.cbp-slot.remaining-2 {
  border-color: #f39c12;
}
.cbp-slot.remaining-2 .stock {
  color: #d35400;
}

/* 残1：警告 */
.cbp-slot.remaining-1 {
  border-color: #e74c3c;
}
.cbp-slot.remaining-1 .stock {
  color: #c0392b;
  transform: scale(1.1);
}


.cbp-slot.is-selected .stock {
  color: #005a87;
  font-weight: 700;
}




/* ==== CombPass: レイアウト & 文字サイズ 改善オーバーライド ==== */
/* 調整しやすい変数 */
:root {
  --cbp-max-width: 1200px;   /* コンテンツの最大幅（広げたい時は 1280〜1400px などに） */
  --cbp-gap: 1rem;           /* カード間の余白 */
  --cbp-min-card: 240px;     /* 各カードの最小幅（220〜280あたりで調整） */
  --cbp-radius: 14px;        /* カード角丸 */
  --cbp-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* コンテナを中央寄せ＆広げる */
.cbp-wrap {
  max-width: var(--cbp-max-width);
  margin: 0 auto;            /* 中央寄せ */
  padding: 0 16px;           /* 端の余白 */
}

/* セクション見出し（第一部/第二部…）を大きく＆間延び防止 */
.cbp-group-head {
  grid-column: 1 / -1;
  font-weight: 800;
  font-size: clamp(1.15rem, 1.2vw + .9rem, 1.6rem);
  margin: 1.25rem 0 .25rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid #f0f0f0;
  color: #222;
}

/* グリッドを中央寄せし、カードを広げる */
.cbp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cbp-min-card), 1fr));
  gap: var(--cbp-gap);
  justify-content: center;   /* 行全体を中央寄せ（アイテム数が少ない行で効く） */
  align-content: start;
}

/* カード本体 */
.cbp-slot,
.cbp-card,
.cbp-item {
  /* あなたのマークアップ名に合わせて上3つのセレクタのいずれかが当たるように */
  background: #fff;
  border-radius: var(--cbp-radius);
  box-shadow: var(--cbp-shadow);
  padding: 18px 20px;
  border: 1px solid #eef1f4;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cbp-slot:hover,
.cbp-card:hover,
.cbp-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

/* 時間帯（例: 10:00〜10:30）を大きく、残枠はやや小さめで差別化 */
.cbp-time, .cbp-slot .cbp-time, .cbp-card .cbp-time {
  display: block;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(1.1rem, 1.1vw + .9rem, 1.5rem);
  color: #111;
  margin-bottom: .35rem;
}
.cbp-remaining, .cbp-slot .cbp-remaining, .cbp-card .cbp-remaining {
  display: block;
  font-weight: 700;
  font-size: clamp(.9rem, .4vw + .8rem, 1.05rem);
  color: #2c3e50;
  opacity: .9;
}

/* ラベル文（「午前中のセッションです。」など）を少し見やすく */
.cbp-label, .cbp-section-desc {
  font-size: .95rem;
  color: #5c6773;
  margin: 0 0 .5rem;
}

/* スマホ最適化：カード幅と余白をやや詰める */
@media (max-width: 768px) {
  :root {
    --cbp-min-card: 180px;
    --cbp-gap: .75rem;
  }
  .cbp-wrap { padding: 0 12px; }
}


.woocommerce-bacs-bank-details,
.wc-block-components-product-details__{
    border: 2px solid #95DDBB;
    background-color: #D3F0E3;
    border-radius: 12px;
    padding: 1em;
    margin-bottom: 1em;
}


.wc-block-components-product-details__name{
    color: #D6494B;
    font-weight: bold;
}

.woocommerce table.shop_table td,
.wc-block-cart-item__wrap *{
    text-align: left;
}

.wc-block-components-product-details__value{
    text-align: left;
    font-size: 16px;
    font-weight: bold;
}


.wc-block-cart__submit-container{
    background-color: #C94040;
    font-weight: bold;
    border-radius: 7px;
    color: #FFFFFF;
}

.wc-block-cart__submit-container:hover{
    background-color: #E51313;
}

.wc-block-components-button__text{
    color: #FFFFFF;
}

.wc-bacs-bank-details-heading,
.woocommerce-order-details__title,
.woocommerce-column__title{
    font-size: 21px !important;
    
}

.wc-bacs-bank-details-account-name{
    font-size: 18px !important;
}



.combpass_booking_qr_link{
    text-align: right;
}


.cbp-badge{display:inline-block;padding:.2em .6em;border-radius:6px;border:1px solid #e5e5e5}
.cbp-badge--booked{background:#f0fff4;border-color:#a7e3b3}
.cbp-badge--held{background:#fff8e1;border-color:#f3cf72}
.cbp-badge--cancelled{background:#fff5f5;border-color:#f3aaaa}



.col-12,
.wp-block-woocommerce-cart .is-large{
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}



.cbp-notice-host {
  margin: 16px 0 0;
}
.cbp-alert {
  border-radius: 8px;
  padding: 12px 14px;
  background: #f5f7fb;
  border: 1px solid #dfe6f3;
  font-size: 15px;
  font-weight: bold;
  color: #E76F71;
}
/* グローバル通知ボックス */
.cbp-notice-host { margin: 16px 0 8px; }
.cbp-alert { padding: 12px 14px; border-radius: 8px; border: 1px solid transparent; }
.cbp-alert--success { background:#f0fff4; border-color:#b7efc5; }
.cbp-alert--warn    { background:#fffaf0; border-color:#ffe08a; }
.cbp-alert--error   { background:#fff5f5; border-color:#ffb3b3; }

/* 予約ボタンの無効表示（テーマ依存の保険） */
.cbp-button.is-disabled,
.cbp-button[aria-disabled="true"] {
  opacity: .6;
  pointer-events: none;
}


.wc-block-components-main,
.wc-block-components-sidebar-layout .wc-block-components-main,
.wc-block-components-sidebar-layout .wc-block-components-sidebar{
    max-width: 90%;
    margin-left: auto !important;
    margin-right: auto !important;
}