/* =========================================================
   BANNER DE COOKIES (rodapé fixo)
   ========================================================= */
.swisshop-consentimento-banner{
	position:fixed;
	left:16px; right:16px; bottom:16px;
	z-index:99999;
	background:var(--preto);
	color:var(--branco);
	border-radius:12px;
	padding:16px 18px;
	box-shadow:0 8px 30px rgba(0,0,0,.25);
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:16px;
	max-width:980px;
	width:auto;
	max-height:calc(100vh - 32px); /* nunca maior que a tela, com folga pras margens de 16px em cima/embaixo */
	overflow-y:auto; /* se por algum motivo não couber, rola dentro do próprio banner em vez de estourar a tela */
	margin:0 auto;
	font-family:var(--texto);
	line-height:1.4; /* trava a altura de linha — evita herdar um valor grande de algum elemento pai */
	box-sizing:border-box;
}
.swisshop-consentimento-banner[hidden]{ display:none; }
.swisshop-consentimento-banner-texto{ flex:1 1 320px; }
.swisshop-consentimento-banner-texto p{ margin:0; font-size:13.5px; line-height:1.5; color:#E4E6EA; }
.swisshop-consentimento-banner-texto a{ color:var(--branco); text-decoration:underline; }
.swisshop-consentimento-banner-botoes{ display:flex; gap:8px; flex-wrap:wrap; flex:0 0 auto; }

/* =========================================================
   BOTÕES (compartilhados entre banner e painel)
   ========================================================= */
.swisshop-consentimento-btn{
	border:none;
	border-radius:8px;
	padding:10px 18px;
	font-size:13.5px;
	font-weight:600;
	cursor:pointer;
	white-space:nowrap;
	font-family:var(--texto);
}
.swisshop-consentimento-btn-primario{ background:var(--verde); color:var(--branco); }
.swisshop-consentimento-btn-primario:hover{ background:var(--verde-hover); }
.swisshop-consentimento-btn-secundario{ background:transparent; color:var(--branco); border:1px solid rgba(255,255,255,.35); }
.swisshop-consentimento-btn-secundario:hover{ background:rgba(255,255,255,.08); }

/* No painel (fundo claro), o botão secundário precisa de contraste escuro */
.swisshop-consentimento-painel .swisshop-consentimento-btn-secundario{ color:var(--preto); border-color:var(--linha); }
.swisshop-consentimento-painel .swisshop-consentimento-btn-secundario:hover{ background:var(--cinza-claro); }

/* =========================================================
   PAINEL DE PREFERÊNCIAS (modal)
   ========================================================= */
.swisshop-consentimento-painel{
	position:fixed; inset:0;
	z-index:100000;
	background:rgba(20,22,26,.55);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:20px;
}
.swisshop-consentimento-painel[hidden]{ display:none; }
.swisshop-consentimento-painel-caixa{
	background:var(--branco);
	color:var(--preto);
	border-radius:14px;
	max-width:520px;
	width:100%;
	max-height:85vh;
	overflow-y:auto;
	padding:24px;
	font-family:var(--texto);
}
.swisshop-consentimento-painel-cabecalho{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.swisshop-consentimento-painel-cabecalho h2{ font-size:18px; margin:0; }
.swisshop-consentimento-fechar{
	background:none; border:none; font-size:22px; line-height:1; cursor:pointer; color:var(--cinza-medio); padding:4px 8px;
}
.swisshop-consentimento-painel-intro{ font-size:13px; color:var(--cinza-medio); line-height:1.5; margin:0 0 18px; }

.swisshop-consentimento-categoria{
	border:1px solid var(--linha);
	border-radius:10px;
	padding:14px 16px;
	margin-bottom:12px;
}
.swisshop-consentimento-categoria p{ font-size:12.5px; color:var(--cinza-medio); margin:6px 0 0; line-height:1.5; }
.swisshop-consentimento-categoria-cabecalho{ display:flex; align-items:center; justify-content:space-between; }
.swisshop-consentimento-categoria-cabecalho strong{ font-size:14px; }
.swisshop-consentimento-sempre-ativo{ font-size:11.5px; font-weight:600; color:var(--verde); background:var(--verde-bg); padding:3px 9px; border-radius:20px; }

/* Toggle (switch) */
.swisshop-consentimento-toggle{ position:relative; display:inline-block; width:42px; height:24px; cursor:pointer; }
.swisshop-consentimento-toggle input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.swisshop-consentimento-toggle-trilho{
	position:absolute; inset:0; background:var(--linha); border-radius:20px; transition:background .15s;
}
.swisshop-consentimento-toggle-bola{
	position:absolute; top:3px; left:3px; width:18px; height:18px; background:var(--branco); border-radius:50%;
	box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .15s;
}
.swisshop-consentimento-toggle input:checked + .swisshop-consentimento-toggle-trilho{ background:var(--verde); }
.swisshop-consentimento-toggle input:checked + .swisshop-consentimento-toggle-trilho .swisshop-consentimento-toggle-bola{ transform:translateX(18px); }

.swisshop-consentimento-painel-botoes{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; flex-wrap:wrap; }

@media (max-width:600px){
	.swisshop-consentimento-banner{
		left:10px; right:10px; bottom:10px;
		padding:14px 16px;
		flex-direction:column;
		align-items:stretch;
		gap:12px;
	}
	.swisshop-consentimento-banner-texto{
		/* No desktop (linha), "flex:1 1 320px" dá 320px de LARGURA mínima
		   pro texto — correto ali. Só que em coluna (celular) o eixo
		   principal vira o vertical, e esse mesmo "320px" passa a valer
		   como ALTURA mínima, abrindo um vão gigante entre o texto e os
		   botões. Aqui reseta pra altura natural do conteúdo. */
		flex:none;
	}
	.swisshop-consentimento-banner-botoes{
		flex-direction:column; /* botões empilhados, largura cheia — evita quebra de linha imprevisível de 3 botões lado a lado numa tela estreita */
		gap:8px;
	}
	.swisshop-consentimento-banner-botoes .swisshop-consentimento-btn{
		width:100%;
		padding:11px 14px;
	}
}