.ut-crazy-client-request-block {
	/* marginはWordPress block supportsで制御 */
}

.ut-crazy-client-request-container {
	/* padding, border, box-shadowはインラインスタイルで制御 */
}

.ut-crazy-client-request-level-info {
	margin-bottom: 15px;
	padding: 10px;
	background-color: #f0f0f0;
	border-radius: 4px;
	text-align: center;
	font-weight: bold;
}

.ut-crazy-client-request-level-info.ut-crazy-client-request-limit-reached {
	background-color: #ffebee;
	color: #c62828;
}

.ut-crazy-client-request-elements {
	margin-bottom: 20px;
}

/* カード型表示 */
.ut-crazy-client-request-elements[data-display-style="card"] {
	display: grid;
	gap: 15px;
	--ut-card-vertical-max-columns: 1;
	--ut-card-horizontal-max-columns: 1;
}

.ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="vertical"] {
	grid-template-columns: 1fr;
}

.ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="horizontal"] {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="vertical"].ut-card-custom-vertical {
	grid-template-columns: repeat(
		min(var(--ut-card-vertical-custom-columns, 1), var(--ut-card-vertical-max-columns, 6)),
		minmax(0, 1fr)
	);
}

.ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="horizontal"].ut-card-custom-horizontal {
	grid-template-columns: repeat(
		min(var(--ut-card-horizontal-custom-columns, 1), var(--ut-card-horizontal-max-columns, 6)),
		minmax(0, 1fr)
	);
}

.ut-crazy-client-request-card {
	padding: 15px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background-color: #ffffff;
	transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.ut-crazy-client-request-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* カードのホバー効果クラス */
.ut-card-hover-none:hover {
	transform: none;
	box-shadow: none;
	opacity: 1;
}

.ut-card-hover-scale:hover {
	transform: scale(1.05);
	transition: transform 0.2s ease;
}

.ut-card-hover-lift:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ut-card-hover-glow:hover {
	box-shadow: 0 0 20px rgba(52, 152, 219, 0.5);
	transition: box-shadow 0.2s ease;
}

.ut-card-hover-fade:hover {
	opacity: 0.8;
	transition: opacity 0.2s ease;
}

.ut-crazy-client-request-card-header {
	font-weight: bold;
	font-size: 14px;
	color: #666;
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.ut-crazy-client-request-card-value {
	font-size: 18px;
	color: #333;
	font-weight: 600;
}

.ut-crazy-client-request-card-horizontal {
	text-align: center;
}

/* リスト型表示 */
.ut-crazy-client-request-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ut-crazy-client-request-list li {
	padding: 10px 0;
	border-bottom: 1px solid #e2e8f0;
}

.ut-crazy-client-request-list li:last-child {
	border-bottom: none;
}

.ut-crazy-client-request-list-header {
	font-weight: bold;
	color: #666;
	margin-right: 8px;
}

.ut-crazy-client-request-list-value {
	color: #333;
}

/* アクションボタン */
.ut-crazy-client-request-actions {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}

.ut-crazy-client-request-search-btn,
.ut-crazy-client-request-accept-btn {
	padding: 12px 24px;
	border: none;
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.2s, transform 0.2s;
	flex: 1;
}

.ut-crazy-client-request-search-btn:hover,
.ut-crazy-client-request-accept-btn:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}

.ut-crazy-client-request-search-btn:active,
.ut-crazy-client-request-accept-btn:active {
	transform: translateY(0);
}

.ut-crazy-client-request-btn-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.ut-crazy-client-request-btn-disabled:hover {
	transform: none;
}

/* メッセージ */
.ut-crazy-client-request-messages {
	margin-top: 15px;
	min-height: 20px;
}

.ut-crazy-client-request-message {
	padding: 10px 15px;
	border-radius: 4px;
	margin-bottom: 10px;
}

.ut-crazy-client-request-message-success {
	background-color: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

.ut-crazy-client-request-message-error {
	background-color: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

/* ============================================
   コンテナクエリの定義
   ============================================ */
.ut-crazy-client-request-block {
	container-type: inline-size;
	container-name: crazy-client-request-block;
}

/* ============================================
   レスポンシブデザイン（ビューポートベース）
   ============================================ */

/* 小さいモバイル（max-width: 400px） */
@media only screen and (max-width: 400px) {
	.ut-crazy-client-request-container {
		padding: 12px;
	}
	
	.ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="vertical"] {
		--ut-card-vertical-max-columns: 1;
		grid-template-columns: 1fr;
		gap: 10px;
	}
	
	.ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="horizontal"] {
		--ut-card-horizontal-max-columns: 1;
		grid-template-columns: 1fr;
		gap: 10px;
	}
	
	.ut-crazy-client-request-card {
		padding: 12px;
	}
	
	.ut-crazy-client-request-card-header {
		font-size: 12px;
	}
	
	.ut-crazy-client-request-card-value {
		font-size: 16px;
	}
	
	.ut-crazy-client-request-actions {
		flex-direction: column;
		gap: 8px;
	}
	
	.ut-crazy-client-request-search-btn,
	.ut-crazy-client-request-accept-btn {
		width: 100%;
		padding: 10px 20px;
		font-size: 14px;
	}
	
	.ut-crazy-client-request-level-info {
		padding: 8px;
		font-size: 12px;
	}
}

/* タブレット（min-width: 481px） */
@media only screen and (min-width: 481px) {
	.ut-crazy-client-request-container {
		padding: 16px;
	}
	
	.ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="vertical"] {
		--ut-card-vertical-max-columns: 2;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	
	.ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="horizontal"] {
		--ut-card-horizontal-max-columns: 2;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	
	.ut-crazy-client-request-actions {
		flex-direction: row;
		gap: 10px;
	}
}

/* デスクトップ（min-width: 769px） */
@media only screen and (min-width: 769px) {
	.ut-crazy-client-request-container {
		padding: 20px;
	}
	
	.ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="vertical"] {
		--ut-card-vertical-max-columns: 3;
		grid-template-columns: repeat(3, 1fr);
		gap: 15px;
	}
	
	.ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="horizontal"] {
		--ut-card-horizontal-max-columns: 3;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 15px;
	}
}

/* 大きなデスクトップ（min-width: 1030px） */
@media only screen and (min-width: 1030px) {
	.ut-crazy-client-request-container {
		padding: 24px;
	}
	
	.ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="vertical"] {
		--ut-card-vertical-max-columns: 4;
		grid-template-columns: repeat(4, 1fr);
		gap: 18px;
	}
	
	.ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="horizontal"] {
		--ut-card-horizontal-max-columns: 4;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 18px;
	}
}

/* 超大画面（min-width: 1240px） */
@media only screen and (min-width: 1240px) {
	.ut-crazy-client-request-block {
		max-width: 1200px;
		margin: 0 auto;
	}
}

/* HDサイズ（min-width: 1920px） */
@media only screen and (min-width: 1920px) {
	.ut-crazy-client-request-container {
		padding: 32px;
	}
	
	.ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="vertical"] {
		--ut-card-vertical-max-columns: 5;
		grid-template-columns: repeat(5, 1fr);
		gap: 20px;
	}
	
	.ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="horizontal"] {
		--ut-card-horizontal-max-columns: 5;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 20px;
	}
	
	.ut-crazy-client-request-card {
		padding: 18px;
	}
	
	.ut-crazy-client-request-card-header {
		font-size: 15px;
	}
	
	.ut-crazy-client-request-card-value {
		font-size: 20px;
	}
	
	.ut-crazy-client-request-search-btn,
	.ut-crazy-client-request-accept-btn {
		padding: 14px 28px;
		font-size: 18px;
	}
}

/* 4Kサイズ（min-width: 3840px） */
@media only screen and (min-width: 3840px) {
	.ut-crazy-client-request-container {
		padding: 40px;
	}
	
	.ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="vertical"] {
		--ut-card-vertical-max-columns: 6;
		grid-template-columns: repeat(6, 1fr);
		gap: 24px;
	}
	
	.ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="horizontal"] {
		--ut-card-horizontal-max-columns: 6;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 24px;
	}
	
	.ut-crazy-client-request-card {
		padding: 20px;
	}
	
	.ut-crazy-client-request-card-header {
		font-size: 16px;
	}
	
	.ut-crazy-client-request-card-value {
		font-size: 22px;
	}
	
	.ut-crazy-client-request-search-btn,
	.ut-crazy-client-request-accept-btn {
		padding: 16px 32px;
		font-size: 20px;
	}
}

/* ============================================
   コンテナクエリ（コラム内など、コンテナ幅が制限される場合）
   ============================================ */

/* 小さいモバイル（コンテナ） */
@container crazy-client-request-block (max-width: 400px) {
	.ut-crazy-client-request-container {
		padding: 12px;
	}
	
	.ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="vertical"] {
		--ut-card-vertical-max-columns: 1;
		grid-template-columns: 1fr;
		gap: 10px;
	}
	
	.ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="horizontal"] {
		--ut-card-horizontal-max-columns: 1;
		grid-template-columns: 1fr;
		gap: 10px;
	}
	
	.ut-crazy-client-request-actions {
		flex-direction: column;
	}
}

/* タブレット（コンテナ） */
@container crazy-client-request-block (min-width: 481px) {
	.ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="vertical"] {
		--ut-card-vertical-max-columns: 2;
		grid-template-columns: repeat(2, 1fr);
	}
	
	.ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="horizontal"] {
		--ut-card-horizontal-max-columns: 2;
	}
}

/* デスクトップ（コンテナ） */
@container crazy-client-request-block (min-width: 769px) {
	.ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="vertical"] {
		--ut-card-vertical-max-columns: 3;
		grid-template-columns: repeat(3, 1fr);
	}
	
	.ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="horizontal"] {
		--ut-card-horizontal-max-columns: 3;
	}
}

/* 大きなデスクトップ（コンテナ） */
@container crazy-client-request-block (min-width: 1030px) {
	.ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="vertical"] {
		--ut-card-vertical-max-columns: 4;
		grid-template-columns: repeat(4, 1fr);
	}
	
	.ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="horizontal"] {
		--ut-card-horizontal-max-columns: 4;
	}
}

/* ============================================
   JavaScriptフォールバック用クラス
   （コンテナクエリがサポートされていない場合）
   ============================================ */
.ut-crazy-client-request-block.ut-mobile-size .ut-crazy-client-request-container {
	padding: 12px;
}

.ut-crazy-client-request-block.ut-mobile-size .ut-crazy-client-request-elements[data-display-style="card"] {
	--ut-card-vertical-max-columns: 1;
	--ut-card-horizontal-max-columns: 1;
	grid-template-columns: 1fr !important;
	gap: 10px;
}

.ut-crazy-client-request-block.ut-tablet-size .ut-crazy-client-request-elements[data-display-style="card"] {
	--ut-card-vertical-max-columns: 2;
	--ut-card-horizontal-max-columns: 2;
}

.ut-crazy-client-request-block.ut-tablet-size .ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="vertical"] {
	grid-template-columns: repeat(2, 1fr);
}

.ut-crazy-client-request-block.ut-tablet-size .ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="horizontal"] {
	grid-template-columns: repeat(2, 1fr);
}

.ut-crazy-client-request-block.ut-desktop-size .ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="vertical"] {
	--ut-card-vertical-max-columns: 3;
	grid-template-columns: repeat(3, 1fr);
}

.ut-crazy-client-request-block.ut-desktop-size .ut-crazy-client-request-elements[data-display-style="card"][data-card-layout="horizontal"] {
	--ut-card-horizontal-max-columns: 3;
}

/* アニメーション */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.ut-crazy-client-request-card {
	animation: fadeIn 0.3s ease-out;
}

.ut-crazy-client-request-list li {
	animation: fadeIn 0.3s ease-out;
}

/* ============================================
   統一アニメーションクラス（ホバー）
   ============================================ */
.ut-block-hover-scale:hover {
	transform: scale(1.05);
	transition: transform var(--animation-duration, 300ms) var(--animation-easing, ease);
}

.ut-block-hover-lift:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	transition: transform var(--animation-duration, 300ms) var(--animation-easing, ease), box-shadow var(--animation-duration, 300ms) var(--animation-easing, ease);
}

.ut-block-hover-glow:hover {
	box-shadow: 0 0 20px rgba(52, 152, 219, 0.5);
	transition: box-shadow var(--animation-duration, 300ms) var(--animation-easing, ease);
}

.ut-block-hover-fade:hover {
	opacity: 0.8;
	transition: opacity var(--animation-duration, 300ms) var(--animation-easing, ease);
}

/* ============================================
   統一アニメーションクラス（クリック）
   ============================================ */
.ut-block-click-scale:active {
	transform: scale(0.95);
	transition: transform var(--animation-duration, 100ms) var(--animation-easing, ease);
}

.ut-block-click-bounce:active {
	animation: bounce var(--animation-duration, 300ms) var(--animation-easing, ease);
}

@keyframes bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

/* ============================================
   統一アニメーションクラス（スクロール）
   ============================================ */
.ut-block-scroll-fade-in {
	opacity: 0;
	transition: opacity var(--animation-duration, 500ms) var(--animation-easing, ease);
}

.ut-block-scroll-fade-in.ut-scroll-visible {
	opacity: 1;
}

.ut-block-scroll-slide-up {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity var(--animation-duration, 500ms) var(--animation-easing, ease), transform var(--animation-duration, 500ms) var(--animation-easing, ease);
}

.ut-block-scroll-slide-up.ut-scroll-visible {
	opacity: 1;
	transform: translateY(0);
}

.ut-block-scroll-slide-left {
	opacity: 0;
	transform: translateX(30px);
	transition: opacity var(--animation-duration, 500ms) var(--animation-easing, ease), transform var(--animation-duration, 500ms) var(--animation-easing, ease);
}

.ut-block-scroll-slide-left.ut-scroll-visible {
	opacity: 1;
	transform: translateX(0);
}

.ut-block-scroll-slide-right {
	opacity: 0;
	transform: translateX(-30px);
	transition: opacity var(--animation-duration, 500ms) var(--animation-easing, ease), transform var(--animation-duration, 500ms) var(--animation-easing, ease);
}

.ut-block-scroll-slide-right.ut-scroll-visible {
	opacity: 1;
	transform: translateX(0);
}

.ut-block-scroll-zoom-in {
	opacity: 0;
	transform: scale(0.8);
	transition: opacity var(--animation-duration, 500ms) var(--animation-easing, ease), transform var(--animation-duration, 500ms) var(--animation-easing, ease);
}

.ut-block-scroll-zoom-in.ut-scroll-visible {
	opacity: 1;
	transform: scale(1);
}