/* =========================================================================
   Promozioni Attive — stile frontend
   Stessa grafica del documento "Briefing mattutino" di partenza (card con
   accento colore a rotazione, badge, popup di dettaglio), con classi
   proprie (prefisso pa-) per non entrare in conflitto con il tema.
   ========================================================================= */

.pa-wrap {
	/* Palette e font allineati alla grafica del sito — valori letti dalle
	   variabili CSS reali di svetix.ch e dal componente selettore
	   lingua/card del sito, non stimati da uno screenshot: rosso corallo
	   come colore attivo/di richiamo, testo quasi nero a tinta verde-acqua
	   (non blu) invece del nero puro, sfondo pagina verde-acqua chiarissimo,
	   bordi e ombre con la stessa leggerissima tinta. Questi sono anche i
	   valori del tema "Corallo" (predefinito) in
	   PA_Helpers::theme_definitions(): restano qui come riserva, nel caso
	   l'inline style con il tema scelto non arrivasse a caricarsi. */
	--pa-border: #daecec;
	--pa-surface: #ffffff;
	--pa-plane: #e9f6f6;
	--pa-text: #0a1616;
	--pa-text-secondary: #243636;
	--pa-text-muted: #4b6666;
	--pa-brand: #d63131;
	/* Colore dell'anello di focus da tastiera sui pulsanti lingua e sui filtri:
	   di norma il colore "accento" del sito (un verde-acqua scuro, ben
	   distinto dal brand rosso e comunque in forte contrasto sullo sfondo
	   chiaro), ma un tema può ridefinirlo (es. nei temi scuri diventa il
	   colore del testo, più leggibile di un accento scuro su una superficie
	   anch'essa scura) — vedi PA_Helpers::theme_definitions() e il fallback
	   a --pa-brand più sotto in .pa-lang-btn:focus-visible. */
	--pa-focus-ring: #155e75;
	--pa-shadow-soft: 0 1px 2px rgba(10, 38, 38, 0.05), 0 8px 24px rgba(10, 38, 38, 0.07);
	font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
	max-width: 100%;
	box-sizing: border-box;
}
.pa-wrap *, .pa-wrap *::before, .pa-wrap *::after,
.pa-modal-overlay *, .pa-modal-overlay *::before, .pa-modal-overlay *::after {
	box-sizing: border-box;
}

.pa-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 16px;
}
.pa-header-text {
	flex: 1 1 220px;
	min-width: 0;
}
.pa-header h2.pa-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 4px;
	color: var(--pa-text);
}
.pa-hint {
	margin: 2px 0 16px;
	font-size: 13px;
	color: var(--pa-text-muted);
}

/* ---------- Selettore lingua ----------
   Tre stili, scelti da Impostazioni (PA_Helpers::lang_switch_style_choices()):
   "codici" (predefinito) = pillola con sigla (IT, EN…), come il selettore
   già in uso altrove sul sito; "bandiere" = solo bandierina; "entrambi" =
   bandiera + sigla insieme. Il markup dei pulsanti è sempre lo stesso
   (bandiera e sigla, uno per lingua — vedi PA_Shortcode::render()): a
   decidere cosa si vede è solo il CSS, tramite la classe pa-lang-style-*
   sul contenitore. La posizione (destra/sinistra/sopra, da Impostazioni)
   è invece una classe pa-lang-pos-* su .pa-header, più sotto. */
.pa-lang-switch {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: none;
	background: var(--pa-surface);
	border: 1px solid var(--pa-border);
	border-radius: 999px;
	padding: 4px;
	box-shadow: var(--pa-shadow-soft);
}
.pa-lang-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 7px 12px;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: var(--pa-text-muted);
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.pa-lang-flag {
	font-size: 15px;
	line-height: 1;
}
.pa-lang-code {
	text-transform: uppercase;
}
.pa-lang-btn:hover {
	color: var(--pa-text);
}
.pa-lang-btn:focus-visible {
	outline: 2px solid var(--pa-focus-ring, var(--pa-brand));
	outline-offset: 1px;
}
.pa-lang-btn[aria-pressed="true"] {
	background: var(--pa-brand);
	color: #ffffff;
}
.pa-lang-btn[aria-pressed="true"]:hover {
	color: #ffffff;
}

/* Stile "codici" (predefinito): solo sigla, bandiera nascosta. */
.pa-lang-style-codici .pa-lang-flag { display: none; }
/* Stile "bandiere": solo bandiera, sigla nascosta (un po' più grande per
   restare leggibile da sola). */
.pa-lang-style-bandiere .pa-lang-code { display: none; }
.pa-lang-style-bandiere .pa-lang-flag { font-size: 17px; }
/* Stile "entrambi": nessuna regola in più — bandiera e sigla restano
   entrambe visibili, come nel markup di base qui sopra. */

/* ---------- Posizione del selettore lingua ---------- */
/* "destra" (predefinito) non richiede regole: .pa-header è già
   display:flex + justify-content:space-between con .pa-lang-switch come
   secondo elemento, quindi va già a destra del titolo/testo di aiuto. */
.pa-header.pa-lang-pos-sinistra .pa-lang-switch {
	order: -1;
}
.pa-header.pa-lang-pos-sopra {
	flex-direction: column;
	align-items: stretch;
}
.pa-header.pa-lang-pos-sopra .pa-lang-switch {
	order: -1;
	align-self: center;
	margin-bottom: 6px;
}
/* .pa-header-text ha un flex-basis di 220px pensato per la riga orizzontale
   di default: in colonna diventerebbe un'altezza minima, lasciando uno
   spazio vuoto sotto titolo/testo breve. In verticale basta il contenuto. */
.pa-header.pa-lang-pos-sopra .pa-header-text {
	flex: 1 1 auto;
}

/* ---------- Filtri ---------- */
/* Sempre su un'unica riga, su qualunque dispositivo: se non c'è spazio per
   tutti e tre, la barra scorre in orizzontale invece di andare a capo o
   impilarsi (più leggibile di 3 select a piena larghezza una sotto l'altra). */
.pa-filters {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	margin: 0 0 18px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 3px;
}
.pa-filter {
	font: inherit;
	font-size: 13.5px;
	padding: 9px 30px 9px 12px;
	border: 1px solid var(--pa-border);
	border-radius: 12px;
	background-color: var(--pa-surface);
	color: var(--pa-text);
	cursor: pointer;
	/* !important: molti temi impongono "width:100%" (o simile) ai <select> per
	   coerenza/accessibilità dei form. Senza queste regole, quel width vince
	   sul flex-basis:auto qui sotto e ogni filtro si allarga a piena larghezza
	   invece di restare compatto e affiancato agli altri. */
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 180px !important;
	max-width: 100% !important;
}
.pa-filter:focus-visible {
	outline: 2px solid var(--pa-focus-ring, var(--pa-brand));
	outline-offset: 1px;
}

/* ---------- Griglia e card ---------- */
/* Il numero di colonne su schermi larghi si sceglie da Impostazioni (o per
   singolo shortcode con l'attributo "colonne") ed arriva qui come variabile
   CSS per-istanza --pa-grid-columns (impostata inline su .pa-wrap, come
   --pa-accent sulle card) — vedi PA_Shortcode::render(). Sugli schermi più
   stretti min() abbassa comunque il tetto massimo di colonne (mai oltre 3 a
   tablet, oltre 2 a schermi piccoli, sempre 1 su cellulare): resta sempre
   leggibile su qualunque dispositivo anche se in Impostazioni è scelto un
   numero alto, senza bisogno di calcolare lato server un valore per ogni
   breakpoint. */
.pa-grid {
	display: grid;
	grid-template-columns: repeat(var(--pa-grid-columns, 3), minmax(0, 1fr));
	gap: 18px;
}
@media (max-width: 1024px) {
	.pa-grid {
		grid-template-columns: repeat(min(var(--pa-grid-columns, 3), 3), minmax(0, 1fr));
	}
}
@media (max-width: 720px) {
	.pa-grid {
		grid-template-columns: repeat(min(var(--pa-grid-columns, 3), 2), minmax(0, 1fr));
	}
}
@media (max-width: 480px) {
	.pa-grid {
		grid-template-columns: 1fr;
	}
}
.pa-card {
	position: relative;
	background: var(--pa-surface);
	border: 1px solid var(--pa-border);
	border-left: 5px solid var(--pa-accent, #2a78d6);
	border-radius: 16px;
	padding: 18px 18px 16px;
	cursor: pointer;
	box-shadow: var(--pa-shadow-soft);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pa-card:hover,
.pa-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(38, 44, 71, 0.18);
	outline: none;
}
.pa-card:focus-visible {
	box-shadow: 0 10px 28px rgba(38, 44, 71, 0.18), 0 0 0 2px var(--pa-accent, #2a78d6);
}
.pa-card[hidden],
.pa-card.pa-is-hidden {
	display: none !important;
}

.pa-card-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px;
}
.pa-card-title {
	font-family: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
	font-size: 16.5px;
	font-weight: 700;
	margin: 0;
	color: var(--pa-text);
	text-decoration: underline;
	text-decoration-color: transparent;
	transition: text-decoration-color 0.15s ease;
}
.pa-card-icon {
	display: inline-block;
	margin-right: 2px;
}
.pa-card-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}
.pa-card-cat {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	font-size: 11.5px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(38, 44, 71, 0.05);
	color: var(--pa-text-secondary);
}
.pa-card:hover .pa-card-title,
.pa-card:focus-visible .pa-card-title {
	text-decoration-color: var(--pa-accent, #2a78d6);
}
.pa-card-image {
	width: 100%;
	max-height: 160px;
	object-fit: cover;
	border-radius: 12px;
	margin-top: 10px;
	display: block;
	border: 1px solid var(--pa-border);
}
.pa-card-teaser {
	margin: 10px 0 0;
	font-size: 13.5px;
	color: var(--pa-text-secondary);
	line-height: 1.45;
}
.pa-card-validity {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--pa-text-muted);
}
.pa-card-more {
	margin-top: 12px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--pa-accent, #2a78d6);
}

/* ---------- Layout "Lista" ---------- */
.pa-layout-list .pa-grid {
	grid-template-columns: 1fr;
	gap: 10px;
}
.pa-layout-list .pa-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 20px;
	row-gap: 6px;
	padding: 14px 20px;
}
.pa-layout-list .pa-card-top {
	flex: 1 1 240px;
}
.pa-layout-list .pa-card-image {
	display: none;
}
.pa-layout-list .pa-card-cats {
	flex: 0 1 auto;
	margin-top: 0;
}
.pa-layout-list .pa-card-teaser {
	flex: 2 1 280px;
	margin-top: 0;
}
.pa-layout-list .pa-card-validity {
	margin-top: 0;
	flex: none;
}
.pa-layout-list .pa-card-more {
	margin-top: 0;
	flex: none;
}

/* ---------- Badge ---------- */
.pa-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	font-size: 11.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 4px 10px;
	border-radius: 999px;
	flex: none;
}
.pa-badge-aqua   { background: rgba(27, 175, 122, 0.14); color: #0d7a53; }
.pa-badge-warn   { background: rgba(250, 178, 25, 0.16); color: #92610a; }
.pa-badge-violet { background: rgba(74, 58, 167, 0.12); color: #4a3aa7; }
.pa-badge-blue   { background: rgba(42, 120, 214, 0.14); color: #1b5490; }
.pa-badge-red    { background: rgba(227, 73, 72, 0.14); color: #a72b2b; }
.pa-badge-good   { background: rgba(12, 163, 12, 0.12); color: #0a6b0a; }

/* ---------- Stato vuoto ---------- */
.pa-empty {
	padding: 30px 20px;
	text-align: center;
	color: var(--pa-text-muted);
	font-size: 14px;
	border: 1px dashed var(--pa-border);
	border-radius: 14px;
}

/* ---------- Popup di dettaglio ---------- */
.pa-modal-overlay {
	/* Il popup è un fratello di .pa-wrap nel markup (stampato una sola volta
	   per pagina, non dentro ogni istanza della vetrina — vedi
	   maybe_render_modal_shell()), quindi non eredita le variabili di
	   palette/font impostate lì: le stesse variabili sono ridichiarate qui. */
	--pa-border: #daecec;
	--pa-surface: #ffffff;
	--pa-plane: #e9f6f6;
	--pa-text: #0a1616;
	--pa-text-secondary: #243636;
	--pa-text-muted: #4b6666;
	--pa-brand: #d63131;
	--pa-focus-ring: #155e75;
	--pa-shadow-soft: 0 1px 2px rgba(10, 38, 38, 0.05), 0 8px 24px rgba(10, 38, 38, 0.07);
	font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(10, 18, 32, 0.55);
	backdrop-filter: blur(2px);
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 100000;
}
.pa-modal-overlay.pa-active {
	display: flex;
}
.pa-modal {
	background: var(--pa-surface);
	border-radius: 20px;
	max-width: 1000px;
	width: 100%;
	max-height: calc(100vh - 40px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 24px 60px rgba(10, 18, 32, 0.35);
	position: relative;
	transform: scale(0.94);
	opacity: 0;
	transition: transform 0.18s ease, opacity 0.18s ease;
	border-top: 6px solid var(--pa-accent, #2a78d6);
	color: var(--pa-text);
	text-align: left;
}
.pa-modal-overlay.pa-active .pa-modal {
	transform: scale(1);
	opacity: 1;
}
/* Il contenuto scorre qui dentro; il pulsante di chiusura resta fuori da
   questo contenitore (fisso nell'angolo del popup) così è sempre visibile
   e cliccabile anche con promozioni lunghe che richiedono lo scroll. */
.pa-modal-scroll {
	overflow-y: auto;
	overflow-x: hidden;
	padding: 34px 40px 32px;
}
.pa-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: var(--pa-plane);
	color: var(--pa-text-secondary);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	z-index: 3;
	box-shadow: 0 1px 4px rgba(38, 44, 71, 0.15);
}
.pa-modal-close:hover {
	background: rgba(38, 44, 71, 0.12);
}
.pa-modal-badge {
	margin-bottom: 8px;
	min-height: 22px;
}
.pa-modal-title {
	margin: 0 0 10px;
	font-family: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
	font-size: 24px;
	font-weight: 700;
	padding-right: 24px;
	line-height: 1.25;
}

/* Ogni voce è una sezione chiaramente separata (divisore + più respiro),
   per restare leggibile ora che il popup è molto più largo. */
.pa-modal-field {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid rgba(38, 44, 71, 0.08);
}
.pa-modal-field:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}
.pa-modal-label {
	display: block;
	font-size: 12.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--pa-text-muted);
}
.pa-modal-value {
	display: block;
	margin-top: 6px;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--pa-text);
	line-height: 1.55;
	white-space: pre-wrap;
}

/* Voci in HTML ricco: niente pre-wrap (la formattazione arriva già dai tag),
   con stili di base per testo, liste, link, immagini e — soprattutto —
   tabelle incollate da Word/Excel/Google Sheets. */
.pa-modal-value-html {
	margin-top: 6px;
	font-size: 15px;
	font-weight: 400;
	color: var(--pa-text);
	line-height: 1.6;
}
.pa-modal-value-html > *:first-child { margin-top: 0; }
.pa-modal-value-html > *:last-child { margin-bottom: 0; }
.pa-modal-value-html p { margin: 0 0 12px; }
.pa-modal-value-html ul, .pa-modal-value-html ol { margin: 0 0 12px 22px; padding: 0; }
.pa-modal-value-html li { margin-bottom: 4px; }
.pa-modal-value-html a { color: var(--pa-accent, #2a78d6); }
.pa-modal-value-html strong, .pa-modal-value-html b { font-weight: 800; }
.pa-modal-value-html blockquote {
	margin: 0 0 12px;
	padding: 8px 14px;
	border-left: 3px solid var(--pa-accent, #2a78d6);
	background: var(--pa-plane);
	font-style: italic;
	color: var(--pa-text-secondary);
}
.pa-modal-value-html img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	margin: 4px 0 12px;
	display: block;
}
.pa-modal-value-html table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
	border-collapse: collapse;
	margin: 4px 0 12px;
	font-size: 13.5px;
	-webkit-overflow-scrolling: touch;
}
.pa-modal-value-html th,
.pa-modal-value-html td {
	border: 1px solid rgba(38, 44, 71, 0.14);
	padding: 7px 12px;
	text-align: left;
	vertical-align: top;
}
.pa-modal-value-html th {
	background: var(--pa-plane);
	font-weight: 800;
	white-space: nowrap;
}
.pa-modal-value-html tbody tr:nth-child(odd) {
	background: rgba(38, 44, 71, 0.02);
}

.pa-modal-image img {
	width: 100%;
	max-height: 340px;
	object-fit: cover;
	border-radius: 14px;
	display: block;
}

.pa-modal-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 6px;
}
.pa-modal-gallery-img img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid rgba(38, 44, 71, 0.1);
	display: block;
}
.pa-modal-gallery a.pa-file {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	border-radius: 10px;
	border: 1px dashed rgba(38, 44, 71, 0.2);
	font-size: 11px;
	text-align: center;
	color: var(--pa-text-secondary);
	text-decoration: none;
	padding: 4px;
}

body.pa-modal-open {
	overflow: hidden;
}

@media (max-width: 720px) {
	.pa-modal-scroll {
		padding: 26px 24px 24px;
	}
	.pa-modal-title {
		font-size: 21px;
	}
}

@media (max-width: 480px) {
	.pa-modal-overlay {
		padding: 10px;
	}
	.pa-modal {
		max-height: calc(100vh - 20px);
	}
	.pa-modal-scroll {
		padding: 22px 18px 18px;
	}
}