/* Estilos reutilizables para cards y efectos visuales (servidos desde public/css)
   Restaurado: blur, hover y color de iconos. */

.card-blur {
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, 0.04); /* Más transparente */
	border: 1px solid rgba(255, 255, 255, 0.10); /* Más sutil */
	border-radius: 8px;
}

.card-hover {
	transition: transform 0.28s cubic-bezier(.4,0,.2,1), box-shadow 0.28s ease, background 0.28s ease;
	will-change: transform;
}

.card-hover:hover {
	transform: translateY(-6px) scale(1.02);
	box-shadow: 0 12px 30px rgba(20,20,40,0.18), 0 2px 6px rgba(20,20,40,0.08);
	background: rgba(255,255,255,0.10);
	border-color: rgba(255,255,255,0.18);
}

.img-blur {
	filter: blur(0.5px);
}

/* Forzar iconos dentro de cards a color blanco y mejorar contraste */
.card-blur i,
.card-blur .fas,
.card-blur .fa {
	color: #ffffff;
	opacity: 0.95;
}

/* Centrar vertical y horizontalmente el contenido dentro de cada tarjeta */
.role-inner {
	display: flex;
	align-items: center;      /* centra vertical */
	justify-content: center;  /* centra horizontal */
	flex-direction: column;
	height: 100%;
}

/* overlay styles removed */

/* role-card animation removed */

/* Hover effects for images: user photo and flags */
/* img-blur kept for image hover interactions but without default blur */
.img-blur {
	filter: none; /* no blur by default */
	transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease;
	will-change: transform;
}
.img-blur:hover,
.img-blur:focus {
	transform: scale(1.03) translateY(-4px);
	box-shadow: 0 12px 30px rgba(0,0,0,0.18), 0 4px 8px rgba(0,0,0,0.08);
	outline: none;
}

/* Flags in the slider */
.st-slider-items img {
	transition: transform 200ms cubic-bezier(.2,.9,.2,1), filter 200ms ease, opacity 200ms ease;
	will-change: transform, filter;
	cursor: pointer;
}
.st-slider-items img:hover,
.st-slider-items img:focus {
	transform: translateY(-6px) scale(1.08);
	filter: brightness(1.05) saturate(1.05);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.img-blur,
	.st-slider-items img {
		transition: none !important;
		transform: none !important;
	}
}

/* Card fade-in removed by request */

/* On small screens, remove default margins from form groups to tighten layout */
@media (max-width: 767.98px) {
	.form-group {
		margin: 0 !important;
		padding-bottom: 0 !important;
	}
}

/* Removed nav-specific blur and indicator styles per user request.
   The general `.card-blur` and `.card-hover` utilities above are retained
   for use in cards across the app (dashboard, login, etc.).
*/