@charset "utf-8";
/* -------------------------------------------------
 * Builder global button styles (Elementor Kit etc.)
 * can override slot/button colors.
 * Ensure CombPass slot/button colors always win.
 * ------------------------------------------------- */
.cbp-slot-grid button.cbp-slot{
  background: var(--cbp-slot-bg, #fff) !important;
  border-color: var(--cbp-slot-border, #ddd) !important;
  color: var(--cbp-slot-text, #111) !important;
}
.cbp-slot-grid button.cbp-slot .stock{
  color: var(--cbp-slot-status-text, #1e8a3e) !important;
}

/* Date UI (tabs / accordion) */
.cbp-date-ui{margin:0 0 8px}
.cbp-date-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.cbp-date-tab{
  padding:6px 10px;
  border:1px solid #ccd0d4;
  background:#fff;
  cursor:pointer;
}
.cbp-date-tab.is-active{background:#2271b1;border-color:#2271b1;color:#fff;font-weight:600}
.cbp-day{border:1px solid #e2e4e7;margin:0 0 10px}
.cbp-grid .cbp-day{grid-column:1 / -1;width:100%;display:block}
.cbp-day-head{width:100%;display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:0;background:#f6f7f7;cursor:pointer;text-align:left}
.cbp-day-body{padding:10px 12px;display:none}
.cbp-day-body.is-open{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  padding:14px 12px;
}
@media (min-width:640px){ .cbp-day-body.is-open{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:960px){ .cbp-day-body.is-open{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1280px){ .cbp-day-body.is-open{grid-template-columns:repeat(4,minmax(0,1fr))} }
.cbp-day-body .cbp-slot{width:100%;margin:0}
.cbp-day-badge{display:inline-block;padding:2px 8px;background:#e7f5ea;border-radius:999px}
.cbp-day-badge.is-full{background:#fbeaea;color:#a00}

/* =================================================================
   CombPass Styles (cleaned / deduped)
   - Duplicate selectors consolidated
   - Keep: slot states, selected, tags/badges, cart action bar
   - Keep: block-only CTA emphasis (.cbp-context-block ...)
   - Keep: processing (grey out + disable)
   ================================================================= */

/* =================================================================
   Variables
   ================================================================= */
:root {
  --cbp-max-width: 1200px;
  --cbp-gap: 1rem;
  --cbp-min-card: 240px;
  --cbp-radius: 14px;
  --cbp-shadow: 0 6px 18px rgba(0,0,0,.06);

  /* Slot color vars (can be overridden by wp_add_inline_style :root{...}) */
  --cbp-slot-bg: #fff;
  --cbp-slot-border: #ddd;
  --cbp-slot-text: inherit;
  --cbp-slot-status-text: currentColor;

  --cbp-slot-bg-disabled: #f3f4f6;
  --cbp-slot-text-disabled: #6b7280;
}

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

  max-width: var(--cbp-max-width);
  margin: 0 auto;
  padding: 0 16px;
}

@media (max-width: 768px) {
  :root {
    --cbp-min-card: 180px;
    --cbp-gap: .75rem;
  }
  .cbp-wrap { padding: 0 12px; }
}

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

.cbp-free-label {
  font-weight: 700;
  color: #16a34a;
  margin: 0 0 0.75rem;
}

/* =================================================================
   Slot Grid
   ================================================================= */
.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;
  transition: opacity 0.2s ease;
}

/* =================================================================
   Group Header (use this, do not hide)
   ================================================================= */
.cbp-group-header {
  grid-column: 1 / -1;
  margin: 2rem 0 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #f0f0f0;
}
.cbp-group-title {
  margin: 0;
  
  font-size: clamp(1.15rem, 1.2vw + .9rem, 1.6rem);
  color: #222;
}
.cbp-group-description {
  color: #666;
}

/* Legacy selector: keep visible and consistent (if still used somewhere) */
.cbp-group-head {
  grid-column: 1 / -1;
  
  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;
}

/* =================================================================
   Slot Button
   ================================================================= */
.cbp-slot {
  position: relative;
  appearance: none;
  border: 1px solid var(--cbp-slot-border, #ddd);
  background: var(--cbp-slot-bg, #fff);
  color: var(--cbp-slot-text, inherit);
  text-align: left;
  width: 100%;
  font-size: inherit;
  font-family: inherit;
  margin: 0;

  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, opacity .15s ease, filter .15s ease;
  box-shadow: var(--cbp-shadow);
}

.cbp-slot:not(.soldout):not(.not-bookable):not(.cbp-is-processing):hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  border-color: #007cba;
}

/* Slot inner layout */
.cbp-slot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

/* Time / Stock */
.cbp-slot .time {
  
  letter-spacing: .2px;
  font-size: clamp(1.05rem, 1.05vw + .9rem, 1.45rem);
  color: #111;
  margin: 0 0 0.25rem;
}

.cbp-slot .stock {
  white-space: nowrap;
  margin-left: 0.5rem;
  font-weight: 700;
  transition: all 0.2s ease-in-out;
  color: #191919;
}

/* Optional helper classes (if used by older markup) */
.cbp-time { display:block; font-weight:800; color:#111; }
.cbp-remaining { display:block; font-weight:700; color:#2c3e50; opacity:.9; }

/* =================================================================
   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;
  box-shadow: none;
}

.cbp-slot.not-bookable {
  pointer-events: none;
  cursor: not-allowed;
  background: var(--cbp-slot-bg-disabled, #f3f4f6);
  border-color: rgba(0,0,0,0.12);
  color: var(--cbp-slot-text-disabled, #6b7280);
  box-shadow: none;
  filter: saturate(0.2);
}

.cbp-slot.not-bookable .time,
.cbp-slot.not-bookable .stock,
.cbp-slot.not-bookable .cbp-slot-status {
  color: var(--cbp-slot-text-disabled, #6b7280);
}

/* Remaining count styling */
.cbp-slot.remaining-3 { border-color: #328017; }
.cbp-slot.remaining-3 .stock { color: #328017; }

.cbp-slot.remaining-2 { border-color: #f39c12; }
.cbp-slot.remaining-2 .stock { color: #d35400; }

.cbp-slot.remaining-1 { border-color: #e74c3c; }
.cbp-slot.remaining-1 .stock { color: #c0392b; transform: scale(1.1); }

/* =================================================================
   Selected (held by this user)
   ================================================================= */
.cbp-slot.is-selected {
  border-color: #007cba;
  background-color: #e5f5ff;
  box-shadow: 0 0 0 2px #007cba inset;
}

.cbp-slot.is-selected .time,
.cbp-slot.is-selected .stock {
  color: #005a87;
}

.cbp-slot.is-selected .stock {
  
  transform: none; /* cancel remaining-1 scale while selected */
}

/* =================================================================
   Slot Status pill (top-right)
   ================================================================= */
.cbp-slot-status {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  color: var(--cbp-slot-status-text, currentColor);
}

/* =================================================================
   Expired slot (visual only)
   ================================================================= */
.cbp-slot.is-expired {
  opacity: 0.6;
  background-color: #f5f5f5;
  border-color: #ddd;
  cursor: not-allowed;
  box-shadow: none;
}

.cbp-slot.is-expired:after {
  content: "期限切れ";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
}

/* =================================================================
   Slot Option Badges (label / tags)
   ================================================================= */
.cbp-slot .cbp-slot-note {
  display: inline-flex;
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.75);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.cbp-slot .cbp-slot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}

.cbp-slot .cbp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.75);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Tag-based accent (optional) */
.cbp-slot.tag-kids_ok { box-shadow: 0 0 0 2px rgba(0,160,90,.25) inset; }
.cbp-slot.tag-women_only { box-shadow: 0 0 0 2px rgba(255,105,180,.25) inset; }
.cbp-slot.tag-quiet { box-shadow: 0 0 0 2px rgba(120,120,120,.22) inset; }

/* =================================================================
   Recruitment countdown
   ================================================================= */
.cbp-recruit-countdown {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.35rem 0.65rem;
  background: rgba(0,0,0,0.04);
  border-radius: 6px;
}

/* =================================================================
   Cart actions bar
   ================================================================= */
.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 14px;
  
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity .15s ease, filter .15s ease;
}

/* default enabled color (if theme does not style) */
.cbp-cart-actions .cbp-button:not(:disabled):not(.is-disabled) {
  background: #0b5ed7;
}

.cbp-cart-actions .cbp-button:disabled,
.cbp-cart-actions .cbp-button.is-disabled,
.cbp-cart-actions .cbp-button[aria-disabled="true"] {
  background-color: #bdc3c7;
  opacity: .55;
  filter: grayscale(1);
  cursor: not-allowed !important;
  pointer-events: none;
}

/* Timer */
.cbp-timer {
  font-weight: 600;
  color: #c0392b;
}

.cbp-timer #cbp-countdown {
  
  font-size: 1.2em;
  min-width: 50px;
  display: inline-block;
  text-align: center;
  padding: 7px 14px;
  background-color: #B8494A;
  color: #fff;
  border-radius: 15px;
}

/* Block editor context: emphasize CTA button only (do not affect Elementor) */
.cbp-context-block .cbp-cart-actions .cbp-button {
  font-size: 16px;
  
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

/* =================================================================
   Processing (prevent double-click)
   ================================================================= */
/* Slot button while processing */
.cbp-slot.cbp-is-processing,
.cbp-slot[aria-busy="true"] {
  opacity: .55;
  filter: grayscale(1);
  cursor: not-allowed !important;
  pointer-events: none;
  transform: none !important;
  box-shadow: none;
}

/* subtle overlay */
.cbp-slot.cbp-is-processing .cbp-slot-inner {
  position: relative;
}
.cbp-slot.cbp-is-processing .cbp-slot-inner::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 12px;
  background: rgba(255,255,255,.45);
  pointer-events: none;
}

/* =================================================================
   Notice / Alert
   ================================================================= */
.cbp-notice-host {
  margin: 16px 0 8px;
}
.cbp-alert {
  border-radius: 8px;
  padding: 12px 14px;
  background: #f5f7fb;
  border: 1px solid #dfe6f3;
  font-size: 15px;
  
  color: #E76F71;
}
.cbp-alert--success { background:#f0fff4; border-color:#b7efc5; color:#1f7a3a; }
.cbp-alert--warn    { background:#fffaf0; border-color:#ffe08a; color:#8a5a00; }
.cbp-alert--error   { background:#fff5f5; border-color:#ffb3b3; color:#b42323; }

/* =================================================================
   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;
}

/* =================================================================
   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;
}

/* =================================================================
   WooCommerce blocks / cart layout tweaks (kept as-is)
   ================================================================= */
.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;
  
}

.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;
  
}

.wc-block-cart__submit-container {
  background-color: #C94040;
  
  border-radius: 7px;
  color: #fff;
}

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

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

.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;
}

/* Booking badges (my page list etc.) */
.cbp-badge--booked { background:#f0fff4; border-color:#a7e3b3; }
.cbp-badge--held { background:#fff8e1; border-color:#f3cf72; }
.cbp-badge--cancelled { background:#fff5f5; border-color:#f3aaaa; }

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

.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;
}


/* === Force processing grey out (wins against theme) === */
.cbp-slot.cbp-is-processing,
.cbp-slot[aria-busy="true"],
.cbp-slot:disabled,
.cbp-slot[disabled]{
  opacity: .55 !important;
  filter: grayscale(1) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Optional overlay so "processing" is obvious */
.cbp-slot.cbp-is-processing .cbp-slot-inner{
  position: relative;
}
.cbp-slot.cbp-is-processing .cbp-slot-inner::after{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 12px;
  background: rgba(255,255,255,.45);
  pointer-events: none;
}

/* Grid-level processing: dim others */
.cbp-grid.cbp-processing .cbp-slot{
  opacity: .75;
}
.cbp-grid.cbp-processing .cbp-slot.cbp-is-processing{
  opacity: .55 !important;
}

/* CTA while processing */
.cbp-cart-actions .cbp-button.is-disabled,
.cbp-cart-actions .cbp-button:disabled,
.cbp-cart-actions .cbp-button[aria-disabled="true"]{
  opacity: .55 !important;
  filter: grayscale(1) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}


/* not-bookableでも、自分の仮押さえ(is-selected)は解除できるようにする */
.cbp-slot.not-bookable.is-selected{
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 1;            /* グレーアウトし過ぎるなら好みで */
  filter: none;          /* 同上 */
}


/* processing を確実に視覚化（テーマCSSに勝つ） */
button.cbp-slot.cbp-is-processing,
button.cbp-slot[aria-busy="true"]{
  opacity: .55 !important;
  filter: grayscale(1) !important;
  cursor: wait !important;
  pointer-events: none !important;
}

.cbp-grid.cbp-processing button.cbp-slot{
  transition: opacity .15s ease, filter .15s ease;
}



/* CombPass ISO / goal progress */
.cbp-goal-box { margin: 0 0 16px; padding: 14px 16px; border: 1px solid #dcdcde; border-radius: 12px; background: #fff; }
.cbp-goal-box.is-achieved { border-color: #b7dfb9; background: #f6fff6; }
.cbp-goal-box.is-failed { border-color: #f0c6c6; background: #fff7f7; }
.cbp-goal-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:8px; }
.cbp-goal-title { font-weight:700; }
.cbp-goal-count { font-weight:700; white-space:nowrap; }
.cbp-goal-bar { width:100%; height:10px; border-radius:999px; background:#eef0f3; overflow:hidden; }
.cbp-goal-bar > span { display:block; height:100%; border-radius:999px; background:#111; }
.cbp-goal-message { margin:8px 0 0; font-weight:600; }
.cbp-goal-note { margin:6px 0 0; font-size:12px; color:#666; }


.cbp-goal-border-box { margin: 0; padding: 16px 18px; border: 1px solid #dcdcde; border-radius: 14px; background: #fff; }
.cbp-goal-border-box.is-achieved { border-color: #b7dfb9; background: #f6fff6; }
.cbp-goal-border-box.is-failed { border-color: #f0c6c6; background: #fff7f7; }
.cbp-goal-border-label { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: #6b7280; }
.cbp-goal-border-main { display: flex; align-items: baseline; gap: 6px; }
.cbp-goal-border-value { font-size: 34px; line-height: 1; font-weight: 700; color: #111827; }
.cbp-goal-border-unit { font-size: 14px; line-height: 1.4; font-weight: 600; color: #111827; }
.cbp-goal-border-status { margin-top: 8px; font-size: 13px; line-height: 1.6; color: #4b5563; }
.cbp-goal-border-deadline { margin-top: 6px; font-size: 12px; line-height: 1.6; color: #6b7280; }



/* =================================================================
   Date Group Header (front)
   ================================================================= */
.combpass-date-group-header{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:10px;
  margin:1.1rem 0 .35rem;
  padding:10px 12px;
  border-radius:10px;
  background:#f8f3f7;
  border:1px solid #e8d3df;
  color:#7a3d64;
  font-weight:700;
}
.combpass-date-group-label{font-size:1rem;line-height:1.2}
.combpass-date-group-week{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  padding:3px 8px;
  border-radius:999px;
  background:#ffffff;
  color:#7a3d64;
  font-size:.82rem;
  border:1px solid #eadbe4;
}

/* =================================================================
   Layout Variants
   ================================================================= */

/* 1) Standard Grid (default) */
.cbp-layout-standard .cbp-grid{
  grid-template-columns: repeat(auto-fill, minmax(var(--cbp-min-card), 1fr));
}

/* 2) Timeline */
.cbp-layout-timeline .cbp-grid{
  display:block;
}
.cbp-layout-timeline .combpass-date-group-header,
.cbp-layout-timeline .cbp-group-header{
  margin-top:1.25rem;
}
.cbp-layout-timeline .cbp-slot{
  width:100%;
  margin:0 0 .85rem;
  padding:16px 18px;
}
.cbp-layout-timeline .cbp-slot-inner{
  align-items:flex-start;
  text-align:left;
}
.cbp-layout-timeline .cbp-slot .time{
  margin-bottom:6px;
}
.cbp-layout-timeline .cbp-slot .stock{
  margin-left:0;
  font-size:.98rem;
}

/* 3) Compact */
.cbp-layout-compact{
  --cbp-gap: .75rem;
}
.cbp-layout-compact .cbp-grid{
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: .75rem;
}
.cbp-layout-compact .cbp-slot{
  border-radius:10px;
  padding:14px 12px;
}
.cbp-layout-compact .cbp-slot .time{
  font-size:1.05rem;
}
.cbp-layout-compact .cbp-slot .stock{
  margin-left:0;
  font-size:.95rem;
}
.cbp-layout-compact .combpass-date-group-header{
  padding:8px 10px;
  margin-top:.95rem;
}


/* =================================================================
   beta31: mobile-first readability / status clarity
   ================================================================= */

/* Stronger visual rhythm for slot cards */
.cbp-slot{
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}
.cbp-slot:hover{
  transform: translateY(-1px);
}

/* Make selected state much easier to notice */
.cbp-slot.is-selected {
  border-color: #0a66c2 !important;
  background: #eef6ff !important;
  box-shadow: 0 0 0 2px #0a66c2 inset, 0 6px 16px rgba(10,102,194,.10);
}
.cbp-slot.is-selected .time,
.cbp-slot.is-selected .stock{
  color: #0a4f8a !important;
}

/* More readable remaining/full states */
.cbp-slot .stock{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 28px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef8f0;
  color: #157347 !important;
  font-size: .98rem;
  line-height: 1.2;
}
.cbp-slot.is-selected .stock{
  background:#d9ecff;
}
.cbp-slot.is-full,
.cbp-slot.is-soldout,
.cbp-slot[aria-disabled="true"]{
  opacity: .58;
  filter: grayscale(.06);
}
.cbp-slot.is-full .stock,
.cbp-slot.is-soldout .stock,
.cbp-slot[aria-disabled="true"] .stock{
  background: #f8e8ea;
  color: #b42318 !important;
}

/* Top-right status pill if present */
.cbp-slot-status{
  font-weight: 700;
  letter-spacing: .01em;
}
.cbp-slot-status.is-full,
.cbp-slot-status.is-soldout{
  background:#fdecec;
  color:#b42318;
  border-color:#f3c7cb;
}
.cbp-slot-status.is-available{
  background:#edf8ef;
  color:#157347;
  border-color:#cfe8d4;
}

/* Date group header clearer hierarchy */
.combpass-date-group-header{
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.cbp-date-group-label{
  font-weight: 800;
}
.cbp-date-group-week{
  font-weight: 700;
}

/* ---------- mobile ---------- */
@media (max-width: 767px){
  .cbp-wrap{
    padding: 0 10px;
  }

  .combpass-date-group-header{
    margin: .85rem 0 .35rem;
    padding: 9px 10px;
    border-radius: 10px;
  }

  .cbp-layout-standard .cbp-grid,
  .cbp-layout-compact .cbp-grid{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .cbp-layout-timeline .cbp-grid{
    display:block;
  }

  .cbp-slot{
    min-height: 92px;
    border-radius: 12px;
    padding: 14px 10px;
  }

  .cbp-slot .time{
    font-size: 1.02rem;
    line-height: 1.3;
    margin-bottom: .45rem;
  }

  .cbp-slot .stock{
    min-height: 26px;
    padding: 2px 9px;
    font-size: .92rem;
  }

  /* compact stays dense but readable */
  .cbp-layout-compact .cbp-slot{
    min-height: 82px;
    padding: 12px 8px;
  }
  .cbp-layout-compact .cbp-slot .time{
    font-size: .96rem;
  }
  .cbp-layout-compact .cbp-slot .stock{
    font-size: .86rem;
  }

  /* timeline gets larger tap targets */
  .cbp-layout-timeline .cbp-slot{
    min-height: 96px;
    padding: 14px 14px;
  }

  /* full/soldout should still be legible on mobile */
  .cbp-slot.is-full .time,
  .cbp-slot.is-soldout .time,
  .cbp-slot[aria-disabled="true"] .time{
    color:#6b7280;
  }
}

/* ---------- very narrow phones ---------- */
@media (max-width: 420px){
  .cbp-layout-standard .cbp-grid,
  .cbp-layout-compact .cbp-grid{
    grid-template-columns: 1fr;
  }

  .cbp-slot{
    min-height: 86px;
  }

  .cbp-slot .time{
    font-size: .98rem;
  }
}

/* Help dense repeated imported slots feel more natural */
.cbp-layout-standard .cbp-grid > .cbp-slot,
.cbp-layout-compact .cbp-grid > .cbp-slot{
  align-self: stretch;
}


/* =================================================================
   beta32: layout personalities
   ================================================================= */

/* Shared subtle hierarchy */
.cbp-wrap[data-cbp-layout="standard"] .cbp-slot,
.cbp-wrap[data-cbp-layout="timeline"] .cbp-slot,
.cbp-wrap[data-cbp-layout="compact"] .cbp-slot{
  box-shadow: 0 1px 3px rgba(16,24,40,.04);
}

/* 1) Standard Grid = balanced / friendly / card-like */
.cbp-layout-standard .cbp-grid{
  gap: 14px;
}
.cbp-layout-standard .cbp-slot{
  border-radius: 14px;
  padding: 16px 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
}
.cbp-layout-standard .cbp-slot .time{
  font-size: 1.08rem;
  font-weight: 800;
}
.cbp-layout-standard .cbp-slot .stock{
  margin-top: 8px;
}
.cbp-layout-standard .combpass-date-group-header{
  background: #f7f2f6;
  border-color: #ead9e4;
}

/* 2) Timeline = clearer time flow / left emphasis */
.cbp-layout-timeline .cbp-grid{
  display: block;
}
.cbp-layout-timeline .cbp-slot{
  position: relative;
  width: 100%;
  margin: 0 0 12px;
  padding: 16px 18px 16px 22px;
  border-left: 5px solid #caa2bd;
  border-radius: 0 14px 14px 0;
  background: #fff;
}
.cbp-layout-timeline .cbp-slot::before{
  content: "";
  position: absolute;
  left: -9px;
  top: 22px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #b47aa0;
}
.cbp-layout-timeline .cbp-slot .time{
  font-size: 1.12rem;
  font-weight: 800;
}
.cbp-layout-timeline .cbp-slot .stock{
  margin-top: 6px;
}
.cbp-layout-timeline .combpass-date-group-header{
  background: #f4f7fb;
  border-color: #d7e2f1;
  color: #284b7b;
}
.cbp-layout-timeline .cbp-date-group-week{
  color: #284b7b;
}

/* 3) Compact = dense / efficient / repeated-slot friendly */
.cbp-layout-compact .cbp-grid{
  gap: 10px;
}
.cbp-layout-compact .cbp-slot{
  border-radius: 12px;
  padding: 12px 10px;
  min-height: 78px;
  background: #fff;
}
.cbp-layout-compact .cbp-slot .time{
  font-size: .98rem;
  font-weight: 750;
  line-height: 1.25;
}
.cbp-layout-compact .cbp-slot .stock{
  margin-top: 6px;
  font-size: .85rem;
  min-height: 24px;
  padding: 2px 8px;
}
.cbp-layout-compact .combpass-date-group-header{
  padding: 8px 10px;
  background: #faf7f1;
  border-color: #ecdcc3;
  color: #7a5a26;
}
.cbp-layout-compact .cbp-date-group-week{
  color: #7a5a26;
}

/* Selected/focus state should still feel consistent per layout */
.cbp-layout-standard .cbp-slot.is-selected{
  box-shadow: 0 0 0 2px #0a66c2 inset, 0 8px 18px rgba(10,102,194,.12);
}
.cbp-layout-timeline .cbp-slot.is-selected{
  border-left-color: #0a66c2 !important;
}
.cbp-layout-timeline .cbp-slot.is-selected::before{
  border-color: #0a66c2 !important;
}
.cbp-layout-compact .cbp-slot.is-selected{
  box-shadow: 0 0 0 2px #0a66c2 inset, 0 4px 12px rgba(10,102,194,.10);
}

/* Mobile distinctions should remain visible */
@media (max-width: 767px){
  .cbp-layout-standard .cbp-slot{
    border-radius: 12px;
  }
  .cbp-layout-timeline .cbp-slot{
    border-left-width: 4px;
    padding: 14px 14px 14px 18px;
  }
  .cbp-layout-timeline .cbp-slot::before{
    left: -8px;
    top: 20px;
    width: 11px;
    height: 11px;
  }
  .cbp-layout-compact .cbp-slot{
    min-height: 74px;
  }
}


/* =================================================================
   beta33: layout recommendation polish
   ================================================================= */
.cbp-layout-recommend{
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.cbp-layout-recommend strong{
  display:inline-block;
  margin-bottom:4px;
}


/* =================================================================
   beta34: layout previews in event settings
   ================================================================= */
.cbp-layout-preview-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}
.cbp-layout-preview-card{
  border:1px solid #dcdcde;
  border-radius:10px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.cbp-layout-preview-card.is-active{
  border-color:#0a66c2;
  box-shadow:0 0 0 2px rgba(10,102,194,.12);
}
.cbp-layout-preview-head{
  padding:10px 12px;
  font-weight:700;
  background:#f6f7f7;
  border-bottom:1px solid #ebecee;
}
.cbp-layout-preview-body{
  padding:12px;
}
.cbp-layout-preview-date{
  margin-bottom:8px;
  font-weight:700;
  color:#5f3b54;
}
.cbp-layout-preview-slots{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:6px;
}
.cbp-layout-preview-slots.small{
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.cbp-layout-preview-slots span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  border-radius:8px;
  background:#f8f3f7;
  border:1px solid #ead9e4;
  font-size:.84rem;
  color:#6b3e5b;
}
.cbp-layout-preview-body.is-timeline .cbp-layout-preview-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0 8px 10px;
  border-left:4px solid #caa2bd;
}
.cbp-layout-preview-body.is-timeline .cbp-layout-preview-row + .cbp-layout-preview-row{
  margin-top:4px;
}
.cbp-layout-preview-body.is-timeline .t{
  min-width:48px;
  font-weight:700;
}
.cbp-layout-preview-body.is-timeline .d{
  color:#50575e;
}
.cbp-layout-preview-body.is-compact .cbp-layout-preview-date{
  margin-bottom:6px;
}
@media (max-width: 960px){
  .cbp-layout-preview-grid{
    grid-template-columns:1fr;
  }
}


/* =================================================================
   beta35: per-layout state tuning
   ================================================================= */

/* Shared state badge */
.cbp-slot.is-selected{
  position: relative;
}
.cbp-slot.is-selected::after{
  content: "選択中";
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  background: #0a66c2;
  color: #fff;
  letter-spacing: .01em;
}

/* Low stock / almost full helper state if class exists */
.cbp-slot.is-low-stock .stock,
.cbp-slot[data-cbp-stock="low"] .stock{
  background: #fff4e5;
  color: #9a6700 !important;
}
.cbp-slot.is-full .stock,
.cbp-slot.is-soldout .stock,
.cbp-slot[aria-disabled="true"] .stock{
  font-weight: 800;
}

/* 1) Standard Grid */
.cbp-layout-standard .cbp-slot{
  border-width: 1.5px;
}
.cbp-layout-standard .cbp-slot.is-selected{
  transform: translateY(-2px);
}
.cbp-layout-standard .cbp-slot.is-full,
.cbp-layout-standard .cbp-slot.is-soldout,
.cbp-layout-standard .cbp-slot[aria-disabled="true"]{
  background: linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%);
}
.cbp-layout-standard .cbp-slot.is-full .time,
.cbp-layout-standard .cbp-slot.is-soldout .time,
.cbp-layout-standard .cbp-slot[aria-disabled="true"] .time{
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.cbp-layout-standard .cbp-slot.is-low-stock,
.cbp-layout-standard .cbp-slot[data-cbp-stock="low"]{
  border-color: #f0c36d;
}

/* 2) Timeline */
.cbp-layout-timeline .cbp-slot.is-selected{
  background: #eef6ff !important;
}
.cbp-layout-timeline .cbp-slot.is-selected::after{
  top: 10px;
  right: 12px;
}
.cbp-layout-timeline .cbp-slot.is-full,
.cbp-layout-timeline .cbp-slot.is-soldout,
.cbp-layout-timeline .cbp-slot[aria-disabled="true"]{
  border-left-color: #d0d5dd !important;
}
.cbp-layout-timeline .cbp-slot.is-full::before,
.cbp-layout-timeline .cbp-slot.is-soldout::before,
.cbp-layout-timeline .cbp-slot[aria-disabled="true"]::before{
  border-color: #d0d5dd !important;
}
.cbp-layout-timeline .cbp-slot.is-low-stock,
.cbp-layout-timeline .cbp-slot[data-cbp-stock="low"]{
  border-left-color: #f0ad4e !important;
}
.cbp-layout-timeline .cbp-slot.is-low-stock::before,
.cbp-layout-timeline .cbp-slot[data-cbp-stock="low"]::before{
  border-color: #f0ad4e !important;
}

/* 3) Compact */
.cbp-layout-compact .cbp-slot{
  border-width: 1px;
}
.cbp-layout-compact .cbp-slot.is-selected{
  background: #eef6ff !important;
}
.cbp-layout-compact .cbp-slot.is-selected::after{
  top: 6px;
  right: 6px;
  font-size: .66rem;
  padding: 2px 7px;
}
.cbp-layout-compact .cbp-slot.is-full,
.cbp-layout-compact .cbp-slot.is-soldout,
.cbp-layout-compact .cbp-slot[aria-disabled="true"]{
  background: #f8f8f8;
}
.cbp-layout-compact .cbp-slot.is-low-stock,
.cbp-layout-compact .cbp-slot[data-cbp-stock="low"]{
  border-color: #f0c36d;
  background: #fffaf2;
}

/* Mobile tweaks */
@media (max-width: 767px){
  .cbp-slot.is-selected::after{
    top: 6px;
    right: 6px;
    font-size: .66rem;
    padding: 2px 7px;
  }

  .cbp-layout-timeline .cbp-slot.is-selected::after{
    right: 10px;
  }

  .cbp-layout-standard .cbp-slot .stock,
  .cbp-layout-timeline .cbp-slot .stock,
  .cbp-layout-compact .cbp-slot .stock{
    font-weight: 700;
  }
}


/* =================================================================
   beta36: wording + logic alignment for low stock / full / selected
   ================================================================= */
.cbp-slot.state-low-stock .stock,
.cbp-slot.is-low-stock .stock{
  background:#fff4e5;
  color:#9a6700 !important;
  font-weight:800;
}
.cbp-slot.state-low-stock .cbp-slot-status,
.cbp-slot.is-low-stock .cbp-slot-status{
  background:#fff4e5;
  color:#9a6700;
  border-color:#f2c47c;
}
.cbp-slot.state-full .cbp-slot-status,
.cbp-slot.soldout .cbp-slot-status{
  background:#fdecec;
  color:#b42318;
  border-color:#f3c7cb;
}
.cbp-slot.is-selected .cbp-slot-status{
  background:#d9ecff;
  color:#0a4f8a;
  border-color:#8abff3;
}


/* =================================================================
   beta37: user-facing slot guide / legend
   ================================================================= */
.cbp-slot-guide{
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.cbp-slot-guide-title{
  font-weight: 800;
  margin-bottom: 8px;
  color: #1f2937;
}
.cbp-slot-guide-items{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cbp-slot-guide-item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 700;
  border: 1px solid transparent;
}
.cbp-slot-guide-item.is-open{
  background: #edf8ef;
  color: #157347;
  border-color: #cfe8d4;
}
.cbp-slot-guide-item.is-low{
  background: #fff4e5;
  color: #9a6700;
  border-color: #f2c47c;
}
.cbp-slot-guide-item.is-full{
  background: #fdecec;
  color: #b42318;
  border-color: #f3c7cb;
}
.cbp-slot-guide-item.is-selected{
  background: #d9ecff;
  color: #0a4f8a;
  border-color: #8abff3;
}
.cbp-slot-guide-note{
  margin: 0 0 12px;
  color: #50575e;
  font-size: .95rem;
}

@media (max-width: 767px){
  .cbp-slot-guide{
    padding: 10px 12px;
    border-radius: 10px;
  }
  .cbp-slot-guide-item{
    font-size: .86rem;
    min-height: 28px;
    padding: 3px 9px;
  }
  .cbp-slot-guide-note{
    font-size: .9rem;
  }
}