/* ================================================================
   Notifica di acquisto con anteprima della zona.
   Le mappe sono ritagli di OpenStreetMap scaricati una volta sola
   e serviti da qui: nessuna chiamata esterna a ogni visita.
   Attribuzione richiesta dalla licenza ODbL, sta nel footer.
   ================================================================ */
.ps{position:fixed;right:20px;bottom:20px;z-index:100;width:442px;max-width:calc(100vw - 32px);
  background:#fff;border:1px solid var(--line);border-radius:17px;
  box-shadow:0 16px 44px rgba(13,27,62,.17);overflow:hidden;
  display:none;align-items:stretch;
  font-family:var(--font);
  opacity:0;transform:translateY(12px);transition:opacity .42s ease,transform .42s ease}
.ps.vis{display:flex}
.ps.on{opacity:1;transform:none}

.ps .mapp{width:132px;flex:none;background:#EDF1F6;position:relative}
.ps .mapp img{width:100%;height:100%;object-fit:cover;display:block;max-width:none}

.ps .corpo{flex:1;min-width:0;padding:14px 30px 15px 17px;display:flex;flex-direction:column;
  justify-content:center;gap:5px}
.ps .riga{display:flex;align-items:center;gap:10px;justify-content:space-between}
.ps .dove{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:#8A93A8;
  font-weight:500;min-width:0}
.ps .dove svg{width:13px;height:13px;flex:none;opacity:.75}
.ps .dove span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps .quando{font-size:13px;color:#A8B0C2;font-weight:500;white-space:nowrap;flex:none}
.ps .quando:not(:empty){letter-spacing:.04em}
/* quando al posto della data ci sono le stelle della recensione */
.ps.stelle .quando{color:var(--amber);font-size:14px;letter-spacing:1.3px;padding-right:4px}
.ps.stelle .corpo{padding-right:36px}
.ps .titolo{font-size:16.5px;line-height:1.32;color:var(--navy);font-weight:700;letter-spacing:-.01em}

.ps .x{position:absolute;top:7px;right:9px;width:23px;height:23px;border:none;background:none;
  color:#C3CCE0;font-size:18px;line-height:1;cursor:pointer;padding:0;border-radius:50%}
.ps .x:hover{color:#8A93A8}
.ps .x:focus-visible{outline:2px solid var(--blue);outline-offset:1px}

@media (prefers-reduced-motion:reduce){
  .ps{transform:none;transition:opacity .2s ease}
  .ps.on{transform:none}
}

@media (max-width:720px){
  .ps{left:12px;right:12px;width:auto;max-width:none;bottom:92px;border-radius:15px;
    box-shadow:0 12px 32px rgba(13,27,62,.18)}
  .ps .mapp{width:100px}
  .ps .corpo{padding:12px 30px 12px 13px;gap:4px}
  .ps .dove{font-size:12.5px}
  .ps .quando{font-size:12px}
  .ps .titolo{font-size:15.5px;line-height:1.3}
}
@media (max-width:380px){
  .ps .mapp{width:84px}
  .ps .titolo{font-size:14.5px}
}

/* variante senza mappa: riquadro con la sola icona.
   Si usa quando USA_MAPPE e' false, oppure quando della citta'
   non abbiamo il ritaglio pronto. */
.ps .mapp.icona{background:linear-gradient(155deg,#EAF0FF,#F5F8FF 60%,#FFF3F1);
  display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line)}
.ps .mapp.icona svg{width:32px;height:32px;opacity:.85}
@media (max-width:720px){.ps .mapp.icona svg{width:27px;height:27px}}