/* Zevonix Status — styled to match the Business Suite Help Center.
   Palette: dark navy, brand blue (#10a7f3), teal accents, white surfaces. */
.zvxstatus {
	--zs-navy: #0b1f3a;
	--zs-navy-2: #234462;
	--zs-brand: #10a7f3;
	--zs-teal: #14b8a6;
	--zs-ink: #1f2d3d;
	--zs-muted: #5a6b80;
	--zs-border: #e6edf6;
	--zs-surface: #f3f6fd;
	--zs-bg: #ffffff;
	--zs-radius: 14px;
	--zs-shadow: 0 1px 3px rgba(11, 31, 58, .06), 0 8px 24px rgba(11, 31, 58, .05);
	--zs-shadow-h: 0 12px 30px rgba(11, 31, 58, .12);
	--zs-op: #15a05a;
	--zs-degraded: #d9a300;
	--zs-partial: #e8830c;
	--zs-major: #dc3545;
	--zs-maint: #2f7ed8;
	--zs-unknown: #98a2b3;
	color: var(--zs-ink);
	font-size: 16px;
	line-height: 1.6;
	width: 100%;
}
.zvxstatus *,
.zvxstatus *::before,
.zvxstatus *::after { box-sizing: border-box; }

/* Elementor places the shortcode in a flexbox container; its widget defaults to
   width:initial (elementor-widget__width-initial), which shrink-wraps to content
   and pins the block to the left. That class has the SAME specificity as a plain
   selector and Elementor's sheet loads last, so we need !important here to force
   the widget that holds our block to fill its container — only then can the
   centered 1120px column actually center. */
.elementor-widget-shortcode:has(.zvxstatus) {
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
	align-self: stretch !important;
}

/* Centered content column, like .zvxhc-container. */
.zvxs-container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ---------- Hero (matches .zvxhc-hero) ---------- */
.zvxs-hero {
	background: var(--zs-navy-2);
	color: #fff;
	padding: 56px 20px 60px;
	text-align: center;
}
.zvxs-hero__inner { max-width: 760px; margin: 0 auto; }
.zvxs-hero__title {
	color: #fff;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.12;
	letter-spacing: -.02em;
	margin: 0 0 10px;
	font-weight: 700;
}
.zvxs-hero__subtitle {
	color: #c7d6ec;
	font-size: clamp(15px, 2vw, 18px);
	margin: 0 auto;
	max-width: 620px;
}

/* ---------- Grid of provider cards ---------- */
.zvxs-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
	padding: 36px 0 16px;
}
@media (max-width: 768px) { .zvxs-grid { grid-template-columns: 1fr; gap: 18px; } }

/* When the hero is off and this is dropped straight into a page, add a little top room. */
.zvxs-grid:first-child { padding-top: 8px; }

/* ---------- Card (matches .zvxhc-card) ---------- */
.zvxs-card {
	background: var(--zs-bg);
	border: 1px solid var(--zs-border);
	border-radius: var(--zs-radius);
	padding: 6px 22px 10px;
	box-shadow: var(--zs-shadow);
}

.zvxs-card-head { display: flex; align-items: center; gap: 12px; padding: 16px 0 6px; }
.zvxs-ico {
	width: 40px; height: 40px; flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 10px;
	background: var(--zs-surface);
	color: var(--zs-brand);
}
.zvxs-card-head h3 { flex: 1 1 auto; margin: 0; font-size: 17px; font-weight: 700; color: var(--zs-navy); line-height: 1.3; }
.zvxs-src { flex: 0 0 auto; font-size: 13px; color: var(--zs-muted); text-decoration: none; white-space: nowrap; }
.zvxs-src:hover { color: var(--zs-brand); }

/* ---------- Status rows ---------- */
.zvxs-list { list-style: none; margin: 0; padding: 0; }
.zvxs-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	border-top: 1px solid #f0f3f7;
}
.zvxs-row:first-child { border-top: 0; }
.zvxs-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.zvxs-name { flex: 1 1 auto; font-size: 15px; }
.zvxs-stat { font-size: 13px; font-weight: 600; white-space: nowrap; }

.zvxs-op    { color: var(--zs-op); }    .zvxs-dot.zvxs-op    { background: var(--zs-op); }
.zvxs-degraded { color: var(--zs-degraded); } .zvxs-dot.zvxs-degraded { background: var(--zs-degraded); }
.zvxs-partial { color: var(--zs-partial); } .zvxs-dot.zvxs-partial { background: var(--zs-partial); }
.zvxs-major { color: var(--zs-major); } .zvxs-dot.zvxs-major { background: var(--zs-major); }
.zvxs-maint { color: var(--zs-maint); } .zvxs-dot.zvxs-maint { background: var(--zs-maint); }
.zvxs-unknown { color: var(--zs-unknown); } .zvxs-dot.zvxs-unknown { background: var(--zs-unknown); }

.zvxs-err { color: var(--zs-muted); padding: 14px 0; font-size: 14px; }
.zvxs-foot { text-align: center; color: var(--zs-muted); font-size: 13px; margin: 4px 0 36px; }

/* chrome="off" — drop the card frame so an Elementor container can style it. */
.zvxstatus.zvxs-bare .zvxs-card { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.zvxstatus.zvxs-bare .zvxs-grid { gap: 0; padding: 0; }

@media (max-width: 600px) {
	.zvxs-hero { padding: 40px 16px 44px; }
	.zvxs-card { padding: 6px 16px 10px; }
	.zvxs-stat { font-size: 12px; }
}