/* ===================== Barra fixa (só telemóvel) ===================== */

#dw-sw-barra {
	display: none; /* visível só em telemóvel, ver @media mais abaixo */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99998; /* abaixo do botão do chatbot (99999), para nunca lhe tapar o clique */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#dw-sw-barra-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	/* Cor configurável nas definições — só este botão; o painel expandido
	   e o card continuam sempre com o gradiente da temperatura. */
	background: var(--dw-sw-barra-cor, rgba(33, 147, 176, 0.94));
	color: var(--dw-sw-barra-texto, #fff);
	border: none;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.dw-sw-barra-emoji { font-size: 16px; line-height: 1; }
.dw-sw-barra-temp { font-weight: 800; }
.dw-sw-barra-local { opacity: .9; font-weight: 500; }

.dw-sw-barra-seta {
	margin-left: auto;
	width: 0; height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--dw-sw-barra-texto, #fff);
	transition: transform .2s ease;
}
#dw-sw-barra-toggle[aria-expanded="true"] .dw-sw-barra-seta { transform: rotate(180deg); }

#dw-sw-barra-painel {
	/* Mesmo gradiente do card (shortcode), consoante a temperatura/chuva —
	   ver as classes .very-hot/.hot/.pleasant/.rainy/.cold mais abaixo,
	   partilhadas entre o card e este painel. Cor por omissão (sem
	   nenhuma classe de temperatura) igual à do card. */
	background: linear-gradient(135deg, #6dd5ed, #2193b0);
	color: #fff;
	padding: 12px 14px 14px;
	box-shadow: 0 6px 14px rgba(0,0,0,.15);
	font-size: 13.5px;
}
#dw-sw-barra-painel[hidden] { display: none; }

.dw-sw-barra-linha {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.dw-sw-barra-mensagem {
	margin: 10px 0 0;
	line-height: 1.4;
	/* Sem cor fixa: herda do painel (branco ou escuro, consoante a
	   temperatura), tal como o resto do texto do painel. */
}

.dw-sw-barra-indice-header {
	display: flex;
	justify-content: space-between;
	font-size: 12.5px;
	font-weight: 600;
	margin-bottom: 5px;
}

@media (max-width: 782px) {
	#dw-sw-barra { display: block; }
	/* Empurra o conteúdo da página para não ficar tapado pela barra —
	   ajusta este valor se o teu tema já tiver um cabeçalho fixo próprio. */
	body { margin-top: 34px; }
}

/* ===================== Card (shortcode) ===================== */

.dw-smart-weather-card {
	max-width: 320px;
	padding: 20px;
	border-radius: 20px;
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-shadow: 0 10px 20px rgba(0,0,0,0.1);
	margin: 20px auto;
	background: linear-gradient(135deg, #6dd5ed, #2193b0);
}

.dw-smart-weather-card.very-hot, #dw-sw-barra-painel.very-hot { background: linear-gradient(135deg, #ff512f, #dd2476); }
.dw-smart-weather-card.hot, #dw-sw-barra-painel.hot { background: linear-gradient(135deg, #f2994a, #f2c94c); color: #333; }
.dw-smart-weather-card.pleasant, #dw-sw-barra-painel.pleasant { background: linear-gradient(135deg, #56ab2f, #a8e063); color: #333; }
.dw-smart-weather-card.rainy, #dw-sw-barra-painel.rainy { background: linear-gradient(135deg, #606c88, #3f4c6b); }
.dw-smart-weather-card.cold, #dw-sw-barra-painel.cold { background: linear-gradient(135deg, #2980b9, #6dd5ed); }
.dw-smart-weather-card.night, #dw-sw-barra-painel.night { background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); }

.dw-sw-header { display: flex; align-items: center; margin-bottom: 15px; }
.dw-sw-emoji { font-size: 48px; margin-right: 15px; }
.dw-sw-temp-main { display: flex; flex-direction: column; }
.dw-sw-current-temp { font-size: 32px; font-weight: 800; line-height: 1; }
.dw-sw-status-label { font-size: 14px; opacity: 0.9; text-transform: uppercase; letter-spacing: 1px; }

.dw-sw-message {
	background: rgba(255, 255, 255, 0.2);
	padding: 12px 15px;
	border-radius: 12px;
	margin-bottom: 20px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
}

.dw-sw-uv {
	/* display:flex (não inline-flex) + width:fit-content + margin-left:auto
	   encosta a pastilha à direita sem esticar a largura do card/painel. */
	display: flex;
	width: fit-content;
	margin: 0 0 12px auto;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.2);
	padding: 4px 10px;
	border-radius: 999px;
}
.dw-sw-uv-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dw-sw-uv-cor, #999);
	flex-shrink: 0;
}

.dw-sw-index-container { margin-bottom: 15px; }
.dw-sw-index-header { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; font-weight: 600; }

.dw-sw-progress-bar { height: 10px; background: rgba(255, 255, 255, 0.3); border-radius: 5px; overflow: hidden; }
.dw-sw-progress-fill { height: 100%; width: 0; background: #fff; border-radius: 5px; transition: width 1.2s cubic-bezier(0.1, 0.5, 0.5, 1); }
.hot .dw-sw-progress-fill, .pleasant .dw-sw-progress-fill { background: #333; }

.dw-sw-footer { text-align: center; font-size: 13px; opacity: 0.8; font-weight: 500; }

@media (max-width: 480px) {
	.dw-smart-weather-card { max-width: 100%; margin: 10px 0; }
}