/* Copyright (c) 2025, Divic LLC and contributors */
/* For license information, please see license.txt */

:root {
	--modern-design-scale: 0.8;
	--modern-design-font-sans:
		"Manrope", "Plus Jakarta Sans", "Avenir Next", "Segoe UI", sans-serif;
	--modern-design-font-display:
		"Space Grotesk", "Manrope", "Plus Jakarta Sans", "Avenir Next", "Segoe UI",
		sans-serif;
	--modern-design-font-arabic: "Almarai", "Segoe UI", sans-serif;
	--modern-design-shell-gap: calc(24px * var(--modern-design-scale));
	--modern-design-text: #172033;
	--modern-design-text-soft: #546076;
	--modern-design-text-muted: #7a869b;
	--modern-design-primary: #25416e;
	--modern-design-primary-rgb: 37, 65, 110;
	--modern-design-primary-strong: #1c3357;
	--modern-design-accent: #c76a36;
	--modern-design-bg:
		radial-gradient(circle at top left, rgba(230, 186, 139, 0.14), transparent 28%),
		radial-gradient(
			circle at top right,
			rgba(var(--modern-design-primary-rgb), 0.12),
			transparent 22%
		),
		linear-gradient(180deg, #f6f2ea 0%, #eef2f7 48%, #f5f7fb 100%);
	--modern-design-glass-border: rgba(255, 255, 255, 0.36);
	--modern-design-glass-shadow:
		0 calc(8px * var(--modern-design-scale)) calc(18px * var(--modern-design-scale))
			rgba(15, 23, 42, 0.18),
		0 0 calc(28px * var(--modern-design-scale)) rgba(15, 23, 42, 0.08);
	--modern-design-glass-highlight: rgba(255, 255, 255, 0.76);
}

html[dir="rtl"] body.modern-design-web-status-page,
html[lang^="ar"] body.modern-design-web-status-page,
body.modern-design-web-status-page[dir="rtl"],
body.modern-design-web-status-page.rtl {
	--modern-design-font-sans: var(--modern-design-font-arabic);
	--modern-design-font-display: var(--modern-design-font-arabic);
}

body.modern-design-web-status-page {
	min-height: 100vh;
	color: var(--modern-design-text);
	font-family: var(--modern-design-font-sans);
	background: var(--modern-design-bg);
	overflow-x: hidden;
}

body.modern-design-web-status-page .page-content-wrapper {
	position: relative;
	isolation: isolate;
}

body.modern-design-web-status-page .page-breadcrumbs {
	display: none;
}

body.modern-design-web-status-page .page-content-wrapper::before,
body.modern-design-web-status-page .page-content-wrapper::after {
	position: fixed;
	inset: auto;
	width: calc(320px * var(--modern-design-scale));
	height: calc(320px * var(--modern-design-scale));
	content: "";
	pointer-events: none;
	border-radius: calc(999px * var(--modern-design-scale));
	filter: blur(calc(70px * var(--modern-design-scale)));
	opacity: 0.34;
	z-index: 0;
}

body.modern-design-web-status-page .page-content-wrapper::before {
	top: calc(-100px * var(--modern-design-scale));
	inset-inline-end: calc(-40px * var(--modern-design-scale));
	background: rgba(var(--modern-design-primary-rgb), 0.18);
}

body.modern-design-web-status-page .page-content-wrapper::after {
	bottom: calc(-120px * var(--modern-design-scale));
	inset-inline-start: calc(180px * var(--modern-design-scale));
	background: rgba(199, 106, 54, 0.16);
}

body.modern-design-web-status-page .modern-design-web-status-shell {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(28px * var(--modern-design-scale)) var(--modern-design-shell-gap)
		calc(36px * var(--modern-design-scale));
}

body.modern-design-web-status-page.is-fullpage .modern-design-web-status-shell {
	min-height: 100vh;
}

body.modern-design-web-status-page .modern-design-web-status-shell__inner {
	width: min(100%, calc(760px * var(--modern-design-scale)));
	display: grid;
	gap: calc(18px * var(--modern-design-scale));
}

body.modern-design-web-status-page .modern-design-web-status-card {
	position: relative;
	isolation: isolate;
	display: grid;
	gap: calc(18px * var(--modern-design-scale));
	padding: calc(28px * var(--modern-design-scale));
	border: calc(1px * var(--modern-design-scale)) solid var(--modern-design-glass-border);
	border-radius: calc(30px * var(--modern-design-scale));
	background: transparent;
	box-shadow:
		var(--modern-design-glass-shadow),
		0 calc(22px * var(--modern-design-scale)) calc(44px * var(--modern-design-scale))
			rgba(15, 23, 42, 0.12);
	backdrop-filter: blur(calc(24px * var(--modern-design-scale))) saturate(1.22);
	-webkit-backdrop-filter: blur(calc(24px * var(--modern-design-scale))) saturate(1.22);
	overflow: hidden;
}

body.modern-design-web-status-page .modern-design-web-status-card::before,
body.modern-design-web-status-page .modern-design-web-status-card::after {
	position: absolute;
	inset: 0;
	content: "";
	pointer-events: none;
	border-radius: inherit;
	z-index: 0;
}

body.modern-design-web-status-page .modern-design-web-status-card::after {
	box-shadow:
		inset calc(1px * var(--modern-design-scale))
			calc(1px * var(--modern-design-scale)) 0 var(--modern-design-glass-highlight),
		inset 0 0 calc(6px * var(--modern-design-scale)) rgba(255, 255, 255, 0.54);
}

body.modern-design-web-status-page .modern-design-web-status-card__hero {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	gap: calc(16px * var(--modern-design-scale));
}

body.modern-design-web-status-page .modern-design-web-status-card__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(64px * var(--modern-design-scale));
	height: calc(64px * var(--modern-design-scale));
	border-radius: calc(20px * var(--modern-design-scale));
	background: var(--tone-bg, rgba(var(--modern-design-primary-rgb), 0.12));
	color: var(--tone-fg, var(--modern-design-primary));
	box-shadow:
		inset 0 calc(1px * var(--modern-design-scale)) 0 rgba(255, 255, 255, 0.58),
		0 calc(12px * var(--modern-design-scale)) calc(24px * var(--modern-design-scale))
			rgba(15, 23, 42, 0.08);
}

body.modern-design-web-status-page .modern-design-web-status-card__icon img {
	display: block;
	width: calc(30px * var(--modern-design-scale));
	height: calc(30px * var(--modern-design-scale));
	object-fit: contain;
}

body.modern-design-web-status-page .modern-design-web-status-card__icon[data-tone="info"] {
	--tone-bg: rgba(59, 130, 246, 0.14);
	--tone-fg: #2563eb;
}

body.modern-design-web-status-page .modern-design-web-status-card__icon[data-tone="warning"] {
	--tone-bg: rgba(245, 158, 11, 0.16);
	--tone-fg: #d97706;
}

body.modern-design-web-status-page .modern-design-web-status-card__icon[data-tone="danger"] {
	--tone-bg: rgba(239, 68, 68, 0.14);
	--tone-fg: #dc2626;
}

body.modern-design-web-status-page .modern-design-web-status-card__icon[data-tone="accent"] {
	--tone-bg: rgba(199, 106, 54, 0.14);
	--tone-fg: var(--modern-design-accent);
}

body.modern-design-web-status-page .modern-design-web-status-card__icon[data-tone="muted"] {
	--tone-bg: rgba(100, 116, 139, 0.14);
	--tone-fg: #475569;
}

body.modern-design-web-status-page .modern-design-web-status-card__body {
	position: relative;
	z-index: 1;
	min-width: 0;
}

body.modern-design-web-status-page .modern-design-web-status-card__body h1 {
	margin: 0;
	color: var(--modern-design-text);
	font-family: var(--modern-design-font-display);
	font-size: calc(2rem * var(--modern-design-scale));
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.04em;
}

body.modern-design-web-status-page .modern-design-web-status-card__body p {
	margin: calc(12px * var(--modern-design-scale)) 0 0;
	color: var(--modern-design-text-soft);
	font-size: calc(0.98rem * var(--modern-design-scale));
	line-height: 1.7;
}

body.modern-design-web-status-page .modern-design-web-status-actions {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: calc(12px * var(--modern-design-scale));
	align-items: center;
}

body.modern-design-web-status-page .modern-design-web-status-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: calc(46px * var(--modern-design-scale));
	padding: 0 calc(18px * var(--modern-design-scale));
	border-radius: calc(999px * var(--modern-design-scale));
	background: linear-gradient(
		135deg,
		var(--modern-design-primary) 0%,
		var(--modern-design-primary-strong) 100%
	);
	box-shadow:
		0 calc(12px * var(--modern-design-scale)) calc(24px * var(--modern-design-scale))
			rgba(var(--modern-design-primary-rgb), 0.24),
		inset 0 calc(1px * var(--modern-design-scale)) 0 rgba(255, 255, 255, 0.14);
	color: #ffffff;
	font-size: var(--text-base, 14px);
	font-weight: 600;
	text-decoration: none;
	transition:
		transform 150ms ease,
		box-shadow 150ms ease,
		opacity 150ms ease;
}

body.modern-design-web-status-page .modern-design-web-status-button:hover,
body.modern-design-web-status-page .modern-design-web-status-button:focus-visible {
	transform: translateY(calc(-1px * var(--modern-design-scale)));
	box-shadow:
		0 calc(16px * var(--modern-design-scale)) calc(28px * var(--modern-design-scale))
			rgba(var(--modern-design-primary-rgb), 0.28),
		inset 0 calc(1px * var(--modern-design-scale)) 0 rgba(255, 255, 255, 0.16);
	color: #ffffff;
	opacity: 1;
	outline: none;
}

body.modern-design-web-status-page .modern-design-web-status-support {
	position: relative;
	z-index: 1;
	margin: 0;
	color: var(--modern-design-text-soft);
	font-size: calc(0.92rem * var(--modern-design-scale));
	line-height: 1.6;
}

body.modern-design-web-status-page .modern-design-web-status-support a {
	color: var(--modern-design-primary);
	text-decoration: none;
	border-bottom: 1px solid rgba(var(--modern-design-primary-rgb), 0.3);
}

body.modern-design-web-status-page .modern-design-web-status-meta {
	position: relative;
	z-index: 1;
	display: grid;
	gap: calc(10px * var(--modern-design-scale));
	color: var(--modern-design-text-muted);
	font-size: calc(0.84rem * var(--modern-design-scale));
}

body.modern-design-web-status-page .modern-design-web-status-meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(12px * var(--modern-design-scale));
}

body.modern-design-web-status-page .modern-design-web-status-toggle {
	color: var(--modern-design-accent);
	font-weight: 600;
	cursor: pointer;
	user-select: none;
}

body.modern-design-web-status-page .modern-design-web-status-countdown {
	position: relative;
	z-index: 1;
	display: block;
	margin-top: calc(-4px * var(--modern-design-scale));
	color: var(--modern-design-accent);
	font-weight: 600;
}

body.modern-design-web-status-page .modern-design-web-status-details {
	display: none;
	margin: 0;
	padding: calc(14px * var(--modern-design-scale))
		calc(16px * var(--modern-design-scale));
	border-radius: calc(18px * var(--modern-design-scale));
	background: #0f172a;
	color: #e2e8f0;
	font-family: "Fira Code", "SFMono-Regular", ui-monospace, SFMono-Regular, Menlo, Monaco,
		Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: calc(0.82rem * var(--modern-design-scale));
	line-height: 1.6;
	max-height: 280px;
	overflow: auto;
	white-space: pre-wrap;
	word-break: break-word;
}

body.modern-design-web-status-page .modern-design-web-status-details.is-visible {
	display: block;
}

@media (max-width: 640px) {
	body.modern-design-web-status-page .modern-design-web-status-shell {
		padding-inline: calc(16px * var(--modern-design-scale));
		padding-top: calc(18px * var(--modern-design-scale));
	}

	body.modern-design-web-status-page .modern-design-web-status-card {
		padding: calc(22px * var(--modern-design-scale));
		border-radius: calc(24px * var(--modern-design-scale));
	}

	body.modern-design-web-status-page .modern-design-web-status-card__hero {
		flex-direction: column;
	}

	body.modern-design-web-status-page .modern-design-web-status-card__body h1 {
		font-size: calc(1.6rem * var(--modern-design-scale));
	}
}