/**
 * HopProof widget styles.
 *
 * Namespaced with `hopproof-` on every selector to avoid theme conflicts.
 * Fixed positioning + pointer-events management so the widget never affects
 * page layout or blocks clicks outside its own bounds.
 */

.hopproof-root {
	position: fixed;
	z-index: 2147483000; /* above most UI, below modal portals that use max int */
	pointer-events: none;
	max-width: calc(100vw - 20px);
	--hopproof-accent: #111827;
	--hopproof-radius: 12px;
	--hopproof-offset-x: 20px;
	--hopproof-offset-y: 20px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.35;
	color: #111827;
}

.hopproof-root.hopproof-pos-bottom-right  { right: var(--hopproof-offset-x); bottom: var(--hopproof-offset-y); }
.hopproof-root.hopproof-pos-bottom-left   { left: var(--hopproof-offset-x);  bottom: var(--hopproof-offset-y); }
.hopproof-root.hopproof-pos-bottom-center { left: 50%; bottom: var(--hopproof-offset-y); transform: translateX(-50%); }
.hopproof-root.hopproof-pos-top-right     { right: var(--hopproof-offset-x); top: var(--hopproof-offset-y); }
.hopproof-root.hopproof-pos-top-left      { left: var(--hopproof-offset-x);  top: var(--hopproof-offset-y); }
.hopproof-root.hopproof-pos-top-center    { left: 50%; top: var(--hopproof-offset-y); transform: translateX(-50%); }
.hopproof-root.hopproof-pos-middle-right  { right: var(--hopproof-offset-x); top: 50%; transform: translateY(-50%); }
.hopproof-root.hopproof-pos-middle-left   { left: var(--hopproof-offset-x);  top: 50%; transform: translateY(-50%); }

.hopproof-card {
	pointer-events: auto;
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 320px;
	max-width: 100%;
	padding: 12px 36px 12px 12px;
	background: var(--hopproof-bg, #ffffff);
	border: 1px solid var(--hopproof-border, rgba(0, 0, 0, 0.06));
	border-radius: var(--hopproof-radius);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 300ms ease-out, transform 300ms ease-out;
	cursor: default;
}
.hopproof-card.hopproof-clickable { cursor: pointer; }
.hopproof-card.hopproof-in  { opacity: 1; transform: translateY(0); }
.hopproof-card.hopproof-out { opacity: 0; transform: translateY(16px); transition-duration: 200ms; }

/* Mirror the slide direction when anchored at the top. */
.hopproof-pos-top-right .hopproof-card,
.hopproof-pos-top-left .hopproof-card,
.hopproof-pos-top-center .hopproof-card {
	transform: translateY(-16px);
}
.hopproof-pos-top-right .hopproof-card.hopproof-in,
.hopproof-pos-top-left .hopproof-card.hopproof-in,
.hopproof-pos-top-center .hopproof-card.hopproof-in {
	transform: translateY(0);
}

.hopproof-card.hopproof-no-motion,
.hopproof-card.hopproof-no-motion.hopproof-in,
.hopproof-card.hopproof-no-motion.hopproof-out {
	transition: opacity 120ms linear;
	transform: none !important;
}

.hopproof-thumb {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: calc(var(--hopproof-radius) - 4px);
	overflow: hidden;
	background: var(--hopproof-thumb-bg, #f3f4f6);
	display: flex;
	align-items: center;
	justify-content: center;
}
.hopproof-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hopproof-icon-tile svg {
	width: 24px;
	height: 24px;
	color: var(--hopproof-accent, #111827);
	display: block;
}

.hopproof-text { flex: 1 1 auto; min-width: 0; }
.hopproof-name {
	font-weight: 600;
	font-size: 14px;
	color: var(--hopproof-name-color, #111827);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.hopproof-detail {
	font-size: 13px;
	color: var(--hopproof-detail-color, #6b7280);
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hopproof-close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--hopproof-close-color, #9ca3af);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	border-radius: 4px;
	opacity: 0;
	transition: opacity 150ms ease, color 150ms ease, background 150ms ease;
}
.hopproof-card:hover .hopproof-close,
.hopproof-card:focus-within .hopproof-close { opacity: 1; }
.hopproof-close:hover { color: var(--hopproof-close-hover-color, #374151); background: rgba(0, 0, 0, 0.05); }

.hopproof-brand {
	position: absolute;
	bottom: 3px;
	right: 10px;
	font-size: 9px;
	color: var(--hopproof-brand-color, #d1d5db);
	letter-spacing: 0.02em;
	text-transform: lowercase;
	pointer-events: none;
}

/* Template: card — larger thumb, stacked */
.hopproof-tpl-card {
	width: 360px;
	padding: 14px 40px 14px 14px;
}
.hopproof-tpl-card .hopproof-thumb { flex: 0 0 56px; width: 56px; height: 56px; }

/* Template: bar — thin, full-text, no thumb look */
.hopproof-tpl-bar {
	width: auto;
	min-width: 280px;
	padding: 10px 36px 10px 14px;
	border-radius: 999px;
	gap: 10px;
}
.hopproof-tpl-bar .hopproof-thumb { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 999px; }

/* Template: toast — tight, spacing reduced */
.hopproof-tpl-toast {
	width: 300px;
	padding: 10px 32px 10px 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.hopproof-tpl-toast .hopproof-thumb { flex: 0 0 40px; width: 40px; height: 40px; }
.hopproof-tpl-toast .hopproof-name { font-size: 13px; }
.hopproof-tpl-toast .hopproof-detail { font-size: 12px; }

/* Mobile: stick to bottom with safe-area insets, compress to viewport. */
@media (max-width: 640px) {
	.hopproof-root {
		left: 8px !important;
		right: 8px !important;
		bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
		top: auto !important;
		transform: none !important;
	}
	.hopproof-card {
		width: 100%;
		max-width: 100%;
	}
	.hopproof-close { opacity: 1; }
}

/* Always show close button on touch devices. */
@media (hover: none) {
	.hopproof-close { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.hopproof-card,
	.hopproof-card.hopproof-in,
	.hopproof-card.hopproof-out {
		transition: opacity 120ms linear !important;
		transform: none !important;
	}
}