/**
 * Frontend styles for the Personas plugin.
 *
 * @package    CME_Personas
 */

/* Persona Switcher Styles */
.cme-persona-switcher {
	margin: 1em 0;
	padding: 0.5em;
	border: 1px solid #ddd;
	background-color: #f9f9f9;
	border-radius: 4px;
}

.cme-persona-switcher label {
	display: block;
	margin-bottom: 0.5em;
	font-weight: bold;
}

.cme-persona-select {
	width: 100%;
	padding: 0.5em;
	border: 1px solid #ccc;
	border-radius: 3px;
}

.cme-persona-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.cme-persona-button {
	padding: 0.5em 1em;
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	border-radius: 3px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.cme-persona-button:hover {
	background-color: #e0e0e0;
}

.cme-persona-button.active {
	background-color: #007cba;
	color: white;
	border-color: #006ba1;
}

/* Ensure proper rendering in responsive contexts */
@media (width <= 768px) {
	.cme-persona-buttons {
		flex-direction: column;
	}

	.cme-persona-button {
		width: 100%;
		margin-bottom: 0.5em;
	}
}