/**
 * AK Poll Vote Popup
 *
 * Every rule is scoped to the .ak-pvp- prefix so nothing leaks into Poll
 * Maker's markup or the theme. The only exceptions are the two helper classes
 * applied to Poll Maker containers, and both are namespaced too.
 *
 * @package AK_Poll_Vote_Popup
 */

/* Replaces the margin Poll Maker's .apm-answers-without-submit provided, so
   swapping that class out does not shift the layout. */
.ak-pvp-answers-instant {
	margin-bottom: 20px;
}

/* Keeps the Vote button hidden for polls configured without one, matching
   Poll Maker's own rule for .apm-answers-without-submit. */
.ak-pvp-hide-vote-btn .apm-button-box > .ays_finish_poll {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Overlay
   -------------------------------------------------------------------------- */

.ak-pvp-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.ak-pvp-overlay[hidden] {
	display: none !important;
}

.ak-pvp-backdrop {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(15, 23, 42, 0.6);
}

/* --------------------------------------------------------------------------
   Dialog
   -------------------------------------------------------------------------- */

.ak-pvp-dialog {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 420px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: 24px;
	border-radius: 10px;
	background: #ffffff;
	color: #1f2933;
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
	animation: ak-pvp-in 160ms ease-out;
}

.ak-pvp-dialog *,
.ak-pvp-dialog *::before,
.ak-pvp-dialog *::after {
	box-sizing: border-box;
}

@keyframes ak-pvp-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ak-pvp-dialog {
		animation: none;
	}
}

.ak-pvp-title {
	margin: 0 0 16px;
	padding: 0 24px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: inherit;
}

.ak-pvp-status,
.ak-pvp-question {
	margin: 0;
	color: #52606d;
	font-size: 14px;
}

.ak-pvp-status {
	font-weight: 600;
	color: #1f2933;
}

.ak-pvp-question {
	margin-top: 16px;
}

.ak-pvp-note {
	margin: 10px 0 0;
	color: #8a5a00;
	font-size: 13px;
}

.ak-pvp-note[hidden] {
	display: none !important;
}

.ak-pvp-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #52606d;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.ak-pvp-close:hover,
.ak-pvp-close:focus-visible {
	background: #f0f4f8;
	color: #1f2933;
}

/* --------------------------------------------------------------------------
   Selected answers
   -------------------------------------------------------------------------- */

.ak-pvp-selection {
	margin: 12px 0 0;
}

.ak-pvp-options {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ak-pvp-option {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 8px;
	padding: 12px 14px;
	border: 1px solid #cbd2d9;
	border-radius: 8px;
	background: #f5f7fa;
	font-weight: 600;
	word-break: break-word;
}

.ak-pvp-option:last-child {
	margin-bottom: 0;
}

.ak-pvp-options-multiple .ak-pvp-option {
	justify-content: flex-start;
	text-align: left;
}

.ak-pvp-option-image {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 6px;
	object-fit: cover;
}

/* Cloned Poll Maker label markup (icon based polls). Purely decorative. */
.ak-pvp-option-visual {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 26px;
	line-height: 1;
	pointer-events: none;
}

.ak-pvp-option-visual img {
	max-width: 44px;
	height: auto;
}

.ak-pvp-option-text {
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */

.ak-pvp-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ak-pvp-search {
	position: relative;
	margin-top: 14px;
}

.ak-pvp-search[hidden] {
	display: none !important;
}

.ak-pvp-search-input {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 10px 38px 10px 14px;
	border: 1px solid #cbd2d9;
	border-radius: 8px;
	background: #ffffff;
	color: #1f2933;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
}

.ak-pvp-search-input::placeholder {
	color: #7b8794;
	opacity: 1;
}

.ak-pvp-search-input:focus {
	border-color: #0c6291;
	outline: 2px solid #0c6291;
	outline-offset: 1px;
}

/* The native clear affordance would sit under ours. */
.ak-pvp-search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.ak-pvp-search-clear {
	position: absolute;
	top: 50%;
	right: 6px;
	width: 30px;
	height: 30px;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #52606d;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.ak-pvp-search-clear:hover,
.ak-pvp-search-clear:focus-visible {
	background: #f0f4f8;
	color: #1f2933;
}

.ak-pvp-search-clear[hidden] {
	display: none !important;
}

.ak-pvp-search-status {
	margin: 8px 0 0;
	color: #52606d;
	font-size: 13px;
	text-align: left;
}

.ak-pvp-search-status[hidden] {
	display: none !important;
}

.ak-pvp-search-status.ak-pvp-search-empty {
	color: #8a5a00;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Multivote: mirrored answer list
   -------------------------------------------------------------------------- */

.ak-pvp-choices {
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 46vh;
	overflow-y: auto;
	text-align: left;
}

.ak-pvp-choice {
	margin: 0 0 8px;
}

.ak-pvp-choice:last-child {
	margin-bottom: 0;
}

.ak-pvp-choice[hidden] {
	display: none !important;
}

.ak-pvp-choice-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid #cbd2d9;
	border-radius: 8px;
	background: #f5f7fa;
	font-weight: 600;
	line-height: 1.4;
	word-break: break-word;
	cursor: pointer;
}

.ak-pvp-choice-label:hover {
	border-color: #0c6291;
}

.ak-pvp-choice-input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: #0c6291;
	cursor: pointer;
}

.ak-pvp-choice-input:checked ~ .ak-pvp-option-text {
	color: #0c6291;
}

.ak-pvp-choice-input:disabled,
.ak-pvp-choice-input:disabled ~ * {
	cursor: default;
	opacity: 0.55;
}

.ak-pvp-choice-input:focus-visible {
	outline: 2px solid #0c6291;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

.ak-pvp-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 20px;
}

.ak-pvp-btn {
	flex: 1 1 auto;
	max-width: 180px;
	min-height: 44px;
	padding: 10px 20px;
	border: 1px solid transparent;
	border-radius: 6px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.ak-pvp-btn-cancel {
	border-color: #cbd2d9;
	background: #ffffff;
	color: #3e4c59;
}

.ak-pvp-btn-cancel:hover,
.ak-pvp-btn-cancel:focus-visible {
	background: #f0f4f8;
}

.ak-pvp-btn-confirm {
	background: #0c6291;
	color: #ffffff;
}

.ak-pvp-btn-confirm:hover,
.ak-pvp-btn-confirm:focus-visible {
	background: #0a4f74;
}

.ak-pvp-btn[disabled] {
	opacity: 0.65;
	cursor: default;
}

.ak-pvp-dialog button:focus-visible {
	outline: 2px solid #0c6291;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
	.ak-pvp-overlay {
		padding: 12px;
	}

	.ak-pvp-dialog {
		padding: 20px 16px;
	}

	.ak-pvp-title {
		font-size: 18px;
	}

	.ak-pvp-actions {
		flex-direction: column-reverse;
	}

	.ak-pvp-btn {
		max-width: none;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Thank-you message
   -------------------------------------------------------------------------- */

.ak-pvp-toast {
	position: fixed;
	right: 16px;
	bottom: 16px;
	left: auto;
	z-index: 999998;
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	max-width: 360px;
	padding: 14px 14px 14px 16px;
	border-radius: 10px;
	background: #0c6291;
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.28);
	animation: ak-pvp-toast-in 200ms ease-out;
}

.ak-pvp-toast[hidden] {
	display: none !important;
}

@keyframes ak-pvp-toast-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ak-pvp-toast {
		animation: none;
	}
}

.ak-pvp-toast-text {
	min-width: 0;
}

.ak-pvp-toast-close {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 20px;
	line-height: 1;
	opacity: 0.8;
	cursor: pointer;
}

.ak-pvp-toast-close:hover,
.ak-pvp-toast-close:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	opacity: 1;
}

.ak-pvp-toast-close:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 1px;
}

@media (max-width: 480px) {
	.ak-pvp-toast {
		right: 12px;
		bottom: 12px;
		left: 12px;
		max-width: none;
	}
}

/* --------------------------------------------------------------------------
   Grid search (above Poll Maker's answer grid)

   Mobile first: full-bleed field, 44px+ target, and a 16px font because
   iOS Safari zooms the page when a focused input is any smaller.
   -------------------------------------------------------------------------- */

.ak-pvp-grid-search {
	margin: 0 0 14px;
	/* Sits above the grid while scrolling a long list of answers. */
	position: sticky;
	top: 0;
	z-index: 20;
	padding: 8px 0;
	background: inherit;
}

.ak-pvp-grid-search-field {
	position: relative;
}

.ak-pvp-grid-search-input {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 12px 44px 12px 16px;
	border: 1px solid rgba(127, 140, 155, 0.5);
	border-radius: 10px;
	background: #ffffff;
	color: #1f2933;
	font-family: inherit;
	/* Do not drop below 16px: smaller values trigger iOS zoom on focus. */
	font-size: 16px;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
}

.ak-pvp-grid-search-input::placeholder {
	color: #7b8794;
	opacity: 1;
}

.ak-pvp-grid-search-input:focus {
	border-color: #0c6291;
	outline: 2px solid #0c6291;
	outline-offset: 1px;
}

.ak-pvp-grid-search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.ak-pvp-grid-search-clear {
	position: absolute;
	top: 50%;
	right: 6px;
	width: 36px;
	height: 36px;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #52606d;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.ak-pvp-grid-search-clear:hover,
.ak-pvp-grid-search-clear:focus-visible {
	background: #f0f4f8;
	color: #1f2933;
}

.ak-pvp-grid-search-clear[hidden] {
	display: none !important;
}

.ak-pvp-grid-search-status {
	margin: 8px 2px 0;
	font-size: 13px;
	line-height: 1.4;
	/* Inherits the poll's own text colour, which may be light on dark. */
	color: inherit;
	opacity: 0.75;
	text-align: left;
}

.ak-pvp-grid-search-status[hidden] {
	display: none !important;
}

/* Hidden answer tiles must stay hidden whatever Poll Maker's grid rules say. */
.apm-answers > [hidden],
.apm-answers [hidden].apm-add-answer,
.apm-answers [hidden].ays-poll-add-answer-note {
	display: none !important;
}

@media (min-width: 782px) {
	.ak-pvp-grid-search-input {
		font-size: 15px;
		min-height: 44px;
	}
}

/* Poll Maker paints every descendant of a poll with the poll's own text
   colour via `.<poll-id>.box-apm *` (specificity 0,2,0, no !important). On a
   dark poll that turns the search field's text white on white. These rules
   sit one class higher so they win on specificity alone.
   The status line is left inheriting on purpose: the poll's colour is the
   readable one against the poll's own background. */
.box-apm .ak-pvp-grid-search .ak-pvp-grid-search-input {
	color: #1f2933;
}

.box-apm .ak-pvp-grid-search .ak-pvp-grid-search-input::placeholder {
	color: #7b8794;
}

.box-apm .ak-pvp-grid-search .ak-pvp-grid-search-clear {
	color: #52606d;
}

.box-apm .ak-pvp-grid-search .ak-pvp-grid-search-clear:hover,
.box-apm .ak-pvp-grid-search .ak-pvp-grid-search-clear:focus-visible {
	color: #1f2933;
}

/* --------------------------------------------------------------------------
   Grid guidance ("you can choose one more")
   -------------------------------------------------------------------------- */

.ak-pvp-grid-hint {
	margin: 0 0 12px;
	padding: 10px 14px;
	border-radius: 8px;
	/* Tinted with the poll's own colours rather than a fixed palette, so it
	   reads correctly on light and dark polls alike. */
	background: rgba(127, 140, 155, 0.16);
	border-left: 3px solid currentColor;
	color: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	text-align: left;
}

.ak-pvp-grid-hint[hidden] {
	display: none !important;
}

.ak-pvp-grid-search[hidden] {
	display: none !important;
}

@media (max-width: 480px) {
	.ak-pvp-grid-hint {
		font-size: 15px;
	}
}