.clgpd-bar {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 999999;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 24px;
	background: var(--clgpd-bg, #ffffff);
	color: var(--clgpd-text, #1b2b29);
	box-shadow: 0 -2px 12px rgba(0, 0, 0, .08);
	transform: translateY(120%);
	transition: transform .3s ease;
}
.clgpd-bar--top { top: 0; bottom: auto; box-shadow: 0 2px 12px rgba(0, 0, 0, .08); transform: translateY(-120%); }
.clgpd-bar--bottom { bottom: 0; }
.clgpd-bar.is-visible { transform: translateY(0); }
.clgpd-bar__text { flex: 1; min-width: 240px; font-size: 14px; line-height: 1.5; }
/*
 * !important nos botões abaixo é proposital: muitos temas e o Elementor
 * aplicam um reset global em [type=button], [type=submit], button
 * (ex.: reset.css do Elementor) com a MESMA especificidade de uma classe
 * única — quem carrega por último vence, e isso varia de site pra site.
 * Sem !important, o botão do banner pode sair rosa/transparente em vez de
 * verde, dependendo do tema.
 */
#clgpd-cookie-bar .clgpd-bar__btn {
	background: var(--clgpd-btn, #1acdb8) !important;
	background-color: var(--clgpd-btn, #1acdb8) !important;
	color: var(--clgpd-btn-text, #ffffff) !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 10px 20px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	cursor: pointer !important;
	box-shadow: none !important;
}
#clgpd-cookie-bar .clgpd-bar__btn:hover,
#clgpd-cookie-bar .clgpd-bar__btn:focus {
	background: var(--clgpd-btn, #1acdb8) !important;
	background-color: var(--clgpd-btn, #1acdb8) !important;
	color: var(--clgpd-btn-text, #ffffff) !important;
	opacity: .92;
}

.clgpd-legal { max-width: 780px; }
.clgpd-legal__form { margin-top: 24px; }
.clgpd-legal__ok { color: #1acdb8; font-weight: 600; }

.clgpd-btn {
	background: #1acdb8 !important;
	background-color: #1acdb8 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 10px 18px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	box-shadow: none !important;
}
.clgpd-btn:hover,
.clgpd-btn:focus {
	background: #149e8d !important;
	background-color: #149e8d !important;
	color: #fff !important;
}
.clgpd-notice--ok { background: #e6faf7; color: #0e9684; padding: 12px 16px; border-radius: 6px; }

/*
 * Formulário único de solicitações do titular — [clgpd_request_form]
 *
 * Todas as cores do widget vêm de 3 variáveis (--clgpd-rf-primary,
 * --clgpd-rf-bg, --clgpd-rf-text), definidas inline pelo PHP a partir da
 * aba "Formulário de contato > Aparência do formulário". Os tons
 * intermediários (fundos claros, bordas, texto secundário, hover) são
 * calculados a partir delas com color-mix(), em vez de hex fixos — assim
 * trocar a cor principal recolore o widget inteiro de forma coerente.
 */
.clgpd-rf {
	max-width: 760px;
	margin: 0 auto;
	background: var(--clgpd-rf-bg, #ffffff);
	border: 1px solid color-mix(in srgb, var(--clgpd-rf-primary, #1acdb8) 18%, var(--clgpd-rf-bg, #ffffff));
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 10px 30px color-mix(in srgb, var(--clgpd-rf-primary, #1acdb8) 12%, transparent);
	font-size: 15px;
	color: var(--clgpd-rf-text, #1b2b29);
}

.clgpd-rf-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	background: color-mix(in srgb, var(--clgpd-rf-primary, #1acdb8) 12%, var(--clgpd-rf-bg, #ffffff));
	color: color-mix(in srgb, var(--clgpd-rf-primary, #1acdb8) 70%, black);
	font-weight: 600;
	font-size: 14px;
	padding: 14px 24px;
	border-bottom: 1px solid color-mix(in srgb, var(--clgpd-rf-primary, #1acdb8) 20%, var(--clgpd-rf-bg, #ffffff));
}
.clgpd-rf-banner__icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--clgpd-rf-primary, #1acdb8);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}

.clgpd-rf-tabs {
	display: flex;
	flex-wrap: wrap;
	background: color-mix(in srgb, var(--clgpd-rf-primary, #1acdb8) 6%, var(--clgpd-rf-bg, #ffffff));
	border-bottom: 1px solid color-mix(in srgb, var(--clgpd-rf-primary, #1acdb8) 18%, var(--clgpd-rf-bg, #ffffff));
}
.clgpd-rf-tab {
	flex: 1 1 auto;
	min-width: 150px;
	background: transparent !important;
	border: none !important;
	border-bottom: 3px solid transparent !important;
	padding: 16px 18px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: .01em;
	color: color-mix(in srgb, var(--clgpd-rf-text, #1b2b29) 55%, var(--clgpd-rf-bg, #ffffff)) !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.clgpd-rf-tab:hover { color: color-mix(in srgb, var(--clgpd-rf-primary, #1acdb8) 80%, black) !important; }
.clgpd-rf-tab.is-active {
	color: color-mix(in srgb, var(--clgpd-rf-primary, #1acdb8) 80%, black) !important;
	background: var(--clgpd-rf-bg, #ffffff) !important;
	border-bottom-color: var(--clgpd-rf-primary, #1acdb8) !important;
}

.clgpd-rf-panels { padding: 28px; }
.clgpd-rf-panel { display: none; }
.clgpd-rf-panel.is-active { display: block; animation: clgpd-rf-fade .18s ease; }
@keyframes clgpd-rf-fade {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

.clgpd-rf-desc {
	color: color-mix(in srgb, var(--clgpd-rf-text, #1b2b29) 65%, var(--clgpd-rf-bg, #ffffff));
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 20px;
}

.clgpd-rf-field { margin-bottom: 18px; }
.clgpd-rf-field label { display: block; font-weight: 600; font-size: 13px; color: var(--clgpd-rf-text, #1b2b29); margin-bottom: 6px; }
.clgpd-rf-field input[type="text"],
.clgpd-rf-field input[type="email"],
.clgpd-rf-field textarea {
	width: 100%;
	border: 1px solid color-mix(in srgb, var(--clgpd-rf-primary, #1acdb8) 22%, var(--clgpd-rf-bg, #ffffff));
	border-radius: 8px;
	padding: 11px 14px;
	font-size: 14px;
	font-family: inherit;
	color: var(--clgpd-rf-text, #1b2b29);
	background: var(--clgpd-rf-bg, #ffffff);
	box-sizing: border-box;
}
.clgpd-rf-field input:focus,
.clgpd-rf-field textarea:focus {
	outline: none;
	border-color: var(--clgpd-rf-primary, #1acdb8);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--clgpd-rf-primary, #1acdb8) 18%, transparent);
}
.clgpd-rf-field textarea { resize: vertical; min-height: 110px; }

.clgpd-rf-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid color-mix(in srgb, var(--clgpd-rf-primary, #1acdb8) 12%, var(--clgpd-rf-bg, #ffffff));
	border-radius: 8px;
	margin-bottom: 10px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.clgpd-rf-check:hover {
	border-color: color-mix(in srgb, var(--clgpd-rf-primary, #1acdb8) 35%, var(--clgpd-rf-bg, #ffffff));
	background: color-mix(in srgb, var(--clgpd-rf-primary, #1acdb8) 5%, var(--clgpd-rf-bg, #ffffff));
}
.clgpd-rf-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--clgpd-rf-primary, #1acdb8); flex: 0 0 auto; }
.clgpd-rf-check-title { display: block; font-weight: 600; font-size: 13px; color: var(--clgpd-rf-text, #1b2b29); }
.clgpd-rf-check-desc {
	display: block;
	font-size: 12px;
	color: color-mix(in srgb, var(--clgpd-rf-text, #1b2b29) 60%, var(--clgpd-rf-bg, #ffffff));
	margin-top: 2px;
}

.clgpd-rf .clgpd-rf-submit {
	background: var(--clgpd-rf-primary, #1acdb8) !important;
	background-color: var(--clgpd-rf-primary, #1acdb8) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 12px 26px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transition: background .15s ease;
}
.clgpd-rf .clgpd-rf-submit:hover,
.clgpd-rf .clgpd-rf-submit:focus {
	background: color-mix(in srgb, var(--clgpd-rf-primary, #1acdb8) 85%, black) !important;
	background-color: color-mix(in srgb, var(--clgpd-rf-primary, #1acdb8) 85%, black) !important;
	color: #fff !important;
}

.clgpd-rf-honeypot { position: absolute; left: -9999px; top: -9999px; }

@media (max-width: 640px) {
	.clgpd-rf-tab { flex: 1 1 50%; font-size: 12px; padding: 12px 8px; }
	.clgpd-rf-panels { padding: 20px; }
}
