/* Quotazioni Pistoia Oro — calcolatore e tabella.
   Usa i token del tema Impreza (colori, ombra, raggi, font): nessun colore/stile inventato.
   --color-content-primary, --color-content-primary-faded, --color-content-bg, --box-shadow
   sono variabili emesse dal tema; gli input ereditano lo stile nativo del tema. */

.pq-calc {
	/* Accento per metallo: oro = arancio/oro del tema, argento = grigio metallo.
	   Tutto ciò che è "colore vivo" nella card usa questi due token, così oro e
	   argento si distinguono a colpo d'occhio restando nello stile del sito. */
	--pq-accent: var(--color-content-primary, #ff8f19);
	--pq-accent-soft: var(--color-content-primary-faded, rgba(255, 143, 25, .15));
	background: var(--color-content-bg, #fff);
	border-radius: 1rem;
	padding: clamp(1.1rem, 2.5vw, 1.6rem);
	box-shadow: var(--box-shadow, 0 5px 15px rgba(0, 0, 0, .15));
	max-width: 460px;
	margin: 0 auto;
}
.pq-calc--silver {
	--pq-accent: #8a9099;                     /* argento: grigio metallo */
	--pq-accent-soft: rgba(138, 144, 153, .16);
}

/* Altezze uguali: la riga del tema centra le colonne (valign_middle) e le due
   card hanno contenuto diverso, quindi risultavano di altezza diversa e sfalsate.
   Forzo lo stretch delle due colonne del calcolatore e faccio riempire la card. */
.g-cols:has(.pq-calc) { align-items: stretch; }
.wpb_column:has(.pq-calc),
.wpb_column:has(.pq-calc) > .vc_column-inner,
.wpb_column:has(.pq-calc) > .vc_column-inner > .w-html { height: 100%; }
.pq-calc { height: 100%; }

.pq-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	flex-wrap: wrap;
	padding-bottom: .8rem;
	border-bottom: 2px solid var(--pq-accent);
	margin-bottom: 1rem;
}
.pq-head-title { margin: 0; color: var(--pq-accent); }
.pq-badge {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--pq-accent);
	background: var(--pq-accent-soft);
	padding: .3rem .6rem;
	border-radius: .3rem;
	white-space: nowrap;
}
.pq-lead { opacity: .85; margin: 0 0 1rem; }

.pq-row {
	display: grid;
	grid-template-columns: 1fr 7.5rem;
	align-items: center;
	gap: .5rem 1rem;
	padding: .7rem 0;
	border-top: 1px solid rgba(0, 0, 0, .06);
}
.pq-row:first-of-type { border-top: 0; }
.pq-row-info { display: flex; flex-direction: column; gap: .15rem; margin: 0; cursor: text; }
.pq-label { font-weight: 700; line-height: 1.2; }
.pq-range { font-size: .85em; opacity: .7; font-variant-numeric: tabular-nums; }

/* L'input eredita bordo, raggio e tipografia del tema (input:not([type=submit])).
   Aggiungo solo lo spazio per l'unità "g" e l'allineamento a destra. */
.pq-field { position: relative; display: block; }
.pq-field input { width: 100%; padding-right: 1.9rem; text-align: right; font-variant-numeric: tabular-nums; margin: 0; -moz-appearance: textfield; }
.pq-field input::-webkit-outer-spin-button,
.pq-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pq-unit {
	position: absolute;
	right: .7rem;
	top: 50%;
	transform: translateY(-50%);
	font-weight: 600;
	opacity: .55;
	pointer-events: none;
}
.pq-row.is-filled .pq-label { color: var(--pq-accent); }

.pq-result {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .4rem 1rem;
	flex-wrap: wrap;
	margin-top: 1rem;
	padding: .85rem 1.1rem;
	border-radius: .3rem;
	background: var(--pq-accent-soft);
}
.pq-result-label {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	opacity: .75;
}
.pq-result-val {
	font-size: 1.15em;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
	color: var(--pq-accent);
}
.pq-result:not(.has-value) .pq-result-val { font-weight: 600; opacity: .6; font-size: 1em; }

.pq-note { font-size: .82em; opacity: .65; margin: .8rem 0 0; }
.pq-empty { font-weight: 600; margin: .5rem 0 0; }

@media (max-width: 420px) {
	.pq-row { grid-template-columns: 1fr; }
	.pq-field input { text-align: left; }
}

/* Tabella quotazioni (shortcode [quotazioni_metalli]) */
.pq-table-wrap { overflow-x: auto; }
.pq-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pq-table caption { caption-side: top; text-align: left; font-size: .9em; opacity: .75; padding-bottom: .5rem; }
.pq-table th, .pq-table td { padding: .65rem .75rem; border-bottom: 1px solid rgba(0, 0, 0, .1); text-align: left; }
.pq-table td { white-space: nowrap; }
.pq-table thead th { font-size: .85em; text-transform: uppercase; letter-spacing: .04em; }

/* Ticker "Quotazione in tempo reale": prezzo oro puro €/g + mini-grafico.
   Usa currentColor, così sta bene anche sulla fascia scura della home. */
.pq-ticker { max-width: 560px; margin: 0 auto; text-align: center; }
.pq-ticker-head { display: flex; align-items: baseline; justify-content: center; gap: .4rem 1rem; flex-wrap: wrap; }
.pq-ticker-label { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; opacity: .85; }
.pq-ticker-badge { font-size: .8rem; opacity: .72; font-variant-numeric: tabular-nums; }
.pq-ticker-value { font-size: clamp(2.2rem, 7vw, 3.4rem); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; margin: .3rem 0 .7rem; }
.pq-spark { width: 100%; height: clamp(64px, 14vw, 120px); display: block; opacity: .92; }