.thread-body, 
.thread-body h2, 
.thread-body .thread-time, 
.thread-body .thread-type, 
.thread-body .wpsc-ticket-thread-expander {
    color: #ffffff !important;
}

/* Per rendere bianche anche le icone SVG se necessario */
.thread-body .actions svg {
    fill: #ffffff;
}

/**
 * Intrattenimento — stili sezione shortcode [ardesia_intrattenimento]
 *
 * Uso: Aspetto → Personalizza → CSS aggiuntivo (incolla tutto sotto questa riga)
 * oppure carica questo file nel child theme e enqueue da functions.php.
 *
 * Se carichi SOLO da qui, nel file snippet-intrattenimento.php puoi commentare
 * add_action( 'wp_enqueue_scripts', 'ardesia_intrattenimento_enqueue', 99999 );
 * per evitare di caricare lo stesso CSS due volte.
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;600;700&family=Sora:wght@500;600&display=swap');

body #ardesia-intrattenimento {
	--ent-radius: 20px;
	--ent-radius-sm: 16px;
	--ent-border: rgba(232, 121, 249, 0.45);
	--ent-text: #faf5ff;
	--ent-muted: rgba(252, 245, 255, 0.88);
	--ent-accent: #f472ff;
	--ent-gold: #fbbf24;
	--ent-gold-soft: #fde68a;
	--ent-gold-deep: #d97706;
	isolation: isolate;
	font-family: "Outfit", system-ui, sans-serif !important;
	font-size: 1.18rem !important;
	line-height: 1.55 !important;
	color: var(--ent-text) !important;
	max-width: 1120px;
	margin: 0 auto 4rem !important;
	padding: 1.5rem 1.15rem 2rem !important;
	box-sizing: border-box !important;
	background: radial-gradient(120% 85% at 50% -10%, rgba(251, 191, 36, 0.12) 0%, transparent 45%),
		radial-gradient(120% 80% at 50% 0%, rgba(88, 28, 135, 0.35) 0%, transparent 55%),
		linear-gradient(180deg, #0a0512 0%, #12081f 40%, #0a0512 100%) !important;
	border: 1px solid rgba(251, 191, 36, 0.22) !important;
	border-radius: var(--ent-radius) !important;
	box-shadow:
		0 0 0 1px rgba(253, 230, 138, 0.1) inset,
		0 0 0 1px rgba(168, 85, 247, 0.12) inset,
		0 32px 80px rgba(0, 0, 0, 0.45) !important;
}

body #ardesia-intrattenimento *,
body #ardesia-intrattenimento *::before,
body #ardesia-intrattenimento *::after {
	box-sizing: border-box !important;
}

body #ardesia-intrattenimento .ardesia-ent-hero {
	position: relative !important;
	border-radius: var(--ent-radius-sm) !important;
	padding: clamp(2.2rem, 5vw, 3.6rem) clamp(1.25rem, 3vw, 2.5rem) !important;
	overflow: hidden !important;
	margin: 0 0 1.75rem 0 !important;
	background: linear-gradient(135deg, #1e0b36 0%, #4c1d95 42%, #6d28d9 72%, #4c1d4f 100%) !important;
	border: 2px solid rgba(251, 191, 36, 0.28) !important;
	box-shadow:
		0 0 0 1px rgba(253, 230, 138, 0.12) inset,
		0 20px 60px rgba(124, 58, 237, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body #ardesia-intrattenimento .ardesia-ent-hero__glow {
	position: absolute !important;
	inset: -45% !important;
	background: radial-gradient(circle at 50% 0%, rgba(251, 191, 36, 0.22), transparent 38%),
		radial-gradient(circle at 25% 25%, rgba(168, 85, 247, 0.55), transparent 42%),
		radial-gradient(circle at 85% 15%, rgba(244, 114, 182, 0.4), transparent 38%),
		radial-gradient(circle at 50% 100%, rgba(99, 102, 241, 0.35), transparent 48%) !important;
	opacity: 0.95 !important;
	pointer-events: none !important;
}

body #ardesia-intrattenimento .ardesia-ent-hero__inner {
	position: relative !important;
	z-index: 2 !important;
	text-align: center !important;
	max-width: 52rem !important;
	margin: 0 auto !important;
}

body #ardesia-intrattenimento .ardesia-ent-eyebrow {
	font-family: "Sora", system-ui, sans-serif !important;
	font-size: 0.94rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	color: #fef3c7 !important;
	margin: 0 0 0.65rem !important;
	padding: 0.4rem 0.85rem !important;
	display: inline-block !important;
	border-radius: 999px !important;
	background: rgba(0, 0, 0, 0.3) !important;
	border: 1px solid rgba(251, 191, 36, 0.45) !important;
	box-shadow: 0 0 20px rgba(251, 191, 36, 0.12) !important;
}

body #ardesia-intrattenimento .ardesia-ent-hero__title {
	font-family: "Sora", system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-size: clamp(2.4rem, 5.8vw, 3.28rem) !important;
	line-height: 1.08 !important;
	margin: 0 0 0.75rem !important;
	letter-spacing: -0.03em !important;
	color: #fffef8 !important;
	text-shadow:
		0 0 32px rgba(251, 191, 36, 0.35),
		0 0 48px rgba(232, 121, 249, 0.5),
		0 4px 28px rgba(0, 0, 0, 0.4) !important;
}

body #ardesia-intrattenimento .ardesia-ent-hero__lead {
	margin: 0 0 1.5rem !important;
	font-size: clamp(1.18rem, 2.65vw, 1.36rem) !important;
	font-weight: 500 !important;
	color: rgba(255, 255, 255, 0.92) !important;
	line-height: 1.58 !important;
}

body #ardesia-intrattenimento .ardesia-ent-hero__lead strong {
	color: #fde68a !important;
	font-weight: 700 !important;
	text-shadow: 0 0 18px rgba(251, 191, 36, 0.35) !important;
}

body #ardesia-intrattenimento .ardesia-ent-hero__actions {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.85rem !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
}

body #ardesia-intrattenimento .ardesia-ent-hero__actions-row {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.65rem !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
}

body #ardesia-intrattenimento .ardesia-ent-hero__actions-row--secondary {
	margin-top: 0.1rem !important;
}

body #ardesia-intrattenimento a.ardesia-ent-btn--nav,
body #ardesia-intrattenimento .ardesia-ent-btn--nav {
	padding: 0.78rem 1.25rem !important;
	min-height: 46px !important;
	font-size: 1rem !important;
}

body #ardesia-intrattenimento a.ardesia-ent-btn,
body #ardesia-intrattenimento .ardesia-ent-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.4rem !important;
	padding: 0.92rem 1.75rem !important;
	min-height: 50px !important;
	border-radius: 999px !important;
	font-family: "Sora", system-ui, sans-serif !important;
	font-size: 1.12rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	border-style: solid !important;
	border-width: 2px !important;
	cursor: pointer !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

body #ardesia-intrattenimento a.ardesia-ent-btn--primary,
body #ardesia-intrattenimento .ardesia-ent-btn--primary {
	background: linear-gradient(120deg, #7c3aed, #c026d3 42%, #db2777 72%, #f59e0b) !important;
	border-color: rgba(253, 230, 138, 0.45) !important;
	color: #ffffff !important;
	box-shadow:
		0 0 0 1px rgba(251, 191, 36, 0.25) inset,
		0 12px 40px rgba(147, 51, 234, 0.45) !important;
}

body #ardesia-intrattenimento a.ardesia-ent-btn--primary:hover,
body #ardesia-intrattenimento .ardesia-ent-btn--primary:hover {
	transform: translateY(-2px) !important;
	color: #ffffff !important;
	box-shadow: 0 16px 48px rgba(219, 39, 119, 0.5) !important;
}

body #ardesia-intrattenimento a.ardesia-ent-btn--ghost,
body #ardesia-intrattenimento .ardesia-ent-btn--ghost {
	background: rgba(255, 255, 255, 0.08) !important;
	color: #fffbeb !important;
	border-color: rgba(251, 191, 36, 0.4) !important;
	backdrop-filter: blur(12px) !important;
}

body #ardesia-intrattenimento a.ardesia-ent-btn--ghost:hover,
body #ardesia-intrattenimento .ardesia-ent-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.16) !important;
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.55) !important;
}

body #ardesia-intrattenimento a.ardesia-ent-btn--block,
body #ardesia-intrattenimento .ardesia-ent-btn--block {
	width: 100% !important;
	margin-top: 0.65rem !important;
}

body #ardesia-intrattenimento .ardesia-ent-bento {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 1.15rem !important;
	margin: 0 0 2rem 0 !important;
}

@media (max-width: 900px) {
	body #ardesia-intrattenimento .ardesia-ent-bento {
		grid-template-columns: 1fr !important;
	}
}

body #ardesia-intrattenimento .ardesia-ent-card {
	background: linear-gradient(165deg, rgba(45, 27, 78, 0.95) 0%, rgba(30, 15, 52, 0.98) 100%) !important;
	border: 2px solid rgba(251, 191, 36, 0.22) !important;
	border-radius: var(--ent-radius-sm) !important;
	padding: 1.5rem 1.45rem 1.45rem !important;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
	position: relative !important;
	overflow: hidden !important;
}

body #ardesia-intrattenimento .ardesia-ent-card::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 5px !important;
	height: 100% !important;
	background: linear-gradient(180deg, #fde68a 0%, #fbbf24 25%, #e879f9 65%, #7c3aed 100%) !important;
	opacity: 0.95 !important;
	pointer-events: none !important;
}

body #ardesia-intrattenimento .ardesia-ent-card:hover {
	border-color: rgba(244, 114, 182, 0.65) !important;
	box-shadow: 0 18px 50px rgba(124, 58, 237, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
	transform: translateY(-3px) !important;
}

body #ardesia-intrattenimento .ardesia-ent-card--wide {
	grid-column: 1 / -1 !important;
}

body #ardesia-intrattenimento .ardesia-ent-card--accent {
	background: linear-gradient(155deg, rgba(120, 53, 15, 0.2) 0%, rgba(76, 29, 149, 0.55) 28%, rgba(45, 27, 78, 0.98) 100%) !important;
	border-color: rgba(251, 191, 36, 0.38) !important;
	box-shadow: 0 0 0 1px rgba(253, 230, 138, 0.06) inset !important;
}

body #ardesia-intrattenimento .ardesia-ent-iconbox {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 3.35rem !important;
	height: 3.35rem !important;
	margin: 0 0 1rem 0 !important;
	border-radius: 14px !important;
	font-size: 1.68rem !important;
	line-height: 1 !important;
	background: linear-gradient(145deg, rgba(251, 191, 36, 0.35), rgba(168, 85, 247, 0.4), rgba(236, 72, 153, 0.2)) !important;
	border: 1px solid rgba(253, 230, 138, 0.45) !important;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28), 0 0 24px rgba(251, 191, 36, 0.12) !important;
}

body #ardesia-intrattenimento .ardesia-ent-iconbox--accent {
	background: linear-gradient(145deg, rgba(253, 230, 138, 0.45), rgba(244, 114, 182, 0.45), rgba(168, 85, 247, 0.35)) !important;
	border-color: rgba(251, 191, 36, 0.55) !important;
}

body #ardesia-intrattenimento .ardesia-ent-card__title {
	font-family: "Sora", system-ui, sans-serif !important;
	font-size: 1.46rem !important;
	font-weight: 700 !important;
	margin: 0 0 0.75rem !important;
	color: #fffef8 !important;
	letter-spacing: -0.02em !important;
	text-shadow: 0 0 24px rgba(251, 191, 36, 0.12) !important;
}

body #ardesia-intrattenimento .ardesia-ent-card__text {
	margin: 0 0 0.55rem !important;
	font-size: 1.34rem !important;
	font-weight: 500 !important;
	color: var(--ent-muted) !important;
	line-height: 1.58 !important;
}

body #ardesia-intrattenimento .ardesia-ent-card__text * {
	font-size: inherit !important;
}

body #ardesia-intrattenimento .ardesia-ent-card--salvataggi .ardesia-ent-card__text {
	font-size: clamp(1.42rem, 2.65vw, 1.62rem) !important;
	line-height: 1.62 !important;
}

body #ardesia-intrattenimento .ardesia-ent-list {
	margin: 0.4rem 0 0 !important;
	padding-left: 1.25rem !important;
	color: rgba(252, 245, 255, 0.9) !important;
	font-size: 1.38rem !important;
	font-weight: 500 !important;
	line-height: 1.58 !important;
}

/* Il tema / Elementor spesso forza font-size sui li: va impostato qui, non solo sul ul */
body #ardesia-intrattenimento .ardesia-ent-list > li {
	margin-bottom: 0.5rem !important;
	font-size: clamp(1.32rem, 2.4vw, 1.52rem) !important;
	line-height: 1.62 !important;
	font-weight: 500 !important;
	color: rgba(252, 245, 255, 0.92) !important;
}

body #ardesia-intrattenimento .ardesia-ent-list li * {
	font-size: inherit !important;
}

body #ardesia-intrattenimento .ardesia-ent-list li::marker {
	color: #fde68a !important;
}

body #ardesia-intrattenimento .ardesia-ent-list--compact {
	font-size: 1.38rem !important;
}

body #ardesia-intrattenimento .ardesia-ent-list--compact > li {
	font-size: clamp(1.32rem, 2.4vw, 1.52rem) !important;
	line-height: 1.62 !important;
}

body #ardesia-intrattenimento .ardesia-ent-shop {
	background: linear-gradient(180deg, rgba(45, 30, 60, 0.35) 0%, rgba(30, 15, 52, 0.92) 22%, rgba(12, 6, 20, 0.95) 100%) !important;
	border: 2px solid rgba(251, 191, 36, 0.22) !important;
	border-radius: var(--ent-radius-sm) !important;
	padding: clamp(1.5rem, 4vw, 2.25rem) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body #ardesia-intrattenimento .ardesia-ent-shop__head {
	text-align: center !important;
	margin-bottom: 1.5rem !important;
}

body #ardesia-intrattenimento .ardesia-ent-shop__title {
	font-family: "Sora", system-ui, sans-serif !important;
	font-size: clamp(1.68rem, 3.7vw, 2.18rem) !important;
	font-weight: 700 !important;
	margin: 0 0 0.55rem !important;
	color: #fffbeb !important;
	text-shadow: 0 0 28px rgba(251, 191, 36, 0.15) !important;
}

body #ardesia-intrattenimento .ardesia-ent-shop__sub {
	margin: 0 auto 0.85rem !important;
	max-width: 38rem !important;
	font-size: 1.18rem !important;
	font-weight: 500 !important;
	color: var(--ent-muted) !important;
	line-height: 1.55 !important;
}

body #ardesia-intrattenimento a.ardesia-ent-link-all,
body #ardesia-intrattenimento .ardesia-ent-link-all {
	display: inline-block !important;
	font-size: 1.14rem !important;
	font-weight: 600 !important;
	color: #fde68a !important;
	text-decoration: none !important;
	border-bottom: 2px solid rgba(251, 191, 36, 0.5) !important;
	padding-bottom: 3px !important;
	transition: color 0.2s ease, border-color 0.2s ease !important;
}

body #ardesia-intrattenimento a.ardesia-ent-link-all:hover,
body #ardesia-intrattenimento .ardesia-ent-link-all:hover {
	color: #ffffff !important;
	border-bottom-color: rgba(253, 230, 138, 0.85) !important;
}

body #ardesia-intrattenimento .ardesia-ent-products {
	font-size: 1.08rem !important;
}

body #ardesia-intrattenimento .ardesia-ent-products ul.products {
	margin-bottom: 0 !important;
}

body #ardesia-intrattenimento .ardesia-ent-empty {
	text-align: center !important;
	color: var(--ent-muted) !important;
	font-size: 1.16rem !important;
	margin: 1rem 0 !important;
}

body #ardesia-intrattenimento .ardesia-ent-empty code {
	color: #f0abfc !important;
	background: rgba(0, 0, 0, 0.35) !important;
	padding: 0.12rem 0.4rem !important;
	border-radius: 8px !important;
	font-size: 0.92em !important;
}



/* Bottone homepage stile premium */

/* --- STILI PER IL PULSANTE PREMIUM E IL SUO CONTENITORE --- */

/* --- CONTENITORE PULSANTE --- */
.premium-btn-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 30px 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- PULSANTE ELEGANTE / DARK ACADEMIA --- */
.premium-btn-container .btn-premium {
    position: relative;
    padding: 14px 40px !important;
    font-size: 16px !important;
    font-family: 'Georgia', 'Times New Roman', serif !important; /* Font elegante con grazie */
    color: #fce7a1 !important;           /* Colore oro chiaro che richiama il rombo nel tuo sito */
    text-decoration: none !important;
    background: rgba(252, 231, 161, 0.05) !important; /* Sfondo leggermente dorato ma quasi trasparente */
    border: 1px solid #fce7a1 !important; /* Bordo dorato netto ed elegante */
    border-radius: 4px !important;       /* Bordi quasi squadrati, più da "libro" */
    cursor: pointer !important;
    transition: all 0.4s ease !important; /* Transizione morbida */
    display: inline-block !important;
    letter-spacing: 2px !important;      /* Lettere più spaziate per un look premium */
    text-transform: uppercase !important; /* Tutto maiuscolo */
    outline: none !important;
}

/* --- EFFETTO HOVER (Passaggio del mouse) --- */
.premium-btn-container .btn-premium:hover {
    background: #fce7a1 !important;      /* Il pulsante si riempie di oro */
    color: #1a0a24 !important;           /* Il testo diventa del colore scuro del tuo sfondo */
    transform: translateY(-2px) !important; 
    box-shadow: 0 5px 25px rgba(252, 231, 161, 0.3) !important; /* Bagliore dorato esterno */
}

/* --- EFFETTO CLIC --- */
.premium-btn-container .btn-premium:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 10px rgba(252, 231, 161, 0.2) !important;
}

/* Cambia il colore del testo e del placeholder per il campo età */
#anni-4447 {
    color: #000000 !important;
    background-color: #ffffff; /* Opzionale: assicura che lo sfondo dell'input sia bianco per contrasto */
}

/* Se vuoi che anche il testo che l'utente scrive sia nero */
#anni-4447::placeholder {
    color: #666666; /* Colore grigio scuro per il placeholder "Quanti anni hai" */
    opacity: 1;
}

/* JFB: Forza la visualizzazione a GRIGLIA a 2 colonne per le Parole Chiave */
.jet-form-builder-row.field-type-checkbox-field:has(input[name="tag_annuncio[]"]) .jet-form-builder__fields-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    row-gap: 8px !important;
    column-gap: 30px !important;
    width: 100% !important;
}

/* Imposta il campo individuale per non sballare le larghezze */
.jet-form-builder-row.field-type-checkbox-field:has(input[name="tag_annuncio[]"]) .jet-form-builder__field-wrap {
    margin: 0 !important;
    width: 100% !important;
}

/* Ritorna su singola colonna per smartphone in modo che si leggano bene */
@media (max-width: 600px) {
    .jet-form-builder-row.field-type-checkbox-field:has(input[name="tag_annuncio[]"]) .jet-form-builder__fields-group {
        grid-template-columns: 1fr !important; 
    }
}




/* Nome dell'utente nel thread selezionato */
.threads-list .thread.bp-messages-active-thread .bm-info .name {
    color: #800080 !important; /* Viola (puoi usare anche #A020F0 o simili) */
}

/* Contenuto dell'ultimo messaggio nel thread selezionato */
.threads-list .thread.bp-messages-active-thread .bm-last-message-content {
    color: #800080 !important;
}

/* Anche la data/ora nel thread selezionato (opzionale) */
.threads-list .thread.bp-messages-active-thread .time .time-wrapper {
    color: #800080 !important;
    opacity: 1;
}

/* Rende nero il testo delle voci del menu */
.bpbm-dropdown-menu .bpbm-dropdown-item-label {
    color: #000000 !important;
}

/* Rende nere le icone (se usano il colore del testo) */
.bpbm-dropdown-menu .bpbm-dropdown-item-icon {
    color: #000000 !important;
}

/* Opzionale: Cambia il colore quando passi il mouse sopra (hover) 
   per evitare che il testo sparisca se lo sfondo diventa scuro */
.bpbm-dropdown-menu .bpbm-dropdown-item:hover .bpbm-dropdown-item-label {
    color: #000000 !important;
}

/* ── FIX colore segnalazione utente scritta nera ── */
/* Cambia il colore del testo che l'utente scrive */
.gru-textarea#gru-reason {
    color: #000000 !important;
}

/* Cambia il colore del testo segnaposto (placeholder) */
.gru-textarea#gru-reason::placeholder {
    color: #000000;
    opacity: 1; /* Necessario per alcuni browser */
}


/* ── FIX TAB WOOCOMMERCE (Recensioni, Descrizione, ecc.) ── */

/* 1. Stato base della tab (non selezionata) */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: rgba(30, 15, 50, 0.6) !important;
    border: 1px solid rgba(192, 38, 211, 0.2) !important;
    border-bottom: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: rgba(255, 255, 255, 0.7) !important;
    text-shadow: none !important;
}

/* 2. STATO ATTIVO (Quello che vedi bianco) */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: #1a0b2e !important; /* Sfondo scuro Ardesia */
    border-top: 3px solid #c026d3 !important; /* Linea neon viola */
    border-right: 1px solid rgba(192, 38, 211, 0.4) !important;
    border-left: 1px solid rgba(192, 38, 211, 0.4) !important;
    position: relative;
    top: 1px; /* Per farla "incastrare" con il pannello sotto */
}

/* Forza il testo della tab attiva in bianco */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #ffffff !important;
}

/* 3. Pannello del contenuto sotto le tab */
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
    background: #1a0b2e !important;
    border: 1px solid rgba(192, 38, 211, 0.4) !important;
    border-radius: 0 0 12px 12px !important;
    padding: 20px !important;
    color: #ffffff !important;
}

/* Rimuove la linea fastidiosa che WooCommerce mette sotto le tab */
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    border-bottom: 1px solid rgba(192, 38, 211, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   griglia per pulsanti
   ═══════════════════════════════════════════════════════════════════════ */

.ardesia-btn-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding: 20px 0;
}

.ardesia-btn-grid .ardesia-btn.active {
    padding: 10px 22px;
    border-radius: 24px;
    font-size: 13px;
    background: linear-gradient(135deg, #c026d3, #7c3aed);
    color: #fff;
    border: none;
    box-shadow: 0 2px 10px rgba(192, 38, 211, 0.3);
    transition: all 0.3s ease;
}

.ardesia-btn-grid .ardesia-btn.active:hover {
    box-shadow:
        0 0 15px rgba(217, 70, 239, 0.5),
        0 0 30px rgba(192, 38, 211, 0.3),
        0 0 45px rgba(124, 58, 237, 0.15);
    transform: translateY(-2px);
    color: #fff;
}

.ardesia-btn-grid .glossaryLink {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Pulsante personalizzato Ardesia
   ═══════════════════════════════════════════════════════════════════════ */
.ardesia-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.25);
    color: #c084fc;
    transition: all 0.2s ease;
    cursor: pointer;
}

.ardesia-btn:hover {
    background: rgba(124, 58, 237, 0.2);
    color: #e879f9;
    border-color: rgba(192, 38, 211, 0.4);
}

.ardesia-btn.active,
.ardesia-btn.primary {
    background: linear-gradient(135deg, #c026d3, #7c3aed);
    color: #fff;
    border: none;
    box-shadow: 0 2px 10px rgba(192, 38, 211, 0.35);
}

.ardesia-btn.primary:hover {
    box-shadow: 0 4px 16px rgba(192, 38, 211, 0.5);
    transform: translateY(-1px);
    color: #fff;
}



/* ═══════════════════════════════════════════════════════════════════════
   PAGINAZIONE — Query Loop
   ═══════════════════════════════════════════════════════════════════════ */

.wp-block-query-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.wp-block-query-pagination .page-numbers.current {
    background: linear-gradient(135deg, #c026d3, #7c3aed) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(192, 38, 211, 0.35);
}

.wp-block-query-pagination .page-numbers:not(.current) {
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.25);
    color: #c084fc;
}

.wp-block-query-pagination .page-numbers:not(.current):hover {
    background: rgba(124, 58, 237, 0.2);
    color: #e879f9;
    border-color: rgba(192, 38, 211, 0.4);
}

.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
    color: #c084fc !important;
    text-decoration: none !important;
    font-weight: 500;
    font-size: 14px;
    transition: color 0.2s ease;
}

.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover {
    color: #e879f9 !important;
}

/**
 * CSS Annunci Query Loop — Ardesia.site
 * Da inserire in Aspetto → Personalizza → CSS aggiuntivo
 * oppure come snippet CSS in WPCode.
 *
 * Classi richieste:
 *   - pbm-featured-loop  → Query Loop In Evidenza
 *   - pbm-normal-loop    → Query Loop Annunci normali
 */

/* ═══════════════════════════════════════════════════════════════════════
   FEATURED LOOP — Glow Premium
   ═══════════════════════════════════════════════════════════════════════ */

.pbm-featured-loop .wp-block-post {
    position: relative;
    background: linear-gradient(145deg, rgba(88, 28, 135, 0.4), rgba(45, 27, 78, 0.6));
    border: 1px solid rgba(192, 38, 211, 0.5);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 20px;
    box-shadow:
        0 0 20px rgba(192, 38, 211, 0.2),
        0 0 60px rgba(124, 58, 237, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.35s ease;
    overflow: hidden;
}

.pbm-featured-loop .wp-block-post::before {
    content: '⭐ IN EVIDENZA';
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.25);
    padding: 3px 10px;
    border-radius: 20px;
    z-index: 2;
}

.pbm-featured-loop .wp-block-post:hover {
    border-color: rgba(217, 70, 239, 0.7);
    box-shadow:
        0 0 30px rgba(192, 38, 211, 0.35),
        0 0 80px rgba(124, 58, 237, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

/* Barra colorata featured — glow gradient */
.pbm-featured-loop .barra-colorata {
    height: 3px;
    background: linear-gradient(90deg, #7c3aed, #c026d3, #d946ef, #c026d3, #7c3aed);
    border-radius: 0 0 16px 16px;
    margin: 16px -28px -24px;
    box-shadow: 0 0 12px rgba(192, 38, 211, 0.4);
}

/* Titolo featured */
.pbm-featured-loop .wp-block-post-title a {
    color: #f5f3ff !important;
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}

.pbm-featured-loop .wp-block-post-title a:hover {
    color: #e879f9 !important;
}

/* Excerpt featured */
.pbm-featured-loop .wp-block-post-excerpt__excerpt {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    line-height: 1.7;
}

.pbm-featured-loop .wp-block-post-excerpt__more-link {
    color: #d946ef;
    font-weight: 600;
    text-decoration: none;
    font-size: 13px;
}

.pbm-featured-loop .wp-block-post-excerpt__more-link:hover {
    color: #e879f9;
    text-decoration: underline;
}


/* ═══════════════════════════════════════════════════════════════════════
   NORMAL LOOP — Minimal & Clean
   ═══════════════════════════════════════════════════════════════════════ */

.pbm-normal-loop .wp-block-post {
    background: rgba(45, 27, 78, 0.3);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 14px;
    transition: all 0.25s ease;
}

.pbm-normal-loop .wp-block-post:hover {
    background: rgba(45, 27, 78, 0.45);
    border-color: rgba(124, 58, 237, 0.3);
}

/* Titolo normale */
.pbm-normal-loop .wp-block-post-title a {
    color: #e2e0f0 !important;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.pbm-normal-loop .wp-block-post-title a:hover {
    color: #c084fc !important;
}

/* Excerpt normale */
.pbm-normal-loop .wp-block-post-excerpt__excerpt {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    line-height: 1.65;
}

.pbm-normal-loop .wp-block-post-excerpt__more-link {
    color: #a78bfa;
    font-weight: 500;
    text-decoration: none;
    font-size: 13px;
}

.pbm-normal-loop .wp-block-post-excerpt__more-link:hover {
    color: #c084fc;
}


/* ═══════════════════════════════════════════════════════════════════════
   CATEGORIE — Pill badge (entrambi i loop)
   ═══════════════════════════════════════════════════════════════════════ */

.pbm-featured-loop .taxonomy-category,
.pbm-normal-loop .taxonomy-category {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 10px;
}

.pbm-featured-loop .taxonomy-category .wp-block-post-terms__separator,
.pbm-normal-loop .taxonomy-category .wp-block-post-terms__separator {
    display: none;
}

.pbm-featured-loop .taxonomy-category a,
.pbm-normal-loop .taxonomy-category a {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: all 0.2s ease;
}

.pbm-featured-loop .taxonomy-category a {
    background: rgba(192, 38, 211, 0.15);
    border: 1px solid rgba(192, 38, 211, 0.3);
    color: #e879f9;
}

.pbm-featured-loop .taxonomy-category a:hover {
    background: rgba(192, 38, 211, 0.25);
    color: #f0abfc;
}

.pbm-normal-loop .taxonomy-category a {
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.2);
    color: #a78bfa;
}

.pbm-normal-loop .taxonomy-category a:hover {
    background: rgba(124, 58, 237, 0.2);
    color: #c084fc;
}


/* ═══════════════════════════════════════════════════════════════════════
   TAG (Cerco/Sono) — Chip separati
   ═══════════════════════════════════════════════════════════════════════ */

.pbm-featured-loop .taxonomy-post_tag,
.pbm-normal-loop .taxonomy-post_tag {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
    padding-top: 4px;
}

.pbm-featured-loop .taxonomy-post_tag .wp-block-post-terms__separator,
.pbm-normal-loop .taxonomy-post_tag .wp-block-post-terms__separator {
    display: none;
}

.pbm-featured-loop .taxonomy-post_tag a:not(.glossaryLink),
.pbm-normal-loop .taxonomy-post_tag a:not(.glossaryLink) {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* GlossaryLink dentro i tag — eredita lo stile del chip precedente */
.pbm-featured-loop .taxonomy-post_tag .glossaryLink,
.pbm-normal-loop .taxonomy-post_tag .glossaryLink {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    display: inline !important;
}

.pbm-featured-loop .taxonomy-post_tag .glossaryLink {
    color: #7dd3fc !important;
}

.pbm-normal-loop .taxonomy-post_tag .glossaryLink {
    color: #94a3b8 !important;
}

/* GlossaryLink dentro le categorie — eredita lo stile della pill */
.pbm-featured-loop .taxonomy-category .glossaryLink,
.pbm-normal-loop .taxonomy-category .glossaryLink {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    box-shadow: none !important;
    display: inline !important;
}

.pbm-featured-loop .taxonomy-category .glossaryLink {
    color: #e879f9 !important;
}

.pbm-normal-loop .taxonomy-category .glossaryLink {
    color: #a78bfa !important;
}

.pbm-featured-loop .taxonomy-post_tag a:not(.glossaryLink) {
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    color: #7dd3fc;
}

.pbm-featured-loop .taxonomy-post_tag a:not(.glossaryLink):hover {
    background: rgba(56, 189, 248, 0.2);
    color: #bae6fd;
}

.pbm-normal-loop .taxonomy-post_tag a:not(.glossaryLink) {
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.pbm-normal-loop .taxonomy-post_tag a:not(.glossaryLink):hover {
    background: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
}


/* ═══════════════════════════════════════════════════════════════════════
   LOCALITÀ — Badge evidenziato
   ═══════════════════════════════════════════════════════════════════════ */

.pbm-featured-loop .taxonomy-localita,
.pbm-normal-loop .taxonomy-localita {
    margin-top: 10px;
    display: flex;
    gap: 6px;
}

.pbm-featured-loop .taxonomy-localita a,
.pbm-normal-loop .taxonomy-localita a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.pbm-featured-loop .taxonomy-localita a::before,
.pbm-normal-loop .taxonomy-localita a::before {
    content: '📍';
    font-size: 11px;
}

.pbm-featured-loop .taxonomy-localita a {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(245, 158, 11, 0.12));
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

.pbm-featured-loop .taxonomy-localita a:hover {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.2));
    color: #fcd34d;
}

.pbm-normal-loop .taxonomy-localita a {
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.18);
    color: #d4a017;
}

.pbm-normal-loop .taxonomy-localita a:hover {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}


/* ═══════════════════════════════════════════════════════════════════════
   SPACER — Riduci lo spazio tra excerpt e tag
   ═══════════════════════════════════════════════════════════════════════ */

.pbm-featured-loop .wp-block-spacer,
.pbm-normal-loop .wp-block-spacer {
    height: 12px !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   COLUMNS LAYOUT — Fix padding interno
   ═══════════════════════════════════════════════════════════════════════ */

.pbm-featured-loop .wp-block-columns,
.pbm-normal-loop .wp-block-columns {
    margin: 0;
    padding: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .pbm-featured-loop .wp-block-post {
        padding: 18px 16px;
    }

    .pbm-featured-loop .wp-block-post::before {
        top: 10px;
        right: 10px;
        font-size: 9px;
    }

    .pbm-featured-loop .barra-colorata {
        margin: 12px -16px -18px;
    }

    .pbm-featured-loop .wp-block-post-title a {
        font-size: 18px;
    }

    .pbm-normal-loop .wp-block-post {
        padding: 16px 14px;
    }

    .pbm-normal-loop .wp-block-post-title a {
        font-size: 16px;
    }
}

/* --- FIX MENU MOBILE SFONDO NERO --- */
@media only screen and (max-width: 959px) {
    
    /* Colore di sfondo del pannello laterale (stile Sidebar) */
    #sidr, .sidr-inner {
        background-color: #000000 !important;
    }

    /* Colore di sfondo se usi lo stile Dropdown (a tendina) */
    #mobile-dropdown {
        background-color: #000000 !important;
    }

    /* Colore di sfondo specifico per le liste menu che mi hai inviato */
    #menu-login, 
    #menu-primary-menu-1,
    .sub-menu {
        background-color: #000000 !important;
    }

    /* Colore del testo dei link (Bianco) */
    #sidr a, 
    #mobile-dropdown a, 
    #menu-primary-menu-1 a, 
    #menu-login a {
        color: #ffffff !important;
    }

    /* Colore delle icone e bordi (opzionale per pulizia) */
    #sidr li, #mobile-dropdown li {
        border-bottom-color: #333333 !important; /* Riga grigia scura separatrice */
    }
    
    /* Icona chiusura menu */
    .sidr-class-toggle-sidr-close {
        color: #ffffff !important;
    }
}

/* Scritte nere nei link del plugin ticket*/

.wpsc-widget-list-section a {
    color: #000000 !important;
}

/* Colore viola link fondo footer */

#menu-footer a {
    transition: color 0.3s ease;
}

#menu-footer a:hover {
    color: #FF00F7 !important;
}


/* 1. Sfondo nero e testo bianco per il box visibile */
.woocommerce-ordering .theme-select {
    background-color: #000000 !important;
    border-color: #000000 !important; /* O un grigio scuro se preferisci il bordo */
    color: #ffffff !important;
}

/* 2. Assicura che il testo interno sia bianco */
.woocommerce-ordering .theme-select .theme-selectInner {
    color: #ffffff !important;
}

/* 3. Colora di bianco la freccettina laterale */
.woocommerce-ordering .theme-select:after {
    color: #ffffff !important;
    border-color: #ffffff !important; /* Se la freccia è fatta con i bordi */
}

/* 4. Sfondo nero per la lista delle opzioni quando si apre il menu */
.woocommerce-ordering select.orderby,
.woocommerce-ordering select.orderby option {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Correzione sfocatura per la griglia prodotti principale (quella che mi hai appena mandato) */
ul.products.oceanwp-row,
ul.products.oceanwp-row .product,
ul.products.oceanwp-row .entry,
ul.products.oceanwp-row .product-inner {
    /* Disattiva le trasformazioni 3D che sgranano il testo */
    transform: none !important;
    -webkit-transform: none !important;
    
    /* Forza il rendering del testo nitido */
    -webkit-font-smoothing: subpixel-antialiased !important;
    -moz-osx-font-smoothing: auto !important;
    
    /* Rimuove filtri e opacità */
    filter: none !important;
    opacity: 1 !important;
    
    /* Resetta il posizionamento */
    backface-visibility: visible !important;
    perspective: none !important;
    will-change: auto !important;
}

/* Correzione aggressiva sfocatura Testo e Immagini nella sezione Correlati */
.related.products,
.related.products .products,
.related.products .product,
.related.products ul.products li.product {
    /* Disattiva le trasformazioni 3D che sgranano il testo */
    transform: none !important;
    -webkit-transform: none !important;
    
    /* Forza il rendering del testo nitido (subpixel) */
    -webkit-font-smoothing: subpixel-antialiased !important;
    -moz-osx-font-smoothing: auto !important;
    
    /* Rimuove filtri e opacità che causano l'effetto "lente appannata" */
    filter: none !important;
    opacity: 1 !important;
    
    /* Resetta il posizionamento che a volte crea "mezzi pixel" */
    backface-visibility: visible !important;
    perspective: none !important;
    will-change: auto !important;
}

/* ================================================================ */
/* Fix per Testo Bianco nel Campo "Età" (JetFormBuilder)          */
/* ================================================================ */

/*
 * Usiamo l'ID #eta per essere super-specifici e forzare
 * il colore del testo a nero e lo sfondo a bianco,
 * vincendo su qualsiasi regola generica del tema.
 */
input#eta {
    color: #111111 !important;           /* Testo nero */
    background-color: #ffffff !important; /* Sfondo bianco */
}

/* Stile per il box delle località nell'articolo anteprima*/
.info-localita-anteprima {
font-size: 14px;
color: #cccccc;
margin-top: 10px;
display: flex;
align-items: center;
}

.info-localita-anteprima .localita-icon {
margin-right: 6px;
font-size: 1.1em;
}

.info-localita-anteprima a {
color: #F000B8; /* Il tuo colore rosa/magenta */
text-decoration: none;
font-weight: bold;
border-bottom: 1px dotted transparent;
}

.info-localita-anteprima a:hover {
text-decoration: underline;
color: #ffffff;
}
/* Stile per il box delle località nell'articolo */
.info-localita-articolo {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    color: #cccccc;
}

.info-localita-articolo strong {
    color: #ffffff;
    font-weight: bold;
}

.info-localita-articolo a {
    color: #F000B8; /* Il tuo colore rosa/magenta */
    text-decoration: none;
    border-bottom: 1px dotted #F000B8;
}

.info-localita-articolo a:hover {
    color: #ffffff;
    border-bottom-style: solid;
}

/* ================================================================ */
/* Fix per Menù a Tendina Bianchi in SupportCandy (Select2)       */
/* ================================================================ */

/* 1. Stile per il contenitore del menù a tendina che si apre */
.select2-dropdown {
    background-color: #3a2d4f !important; /* Sfondo viola scuro, come il tuo sito */
    border: 1px solid #F000B8 !important;   /* Bordo rosa/magenta */
    border-radius: 5px !important;
}

/* 2. Stile per le singole opzioni nella lista */
.select2-results__option {
    color: #eeeeee !important; /* Testo bianco leggibile */
    padding: 10px !important;
}

/* 3. Stile per l'opzione SELEZIONATA o al passaggio del mouse (HOVER) */
.select2-results__option--highlighted {
    background-color: #F000B8 !important; /* Sfondo rosa/magenta */
    color: #ffffff !important;           /* Testo bianco puro */
}

/* 4. (Opzionale) Stile per la barra di ricerca dentro al menù, se presente */
.select2-search__field {
    background-color: #2a1f3c !important;
    color: #ffffff !important;
    border: 1px solid #554270 !important;
}

/* ================================================================ */
/* FIX FINALE E POTENZIATO PER FLUENT SUPPORT (5 AGOSTO 2025)     */
/* Soluzione con sfondo scuro e selettori specifici.              */
/* ================================================================ */

/* --- GRUPPO 1: Modulo per creare un nuovo ticket --- */

/* Applica uno sfondo scuro al campo del TITOLO per rendere visibile il testo bianco */
#fluent_support_portal_app div.el-input__wrapper,
#fluent_support_portal_app input.el-input__inner {
    background-color: #3a2d4f !important; /* Un viola scuro ma distinguibile */
    border: 1px solid #554270 !important;
    color: #ffffff !important; /* Assicura che il testo che scrivi sia bianco */
}

/* Colore del testo segnaposto (placeholder) */
#fluent_support_portal_app input.el-input__inner::placeholder {
    color: #a9a9a9 !important;
    opacity: 1 !important;
}


/* --- GRUPPO 2: Tabella con la lista dei ticket esistenti --- */

/* Applica uno sfondo scuro alla cella del TITOLO del ticket */
#fluent_support_portal_app td.conversation-cell {
     background-color: rgba(0, 0, 0, 0.2) !important; /* Sfondo nero semi-trasparente */
     border-radius: 5px;
     transition: background-color 0.3s;
}

/* Forza il colore del testo del titolo a bianco (per sicurezza) */
#fluent_support_portal_app td.conversation-cell .fs_ticket_title strong {
    color: #ffffff !important;
}

/* Effetto HOVER: La cella diventa rosa al passaggio del mouse */
#fluent_support_portal_app tr:hover td.conversation-cell {
    background-color: #F000B8 !important;
}

/* Assicura che il testo del link rimanga bianco anche con lo sfondo rosa */
#fluent_support_portal_app tr:hover td.conversation-cell a,
#fluent_support_portal_app tr:hover td.conversation-cell strong,
#fluent_support_portal_app tr:hover td.conversation-cell p {
     color: #ffffff !important;
}

/* --- Separatore Opzione 2: Ornamento Centrale --- */
.separatore-ornamentale {
    width: 90%;
    margin: 60px auto;
    text-align: center;
    position: relative;
}
/* La linea orizzontale */
.separatore-ornamentale::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(148,0,211,0) 0%, #9400D3 50%, rgba(148,0,211,0) 100%);
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 1;
}
/* L'ornamento a forma di diamante */
.separatore-ornamentale::after {
    content: '◆'; /* Puoi cambiare il simbolo se preferisci, es. '⚜' */
    display: inline-block;
    position: relative;
    z-index: 2;
    font-size: 30px;
    color: #FFD700; /* Colore oro per il simbolo */
    background-color: #29072E; /* Sfondo viola scuro per "tagliare" la linea */
    padding: 0 20px;
    text-shadow: 0 0 10px #DA70D6; /* Bagliore viola */
}

/* ================================================================ */
/* Makeover Stile per il Menu Principale (con selettori corretti)   */
/* ================================================================ */

/* 1. Importiamo un font elegante da Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');

/* 2. Stile di base per i link del menu */
/* Selettore aggiornato con l'ID corretto */
#menu-primary-menu a {
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 1.5px;
    font-size: 15px;
    padding: 10px 0px;
    position: relative;
    text-decoration: none !important;
    overflow: hidden;
    transition: color 0.4s;
}

/* 3. Creiamo l'effetto di sottolineatura animata */
#menu-primary-menu a::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background-color: #F000B8;
    transition: width 0.4s ease-out;
}

/* 4. Attiviamo l'animazione al passaggio del mouse (hover) */
#menu-primary-menu a:hover {
    color: #ffffff;
}

#menu-primary-menu a:hover::after {
    width: 100%;
}




.buttonsidebar {
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  border: none;
  cursor: pointer;
  align-items: center;
  gap: 0.75rem;
  background-color: #a100af;
  color: #fff;
  border-radius: 10rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  padding-left: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.3s;
}

.button__icon-wrapper {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  position: relative;
  color: var(--clr);
  background-color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.buttonsidebar:hover {
  background-color: #000;
}

.buttonsidebar:hover .button__icon-wrapper {
  color: #000;
}

.button__icon-svg--copy {
  position: absolute;
  transform: translate(-150%, 150%);
}

.buttonsidebar:hover .button__icon-svg:first-child {
  transition: transform 0.3s ease-in-out;
  transform: translate(150%, -150%);
}

.buttonsidebar:hover .button__icon-svg--copy {
  transition: transform 0.3s ease-in-out 0.1s;
  transform: translate(0);
}



/* ================================================================ */
/* Stile Definitivo per la Barra A-Z del Glossario (v3)           */
/* ================================================================ */

/* 1. Stile del contenitore principale delle lettere */
.ln-letters {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100% !important;
    padding: 8px !important;
    margin-bottom: 40px !important;
    border: 1px solid #F000B8;
    border-radius: 5px;
    box-sizing: border-box;
    box-shadow: 0 0 12px rgba(240, 0, 184, 0.3);
}

/* 2. Stile di BASE per tutte le lettere */
.ln-letters a {
    flex-grow: 1;
    text-align: center;
    margin: 2px;
    padding: 10px 5px;
    color: #eeeeee !important;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    text-decoration: none !important;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

/* 3. Stile per le lettere NON ATTIVE (quelle non cliccabili) */
.ln-letters a.ln-disabled {
    color: rgba(238, 238, 238, 0.3) !important;
    background-color: transparent !important;
    cursor: default;
    box-shadow: none;
}

/* 4. Effetto al passaggio del mouse E per la lettera SELEZIONATA */
.ln-letters a:not(.ln-disabled):hover,
.ln-letters a.ln-selected {
    background-color: #F000B8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(240, 0, 184, 0.5);
}

/* 5. NUOVA REGOLA: Nasconde il contatore numerico */
.ln-letter-count {
    display: none !important;
}