/**
 * SN Vote — behavioural styles only.
 *
 * Your box design (background, fonts, colours, spacing, the frame) is
 * built in Elementor. This file only handles what has to work in code:
 * the frame overlay not blocking clicks, the lightbox, the results bar,
 * and the voted/closed states. Override anything freely — every rule
 * here is deliberately low-specificity.
 */

:root {
	--sn-vote-bar-color: #f5a623;
	--sn-vote-bar-track: rgba(255, 255, 255, 0.15);
	--sn-vote-bar-height: 8px;
}

.sn-vote-box {
	position: relative;
}

/* Decorative PNG frame sitting over the box. pointer-events:none keeps
   it from swallowing clicks on the image or the vote button beneath. */
.sn-vote-frame {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
}

.sn-vote-frame-img {
	width: 100%;
	height: 100%;
	object-fit: fill;
	display: block;
}

/* Image + lightbox trigger */
.sn-vote-image {
	cursor: zoom-in;
	overflow: hidden;
	position: relative;
}

.sn-vote-image img {
	width: 100%;
	display: block;
	transition: transform 0.35s ease;
}

.sn-vote-image:hover img,
.sn-vote-image:focus-visible img {
	transform: scale(1.06);
}

.sn-vote-image:focus-visible {
	outline: 2px solid var(--sn-vote-bar-color);
	outline-offset: 2px;
}

/* Vote button states.
   An Elementor button renders as a link, which can't use the disabled
   attribute, so the disabled look is driven by a class and aria-disabled
   as well. Override any of this freely in your own styles. */
.sn-vote-btn {
	cursor: pointer;
	position: relative;
	z-index: 2;
}

.sn-vote-btn:disabled,
.sn-vote-btn.is-disabled,
.sn-vote-btn[aria-disabled='true'] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Stops a disabled Elementor link button still showing hover states */
.sn-vote-btn.is-disabled a,
.sn-vote-btn.is-disabled button {
	pointer-events: none;
}

/* The chosen option gets a hook for your own styling */
.sn-vote-box.is-chosen {
	/* e.g. add your own highlight here */
}

/* Results — hidden until the configured reveal moment */
.sn-vote-results[hidden] {
	display: none;
}

.sn-vote-bar {
	width: 100%;
	height: var(--sn-vote-bar-height);
	background: var(--sn-vote-bar-track);
	border-radius: 999px;
	overflow: hidden;
	margin: 8px 0 4px;
}

.sn-vote-bar-fill {
	display: block;
	height: 100%;
	width: 0%;
	background: var(--sn-vote-bar-color);
	transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.sn-vote-count,
.sn-vote-percent {
	font-size: 0.9em;
	opacity: 0.85;
}

/* Lightbox (built by the script on first use) */
.sn-vote-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.sn-vote-lightbox.is-open {
	opacity: 1;
	pointer-events: auto;
}

.sn-vote-lightbox-inner {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	transform: scale(0.92);
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.sn-vote-lightbox.is-open .sn-vote-lightbox-inner {
	transform: scale(1);
}

.sn-vote-lightbox-inner img {
	max-width: 90vw;
	max-height: 90vh;
	display: block;
	border-radius: 8px;
}

.sn-vote-lightbox-close {
	position: absolute;
	top: -40px;
	right: 0;
	background: none;
	border: none;
	color: #fff;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	padding: 0 8px;
}

body.sn-vote-lightbox-open {
	overflow: hidden;
}

/* Turnstile is rendered off-screen; it only becomes visible if
   Cloudflare decides the visitor needs an interactive challenge. */
.sn-vote-turnstile-holder {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 100000;
}

/* Messages.
   Add <div class="sn-vote-message"></div> anywhere in your Elementor
   layout and messages appear there instead of in the toast below —
   style it however you like. */
.sn-vote-message:not(.is-visible) {
	display: none;
}

.sn-vote-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%) translateY(8px);
	max-width: min(420px, calc(100vw - 32px));
	background: #11222c;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 0.95rem;
	line-height: 1.4;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	z-index: 100001;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.sn-vote-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

.sn-vote-toast.is-error {
	border-color: rgba(255, 140, 140, 0.5);
}

@media (prefers-reduced-motion: reduce) {
	.sn-vote-image img,
	.sn-vote-bar-fill,
	.sn-vote-lightbox,
	.sn-vote-lightbox-inner {
		transition: none;
	}
}