/* =========================================================
   8530CLOUD — STATUS COMPONENT
   UptimeRobot powered service status

   States:
   - operational
   - outage
   - unknown

   Contexts:
   - Dark footer
   - Light homepage cards
   - Generic light surfaces
   ========================================================= */


/* =========================================================
   STATUS — BASE
   Default styling is intended for light surfaces.
   ========================================================= */

.c8530-footer-status {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;

	width: fit-content;
	max-width: 100%;

	margin: 18px 0 0;
	padding: 9px 13px;

	border: 1px solid rgba(20, 35, 59, 0.10);
	border-radius: 999px;

	background: rgba(255, 255, 255, 0.72);

	color: #17233c;

	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;

	letter-spacing: -0.01em;

	-webkit-backdrop-filter: blur(12px) saturate(150%);
	backdrop-filter: blur(12px) saturate(150%);

	box-shadow:
		0 8px 24px rgba(20, 35, 59, 0.05);

	transition:
		background-color 180ms ease,
		border-color 180ms ease,
		color 180ms ease,
		box-shadow 180ms ease;
}


/* Keep status text on one line when space permits. */

.c8530-footer-status > span:last-child {
	display: inline-block;

	min-width: 0;

	white-space: nowrap;
}


/* =========================================================
   STATUS — DOT
   ========================================================= */

.c8530-footer-status .c8530-live-dot {
	position: relative;

	display: inline-block;
	flex: 0 0 auto;

	width: 8px;
	height: 8px;

	border-radius: 50%;

	background: #94a3b8;

	box-shadow:
		0 0 0 3px rgba(148, 163, 184, 0.12),
		0 0 12px rgba(148, 163, 184, 0.22);
}


/* =========================================================
   STATUS — OPERATIONAL
   ========================================================= */

.c8530-footer-status--operational {
	border-color: rgba(34, 197, 94, 0.16);

	background:
		linear-gradient(
			135deg,
			rgba(34, 197, 94, 0.075),
			rgba(255, 255, 255, 0.82)
		);

	color: #166534;

	box-shadow:
		0 8px 24px rgba(34, 197, 94, 0.06);
}


.c8530-footer-status--operational .c8530-live-dot {
	background: #22c55e;

	box-shadow:
		0 0 0 3px rgba(34, 197, 94, 0.13),
		0 0 14px rgba(34, 197, 94, 0.34);
}


.c8530-footer-status--operational .c8530-live-dot::after {
	content: "";

	position: absolute;
	inset: -4px;

	border: 1px solid rgba(34, 197, 94, 0.48);
	border-radius: 50%;

	animation: c8530-status-pulse 2.4s ease-out infinite;
}


/* =========================================================
   STATUS — OUTAGE
   ========================================================= */

.c8530-footer-status--outage {
	border-color: rgba(239, 68, 68, 0.18);

	background:
		linear-gradient(
			135deg,
			rgba(239, 68, 68, 0.08),
			rgba(255, 255, 255, 0.82)
		);

	color: #b91c1c;

	box-shadow:
		0 8px 24px rgba(239, 68, 68, 0.07);
}


.c8530-footer-status--outage .c8530-live-dot {
	background: #ef4444;

	box-shadow:
		0 0 0 3px rgba(239, 68, 68, 0.13),
		0 0 14px rgba(239, 68, 68, 0.34);
}


.c8530-footer-status--outage .c8530-live-dot::after {
	content: "";

	position: absolute;
	inset: -4px;

	border: 1px solid rgba(239, 68, 68, 0.48);
	border-radius: 50%;

	animation: c8530-status-pulse 2.4s ease-out infinite;
}


/* =========================================================
   STATUS — UNKNOWN
   ========================================================= */

.c8530-footer-status--unknown {
	border-color: rgba(245, 158, 11, 0.20);

	background:
		linear-gradient(
			135deg,
			rgba(245, 158, 11, 0.09),
			rgba(255, 255, 255, 0.82)
		);

	color: #92400e;

	box-shadow:
		0 8px 24px rgba(245, 158, 11, 0.07);
}


.c8530-footer-status--unknown .c8530-live-dot {
	background: #f59e0b;

	box-shadow:
		0 0 0 3px rgba(245, 158, 11, 0.13),
		0 0 12px rgba(245, 158, 11, 0.28);
}


/* =========================================================
   STATUS — DARK FOOTER CONTEXT

   The same shortcode is used in the dark footer.
   Override the light-surface styling here while keeping
   the state-specific dot colours.
   ========================================================= */

.c8530-footer .c8530-footer-status {
	border-color: rgba(255, 255, 255, 0.10);

	background: rgba(255, 255, 255, 0.055);

	color: rgba(255, 255, 255, 0.92);

	box-shadow: none;

	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}


/* Operational footer */

.c8530-footer
.c8530-footer-status--operational {
	border-color: rgba(34, 197, 94, 0.18);

	background: rgba(34, 197, 94, 0.075);

	color: rgba(255, 255, 255, 0.94);
}


/* Outage footer */

.c8530-footer
.c8530-footer-status--outage {
	border-color: rgba(239, 68, 68, 0.22);

	background: rgba(239, 68, 68, 0.09);

	color: rgba(255, 255, 255, 0.94);
}


/* Unknown footer */

.c8530-footer
.c8530-footer-status--unknown {
	border-color: rgba(245, 158, 11, 0.22);

	background: rgba(245, 158, 11, 0.09);

	color: rgba(255, 255, 255, 0.94);
}


/* =========================================================
   STATUS — HOMEPAGE LIVE STATUS CARD

   Explicit light-card context. This prevents footer
   colours from ever leaking into the homepage card.
   ========================================================= */

.c8530-home-live-status
.c8530-footer-status {
	margin-top: 20px;

	color: #17233c;
}


.c8530-home-live-status
.c8530-footer-status--operational {
	border-color: rgba(34, 197, 94, 0.18);

	background:
		linear-gradient(
			135deg,
			rgba(34, 197, 94, 0.09),
			rgba(255, 255, 255, 0.78)
		);

	color: #166534;
}


.c8530-home-live-status
.c8530-footer-status--outage {
	border-color: rgba(239, 68, 68, 0.20);

	background:
		linear-gradient(
			135deg,
			rgba(239, 68, 68, 0.09),
			rgba(255, 255, 255, 0.78)
		);

	color: #b91c1c;
}


.c8530-home-live-status
.c8530-footer-status--unknown {
	border-color: rgba(245, 158, 11, 0.22);

	background:
		linear-gradient(
			135deg,
			rgba(245, 158, 11, 0.10),
			rgba(255, 255, 255, 0.78)
		);

	color: #92400e;
}


/* =========================================================
   STATUS — PULSE
   ========================================================= */

@keyframes c8530-status-pulse {

	0% {
		transform: scale(0.75);
		opacity: 0.9;
	}

	70% {
		transform: scale(1.55);
		opacity: 0;
	}

	100% {
		transform: scale(1.55);
		opacity: 0;
	}

}


/* =========================================================
   STATUS — MOBILE
   ========================================================= */

@media (max-width: 600px) {

	.c8530-footer-status {
		gap: 9px;

		margin-top: 16px;
		padding: 8px 12px;

		font-size: 12px;
	}


	.c8530-home-live-status
	.c8530-footer-status {
		margin-top: 18px;
	}

}


/* =========================================================
   STATUS — VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 380px) {

	.c8530-footer-status {
		max-width: 100%;

		padding: 8px 11px;
	}


	.c8530-footer-status > span:last-child {
		white-space: normal;
	}

}


/* =========================================================
   STATUS — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.c8530-footer-status,
	.c8530-footer-status .c8530-live-dot,
	.c8530-footer-status .c8530-live-dot::after {
		transition: none !important;
	}


	.c8530-footer-status .c8530-live-dot::after {
		animation: none !important;
	}

}