/* ---------------------------------------------------------
 * Base widget
 * --------------------------------------------------------- */

.proradio-weather-widget {
	--proradio-weather-main-color: currentColor;
	--proradio-weather-card-color: currentColor;
	--proradio-weather-card-bg: transparent;
	--proradio-weather-card-border: rgba(127, 127, 127, 0.2);
	--proradio-weather-card-radius: 8px;

	display: block;
	color: var(--proradio-weather-main-color);
}

.proradio-weather-current {
	color: var(--proradio-weather-main-color);
	display: flex;
	align-items: center;
	gap: 1.15em;
}

.proradio-weather-current-text {
	display: flex;
	flex-direction: column; 
	justify-content: center;
	line-height: 1.2;
}

.proradio-weather-location {
	font-weight: 700;
}

.proradio-weather-temp {
	font-size: 2.15em;
	line-height: 1;
	font-weight: 700;
}

.proradio-weather-desc {
	opacity: 0.75;
}

.proradio-weather-source {
	display: block;
	margin-top: 0.75em;
	font-size: 0.65em;
	opacity: 0.45;

	color: var(--proradio-weather-main-color);}

/* ---------------------------------------------------------
 * Icons
 * --------------------------------------------------------- */

.proradio-weather-icon {
	display: inline-block;
	width: 2.2em;
	height: 2.2em;
	min-width: 2.2em;
}

.proradio-weather-icon-mask {
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.proradio-weather-current > .proradio-weather-icon {
	width: 4.8em;
	height: 4.8em;
	min-width: 4.8em;
}

.proradio-weather-icon-img {
	display: inline-block;
	width: 2.2em;
	height: 2.2em;
	min-width: 2.2em;
	object-fit: contain;
	background: none;
	-webkit-mask: none;
	mask: none;
}

.proradio-weather-current > .proradio-weather-icon-img {
	width: 4.8em;
	height: 4.8em;
	min-width: 4.8em;
}

.proradio-weather-icon-mask.proradio-weather-icon-clear-day {
	-webkit-mask-image: url('../icons/meteocons/line/clear-day.svg');
	mask-image: url('../icons/meteocons/line/clear-day.svg');
}

.proradio-weather-icon-mask.proradio-weather-icon-partly-cloudy-day {
	-webkit-mask-image: url('../icons/meteocons/line/partly-cloudy-day.svg');
	mask-image: url('../icons/meteocons/line/partly-cloudy-day.svg');
}

.proradio-weather-icon-mask.proradio-weather-icon-cloudy {
	-webkit-mask-image: url('../icons/meteocons/line/cloudy.svg');
	mask-image: url('../icons/meteocons/line/cloudy.svg');
}

.proradio-weather-icon-mask.proradio-weather-icon-fog {
	-webkit-mask-image: url('../icons/meteocons/line/fog.svg');
	mask-image: url('../icons/meteocons/line/fog.svg');
}

.proradio-weather-icon-mask.proradio-weather-icon-rain {
	-webkit-mask-image: url('../icons/meteocons/line/rain.svg');
	mask-image: url('../icons/meteocons/line/rain.svg');
}

.proradio-weather-icon-mask.proradio-weather-icon-snow {
	-webkit-mask-image: url('../icons/meteocons/line/snow.svg');
	mask-image: url('../icons/meteocons/line/snow.svg');
}

.proradio-weather-icon-mask.proradio-weather-icon-sleet {
	-webkit-mask-image: url('../icons/meteocons/line/sleet.svg');
	mask-image: url('../icons/meteocons/line/sleet.svg');
}

.proradio-weather-icon-mask.proradio-weather-icon-thunderstorms {
	-webkit-mask-image: url('../icons/meteocons/line/thunderstorms.svg');
	mask-image: url('../icons/meteocons/line/thunderstorms.svg');
}

/* ---------------------------------------------------------
 * Forecast cards
 * --------------------------------------------------------- */

.proradio-weather-days {
	display: grid;
	gap: 0.5em;
	margin-top: 1em;
}

.proradio-weather-days-compact {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.proradio-weather-days-complete {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.proradio-weather-day {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25em;
	padding: 0.75em;
	border: 1px solid var(--proradio-weather-card-border);
	border-radius: var(--proradio-weather-card-radius);
	background: var(--proradio-weather-card-bg);

	color: var(--proradio-weather-card-color);}

.proradio-weather-day-name,
.proradio-weather-day-temp {
	font-weight: 700;
}

.proradio-weather-day-condition,
.proradio-weather-day-rain {
	font-size: 0.85em;
	opacity: 0.8;
}

/* Complete mode cards */
.proradio-weather-days-complete .proradio-weather-day {
	position: relative;
	min-height: 128px;
	padding: 1.05em 1em 0.95em;
	overflow: hidden;
}

.proradio-weather-days-complete .proradio-weather-day .proradio-weather-icon {
	position: absolute;
	top: 0.85em;
	right: 0.85em;
	width: 40px;
	height: 40px;
	min-width: 40px;
	opacity: 0.9;
}

.proradio-weather-days-complete .proradio-weather-day .proradio-weather-icon-img {
	position: absolute;
	top: 0.85em;
	right: 0.85em;
	width: 40px;
	height: 40px;
	min-width: 40px;
	opacity: 0.9;
}

.proradio-weather-days-complete .proradio-weather-day-name {
	font-size: 1.65em;
	line-height: 1;
	font-weight: 800;
	padding-right: 52px;
	margin-bottom: 0.55em;
}

.proradio-weather-days-complete .proradio-weather-day-condition {
	font-size: 0.95em;
	line-height: 1.2;
	margin-top: 0.15em;
}

.proradio-weather-days-complete .proradio-weather-day-temp {
	font-size: 1.05em;
	line-height: 1.2;
	margin-top: 0.35em;
}

.proradio-weather-days-complete .proradio-weather-day-rain {
	font-size: 0.9em;
	line-height: 1.2;
	margin-top: 0.25em;
}

/* Compact mode cards */
/* Compact mode cards */
.proradio-weather-days-compact .proradio-weather-day {
	position: relative;
	min-height: 100px;
	padding: 1em 0.9em 0.85em;
	overflow: hidden;
}

.proradio-weather-days-compact .proradio-weather-day .proradio-weather-icon,
.proradio-weather-days-compact .proradio-weather-day .proradio-weather-icon-img {
	position: absolute;
	top: 0.75em;
	right: 0.75em;
	width: 34px;
	height: 34px;
	min-width: 34px;
	opacity: 0.9;
}

.proradio-weather-days-compact .proradio-weather-day-name {
	font-size: 1.35em;
	line-height: 1;
	font-weight: 800;
	padding-right: 44px;
	margin-bottom: 0.6em;
}

.proradio-weather-days-compact .proradio-weather-day-condition {
	font-size: 0.9em;
	line-height: 1.2;
	margin-top: 0.1em;
}

.proradio-weather-days-compact .proradio-weather-day-temp {
	font-size: 1em;
	line-height: 1.2;
	margin-top: 0.35em;
}

.proradio-weather-days-compact .proradio-weather-day-rain {
	font-size: 0.85em;
	line-height: 1.2;
	margin-top: 0.25em;
}

/* ---------------------------------------------------------
 * Hourly mode
 * --------------------------------------------------------- */

.proradio-weather-hours {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	margin-top: 1em;
	overflow: visible;
	padding-bottom: 0;
}

.proradio-weather-hour {
	width: 100%;
	min-width: 0;
	display: grid;
	grid-template-columns: minmax(48px, 0.7fr) auto minmax(52px, 0.7fr) minmax(52px, 0.7fr);
	align-items: center;
	gap: 0.6em;
	padding: 0.55em 0.7em;
	border: 1px solid var(--proradio-weather-card-border);
	border-radius: var(--proradio-weather-card-radius);
	background: var(--proradio-weather-card-bg);
	text-align: left;

	color: var(--proradio-weather-card-color);}

.proradio-weather-hour .proradio-weather-icon,
.proradio-weather-hour .proradio-weather-icon-img {
	width: 1.45em;
	height: 1.45em;
	min-width: 1.45em;
	justify-self: center;
}

.proradio-weather-hour-time,
.proradio-weather-hour-temp {
	font-weight: 700;
}

.proradio-weather-hour-time {
	font-size: 0.85em;
}

.proradio-weather-hour-rain,
.proradio-weather-hour-period {
	font-size: 0.78em;
	opacity: 0.72;
}


/* Elementor editor city-search status spinner */
.proradio-weather-panel-status-loading {
	display: flex;
	align-items: center;
	gap: 7px;
}

.proradio-weather-panel-spinner {
	width: 12px;
	height: 12px;
	min-width: 12px;
	border: 2px solid rgba(34, 113, 177, 0.25);
	border-top-color: #2271b1;
	border-radius: 50%;
	animation: proradio-weather-panel-spin 0.75s linear infinite;
}

@keyframes proradio-weather-panel-spin {
	to {
		transform: rotate(360deg);
	}
}