/**
 * Meu Status na Sidebar — estilos do frontend (shortcode e widget).
 * Mobile-first: a regra base já é a versão de celular.
 */

:root {
	/*--mp-color-text: #313131;*/
	--mp-color-text-muted: #6e6e6e;
	--mp-color-border: #e2e8f0;

	--mp-space-1: 4px;
	--mp-space-2: 8px;
	--mp-space-3: 16px;

	--mp-font-base: Tahoma, Geneva, Verdana, sans-serif;
	--mp-font-size-sm: 10px;
	--mp-font-size-base: 12px;

	/* Personalizáveis pelo usuário em Meu Status → Aparência. */
	--mss-color-primary: #ff69b4;
	--mss-radius: 8px;

	/* Tamanho fixo do "slot" do ícone — o GIF/WEBP é exibido no tamanho
	   original dele dentro desse espaço, nunca esticado para preenchê-lo. */
	--mss-icon-slot: 24px;
}

.mss-widget {
	font-family: var( --mp-font-base );
	color: var( --mp-color-text );
	line-height: 1.3;
}

.mss-status-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.mss-status-item {
	display: flex;
	align-items: center;
	gap: var( --mp-space-2 );
	margin-bottom: var( --mp-space-1 );
	list-style: none !important;
	border: none !important;
	box-shadow: none !important;
}

.mss-status-item:last-child {
	margin-bottom: 0;
}

/* Slot de tamanho fixo (mantém o alinhamento consistente entre itens) —
   o GIF/WEBP dentro dele fica no tamanho original, só é reduzido se for
   maior que o slot. */
.mss-status-item__icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --mss-icon-slot );
	height: var( --mss-icon-slot );
	flex-shrink: 0;
}

.mss-status-item__icon {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: var( --mss-radius );
}

.mss-status-item__text {
	font-size: var( --mp-font-size-base );
	color: var( --mp-color-text );
}

.mss-status-updated {
	margin-top: var( --mp-space-2 );
	padding-top: var( --mp-space-1 );
	border-top: 1px dashed var( --mp-color-border );
	font-size: var( --mp-font-size-sm );
	color: var( --mp-color-text-muted );
}