/**
 * Redireciona Zap — estilos do widget.
 *
 * Todo seletor é prefixado por .rz-root e as propriedades visuais que os temas
 * costumam sobrescrever (button/input/a) usam !important. Sem isso, temas com
 * regras genéricas de botão vazam borda, cor e raio para o FAB e para o CTA.
 *
 * As variáveis --rz-brand, --rz-accent, --rz-offset, --rz-offset-mobile e --rz-z
 * são injetadas pelo PHP a partir das configurações do plugin.
 *
 * Identidade La Regenera: Figtree (fonte do site), marrom (cabeçalho e botão principal),
 * teal (botão flutuante, foco, hover) e mint (detalhes). Botões em pílula, como no site.
 * --lr-abar-offset (La Regenera Core) = altura da barra fixa do assessment quando visível:
 * o botão sobe junto para não ficar por cima dela.
 */

.rz-root {
	--rz-brand: #66443D;
	--rz-accent: #0092A8;
	--rz-mint: var(--lr-mint, #9BE8E0);
	--rz-offset: 24px;
	--rz-offset-mobile: 14px;
	--rz-z: 52;
	--rz-text: var(--rz-brand);
	--rz-muted: color-mix(in srgb, var(--rz-brand) 72%, #fff);
	--rz-border: color-mix(in srgb, var(--rz-brand) 30%, transparent);
	--rz-soft: color-mix(in srgb, var(--rz-mint) 22%, #fff);
	--rz-shadow: 0 26px 60px rgba(102, 68, 61, .24), 0 2px 8px rgba(102, 68, 61, .12);
	--rz-lift: var(--lr-abar-offset, 0px);

	position: fixed;
	bottom: calc(var(--rz-offset) + var(--rz-lift));
	z-index: var(--rz-z);
	margin: 0;
	padding: 0;
	font-family: var(--lr-font, 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif);
	transition: bottom .6s var(--lr-ease, cubic-bezier(.2, .7, .2, 1)), opacity .3s, visibility .3s;
	font-size: 15px;
	-webkit-font-smoothing: antialiased;
	line-height: 1.4;
	text-align: left;
	direction: ltr;
}

.rz-root.rz-pos-right {
	right: var(--rz-offset);
	left: auto;
}

.rz-root.rz-pos-left {
	left: var(--rz-offset);
	right: auto;
}

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

/* --------------------------------------------------- Reset contra o tema */

.rz-root button,
.rz-root input,
.rz-root a,
.rz-root label,
.rz-root div,
.rz-root span {
	margin: 0 !important;
	float: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-shadow: none !important;
	text-decoration: none !important;
	font-family: inherit !important;
	min-width: 0 !important;
	max-width: none;
	outline: none;
	transform: none;
}

.rz-root button,
.rz-root input {
	-webkit-appearance: none;
	appearance: none;
	border: 0 !important;
	border-radius: 0;
	background: none;
	background-image: none !important;
	box-shadow: none;
	color: inherit;
	min-height: 0 !important;
	height: auto;
	width: auto;
	padding: 0;
	line-height: 1.4;
	cursor: pointer;
	text-align: inherit;
	vertical-align: baseline;
	transition: none;
}

.rz-root button::before,
.rz-root button::after,
.rz-root a::before,
.rz-root a::after {
	content: none !important;
	display: none !important;
}

.rz-root svg {
	display: block;
	max-width: none;
	vertical-align: middle;
}

.rz-dock {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.rz-pos-right .rz-dock {
	align-items: flex-end;
}

.rz-pos-left .rz-dock {
	align-items: flex-start;
}

/* ------------------------------------------------------------------ Teaser */

.rz-root .rz-teaser {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	animation: rzBubble .35s ease both;
}

.rz-pos-left .rz-teaser {
	flex-direction: row-reverse;
}

.rz-root .rz-teaser-bubble {
	background: #fff !important;
	border-radius: 18px 18px 4px 18px !important;
	padding: 14px 16px !important;
	box-shadow: 0 12px 32px rgba(102, 68, 61, .18) !important;
	max-width: 250px !important;
	font-size: 15px !important;
	line-height: 1.45 !important;
	color: var(--rz-text) !important;
	font-weight: 600 !important;
	cursor: pointer;
	border: 0 !important;
}

.rz-pos-left .rz-teaser-bubble {
	border-radius: 18px 18px 18px 4px !important;
}

.rz-root .rz-teaser-close {
	width: 22px !important;
	height: 22px !important;
	flex: none;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: #fff !important;
	box-shadow: 0 4px 12px rgba(102, 68, 61, .18) !important;
	color: var(--rz-muted) !important;
	font-size: 15px !important;
	line-height: 22px !important;
	text-align: center !important;
	cursor: pointer;
	font-weight: 700 !important;
}

.rz-root .rz-teaser-close:hover {
	color: var(--rz-text) !important;
	background: #fff !important;
}

/* ------------------------------------------------------------------ Painel */

.rz-root .rz-panel-widget {
	display: none;
	width: 340px;
	max-width: calc(100vw - (var(--rz-offset) * 2));
	background: #fff !important;
	border: 0 !important;
	border-radius: 22px !important;
	overflow: hidden;
	box-shadow: var(--rz-shadow) !important;
}

.rz-root .rz-panel-widget.is-open {
	display: block;
	animation: rzPop .28s cubic-bezier(.2, .9, .3, 1) both;
}

.rz-root .rz-head {
	background: var(--rz-brand) !important;
	padding: 16px 16px 16px 18px !important;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.rz-root .rz-head-ident {
	display: flex;
	align-items: center;
	gap: 11px;
}

.rz-root .rz-avatar {
	width: 42px !important;
	height: 42px !important;
	flex: none;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .08) !important;
	border: 1.5px solid color-mix(in srgb, var(--rz-mint) 45%, transparent) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700 !important;
	font-size: 15px !important;
	color: #fff !important;
}

.rz-root .rz-avatar-img {
	object-fit: contain;
	padding: 8px !important;
}

.rz-root .rz-head-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.rz-root .rz-head-title {
	font-weight: 800 !important;
	font-size: 17px !important;
	color: #fff !important;
	line-height: 1.2 !important;
	letter-spacing: -.01em !important;
}

.rz-root .rz-head-status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px !important;
	color: rgba(255, 255, 255, .8) !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
}

.rz-root .rz-dot {
	width: 7px !important;
	height: 7px !important;
	flex: none;
	border-radius: 50% !important;
	background: var(--rz-mint) !important;
	display: inline-block;
}

.rz-root .rz-close {
	width: 28px !important;
	height: 28px !important;
	flex: none;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: rgba(255, 255, 255, .75) !important;
	font-size: 20px !important;
	line-height: 1 !important;
	text-align: center !important;
	cursor: pointer;
}

.rz-root .rz-close:hover {
	background: rgba(255, 255, 255, .14) !important;
	color: #fff !important;
}

/* ------------------------------------------------------------------- Corpo */

.rz-root .rz-body {
	padding: 18px 18px 20px !important;
	background: var(--rz-soft) !important;
	max-height: min(70vh, 560px);
	overflow-y: auto;
}

.rz-root .rz-bubble {
	background: #fff !important;
	border-radius: 4px 18px 18px 18px !important;
	padding: 13px 15px !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: var(--rz-text) !important;
	box-shadow: 0 1px 2px rgba(102, 68, 61, .1) !important;
	margin: 0 0 16px !important;
	font-weight: 500 !important;
}

.rz-root .rz-fields {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.rz-root .rz-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-weight: 400 !important;
}

.rz-root .rz-field-label {
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--rz-text) !important;
	line-height: 1.2 !important;
}

.rz-root .rz-input {
	display: block;
	padding: 12px 16px !important;
	border: 1.5px solid var(--rz-border) !important;
	border-radius: 10px !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: var(--rz-text) !important;
	background: #fff !important;
	width: 100% !important;
	height: auto !important;
	line-height: 1.3 !important;
	box-shadow: none !important;
	cursor: text;
}

.rz-root .rz-input:focus {
	border-color: var(--rz-accent) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rz-accent) 18%, transparent) !important;
	outline: none !important;
}

.rz-root .rz-input::placeholder {
	color: color-mix(in srgb, var(--rz-brand) 55%, transparent);
	opacity: 1;
}

.rz-root .rz-consent {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	cursor: pointer;
	margin-top: 2px !important;
}

.rz-root .rz-checkbox {
	flex: none;
	width: 18px !important;
	height: 18px !important;
	border-radius: 5px !important;
	margin-top: 1px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: #fff !important;
	border: 1.5px solid var(--rz-border) !important;
	background: #fff !important;
	line-height: 1 !important;
}

.rz-root .rz-checkbox.is-checked {
	border-color: var(--rz-accent) !important;
	background: var(--rz-accent) !important;
}

.rz-root .rz-consent-text,
.rz-root .rz-consent-text a {
	font-size: 12px !important;
	line-height: 1.4 !important;
	color: var(--rz-muted) !important;
	font-weight: 500 !important;
}

.rz-root .rz-consent-text a {
	color: var(--rz-text) !important;
	text-decoration: underline !important;
}

.rz-root .rz-error {
	font-size: 12.5px !important;
	color: #B3261E !important;
	font-weight: 600 !important;
	background: #fdeceb !important;
	border-radius: 6px !important;
	padding: 8px 10px !important;
}

.rz-root .rz-cta {
	margin-top: 4px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--rz-brand) !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	min-height: 52px !important;
	padding: 14px 22px !important;
	border: 0 !important;
	border-radius: 999px !important;
	transition: background-color .35s, gap .35s var(--lr-ease, ease);
	cursor: pointer;
	user-select: none;
	text-decoration: none !important;
	width: 100% !important;
	line-height: 1.2 !important;
	box-shadow: none !important;
	text-align: center !important;
}

.rz-root .rz-cta svg {
	width: 19px;
	height: 19px;
	flex: none;
	fill: currentColor;
}

.rz-root .rz-cta:hover,
.rz-root .rz-cta:focus-visible {
	gap: 14px;
	background: var(--rz-accent) !important;
	color: #fff !important;
}

.rz-root .rz-cta:active {
	transform: translateY(1px);
}

.rz-root .rz-cta[disabled] {
	opacity: .7;
	cursor: progress;
}

.rz-root .rz-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 11px !important;
	color: var(--rz-muted) !important;
	font-weight: 600 !important;
	margin-top: 2px !important;
}

.rz-root .rz-note svg {
	width: 11px;
	height: 11px;
	fill: currentColor;
}

/* ----------------------------------------------------------------- Sucesso */

.rz-root .rz-step-success {
	display: none;
	flex-direction: column;
	align-items: center;
	text-align: center !important;
	gap: 12px;
	padding: 14px 6px 8px !important;
}

.rz-root .rz-success-badge {
	width: 56px !important;
	height: 56px !important;
	flex: none;
	border-radius: 50% !important;
	background: var(--rz-mint) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rz-brand) !important;
}

.rz-root .rz-success-badge svg {
	width: 28px;
	height: 28px;
	stroke: currentColor;
}

.rz-root .rz-success-title {
	font-weight: 800 !important;
	font-size: 20px !important;
	letter-spacing: -.015em !important;
	color: var(--rz-brand) !important;
	line-height: 1.25 !important;
}

.rz-root .rz-success-text {
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--rz-text) !important;
	font-weight: 500 !important;
	max-width: 260px;
}

.rz-root .rz-again {
	font-size: 12.5px !important;
	color: var(--rz-muted) !important;
	font-weight: 600 !important;
	cursor: pointer;
	text-decoration: underline !important;
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	width: auto !important;
}

/* --------------------------------------------------------------------- FAB */

.rz-root .rz-fab {
	width: 60px !important;
	height: 60px !important;
	flex: none;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--rz-accent) !important;
	background-image: none !important;
	color: #fff !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 10px 26px rgba(102, 68, 61, .28) !important;
	animation: rzPulse 2.6s infinite;
	transition: background-color .35s;
	line-height: 1 !important;
	font-size: 0 !important;
}

.rz-root .rz-fab svg {
	width: 32px;
	height: 32px;
	fill: currentColor;
}

.rz-root .rz-fab.is-open {
	background: var(--rz-brand) !important;
	animation: none;
}

.rz-root .rz-fab-close {
	font-size: 26px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	color: #fff !important;
}

.rz-root .rz-fab:hover,
.rz-root .rz-fab:focus-visible {
	background: var(--rz-brand) !important;
	color: #fff !important;
}

.rz-root .rz-fab:focus-visible,
.rz-root .rz-cta:focus-visible,
.rz-root .rz-close:focus-visible,
.rz-root .rz-teaser-close:focus-visible {
	outline: 2px solid var(--rz-accent) !important;
	outline-offset: 3px !important;
}

.rz-root .rz-fab.is-open:hover {
	background: var(--rz-brand) !important;
}

.rz-root .rz-fab:active {
	transform: scale(.95);
}

/* ---------------------------------------------------------------- Animação */

@keyframes rzPop {
	from {
		opacity: 0;
		transform: translateY(14px) scale(.97);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes rzPulse {
	0% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--rz-accent) 45%, transparent);
	}
	70% {
		box-shadow: 0 0 0 16px transparent;
	}
	100% {
		box-shadow: 0 0 0 0 transparent;
	}
}

@keyframes rzBubble {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rz-root .rz-fab,
	.rz-root .rz-teaser,
	.rz-root .rz-panel-widget.is-open {
		animation: none !important;
	}
}

/* ------------------------------------------------------------------ Mobile */

@media (max-width: 640px) {
	.rz-root {
		bottom: calc(var(--rz-offset-mobile) + var(--rz-lift));
	}

	.rz-root.rz-pos-right {
		right: var(--rz-offset-mobile);
	}

	.rz-root.rz-pos-left {
		left: var(--rz-offset-mobile);
	}

	.rz-root .rz-panel-widget {
		width: calc(100vw - (var(--rz-offset-mobile) * 2));
		max-width: 400px;
	}

	.rz-root .rz-teaser-bubble {
		max-width: min(238px, calc(100vw - 120px)) !important;
	}

	.rz-root .rz-input {
		font-size: 16px !important; /* evita o zoom automático do iOS */
	}
}

/* ------------------------------------------------------- La Regenera Core */

/* Menu mobile aberto: o botão sai de cena (o menu cobre a tela). */
html.lr-menu-open .rz-root {
	opacity: 0;
	visibility: hidden;
}
