/* Pyx · annuncio SMAU. Tutto sotto #pyxa-root: l'id vince sugli stili del tema (Hello Elementor, kit Elementor) */
#pyxa-root{
	--pyxa-navy:#152756; --pyxa-cyan:#00BDFF; --pyxa-gold:#E3B23C; --pyxa-text:#33415c; --pyxa-muted:#6b7890; --pyxa-line:#e3e9f3;
	--pyxa-w:clamp(80px,7.6vw,108px);
	position:fixed; right:18px; bottom:6px; z-index:9990; font-family:inherit; line-height:1.4;
	pointer-events:none; -webkit-tap-highlight-color:transparent;
}
#pyxa-root *,#pyxa-root *:before,#pyxa-root *:after{box-sizing:border-box}
/* azzera quello che il tema mette su pulsanti, link e titoli */
#pyxa-root button,#pyxa-root a{-webkit-appearance:none; appearance:none; margin:0; width:auto; min-height:0; border:0; border-radius:0;
	background:none; box-shadow:none; text-shadow:none; color:inherit; font-family:inherit; font-size:inherit; font-weight:inherit;
	line-height:inherit; letter-spacing:normal; text-transform:none; text-decoration:none; transition:none}
#pyxa-root button:hover,#pyxa-root button:focus,#pyxa-root a:hover,#pyxa-root a:focus{text-decoration:none}
#pyxa-root h3,#pyxa-root p{font-family:inherit; text-transform:none}

/* ---- mascotte ---- */
#pyxa-root .pyxa-pyx{position:relative; width:var(--pyxa-w); aspect-ratio:281/344; outline:none; user-select:none}
#pyxa-root .pyxa-track{position:absolute; inset:0; will-change:transform; visibility:hidden}
#pyxa-root .pyxa-pyx.is-in .pyxa-track{visibility:visible}
#pyxa-root .pyxa-pyx.is-fade .pyxa-track{animation:pyxa-fade .45s ease-out both}
#pyxa-root .pyxa-bob{position:absolute; inset:0; transform-origin:50% 96%}
#pyxa-root .pyxa-sprite{position:absolute; inset:0; background-repeat:no-repeat; background-size:500% 300%; background-position:0 0;
	filter:drop-shadow(0 8px 10px rgba(10,25,60,.22))}
#pyxa-root .pyxa-pyx.is-idle .pyxa-bob{animation:pyxa-breathe 3.2s ease-in-out infinite}
#pyxa-root.is-ready .pyxa-pyx{pointer-events:auto; cursor:pointer}
#pyxa-root.is-ready .pyxa-pyx:hover .pyxa-sprite,#pyxa-root.is-ready .pyxa-pyx:focus-visible .pyxa-sprite{filter:drop-shadow(0 8px 16px rgba(0,189,255,.45))}
#pyxa-root .pyxa-pyx:focus-visible{outline:2px solid var(--pyxa-cyan); outline-offset:4px; border-radius:12px}
@keyframes pyxa-breathe{0%,100%{transform:scale(1,1)} 50%{transform:scale(1.012,.988)}}
@keyframes pyxa-fade{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* badge regalo: resta sulla mascotte quando la scheda è chiusa con "Più tardi" */
#pyxa-root .pyxa-badge{position:absolute; top:6%; right:2%; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
	color:#fff; background:var(--pyxa-cyan); box-shadow:0 0 0 3px #fff,0 6px 14px rgba(0,189,255,.4);
	opacity:0; transform:scale(.4); transition:opacity .25s ease,transform .35s cubic-bezier(.2,1.4,.3,1)}
#pyxa-root .pyxa-badge svg{width:16px; height:16px}
#pyxa-root.is-later .pyxa-badge{opacity:1; transform:none; animation:pyxa-ping 2s ease-out 1s infinite}

/* ---- fumetto ---- */
#pyxa-root .pyxa-bubble{
	position:absolute; right:calc(var(--pyxa-w) * .93); bottom:calc(var(--pyxa-w) * .8);
	display:flex; align-items:center; gap:9px; white-space:nowrap; margin:0;
	font-size:15px; font-weight:800; line-height:1.2; color:var(--pyxa-navy); text-align:left;
	background:#fff; border:1px solid var(--pyxa-line); border-radius:18px 18px 4px 18px; padding:11px 16px 11px 11px;
	box-shadow:0 14px 34px rgba(21,39,86,.2); cursor:pointer;
	opacity:0; visibility:hidden; transform:translateY(8px) scale(.9); transform-origin:100% 100%;
	transition:opacity .25s ease,transform .4s cubic-bezier(.2,1.3,.3,1),visibility 0s .4s;
}
#pyxa-root.is-talking .pyxa-bubble{opacity:1; visibility:visible; transform:none; pointer-events:auto; transition:opacity .25s ease,transform .4s cubic-bezier(.2,1.3,.3,1)}
#pyxa-root .pyxa-bubble:hover{border-color:var(--pyxa-cyan)}
#pyxa-root .pyxa-bubble:focus-visible{outline:2px solid var(--pyxa-cyan); outline-offset:2px}
#pyxa-root .pyxa-gift{flex:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
	color:#fff; background:linear-gradient(135deg,#2bcbff,#0096d6); animation:pyxa-ping 1.9s ease-out infinite}
@keyframes pyxa-ping{0%{box-shadow:0 0 0 0 rgba(0,189,255,.55)} 70%{box-shadow:0 0 0 11px rgba(0,189,255,0)} 100%{box-shadow:0 0 0 0 rgba(0,189,255,0)}}

/* ---- scheda ---- */
#pyxa-root .pyxa-card{
	position:absolute; right:calc(var(--pyxa-w) * .95); bottom:14px; width:412px; max-width:calc(100vw - 32px);
	background:#fff; border-radius:18px; overflow:hidden; border:1px solid var(--pyxa-line);
	box-shadow:0 30px 70px rgba(6,20,50,.28); text-align:left;
	opacity:0; visibility:hidden; transform:translateY(16px) scale(.94); transform-origin:100% 100%;
	transition:opacity .3s ease,transform .5s cubic-bezier(.2,1.1,.3,1),visibility 0s .5s;
}
#pyxa-root.is-open .pyxa-card{opacity:1; visibility:visible; transform:none; pointer-events:auto; transition:opacity .3s ease,transform .5s cubic-bezier(.2,1.1,.3,1)}
#pyxa-root.is-open .pyxa-bubble{opacity:0; visibility:hidden; pointer-events:none}

#pyxa-root .pyxa-head{position:relative; padding:18px 20px 20px; color:#fff; background:radial-gradient(120% 140% at 100% 0%,#24418a 0%,#152756 55%,#0d1a3d 100%)}
/* linea tratteggiata da biglietto */
#pyxa-root .pyxa-head:after{content:""; position:absolute; left:16px; right:16px; bottom:0; border-bottom:2px dashed rgba(255,255,255,.28)}
#pyxa-root .pyxa-body{position:relative; padding:18px 20px 18px}
#pyxa-root .pyxa-pill{display:inline-flex; align-items:center; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--pyxa-cyan);
	border:1px solid rgba(0,189,255,.45); background:rgba(255,255,255,.07); padding:5px 11px; border-radius:100px}
#pyxa-root .pyxa-card h3{margin:13px 40px 7px 0; padding:0; font-size:22px; line-height:1.2; font-weight:800; color:#fff; letter-spacing:-.01em}
#pyxa-root .pyxa-head p{margin:0; font-size:13.5px; line-height:1.45; color:#cfd9ec}
#pyxa-root .pyxa-text{margin:0 0 14px; font-size:14px; line-height:1.55; color:var(--pyxa-text)}
#pyxa-root .pyxa-text b,#pyxa-root .pyxa-text strong{color:var(--pyxa-navy)}
#pyxa-root .pyxa-scarce{display:flex; gap:10px; align-items:flex-start; margin:0 0 16px; padding:10px 12px; border-radius:10px;
	background:#FFF7E3; border:1px solid #F3DC9C; color:#7a5800; font-size:13px; font-weight:700; line-height:1.4}
#pyxa-root .pyxa-scarce svg{flex:none; margin-top:1px; color:#b98a10}
#pyxa-root .pyxa-scarce>div{flex:1; min-width:0}
#pyxa-root .pyxa-count{display:flex; align-items:center; gap:10px; margin-top:6px; font-weight:600}
#pyxa-root .pyxa-count b{font-weight:900; color:#5c4200}
#pyxa-root .pyxa-bar{flex:1; height:6px; border-radius:6px; background:rgba(185,138,16,.18); overflow:hidden; display:block}
#pyxa-root .pyxa-bar i{display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#E3B23C,#f0c95c)}
#pyxa-root .pyxa-actions{display:flex; gap:8px; align-items:center}
#pyxa-root .pyxa-btn{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 14px; border-radius:10px;
	background:var(--pyxa-cyan); color:#fff!important; font-size:14.5px; font-weight:800; line-height:1.2; text-decoration:none!important; text-align:center;
	box-shadow:0 8px 18px rgba(0,189,255,.32); transition:transform .12s ease,box-shadow .2s ease,background .2s ease}
#pyxa-root .pyxa-btn:hover{transform:translateY(-1px); background:#00acea; box-shadow:0 12px 22px rgba(0,189,255,.42)}
#pyxa-root .pyxa-btn:focus-visible{outline:2px solid var(--pyxa-navy); outline-offset:2px}
#pyxa-root .pyxa-later{flex:none; margin:0; padding:13px 10px; border:0; border-radius:10px; background:transparent; color:var(--pyxa-muted);
	font-size:13.5px; font-weight:600; cursor:pointer; box-shadow:none}
#pyxa-root .pyxa-later:hover{color:var(--pyxa-navy); background:#f3f6fb}
#pyxa-root .pyxa-x{position:absolute; top:12px; right:12px; width:32px; height:32px; margin:0; padding:0; border:0; border-radius:50%; cursor:pointer;
	background:rgba(255,255,255,.14); color:#fff; font-size:19px; line-height:1; display:flex; align-items:center; justify-content:center;
	transition:background .15s,transform .15s; box-shadow:none}
#pyxa-root .pyxa-x:hover{background:rgba(255,255,255,.28); transform:rotate(90deg)}
#pyxa-root .pyxa-later:focus-visible{outline:2px solid var(--pyxa-cyan); outline-offset:2px}
#pyxa-root .pyxa-x:focus-visible{outline:2px solid var(--pyxa-cyan); outline-offset:2px}
#pyxa-root .pyxa-btn svg{flex:none; width:16px; height:16px}
#pyxa-root .pyxa-btn,#pyxa-root .pyxa-btn:hover,#pyxa-root .pyxa-btn:focus,#pyxa-root .pyxa-btn:visited{color:#fff}

#pyxa-root.is-leaving{transition:opacity .35s ease,transform .35s ease; opacity:0; transform:translateY(16px)}

/* ---- telefono: scheda sopra la mascotte ---- */
@media (max-width:640px){
	#pyxa-root{right:10px; bottom:4px; --pyxa-w:78px}
	#pyxa-root .pyxa-bubble{font-size:13.5px; padding:9px 13px 9px 9px; right:calc(var(--pyxa-w) * .9); bottom:calc(var(--pyxa-w) * .85)}
	#pyxa-root .pyxa-gift{width:26px; height:26px}
	#pyxa-root .pyxa-card{right:0; bottom:calc(var(--pyxa-w) * 1.18); width:min(412px,calc(100vw - 20px)); max-width:none}
	#pyxa-root .pyxa-card h3{font-size:19px}
	#pyxa-root .pyxa-head{padding:16px 18px 18px}
	#pyxa-root .pyxa-body{padding:16px 18px}
}
@media (prefers-reduced-motion:reduce){
	#pyxa-root .pyxa-pyx.is-idle .pyxa-bob,#pyxa-root .pyxa-gift,#pyxa-root.is-later .pyxa-badge{animation:none}
	#pyxa-root .pyxa-card,#pyxa-root .pyxa-bubble{transform:none!important}
}
@media print{#pyxa-root{display:none!important}}