/* EasyGoin ARK SE Handler — server status shortcodes */

/* Root wrappers: avoid flex/min-width bugs inside tabs and block layouts */
.egl-arkse-shortcode {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.easygoing-tabcontent .egl-arkse-shortcode,
.easygoin_box .egl-arkse-shortcode,
.wp-block-column .egl-arkse-shortcode {
	max-width: 100%;
}

/* Single server: constrain clickable card */
.egl-arkse-server-single .egl-arkse-status-link {
	display: block;
	max-width: 320px;
	width: 100%;
	margin: 0 auto;
	text-decoration: none !important;
	color: inherit !important;
	box-sizing: border-box;
}

/* Cluster: 2 columns on comfortable widths, 1 column on phones / narrow slots */
.egl-arkse-cluster-wrap {
	container-type: inline-size;
	container-name: egl-arkse-cluster;
	max-width: 100%;
}

.egl-arkse-cluster-wrap .egl-arkse-cluster {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 20px;
	margin: 16px 0 0;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	align-items: stretch;
}

.egl-arkse-cluster-wrap .egl-arkse-cluster > .egl-arkse-status-link {
	display: block !important;
	min-width: 0 !important;
	max-width: 100% !important;
	text-decoration: none !important;
	color: inherit !important;
	box-sizing: border-box;
}

@media (max-width: 640px) {
	.egl-arkse-cluster-wrap .egl-arkse-cluster {
		grid-template-columns: 1fr !important;
	}
}

@supports (container-type: inline-size) {
	@container egl-arkse-cluster (max-width: 520px) {
		.egl-arkse-cluster-wrap .egl-arkse-cluster {
			grid-template-columns: 1fr !important;
		}
	}
}

/* Card body */
.egl-arkse-status {
	border: 1px solid #0ff !important;
	padding: 20px !important;
	margin: 0 !important;
	background-color: #111 !important;
	border-radius: 10px !important;
	font-family: Arial, sans-serif;
	box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
	color: #0ff !important;
	transition: all 0.3s ease-in-out;
	box-sizing: border-box !important;
	width: 100%;
	max-width: 100%;
	text-align: center;
}

.egl-arkse-status:hover {
	box-shadow: 0 0 25px rgba(0, 255, 255, 0.8);
	transform: scale(1.02);
}

.egl-arkse-status h3 {
	font-size: 22px;
	margin: 0 0 12px;
	color: #0ff !important;
	text-shadow: 0 0 10px #0ff;
	text-align: center;
}

.egl-arkse-status p {
	margin: 6px 0;
	font-size: 15px;
	color: #aaa !important;
	text-align: center;
}

.egl-arkse-status strong {
	color: #39ff14;
	text-shadow: 0 0 8px #39ff14;
}

.egl-arkse-status p:last-child {
	font-style: italic;
	color: #777 !important;
}

.egl-arkse-status strong.status-online {
	color: #00ff00 !important;
	text-shadow: 0 0 10px #00ff00 !important;
}

.egl-arkse-status strong.status-offline {
	color: #ff0000 !important;
	text-shadow: 0 0 10px #ff0000 !important;
}

.egl-arkse-status-link:hover .egl-arkse-status h3 {
	color: #39ff14 !important;
	text-shadow: 0 0 15px #39ff14;
}