/**
 * 予約フォーム - モダンUIスタイル
 *
 * @package ShingakuEventManager
 * @since 1.0.0
 */

/* =====================================
   CSS変数定義
   ===================================== */
:root {
	/* Colors */
	--shgk-primary: #0073aa;
	--shgk-primary-dark: #005a87;
	--shgk-primary-light: #d1ecf1;

	--shgk-success: #28a745;
	--shgk-warning: #ffc107;
	--shgk-danger: #dc3545;

	--shgk-text-dark: #333333;
	--shgk-text-medium: #666666;
	--shgk-text-light: #888888;

	--shgk-border: #dddddd;
	--shgk-bg-light: #f9f9f9;
	--shgk-bg-white: #ffffff;

	/* Spacing */
	--shgk-space-xs: 4px;
	--shgk-space-sm: 8px;
	--shgk-space-md: 12px;
	--shgk-space-lg: 20px;
	--shgk-space-xl: 32px;

	/* Border radius */
	--shgk-radius-sm: 4px;
	--shgk-radius-md: 8px;
	--shgk-radius-lg: 12px;

	/* Shadows */
	--shgk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
	--shgk-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
	--shgk-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

	/* Transitions */
	--shgk-transition-fast: 0.15s ease;
	--shgk-transition-normal: 0.3s ease;
}

/* =====================================
   フォームコンテナ
   ===================================== */
.shgk-booking-form {
	max-width: 700px;
	margin: var(--shgk-space-xl) auto;
	background: var(--shgk-bg-white);
	border: 1px solid var(--shgk-border);
	border-radius: var(--shgk-radius-md);
	box-shadow: var(--shgk-shadow-md);
	padding: var(--shgk-space-xl);
}

/* イベント開催日表示 */
.shgk-event-date-header {
	padding: var(--shgk-space-sm) 0;
	margin: 0 0 var(--shgk-space-lg) 0;
	border-bottom: 1px solid var(--shgk-border);
}

.shgk-event-date-header p {
	margin: 0;
	font-size: 0.95em;
	color: var(--shgk-text-medium);
}

.shgk-event-date-header .shgk-event-date {
	font-weight: 600;
	color: var(--shgk-text-dark);
}

.shgk-booking-form h3 {
	margin: 0 0 var(--shgk-space-md) 0;
	font-size: 1.5em;
	font-weight: 600;
	color: var(--shgk-text-dark);
	border-bottom: 3px solid var(--shgk-primary);
	padding-bottom: var(--shgk-space-md);
}

/* =====================================
   セクションラベル
   ===================================== */
.shgk-section-label {
	font-size: 1.1em;
	font-weight: 600;
	color: var(--shgk-text-dark);
	margin: 0 0 var(--shgk-space-md) 0;
	display: block;
}

/* =====================================
   時間枠選択
   ===================================== */
.shgk-time-slots-container {
	margin-bottom: var(--shgk-space-xl);
}

.shgk-time-slots-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--shgk-space-md);
	margin-bottom: var(--shgk-space-xl);
}

.shgk-time-slot-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--shgk-space-md);
	padding: var(--shgk-space-lg);
	border: 2px solid var(--shgk-border);
	border-radius: var(--shgk-radius-md);
	background: var(--shgk-bg-white);
	cursor: pointer;
	transition: all var(--shgk-transition-normal);
}

.shgk-time-slot-card:hover {
	border-color: var(--shgk-primary);
	box-shadow: var(--shgk-shadow-md);
	transform: translateY(-2px);
}

.shgk-time-slot-input {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	clip: rect(0, 0, 0, 0) !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

.shgk-time-slot-card:has(.shgk-time-slot-input:checked) {
	border-color: var(--shgk-primary);
	background: var(--shgk-primary-light);
	box-shadow: var(--shgk-shadow-md);
}

.shgk-time-slot-content {
	flex: 1;
}

.shgk-time-slot-time {
	font-size: 1.1em;
	font-weight: 600;
	color: var(--shgk-text-dark);
	margin-bottom: var(--shgk-space-xs);
}

.shgk-time-slot-capacity {
	display: flex;
	align-items: center;
	gap: var(--shgk-space-sm);
}

.shgk-capacity-badge {
	display: none; /* 残席表示不要 */
}

.shgk-time-slot-check {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid var(--shgk-border);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--shgk-transition-fast);
	flex-shrink: 0;
}

.shgk-time-slot-card:has(.shgk-time-slot-input:checked) .shgk-time-slot-check {
	background: var(--shgk-primary);
	border-color: var(--shgk-primary);
}

.shgk-time-slot-check svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: white;
	opacity: 0;
	transition: opacity var(--shgk-transition-fast);
}

.shgk-time-slot-card:has(.shgk-time-slot-input:checked) .shgk-time-slot-check svg {
	opacity: 1;
}

/* =====================================
   フォームフィールド
   ===================================== */
.shgk-booking-form label {
	display: block;
	font-size: 0.95em;
	font-weight: 600;
	color: var(--shgk-text-dark);
	margin-bottom: var(--shgk-space-xs);
}

.shgk-booking-form input[type="text"],
.shgk-booking-form input[type="email"],
.shgk-booking-form input[type="tel"],
.shgk-booking-form select,
.shgk-booking-form textarea {
	width: 100%;
	padding: var(--shgk-space-md) var(--shgk-space-md);
	font-size: 1em;
	border: 2px solid var(--shgk-border);
	border-radius: var(--shgk-radius-sm);
	background: var(--shgk-bg-white);
	transition: border-color var(--shgk-transition-fast), box-shadow var(--shgk-transition-fast);
	font-family: inherit;
}

.shgk-booking-form input:focus,
.shgk-booking-form select:focus,
.shgk-booking-form textarea:focus {
	outline: none;
	border-color: var(--shgk-primary);
	box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}

.shgk-booking-form input[readonly] {
	background: var(--shgk-bg-light);
	color: var(--shgk-text-medium);
	cursor: not-allowed;
}

/* お名前・メールアドレスフィールド（form直下のp要素） */
.shgk-booking-form > form > p {
	margin-bottom: var(--shgk-space-sm);
	background: var(--shgk-bg-white);
	padding: var(--shgk-space-md);
	border-radius: var(--shgk-radius-sm);
	border: 1px solid var(--shgk-border);
}

.shgk-booking-form > form > p > label {
	margin-bottom: var(--shgk-space-xs);
}

.shgk-booking-form > form > p > br {
	display: none;
}

/* カスタムフィールドセクション */
.shgk-custom-fields-section {
	margin-top: var(--shgk-space-xl);
	padding: 0;
	background: var(--shgk-bg-white);
	border-radius: var(--shgk-radius-md);
	border: none;
}

.shgk-custom-fields-section h4 {
	margin: 0 0 var(--shgk-space-lg) 0;
	font-size: 1.2em;
	font-weight: 600;
	color: var(--shgk-primary);
	padding-bottom: var(--shgk-space-sm);
	border-bottom: 2px solid var(--shgk-primary);
}

/* カスタムフィールド個別のスタイル */
.shgk-custom-fields-section .shgk-form-field {
	margin-bottom: var(--shgk-space-sm);
	background: var(--shgk-bg-white);
	padding: var(--shgk-space-md);
	border-radius: var(--shgk-radius-sm);
	border: 1px solid var(--shgk-border);
}

.shgk-custom-fields-section .shgk-form-field > label {
	display: block;
	font-weight: 600;
	color: var(--shgk-text-dark);
	margin-bottom: var(--shgk-space-xs);
}

.shgk-custom-fields-section .shgk-form-field br {
	display: none;
}

/* テキスト・メール・セレクトフィールド */
.shgk-custom-fields-section input[type="text"],
.shgk-custom-fields-section input[type="email"],
.shgk-custom-fields-section input[type="tel"],
.shgk-custom-fields-section select,
.shgk-custom-fields-section textarea {
	margin-top: 0;
}

/* ラジオボタン・チェックボックスの空のp要素を非表示 */
.shgk-custom-fields-section .shgk-form-field:empty,
.shgk-custom-fields-section > p:empty {
	display: none;
}

/* ラジオ/チェックボックスが続くフィールドラベル（直前のp要素）を背景付きに */
/* 現在の構造ではradio/checkbox-groupはform-fieldの中にあるため、このスタイルは無効 */

/* ラジオボタン・チェックボックスのグループ */
.shgk-radio-group,
.shgk-checkbox-group {
	/* グループコンテナは透明に - すべてのスタイルはform-fieldに任せる */
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
}

/* ラジオボタンのラベルを横並びに */
.shgk-radio-group > label {
	display: inline-flex !important;
	align-items: center !important;
	margin-right: var(--shgk-space-lg) !important;
	margin-bottom: 0 !important;
	font-weight: normal !important;
	cursor: pointer;
}

/* チェックボックスのラベルを縦並びに */
.shgk-checkbox-group > label {
	display: block !important;
	margin-bottom: 5px !important;
	font-weight: normal !important;
	cursor: pointer;
}

.shgk-radio-group input[type="radio"],
.shgk-checkbox-group input[type="checkbox"] {
	margin: 0 var(--shgk-space-xs) 0 0 !important;
	vertical-align: middle;
}

/* 選択メッセージ */
.shgk-max-selections-description,
.shgk-selection-message {
	margin: var(--shgk-space-xs) 0 !important;
	font-size: 0.85em !important;
}

/* =====================================
   キャンセル待ちフォーム固有のスタイル
   ===================================== */

/* 説明文 */
.shgk-waitlist-description {
	color: var(--shgk-text-medium);
	font-size: 0.95em;
	margin-bottom: var(--shgk-space-lg);
	padding: var(--shgk-space-md);
	background: var(--shgk-bg-light);
	border-left: 3px solid var(--shgk-primary);
	border-radius: var(--shgk-radius-sm);
}

/* 時間枠のバッジ */
.shgk-time-slot-badges {
	display: flex;
	align-items: center;
	gap: var(--shgk-space-xs);
	margin-top: var(--shgk-space-xs);
	flex-wrap: wrap;
}

.shgk-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: var(--shgk-radius-sm);
	font-size: 0.75em;
	font-weight: 600;
	color: white;
}

.shgk-priority-badge {
	background: #d63638;
}

.shgk-full-badge {
	background: #dba617;
}

/* 注意事項 */
.shgk-waitlist-notice {
	background: var(--shgk-bg-light);
	padding: var(--shgk-space-md);
	border-radius: var(--shgk-radius-sm);
	border: 1px solid var(--shgk-border);
	font-size: 0.9em;
	color: var(--shgk-text-medium);
	line-height: 1.6;
	margin-bottom: var(--shgk-space-lg);
}

/* =====================================
   送信ボタン
   ===================================== */
.shgk-form-actions {
	margin-top: var(--shgk-space-xl);
	text-align: center;
}

.shgk-booking-form #shgk-booking-submit,
.shgk-submit-button {
	width: 100%;
	padding: var(--shgk-space-lg) var(--shgk-space-xl);
	font-size: 1.1em;
	font-weight: 600;
	color: white;
	background: linear-gradient(135deg, var(--shgk-primary) 0%, var(--shgk-primary-dark) 100%);
	border: none;
	border-radius: var(--shgk-radius-md);
	cursor: pointer;
	transition: all var(--shgk-transition-normal);
	box-shadow: var(--shgk-shadow-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--shgk-space-sm);
	font-family: inherit;
}

.shgk-booking-form #shgk-booking-submit:hover,
.shgk-submit-button:hover {
	box-shadow: var(--shgk-shadow-md);
	transform: translateY(-2px);
}

.shgk-booking-form #shgk-booking-submit:active,
.shgk-submit-button:active {
	transform: translateY(0);
}

.shgk-booking-form #shgk-booking-submit:disabled,
.shgk-submit-button:disabled {
	background: var(--shgk-text-light);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.shgk-button-text {
	display: inline-block;
}

.shgk-button-spinner {
	display: none;
	width: 20px;
	height: 20px;
}

.shgk-spinner {
	width: 20px;
	height: 20px;
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-top-color: white;
	border-radius: 50%;
	animation: shgk-spin 0.8s linear infinite;
}

@keyframes shgk-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* 既存のローディング表示（後方互換性） */
#shgk-booking-loading {
	margin-top: var(--shgk-space-lg);
	padding: var(--shgk-space-lg);
	background: var(--shgk-bg-light);
	border-radius: var(--shgk-radius-sm);
	text-align: center;
	color: var(--shgk-text-medium);
}

/* =====================================
   通知メッセージ
   ===================================== */
.shgk-booking-notice,
.shgk-notice {
	padding: var(--shgk-space-lg);
	border-radius: var(--shgk-radius-sm);
	margin-bottom: var(--shgk-space-lg);
	border-left: 4px solid;
}

.shgk-notice.success {
	background: #d4edda;
	color: #155724;
	border-color: var(--shgk-success);
}

.shgk-notice.error {
	background: #f8d7da;
	color: #721c24;
	border-color: var(--shgk-danger);
}

.shgk-booking-notice {
	background: var(--shgk-primary-light);
	color: #0c5460;
	border-color: var(--shgk-primary);
}

.shgk-notice p,
.shgk-booking-notice p {
	margin: 0;
}

/* =====================================
   予約情報表示（ブロック用）
   ===================================== */
.shgk-booking-info {
	max-width: 700px;
	margin: var(--shgk-space-xl) auto;
	background: var(--shgk-bg-white);
	border: 1px solid var(--shgk-border);
	border-radius: var(--shgk-radius-md);
	box-shadow: var(--shgk-shadow-md);
	padding: var(--shgk-space-xl);
}

.shgk-booking-info h3 {
	margin: 0 0 var(--shgk-space-lg) 0;
	font-size: 1.5em;
	font-weight: 600;
	color: var(--shgk-text-dark);
	border-bottom: 3px solid var(--shgk-primary);
	padding-bottom: var(--shgk-space-md);
}

.shgk-reservation-details {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--shgk-space-md) var(--shgk-space-lg);
	margin-bottom: var(--shgk-space-xl);
}

.shgk-reservation-details dt {
	font-weight: 600;
	color: var(--shgk-text-dark);
}

.shgk-reservation-details dd {
	margin: 0;
	color: var(--shgk-text-medium);
}

.shgk-status-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--shgk-radius-sm);
	font-size: 0.85em;
	font-weight: 500;
}

.shgk-status-badge.status-confirmed {
	background: #d4edda;
	color: #155724;
}

.shgk-status-badge.status-cancelled {
	background: #f8d7da;
	color: #721c24;
}

.shgk-status-badge.status-checked_in {
	background: #d1ecf1;
	color: #0c5460;
}

.shgk-qr-code-section {
	margin-top: var(--shgk-space-xl);
	padding-top: var(--shgk-space-xl);
	border-top: 2px solid var(--shgk-border);
	text-align: center;
}

.shgk-qr-code-section h4 {
	margin: 0 0 var(--shgk-space-lg) 0;
	font-size: 1.1em;
	font-weight: 600;
	color: var(--shgk-text-dark);
}

.shgk-cancel-form {
	margin-top: var(--shgk-space-xl);
	padding-top: var(--shgk-space-xl);
	border-top: 2px solid var(--shgk-border);
	text-align: center;
}

.shgk-btn-cancel {
	padding: var(--shgk-space-md) var(--shgk-space-xl);
	font-size: 1em;
	font-weight: 600;
	color: var(--shgk-danger);
	background: white;
	border: 2px solid var(--shgk-danger);
	border-radius: var(--shgk-radius-sm);
	cursor: pointer;
	transition: all var(--shgk-transition-normal);
	font-family: inherit;
}

.shgk-btn-cancel:hover {
	background: var(--shgk-danger);
	color: white;
	transform: translateY(-1px);
	box-shadow: var(--shgk-shadow-sm);
}

/* =====================================
   アクセシビリティ
   ===================================== */
.shgk-time-slot-card:focus-within {
	outline: 2px solid var(--shgk-primary);
	outline-offset: 2px;
}

.shgk-booking-form input:focus-visible,
.shgk-booking-form select:focus-visible,
.shgk-booking-form textarea:focus-visible,
.shgk-booking-form button:focus-visible {
	outline: 2px solid var(--shgk-primary);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.shgk-booking-form *,
	.shgk-booking-info * {
		transition: none !important;
		animation: none !important;
	}
}

.shgk-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* =====================================
   レスポンシブデザイン
   ===================================== */
@media (max-width: 768px) {
	.shgk-booking-form,
	.shgk-booking-info {
		margin: var(--shgk-space-lg) var(--shgk-space-md);
		padding: var(--shgk-space-lg);
	}

	.shgk-time-slots-grid {
		grid-template-columns: 1fr;
	}

	.shgk-reservation-details {
		grid-template-columns: 1fr;
		gap: var(--shgk-space-sm);
	}

	.shgk-reservation-details dt {
		margin-top: var(--shgk-space-md);
	}

	.shgk-reservation-details dt:first-child {
		margin-top: 0;
	}
}

@media (max-width: 480px) {
	.shgk-booking-form,
	.shgk-booking-info {
		margin: var(--shgk-space-md);
		padding: var(--shgk-space-md);
	}

	.shgk-booking-form h3,
	.shgk-booking-info h3 {
		font-size: 1.25em;
	}

	.shgk-time-slot-card {
		padding: var(--shgk-space-md);
	}

	.shgk-time-slot-time {
		font-size: 1em;
	}
}

@media (min-width: 769px) {
	.shgk-booking-form #shgk-booking-submit,
	.shgk-submit-button {
		width: auto;
		min-width: 300px;
	}
}

/* =====================================
   完了画面共通スタイル
   ===================================== */
.shgk-booking-completion,
.shgk-cancellation-completion,
.shgk-waitlist-completion,
.shgk-waitlist-cancellation-completion {
	max-width: 800px;
	margin: var(--shgk-space-xl) auto;
	padding: var(--shgk-space-xl);
	background: var(--shgk-bg-white);
	border: 1px solid var(--shgk-border);
	border-radius: var(--shgk-radius-md);
	box-shadow: var(--shgk-shadow-md);
}

.shgk-completion-header {
	text-align: center;
	margin-bottom: var(--shgk-space-xl);
	padding-bottom: var(--shgk-space-lg);
	border-bottom: 2px solid var(--shgk-primary);
}

.shgk-completion-icon {
	display: inline-block;
	width: 80px;
	height: 80px;
	background: var(--shgk-success);
	border-radius: 50%;
	margin-bottom: var(--shgk-space-lg);
	line-height: 80px;
}

.shgk-completion-icon .dashicons {
	font-size: 50px;
	width: 50px;
	height: 50px;
	color: white;
}

.shgk-completion-header h2 {
	margin: 0;
	font-size: 1.75em;
	font-weight: 600;
	color: var(--shgk-text-dark);
}

.shgk-completion-content {
	padding: var(--shgk-space-lg);
}

.shgk-custom-message {
	background: #f0f9ff;
	border-left: 4px solid var(--shgk-primary);
	padding: var(--shgk-space-lg);
	margin-bottom: var(--shgk-space-xl);
	font-size: 1em;
	line-height: 1.6;
	border-radius: var(--shgk-radius-sm);
}

.shgk-custom-message p {
	margin: 0 0 var(--shgk-space-sm) 0;
}

.shgk-custom-message p:last-child {
	margin-bottom: 0;
}

.shgk-completion-section {
	margin-bottom: var(--shgk-space-xl);
}

.shgk-completion-section h3 {
	font-size: 1.2em;
	font-weight: 600;
	color: var(--shgk-text-dark);
	margin: 0 0 var(--shgk-space-md) 0;
	padding-bottom: var(--shgk-space-sm);
	border-bottom: 2px solid var(--shgk-border);
}

.shgk-info-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--shgk-border);
	border-radius: var(--shgk-radius-sm);
	overflow: hidden;
}

.shgk-info-table th,
.shgk-info-table td {
	padding: var(--shgk-space-md);
	text-align: left;
	border-bottom: 1px solid var(--shgk-border);
}

.shgk-info-table tr:last-child th,
.shgk-info-table tr:last-child td {
	border-bottom: none;
}

.shgk-info-table th {
	width: 30%;
	font-weight: 600;
	color: var(--shgk-text-dark);
	background: var(--shgk-bg-light);
}

.shgk-info-table td {
	color: var(--shgk-text-dark);
}

/* QRコードセクション */
.shgk-qr-section {
	text-align: center;
	background: var(--shgk-bg-light);
	padding: var(--shgk-space-lg);
	border-radius: var(--shgk-radius-md);
}

.shgk-qr-description {
	margin-bottom: var(--shgk-space-lg);
	font-size: 1em;
	color: var(--shgk-text-medium);
}

.shgk-qr-code-container {
	text-align: center;
}

.shgk-qr-code {
	margin: var(--shgk-space-lg) 0;
}

img.shgk-qr-code,
.shgk-qr-code img {
	max-width: 220px;
	height: auto;
	border: 4px solid var(--shgk-bg-white);
	padding: var(--shgk-space-md);
	background: var(--shgk-bg-white);
	border-radius: var(--shgk-radius-sm);
	box-shadow: var(--shgk-shadow-sm);
}

.shgk-qr-note {
	font-size: 0.9em;
	color: var(--shgk-text-light);
	margin-top: var(--shgk-space-md);
}

/* 操作ボタン */
.shgk-completion-actions {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--shgk-space-md);
	flex-wrap: wrap;
	margin-top: var(--shgk-space-xl);
	padding-top: var(--shgk-space-lg);
	border-top: 1px solid var(--shgk-border);
}

/* カレンダーセクション・操作ボタン共通スタイル */
.shgk-completion-actions .button,
.shgk-completion-actions .shgk-action-button,
.shgk-calendar-widget-container .button,
.shgk-calendar-widget-container .shgk-action-button {
	padding: var(--shgk-space-md) var(--shgk-space-xl) !important;
	font-size: 1em !important;
	font-weight: 600 !important;
	border-radius: var(--shgk-radius-md) !important;
	border: none !important;
	cursor: pointer !important;
	transition: all var(--shgk-transition-normal) !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: inherit !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	line-height: 1.5 !important;
	min-height: auto !important;
}

.shgk-completion-actions .button-primary,
.shgk-completion-actions .shgk-action-button-primary,
.shgk-calendar-widget-container .button-primary,
.shgk-calendar-widget-container .shgk-action-button-primary {
	color: white !important;
	background: linear-gradient(135deg, var(--shgk-primary) 0%, var(--shgk-primary-dark) 100%) !important;
	box-shadow: var(--shgk-shadow-sm) !important;
	border: none !important;
}

.shgk-completion-actions .button-primary:hover,
.shgk-completion-actions .shgk-action-button-primary:hover,
.shgk-calendar-widget-container .button-primary:hover,
.shgk-calendar-widget-container .shgk-action-button-primary:hover {
	box-shadow: var(--shgk-shadow-md) !important;
	transform: translateY(-2px) !important;
}

.shgk-completion-actions .button-secondary,
.shgk-completion-actions .shgk-action-button-secondary,
.shgk-calendar-widget-container .button-secondary,
.shgk-calendar-widget-container .shgk-action-button-secondary {
	color: var(--shgk-text-dark) !important;
	background: var(--shgk-bg-white) !important;
	border: 2px solid var(--shgk-border) !important;
}

.shgk-completion-actions .button-secondary:hover,
.shgk-completion-actions .shgk-action-button-secondary:hover,
.shgk-calendar-widget-container .button-secondary:hover,
.shgk-calendar-widget-container .shgk-action-button-secondary:hover {
	border-color: var(--shgk-primary) !important;
	color: var(--shgk-primary) !important;
	background: var(--shgk-primary-light) !important;
}

/* キャンセル完了画面の固有スタイル */
.shgk-cancellation-completion .shgk-completion-header {
	border-bottom-color: var(--shgk-warning);
}

.shgk-cancellation-completion .shgk-completion-icon {
	background: var(--shgk-warning);
}

.shgk-cancellation-completion .shgk-custom-message {
	background: linear-gradient(135deg, #fff3cd 0%, #fef5e7 100%);
	border-left-color: var(--shgk-warning);
}

/* キャンセル待ち完了画面の固有スタイル */
.shgk-waitlist-completion {
	max-width: 700px;
}

.shgk-waitlist-completion .shgk-completion-header {
	border-bottom-color: var(--shgk-primary);
}

.shgk-waitlist-completion .shgk-completion-icon {
	background: var(--shgk-primary);
}

/* キャンセル待ち取り消し完了画面の固有スタイル */
.shgk-waitlist-cancellation-completion .shgk-completion-header {
	border-bottom-color: var(--shgk-warning);
}

.shgk-waitlist-cancellation-completion .shgk-completion-icon {
	background: var(--shgk-warning);
}

.shgk-waitlist-cancellation-completion .shgk-custom-message {
	background: linear-gradient(135deg, #fff3cd 0%, #fef5e7 100%);
	border-left-color: var(--shgk-warning);
}

/* エラーメッセージ */
.shgk-error {
	max-width: 600px;
	margin: var(--shgk-space-xl) auto;
	padding: var(--shgk-space-lg);
	background: #fff3cd;
	border: 2px solid var(--shgk-warning);
	border-radius: var(--shgk-radius-md);
	text-align: center;
}

.shgk-error p {
	margin: 0;
	color: var(--shgk-text-dark);
	font-weight: 600;
}

/* 印刷用スタイル */
@media print {
	/* ヘッダー・フッター・ナビゲーションを非表示 */
	header,
	footer,
	.site-header,
	.site-footer,
	nav,
	.navigation,
	#wpadminbar {
		display: none !important;
	}

	/* 完了画面のヘッダー（アイコンとタイトル）を非表示 */
	.shgk-completion-header {
		display: none !important;
	}

	/* 汎用メッセージを非表示 */
	.shgk-custom-message {
		display: none !important;
	}

	/* カレンダーセクションを非表示 */
	.shgk-calendar-section {
		display: none !important;
	}

	/* アクションボタンを非表示 */
	.shgk-completion-actions {
		display: none !important;
	}

	/* コンテナのスタイルを調整 */
	.shgk-booking-completion,
	.shgk-cancellation-completion,
	.shgk-waitlist-completion,
	.shgk-waitlist-cancellation-completion {
		border: none;
		box-shadow: none;
		margin: 0;
		padding: 0;
	}

	/* イベント情報、QRコード、当日のご案内は表示 */
	.shgk-qr-section,
	.shgk-qr-code-container,
	.shgk-completion-section:has(.shgk-info-table),
	.shgk-completion-section:has(.shgk-custom-completion-message) {
		page-break-after: avoid;
		background: white;
	}

	img.shgk-qr-code,
	.shgk-qr-code img {
		max-width: 220px;
	}
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
	.shgk-booking-completion,
	.shgk-cancellation-completion,
	.shgk-waitlist-completion,
	.shgk-waitlist-cancellation-completion {
		margin: var(--shgk-space-lg) var(--shgk-space-md);
		padding: var(--shgk-space-lg);
	}

	.shgk-completion-header h2 {
		font-size: 1.5em;
	}

	.shgk-completion-icon {
		width: 60px;
		height: 60px;
		line-height: 60px;
	}

	.shgk-completion-icon .dashicons {
		font-size: 35px;
		width: 35px;
		height: 35px;
	}

	.shgk-info-table th {
		width: 40%;
		font-size: 0.9em;
	}

	.shgk-completion-actions {
		flex-direction: column;
	}

	.shgk-completion-actions .button,
	.shgk-completion-actions .shgk-action-button {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.shgk-booking-completion,
	.shgk-cancellation-completion,
	.shgk-waitlist-completion,
	.shgk-waitlist-cancellation-completion {
		margin: var(--shgk-space-md);
		padding: var(--shgk-space-md);
	}

	.shgk-completion-header h2 {
		font-size: 1.25em;
	}

	.shgk-info-table th,
	.shgk-info-table td {
		padding: var(--shgk-space-sm);
		font-size: 0.9em;
	}
}

/* =====================================
   キャンセル待ちステータスブロック
   ===================================== */
.shgk-waitlist-status {
	margin: var(--shgk-space-xl) 0;
}

.shgk-waitlist-custom-message {
	background: linear-gradient(135deg, var(--shgk-primary-light) 0%, #f0f9ff 100%);
	border-left: 4px solid var(--shgk-primary);
	padding: var(--shgk-space-lg);
	margin-bottom: var(--shgk-space-xl);
	border-radius: var(--shgk-radius-sm);
}

.shgk-waitlist-item {
	background: var(--shgk-bg-white);
	border: 1px solid var(--shgk-border);
	border-radius: var(--shgk-radius-md);
	padding: var(--shgk-space-lg);
	margin-bottom: var(--shgk-space-lg);
	box-shadow: var(--shgk-shadow-sm);
}

/* Detailed Display */
.shgk-waitlist-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--shgk-space-lg);
	padding-bottom: var(--shgk-space-md);
	border-bottom: 2px solid var(--shgk-border);
}

.shgk-waitlist-header h3 {
	margin: 0;
	font-size: 1.2em;
	font-weight: 600;
	color: var(--shgk-text-dark);
}

.shgk-waitlist-status-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--shgk-radius-sm);
	font-size: 0.85em;
	font-weight: 600;
	color: white;
}

.shgk-waitlist-status-badge.status-waiting {
	background: var(--shgk-primary);
}

.shgk-waitlist-status-badge.status-notified {
	background: var(--shgk-success);
}

.shgk-waitlist-details {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--shgk-space-md) var(--shgk-space-lg);
	margin-bottom: var(--shgk-space-lg);
}

.shgk-waitlist-details dt {
	font-weight: 600;
	color: var(--shgk-text-medium);
}

.shgk-waitlist-details dd {
	margin: 0;
	color: var(--shgk-text-dark);
}

.shgk-expiration-warning {
	color: var(--shgk-danger) !important;
	font-weight: 600;
}

.shgk-waitlist-info {
	background: var(--shgk-bg-light);
	padding: var(--shgk-space-md);
	border-radius: var(--shgk-radius-sm);
	margin-bottom: var(--shgk-space-md);
}

.shgk-waitlist-info.shgk-notified {
	background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
	border-left: 4px solid var(--shgk-success);
}

.shgk-waitlist-info p {
	margin: 0;
	font-size: 0.95em;
	color: var(--shgk-text-medium);
}

.shgk-waitlist-info.shgk-notified p {
	color: #155724;
	font-weight: 600;
}

/* Simple Display */
.shgk-waitlist-simple {
	display: flex;
	align-items: center;
	gap: var(--shgk-space-sm);
	flex-wrap: wrap;
	padding: var(--shgk-space-md);
	background: var(--shgk-bg-light);
	border-radius: var(--shgk-radius-sm);
	margin-bottom: var(--shgk-space-md);
}

.shgk-waitlist-simple .dashicons {
	color: var(--shgk-primary);
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.shgk-time-slot {
	color: var(--shgk-text-medium);
	font-size: 0.9em;
}

/* Cancel Form */
.shgk-waitlist-cancel-form {
	margin-top: var(--shgk-space-md);
	padding-top: var(--shgk-space-md);
	border-top: 1px solid var(--shgk-border);
}

.shgk-btn-cancel-waitlist {
	padding: var(--shgk-space-sm) var(--shgk-space-lg);
	font-size: 0.95em;
	font-weight: 600;
	color: white;
	background: var(--shgk-danger);
	border: none;
	border-radius: var(--shgk-radius-md);
	cursor: pointer;
	transition: all var(--shgk-transition-normal);
}

.shgk-btn-cancel-waitlist:hover {
	background: #c82333;
	box-shadow: var(--shgk-shadow-md);
	transform: translateY(-2px);
}

.shgk-btn-cancel-waitlist:active {
	transform: translateY(0);
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
	.shgk-waitlist-header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--shgk-space-sm);
	}

	.shgk-waitlist-details {
		grid-template-columns: 1fr;
		gap: var(--shgk-space-xs);
	}

	.shgk-waitlist-details dt {
		font-weight: 600;
		margin-top: var(--shgk-space-sm);
	}

	.shgk-waitlist-details dt:first-child {
		margin-top: 0;
	}

	.shgk-waitlist-simple {
		font-size: 0.9em;
	}
}

@media (max-width: 480px) {
	.shgk-waitlist-item {
		padding: var(--shgk-space-md);
	}

	.shgk-btn-cancel-waitlist {
		width: 100%;
	}
}

/* =====================================
   予約情報ページ用スタイル
   ===================================== */

/* Dangerボタン（キャンセルボタン） */
.shgk-action-button-danger {
	display: inline-block;
	padding: 12px 24px;
	background-color: var(--shgk-danger);
	color: white;
	text-decoration: none;
	border-radius: var(--shgk-radius-md);
	font-size: 16px;
	font-weight: 600;
	transition: all var(--shgk-transition-fast);
	text-align: center;
	border: none;
	cursor: pointer;
	box-shadow: var(--shgk-shadow-sm);
}

.shgk-action-button-danger:hover {
	background-color: #c82333;
	color: white;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: var(--shgk-shadow-md);
}

.shgk-action-button-danger:active {
	transform: translateY(0);
	box-shadow: var(--shgk-shadow-sm);
}

/* キャンセル無効表示 */
.shgk-cancel-disabled {
	display: inline-block;
	padding: 12px 24px;
	background-color: var(--shgk-bg-light);
	color: var(--shgk-text-light);
	border-radius: var(--shgk-radius-md);
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	border: 1px solid var(--shgk-border);
}

/* 予約情報ページのアイコン */
.shgk-reservation-detail .shgk-completion-icon {
	background-color: var(--shgk-primary-light);
}

.shgk-reservation-detail .shgk-completion-icon .dashicons {
	color: var(--shgk-primary);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
	.shgk-completion-actions {
		flex-direction: column;
		gap: 12px;
	}

	.shgk-action-button-danger,
	.shgk-cancel-disabled {
		width: 100%;
	}
}