/**
 * Mystery Game Booking with Square - フロント画面用スタイル
 * Squareカード入力フォームのスタイルは決済フェーズで追加します。
 */

.mgbs-calendar-app {
	max-width: 960px;
	margin: 0 auto 2em;
}

.mgbs-calendar-filter {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-bottom: 1em;
}

.mgbs-calendar-toolbar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	margin-bottom: 0.75em;
}

.mgbs-calendar-toolbar button {
	cursor: pointer;
	padding: 0.25em 0.75em;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.mgbs-calendar-title {
	font-weight: bold;
	min-width: 8em;
	text-align: center;
}

.mgbs-calendar-grid {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.mgbs-calendar-grid th,
.mgbs-calendar-grid td {
	border: 1px solid #e0e0e0;
	vertical-align: top !important;
	text-align: left !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

.mgbs-calendar-grid th {
	background: #f7f7f7;
	text-align: center !important;
	padding: 6px 4px !important;
}

/*
 * スクロールにすると「隠れている予約枠」に気づけないため、
 * 高さは固定せず内容量に応じてセル(=週の行全体)が伸びる方式にする。
 * min-heightは、予約枠が無い/少ない日でも週の行の高さが揃うようにするための最小値。
 *
 * テーマ側のグローバルスタイル(table/button等への装飾)が本プラグインの
 * レイアウトより優先されて崩れるケースがあるため、box-model関連のプロパティは
 * 一律 !important で確実に上書きする。
 */
.mgbs-calendar-day-inner {
	display: block !important;
	width: 100% !important;
	min-height: 90px;
	margin: 0 !important;
	padding: 4px !important;
	box-sizing: border-box !important;
	text-align: left !important;
}

.mgbs-calendar-day-empty {
	background: #fafafa;
}

.mgbs-calendar-day-sun,
.mgbs-calendar-day-holiday {
	background: #fff5f5;
}

.mgbs-calendar-day-sat {
	background: #f2f8ff;
}

.mgbs-day-number {
	display: block !important;
	width: auto !important;
	font-size: 0.85em;
	color: #666;
	margin: 0 0 2px !important;
	padding: 0 !important;
	text-align: left !important;
}

.mgbs-calendar-day-sun .mgbs-day-number,
.mgbs-calendar-day-holiday .mgbs-day-number {
	color: #c0392b !important;
}

.mgbs-calendar-day-sat .mgbs-day-number {
	color: #1565c0 !important;
}

.mgbs-day-holiday-name {
	display: block;
	font-size: 0.7em;
	color: #c0392b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 2px;
}

.mgbs-slot-list {
	display: block !important;
	list-style: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.mgbs-slot-list li {
	display: block !important;
	width: 100% !important;
	margin: 0 0 2px !important;
	padding: 0 !important;
	text-align: left !important;
}

.mgbs-slot-chip {
	/*
	 * <button>要素はブラウザ(特にiOS Safari等)がネイティブの内部余白・配置を
	 * 適用することがあり、text-align/paddingを指定しても左側に余計な余白が
	 * 残ることがある。appearance:none で完全にリセットする。
	 * さらにテーマ側のbuttonスタイルに上書きされないよう !important を付与する。
	 */
	-webkit-appearance: none !important;
	appearance: none !important;
	-webkit-tap-highlight-color: transparent;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	float: none !important;
	margin: 0 !important;
	font: inherit;
	box-sizing: border-box !important;
	text-align: left !important;
	font-size: 0.75em;
	line-height: 1.4;
	padding: 2px 4px !important;
	border: 1px solid #7b2ff7;
	border-radius: 3px;
	background: #f4ecff;
	color: #4a1c8c;
	cursor: pointer;
}

.mgbs-slot-chip:hover:not(:disabled) {
	background: #e6d6ff;
}

.mgbs-slot-chip.is-full,
.mgbs-slot-chip:disabled {
	background: #f0f0f1;
	border-color: #ccc;
	color: #888;
	cursor: not-allowed;
}

/* 貸切枠(シナリオを予約者が選ぶ枠)は、通常シナリオの色分けとは別に固定色で目立たせる */
.mgbs-slot-chip-private:not(.is-full) {
	background: #fff3e0 !important;
	border-color: #fb8c00 !important;
	color: #7a4a00 !important;
	font-weight: bold;
}

/* 部屋貸し(4時間)枠は、貸切とも区別できるよう別の固定色で表示する */
.mgbs-slot-chip-room:not(.is-full) {
	background: #e0f2f1 !important;
	border-color: #00897b !important;
	color: #004d40 !important;
	font-weight: bold;
}

.mgbs-slot-chip .mgbs-slot-time,
.mgbs-slot-chip .mgbs-slot-title,
.mgbs-slot-chip .mgbs-slot-remaining {
	display: block;
}

.mgbs-slot-chip .mgbs-slot-title {
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
 * シナリオ色の凡例。PCではシナリオ名をチップに直接表示できるため不要 → 常に非表示。
 * スマホ(下の@media内)ではチップ内のシナリオ名を省略する代わりに、この凡例で
 * 色とシナリオ名を対応させる。
 */
.mgbs-calendar-legend {
	display: none;
	flex-wrap: wrap;
	gap: 0.5em 1em;
	margin-bottom: 0.75em;
	padding: 0.5em 0.75em;
	background: #fafafa;
	border-radius: 4px;
	font-size: 0.8em;
}

.mgbs-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	white-space: nowrap;
}

.mgbs-legend-swatch {
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	border-radius: 2px;
	border: 1px solid transparent;
	flex: 0 0 auto;
}

.mgbs-legend-swatch-private {
	background: #fff3e0;
	border-color: #fb8c00;
}

.mgbs-legend-swatch-room {
	background: #e0f2f1;
	border-color: #00897b;
}

/* スマホ幅ではシナリオ名を省略し、時間・残枠数・背景色のみで表示する */
@media ( max-width: 640px ) {
	.mgbs-calendar-grid th,
	.mgbs-calendar-grid td {
		padding: 0 !important;
	}

	.mgbs-calendar-day-inner {
		min-height: 60px;
		padding: 2px !important;
	}

	.mgbs-day-number {
		font-size: 0.7em;
		margin-bottom: 1px !important;
	}

	/* スマホでは祝日名の文字は省略し、背景色(赤み)だけで判別できるようにする */
	.mgbs-day-holiday-name {
		display: none;
	}

	.mgbs-slot-list li {
		margin-bottom: 1px !important;
	}

	.mgbs-slot-chip {
		padding: 1px 2px !important;
		font-size: 0.65em;
		line-height: 1.3;
	}

	.mgbs-slot-chip .mgbs-slot-title {
		display: none;
	}

	/* 時間と残枠数を1行にまとめて、チップの縦の高さを詰める */
	.mgbs-slot-chip .mgbs-slot-time,
	.mgbs-slot-chip .mgbs-slot-remaining {
		display: inline;
	}

	.mgbs-slot-chip .mgbs-slot-remaining::before {
		content: ' ';
	}

	.mgbs-calendar-legend:not([hidden]) {
		display: flex;
	}
}

.mgbs-calendar-loading,
.mgbs-calendar-empty {
	text-align: center;
	padding: 1em;
	color: #666;
}

/* 予約モーダル */

.mgbs-booking-modal[hidden] {
	display: none;
}

.mgbs-booking-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mgbs-booking-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.mgbs-booking-modal-dialog {
	position: relative;
	background: #fff;
	border-radius: 6px;
	padding: 1.5em;
	max-width: 480px;
	width: 90%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

.mgbs-booking-modal-close {
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	background: none;
	border: none;
	font-size: 1.5em;
	line-height: 1;
	cursor: pointer;
	color: #666;
}

.mgbs-booking-slot-summary {
	font-weight: bold;
	line-height: 1.8;
	margin-bottom: 1em;
}

.mgbs-form-row {
	margin-bottom: 1em;
}

.mgbs-form-row label {
	display: block;
	margin-bottom: 0.25em;
	font-weight: bold;
}

.mgbs-form-row input,
.mgbs-form-row select {
	width: 100%;
	padding: 0.4em;
	box-sizing: border-box;
}

.mgbs-form-row input[readonly] {
	background: #f0f0f1;
	color: #666;
}

.mgbs-private-scenario-picker {
	padding: 0.75em 1em;
	background: #fff3e0;
	border: 1px solid #fb8c00;
	border-radius: 4px;
}

.mgbs-private-scenario-picker .description {
	margin: 0.5em 0 0;
	font-size: 0.85em;
	color: #7a4a00;
}

.mgbs-room-unit-picker {
	padding: 0.75em 1em;
	background: #e0f2f1;
	border: 1px solid #00897b;
	border-radius: 4px;
}

.mgbs-room-unit-picker-label {
	display: block;
	font-weight: bold;
	margin-bottom: 0.5em;
}

.mgbs-room-unit-checkboxes {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

.mgbs-room-unit-checkbox {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-weight: normal;
}

.mgbs-room-unit-checkbox input[type="checkbox"] {
	width: auto;
	flex: 0 0 auto;
	margin: 0;
}

.mgbs-room-unit-picker .description {
	margin: 0.5em 0 0;
	font-size: 0.85em;
	color: #004d40;
}

.mgbs-party-size-remaining {
	display: block;
	font-size: 0.85em;
	color: #666;
	margin-top: 0.25em;
}

.mgbs-form-error {
	color: #c00;
	font-weight: bold;
}

.mgbs-form-actions {
	text-align: right;
}

body.mgbs-modal-open {
	overflow: hidden;
}

/* 支払い方法(全額 / 割り勘) */

.mgbs-payment-option {
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 0.75em 1em;
	margin: 0 0 1em;
}

.mgbs-payment-option legend {
	font-weight: bold;
	padding: 0 0.25em;
}

.mgbs-radio-label {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-weight: normal;
	margin-bottom: 0.5em;
	cursor: pointer;
}

/* .mgbs-form-row input の width:100% がラジオボタンにまで適用されて
   引き伸ばされてしまうのを、詳細度を上げて打ち消す。 */
.mgbs-radio-label input[type="radio"] {
	width: auto;
	flex: 0 0 auto;
	margin: 0;
}

.mgbs-payment-total-note {
	margin: 0 0 0.5em;
	font-size: 0.9em;
	color: #444;
}

.mgbs-payment-split-note {
	margin: 0.5em 0 0;
	padding: 0.5em 0.75em;
	background: #f4ecff;
	border-radius: 4px;
	font-size: 0.85em;
	color: #4a1c8c;
}

.mgbs-payment-fixed-note {
	font-weight: bold;
}

#mgbs-card-container,
#mgbs-pay-card-container {
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 0.75em;
	background: #fff;
	min-height: 40px;
}

.mgbs-card-status {
	color: #c00;
	font-size: 0.85em;
	margin: 0.5em 0 0;
}

/* 予約完了・決済コード一覧 */

.mgbs-booking-result-message {
	font-weight: bold;
}

.mgbs-payment-links-list {
	margin: 0.5em 0 0;
	padding-left: 0;
	list-style: none;
}

.mgbs-payment-link-item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4em;
	margin-bottom: 0.5em;
	font-size: 0.9em;
	padding: 0.4em 0.6em;
	background: #f7f7f7;
	border-radius: 4px;
}

.mgbs-payment-link-label {
	font-weight: bold;
	white-space: nowrap;
}

.mgbs-payment-link-url {
	word-break: break-all;
	flex: 1 1 auto;
}

.mgbs-copy-link-button {
	flex: 0 0 auto;
	cursor: pointer;
	padding: 0.25em 0.75em;
	background: #fff;
	border: 1px solid #7b2ff7;
	border-radius: 4px;
	color: #4a1c8c;
	font-size: 0.85em;
}

.mgbs-copy-link-button:hover {
	background: #f4ecff;
}

/* 個別決済ページ([mgbs_pay]) */

.mgbs-pay-app {
	max-width: 480px;
	margin: 0 auto;
}

.mgbs-pay-summary {
	font-weight: bold;
	line-height: 1.8;
	margin-bottom: 1em;
}

.mgbs-pay-message {
	padding: 1em;
	border: 1px dashed #ccc;
	border-radius: 4px;
	color: #444;
}