/*
 * ==========================================================================
 * Consultation Status
 * Δήμος Ξάνθης
 * ==========================================================================
 */


/*
 * --------------------------------------------------------------------------
 * Category List icons
 * --------------------------------------------------------------------------
 */

.consultation-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 1.2em;
	margin-right: 0.4rem;

	font-size: 1.05em;
	line-height: 1;

	vertical-align: -0.05em;
}

.consultation-status--active {
	color: #198754;
}

.consultation-status--expired {
	color: #c62828;
}


/*
 * ==========================================================================
 * SINGLE ARTICLE
 * ==========================================================================
 *
 * Joomla normally renders Custom Fields inside a ul.fields-container.
 * Reset that container so our status does not inherit list indentation,
 * bullets or restrictive widths.
 * --------------------------------------------------------------------------
 */

.fields-container:has(.consultation-status-badge) {
	display: block !important;

	width: 100% !important;

	margin: 0 0 18px 0 !important;
	padding: 0 !important;

	list-style: none !important;
}

.fields-container:has(.consultation-status-badge) > li {
	display: block !important;

	width: 100% !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;

	list-style: none !important;
}

.fields-container:has(.consultation-status-badge) > li::marker {
	content: "";
}


/*
 * Status badge
 * --------------------------------------------------------------------------
 */

.consultation-status-badge {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;

	width: auto;
	max-width: 100%;

	margin: 0 !important;
	padding: 7px 11px;

	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;

	white-space: nowrap;

	border: 1px solid transparent;
	border-radius: 5px;
}


/*
 * Icon
 * --------------------------------------------------------------------------
 */

.consultation-status-badge > .fa {
	flex: 0 0 auto;

	font-size: 16px;
	line-height: 1;
}


/*
 * Label + value
 * --------------------------------------------------------------------------
 */

.consultation-status-badge__label {
	font-weight: 500;
}

.consultation-status-badge__value {
	font-weight: 700;
}


/*
 * Active
 * --------------------------------------------------------------------------
 */

.consultation-status-badge--active {
	color: #157347;

	background: #edf8f1;
	border-color: #b7dfc6;
}


/*
 * Expired
 * --------------------------------------------------------------------------
 */

.consultation-status-badge--expired {
	color: #b42318;

	background: #fdf1f0;
	border-color: #efc1bd;
}


/*
 * --------------------------------------------------------------------------
 * Mobile
 * --------------------------------------------------------------------------
 */

@media (max-width: 480px) {

	.consultation-status-badge {
		padding: 6px 9px;

		font-size: 14px;

		white-space: normal;
	}

}