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

/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */

/* Core CSS required for Ionic components to work properly */
@import '@ionic/angular/css/core.css';

/* Basic CSS for apps built with Ionic */
@import '@ionic/angular/css/normalize.css';
@import '@ionic/angular/css/structure.css';
@import '@ionic/angular/css/typography.css';
@import '@ionic/angular/css/display.css';

/* Optional CSS utils that can be commented out */
@import '@ionic/angular/css/padding.css';
@import '@ionic/angular/css/float-elements.css';
@import '@ionic/angular/css/text-alignment.css';
@import '@ionic/angular/css/text-transformation.css';
@import '@ionic/angular/css/flex-utils.css';

@import './theme/variables.scss';
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
	--ion-font-family: 'Inter', sans-serif;
}

body, ion-app {
	font-family: 'Inter', sans-serif;
}

.normal-modal {
	&::part(content) {
		width: 85%;
		height: 60%;
	}
}

.large-modal {
	&::part(content) {
		width: 85%;
		height: 90%;
	}
}

.large-xxl-modal {
	&::part(content) {
		width: 100%;
		height: 100%;
	}
}

ion-toolbar {
	min-height: 35px !important;
	--min-height: 35px !important;
}

/* Tab bar label e badge — esclusi dalle regole globali span */
ion-tab-bar .tab-label {
	font-size: 9px !important;
	line-height: 1 !important;
}

ion-tab-bar .tab-badge {
	font-size: 8px !important;
	line-height: 1 !important;
}

ion-title {
	font-size: 16px;
	letter-spacing: 0;
}

// ─── LOCATION PERMISSION MODAL ────────────────────────────────
ion-modal.location-modal {
	--background: #0c1a2e;
	--border-radius: 24px 24px 0 0;

	.loc-feat-title {
		font-size: 13px !important;
		font-weight: 600;
		color: #f1f5f9;
	}

	.loc-feat-desc {
		font-size: 11px !important;
		color: rgba(241, 245, 249, 0.5);
	}

	.loc-sub {
		font-size: 14px !important;
	}

	.loc-headline {
		font-size: 24px !important;
	}
}

@media (min-width: 320px) {
	/* smartphones, iPhone, portrait 480x320 phones */
	ion-icon {
		font-size: 22px;
	}
	ion-icon[slot='start'] {
		margin-inline-end: 16px;
	}

	ion-card-title {
		font-size: 24px;
		font-weight: 700;
	}

	ion-label {
		font-size: 15px !important;
	}
	ion-label.sm {
		font-size: 12px !important;
	}

	p:not(#JR_PAGE_ANCHOR_0_1 p),
	span:not(#JR_PAGE_ANCHOR_0_1 span):not(.section-title):not(.tab-label):not(.tab-badge) {
		font-size: 13px !important;
	}

	.menu-button > span {
		font-size: 16px !important;
	}

	h1 {
		font-size: 24px !important;
	}
	h2 {
		font-size: 23px !important;
	}
	h3 {
		font-size: 18px !important;
	}
	h4 {
		font-size: 17px !important;
	}
	h5 {
		font-size: 16px !important;
	}
	h6 {
		font-size: 15px !important;
	}
}

@media (min-width: 481px) {
	/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
	ion-icon {
		font-size: 22px;
	}
	ion-icon[slot='start'] {
		margin-inline-end: 16px;
	}

	ion-card-title {
		font-size: 24px;
		font-weight: 700;
	}

	ion-label {
		font-size: 16px;
	}
	ion-label.sm {
		font-size: 12px !important;
	}

	p:not(#JR_PAGE_ANCHOR_0_1 p),
	span:not(#JR_PAGE_ANCHOR_0_1 span):not(.tab-label):not(.tab-badge) {
		font-size: 14px !important;
	}

	.menu-button > span {
		font-size: 16px !important;
	}

	h1 {
		font-size: 24px !important;
	}
	h2 {
		font-size: 23px !important;
	}
	h3 {
		font-size: 22px !important;
	}
	h4 {
		font-size: 21px !important;
	}
	h5 {
		font-size: 20px !important;
	}
	h6 {
		font-size: 19px !important;
	}
}

@media (min-width: 641px) {
	/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
	ion-icon {
		font-size: 22px;
	}
	ion-icon[slot='start'] {
		margin-inline-end: 16px;
	}

	ion-card-title {
		font-size: 28px;
		font-weight: 700;
	}

	ion-label {
		font-size: 16px;
	}
	ion-label.sm {
		font-size: 12px !important;
	}

	p:not(#JR_PAGE_ANCHOR_0_1 p),
	span:not(#JR_PAGE_ANCHOR_0_1 span):not(.tab-label):not(.tab-badge) {
		font-size: 14px !important;
	}

	.menu-button > span {
		font-size: 16px !important;
	}

	h1 {
		font-size: 28px !important;
	}
	h2 {
		font-size: 27px !important;
	}
	h3 {
		font-size: 26px !important;
	}
	h4 {
		font-size: 25px !important;
	}
	h5 {
		font-size: 24px !important;
	}
	h6 {
		font-size: 23px !important;
	}
}

@media (min-width: 961px) {
	/* tablet, landscape iPad, lo-res laptops ands desktops */
	ion-icon {
		font-size: 22px;
	}
	ion-icon[slot='start'] {
		margin-inline-end: 16px;
	}

	ion-card-title {
		font-size: 34px;
		font-weight: 700;
	}

	ion-label {
		font-size: 16px;
	}
	ion-label.sm {
		font-size: 12px !important;
	}

	p:not(#JR_PAGE_ANCHOR_0_1 p),
	span:not(#JR_PAGE_ANCHOR_0_1 span):not(.tab-label):not(.tab-badge) {
		font-size: 14px !important;
	}

	.menu-button > span {
		font-size: 16px !important;
	}

	h1 {
		font-size: 34px !important;
	}
	h2 {
		font-size: 33px !important;
	}
	h3 {
		font-size: 32px !important;
	}
	h4 {
		font-size: 31px !important;
	}
	h5 {
		font-size: 30px !important;
	}
	h6 {
		font-size: 29px !important;
	}
}

@media (min-width: 1025px) {
	/* big landscape tablets, laptops, and desktops */
	ion-icon {
		font-size: 18px;
	}
	ion-icon[size='large'] {
		font-size: 24px !important;
		width: 28px;
	}
	ion-icon[slot='start'] {
		margin-inline-end: 8px;
	}

	ion-title {
		font-size: 16px;
		letter-spacing: 0;
	}

	ion-card-title {
		font-size: 30px;
		font-weight: 700;
	}

	ion-text,
	ion-label {
		font-size: 13px !important;
	}
	ion-label.sm {
		font-size: 12px !important;
	}

	p:not(#JR_PAGE_ANCHOR_0_1 p),
	span:not(#JR_PAGE_ANCHOR_0_1 span):not(.tab-label):not(.tab-badge) {
		font-size: 13px !important;
	}

	.menu-button > span {
		font-size: 13px !important;
	}

	h1 {
		font-size: 25px !important;
	}
	h2 {
		font-size: 23px !important;
	}
	h3 {
		font-size: 21px !important;
	}
	h4 {
		font-size: 19px !important;
	}
	h5 {
		font-size: 17px !important;
	}
	h6 {
		font-size: 15px !important;
	}
}

.table_template {
	width: 100%;
	margin: 0;
	border-radius: 4px;
}

.table_template > thead,
.table_template > tbody > tr > td {
	border-bottom: 1px solid rgba(168, 168, 168, 0.466);
}
.table_template > tbody > tr:last-child > td {
	border-bottom: 0px;
}

.table_template > thead > tr > th {
	color: var(--ion-color-light);
}

.table_template > tbody > tr > td {
	padding: 4.8px;
}
.table_template > tbody > tr > td.orderer {
	padding: 4.8px;
	padding-left: 18.8px;
}
.table_template > tbody > ng-container > tr > td.action,
.table_template > tbody > tr > td.action {
	padding: 4.8px;
	width: 60px;
	text-align: center;
}
.table_template > tbody > tr:last-child {
	-webkit-box-shadow: 0 2px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 0px 0 rgba(0, 0, 0, 0.12);
	box-shadow: 0 2px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 0px 0 rgba(0, 0, 0, 0.12);
	border-radius: 0px 0px 4px 4px;
}
.table_template > tbody > tr:last-child > td:first-child {
	border-radius: 0px 0px 0px 4px;
}
.table_template > tbody > tr:last-child > td:last-child {
	border-radius: 0px 0px 4px 4px;
}

.table_template > thead > tr:first-child > th:first-child {
	border-radius: 4px 0px 0px 0px;
}
.table_template > thead > tr:first-child > th:last-child {
	border-radius: 0px 4px 0px 0px;
}
.table_template > thead > tr > th {
	background: var(--ion-color-primary);
	background: -moz-linear-gradient(top, var(--ion-color-primary) 0%, var(--ion-color-primary) 21%, var(--ion-color-primary) 100%);
	background: -webkit-linear-gradient(top, var(--ion-color-primary) 0%, var(--ion-color-primary) 21%, var(--ion-color-primary) 100%);
	background: linear-gradient(to bottom, var(--ion-color-primary) 0%, var(--ion-color-primary) 21%, var(--ion-color-primary) 100%);
}

.table_template > thead > tr > th > div > div > div > ion-icon {
	font-size: 0.8em;
}

.table_template > tbody > tr:nth-child(2n -1) {
	background-color: rgba(139, 139, 139, 0.082);
}

.table_template > tbody > tr {
	-webkit-box-shadow: -1px 2px 3px -1px rgba(0, 0, 0, 0.1);
	box-shadow: -1px 2px 3px -1px rgba(0, 0, 0, 0.1);
}

.table_template > tbody > tr:hover {
	-webkit-transition: background 0.3s;
	/* For Safari */
	transition: background 0.3s;
	/* For modern browsers */
	background-color: #5393d41f;
	/*cursor: pointer;*/
}

.table_template > tfoot {
	border-bottom: 0px;
}
body.scanner-active {
	--ion-background-color: transparent;
}
.table_template > thead > tr > th > div {
	float: left;
	margin-left: 5px;
}

.table_template > thead > tr > th > div > ion-icon:hover {
	cursor: pointer;
	color: var(--ion-color-primary);
}

.table_template > tfoot > tr > td > ion-grid > ion-row > ion-col:first-child {
	text-align: left;
}

.table_template > tfoot > tr > td > ion-grid > ion-row > ion-col:nth-child(2) {
	text-align: center;
}

.table_template > tfoot > tr > td > ion-grid > ion-row > ion-col:last-child {
	text-align: right;
}

.table_template > tfoot > tr > td > ion-grid > ion-row > ion-col {
	padding: 3px;
}

.table_template > tfoot > tr > td {
	font-size: 0.75rem;
	height: 2rem;
}

.table_template > tfoot ion-button {
	font-size: 0.8rem;
	padding: 4px 8px;
	height: 2rem;
	min-height: 2rem;
	line-height: 1.5rem;
}

.table_template > tfoot {
	padding: 5px 10px;
	margin: 0;
}

/* Ridurre le icone del footer (se ci sono) */
.table_template > tfoot > ion-icon {
	font-size: 1rem;
}

/* Ridurre eventuali colonne di testo */
.table_template > tfoot > tr > td {
	font-size: 0.75rem;
}

ion-content {
	--background: #f4f5f8;
}

.drawing-container {
	padding: 20px;
	background: white;
	margin: 10px;
	border-radius: 8px;

	canvas {
		border: 1px solid #ddd;
		border-radius: 4px;
		width: 100%;
	}
}

.controls {
	padding: 10px;

	.colors {
		display: flex;
		justify-content: space-around;
		padding: 10px;

		.color-btn {
			width: 30px;
			height: 30px;
			border-radius: 50%;
			border: 2px solid #ddd;

			&.selected {
				border-color: #3880ff;
				box-shadow: 0 0 0 2px rgba(56, 128, 255, 0.2);
			}
		}
	}
}

.description {
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

ion-badge {
	font-size: 10px;
	padding: 4px 8px;
}

// Responsive adjustments
@media (min-width: 768px) {
	ion-modal {
		--width: 600px;
		--max-width: 80%;
	}
}

// Custom animations
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

ion-item {
	animation: fadeIn 0.3s ease;
}

.app-header {
	ion-toolbar {
		--min-height: 56px;
		--padding-top: 4px;
		--padding-bottom: 6px;
		--padding-start: 8px;
		--padding-end: 8px;
	}

	.section-title {
		font-size: 18px;
		font-weight: 600;
		color: #f4f4f6;
	}
}

/* Avatar immagine profilo (data-URL): riusa dimensioni/bordo di .user-avatar/.mini-avatar */
.user-avatar.user-avatar--img,
.mini-avatar.mini-avatar--img {
	object-fit: cover;
	padding: 0;
}

/* User Avatar Styles */
.avatar-button {
	--padding-start: 8px;
	--padding-end: 8px;

	.user-avatar-wrapper {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.user-avatar {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		font-weight: bold;
		color: white;
		text-transform: uppercase;
		border: 2px solid rgba(255, 255, 255, 0.3);
		transition: all 0.3s ease;

		&:hover {
			transform: scale(1.05);
			border-color: rgba(255, 255, 255, 0.5);
		}
	}
}

/* Notification Button */
.notification-button {
	position: relative;

	.notification-badge {
		position: absolute;
		top: 4px;
		right: 4px;
		font-size: 10px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* Secondary User Info Toolbar */
.user-info-toolbar {
	--min-height: 48px;
	background: linear-gradient(180deg, var(--ion-color-primary-shade), var(--ion-color-primary));

	.user-info-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16px;
		width: 100%;

		ion-chip {
			--background: rgba(255, 255, 255, 0.2);
			--color: white;

			.mini-avatar {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 12px;
				font-weight: bold;
				color: white;
				border-radius: 50%;
			}
		}

		.user-role {
			font-size: 14px;
			opacity: 0.9;
		}
	}
}

/* Popover Wrapper Global Styles */
.user-menu-popover-wrapper {
	--width: 300px;
	--max-width: 90vw;
	--border-radius: 12px;
	--box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

	.popover-content {
		border-radius: 12px;
		overflow: hidden;
	}
}

/* Dark Mode Support */
body.dark {
	.app-header {
		ion-toolbar {
			--background: var(--ion-color-dark);
			--color: var(--ion-color-light);
		}
	}

	.user-menu-popover {
		--ion-background-color: var(--ion-color-dark);
		--ion-text-color: var(--ion-color-light);

		.user-header {
			background: linear-gradient(135deg, var(--ion-color-dark-tint), var(--ion-color-dark));
		}
	}
}

/* Responsive Design */
@media (max-width: 576px) {
	.app-header {
		.section-title {
			font-size: 18px;
		}

		.user-info-toolbar {
			display: none;
		}
	}
}

@media (min-width: 768px) {
	.app-header {
		ion-toolbar {
			--min-height: 64px;
		}

		.user-avatar {
			width: 40px;
			height: 40px;
			font-size: 16px;
		}
	}
}

.header-md {
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}

.kcs-inputtext {
	font-family: inherit;
	font-feature-settings: inherit;
	font-size: var(--kcs-font-size);
	/*min-width: 177px;*/
	color: var(--kcs-inputtext-color);
	background: var(--kcs-inputtext-background);
	padding-block: var(--kcs-inputtext-padding-y);
	padding-inline: var(--kcs-inputtext-padding-x);
	border: 1px solid var(--kcs-inputtext-border-color);
	transition: background var(--kcs-inputtext-transition-duration), color var(--kcs-inputtext-transition-duration), border-color var(--kcs-inputtext-transition-duration), outline-color var(--kcs-inputtext-transition-duration), box-shadow var(--kcs-inputtext-transition-duration);
	appearance: none;
	border-radius: var(--kcs-inputtext-border-radius);
	outline-color: transparent;
	box-shadow: var(--kcs-inputtext-shadow);
}

.kcs-inputtext:enabled:hover {
	border-color: var(--kcs-inputtext-hover-border-color);
}

.kcs-inputtext:enabled:focus {
	border-color: var(--kcs-inputtext-focus-border-color);
	box-shadow: var(--kcs-inputtext-focus-ring-shadow);
	outline: var(--kcs-inputtext-focus-ring-width) var(--kcs-inputtext-focus-ring-style) var(--kcs-inputtext-focus-ring-color);
	outline-offset: var(--kcs-inputtext-focus-ring-offset);
}

.kcs-inputtext-fluid {
	width: 100%;
}

ion-input {
	--border-radius: 12px;
}

@media (min-width: 768px) {
	ion-modal {
		--width: 100% !important;
		--height: 100% !important;
		--border-radius: 0 !important;
		--backdrop-opacity: 1 !important;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		--max-width: 100% !important;
	}
}

ion-searchbar {
	--box-shadow: none !important;
}

.searchbar-input-container {
	border: 1px solid #5368786b;
}

ion-icon.table-after-border-aqua {
	color: #00f2ff;
}
.table-after-border-aqua {
	--background: #00f2ff;
	--color: #333333;
}

ion-icon.table-after-border-blue {
	color: #007bff;
}
.table-after-border-blue {
	--background: #007bff;
	--color: white;
}

ion-icon.table-after-border-gold {
	color: #ffd700;
}
.table-after-border-gold {
	--background: #ffd700;
	--color: #333333;
}

ion-icon.table-after-border-blue {
	color: #007bff;
}
.table-after-border-blue {
	--background: #007bff;
	--color: white;
}

ion-icon.table-after-border-indianred {
	color: #cd5c5c;
}
.table-after-border-indianred {
	--background: #cd5c5c;
	--color: white;
}

ion-icon.table-after-border-green {
	color: #00ff00;
}
.table-after-border-green {
	--background: #00ff00;
	--color: #333333;
}

ion-icon.table-after-border-purple {
	color: #800080;
}
.table-after-border-purple {
	--background: #800080;
	--color: white;
}

ion-icon.table-after-border-darkseagreen {
	color: #8fbc8f;
}
.table-after-border-darkseagreen {
	--background: #8fbc8f;
	--color: #333333;
}

ion-icon.table-after-border-green {
	color: #00ff00;
}
.table-after-border-green {
	--background: #00ff00;
	--color: #333333;
}

ion-icon.table-after-border-gray {
	color: #808080;
}
.table-after-border-gray {
	--background: #808080;
}

ion-icon.table-after-border-red {
	color: #ff0000;
}
.table-after-border-red {
	--background: #ff0000;
	--color: white;
}

button.calendar-day.calendar-day-active {
	color: white !important;
}

.blink_text {
	animation: 1s blinker linear infinite;
	-webkit-animation: 1s blinker linear infinite;
	-moz-animation: 1s blinker linear infinite;
	font-size: 18px;
	font-weight: bold;
	margin: 2px;
}

@-moz-keyframes blinker {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes blinker {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes blinker {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

ion-datetime::part(calendar-day today) {
	border: none !important;
	color: inherit !important;
}

ion-item:has(p-multiselect) {
	z-index: 3;
	overflow: visible;
}

.mxw-100 {
	max-width: calc(100vw - 32px);
}

/* === Sfondi card/categorie: estratti da service-cards.component.scss per uso GLOBALE (tile categorie home) === */
.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%;
	}
}
// ============================================================
// ONLINESHOP — shared product UI (home, prodotti, ordini, carrello)
// ============================================================

// Section heading above a product row (es. "CONFETTURE")
.os-section-title {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.4px;
	margin: 0;
	color: var(--ion-color-dark, #1c1c1e);
}

// Horizontal product scroller
.os-scroller {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding: 4px 16px 12px;
	scrollbar-width: none;

	&::-webkit-scrollbar { display: none; }
}

// Product card (horizontal scroller — home, ordini)
.os-card {
	width: 150px;
	flex: 0 0 auto;
	margin: 0;
	border-radius: 16px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;

	&:active { transform: scale(0.97); }

	ion-card-header { padding: 8px 10px 2px; }
	ion-card-content { padding: 2px 10px 10px; }
}

.os-card-title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ion-color-dark, #1c1c1e);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.os-card-subtitle {
	font-size: 10px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: var(--ion-color-medium);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.os-price {
	font-size: 14px;
	font-weight: 800;
	color: var(--ion-color-primary);
}

// Thumbnail for horizontal cards — ALWAYS visible (fixes hidden gallery-image)
.os-thumb {
	width: 100%;
	height: 96px;
	object-fit: cover;
	display: block;
	background: var(--ion-color-light, #f4f5f8);
	border-radius: 16px 16px 0 0;
}

// Square thumbnail for list rows (prodotti, carrello)
.os-thumb--sm {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border-radius: 14px;
	background: var(--ion-color-light, #f4f5f8);
}

// Product list row (prodotti)
.os-list-card {
	margin: 10px 12px;
	border-radius: 16px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	background: var(--ion-item-background, #fff);
	cursor: pointer;
	transition: transform 0.15s ease;

	&:active { transform: scale(0.99); }

}

/* ═══ RECENSIONI: stelle condivise (review-cta, detail, profilo, turismo) ═══ */
.review-stars {
	display: flex;
	align-items: center;
	gap: 2px;

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

	.review-overall {
		margin-left: 8px;
		font-weight: 700;
		color: var(--ion-text-color, #1e293b);
	}
}

.review-stars-input ion-icon {
	font-size: 28px;
	cursor: pointer;
}
