.solardawn-sun-widget,
.solardawn-sun-widget * {
	box-sizing: border-box;
}

.solardawn-sun-widget {
	--solardawn-bg: #ffffff;
	--solardawn-surface: #fff8ed;
	--solardawn-border: #e9edf3;
	--solardawn-text: #151a2d;
	--solardawn-muted: #656b7b;
	--solardawn-accent: #ff4f12;
	--solardawn-gold: #f7a400;
	--solardawn-blue: #1683ff;
	--solardawn-purple: #7b4bdd;
	width: 100%;
	max-width: 720px;
	margin: 24px auto;
	padding: 26px;
	font-family: inherit;
	color: var(--solardawn-text);
	background: var(--solardawn-bg);
	border: 1px solid var(--solardawn-border);
	border-radius: 8px;
	box-shadow: 0 18px 45px rgba(22, 29, 45, 0.10);
	overflow: hidden;
}

.solardawn-sun-widget--sunrise {
	--solardawn-bg: linear-gradient(145deg, #ffffff 0%, #fffaf2 48%, #fff2df 100%);
	--solardawn-surface: #fff6e8;
}

.solardawn-sun-widget--light {
	--solardawn-bg: #ffffff;
	--solardawn-surface: #f8fafc;
}

.solardawn-sun-widget--dark {
	--solardawn-bg: #111827;
	--solardawn-surface: #1f2937;
	--solardawn-border: rgba(255, 255, 255, 0.14);
	--solardawn-text: #f8fafc;
	--solardawn-muted: #cbd5e1;
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}

.solardawn-sun-widget svg {
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: -0.15em;
}

.solardawn-sun-widget__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--solardawn-border);
}

.solardawn-sun-widget__title {
	margin: 0 0 10px;
	font-size: 20px;
	line-height: 1.25;
	font-weight: 800;
	color: var(--solardawn-text);
}

.solardawn-sun-widget__location,
.solardawn-sun-widget__date {
	display: flex;
	align-items: center;
	gap: 10px;
	line-height: 1.45;
}

.solardawn-sun-widget__location {
	font-size: 24px;
	color: var(--solardawn-text);
}

.solardawn-sun-widget__location svg {
	color: #111827;
}

.solardawn-sun-widget--dark .solardawn-sun-widget__location svg {
	color: #f8fafc;
}

.solardawn-sun-widget__date {
	margin-top: 5px;
	font-size: 16px;
	color: var(--solardawn-muted);
}

.solardawn-sun-widget__date svg {
	color: var(--solardawn-muted);
}

.solardawn-sun-widget__header-mark {
	color: var(--solardawn-gold);
	flex: 0 0 auto;
}

.solardawn-sun-widget__header-mark svg {
	width: 66px;
	height: 66px;
	stroke-width: 2.3;
}

.solardawn-sun-widget__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
	align-items: center;
	gap: 22px;
	padding: 28px 0;
	border-bottom: 1px solid var(--solardawn-border);
}

.solardawn-sun-widget__event {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	min-width: 0;
}

.solardawn-sun-widget__event-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--solardawn-gold);
}

.solardawn-sun-widget__event-icon svg {
	width: 82px;
	height: 82px;
	stroke-width: 4;
}

.solardawn-sun-widget__event-icon--sunset {
	color: #ff8a00;
}

.solardawn-sun-widget__event-label {
	display: block;
	margin-bottom: 6px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--solardawn-text);
}

.solardawn-sun-widget__event-time {
	display: block;
	font-size: 28px;
	line-height: 1.1;
	font-weight: 800;
	color: var(--solardawn-accent);
	white-space: nowrap;
}

.solardawn-sun-widget__hero-divider {
	width: 1px;
	height: 78px;
	background: var(--solardawn-border);
}

.solardawn-sun-widget__details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 28px;
	padding-top: 18px;
}

.solardawn-sun-widget__detail {
	display: grid;
	grid-template-columns: 28px minmax(120px, 1fr) auto;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 12px 0;
	border-bottom: 1px solid rgba(148, 163, 184, 0.20);
	font-size: 14px;
	line-height: 1.35;
}

.solardawn-sun-widget__detail-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: var(--solardawn-gold);
}

.solardawn-sun-widget__detail-icon--clock {
	color: var(--solardawn-blue);
}

.solardawn-sun-widget__detail-icon--twilight {
	color: var(--solardawn-purple);
}

.solardawn-sun-widget__detail-label {
	color: var(--solardawn-text);
	overflow-wrap: anywhere;
}

.solardawn-sun-widget__detail-value {
	color: var(--solardawn-text);
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

.solardawn-sun-widget__tip {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	margin-top: 14px;
	padding: 16px;
	background: var(--solardawn-surface);
	border: 1px solid rgba(247, 164, 0, 0.25);
	border-radius: 8px;
}

.solardawn-sun-widget__tip-icon {
	color: var(--solardawn-gold);
	font-size: 28px;
}

.solardawn-sun-widget__tip strong {
	display: block;
	margin-bottom: 6px;
	font-size: 16px;
	color: var(--solardawn-text);
}

.solardawn-sun-widget__tip p {
	margin: 0;
	color: var(--solardawn-text);
	line-height: 1.55;
}

.solardawn-sun-widget--error {
	padding: 18px 20px;
	color: #7f1d1d;
	background: #fff1f2;
	border-color: #fecdd3;
	box-shadow: none;
}

.solardawn-sun-widget--error p {
	margin: 0;
}

@media (max-width: 680px) {
	.solardawn-sun-widget {
		padding: 20px;
	}

	.solardawn-sun-widget__header {
		gap: 14px;
	}

	.solardawn-sun-widget__location {
		font-size: 20px;
	}

	.solardawn-sun-widget__header-mark svg {
		width: 48px;
		height: 48px;
	}

	.solardawn-sun-widget__hero {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.solardawn-sun-widget__hero-divider {
		width: 100%;
		height: 1px;
	}

	.solardawn-sun-widget__event {
		justify-content: flex-start;
	}

	.solardawn-sun-widget__details {
		grid-template-columns: 1fr;
	}

	.solardawn-sun-widget__detail {
		grid-template-columns: 28px minmax(0, 1fr);
	}

	.solardawn-sun-widget__detail-value {
		grid-column: 2;
		text-align: left;
		white-space: normal;
	}

	.solardawn-sun-widget__tip {
		grid-column: auto;
	}
}

@media (max-width: 420px) {
	.solardawn-sun-widget__header {
		align-items: flex-start;
	}

	.solardawn-sun-widget__event-icon svg {
		width: 66px;
		height: 66px;
	}

	.solardawn-sun-widget__event-label {
		font-size: 18px;
	}

	.solardawn-sun-widget__event-time {
		font-size: 24px;
	}
}