// Questo file fa parte di MyTown.
// MyTown è software libero: puoi ridistribuirlo e/o modificarlo secondo
// i termini della GNU Affero General Public License come pubblicata dalla
// Free Software Foundation, versione 3.
// Distribuito senza ALCUNA GARANZIA; vedi la GNU AGPL v3 per i dettagli.
// Copyright (C) Kondor Consulting & Services S.r.l.
// SPDX-License-Identifier: AGPL-3.0-or-later

.image-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 1;
}

.modern-card {
	position: relative;
	border-radius: 16px;
	padding: 20px;
	min-height: 160px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	cursor: pointer;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

	&:hover {
		transform: translateY(-4px) scale(1.02);
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
	}

	&:active {
		transform: translateY(-2px) scale(0.98);
	}

	// Pseudo-element for overlay effects
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0.1;
		transition: opacity 0.3s ease;
		pointer-events: none;
	}

	&:hover::before {
		opacity: 0.15;
	}
}

.card-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	z-index: 2;
	position: relative;
}

.card-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.3);

	icon {
		font-size: 20px;
		color: rgba(255, 255, 255, 0.9);
	}
}

.card-logo {
	height: 32px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 14px;
	color: var(--ion-color-dark);
}

.card-content {
	z-index: 2;
	position: relative;

	.company-name {
		color: #fff;
		font-size: 18px;
		font-weight: 600;
		margin: 0 0 4px 0;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	}

	.service-name {
		color: rgba(255, 255, 255, 0.9);
		font-size: 14px;
		font-weight: 500;
		margin: 0 0 8px 0;

		&.service-name-hero {
			color: #fff;
			font-size: 18px;
			font-weight: 600;
			line-height: 1.25;
			text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
		}
	}

	.description {
		color: rgba(255, 255, 255, 0.8);
		font-size: 12px;
		line-height: 1.4;
		margin: 0;
	}
}

// Distance Badge
.distance-badge {
	position: absolute;
	bottom: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	gap: 3px;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(6px);
	color: white;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 7px;
	border-radius: 10px;
	line-height: 1.4;
	z-index: 2;

	ion-icon {
		font-size: 12px;
	}
}

// Favorite Star Indicator
.favorite-star {
	position: absolute;
	top: 8px;
	right: 8px;
	background: white;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

	ion-icon {
		font-size: 20px;
		color: #ffc107;
	}
}

// No Results Card
.no-results {
	margin: 32px 16px;
	text-align: center;

	ion-card-content {
		padding: 48px 24px;

		ion-icon {
			margin-bottom: 16px;
			opacity: 0.5;
		}

		p {
			color: var(--ion-color-medium);
			font-size: 16px;
			margin: 0;
		}
	}
}

.favorite-star {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);

	ion-icon {
		color: #ef4444;
	}
}

.bg-gradient-sunset {
	background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 50%, #ff8a56 100%);
}

.bg-gradient-ocean {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.bg-gradient-forest {
	background: linear-gradient(135deg, #2d5016 0%, #a8e6cf 100%);
}

.bg-gradient-cosmic {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

.bg-gradient-mint {
	background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.bg-gradient-fire {
	background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
}

.bg-mesh-purple {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

	&::before {
		background-image: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.2) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
	}
}

.bg-geometric {
	background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);

	&::before {
		background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%), linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.1) 75%),
			linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.1) 75%);
		background-size: 20px 20px;
		background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
	}
}

.bg-glass-morphism {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

	.card-content {
		.company-name,
		.service-name,
		.description {
			color: var(--ion-color-dark);
		}
	}

	.card-icon ion-icon {
		color: var(--ion-color-primary);
	}
}

.bg-neon {
	background: linear-gradient(135deg, #12c2e9 0%, #c471ed 50%, #f64f59 100%);

	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
		animation: shimmer 3s infinite;
		pointer-events: none;
	}
}

.bg-dark-elegant {
	background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);

	&::before {
		background: radial-gradient(circle at 30% 20%, rgba(52, 152, 219, 0.3) 0%, transparent 50%);
	}
}

.bg-aurora {
	background: linear-gradient(135deg, #00c9ff 0%, #92fe9d 50%, #00c9ff 100%);
	background-size: 400% 400%;
	animation: aurora 8s ease-in-out infinite;
}

.bg-gradient-nebula {
	background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
}

.bg-gradient-midnight {
	background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
}

.bg-gradient-galaxy {
	background: linear-gradient(135deg, #654ea3 0%, #eaafc8 100%);
}

.bg-gradient-aurora-borealis {
	background: linear-gradient(135deg, #00c6ff 0%, #0072ff 25%, #2a2a72 50%, #232659 75%, #161638 100%);
}

.bg-gradient-tropical {
	background: linear-gradient(135deg, #f857a6 0%, #ff5858 100%);
}

.bg-gradient-berry {
	background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
}

.bg-gradient-citrus {
	background: linear-gradient(135deg, #f46b45 0%, #eea849 100%);
}

.bg-gradient-lavender {
	background: linear-gradient(135deg, #9d50bb 0%, #6e48aa 100%);
}

.bg-gradient-autumn {
	background: linear-gradient(135deg, #ff4e50 0%, #f9d423 100%);
}

.bg-gradient-mountain {
	background: linear-gradient(135deg, #536976 0%, #292e49 100%);
}

.bg-gradient-reef {
	background: linear-gradient(135deg, #00cdac 0%, #8ddad5 100%);
}

.bg-gradient-deep-sea {
	background: linear-gradient(180deg, #2e3192 0%, #1bffff 100%);
}

.bg-gradient-volcanic {
	background: linear-gradient(135deg, #360033 0%, #0b8793 50%, #f9d423 100%);
}

.bg-gradient-cyber {
	background: linear-gradient(135deg, #fc00ff 0%, #00dbde 100%);
}

.bg-gradient-vapor {
	background: linear-gradient(135deg, #3494e6 0%, #ec6ead 100%);
}

.bg-gradient-synthwave {
	background: linear-gradient(135deg, #f953c6 0%, #b91d73 100%);
}

.bg-gradient-electric {
	background: linear-gradient(135deg, #8e2de2 0%, #4a00e0 100%);
}

.bg-gradient-plasma {
	background: linear-gradient(135deg, #fc466b 0%, #3f5efb 100%);
}

.bg-gradient-pulse {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
	background-size: 200% 200%;
	animation: pulse 4s ease-in-out infinite;
}

.bg-gradient-wave {
	background: linear-gradient(270deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: wave 10s ease infinite;
}

.bg-gradient-shift {
	background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #667eea);
	background-size: 300% 300%;
	animation: shift 6s ease infinite;
}

.bg-mesh-gold {
	background: linear-gradient(135deg, #f2994a 0%, #f2c94c 100%);

	&::before {
		background-image: radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.2) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
	}
}

.bg-mesh-ruby {
	background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);

	&::before {
		background-image: radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.25) 0%, transparent 40%), radial-gradient(ellipse at bottom right, rgba(0, 0, 0, 0.15) 0%, transparent 40%);
	}
}

.bg-gradient-bronze {
	background: linear-gradient(135deg, #b08d57 0%, #8b6825 50%, #b08d57 100%);
}

.bg-gradient-steel {
	background: linear-gradient(135deg, #434343 0%, #000000 100%);
}

.bg-gradient-platinum {
	background: linear-gradient(135deg, #485563 0%, #29323c 100%);
}

.bg-gradient-dusk {
	background: linear-gradient(135deg, #355c7d 0%, #6c5b7b 50%, #c06c84 100%);
}

.bg-gradient-twilight {
	background: linear-gradient(135deg, #505285 0%, #585e92 25%, #65689f 50%, #7474b0 75%, #7e7ebb 100%);
}

.bg-gradient-mystic {
	background: linear-gradient(135deg, #757f9a 0%, #d7dde8 100%);
}

.bg-gradient-inferno {
	background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%);
}

.bg-solid-red {
	background: #dc2626;
}

.bg-solid-rose {
	background: #e11d48;
}

.bg-solid-pink {
	background: #db2777;
}

.bg-solid-fuchsia {
	background: #a21caf;
}

.bg-solid-purple {
	background: #9333ea;
}

.bg-solid-violet {
	background: #7c3aed;
}

.bg-solid-indigo {
	background: #6366f1;
}

.bg-solid-blue {
	background: #3b82f6;
}

.bg-solid-sky {
	background: #0ea5e9;
}

.bg-solid-cyan {
	background: #06b6d4;
}

.bg-solid-teal {
	background: #14b8a6;
}

.bg-solid-emerald {
	background: #10b981;
}

.bg-solid-green {
	background: #22c55e;
}

.bg-solid-lime {
	background: #84cc16;
}

.bg-solid-yellow {
	background: #eab308;
}

.bg-solid-amber {
	background: #f59e0b;
}

.bg-solid-orange {
	background: #f97316;
}

.bg-solid-brown {
	background: #92400e;
}

.bg-solid-gray {
	background: #6b7280;
}

.bg-solid-slate {
	background: #475569;
}

.bg-solid-zinc {
	background: #52525b;
}

.bg-solid-neutral {
	background: #525252;
}

.bg-solid-stone {
	background: #57534e;
}

.bg-solid-black {
	background: #000000;
}

.bg-solid-navy {
	background: #1e293b;
}

.bg-solid-midnight {
	background: #0f172a;
}

.bg-solid-forest {
	background: #14532d;
}

.bg-solid-maroon {
	background: #7f1d1d;
}

.bg-solid-chocolate {
	background: #422006;
}

.bg-solid-crimson {
	background: #991b1b;
}

@keyframes shimmer {
	0%,
	100% {
		transform: translateX(-100%);
	}
	50% {
		transform: translateX(100%);
	}
}

@keyframes aurora {
	0%,
	100% {
		background-position: 0% 50%;
	}
	25% {
		background-position: 100% 50%;
	}
	50% {
		background-position: 100% 100%;
	}
	75% {
		background-position: 0% 100%;
	}
}

@keyframes pulse {
	0%,
	100% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}

@keyframes wave {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes shift {
	0% {
		background-position: 0% 0%;
	}
	25% {
		background-position: 100% 0%;
	}
	50% {
		background-position: 100% 100%;
	}
	75% {
		background-position: 0% 100%;
	}
	100% {
		background-position: 0% 0%;
	}
}

@media (prefers-color-scheme: dark) {
	.bg-glass-morphism {
		background: linear-gradient(135deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.1) 100%);
		border: 1px solid rgba(255, 255, 255, 0.1);

		.card-content {
			.company-name,
			.service-name,
			.description {
				color: rgba(255, 255, 255, 0.9);
			}
		}
	}
}
