/* Popup Lead Catcher — front-end widget
 * Scoped under #plc-root / .plc to avoid clashing with themes.
 * Uses --plc-brand (set inline) so each site themes itself.
 */

.plc {
	--plc-brand: #1f6feb;
	--plc-radius: 16px;
	--plc-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
	--plc-text: #0f172a;
	--plc-muted: #64748b;
	--plc-border: #e2e8f0;
	--plc-bg: #ffffff;
	position: fixed;
	bottom: 20px;
	z-index: 2147483000;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	color: var(--plc-text);
}

.plc.plc--right { right: 20px; }
.plc.plc--left  { left: 20px; }

.plc *,
.plc *::before,
.plc *::after { box-sizing: border-box; }

/* --- Bubble ----------------------------------------------------------- */
.plc-bubble {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 18px 13px 16px;
	background: var(--plc-brand);
	color: #fff;
	border: none;
	border-radius: 999px;
	box-shadow: var(--plc-shadow);
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	max-width: 320px;
	transform: translateY(8px);
	opacity: 0;
	pointer-events: none;
	transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .35s ease, box-shadow .2s ease;
	will-change: transform, opacity;
}

.plc.is-bubble-in .plc-bubble {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.plc-bubble:hover { box-shadow: 0 16px 48px rgba(15, 23, 42, 0.26); }
.plc-bubble:focus-visible { outline: 3px solid color-mix(in srgb, var(--plc-brand) 40%, #fff); outline-offset: 2px; }

.plc-bubble__icon { display: inline-flex; }
.plc-bubble__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.plc-bubble__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-left: 4px;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	opacity: .7;
	background: rgba(255,255,255,.18);
}
.plc-bubble__close:hover { opacity: 1; }

/* --- Panel ------------------------------------------------------------ */
.plc-panel {
	width: 360px;
	max-width: calc(100vw - 32px);
	background: var(--plc-bg);
	border-radius: var(--plc-radius);
	box-shadow: var(--plc-shadow);
	border: 1px solid var(--plc-border);
	overflow: hidden;
	transform: translateY(12px) scale(.98);
	opacity: 0;
	transform-origin: bottom right;
	transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .25s ease;
	will-change: transform, opacity;
}
.plc--left .plc-panel { transform-origin: bottom left; }

.plc.is-open .plc-panel {
	transform: translateY(0) scale(1);
	opacity: 1;
}

.plc-panel__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 18px 14px;
	background: linear-gradient(135deg, var(--plc-brand), color-mix(in srgb, var(--plc-brand) 78%, #000));
	color: #fff;
}
.plc-panel__title { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: #fff; }
.plc-panel__sub   { margin: 0; font-size: 13px; opacity: .92; color: #fff; }

.plc-panel__close {
	flex: 0 0 auto;
	width: 28px; height: 28px;
	border: none;
	border-radius: 8px;
	background: rgba(255,255,255,.15);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
}
.plc-panel__close:hover { background: rgba(255,255,255,.28); }

/* --- Form ------------------------------------------------------------- */
.plc-form { padding: 16px 18px 18px; }

.plc-field { display: block; margin-bottom: 12px; }
.plc-field__label { display: block; font-size: 13px; font-weight: 600; color: var(--plc-text); margin-bottom: 5px; }
.plc-req { color: #dc2626; }

.plc-field input,
.plc-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--plc-border);
	border-radius: 10px;
	font-size: 15px;
	font-family: inherit;
	color: var(--plc-text);
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.plc-field input:focus,
.plc-field textarea:focus {
	outline: none;
	border-color: var(--plc-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--plc-brand) 20%, transparent);
}
.plc-field textarea { resize: vertical; min-height: 70px; }

.plc-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12.5px;
	color: var(--plc-muted);
	margin: 4px 0 14px;
}
.plc-consent input { margin-top: 2px; flex: 0 0 auto; }
.plc-consent a { color: var(--plc-brand); }

.plc-submit {
	width: 100%;
	padding: 12px 16px;
	background: var(--plc-brand);
	color: #fff;
	border: none;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: filter .15s ease, transform .05s ease;
}
.plc-submit:hover { filter: brightness(1.06); }
.plc-submit:active { transform: translateY(1px); }
.plc-submit[disabled] { opacity: .65; cursor: progress; }

.plc-whatsapp {
	display: block;
	text-align: center;
	margin-top: 10px;
	font-size: 13px;
	color: var(--plc-muted);
	text-decoration: none;
}
.plc-whatsapp:hover { color: var(--plc-brand); }

.plc-status { margin: 10px 0 0; font-size: 13px; min-height: 1em; }
.plc-status.is-error { color: #dc2626; }

/* Honeypot — keep it in the DOM but off-screen (bots fill it). */
.plc-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* --- Success ---------------------------------------------------------- */
.plc-success {
	padding: 30px 24px 34px;
	text-align: center;
}
.plc-success__check {
	width: 54px; height: 54px;
	margin: 0 auto 14px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: #16a34a;
	animation: plc-pop .4s cubic-bezier(.16,1,.3,1);
}
.plc-success__msg { margin: 0; font-size: 15px; color: var(--plc-text); }

@keyframes plc-pop {
	0%   { transform: scale(.4); opacity: 0; }
	100% { transform: scale(1);  opacity: 1; }
}

/* --- Mobile ----------------------------------------------------------- */
@media (max-width: 480px) {
	.plc { bottom: 0; left: 0; right: 0; }
	.plc.plc--right, .plc.plc--left { left: 0; right: 0; }
	.plc-bubble { margin: 0 16px 16px; }
	.plc.is-open .plc-bubble { display: none; }
	.plc-panel {
		width: 100%;
		max-width: 100%;
		border-radius: 18px 18px 0 0;
		border-bottom: none;
		transform-origin: bottom center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.plc-bubble, .plc-panel, .plc-success__check { transition: none; animation: none; }
}