/*
 * Mobile intentionally does NOT reuse the desktop floating-card layout.
 * Floating boxes are easy to miss and hard to tap precisely on small
 * screens, so every popup becomes a full-width bottom sheet regardless
 * of the "position" chosen in the admin (center/top positions still
 * collapse to a bottom sheet here for usability).
 */
.can-popup {
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	top: auto !important;
	transform: none !important;
	width: 100% !important;
	max-width: 100% !important;
	border-radius: 16px 16px 0 0 !important;
	padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
}

.can-popup-image {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 10px;
	float: left;
	margin: 0 12px 8px 0;
}

.can-popup-body {
	overflow: hidden; /* clear float */
}

.can-popup-title {
	font-size: 16px;
}

.can-popup-desc {
	font-size: 13px;
	margin-bottom: 10px;
}

.can-popup-button {
	display: block;
	text-align: center;
	width: 100%;
	padding: 13px 16px;
	font-size: 15px;
	border-radius: 10px;
	clear: both;
}

.can-popup-close {
	top: 6px;
	right: 6px;
	font-size: 26px;
	padding: 8px; /* larger tap target */
}

.can-popup-badge {
	font-size: 10px;
}