/* Simple Weather Widget — Frontend Card Styles
   CSS custom properties are injected inline from plugin settings.
   ---------------------------------------------------------------- */

.sww-card {
	/* Defaults (overridden by inline vars set from Settings) */
	--sww-bg:     #1e3a5f;
	--sww-text:   #ffffff;
	--sww-accent: #f0c040;
	--sww-fs:     16px;
	--sww-radius: 12px;
	--sww-pad:    24px;

	display: inline-flex;
	flex-direction: column;
	gap: 8px;
	background-color: var(--sww-bg);
	color: var(--sww-text);
	font-size: var(--sww-fs);
	border-radius: var(--sww-radius);
	padding: var(--sww-pad);
	min-width: 200px;
	max-width: 340px;
	font-family: inherit;
	line-height: 1.4;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}

/* Header row: icon + city */
.sww-header {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sww-icon {
	font-size: calc(var(--sww-fs) * 2.5);
	line-height: 1;
}

.sww-location {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sww-city {
	font-weight: 700;
	font-size: calc(var(--sww-fs) * 1.15);
}

.sww-country {
	font-size: calc(var(--sww-fs) * 0.8);
	opacity: .75;
}

/* Big temperature */
.sww-temp {
	font-size: calc(var(--sww-fs) * 3.5);
	font-weight: 800;
	line-height: 1;
	color: var(--sww-accent);
	margin: 4px 0;
}

.sww-temp sup {
	font-size: calc(var(--sww-fs) * 1.2);
	font-weight: 400;
	vertical-align: super;
}

/* Condition label */
.sww-condition {
	font-size: calc(var(--sww-fs) * 1.05);
	opacity: .9;
}

/* Divider */
.sww-card::before {
	display: none; /* reserve for future use */
}

/* Detail row */
.sww-details {
	display: flex;
	gap: 20px;
	margin-top: 4px;
	border-top: 1px solid rgba(255, 255, 255, .15);
	padding-top: 10px;
}

.sww-detail-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	font-size: calc(var(--sww-fs) * 0.9);
}

.sww-detail-icon {
	font-size: calc(var(--sww-fs) * 1.1);
}

.sww-detail-label {
	font-size: calc(var(--sww-fs) * 0.75);
	opacity: .65;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Last updated */
.sww-updated {
	font-size: calc(var(--sww-fs) * 0.72);
	opacity: .55;
	margin-top: 4px;
}

/* Error state */
.sww-card.sww-error {
	background: #5c1a1a;
	color: #ffd5d5;
	border-left: 4px solid #d63638;
}

.sww-card.sww-error p {
	margin: 0;
}

/* =========================================================================
   LAYOUT VARIANTS
   ========================================================================= */

/* --- Minimal ---------------------------------------------------------------
   Shows: icon, big temp, city. Hides condition, details, timestamp.        */
.sww-card--minimal {
	gap: 4px;
	padding: calc(var(--sww-pad) * 0.65);
	min-width: 140px;
	max-width: 220px;
}

.sww-card--minimal .sww-condition,
.sww-card--minimal .sww-details,
.sww-card--minimal .sww-updated {
	display: none;
}

.sww-card--minimal .sww-temp {
	font-size: calc(var(--sww-fs) * 2.8);
	margin: 2px 0;
}

.sww-card--minimal .sww-icon {
	font-size: calc(var(--sww-fs) * 2);
}

/* --- Condensed -------------------------------------------------------------
   Full info but tighter spacing — great for sidebars / narrow columns.    */
.sww-card--condensed {
	gap: 4px;
	padding: calc(var(--sww-pad) * 0.6);
	min-width: 160px;
	max-width: 260px;
}

.sww-card--condensed .sww-temp {
	font-size: calc(var(--sww-fs) * 2.4);
	margin: 0;
}

.sww-card--condensed .sww-icon {
	font-size: calc(var(--sww-fs) * 1.8);
}

.sww-card--condensed .sww-details {
	gap: 12px;
	margin-top: 2px;
	padding-top: 6px;
}

.sww-card--condensed .sww-updated {
	margin-top: 0;
}

/* --- Pill ------------------------------------------------------------------
   Single horizontal row: icon · city · temp. All extras hidden.           */
.sww-card--pill {
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	min-width: 0;
	max-width: none;
	width: fit-content;
	border-radius: 999px;
}

.sww-card--pill .sww-header {
	gap: 8px;
}

.sww-card--pill .sww-icon {
	font-size: calc(var(--sww-fs) * 1.4);
}

.sww-card--pill .sww-country,
.sww-card--pill .sww-condition,
.sww-card--pill .sww-details,
.sww-card--pill .sww-updated {
	display: none;
}

.sww-card--pill .sww-temp {
	font-size: calc(var(--sww-fs) * 1.4);
	font-weight: 700;
	margin: 0;
}

.sww-card--pill .sww-temp sup {
	font-size: calc(var(--sww-fs) * 0.8);
}