/* Dakar forecast: a movable classic widget, with visual scenes driven by MET symbols. */
.s24-weather-card {
	--s24-sky-top: #0965aa;
	--s24-sky-bottom: #78c5f5;
	--s24-sky-glow: #ffe692a6;
	margin: 0;
	border-radius: inherit;
	overflow: hidden;
	background: #f7faff;
	color: #172a42;
}
.widget_s24_services > .s24-widget-title:has(+ .s24-weather-card) {
	position: relative;
	z-index: 1;
	margin-bottom: 16px;
	border-color: #ffffff2b;
	background: #0e416d;
	color: #fff;
}
.s24-weather-scene {
	position: relative;
	min-height: 205px;
	padding: 22px 20px 20px;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(180deg, #061b380a 0%, #061b3a70 65%, #061b3a9c 100%), linear-gradient(150deg, var(--s24-sky-top), var(--s24-sky-bottom));
}
.s24-weather-scene::before {
	position: absolute;
	z-index: -1;
	top: -85px;
	right: -42px;
	width: 245px;
	height: 245px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--s24-sky-glow) 0 13%, #ffffff24 31%, transparent 69%);
	content: "";
}
.s24-weather-scene::after {
	position: absolute;
	z-index: -1;
	right: -42px;
	bottom: -55px;
	width: 280px;
	height: 125px;
	border-radius: 50% 50% 0 0;
	background: #fff2;
	box-shadow: -155px 26px 0 10px #fff2, 75px 22px 0 9px #fff2;
	content: "";
}
.s24-weather-topline,.s24-weather-now {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.s24-weather-topline { font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.s24-weather-topline span:last-child { opacity: .9; font-size: 9px; text-transform: uppercase; }
.s24-weather-now { min-height: 100px; }
.s24-weather-temperature { font-size: clamp(53px, 6vw, 71px); line-height: 1; font-weight: 800; letter-spacing: -.06em; }
.s24-weather-temperature span { margin-left: 2px; font-size: .33em; vertical-align: top; letter-spacing: 0; }
.s24-weather-pending { max-width: 170px; font-size: 19px; line-height: 1.2; }
.s24-weather-now .s24-weather-icon { width: 95px; height: 95px; filter: drop-shadow(0 9px 13px #001d3944); }
.s24-weather-scene .s24-weather-condition { margin: 0; font-size: 16px; font-weight: 800; }
.s24-weather-scene .s24-weather-wind { margin: 3px 0 0; font-size: 11px; }
.s24-weather-scene .s24-weather-editorial { margin: 9px 0 0; padding: 5px 7px; border-radius: 3px; background: #20140055; font-size: 10px; line-height: 1.35; }
.s24-weather-card[data-scene="sunny"] { --s24-sky-top: #086db4; --s24-sky-bottom: #55b6e7; --s24-sky-glow: #ffe37ca8; }
.s24-weather-card[data-scene="partly"] { --s24-sky-top: #136197; --s24-sky-bottom: #8dbdd7; --s24-sky-glow: #fff0a68a; }
.s24-weather-card[data-scene="cloudy"] { --s24-sky-top: #30475f; --s24-sky-bottom: #889daf; --s24-sky-glow: #f2f4ff55; }
.s24-weather-card[data-scene="windy"] { --s24-sky-top: #126b7a; --s24-sky-bottom: #69b5b8; --s24-sky-glow: #d5ffff70; }
.s24-weather-card[data-scene="dusty"] { --s24-sky-top: #7a4a28; --s24-sky-bottom: #d8a25a; --s24-sky-glow: #ffe1a078; }
.s24-weather-card[data-scene="foggy"] { --s24-sky-top: #586c79; --s24-sky-bottom: #aebbc1; --s24-sky-glow: #ffffff75; }
.s24-weather-card[data-scene="rainy"] { --s24-sky-top: #193b61; --s24-sky-bottom: #587e9e; --s24-sky-glow: #deebff3d; }
.s24-weather-card[data-scene="stormy"] { --s24-sky-top: #222746; --s24-sky-bottom: #5e6382; --s24-sky-glow: #fff0a73d; }
.s24-weather-card[data-scene="night"] { --s24-sky-top: #091d43; --s24-sky-bottom: #34547d; --s24-sky-glow: #dceeff45; }
.s24-weather-details { padding: 17px 19px 14px; }
.s24-weather-details .s24-weather-details-title { margin: 0 0 12px; color: #354b63; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.s24-widget .s24-weather-slots { margin: 0; padding: 0; list-style: none; }
.s24-weather-slots li { display: grid; grid-template-columns: 31px minmax(0,1fr) auto; gap: 9px; align-items: center; min-height: 50px; padding: 7px 0; border-top: 1px solid #dce5ee; }
.s24-weather-slots li:first-child { border-top: 0; }
.s24-weather-slots .s24-weather-icon { width: 29px; height: 29px; }
.s24-weather-slot-name { display: flex; min-width: 0; flex-direction: column; line-height: 1.25; }
.s24-weather-slot-name strong { font-size: 12px; }
.s24-weather-slot-name small { margin-top: 3px; color: #53667b; font-size: 10px; }
.s24-weather-slot-temperature { font-size: 17px; font-variant-numeric: tabular-nums; }
.s24-weather-slot-fallback { text-align: right; font-size: 10px; }
.s24-weather-details .s24-weather-source { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid #dce5ee; color: #50647b; font-size: 9px; line-height: 1.5; }
.s24-weather-icon { display: block; flex: none; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.s24-weather-icon-sun,.s24-weather-icon-dust-sun { fill: #ffd45d; stroke: #ffc143; stroke-width: 3; }
.s24-weather-icon-rays { stroke: #ffd45d; stroke-width: 4; }
.s24-weather-icon-cloud-shadow { fill: #7793a8; opacity: .45; }
.s24-weather-icon-cloud { fill: #f5fbff; stroke: #e4f4ff; stroke-width: 1.4; }
.s24-weather-icon-stroke { stroke: #e8f8ff; stroke-width: 4; }
.s24-weather-icon-rain { stroke: #79d9ff; stroke-width: 5; }
.s24-weather-icon-lightning { fill: #ffdf70; stroke: #ffdf70; stroke-width: 2; }
.s24-weather-icon-dust { fill: #f5d79b; }
.s24-weather-icon-moon { fill: #eff3d7; }
.s24-weather-icon-stars { stroke: #eaf4ff; stroke-width: 3; }
.s24-weather-slots .s24-weather-icon-cloud-shadow { fill: #a7bbc9; }
.s24-weather-slots .s24-weather-icon-cloud { fill: #e7f0f7; stroke: #a8c7dc; }
.s24-weather-slots .s24-weather-icon-stroke { stroke: #3c8eac; }
.s24-topbar .s24-top-weather .s24-weather-icon { width: 20px; height: 20px; }
.s24-topbar .s24-top-weather .s24-weather-icon-cloud-shadow { fill: #758da2; }
.s24-topbar .s24-top-weather .s24-weather-icon-cloud { fill: #e9f3fa; }
.s24-topbar .s24-weather-credit { padding-left: 5px; border-left: 1px solid #ffffff60; color: #d7e8f8; font-size: 10px; text-decoration: underline; text-decoration-color: #d7e8f880; }
.s24-topbar .s24-weather-credit:hover { color: #fff; text-decoration-color: #fff; }
@media (max-width: 600px) {
	.s24-weather-scene { min-height: 190px; }
	.s24-weather-now .s24-weather-icon { width: 78px; height: 78px; }
	.s24-topbar .s24-top-weather { font-size: 11px; }
}