/*
 * CookieFox – LGPD & Cookies — Frontend Banner
 * Version: 1.2.0 | Fox Creative
 * Zero dependências externas. Compatível com Elementor.
 */

/* ============================================================
   Design Tokens (sobrescritos pelo PHP via inline style)
   ============================================================ */
:root {
	--cfox-primary            : #e8531d;
	--cfox-bg                 : #1a1a2e;
	--cfox-text               : #ffffff;
	--cfox-btn-accept-bg      : #e8531d;
	--cfox-btn-accept-text    : #ffffff;
	--cfox-btn-reject-text    : #ffffff;
	--cfox-btn-customize-text : #94a3b8;
	--cfox-radius-sm          : 8px;
	--cfox-radius-md          : 14px;
	--cfox-radius-lg          : 18px;
	--cfox-ease               : cubic-bezier(0.4, 0, 0.2, 1);
	--cfox-speed              : 0.38s;
	--cfox-font               : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--cfox-zi                 : 999999;
}

/* ============================================================
   Banner — base
   ============================================================ */
#cfox-banner {
	position        : fixed !important;
	z-index         : var(--cfox-zi) !important;
	background      : var(--cfox-bg) !important;
	color           : var(--cfox-text) !important;
	font-family     : var(--cfox-font) !important;
	font-size       : 14px !important;
	line-height     : 1.5 !important;
	box-sizing      : border-box !important;
	transform       : translateY(112%) !important;
	opacity         : 0 !important;
	transition      : transform var(--cfox-speed) var(--cfox-ease),
	                  opacity   var(--cfox-speed) var(--cfox-ease) !important;
	pointer-events  : none !important;
}

#cfox-banner.cfox-in {
	transform    : translateY(0)    !important;
	opacity      : 1                !important;
	pointer-events: auto            !important;
}

#cfox-banner.cfox-out {
	transform    : translateY(112%) !important;
	opacity      : 0                !important;
	pointer-events: none            !important;
}

/* ---- Barra inferior (padrão) ---- */
#cfox-banner.cfox-banner--bottom,
#cfox-banner.cfox-banner--top {
	left         : 0 !important;
	right        : 0 !important;
	border-top   : 3px solid var(--cfox-primary) !important;
}

#cfox-banner.cfox-banner--bottom {
	bottom : 0 !important;
	top    : auto !important;
	box-shadow: 0 -4px 32px rgba(0,0,0,0.28) !important;
}

/* ---- Barra superior ---- */
#cfox-banner.cfox-banner--top {
	top          : 0 !important;
	bottom       : auto !important;
	border-top   : none !important;
	border-bottom: 3px solid var(--cfox-primary) !important;
	box-shadow   : 0 4px 32px rgba(0,0,0,0.28) !important;
	transform    : translateY(-112%) !important;
}

#cfox-banner.cfox-banner--top.cfox-in  { transform: translateY(0)     !important; }
#cfox-banner.cfox-banner--top.cfox-out { transform: translateY(-112%) !important; }

/* ---- Cards flutuantes ---- */
#cfox-banner.cfox-banner--bottom-left,
#cfox-banner.cfox-banner--bottom-right {
	bottom        : 20px !important;
	top           : auto !important;
	max-width     : 380px !important;
	width         : calc(100% - 40px) !important;
	border-radius : var(--cfox-radius-lg) !important;
	border-top    : 3px solid var(--cfox-primary) !important;
	box-shadow    : 0 12px 48px rgba(0,0,0,0.38) !important;
}

#cfox-banner.cfox-banner--bottom-left  { left: 20px !important; right: auto !important; }
#cfox-banner.cfox-banner--bottom-right { right: 20px !important; left: auto !important; }

/* ============================================================
   Layout interno
   ============================================================ */
.cfox-banner__inner {
	display       : flex !important;
	align-items   : center !important;
	gap           : 20px !important;
	max-width     : 1320px !important;
	margin        : 0 auto !important;
	padding       : 18px 32px !important;
	box-sizing    : border-box !important;
}

#cfox-banner.cfox-banner--bottom-left  .cfox-banner__inner,
#cfox-banner.cfox-banner--bottom-right .cfox-banner__inner {
	flex-direction: column !important;
	align-items   : flex-start !important;
	padding       : 22px 20px !important;
	gap           : 16px !important;
}

/* Ícone */
.cfox-banner__icon {
	flex-shrink: 0 !important;
	color      : var(--cfox-primary) !important;
	display    : flex !important;
	opacity    : 0.9 !important;
}

#cfox-banner.cfox-banner--bottom-left  .cfox-banner__icon,
#cfox-banner.cfox-banner--bottom-right .cfox-banner__icon {
	display: none !important;
}

/* Conteúdo */
.cfox-banner__content { flex:1 !important; min-width:0 !important; }

.cfox-banner__title {
	display      : block !important;
	font-size    : 15px !important;
	font-weight  : 700 !important;
	margin       : 0 0 4px !important;
	padding      : 0 !important;
	color        : var(--cfox-text) !important;
	line-height  : 1.3 !important;
	letter-spacing: 0 !important;
	border       : none !important;
	background   : none !important;
	font-family  : var(--cfox-font) !important;
}

.cfox-banner__message {
	display    : block !important;
	font-size  : 13px !important;
	margin     : 0 !important;
	padding    : 0 !important;
	color      : rgba(255,255,255,0.72) !important;
	line-height: 1.6 !important;
	font-family: var(--cfox-font) !important;
	font-weight: 400 !important;
}

.cfox-banner__message strong { color:var(--cfox-text) !important; font-weight:600 !important; }

.cfox-policy-link {
	color               : var(--cfox-primary) !important;
	text-decoration     : underline !important;
	text-underline-offset: 2px !important;
	font-weight         : 500 !important;
	transition          : opacity 0.18s !important;
}
.cfox-policy-link:hover { opacity:0.78 !important; color:var(--cfox-primary) !important; }

/* Ações */
.cfox-banner__actions {
	display    : flex !important;
	align-items: center !important;
	gap        : 8px !important;
	flex-shrink: 0 !important;
}

#cfox-banner.cfox-banner--bottom-left  .cfox-banner__actions,
#cfox-banner.cfox-banner--bottom-right .cfox-banner__actions {
	flex-direction: column !important;
	align-items   : stretch !important;
	width         : 100% !important;
}

/* ============================================================
   Botões
   ============================================================ */
.cfox-btn {
	display        : inline-flex !important;
	align-items    : center !important;
	justify-content: center !important;
	gap            : 6px !important;
	padding        : 9px 18px !important;
	border-radius  : var(--cfox-radius-sm) !important;
	font-family    : var(--cfox-font) !important;
	font-size      : 13px !important;
	font-weight    : 600 !important;
	line-height    : 1 !important;
	letter-spacing : 0.01em !important;
	cursor         : pointer !important;
	border         : 2px solid transparent !important;
	transition     : background .18s, border-color .18s, opacity .18s, transform .14s, box-shadow .18s !important;
	white-space    : nowrap !important;
	text-decoration: none !important;
	box-shadow     : none !important;
	outline        : none !important;
	background     : transparent !important;
	-webkit-appearance: none !important;
	appearance     : none !important;
}

.cfox-btn--primary {
	background  : var(--cfox-btn-accept-bg) !important;
	border-color: var(--cfox-btn-accept-bg) !important;
	color       : var(--cfox-btn-accept-text) !important;
}
.cfox-btn--primary:hover {
	filter    : brightness(1.12) !important;
	box-shadow: 0 4px 16px rgba(0,0,0,0.22) !important;
	transform : translateY(-1px) !important;
}
.cfox-btn--primary:active { transform:translateY(0) !important; filter:brightness(.95) !important; }

.cfox-btn--outline {
	border-color: var(--cfox-btn-reject-text) !important;
	color       : var(--cfox-btn-reject-text) !important;
	opacity     : 0.65 !important;
}
.cfox-btn--outline:hover { opacity:1 !important; background:rgba(255,255,255,0.07) !important; }

.cfox-btn--ghost { color: var(--cfox-btn-customize-text) !important; padding:9px 10px !important; }
.cfox-btn--ghost:hover { color:var(--cfox-text) !important; text-decoration:underline !important; }

.cfox-btn--ghost-dark { color:#6b7280 !important; font-size:12px !important; }
.cfox-btn--ghost-dark:hover { color:#1a1a2e !important; text-decoration:underline !important; }

.cfox-btn:focus-visible { outline:3px solid var(--cfox-primary) !important; outline-offset:2px !important; }

/* ============================================================
   Overlay
   ============================================================ */
#cfox-overlay {
	position        : fixed !important;
	inset           : 0 !important;
	z-index         : calc(var(--cfox-zi) + 1) !important;
	background      : rgba(0,0,0,0.62) !important;
	backdrop-filter : blur(5px) !important;
	-webkit-backdrop-filter: blur(5px) !important;
	display         : flex !important;
	align-items     : flex-end !important;
	justify-content : center !important;
	padding         : 16px !important;
	box-sizing      : border-box !important;
	opacity         : 0 !important;
	transition      : opacity var(--cfox-speed) var(--cfox-ease) !important;
	pointer-events  : none !important;
}
#cfox-overlay.cfox-in { opacity:1 !important; pointer-events:auto !important; }

@media (min-width: 560px) {
	#cfox-overlay { align-items:center !important; }
}

/* ============================================================
   Modal
   ============================================================ */
#cfox-modal {
	background    : #ffffff !important;
	color         : #1e293b !important;
	border-radius : var(--cfox-radius-lg) !important;
	width         : 100% !important;
	max-width     : 500px !important;
	max-height    : 90dvh !important;
	display       : flex !important;
	flex-direction: column !important;
	overflow      : hidden !important;
	box-shadow    : 0 30px 70px rgba(0,0,0,0.42) !important;
	font-family   : var(--cfox-font) !important;
	transform     : scale(0.90) translateY(24px) !important;
	transition    : transform var(--cfox-speed) var(--cfox-ease) !important;
}
#cfox-overlay.cfox-in #cfox-modal { transform:scale(1) translateY(0) !important; }

.cfox-modal__header {
	display    : flex !important;
	align-items: center !important;
	gap        : 10px !important;
	padding    : 18px 22px !important;
	background : var(--cfox-bg) !important;
	flex-shrink: 0 !important;
}
.cfox-modal__header-icon { color:var(--cfox-primary) !important; flex-shrink:0 !important; display:flex !important; }

.cfox-modal__title {
	flex        : 1 !important;
	font-size   : 15px !important;
	font-weight : 700 !important;
	margin      : 0 !important;
	padding     : 0 !important;
	color       : #ffffff !important;
	line-height : 1.3 !important;
	letter-spacing: 0 !important;
	border      : none !important;
	background  : none !important;
	font-family : var(--cfox-font) !important;
}

.cfox-modal__close {
	display        : flex !important;
	align-items    : center !important;
	justify-content: center !important;
	width          : 32px !important;
	height         : 32px !important;
	border-radius  : var(--cfox-radius-sm) !important;
	border         : none !important;
	background     : rgba(255,255,255,0.1) !important;
	color          : rgba(255,255,255,0.75) !important;
	cursor         : pointer !important;
	flex-shrink    : 0 !important;
	padding        : 0 !important;
	transition     : background .16s, color .16s !important;
}
.cfox-modal__close:hover { background:rgba(255,255,255,0.2) !important; color:#fff !important; }
.cfox-modal__close:focus-visible { outline:3px solid var(--cfox-primary) !important; }

.cfox-modal__body {
	padding   : 22px 24px !important;
	overflow-y: auto !important;
	flex      : 1 !important;
}
.cfox-modal__intro {
	font-size  : 13px !important;
	color      : #6b7280 !important;
	line-height: 1.6 !important;
	margin     : 0 0 20px !important;
	padding    : 0 !important;
	font-family: var(--cfox-font) !important;
}

/* Categorias */
.cfox-category {
	display        : flex !important;
	align-items    : center !important;
	justify-content: space-between !important;
	gap            : 16px !important;
	padding        : 6px 0 18px !important;
}
.cfox-category__info  { flex:1 !important; }
.cfox-category__name {
	display    : block !important;
	font-weight: 700 !important;
	font-size  : 14px !important;
	color      : #1e293b !important;
	margin     : 0 0 3px !important;
	line-height: 1.3 !important;
	font-family: var(--cfox-font) !important;
}
.cfox-category__desc {
	display    : block !important;
	font-size  : 12px !important;
	color      : #6b7280 !important;
	line-height: 1.5 !important;
	font-family: var(--cfox-font) !important;
}
.cfox-divider { height:1px !important; background:#f1f5f9 !important; margin:0 0 14px !important; border:none !important; }

/* ============================================================
   Toggle Switch
   ============================================================ */
.cfox-toggle {
	display       : flex !important;
	flex-direction: column !important;
	align-items   : center !important;
	gap           : 5px !important;
	flex-shrink   : 0 !important;
}

.cfox-toggle input[type="checkbox"] {
	position   : absolute !important;
	opacity    : 0 !important;
	width      : 1px !important;
	height     : 1px !important;
	margin     : -1px !important;
	overflow   : hidden !important;
	clip       : rect(0,0,0,0) !important;
	white-space: nowrap !important;
}

.cfox-toggle__track {
	display      : block !important;
	width        : 46px !important;
	height       : 26px !important;
	background   : #cbd5e1 !important;
	border-radius: 999px !important;
	position     : relative !important;
	cursor       : pointer !important;
	transition   : background .22s var(--cfox-ease) !important;
	flex-shrink  : 0 !important;
}

.cfox-toggle--locked .cfox-toggle__track {
	background: var(--cfox-primary) !important;
	cursor    : not-allowed !important;
	opacity   : 0.62 !important;
}

.cfox-toggle input[type="checkbox"]:checked + .cfox-toggle__track,
.cfox-toggle input[type="checkbox"]:checked + label.cfox-toggle__track {
	background: var(--cfox-primary) !important;
}

.cfox-toggle__thumb {
	position     : absolute !important;
	top          : 3px !important;
	left         : 3px !important;
	width        : 20px !important;
	height       : 20px !important;
	background   : #ffffff !important;
	border-radius: 50% !important;
	box-shadow   : 0 1px 4px rgba(0,0,0,0.22) !important;
	transition   : transform .22s var(--cfox-ease) !important;
}

.cfox-toggle--locked .cfox-toggle__thumb { transform:translateX(20px) !important; }

.cfox-toggle input[type="checkbox"]:checked + .cfox-toggle__track .cfox-toggle__thumb,
.cfox-toggle input[type="checkbox"]:checked + label.cfox-toggle__track .cfox-toggle__thumb {
	transform: translateX(20px) !important;
}

.cfox-toggle input[type="checkbox"]:focus-visible + .cfox-toggle__track,
.cfox-toggle input[type="checkbox"]:focus-visible + label.cfox-toggle__track {
	outline: 3px solid var(--cfox-primary) !important; outline-offset:2px !important;
}

.cfox-toggle__badge {
	font-size     : 10px !important;
	font-weight   : 700 !important;
	color         : #94a3b8 !important;
	letter-spacing: 0.4px !important;
	white-space   : nowrap !important;
	text-transform: uppercase !important;
	font-family   : var(--cfox-font) !important;
}

/* ============================================================
   Rodapé do Modal
   ============================================================ */
.cfox-modal__footer {
	display        : flex !important;
	align-items    : center !important;
	justify-content: space-between !important;
	gap            : 12px !important;
	padding        : 14px 24px !important;
	background     : #f8fafc !important;
	border-top     : 1px solid #f1f5f9 !important;
	flex-shrink    : 0 !important;
}
.cfox-modal__footer .cfox-btn--primary { margin-left:auto !important; }

/* ============================================================
   Responsivo — Mobile
   ============================================================ */
@media (max-width: 680px) {

	.cfox-banner__inner {
		flex-direction: column !important;
		align-items   : flex-start !important;
		padding       : 16px 18px !important;
		gap           : 14px !important;
	}

	.cfox-banner__icon { display:none !important; }

	.cfox-banner__actions {
		flex-direction: column !important;
		align-items   : stretch !important;
		width         : 100% !important;
		gap           : 7px !important;
	}

	#cfox-btn-accept    { order:1 !important; justify-content:center !important; }
	#cfox-btn-reject    { order:2 !important; justify-content:center !important; }
	#cfox-btn-customize { order:3 !important; justify-content:center !important; }

	#cfox-banner.cfox-banner--bottom-left,
	#cfox-banner.cfox-banner--bottom-right {
		left     : 10px !important;
		right    : 10px !important;
		bottom   : 10px !important;
		max-width: none !important;
		width    : calc(100% - 20px) !important;
	}

	#cfox-modal { border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; }

	#cfox-overlay { padding:0 !important; align-items:flex-end !important; }

	.cfox-modal__footer { flex-direction:column-reverse !important; gap:8px !important; }
	.cfox-modal__footer .cfox-btn { width:100% !important; justify-content:center !important; margin-left:0 !important; }
}