/**
 * rinka-daily-vote.css — 今日のひとこと投票（フロントページ）専用スタイル
 *
 * ・「次のりんか、どっちが見たい？」型のワンタップ投票カード。今日のりんか直下に置く。
 * ・トーン: 今日のりんか(rinka-daily-hero.css)と揃えた やさしい・かわいい・あたたかい ピンク基調。
 * ・2026-07-25 ユーザー指示「もっとでざいんよくかわいく・スペースすくなめ」→ 点線フレーム＋♡アクセントの
 *   コンパクトかわいいカードへ全面リスタイル（クラス名・構造は不変＝見た目だけ）。
 * ・撤収時はこのファイルを削除し、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 16px; /* heroの直下に“ひと続き”で置くコンパクトカード */
}

/* ===== カード（点線の内フレーム＝レターカード風でかわいく） ===== */
.rinka-vote__card {
	position: relative;
	background: linear-gradient(160deg, #fff7fb 0%, #fff 55%, #ffeef6 100%);
	border: 1.5px solid rgba(244, 143, 177, .45);
	border-radius: 16px;
	box-shadow: 0 5px 16px rgba(214, 120, 170, .12);
	padding: clamp(11px, 1.7vw, 15px);
}

.rinka-vote__card::before {
	content: "";
	position: absolute;
	inset: 5px;
	border: 1.5px dashed rgba(244, 143, 177, .35);
	border-radius: 11px;
	pointer-events: none;
}

/* 右上にちいさな♡アクセント */
.rinka-vote__card::after {
	content: "♡";
	position: absolute;
	top: 6px;
	right: 12px;
	font-size: 13px;
	color: rgba(233, 30, 99, .4);
	pointer-events: none;
}

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

.rinka-vote__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: #fff;
	background: linear-gradient(150deg, #f7a8c9, var(--rinka-vote-accent-strong));
	box-shadow: 0 2px 6px rgba(233, 30, 99, .25);
	flex: none;
}

.rinka-vote__icon svg,
.rinka-vote__icon img {
	width: 14px;
	height: 14px;
}

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

.rinka-vote__title::after {
	content: " ｡ﾟ🎀";
	font-size: .8em;
}

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

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

/* ===== 選択肢（一行に並ぶタップボタン・コンパクト） ===== */
.rinka-vote__options {
	position: relative; /* 点線フレームより上に */
	display: flex;
	gap: 8px;
	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: 3px;
	min-height: 40px;
	padding: 6px 8px;
	border: 1.5px solid rgba(240, 160, 200, .55);
	border-radius: 12px;
	background: linear-gradient(180deg, #fff, #fff6fa);
	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 {
	border-radius: 999px;
	box-shadow: 0 2px 0 rgba(244, 143, 177, .3);
}

/* 投票前だけホバー/タップでぷるんと持ち上がる */
.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 5px 14px rgba(239, 143, 184, .35);
	background: #fff2f8;
}

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

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

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

.rinka-vote__opt-emoji {
	font-size: clamp(15px, 2.6vw, 17px);
}

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

/* ===== 結果バー（投票後だけ見える） ===== */
/* 投票前はバー/%の場所ごと畳む＝ボタンが縦にスカスカにならない（コンパクト化） */
.rinka-vote__options:not(.is-voted) .rinka-vote__opt-bar,
.rinka-vote__options:not(.is-voted) .rinka-vote__opt-pct {
	display: none;
}

.rinka-vote__opt-bar {
	position: relative;
	z-index: 2;
	display: block;
	height: 6px;
	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: 11px;
	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, #ffe4ef);
	box-shadow: 0 3px 10px 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 {
	position: relative;
	margin: 8px 0 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

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

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

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

/* ===== モバイル ===== */
@media (max-width: 480px) {
	.rinka-vote__options {
		gap: 7px;
	}
	.rinka-vote__opt {
		padding: 5px 6px;
		min-height: 38px;
		border-radius: 11px;
	}
	.rinka-vote__opt-face {
		gap: 4px;
	}
	.rinka-vote__card::after {
		display: none; /* 狭い画面では♡飾りを省いてすっきり */
	}
}

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