/***** VZ Weather Widget – Animated Blue Theme *****/

.vz-weather-widget {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 8px 32px rgba(26, 53, 96, 0.25);
	min-height: 220px;
}

.vz-weather-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.vz-weather-bg-gradient {
	position: absolute;
	inset: 0;
	background-size: 200% 200%;
	animation: vzSkyShift 12s ease-in-out infinite;
}

.vz-weather-scene--clear .vz-weather-bg-gradient {
	background: linear-gradient(145deg, #1e4d8c 0%, #2563eb 35%, #3b82f6 65%, #60a5fa 100%);
}

.vz-weather-scene--partly .vz-weather-bg-gradient {
	background: linear-gradient(145deg, #1a3560 0%, #1e4a7a 30%, #2563eb 60%, #93c5fd 100%);
}

.vz-weather-scene--cloudy .vz-weather-bg-gradient {
	background: linear-gradient(160deg, #122847 0%, #1a3560 40%, #334155 100%);
}

.vz-weather-scene--rain .vz-weather-bg-gradient {
	background: linear-gradient(160deg, #0f2440 0%, #1a3560 50%, #1e3a5f 100%);
}

.vz-weather-scene--snow .vz-weather-bg-gradient {
	background: linear-gradient(160deg, #1a3560 0%, #3b5998 50%, #94a3b8 100%);
}

.vz-weather-scene--storm .vz-weather-bg-gradient {
	background: linear-gradient(160deg, #0a1628 0%, #1a3560 40%, #1e293b 100%);
}

.vz-weather-scene--fog .vz-weather-bg-gradient {
	background: linear-gradient(160deg, #1a3560 0%, #475569 60%, #64748b 100%);
}

@keyframes vzSkyShift {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

/* Animated sun */
.vz-weather-bg-sun {
	position: absolute;
	top: -20px;
	right: -10px;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: radial-gradient(circle, #fde68a 0%, #fbbf24 45%, rgba(251, 191, 36, 0) 70%);
	animation: vzSunPulse 4s ease-in-out infinite;
}

@keyframes vzSunPulse {
	0%, 100% { transform: scale(1); opacity: 0.85; }
	50% { transform: scale(1.08); opacity: 1; }
}

/* Floating clouds */
.vz-weather-bg-cloud {
	position: absolute;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 50px;
	filter: blur(1px);
}

.vz-weather-bg-cloud::before,
.vz-weather-bg-cloud::after {
	content: '';
	position: absolute;
	background: inherit;
	border-radius: 50%;
}

.vz-weather-bg-cloud--1 {
	width: 80px;
	height: 28px;
	top: 18%;
	left: 0;
	animation: vzCloudDrift1 22s linear infinite;
}

.vz-weather-bg-cloud--2 {
	width: 60px;
	height: 22px;
	top: 38%;
	left: 0;
	animation: vzCloudDrift2 28s linear infinite;
	opacity: 0.7;
}

@keyframes vzCloudDrift1 {
	0% { transform: translateX(-120px); }
	100% { transform: translateX(calc(100vw + 120px)); }
}

@keyframes vzCloudDrift2 {
	0% { transform: translateX(-80px); }
	100% { transform: translateX(calc(100vw + 80px)); }
}

.vz-weather-bg-cloud--1::before {
	width: 36px;
	height: 36px;
	top: -18px;
	left: 12px;
}

.vz-weather-bg-cloud--1::after {
	width: 28px;
	height: 28px;
	top: -10px;
	left: 40px;
}

.vz-weather-bg-cloud--2::before {
	width: 28px;
	height: 28px;
	top: -14px;
	left: 8px;
}

/* Rain */
.vz-weather-bg-rain {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(180deg, transparent 0%, rgba(147, 197, 253, 0.03) 100%),
		repeating-linear-gradient(180deg, transparent, transparent 8px, rgba(147, 197, 253, 0.25) 8px, rgba(147, 197, 253, 0.25) 9px);
	background-size: 100% 100%, 3px 12px;
	animation: vzRainFall 0.6s linear infinite;
}

@keyframes vzRainFall {
	0% { background-position: 0 0, 0 0; }
	100% { background-position: 0 0, 0 12px; }
}

/* Snow */
.vz-weather-bg-snow {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.8), transparent),
		radial-gradient(2px 2px at 60px 80px, rgba(255,255,255,0.6), transparent),
		radial-gradient(1.5px 1.5px at 100px 50px, rgba(255,255,255,0.7), transparent),
		radial-gradient(2px 2px at 140px 120px, rgba(255,255,255,0.5), transparent);
	background-size: 160px 160px;
	animation: vzSnowFall 6s linear infinite;
}

@keyframes vzSnowFall {
	0% { background-position: 0 0, 0 0, 0 0, 0 0; }
	100% { background-position: 0 160px, 0 160px, 0 160px, 0 160px; }
}

/* Storm flash */
.vz-weather-bg-flash {
	position: absolute;
	inset: 0;
	background: rgba(147, 197, 253, 0.15);
	opacity: 0;
	animation: vzLightning 5s ease-in-out infinite;
}

@keyframes vzLightning {
	0%, 89%, 91%, 93%, 100% { opacity: 0; }
	90%, 92% { opacity: 1; }
}

/* Fog mist */
.vz-weather-bg-mist {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 30%, rgba(255,255,255,0.08) 60%, rgba(255,255,255,0.15) 100%);
	animation: vzMistMove 10s ease-in-out infinite;
}

@keyframes vzMistMove {
	0%, 100% { opacity: 0.45; transform: translateY(0); }
	50% { opacity: 0.95; transform: translateY(-10px); }
}

/* Inner content */
.vz-weather-inner {
	position: relative;
	z-index: 1;
	padding: 20px;
	color: #fff;
}

.vz-weather-current {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.vz-weather-icon-large {
	flex-shrink: 0;
}

.vz-weather-temp {
	display: block;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.vz-weather-temp sup {
	font-size: 1rem;
	font-weight: 600;
	top: -0.8em;
	margin-left: 2px;
}

.vz-weather-desc {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	margin-top: 4px;
	opacity: 0.95;
}

.vz-weather-location {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 0.8125rem;
	margin-top: 6px;
	opacity: 0.8;
}

.vz-weather-pin {
	width: 12px;
	height: 12px;
	fill: currentColor;
	flex-shrink: 0;
}

/* SVG Icons */
.vz-wicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.vz-wicon svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.vz-wicon--lg {
	width: 72px;
	height: 72px;
}

.vz-wicon--sm {
	width: 32px;
	height: 32px;
}

.vz-wicon--clear svg,
.vz-wicon--partly svg {
	animation: vzIconSunSpin 24s linear infinite;
	transform-origin: center;
}

.vz-wicon--clear .vz-wicon-sun,
.vz-wicon--partly .vz-wicon-sun {
	fill: #fbbf24;
	stroke: #fde68a;
	stroke-width: 1;
}

.vz-wicon-rays line {
	stroke: #fde68a;
	stroke-width: 2.5;
	stroke-linecap: round;
	animation: vzRayPulse 3s ease-in-out infinite;
}

.vz-wicon-rays--small line {
	stroke-width: 2;
}

@keyframes vzIconSunSpin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes vzRayPulse {
	0%, 100% { opacity: 0.7; }
	50% { opacity: 1; }
}

.vz-wicon-cloud {
	fill: rgba(255, 255, 255, 0.92);
}

.vz-wicon-cloud--back {
	fill: rgba(255, 255, 255, 0.55);
}

.vz-wicon-cloud--dark {
	fill: rgba(148, 163, 184, 0.95);
}

.vz-wicon-rain line {
	stroke: #93c5fd;
	stroke-width: 2.5;
	stroke-linecap: round;
	animation: vzIconRain 1s ease-in-out infinite;
}

.vz-wicon-rain line:nth-child(2) { animation-delay: 0.15s; }
.vz-wicon-rain line:nth-child(3) { animation-delay: 0.3s; }

@keyframes vzIconRain {
	0%, 100% { transform: translateY(0); opacity: 0.6; }
	50% { transform: translateY(3px); opacity: 1; }
}

.vz-wicon-snow circle {
	fill: #fff;
	animation: vzIconSnow 2s ease-in-out infinite;
}

.vz-wicon-snow circle:nth-child(odd) { animation-delay: 0.4s; }

@keyframes vzIconSnow {
	0%, 100% { transform: translateY(0); opacity: 0.7; }
	50% { transform: translateY(2px); opacity: 1; }
}

.vz-wicon-bolt {
	fill: #fbbf24;
	animation: vzIconBolt 3s ease-in-out infinite;
}

@keyframes vzIconBolt {
	0%, 85%, 100% { opacity: 1; }
	87% { opacity: 0.3; }
}

.vz-wicon-fog line {
	stroke: rgba(255, 255, 255, 0.7);
	stroke-width: 3;
	stroke-linecap: round;
	animation: vzIconFog 4s ease-in-out infinite alternate;
}

.vz-wicon-fog line:nth-child(2) { animation-delay: 0.5s; }
.vz-wicon-fog line:nth-child(3) { animation-delay: 1s; }
.vz-wicon-fog line:nth-child(4) { animation-delay: 1.5s; }

@keyframes vzIconFog {
	0% { opacity: 0.5; transform: translateX(0); }
	100% { opacity: 0.9; transform: translateX(3px); }
}

/* Forecast row */
.vz-weather-forecast {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-bottom: 14px;
}

.vz-weather-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 4px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	backdrop-filter: blur(4px);
	transition: background 0.2s ease;
}

.vz-weather-day:hover {
	background: rgba(255, 255, 255, 0.16);
}

.vz-weather-day-name {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	opacity: 0.85;
	letter-spacing: 0.04em;
}

.vz-weather-day-temp {
	font-size: 0.875rem;
	font-weight: 700;
}

/* Link */
.vz-weather-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9) !important;
	padding-top: 4px;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.vz-weather-link .vz-icon svg {
	width: 14px;
	height: 14px;
}

.vz-weather-link:hover {
	color: #fde68a !important;
	opacity: 1;
}

.vz-weather-error {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.875rem;
	margin: 0;
	text-align: center;
}

/* Widget title override when inside weather widget area */
.vz_weather_widget .mh-widget-title {
	border-color: var(--vz-primary);
}

@media (prefers-reduced-motion: reduce) {
	.vz-weather-bg-gradient,
	.vz-weather-bg-sun,
	.vz-weather-bg-cloud,
	.vz-weather-bg-rain,
	.vz-weather-bg-snow,
	.vz-weather-bg-flash,
	.vz-weather-bg-mist,
	.vz-wicon-sun,
	.vz-wicon-rays line,
	.vz-wicon-rain line,
	.vz-wicon-snow circle,
	.vz-wicon-bolt,
	.vz-wicon-fog line {
		animation: none !important;
	}
}

@media screen and (max-width: 480px) {
	.vz-weather-temp {
		font-size: 2rem;
	}

	.vz-wicon--lg {
		width: 56px;
		height: 56px;
	}

	.vz-weather-forecast {
		grid-template-columns: repeat(4, 1fr);
		gap: 4px;
	}

	.vz-weather-day {
		padding: 8px 2px;
	}
}