/**
 * Consent Collector JP — banner.css
 *
 * 設計方針:
 * - 外部フォント・外部リソース読込ゼロ(システムフォントスタック)
 * - ホストテーマを邪魔しない抑制されたニュートラル配色
 * - CSS変数でサイト側から上書き可能(テーマ互換の逃げ道)
 * - 施行規則の可読性要件: 本文16px、高コントラスト
 */

.ypcm-banner {
	--ypcm-bg: #ffffff;
	--ypcm-text: #1f2933;
	--ypcm-border: #d9dee4;
	--ypcm-accent: #1a6b54;
	--ypcm-accent-text: #ffffff;
	--ypcm-radius: 8px;
	--ypcm-z: 999999;

	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: var(--ypcm-z);
	background: var(--ypcm-bg);
	color: var(--ypcm-text);
	border: 1px solid var(--ypcm-border);
	border-radius: var(--ypcm-radius);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

.ypcm-banner[hidden] {
	display: none;
}

/* 表示位置バリエーション(管理画面「バナー」タブで選択)。デフォルトは下部固定バー。 */
.ypcm-banner--top {
	top: 16px;
	bottom: auto;
}

.ypcm-banner--card-left,
.ypcm-banner--card-right {
	right: auto;
	left: auto;
	max-width: 380px;
}

.ypcm-banner--card-left {
	left: 16px;
}

.ypcm-banner--card-right {
	right: 16px;
}

.ypcm-banner--card-left .ypcm-banner__inner,
.ypcm-banner--card-right .ypcm-banner__inner {
	max-width: none;
	margin: 0;
}

.ypcm-banner__inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 20px;
}

.ypcm-banner__text {
	margin: 0 0 14px;
}

.ypcm-banner__link {
	color: var(--ypcm-accent);
	text-decoration: underline;
}

.ypcm-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* GeoIP出し分け(Pro)で同意制/通知のみの2グループを静的HTMLに両方出力しJSでhidden切り替えするため、
   [hidden]がdisplay:flexに上書きされないよう明示する(既定のUAスタイルは特異度で負ける)。 */
.ypcm-banner__actions[hidden] {
	display: none;
}

/* 「同意」と「必須のみ」は同格の視認性(ダークパターン回避)。
   区別は塗り/枠のみで、サイズ・太さは同一にする。 */
.ypcm-btn {
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	padding: 10px 18px;
	border-radius: 6px;
	cursor: pointer;
	border: 2px solid var(--ypcm-accent);
	min-height: 44px; /* タップ領域確保 */
}

.ypcm-btn--accept {
	background: var(--ypcm-accent);
	color: var(--ypcm-accent-text);
}

.ypcm-btn--essential {
	background: var(--ypcm-bg);
	color: var(--ypcm-accent);
}

.ypcm-btn--settings {
	background: transparent;
	color: var(--ypcm-text);
	border-color: var(--ypcm-border);
	font-weight: 400;
}

.ypcm-btn--save {
	background: var(--ypcm-accent);
	color: var(--ypcm-accent-text);
	margin-top: 10px;
}

.ypcm-btn--withdraw {
	background: var(--ypcm-bg);
	color: var(--ypcm-accent);
	margin-top: 10px;
}

.ypcm-btn:focus-visible {
	outline: 3px solid #4c9aff;
	outline-offset: 2px;
}

.ypcm-settings {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--ypcm-border);
}

.ypcm-settings__row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	cursor: pointer;
}

@media (max-width: 480px) {
	.ypcm-banner {
		left: 8px;
		right: 8px;
	}

	.ypcm-banner:not(.ypcm-banner--top) {
		bottom: 8px;
	}

	.ypcm-banner--top {
		top: 8px;
	}

	/* 小画面ではカード型も全幅バーへ統一(読みやすさ優先)。 */
	.ypcm-banner--card-left,
	.ypcm-banner--card-right {
		max-width: none;
	}

	.ypcm-banner__actions {
		flex-direction: column;
	}

	.ypcm-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.ypcm-banner {
		animation: ypcm-slide-up 0.25s ease-out;
	}

	@keyframes ypcm-slide-up {
		from { transform: translateY(12px); opacity: 0; }
		to   { transform: translateY(0);    opacity: 1; }
	}
}