/* PortfolioMo – the floating "Try this design" panel used in preview mode. */

.pmp-pv {
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-end;
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 99991;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #101828;
}
.pmp-pv[hidden] { display: none; }

.pmp-pv-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	background: #101828;
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 12px 30px -12px rgba(16, 24, 40, .65);
	transition: transform .2s;
}
.pmp-pv-toggle:hover { transform: translateY(-2px); }
.pmp-pv-dot { width: 10px; height: 10px; border-radius: 50%; background: #7CE0C6; box-shadow: 0 0 0 0 rgba(124, 224, 198, .6); animation: pmp-pv-pulse 2.4s infinite; }
@keyframes pmp-pv-pulse { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.pmp-pv-panel {
	width: min(320px, calc(100vw - 32px));
	margin-bottom: 10px;
	padding: 18px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 24px 50px -20px rgba(16, 24, 40, .45);
	max-height: min(70vh, 560px);
	overflow-y: auto;
}
.pmp-pv-panel[hidden] { display: none; }
.pmp-pv-title { margin: 0 0 14px; font-size: 17px; font-weight: 700; }
.pmp-pv-field { display: block; margin-bottom: 14px; }
.pmp-pv-field > span { display: block; margin-bottom: 5px; font-size: 15px; font-weight: 600; color: #475467; }
.pmp-pv-field select {
	width: 100%;
	min-height: 46px;
	padding: 8px 38px 8px 12px;
	border: 1px solid #d0d5dd;
	border-radius: 10px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475467' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 18px 18px;
	font: inherit;
	font-size: 16px;
	color: #101828;
	-webkit-appearance: none;
	appearance: none;
}
.pmp-pv-field select:focus { outline: 2px solid #101828; outline-offset: 2px; }
.pmp-pv-swatch { display: flex; gap: 6px; margin: -8px 0 14px; }
.pmp-pv-swatch span { width: 28px; height: 14px; border-radius: 4px; border: 1px solid rgba(16, 24, 40, .12); }
.pmp-pv-note { margin: 4px 0 0; font-size: 15px; color: #667085; }

@media (max-width: 640px) {
	.pmp-pv { right: 12px; bottom: 12px; left: 12px; }
	.pmp-pv-panel { width: auto; }
	.pmp-pv-toggle { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.pmp-pv * { animation: none !important; transition: none !important; }
}
@media print { .pmp-pv { display: none; } }