// 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

.cd-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 16px 8px;

	.cd-ic {
		flex-shrink: 0;
		width: 48px;
		height: 48px;
		border-radius: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--ion-color-primary);
		box-shadow: 0 4px 10px -3px rgba(56, 128, 255, 0.5);
		ion-icon {
			font-size: 26px;
			color: #fff;
		}
	}
	.cd-titles {
		min-width: 0;
		h1 {
			margin: 0 0 4px;
			font-size: 20px;
			font-weight: 800;
			color: var(--ion-color-dark);
		}
	}
}

.cd-card {
	margin: 6px 14px 4px;
	padding: 12px 14px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.2);

	.cd-row {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		padding: 6px 0;
		font-size: 13px;
		color: var(--ion-color-dark);
		border-top: 1px solid var(--ion-color-light, #f2f2f2);
		&:first-child {
			border-top: none;
		}
		ion-icon {
			font-size: 16px;
			color: var(--ion-color-medium);
			margin-top: 1px;
			flex-shrink: 0;
		}
		span {
			overflow-wrap: anywhere;
		}
	}
	.cd-map {
		color: var(--ion-color-primary);
		font-weight: 600;
		cursor: pointer;
		ion-icon {
			color: var(--ion-color-primary);
		}
	}
}

.cd-section {
	padding: 14px 14px 120px;

	.cd-section-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 8px;
		h3 {
			display: flex;
			align-items: center;
			gap: 6px;
			margin: 0;
			font-size: 16px;
			font-weight: 700;
			color: var(--ion-color-dark);
			ion-icon {
				color: var(--ion-color-primary);
			}
		}
		.cd-mini-btn {
			display: inline-flex;
			align-items: center;
			gap: 4px;
			border: none;
			background: var(--ion-color-primary);
			color: #fff;
			font-size: 13px;
			font-weight: 600;
			padding: 6px 12px;
			border-radius: 999px;
			cursor: pointer;
			&:active {
				opacity: 0.8;
			}
		}
	}

	.cd-hint {
		font-size: 13px;
		color: var(--ion-color-medium);
		padding: 6px 2px;
	}

	.cd-sopr {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 12px 14px;
		margin-bottom: 8px;
		background: #fff;
		border-radius: 14px;
		box-shadow: 0 3px 12px -7px rgba(0, 0, 0, 0.2);
		cursor: pointer;
		&:active {
			transform: scale(0.98);
		}

		.cd-sopr-info {
			flex: 1;
			min-width: 0;
			display: flex;
			flex-direction: column;
			.nm {
				font-size: 14px;
				font-weight: 700;
				color: var(--ion-color-dark);
				white-space: normal;
				overflow-wrap: anywhere;
			}
			.sub {
				font-size: 12px;
				color: var(--ion-color-medium);
			}
		}
	}
}
