/**
 * rinka-daily-vote.css — 今日のひとこと投票（フロントページ）専用スタイル
 *
 * ・「次のりんか、どっちが見たい？」型のワンタップ投票カード。今日のりんか直下に置く。
 * ・トーン: 今日のりんか(rinka-daily-hero.css)と揃えた やさしい・かわいい・あたたかい ピンク基調。
 * ・撤収時はこのファイルを削除し、inc/daily-vote.php の wp_enqueue_style も外す（1ファイルで撤収完結）。
 * ・投票前=大きなタップ用ボタンが一行に並ぶ／投票後(.is-voted)=結果バー(%)がにゅっと伸びる。
 */

/* ===== アクセント（この機能内だけのローカル変数。他機能に影響しない） ===== */
#rinka-daily-vote {
	--rinka-vote-accent: #f48fb1;        /* 基調ピンク */
	--rinka-vote-accent-strong: #e91e63; /* 強調（自分の選択・%） */
	--rinka-vote-ink: #7a3b5c;           /* 見出し文字（heroと同色） */
	--rinka-vote-sub: #a4557e;           /* 補助文字 */
	--rinka-vote-track: #f6dcea;         /* バーの下地 */
	margin: -6px 0 26px; /* heroのmargin-bottom(26px)と間隔を詰めて“ひと続き”に見せる */
}

/* ===== カード ===== */
.rinka-vote__card {
	background: linear-gradient(160deg, #fff9fc 0%, #fff 60%, #fdf2f8 100%);
	border: 1px solid rgba(240, 160, 200, .35);
	border-radius: 20px;
	box-shadow: 0 8px 24px rgba(214, 120, 170, .12);
	padding: clamp(16px, 2.4vw, 26px);
}

/* ===== ヘッダー（アイコン＋タイトル） ===== */
.rinka-vote__head {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 8px;
}

.rinka-vote__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 12px;
	color: var(--rinka-vote-accent-strong);
	background: rgba(250, 210, 230, .5);
	flex: none;
}

.rinka-vote__title {
	font-size: clamp(16px, 2vw, 19px);
	font-weight: 800;
	color: var(--rinka-vote-ink);
	letter-spacing: .02em;
}

/* ===== 導入文・お題文 ===== */
.rinka-vote__intro {
	margin: 0 0 6px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--rinka-vote-sub);
}

.rinka-vote__q {
	margin: 0 0 14px;
	font-size: clamp(16px, 2.1vw, 19px);
	font-weight: 700;
	line-height: 1.6;
	color: var(--rinka-vote-ink);
}

/* ===== 選択肢（一行に並ぶタップボタン） ===== */
.rinka-vote__options {
	display: flex;
	gap: 10px;
	align-items: stretch;
}

.rinka-vote__opt {
	position: relative;
	flex: 1 1 0;
	min-width: 0;               /* 3択でもスマホ一行に収める */
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	min-height: 64px;
	padding: 12px 10px;
	border: 2px solid rgba(240, 160, 200, .55);
	border-radius: 16px;
	background: #fff;
	color: var(--rinka-vote-ink);
	font: inherit;
	cursor: pointer;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

/* 投票前だけホバー/タップで持ち上がる */
.rinka-vote__options:not(.is-voted) .rinka-vote__opt:hover,
.rinka-vote__options:not(.is-voted) .rinka-vote__opt:focus-visible {
	transform: translateY(-2px);
	border-color: var(--rinka-vote-accent);
	box-shadow: 0 6px 16px rgba(239, 143, 184, .3);
	background: #fff6fa;
}

.rinka-vote__opt:focus-visible {
	outline: 3px solid #f5b8d3;
	outline-offset: 2px;
}

.rinka-vote__opt:active {
	transform: translateY(0) scale(.98);
}

/* 顔（絵文字＋ラベル） */
.rinka-vote__opt-face {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	line-height: 1.2;
}

.rinka-vote__opt-emoji {
	font-size: clamp(18px, 3.2vw, 22px);
}

.rinka-vote__opt-label {
	font-size: clamp(14px, 2.4vw, 16px);
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ===== 結果バー（投票後だけ見える） ===== */
.rinka-vote__opt-bar {
	position: relative;
	z-index: 2;
	display: block;
	height: 8px;
	border-radius: 999px;
	background: var(--rinka-vote-track);
	overflow: hidden;
	opacity: 0;
	transform: scaleY(.4);
	transition: opacity .3s ease, transform .3s ease;
}

.rinka-vote__opt-fill {
	display: block;
	height: 100%;
	width: 0;               /* JSが % を代入してアニメーション */
	border-radius: 999px;
	background: linear-gradient(90deg, #f7a8c9, var(--rinka-vote-accent));
	transition: width .7s cubic-bezier(.22, 1, .36, 1);
}

.rinka-vote__opt-pct {
	position: relative;
	z-index: 2;
	font-size: 13px;
	font-weight: 800;
	color: var(--rinka-vote-sub);
	opacity: 0;
	transition: opacity .3s ease .1s;
	min-height: 1em;
}

/* 投票後の状態 */
.rinka-vote__options.is-voted .rinka-vote__opt {
	cursor: default;
	transform: none;
}

.rinka-vote__options.is-voted .rinka-vote__opt-bar {
	opacity: 1;
	transform: scaleY(1);
}

.rinka-vote__options.is-voted .rinka-vote__opt-pct {
	opacity: 1;
}

/* 自分が選んだ選択肢を強調 */
.rinka-vote__opt.is-you {
	border-color: var(--rinka-vote-accent-strong);
	background: linear-gradient(160deg, #fff2f7, #ffe9f2);
	box-shadow: 0 4px 14px rgba(233, 30, 99, .18);
}

.rinka-vote__opt.is-you .rinka-vote__opt-pct {
	color: var(--rinka-vote-accent-strong);
}

.rinka-vote__opt.is-you .rinka-vote__opt-fill {
	background: linear-gradient(90deg, #f48fb1, var(--rinka-vote-accent-strong));
}

/* 自分の選択に小さなチェック印 */
.rinka-vote__opt.is-you .rinka-vote__opt-label::after {
	content: " ✓";
	color: var(--rinka-vote-accent-strong);
	font-weight: 900;
}

/* ===== 結果まとめ（票数・週次の一言） ===== */
.rinka-vote__result {
	margin: 14px 0 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rinka-vote__total {
	font-size: 13px;
	color: var(--rinka-vote-sub);
}

.rinka-vote__week {
	font-size: 14px;
	font-weight: 700;
	color: var(--rinka-vote-ink);
	background: rgba(250, 210, 230, .4);
	border-radius: 12px;
	padding: 8px 12px;
	align-self: flex-start;
}

.rinka-vote__thanks {
	margin: 12px 0 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--rinka-vote-accent-strong);
}

/* ===== モバイル ===== */
@media (max-width: 480px) {
	.rinka-vote__options {
		gap: 8px;
	}
	.rinka-vote__opt {
		padding: 11px 7px;
		min-height: 60px;
		border-radius: 14px;
	}
	.rinka-vote__opt-face {
		gap: 4px;
	}
}

/* ===== 動きを控えめにする設定を尊重 ===== */
@media (prefers-reduced-motion: reduce) {
	.rinka-vote__opt,
	.rinka-vote__opt-bar,
	.rinka-vote__opt-fill,
	.rinka-vote__opt-pct {
		transition: none;
	}
}