.sww-widget {
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 1.5rem 2rem;
	background: #592980;
	color: #fff;
	padding: 0.9rem 1.5rem;
	font-size: 0.95rem;
	line-height: 1.3;
	max-width: 100%;
	box-sizing: border-box;
}

.sww-widget * {
	box-sizing: border-box;
}

.sww-widget .sww-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Location + time */
.sww-loc {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: 0.3rem;
	min-width: 150px;
}

.sww-loc-name {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 600;
	white-space: nowrap;
}

.sww-time {
	font-size: 0.8rem;
	opacity: 0.85;
	white-space: nowrap;
}

/* Current temp + condition */
.sww-main {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 1.25rem;
}

.sww-temp {
	display: flex;
	align-items: flex-start;
	gap: 0.25rem;
}

.sww-temp-value {
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1;
}

.sww-unit-toggle {
	display: flex;
	flex-direction: column;
	font-size: 0.85rem;
	margin-top: 0.15rem;
}

.sww-unit {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	padding: 0;
	font-size: 0.85rem;
	line-height: 1.3;
	text-align: left;
}

.sww-unit.is-active {
	color: #fff;
	font-weight: 700;
}

.sww-condition {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	white-space: nowrap;
}

.sww-condition-icon {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
}

.sww-condition-text {
	font-size: 0.85rem;
	opacity: 0.95;
	/* .sww-condition sets white-space: nowrap so the icon + text never wrap
	   apart from each other, but that nowrap otherwise inherits into this
	   block and truncates longer condition text (e.g. "Broken Clouds") on
	   narrow screens. Reset it here so the text itself can wrap normally. */
	white-space: normal;
	overflow-wrap: anywhere;
}

.sww-minmax {
	opacity: 0.8;
	margin-top: 0.15rem;
}

/* Stats: humidity / pressure / wind */
.sww-stats {
	display: flex;
	flex-shrink: 0;
	gap: 1.5rem;
}

.sww-stat {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	white-space: nowrap;
}

.sww-stat small {
	display: block;
	font-size: 0.72rem;
	opacity: 0.75;
}

.sww-stat strong {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
}

/* Forecast */
.sww-forecast {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-width: 0;
}

.sww-forecast-scroll {
	display: flex;
	flex: 1 1 auto;
	gap: 1.25rem;
	overflow-x: auto;
	scrollbar-width: none;
	min-width: 0;
}

.sww-forecast-scroll::-webkit-scrollbar {
	display: none;
}

.sww-forecast-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	font-size: 0.8rem;
	white-space: nowrap;
	flex-shrink: 0;
}

.sww-forecast-day img {
	width: 28px;
	height: 28px;
}

/* Prev/next arrows: only shown once JS detects real horizontal overflow. */
.sww-forecast-arrow {
	background: rgba(255, 255, 255, 0.15);
	border: none;
	color: #fff;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 0.95rem;
	line-height: 1;
	flex-shrink: 0;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.sww-forecast.has-overflow .sww-forecast-arrow {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.sww-forecast-arrow:hover {
	background: rgba(255, 255, 255, 0.3);
}

.sww-forecast-arrow.is-disabled {
	opacity: 0.3;
	pointer-events: none;
}

/* Applied by JS when the forecast row would otherwise shrink down to showing
   only "Today" and "Tomorrow" (or fewer). Forces the whole forecast strip onto
   its own full-width line, where it has much more room and rarely needs to
   scroll at all. */
.sww-forecast--wrap {
	flex-basis: 100%;
	margin-left: 0;
	margin-top: 0.35rem;
}

/* Responsive: stack into rows on narrower widths (typical Elementor column) */
@media (max-width: 900px) {
	.sww-widget {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
	}

	/* Each section is a flex item AND its own flex container with
	   white-space: nowrap descendants, which trips up plain
	   "align-items: stretch": browsers can size the item by its intrinsic
	   (unwrapped) content width instead of the parent's available width,
	   letting it overflow past the widget's edge instead of wrapping. Setting
	   an explicit 100% width (plus min-width: 0 so it's still allowed to
	   shrink/wrap internally) forces the correct, container-relative size. */
	.sww-loc,
	.sww-main,
	.sww-stats,
	.sww-forecast {
		width: 100%;
		min-width: 0;
		margin-left: 0;
	}

	.sww-main,
	.sww-stats {
		flex-wrap: wrap;
		flex-shrink: 1;
	}

	.sww-forecast-scroll {
		flex: 1;
		min-width: 0;
	}

	/* Already full-width and stacked here, so the desktop-only "force to a new
	   line" trick isn't needed; avoid a stray top margin or a percentage
	   flex-basis fighting the column layout. */
	.sww-forecast--wrap {
		flex-basis: auto;
		margin-top: 0;
	}
}

@media (max-width: 480px) {
	.sww-temp-value {
		font-size: 2rem;
	}

	.sww-stats {
		gap: 1rem;
	}

	.sww-forecast-scroll {
		gap: 0.85rem;
	}
}