:root{
  --fb:#1877f2;
  --bg:#f0f2f5;
  --card:#fff;
  --text:#1c1e21;
  --muted:#65676b;
  --line:#e4e6eb;
  --red:#e41e3f;
  --green:#31a24c;
  --max:640px;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  padding-bottom:74px;
}

a{
  text-decoration:none;
  color:inherit;
}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}

.toprow{
  max-width:var(--max);
  margin:0 auto;
  padding:8px 12px;
  display:flex;
  align-items:center;
  gap:9px;
}

.logo{
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--fb);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:24px;
  flex:none;
}

.brand{
  flex:1;
  min-width:0;
}

.brand strong{
  display:block;
  color:var(--fb);
  font-size:22px;
  line-height:1;
  letter-spacing:-.7px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.brand small{
  display:block;
  color:var(--muted);
  margin-top:3px;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.round-btn{
  border:0;
  width:40px;
  height:40px;
  border-radius:50%;
  background:#e4e6eb;
  display:grid;
  place-items:center;
  font-size:18px;
}

.searchrow{
  max-width:var(--max);
  margin:0 auto;
  padding:0 12px 8px;
}

.search{
  width:100%;
  border:0;
  background:#f0f2f5;
  border-radius:999px;
  padding:11px 14px;
  outline:none;
  font-size:15px;
}

.tabs{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-top:1px solid #f0f2f5;
}

.tab{
  padding:9px 0 8px;
  text-align:center;
  color:#606770;
  font-size:22px;
  position:relative;
}

.tab.active{
  color:var(--fb);
}

.tab.active:after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:0;
  height:3px;
  background:var(--fb);
  border-radius:999px;
}

.page{
  max-width:var(--max);
  margin:0 auto;
}

.notice{
  margin:10px;
  padding:11px 12px;
  border-radius:12px;
  background:#fff8e5;
  border:1px solid #ffe0a3;
  color:#654600;
  font-size:13px;
  line-height:1.35;
}

.card{
  background:#fff;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  margin-bottom:8px;
}

.composer{
  padding:11px 12px;
}

.row{
  display:flex;
  gap:10px;
  align-items:center;
}

.avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#dbe7ff;
  display:grid;
  place-items:center;
  font-size:22px;
  flex:none;
  overflow:hidden;
}

.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.pill{
  flex:1;
  border:1px solid #ccd0d5;
  border-radius:999px;
  padding:10px 13px;
  color:#555;
  font-size:15px;
  background:#fff;
}

.composer-actions{
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
  color:#606770;
  font-weight:700;
  font-size:13px;
}

.composer-actions a,
.composer-actions div{
  text-align:center;
  padding:7px 2px;
}

.stories-wrap{
  padding:10px 0;
  overflow:hidden;
}

.stories{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:0 10px 2px;
}

.stories::-webkit-scrollbar{
  display:none;
}

.story{
  min-width:104px;
  height:158px;
  border-radius:13px;
  overflow:hidden;
  background:linear-gradient(135deg,#9ec9ff,#d7e9ff);
  position:relative;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:8px;
  text-align:center;
  font-weight:800;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.45);
}

.story .emoji{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:62px;
}

.story img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.story strong{
  z-index:1;
  font-size:14px;
}

.story.add{
  background:#fff;
  color:#1c1e21;
  text-shadow:none;
  border:1px solid var(--line);
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.story.add .plus{
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--fb);
  color:#fff;
  font-size:30px;
  font-weight:800;
}

.post-head{
  padding:11px 12px 8px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.post-info{
  flex:1;
  min-width:0;
}

.post-info strong{
  display:block;
  font-size:17px;
  line-height:1.1;
}

.meta{
  margin-top:3px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  font-size:13px;
  color:var(--muted);
  font-weight:600;
}

.more{
  width:36px;
  height:32px;
  border:0;
  background:transparent;
  color:#606770;
  font-size:24px;
}

.post-text{
  padding:0 12px 10px;
  font-size:16px;
  line-height:1.35;
}

.photo{
  width:100%;
  height:62vw;
  min-height:260px;
  max-height:370px;
  background:linear-gradient(135deg,#97c68d,#f0c27b);
  display:grid;
  place-items:center;
  font-size:98px;
  border-top:1px solid #f2f3f5;
  border-bottom:1px solid #f2f3f5;
  overflow:hidden;
}

.photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.reactions{
  padding:8px 12px;
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:#606770;
  font-size:14px;
  border-bottom:1px solid var(--line);
}

.bubble{
  display:inline-grid;
  place-items:center;
  width:19px;
  height:19px;
  border-radius:50%;
  background:var(--fb);
  color:#fff;
  font-size:11px;
  margin-right:5px;
}

.post-actions{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:3px 7px;
  color:#606770;
  font-weight:800;
  font-size:14px;
}

.post-actions div,
.post-actions a{
  padding:10px 2px;
  text-align:center;
  border-radius:8px;
}

.form{
  padding:14px 12px;
}

.form h1{
  font-size:24px;
  margin:0 0 8px;
}

.form p{
  color:var(--muted);
  line-height:1.4;
}

.field{
  margin:12px 0;
}

label{
  display:block;
  font-weight:800;
  margin-bottom:6px;
}

input,
select,
textarea{
  width:100%;
  border:1px solid #ccd0d5;
  border-radius:11px;
  padding:12px;
  font-size:16px;
  background:#fff;
}

textarea{
  min-height:105px;
  resize:vertical;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:11px;
  background:var(--fb);
  color:#fff;
  padding:12px 15px;
  font-weight:900;
  font-size:16px;
  margin:3px;
}

.btn.secondary{
  background:#e4e6eb;
  color:#111;
}

.btn.red{
  background:#e41e3f;
}

.btn.green{
  background:#31a24c;
}

.admin-list{
  padding:12px;
}

.admin-item{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  margin-bottom:10px;
}

.admin-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.footer{
  max-width:var(--max);
  margin:15px auto 0;
  padding:14px 12px 20px;
  color:#606770;
  font-size:12px;
  line-height:1.4;
}

.footer a{
  color:var(--fb);
  font-weight:800;
}

.bottomnav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  background:#fff;
  border-top:1px solid var(--line);
  box-shadow:0 -2px 10px rgba(0,0,0,.08);
  padding-bottom:env(safe-area-inset-bottom);
}

.bottomnav-inner{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  height:62px;
}

.bottom-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  color:#606770;
  font-size:11px;
  font-weight:800;
}

.bottom-item span{
  font-size:22px;
}

.bottom-item.active{
  color:var(--fb);
}

@media(min-width:760px){
  body{
    padding-bottom:24px;
  }

  .page{
    margin-top:14px;
  }

  .card{
    border-left:1px solid var(--line);
    border-right:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
  }

  .bottomnav{
    display:none;
  }
}

/* STEP 6 - foto intera, like e commenti */
.photo{
  background:#eef0f4;
  height:auto;
  min-height:260px;
  max-height:none;
}

.photo img{
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  display:block;
  background:#eef0f4;
}

.action-button{
  width:100%;
  border:0;
  background:transparent;
  color:#606770;
  font-weight:800;
  font-size:14px;
  padding:10px 2px;
  border-radius:8px;
}

.comments-box{
  border-top:1px solid var(--line);
  padding:8px 12px 12px;
  background:#fff;
}

.comment{
  background:#f0f2f5;
  border-radius:14px;
  padding:8px 10px;
  margin:7px 0;
  font-size:14px;
  line-height:1.35;
}

.comment strong{
  display:block;
  margin-bottom:2px;
}

.comment-form{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:10px;
}

.comment-form input{
  width:100%;
  border:1px solid #ccd0d5;
  border-radius:999px;
  padding:10px 12px;
  font-size:15px;
}

.comment-form button{
  align-self:flex-end;
  border:0;
  border-radius:999px;
  background:var(--fb);
  color:#fff;
  padding:9px 15px;
  font-weight:900;
}

.share-note{
  font-size:13px;
  color:#65676b;
  padding:0 12px 10px;
}

/* FOTO PROFILO RIDOTTA - ZampaSocial */
.post .photo{
  width:calc(100% - 24px);
  margin:0 12px 10px;
  border-radius:14px;
  background:#eef0f4;
  min-height:0;
  max-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid #e4e6eb;
}

.post .photo img{
  width:100%;
  height:auto;
  max-height:420px;
  object-fit:contain;
  display:block;
  background:#eef0f4;
}

.post .photo:not(:has(img)){
  min-height:220px;
  font-size:80px;
}

@media(max-width:520px){
  .post .photo{
    width:calc(100% - 28px);
    margin:0 14px 10px;
    max-height:330px;
  }

  .post .photo img{
    max-height:330px;
  }
}

/* STEP 8 - ZampaSocial info social/passeggiata */
.social-info{
  margin:0 12px 12px;
  padding:10px 12px;
  border-radius:13px;
  background:#f7f8fa;
  border:1px solid #e4e6eb;
  color:#3a3b3c;
  font-size:14px;
  line-height:1.45;
}

.social-info div{
  margin:4px 0;
}

.social-info strong{
  color:#1c1e21;
}

.notice strong{
  display:block;
  margin-bottom:3px;
}

/* STEP 11 - voce dell'animale */
.pet-voice{
  margin:0 12px 10px;
  padding:10px 12px;
  border-radius:13px;
  background:#eef6ff;
  border:1px solid #d8e9ff;
  color:#24415f;
  font-size:14px;
  line-height:1.4;
}

.pet-voice strong{
  color:#1877f2;
}

/* DISCLAIMER ZampaSocial */
.legal-disclaimer{
  margin-top:14px;
  padding:12px 13px;
  border-radius:13px;
  background:#fff8e5;
  border:1px solid #f2d28b;
  color:#5f4300;
  font-size:12px;
  line-height:1.45;
}

.legal-disclaimer strong{
  display:block;
  color:#3d2a00;
  font-size:13px;
  margin-bottom:4px;
}

/* ZampaSocial WOW V1 */
body{
  background:
    radial-gradient(circle at top left, rgba(24,119,242,.12), transparent 32%),
    radial-gradient(circle at top right, rgba(255,184,77,.18), transparent 28%),
    #f0f2f5;
}

.topbar{
  backdrop-filter:saturate(140%) blur(10px);
  background:rgba(255,255,255,.96);
}

.logo{
  box-shadow:0 6px 16px rgba(24,119,242,.25);
}

.brand strong{
  font-weight:950;
}

.zampa-hero{
  margin:12px 10px 10px;
  padding:16px;
  border-radius:22px;
  background:
    linear-gradient(135deg, rgba(24,119,242,.96), rgba(10,82,190,.95)),
    radial-gradient(circle at 85% 10%, rgba(255,255,255,.35), transparent 22%);
  color:#fff;
  box-shadow:0 12px 28px rgba(24,119,242,.28);
  overflow:hidden;
  position:relative;
}

.zampa-hero:after{
  content:"🐶 🐱 🦜 🐰";
  position:absolute;
  right:-8px;
  bottom:-4px;
  font-size:52px;
  opacity:.18;
  transform:rotate(-8deg);
}

.zampa-hero-top{
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
  z-index:1;
}

.zampa-hero-logo{
  width:58px;
  height:58px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  font-size:33px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}

.zampa-hero h1{
  margin:0;
  font-size:32px;
  letter-spacing:-1px;
  line-height:1;
}

.zampa-hero p{
  margin:4px 0 0;
  font-size:15px;
  opacity:.92;
  font-weight:700;
}

.zampa-hero-text{
  margin-top:13px;
  font-size:15px;
  line-height:1.42;
  max-width:520px;
  position:relative;
  z-index:1;
}

.zampa-hero-actions{
  margin-top:14px;
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  position:relative;
  z-index:1;
}

.zampa-hero-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#fff;
  color:#1459c8;
  padding:10px 13px;
  font-weight:900;
  font-size:14px;
  box-shadow:0 4px 12px rgba(0,0,0,.14);
}

.zampa-hero-actions a:nth-child(2){
  background:rgba(255,255,255,.18);
  color:#fff;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:none;
}

.zampa-mini-rules{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.22);
  font-size:12px;
  line-height:1.35;
  opacity:.88;
  position:relative;
  z-index:1;
}

.composer{
  border-radius:18px;
  margin:10px;
  border:1px solid rgba(0,0,0,.06);
}

.composer .pill{
  font-weight:750;
  background:#f7f8fa;
}

.stories-wrap{
  margin:10px;
  border-radius:18px;
}

.story{
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}

.story.add{
  box-shadow:0 6px 16px rgba(24,119,242,.14);
}

.post{
  margin:10px;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.post-head{
  padding-top:14px;
}

.post-info strong{
  font-size:19px;
  font-weight:950;
  letter-spacing:-.2px;
}

.meta{
  font-size:13px;
}

.post-text{
  font-size:16px;
}

.pet-voice{
  background:linear-gradient(135deg,#eef6ff,#ffffff);
  border-color:#cfe5ff;
}

.social-info{
  background:linear-gradient(135deg,#f7f8fa,#ffffff);
}

.reactions{
  font-weight:750;
}

.post-actions{
  border-bottom:1px solid var(--line);
}

.post-actions a,
.post-actions div,
.action-button{
  transition:background .15s ease, transform .08s ease;
}

.post-actions a:active,
.post-actions div:active,
.action-button:active{
  transform:scale(.97);
  background:#eef2f7;
}

.comments-box{
  background:#fbfcfe;
}

.comment{
  background:#eef0f4;
}

.bottomnav{
  border-top:1px solid rgba(0,0,0,.08);
}

.bottom-item.active span{
  filter:drop-shadow(0 4px 8px rgba(24,119,242,.25));
}

.footer{
  margin:18px 10px 0;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
}

.legal-disclaimer{
  background:#fff8e5;
}

@media(min-width:760px){
  .zampa-hero,
  .composer,
  .stories-wrap,
  .post,
  .footer{
    margin-left:0;
    margin-right:0;
  }

  .zampa-hero{
    margin-top:18px;
  }
}

@media(max-width:420px){
  .zampa-hero h1{
    font-size:29px;
  }

  .zampa-hero-logo{
    width:52px;
    height:52px;
    border-radius:16px;
  }

  .zampa-hero-actions a{
    width:100%;
  }
}

/* ZampaSocial - mini tab social V1 */
.zampa-mini-tabs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:0 10px 8px;
  margin:2px 0 4px;
  scroll-snap-type:x mandatory;
}

.zampa-mini-tabs::-webkit-scrollbar{
  display:none;
}

.zampa-mini-tabs a{
  flex:0 0 auto;
  scroll-snap-align:start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 13px;
  border-radius:999px;
  background:#fff;
  border:1px solid #e4e6eb;
  color:#3a3b3c;
  font-size:14px;
  font-weight:900;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}

.zampa-mini-tabs a.active{
  background:#1877f2;
  border-color:#1877f2;
  color:#fff;
  box-shadow:0 8px 18px rgba(24,119,242,.22);
}

.zampa-soft-panels{
  margin:0 10px 8px;
  display:grid;
  gap:7px;
}

.zampa-soft-panel{
  padding:9px 11px;
  border-radius:14px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(0,0,0,.06);
  color:#4b5563;
  font-size:13px;
  line-height:1.35;
}

.zampa-soft-panel strong{
  display:block;
  color:#1c1e21;
  font-size:14px;
  margin-bottom:2px;
}

.zampa-soft-panel span{
  display:block;
}

@media(min-width:760px){
  .zampa-mini-tabs,
  .zampa-soft-panels{
    margin-left:0;
    margin-right:0;
    padding-left:0;
    padding-right:0;
  }

  .zampa-soft-panels{
    grid-template-columns:repeat(3,1fr);
  }
}

/* ZampaSocial - pagine sezioni V1 */
.small-hero{
  margin-bottom:10px;
}

.small-hero .zampa-hero-logo{
  width:52px;
  height:52px;
}

.small-hero h1{
  font-size:27px;
}

.tabs a.tab{
  text-decoration:none;
}

.tabs a.tab.active{
  color:#1877f2;
}

.tabs a.tab.active:after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:0;
  height:3px;
  background:#1877f2;
  border-radius:999px;
}

/* ZampaSocial - foto a fianco descrizione V1
   Desktop/tablet: testo a sinistra, foto a destra.
   Mobile: resta tutto impilato. */
@media(min-width:760px){

  .post{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(220px, 34%);
    column-gap:14px;
    align-items:start;
  }

  .post-head{
    grid-column:1 / -1;
  }

  .post-text,
  .pet-voice,
  .social-info{
    grid-column:1;
  }

  .post img.photo,
  .post .photo{
    grid-column:2;
    grid-row:2 / span 4;
    width:100%;
    max-width:100%;
    max-height:360px;
    object-fit:contain;
    margin:0;
    align-self:start;
    border-radius:18px;
    background:#eef0f4;
  }

  .post .reactions,
  .post .post-actions,
  .post .comments-box,
  .post form,
  .post .comment-form,
  .post .actions{
    grid-column:1 / -1;
  }
}

@media(min-width:1000px){
  .post{
    grid-template-columns:minmax(0, 1fr) minmax(260px, 38%);
  }

  .post img.photo,
  .post .photo{
    max-height:420px;
  }
}

/* ZampaSocial - fix proporzioni foto mobile V1
   Evita immagini allungate/stirate: la foto mantiene sempre il rapporto originale. */
.post img.photo,
.post .photo{
  display:block;
  width:100%;
  height:auto !important;
  max-width:100%;
  object-fit:contain !important;
  object-position:center center;
}

/* Mobile: foto intera, proporzionata, senza altezza forzata */
@media(max-width:759px){
  .post img.photo,
  .post .photo{
    width:100%;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    margin:10px auto 0;
    border-radius:18px;
  }
}

/* Desktop: resta affiancata, ma sempre proporzionata */
@media(min-width:760px){
  .post img.photo,
  .post .photo{
    height:auto !important;
    object-fit:contain !important;
  }
}

/* === ZAMPASOCIAL FACEBOOK RESTYLE START === */

:root{
  --fb-blue:#1877f2;
  --fb-blue-dark:#166fe5;
  --fb-bg:#f0f2f5;
  --fb-card:#ffffff;
  --fb-text:#1c1e21;
  --fb-muted:#65676b;
  --fb-line:#dddfe2;
  --fb-soft:#e4e6eb;
  --fb-soft-2:#f2f3f5;
  --fb-shadow:0 1px 2px rgba(0,0,0,.08), 0 6px 16px rgba(0,0,0,.06);
}

/* base */
html,body{
  background:var(--fb-bg) !important;
  color:var(--fb-text) !important;
}

body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
}

/* link */
a{
  color:var(--fb-blue);
  text-decoration:none;
}
a:hover{
  text-decoration:none;
}

/* contenitore generale */
main,
.app,
.wrap,
.layout,
.container,
.page,
.feed{
  max-width:980px;
}

/* header / top */
header,
.topbar,
.site-header,
.app-header{
  background:#fff !important;
  border-bottom:1px solid var(--fb-line) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.04) !important;
}

/* titolo/logo */
.brand,
.logo,
.site-title,
.header-title,
.top-title{
  color:var(--fb-blue) !important;
}

/* ricerca */
input[type="search"],
.search input,
.searchbar input,
input[name="q"]{
  background:var(--fb-soft-2) !important;
  border:1px solid transparent !important;
  border-radius:999px !important;
  color:var(--fb-text) !important;
  box-shadow:none !important;
}
input[type="search"]:focus,
.search input:focus,
.searchbar input:focus,
input[name="q"]:focus{
  border-color:#c7d2fe !important;
  background:#fff !important;
  outline:none !important;
}

/* schede */
article,
.card,
.post,
.post-card,
.feed article,
.feed > div,
.item,
.profile-card,
.pet-card,
.comments-box,
.story,
.box,
.panel{
  background:var(--fb-card) !important;
  border:1px solid var(--fb-line) !important;
  border-radius:16px !important;
  box-shadow:var(--fb-shadow) !important;
}

/* story / mini card */
.story{
  overflow:hidden;
}
.story.add{
  background:#fff !important;
}

/* tabs / menu icone */
.tabs,
.iconbar,
.nav-icons,
.segmented{
  background:#fff !important;
  border-bottom:1px solid var(--fb-line) !important;
}

.tabs a,
.tabs button,
.tab,
.nav-icons a,
.iconbar a{
  color:var(--fb-muted) !important;
  border-radius:10px !important;
  transition:all .15s ease;
}

.tabs a:hover,
.tabs button:hover,
.tab:hover,
.nav-icons a:hover,
.iconbar a:hover{
  background:#f2f3f5 !important;
  color:var(--fb-blue) !important;
}

.tabs .active,
.tabs a.active,
.tabs button.active,
.tab.active{
  color:var(--fb-blue) !important;
  border-bottom:3px solid var(--fb-blue) !important;
  background:transparent !important;
}

/* pulsanti */
button,
.btn,
.round-btn,
.pill,
input[type="submit"],
.comment-form button{
  border-radius:10px !important;
  font-weight:600 !important;
  border:1px solid transparent !important;
  transition:all .15s ease;
}

/* bottone rotondo tipo Facebook */
.round-btn{
  background:var(--fb-soft) !important;
  color:var(--fb-text) !important;
}
.round-btn:hover{
  background:#d8dadf !important;
}

/* pill / CTA */
.pill,
.btn-primary,
button.primary,
input[type="submit"]{
  background:var(--fb-blue) !important;
  color:#fff !important;
}
.pill:hover,
.btn-primary:hover,
button.primary:hover,
input[type="submit"]:hover{
  background:var(--fb-blue-dark) !important;
}

/* azioni like/comment/share */
.actions,
.post-actions,
.action-row{
  border-top:1px solid var(--fb-line) !important;
}

.actions a,
.actions button,
.post-actions a,
.post-actions button,
.bottom-item{
  color:var(--fb-muted) !important;
  background:transparent !important;
}

.actions a:hover,
.actions button:hover,
.post-actions a:hover,
.post-actions button:hover,
.bottom-item:hover{
  background:#f2f3f5 !important;
  color:var(--fb-blue) !important;
  border-radius:10px !important;
}

/* contatori / meta */
.meta,
.sub,
.small,
.muted,
.stats,
.count,
.info-line,
.post-meta{
  color:var(--fb-muted) !important;
}

/* bubble numeri */
.bubble{
  background:#e7f3ff !important;
  color:var(--fb-blue) !important;
  border-radius:999px !important;
  padding:.1rem .45rem !important;
}

/* campi commento */
input[type="text"],
textarea,
.comment-form input,
.comment-form textarea{
  background:#fff !important;
  border:1px solid var(--fb-line) !important;
  border-radius:14px !important;
  color:var(--fb-text) !important;
  box-shadow:none !important;
}
input[type="text"]:focus,
textarea:focus,
.comment-form input:focus,
.comment-form textarea:focus{
  border-color:#bcd3ff !important;
  outline:none !important;
}

/* card commenti */
.comment,
.comments-box{
  background:#fff !important;
}

/* immagini */
img{
  border-radius:14px !important;
}

/* bottom nav mobile */
.bottomnav,
.bottom-nav,
.mobile-nav{
  background:#fff !important;
  border-top:1px solid var(--fb-line) !important;
  box-shadow:0 -1px 4px rgba(0,0,0,.05) !important;
}

/* blocchi evidenza */
.notice,
.info,
.highlight{
  background:#f7f8fa !important;
  border:1px solid var(--fb-line) !important;
  border-radius:14px !important;
  color:var(--fb-text) !important;
}

/* admin: solo alleggerimento, senza stravolgere */
.admin-card,
.admin-item{
  background:#fff !important;
  border:1px solid var(--fb-line) !important;
  border-radius:16px !important;
  box-shadow:var(--fb-shadow) !important;
}

/* mobile */
@media (max-width: 700px){
  article,
  .card,
  .post,
  .post-card,
  .feed article,
  .feed > div,
  .item,
  .profile-card,
  .pet-card{
    border-radius:14px !important;
  }

  .tabs a,
  .tabs button,
  .tab{
    min-height:44px;
  }

  button,
  .btn,
  .pill,
  input[type="submit"]{
    min-height:42px;
  }
}

/* === ZAMPASOCIAL FACEBOOK RESTYLE END === */

/* === ZAMPASOCIAL CENTRA AREA BASSA START === */

/*
  Centra la zona bassa: crediti, note, box privacy/regole.
  Solo CSS: non tocca logica, dati o form.
*/

footer,
.footer,
.site-footer,
.credits,
.legal,
.legal-footer,
.project-footer,
.privacy-note,
.disclaimer,
.note-important,
.zampa-note,
.zs-note,
.zs-footer{
  max-width: 760px !important;
  width: calc(100% - 28px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Se il box nota importante è dentro la colonna principale, resta centrato e leggibile */
footer .note,
footer .notice,
.footer .note,
.footer .notice,
.legal .note,
.legal .notice,
.disclaimer .note,
.disclaimer .notice{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Testi lunghi leggibili, ma blocco centrato */
footer,
.footer,
.legal,
.disclaimer,
.privacy-note,
.note-important,
.zampa-note{
  text-align: left !important;
}

/* Link “Torna a Vivere Ponderano” più ordinato */
footer a,
.footer a,
.legal a,
.disclaimer a,
.privacy-note a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

/* Mobile: niente bordi schiacciati */
@media(max-width: 700px){
  footer,
  .footer,
  .site-footer,
  .credits,
  .legal,
  .legal-footer,
  .project-footer,
  .privacy-note,
  .disclaimer,
  .note-important,
  .zampa-note,
  .zs-note,
  .zs-footer{
    width: calc(100% - 18px) !important;
    max-width: 100% !important;
  }
}

/* === ZAMPASOCIAL CENTRA AREA BASSA END === */



/* === ZAMPASOCIAL TABS LINK VERI V4 START === */

.tabs{
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
  gap:4px !important;
  pointer-events:auto !important;
}

.tabs a.tab{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  min-height:52px !important;
  text-decoration:none !important;
  color:#1c1e21 !important;
  cursor:pointer !important;
  pointer-events:auto !important;
  border-radius:12px !important;
  position:relative !important;
  z-index:5 !important;
}

.tabs a.tab:hover{
  background:#e7f3ff !important;
  color:#1877f2 !important;
}

.tabs a.tab.active{
  color:#1877f2 !important;
  background:#eef5ff !important;
}

.tabs a.tab .tab-ico{
  display:block !important;
  font-size:1.25rem !important;
  line-height:1 !important;
}

.tabs a.tab .tab-label{
  display:block !important;
  font-size:.66rem !important;
  line-height:1 !important;
  font-weight:850 !important;
}

@media(max-width:560px){
  .tabs a.tab{
    min-height:48px !important;
  }

  .tabs a.tab .tab-ico{
    font-size:1.12rem !important;
  }

  .tabs a.tab .tab-label{
    font-size:.58rem !important;
  }
}

/* === ZAMPASOCIAL TABS LINK VERI V4 END === */



/* === ZAMPASOCIAL NO DUP LABELS START === */

/* Le etichette ora sono vere nel markup: niente doppioni via ::before */
.tabs .tab::before{
  content:none !important;
  display:none !important;
}

.tabs a.tab{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  min-height:52px !important;
}

.tabs a.tab .tab-ico{
  display:block !important;
  font-size:1.22rem !important;
  line-height:1 !important;
}

.tabs a.tab .tab-label{
  display:block !important;
  font-size:.64rem !important;
  font-weight:850 !important;
  line-height:1 !important;
  color:inherit !important;
  margin-top:2px !important;
}

/* === ZAMPASOCIAL NO DUP LABELS END === */

/* === ZAMPASOCIAL SOCIAL V1 === */
:root{
  --zampa:#176b62;
  --zampa-dark:#0f4f49;
  --zampa-soft:#e5f3ef;
  --zampa-accent:#e76f51;
  --zampa-cream:#f7f4ee;
  --zampa-card:#fffdfa;
  --zampa-text:#243330;
  --zampa-muted:#61716d;
  --zampa-line:#dce6e2;
  --zampa-shadow:0 8px 24px rgba(24,67,61,.08);
  --max:720px;
  --fb:#176b62;
  --fb-blue:#176b62;
  --fb-blue-dark:#0f4f49;
  --fb-soft:#e5f3ef;
  --fb-soft-2:#f0f7f5;
  --fb-card:#fffdfa;
  --fb-text:#243330;
  --fb-muted:#61716d;
  --fb-line:#dce6e2;
  --fb-bg:#f7f4ee;
  --fb-shadow:var(--zampa-shadow);
}

html{scroll-behavior:smooth}

body{
  background:var(--zampa-cream) !important;
  color:var(--zampa-text) !important;
  padding-bottom:82px !important;
}

.topbar,
.zs-top{
  position:sticky !important;
  top:0 !important;
  z-index:50 !important;
  background:rgba(255,253,250,.97) !important;
  border-bottom:1px solid var(--zampa-line) !important;
  box-shadow:0 3px 14px rgba(24,67,61,.06) !important;
  backdrop-filter:blur(12px);
}

.toprow,
.zs-top,
.tabs,
.zs-tabs,
.page,
.zs-page{
  width:min(100%,720px) !important;
  max-width:720px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.toprow{padding:10px 14px !important}

.logo,
.zs-logo{
  background:linear-gradient(145deg,var(--zampa),#2c8a7e) !important;
  color:#fff !important;
  box-shadow:0 5px 14px rgba(23,107,98,.22) !important;
}

.brand strong,
.zs-brand{
  color:var(--zampa-dark) !important;
}

.brand small,
.post-info .meta,
.meta{
  color:var(--zampa-muted) !important;
}

.round-btn,
.zs-back{
  background:var(--zampa-soft) !important;
  color:var(--zampa-dark) !important;
  border:1px solid #cfe4de !important;
}

.search{
  background:#f0f6f4 !important;
  border:1px solid var(--zampa-line) !important;
}

.tabs,
.zs-tabs{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  background:var(--zampa-card) !important;
  border-top:1px solid #edf1ef !important;
  border-bottom:0 !important;
}

.tabs a.tab,
.zs-tabs a{
  min-height:54px !important;
  color:var(--zampa-muted) !important;
  background:transparent !important;
  border:0 !important;
  border-bottom:3px solid transparent !important;
  border-radius:0 !important;
  font-weight:800 !important;
}

.tabs a.tab:hover,
.tabs a.tab.active,
.zs-tabs a:hover,
.zs-tabs a.active{
  color:var(--zampa-dark) !important;
  background:var(--zampa-soft) !important;
  border-bottom-color:var(--zampa-accent) !important;
}

.page,
.zs-page{padding:0 12px 22px !important}

.zampa-hero,
.zs-hero{
  margin:14px 0 12px !important;
  padding:22px !important;
  border:1px solid #cfe5df !important;
  border-radius:22px !important;
  background:linear-gradient(145deg,#e8f5f1 0%,#fff8ed 100%) !important;
  color:var(--zampa-text) !important;
  box-shadow:var(--zampa-shadow) !important;
}

.zampa-hero h1,
.zs-hero h1{color:var(--zampa-dark) !important}

.zampa-hero-logo{
  background:var(--zampa-card) !important;
  border:1px solid #cfe5df !important;
  box-shadow:0 6px 16px rgba(23,107,98,.12) !important;
}

.zampa-hero-actions a,
.btn,
.zs-btn{
  min-height:46px !important;
  border-radius:13px !important;
  background:var(--zampa) !important;
  color:#fff !important;
  border:1px solid var(--zampa) !important;
  font-weight:850 !important;
  box-shadow:0 5px 14px rgba(23,107,98,.16) !important;
}

.zampa-hero-actions a + a,
.btn.secondary,
.zs-btn.secondary{
  background:var(--zampa-card) !important;
  color:var(--zampa-dark) !important;
  border-color:#bcd9d2 !important;
  box-shadow:none !important;
}

.zampa-mini-rules,
.notice,
.zs-note{
  background:#fff7e7 !important;
  border:1px solid #efdfba !important;
  color:#624d27 !important;
  border-radius:14px !important;
}

.card,
.zs-card{
  margin:0 0 12px !important;
  background:var(--zampa-card) !important;
  border:1px solid var(--zampa-line) !important;
  border-radius:18px !important;
  box-shadow:var(--zampa-shadow) !important;
}

.composer{padding:13px !important}
.composer .pill{
  background:#f0f6f4 !important;
  color:var(--zampa-dark) !important;
  border:1px solid var(--zampa-line) !important;
}
.composer-actions a{color:var(--zampa-dark) !important}

.zampa-mini-tabs{
  margin:0 0 12px !important;
  padding:6px !important;
  background:#edf5f2 !important;
  border:1px solid var(--zampa-line) !important;
  border-radius:16px !important;
}
.zampa-mini-tabs a{color:var(--zampa-muted) !important}
.zampa-mini-tabs a.active{
  color:var(--zampa-dark) !important;
  background:var(--zampa-card) !important;
  border-color:#cfe2dd !important;
}

.stories-wrap{margin:0 0 12px !important}
.story{box-shadow:0 5px 15px rgba(24,67,61,.1) !important}
.story.add .plus{background:var(--zampa-accent) !important}

.post{
  margin:0 0 16px !important;
  overflow:hidden !important;
  border-radius:20px !important;
}

.post-head{padding:14px 16px 12px !important}
.post-head .avatar{
  width:48px !important;
  height:48px !important;
  margin:0 !important;
  border:2px solid #d5e8e3 !important;
}
.post-info strong{
  color:var(--zampa-dark) !important;
  font-size:1.12rem !important;
}

.post > .photo{
  width:100% !important;
  height:auto !important;
  min-height:290px !important;
  aspect-ratio:4/3 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:#e7f1ee !important;
}
.post > .photo img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:0 !important;
}

.post-text{
  padding:15px 16px 10px !important;
  color:var(--zampa-text) !important;
  line-height:1.5 !important;
}
.post-text small{color:var(--zampa-muted) !important}

.pet-voice{
  margin:0 16px 10px !important;
  background:#eef7f4 !important;
  border:1px solid #d4e9e3 !important;
  color:var(--zampa-dark) !important;
  border-radius:13px !important;
}

.profile-pills{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:7px !important;
  margin:0 16px 14px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
}
.profile-pills > div{
  width:auto !important;
  padding:7px 10px !important;
  background:#f2f6f4 !important;
  border:1px solid var(--zampa-line) !important;
  border-radius:999px !important;
  color:#40514d !important;
  font-size:.82rem !important;
}

.reactions{padding:8px 16px !important;color:var(--zampa-muted) !important}
.bubble{background:var(--zampa-soft) !important;color:var(--zampa-dark) !important}

.post-actions{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  margin:0 12px !important;
  padding:5px 0 !important;
  border-top:1px solid var(--zampa-line) !important;
  border-bottom:1px solid var(--zampa-line) !important;
}
.post-actions form{margin:0 !important}
.post-actions a,
.post-actions button{
  width:100% !important;
  min-height:42px !important;
  color:var(--zampa-dark) !important;
  background:transparent !important;
  border:0 !important;
  border-radius:10px !important;
  font-weight:800 !important;
}
.post-actions a:hover,
.post-actions button:hover{background:var(--zampa-soft) !important}

.comments-box{
  margin:0 !important;
  padding:12px 16px 16px !important;
  background:#fbfcfa !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.comment{
  display:inline-block !important;
  margin:3px 0 !important;
  padding:8px 11px !important;
  background:#eef3f1 !important;
  border:0 !important;
  border-radius:14px !important;
  box-shadow:none !important;
}
.comment-form{gap:7px !important}
.comment-form input{
  border-color:var(--zampa-line) !important;
  background:#fff !important;
}
.comment-form button{background:var(--zampa) !important;color:#fff !important}

.form{padding:20px !important}
.form h1{color:var(--zampa-dark) !important}
.form-step-title{
  display:flex;
  align-items:center;
  gap:9px;
  margin:24px 0 12px;
  color:var(--zampa-dark);
  font-size:1.05rem;
}
.form-step-title span{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--zampa-accent);
  color:#fff;
}
.field input,
.field select,
.field textarea,
.zs-form input,
.zs-form select,
.zs-form textarea{
  border:1px solid var(--zampa-line) !important;
  border-radius:12px !important;
  background:#fff !important;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.zs-form input:focus,
.zs-form select:focus,
.zs-form textarea:focus{
  border-color:var(--zampa) !important;
  box-shadow:0 0 0 3px rgba(23,107,98,.12) !important;
  outline:0 !important;
}

.zs-top{padding:9px 14px !important}
.zs-tabs{display:grid !important;padding:0 !important}
.zs-tabs a{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  padding:7px 2px !important;
  font-size:.65rem !important;
}
.zs-tabs a span{font-size:1.15rem !important}
.zs-page{padding-top:12px !important}
.zs-card{padding:18px !important}
.zs-mini{
  background:#f1f7f5 !important;
  border:1px solid var(--zampa-line) !important;
  box-shadow:none !important;
}

.bottomnav{
  background:rgba(255,253,250,.98) !important;
  border-top:1px solid var(--zampa-line) !important;
  box-shadow:0 -5px 18px rgba(24,67,61,.08) !important;
}
.bottomnav-inner{
  width:min(100%,720px) !important;
  max-width:720px !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
.bottom-item{color:var(--zampa-muted) !important}
.bottom-item.active{color:var(--zampa-dark) !important}
.bottom-item:nth-child(3) span{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  margin:-11px auto 2px;
  border-radius:50%;
  background:var(--zampa-accent);
  color:#fff;
  box-shadow:0 5px 13px rgba(176,72,50,.25);
}

.footer{color:var(--zampa-muted) !important}

@media(max-width:560px){
  .page,.zs-page{padding-left:0 !important;padding-right:0 !important}
  .zampa-hero,.zs-hero,.notice,.zampa-mini-tabs{margin-left:10px !important;margin-right:10px !important}
  .card,.zs-card{border-left:0 !important;border-right:0 !important;border-radius:0 !important}
  .zampa-hero,.zs-hero{border-radius:18px !important}
  .tabs a.tab .tab-label{font-size:.6rem !important}
  .post > .photo{min-height:260px !important;aspect-ratio:1/1 !important}
  .post-actions a,.post-actions button{font-size:.78rem !important;padding:7px 3px !important}
  .comment-form{grid-template-columns:1fr !important}
}
/* === FINE ZAMPASOCIAL SOCIAL V1 === */

/* ZS_PRESENTA_MINIMAL_START */

.zs-presenta-toprow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:62px;
  padding:9px 15px;
}

.zs-presenta-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  color:inherit;
  text-decoration:none;
}

.zs-presenta-paw{
  display:inline-block;
  flex:0 0 auto;
  width:auto;
  height:auto;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  font-size:1.25rem;
  line-height:1;
}

.zs-presenta-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
  line-height:1.08;
}

.zs-presenta-copy strong{
  color:#164e49;
  font-size:1.13rem;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.zs-presenta-copy small{
  margin-top:4px;
  color:#758481;
  font-size:.72rem;
  font-weight:500;
}

.zs-presenta-exit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:36px;
  padding:7px 11px;
  border:1px solid #cfe2df;
  border-radius:11px;
  background:#f1f8f7;
  color:#17665f;
  text-decoration:none;
  font-size:.82rem;
  font-weight:750;
  line-height:1;
}

.zs-presenta-exit:hover,
.zs-presenta-exit:focus-visible{
  background:#e4f2f0;
  border-color:#add3ce;
}

@media (max-width:520px){
  .zs-presenta-toprow{
    gap:9px;
    padding:8px 11px;
  }

  .zs-presenta-paw{
    font-size:1.12rem;
  }

  .zs-presenta-copy strong{
    font-size:1rem;
  }

  .zs-presenta-exit{
    min-height:34px;
    padding:7px 9px;
    font-size:.76rem;
  }
}

/* ZS_PRESENTA_MINIMAL_END */

/* ZS_HEADER_GLOBAL_MINI_PAW_START */

/*
 * Zampetta semplice per tutte le testate ZampaSocial:
 * pubbliche, amministrative e Regia.
 */
.topbar .logo,
.topbar .zs-presenta-paw{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  flex:0 0 auto !important;

  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  border-radius:0 !important;

  background:transparent !important;
  background-color:transparent !important;

  box-shadow:none !important;
  filter:none !important;

  font-size:1.18rem !important;
  line-height:1 !important;
  text-decoration:none !important;
}

/* Il pulsante per uscire verso Vivere Ponderano. */
.topbar .zs-site-exit,
.topbar .zs-presenta-exit{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:auto !important;
  min-width:auto !important;
  height:auto !important;
  min-height:36px !important;

  padding:7px 10px !important;

  border:1px solid #cfe2df !important;
  border-radius:10px !important;

  background:#f1f8f7 !important;
  color:#17665f !important;

  font-size:.78rem !important;
  font-weight:750 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  text-decoration:none !important;
}

.topbar .zs-site-exit:hover,
.topbar .zs-site-exit:focus-visible,
.topbar .zs-presenta-exit:hover,
.topbar .zs-presenta-exit:focus-visible{
  background:#e3f2ef !important;
  border-color:#acd2cd !important;
}

@media (max-width:520px){
  .topbar .logo,
  .topbar .zs-presenta-paw{
    font-size:1.08rem !important;
  }

  .topbar .zs-site-exit,
  .topbar .zs-presenta-exit{
    min-height:34px !important;
    padding:6px 8px !important;
    font-size:.73rem !important;
  }
}

/* ZS_HEADER_GLOBAL_MINI_PAW_END */

/* ZS_PAW_SVG_MINIMAL_START */

/*
 * Nasconde l'emoji colorata e mostra una vera
 * zampetta SVG semplice e monocromatica.
 */
.topbar .logo,
.topbar .zs-presenta-paw,
.zs-top .zs-logo{
  display:inline-block !important;
  flex:0 0 22px !important;

  width:22px !important;
  min-width:22px !important;
  height:22px !important;
  min-height:22px !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  border-radius:0 !important;

  background:#14776f !important;
  box-shadow:none !important;

  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;

  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5.5' cy='7.5' r='2.4'/%3E%3Ccircle cx='10.1' cy='4.8' r='2.3'/%3E%3Ccircle cx='14.9' cy='4.8' r='2.3'/%3E%3Ccircle cx='19' cy='7.8' r='2.4'/%3E%3Cpath d='M12.2 10.3c-3.6 0-6.5 2.8-6.5 6.1 0 2.5 1.8 4.1 4.1 3.3.8-.3 1.6-.6 2.4-.6.9 0 1.7.3 2.5.6 2.3.8 4.1-.8 4.1-3.3 0-3.3-3-6.1-6.6-6.1Z'/%3E%3C/svg%3E")
    center / contain no-repeat !important;

  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5.5' cy='7.5' r='2.4'/%3E%3Ccircle cx='10.1' cy='4.8' r='2.3'/%3E%3Ccircle cx='14.9' cy='4.8' r='2.3'/%3E%3Ccircle cx='19' cy='7.8' r='2.4'/%3E%3Cpath d='M12.2 10.3c-3.6 0-6.5 2.8-6.5 6.1 0 2.5 1.8 4.1 4.1 3.3.8-.3 1.6-.6 2.4-.6.9 0 1.7.3 2.5.6 2.3.8 4.1-.8 4.1-3.3 0-3.3-3-6.1-6.6-6.1Z'/%3E%3C/svg%3E")
    center / contain no-repeat !important;
}

@media (max-width:520px){
  .topbar .logo,
  .topbar .zs-presenta-paw,
  .zs-top .zs-logo{
    flex-basis:20px !important;
    width:20px !important;
    min-width:20px !important;
    height:20px !important;
    min-height:20px !important;
  }
}

/* ZS_PAW_SVG_MINIMAL_END */