/* ============================================================
 * WB Plugin — shared UI toolkit (toast + confirm/alert modal).
 * Token-driven (polls-variables.css). Loaded on frontend + admin.
 * ============================================================ */

/* ── Lucide inline icons (ux-foundation Rule 5) ──
 * Rendered by \WbcomDesigns\WBPolls\Support\Icon / wb_polls_icon().
 * Size comes from the SVG width/height attrs (the helper's `size` arg, default
 * 20); a container may override via `.context .wb-polls-icon { width/height }`.
 * Inherits currentColor; aligns with adjacent text; never shrinks in flex. */
.wb-polls-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
	pointer-events: none;
}

/* ── Toasts ── */
.wb-polls-toasts {
	position: fixed;
	inset-block-end: var(--polls-space-5, 20px);
	inset-inline-end: var(--polls-space-5, 20px);
	z-index: var(--polls-z-toast, 10000);
	display: flex;
	flex-direction: column;
	gap: var(--polls-space-2, 8px);
	max-width: min(360px, calc(100vw - 32px));
	pointer-events: none;
}

.wb-polls-toast {
	pointer-events: auto;
	padding: var(--polls-space-3, 12px) var(--polls-space-4, 16px);
	border-radius: var(--polls-radius-md, 8px);
	background: var(--polls-white, #fff);
	color: var(--polls-text, #1a1a1a);
	box-shadow: var(--polls-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
	border-inline-start: 4px solid var(--polls-info, #2563eb);
	font-size: 14px;
	line-height: 1.4;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--polls-transition-normal, 200ms ease),
		transform var(--polls-transition-normal, 200ms ease);
}

.wb-polls-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.wb-polls-toast--success { border-inline-start-color: var(--polls-success, #16a34a); }
.wb-polls-toast--warning { border-inline-start-color: var(--polls-warning, #ea580c); }
.wb-polls-toast--error,
.wb-polls-toast--danger  { border-inline-start-color: var(--polls-danger, #dc2626); }

/* ── Confirm / alert modal ── */
.wb-polls-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--polls-z-overlay, 9000);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--polls-space-4, 16px);
	background: rgba(0, 0, 0, 0.5);
}

.wb-polls-modal-box {
	width: 100%;
	max-width: 420px;
	background: var(--polls-white, #fff);
	color: var(--polls-text, #1a1a1a);
	border-radius: var(--polls-radius-lg, 12px);
	box-shadow: var(--polls-shadow-xl, 0 16px 48px rgba(0, 0, 0, 0.18));
	padding: var(--polls-space-6, 24px);
}

.wb-polls-modal-title {
	margin: 0 0 var(--polls-space-2, 8px);
	font-size: 18px;
	font-weight: 600;
}

.wb-polls-modal-msg {
	margin: 0 0 var(--polls-space-5, 20px);
	color: var(--polls-text-secondary, #475569);
	line-height: 1.5;
}

.wb-polls-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--polls-space-2, 8px);
}

/* ── Buttons (toolkit-local; min 40px tap target) ── */
.wb-polls-btn {
	min-height: 40px;
	padding: 0 var(--polls-space-4, 16px);
	border: 1px solid transparent;
	border-radius: var(--polls-radius-md, 8px);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background var(--polls-transition-fast, 150ms ease);
}

.wb-polls-btn--primary { background: var(--polls-primary, #2271b1); color: var(--polls-white, #fff); }
.wb-polls-btn--primary:hover { background: var(--polls-primary-hover, #135e96); }
.wb-polls-btn--danger { background: var(--polls-danger, #dc2626); color: var(--polls-white, #fff); }
.wb-polls-btn--ghost {
	background: transparent;
	color: var(--polls-text, #1a1a1a);
	border-color: var(--polls-border, #ccd0d4);
}

.wb-polls-btn:focus-visible {
	outline: 2px solid var(--polls-primary, #2271b1);
	outline-offset: 2px;
}

/* ── Canonical keyboard focus ring (ux-foundation: WCAG 2.1 AA focus-visible) ──
 * Defense-in-depth safety net: guarantees every plugin interactive element has
 * a visible keyboard focus indicator even where a local rule sets `outline:none`
 * without its own replacement. Scoped to the plugin's class prefixes so the host
 * theme is never affected; keyboard-only (:focus-visible) so mouse clicks are
 * unchanged; additive outline so existing box-shadow focus rings still show. */
/* Plugin-prefixed elements themselves… */
[class^="polls-"]:focus-visible,
[class*=" polls-"]:focus-visible,
[class^="wbpoll"]:focus-visible,
[class*=" wbpoll"]:focus-visible,
[class^="bpolls-"]:focus-visible,
[class*=" bpolls-"]:focus-visible,
[class^="wbsurvey-"]:focus-visible,
[class*=" wbsurvey-"]:focus-visible,
/* …and any focusable descendant inside a plugin container (covers bare
 * <input>/<select> that carry no plugin class of their own). */
[class^="polls-"] :focus-visible,
[class*=" polls-"] :focus-visible,
[class^="wbpoll"] :focus-visible,
[class*=" wbpoll"] :focus-visible,
[class^="bpolls-"] :focus-visible,
[class*=" bpolls-"] :focus-visible,
[class^="wbsurvey-"] :focus-visible,
[class*=" wbsurvey-"] :focus-visible {
	outline: 2px solid var(--polls-primary, #2271b1);
	outline-offset: 2px;
}

/* ============================================================================
 * Survey "Thanks — your response is recorded" CTAs (J9). Token-driven
 * replacement for the inline style attrs the user (rightly) flagged.
 * ============================================================================ */
.wbsurvey-completed-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-block-start: 18px;
}

/* ============================================================================
 * Email "Send test to me" status pill (J20). Set by JS on success/failure.
 * ============================================================================ */
.wbcom-email-test-status {
	font-size: 12px;
	font-weight: 500;
}

.wbcom-email-test-status.is-success {
	color: var(--bpolls-success-text, #1a7e35);
}

.wbcom-email-test-status.is-error {
	color: var(--bpolls-danger-text, #b42318);
}