/* BrooklynFM — голосование. Цвета берутся из темы BrooklynFM, если она стоит. */

.bfm-poll {
	--p-bg: var(--bfm-bg-2, #002647);
	--p-surface: var(--bfm-surface, #0a3158);
	--p-surface-2: var(--bfm-surface-2, #123e69);
	--p-line: var(--bfm-line, rgba(160, 196, 235, .14));
	--p-text: var(--bfm-text, #f2f6fb);
	--p-muted: var(--bfm-muted, #9fb3ca);
	--p-accent: var(--bfm-accent, #cf0f74);
	--p-accent-ink: var(--bfm-accent-ink, #fff);
	--p-font: var(--bfm-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);

	position: relative; z-index: 30;
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--p-accent) 22%, transparent), color-mix(in srgb, var(--p-accent) 6%, transparent) 60%),
		var(--p-bg);
	border-bottom: 1px solid var(--p-line);
	color: var(--p-text); font-family: var(--p-font);
}
.bfm-poll[hidden], .bfm-poll [hidden] { display: none !important; }
.bfm-poll.is-closed { background: var(--p-bg); }

/* Без темы BrooklynFM у полосы свои отступы. */
.bfm-poll .container { box-sizing: border-box; width: 100%; max-width: var(--bfm-container, 1200px); margin: 0 auto; padding-left: max(var(--bfm-gutter, 16px), env(safe-area-inset-left, 0px)); padding-right: max(var(--bfm-gutter, 16px), env(safe-area-inset-right, 0px)); }

.bfm-poll__bar { display: flex; align-items: center; gap: 8px; min-height: 56px; }

.bfm-poll__toggle {
	flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 10px 0;
	background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.bfm-poll__tag {
	flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px;
	background: var(--p-accent); color: var(--p-accent-ink);
	font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.bfm-poll__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: bfm-poll-pulse 1.8s infinite; }
.bfm-poll.is-closed .bfm-poll__tag { background: var(--p-surface-2); color: var(--p-text); }
.bfm-poll.is-closed .bfm-poll__tag::before { animation: none; opacity: .5; }
@keyframes bfm-poll-pulse { 50% { opacity: .3; } }

.bfm-poll__q {
	flex: 1; min-width: 0; font-weight: 700; font-size: 17px; line-height: 1.3;
	overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.bfm-poll__cta {
	flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--p-accent) 60%, transparent); font-weight: 700; font-size: 14px; white-space: nowrap;
}
.bfm-poll__cta::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.bfm-poll.is-open .bfm-poll__cta::after { transform: translateY(2px) rotate(-135deg); }
.bfm-poll__toggle:hover .bfm-poll__cta { background: var(--p-accent); border-color: var(--p-accent); color: var(--p-accent-ink); }

.bfm-poll__x {
	flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%;
	background: transparent; color: var(--p-muted); cursor: pointer;
}
.bfm-poll__x:hover { color: var(--p-text); background: var(--p-surface); }
.bfm-poll__x svg { width: 18px; height: 18px; }

.bfm-poll__panel { padding-top: 4px; padding-bottom: 18px; }

.bfm-poll__opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.bfm-poll__opt {
	display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 16px; border-radius: 14px;
	border: 1px solid var(--p-line); background: var(--p-surface); color: var(--p-text);
	font: inherit; font-weight: 600; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .15s;
}
.bfm-poll__opt:hover { border-color: var(--p-accent); background: color-mix(in srgb, var(--p-accent) 14%, var(--p-surface)); }
.bfm-poll__opt:active { transform: scale(.98); }
.bfm-poll__opt:disabled { opacity: .6; cursor: wait; }
.bfm-poll__opt--check input { width: 18px; height: 18px; accent-color: var(--p-accent); flex: none; }
.bfm-poll__send {
	margin-top: 10px; min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px;
	background: var(--p-accent); color: var(--p-accent-ink); font: inherit; font-weight: 700; cursor: pointer;
}

.bfm-poll__results { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 720px; }
.bfm-poll__res-row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.bfm-poll__res-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.bfm-poll__mine { color: var(--p-accent); font-weight: 700; font-size: 13px; }
.bfm-poll__res-num { flex: none; font-variant-numeric: tabular-nums; color: var(--p-muted); font-weight: 700; }
.bfm-poll__res.is-top .bfm-poll__res-num { color: var(--p-text); }
.bfm-poll__track { height: 8px; border-radius: 6px; background: var(--p-surface-2); overflow: hidden; }
.bfm-poll__track i { display: block; height: 100%; border-radius: 6px; background: var(--p-muted); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.bfm-poll__res.is-top .bfm-poll__track i { background: var(--p-accent); }

.bfm-poll__note, .bfm-poll__thanks { margin: 10px 0 0; color: var(--p-muted); font-size: 14px; }
.bfm-poll__thanks { font-size: 16px; color: var(--p-text); margin-top: 0; }
.bfm-poll__error { margin: 10px 0 0; color: #ffb4b4; font-size: 14px; }

@media (max-width: 640px) {
	.bfm-poll__toggle { flex-wrap: wrap; gap: 6px 10px; }
	.bfm-poll__tag { font-size: 11px; padding: 4px 10px; }
	.bfm-poll__q { flex-basis: 100%; order: 3; font-size: 15px; }
	.bfm-poll__cta { padding: 4px 12px; font-size: 13px; margin-left: auto; }
	.bfm-poll__opts { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.bfm-poll__tag::before { animation: none; }
	.bfm-poll__track i, .bfm-poll__cta::after { transition: none; }
}