/* ST Reviews Widget CSS v6.5 */
.str{
  --n:#1A2744;--b:#2F5496;--bl:#EBF1FB;
  --or:#F5A623;--or2:#E8950F;--or-lt:#FFF4E0;--or-bd:#F9D48E;
  --gr:#2A8A4A;--gr2:#1E6B39;
  --off:#F8F9FC;--gy:#6B7A99;--bd:#DDE3EF;--wh:#fff;
  font-family:'DM Sans',sans-serif;
  background:var(--off);
  position:relative;overflow:hidden;
  width:calc(100% - 40px);margin:0 auto;
  border-radius:14px;
  box-shadow:0 4px 32px rgba(26,39,68,.09);
  -webkit-font-smoothing:antialiased;
  box-sizing:border-box;
}
.str::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--n) 0%,var(--b) 38%,var(--or) 68%,var(--or2) 100%);
  z-index:2;border-radius:14px 14px 0 0;
}
.str *{box-sizing:border-box;margin:0;padding:0}

/* ══ LAYOUT DESKTOP ══ */
.str__main{
  display:grid;
  grid-template-columns:260px minmax(0,1fr) 258px;
  height:clamp(360px,55vh,580px);
  align-items:stretch;
  border-radius:0 0 14px 14px;overflow:hidden;
}

/* ── COL 1 ── */
.str__hcol{
  background:linear-gradient(170deg,#fff 0%,var(--off) 100%);
  border-right:1px solid var(--bd);
  padding:20px 16px 18px;
  display:flex;flex-direction:column;gap:11px;
  overflow:hidden;
}

/* Titolo col 1 con icona */
.str__col-title{
  display:flex;align-items:center;gap:8px;
  font-family:'Syne',sans-serif;font-size:1.45rem;font-weight:800;
  color:var(--n);letter-spacing:-.03em;line-height:1;
  flex-shrink:0;
}
.str__col-title-icon{
  width:28px;height:28px;flex-shrink:0;
  background:linear-gradient(135deg,var(--or) 0%,var(--or2) 100%);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(245,166,35,.35);
}
.str__col-title-icon svg{width:15px;height:15px;display:block}

.str__m-subtitle{display:none} /* mobile only */

.str__col-acts{
  display:flex;flex-direction:column;gap:7px;flex-shrink:0;
}
.str__see-all-btn{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-radius:10px;
  background:var(--n);color:#fff;
  font-family:'DM Sans',sans-serif;font-size:.69rem;font-weight:700;
  text-decoration:none;gap:8px;
  transition:background .2s,transform .15s;
  box-shadow:0 3px 10px rgba(26,39,68,.18);
}
.str__see-all-btn:hover{background:var(--b);transform:translateY(-1px)}
.str__see-all-btn svg{width:13px;height:13px;flex-shrink:0;opacity:.85}

.str__plat{
  display:inline-flex;align-items:center;gap:7px;padding:8px 12px;
  border:1.5px solid var(--bd);border-radius:50px;
  font-size:.65rem;font-weight:600;
  color:var(--n);text-decoration:none;background:var(--off);
  transition:border-color .2s,background .2s,color .2s;
}
.str__plat:hover{border-color:var(--or);background:var(--or-lt);color:var(--or2)}

.str__social-wrap{
  margin-top:auto;display:flex;flex-direction:column;gap:7px;
  padding-top:11px;border-top:1px solid var(--bd);flex-shrink:0;
}
.str__social-label{
  font-size:.5rem;font-weight:700;color:var(--gy);
  text-transform:uppercase;letter-spacing:.09em;
}
.str__socials{display:flex;gap:7px;flex-wrap:wrap;}
.str__soc{
  width:32px;height:32px;border-radius:9px;
  background:var(--off);border:1.5px solid var(--bd);
  display:flex;align-items:center;justify-content:center;
  color:var(--n);transition:background .18s,border-color .18s,color .18s,transform .18s;
  text-decoration:none;flex-shrink:0;
}
.str__soc:hover{background:var(--or-lt);border-color:var(--or);color:var(--or2);transform:translateY(-2px)}
.str__soc svg{width:15px;height:15px;display:block}

/* ── COL 2 (centro) ── */
.str__center{
  display:flex;flex-direction:column;
  border-right:1px solid var(--bd);
  overflow:hidden;min-width:0;
  /* padding interno per staccare la card dai bordi della colonna */
  padding-left:12px;padding-right:12px;
}

.str__vport{
  flex:1;
  overflow:hidden;
  position:relative;
  min-height:0;
}
.str__vtrack{
  display:flex;flex-direction:column;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.str__vloading{
  padding:20px;text-align:center;color:var(--gy);font-size:.8rem;
  display:flex;align-items:center;justify-content:center;height:100%;
}

/* card principale — centrata vert + orizz */
.str-vc{
  padding:0 22px;           /* padding orizzontale; verticale gestito da flex */
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  justify-content:center;   /* centra verticalmente nella card (= full viewport height) */
  gap:6px;
  position:relative;overflow:hidden;background:#fff;
  border-radius:10px;
  box-shadow:0 2px 12px rgba(26,39,68,.06);
}
/* Riga superiore: avatar + meta affiancati */
.str-vc__row{
  display:flex;align-items:center;gap:14px;
  padding-top:20px;         /* respiro sopra */
  flex-shrink:0;
}
.str-vc::before{
  content:'\201C';position:absolute;top:-10px;right:16px;
  font-family:Georgia,serif;font-size:7rem;
  color:var(--or-lt);line-height:1;pointer-events:none;z-index:0;
}
.str-vc::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--or),transparent);
  border-radius:0 0 10px 10px;
}
.str-vc__av{
  width:56px;height:56px;border-radius:50%;flex-shrink:0;
  background:var(--or-lt);border:3px solid #fff;
  box-shadow:0 3px 12px rgba(245,166,35,.3);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:'Syne',sans-serif;font-size:.86rem;font-weight:800;color:var(--or2);
  z-index:1;flex-shrink:0;
}
.str-vc__av img{width:100%;height:100%;object-fit:cover}
.str-vc__photos{
  flex-shrink:0;
  position:relative;overflow:hidden;
  border-radius:8px;max-height:80px;
  margin-top:4px;background:var(--off);display:none;
}
.str-vc__photos.has-photos{display:block}
.str-vc__photo-track{display:flex;transition:transform .4s ease;}
.str-vc__photo-track img{width:100%;flex-shrink:0;height:80px;object-fit:cover;border-radius:8px;}
.str-vc__photo-nav{position:absolute;bottom:5px;right:6px;display:flex;gap:4px;align-items:center;}
.str-vc__photo-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;border:none;padding:0;transition:background .2s,width .2s;}
.str-vc__photo-dot.on{background:#fff;width:12px;border-radius:3px}
.str-vc__photo-arr{background:rgba(0,0,0,.38);border:none;border-radius:50%;width:18px;height:18px;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.6rem;transition:background .2s;}
.str-vc__photo-arr:hover{background:rgba(0,0,0,.6)}
.str-vc__meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;z-index:1;flex:1;min-width:0;}
.str-vc__name{font-family:'Syne',sans-serif;font-size:.88rem;font-weight:800;color:var(--n)}
.str-vc__loc{font-size:.62rem;color:var(--gy)}
.str-vc__src{font-size:.6rem;font-weight:600;color:var(--gy);display:inline-flex;align-items:center;gap:3px}
.str-vc__stars{display:flex;gap:2px}.str-vc__stars span{font-size:.74rem}
.str-vc__txt{
  flex-shrink:0;
  font-size:.81rem;line-height:1.65;color:#334067;
  overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:5;-webkit-box-orient:vertical;
  position:relative;z-index:1;
}
.str-vc__date{font-size:.57rem;color:var(--gy);z-index:1;flex-shrink:0;padding-bottom:18px;}
.str-vc__glink{
  position:absolute;top:12px;right:12px;
  width:22px;height:22px;border-radius:50%;
  background:var(--bl);border:1px solid var(--bd);
  display:flex;align-items:center;justify-content:center;
  color:var(--b);font-size:.66rem;font-weight:800;
  text-decoration:none;transition:background .2s,color .2s;z-index:2;
}
.str-vc__glink:hover{background:var(--b);color:#fff}

/* ── Footer colonna centro: progress + frecce ── */
.str__center-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 0 10px;
  flex-shrink:0;gap:10px;
}

/* Barra di progresso */
.str__progress{
  flex:1;height:3px;background:var(--bd);border-radius:2px;overflow:hidden;
}
.str__progress-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--or),var(--or2));
  border-radius:2px;
}

/* Frecce navigazione — in basso a sinistra */
.str__cnav{
  display:flex;gap:6px;flex-shrink:0;
}
.str__cna{
  width:30px;height:30px;border-radius:50%;
  background:#fff;border:1.5px solid var(--bd);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--n);
  transition:background .2s,border-color .2s,color .2s,transform .15s,box-shadow .2s;
  box-shadow:0 2px 6px rgba(26,39,68,.1);
  flex-shrink:0;
}
.str__cna:hover{
  background:var(--or);border-color:var(--or);color:#fff;
  box-shadow:0 3px 10px rgba(245,166,35,.4);transform:scale(1.08);
}
.str__cna svg{width:11px;height:11px;display:block;pointer-events:none}

/* ── COL 3 (pannello dx) ── */
.str__panel{
  padding:18px 14px 16px;
  display:flex;flex-direction:column;gap:9px;
  background:linear-gradient(160deg,#fff 0%,var(--off) 100%);
  overflow:hidden;
}
.str__panel-title{
  font-family:'Syne',sans-serif;font-size:.82rem;font-weight:800;
  color:var(--n);line-height:1.4;
  border-left:3px solid var(--or);padding-left:10px;
  flex-shrink:0;
}

/* Slider verticale col 3 */
.str__vslide{
  flex:1;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;
  scrollbar-width:thin;scrollbar-color:var(--bd) transparent;
  border:1px solid var(--bd);border-radius:8px;background:#fff;
}
.str__vslide::-webkit-scrollbar{width:3px}
.str__vslide::-webkit-scrollbar-track{background:transparent}
.str__vslide::-webkit-scrollbar-thumb{background:var(--bd);border-radius:2px}

.str-aside{
  display:flex;align-items:flex-start;gap:8px;
  padding:8px 10px;
  border-bottom:1px solid var(--bd);
  cursor:pointer;
  transition:background .18s,border-left-color .18s;
  border-left:3px solid transparent;
  flex-shrink:0;
}
.str-aside:last-child{border-bottom:none}
.str-aside:hover{background:var(--or-lt);border-left-color:var(--or-bd)}
.str-aside.active{background:var(--or-lt);border-left-color:var(--or)}
.str-aside__av{
  width:24px;height:24px;border-radius:50%;background:var(--or-lt);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;
  font-family:'Syne',sans-serif;font-size:.48rem;font-weight:800;color:var(--or2);
}
.str-aside__av img{width:100%;height:100%;object-fit:cover}
.str-aside__body{flex:1;min-width:0}
.str-aside__top{display:flex;align-items:center;justify-content:space-between;gap:3px;margin-bottom:1px}
.str-aside__name{
  font-family:'Syne',sans-serif;font-size:.58rem;font-weight:800;color:var(--n);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;
}
.str-aside__src{font-size:.5rem;display:flex;align-items:center;flex-shrink:0}
.str-aside__stars{display:flex;gap:1px;margin-bottom:2px}
.str-aside__stars span{font-size:.46rem}
.str-aside__txt{
  font-size:.57rem;line-height:1.4;color:var(--gy);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}

.str__lbtn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 12px;background:var(--or);color:#fff;
  font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:700;
  border-radius:50px;cursor:pointer;border:none;
  box-shadow:0 4px 14px rgba(245,166,35,.35);
  transition:background .2s,box-shadow .2s,transform .15s;
  flex-shrink:0;text-align:center;
}
.str__lbtn:hover{background:var(--or2);box-shadow:0 6px 18px rgba(245,166,35,.45);transform:translateY(-1px)}
.str__lbtn svg{width:11px;height:11px;flex-shrink:0}

.str__cta{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 12px;background:var(--n);color:#fff;
  font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:700;
  border-radius:50px;text-decoration:none;
  box-shadow:0 4px 14px rgba(26,39,68,.22);
  transition:background .2s,box-shadow .2s,transform .15s;
  flex-shrink:0;text-align:center;
}
.str__cta:hover{background:#243358;transform:translateY(-1px)}
.str__cta svg{width:11px;height:11px;flex-shrink:0}

/* mobile footer — nascosto su desktop */
.str__m-footer{display:none}

/* ══ POPUP ══ */
.str-overlay{display:none;position:fixed;inset:0;background:rgba(10,18,40,.65);z-index:99999;backdrop-filter:blur(5px);align-items:center;justify-content:center;padding:20px;}
.str-overlay.open{display:flex}
.str-modal{background:#fff;border-radius:18px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 64px rgba(10,18,40,.32);padding:28px 26px 24px;position:relative;animation:mIn .28s cubic-bezier(.4,0,.2,1);border-top:4px solid var(--or);}
@keyframes mIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.str-modal__x{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:var(--off);border:1.5px solid var(--bd);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--gy);font-size:.88rem;transition:background .2s,border-color .2s,color .2s;}
.str-modal__x:hover{background:var(--or-lt);border-color:var(--or-bd);color:var(--or2)}
.str-modal__title{font-family:'Syne',sans-serif;font-size:1.15rem;font-weight:800;color:var(--n);margin-bottom:4px}
.str-modal__sub{font-size:.74rem;color:var(--gy);margin-bottom:18px;line-height:1.5}
.str-modal__sub span{color:#C0392B}
.str-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.str-f{margin-bottom:12px}
.str-f label{display:block;font-size:.72rem;font-weight:600;color:var(--n);margin-bottom:4px}
.str-f label span{color:#C0392B}
.str-f label em{font-weight:400;color:var(--gy)}
.str-f input,.str-f textarea{width:100%;padding:9px 12px;border:1.5px solid var(--bd);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.82rem;color:var(--n);background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;}
.str-f input:focus,.str-f textarea:focus{border-color:var(--or);box-shadow:0 0 0 3px rgba(245,166,35,.15)}
.str-f textarea{resize:vertical;min-height:80px;line-height:1.55}
.str-count{font-size:.62rem;color:var(--gy);text-align:right;margin-top:3px}
.str-stars-pick{display:flex;gap:4px;margin-bottom:3px}
.str-stars-pick button{background:none;border:none;font-size:1.5rem;cursor:pointer;opacity:.2;transition:opacity .15s,transform .15s;padding:0;line-height:1;}
.str-stars-pick button:hover{transform:scale(1.15)}
.str-stars-pick button.lit{opacity:1}
.str-upload-area{border:2px dashed var(--bd);border-radius:10px;transition:border-color .2s,background .2s;background:var(--off)}
.str-upload-area:hover,.str-upload-area.drag{border-color:var(--or);background:var(--or-lt)}
.str-upload-trigger{display:block;padding:12px;text-align:center;cursor:pointer;}
.str-upload-trigger input{display:none}
.str-upload__ico{font-size:1.3rem}
.str-upload__txt{font-size:.68rem;color:var(--gy);display:block;margin-top:2px}
.str-photo-previews{display:flex;gap:6px;flex-wrap:wrap;padding:6px 8px 8px;}
.str-photo-thumb{position:relative;width:52px;height:52px;flex-shrink:0;}
.str-photo-thumb img{width:52px;height:52px;object-fit:cover;border-radius:7px;border:2px solid var(--or-bd);display:block;}
.str-photo-thumb__del{position:absolute;top:-5px;right:-5px;width:16px;height:16px;border-radius:50%;background:#C0392B;color:#fff;border:none;font-size:.55rem;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;line-height:1;}
.str-privacy{font-size:.62rem;color:var(--gy);line-height:1.5;margin-top:4px}
.str-submit{width:100%;padding:12px 16px;background:var(--or);color:#fff;font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:700;border:none;border-radius:50px;cursor:pointer;margin-top:10px;box-shadow:0 4px 14px rgba(245,166,35,.35);transition:background .2s,box-shadow .2s,transform .15s,opacity .2s;-webkit-appearance:none;appearance:none;}
.str-submit:hover:not(:disabled){background:var(--or2);box-shadow:0 6px 20px rgba(245,166,35,.45);transform:translateY(-1px)}
.str-submit:disabled{opacity:.55;cursor:not-allowed;transform:none;background:var(--or);color:#fff}
.str-msg{display:none;padding:12px 14px;border-radius:9px;font-size:.8rem;font-weight:600;margin-top:10px;line-height:1.45}
.str-msg.ok{background:#EDF7F1;color:#1E6B39;border:1.5px solid #A8D9B8;display:block;animation:msgIn .3s ease}
.str-msg.err{background:#FEF0EE;color:#C0392B;border:1.5px solid #F9C2BA;display:block;animation:msgIn .3s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes sPop{from{transform:scale(0);opacity:0}60%{transform:scale(1.25)}to{transform:scale(1);opacity:1}}

/* ══ 1100px ══ */
@media(max-width:1100px){
  .str__main{
    grid-template-columns:240px minmax(0,1fr) 238px;
  }
  .str__col-title{font-size:1.3rem}
  .str__center{padding-left:8px;padding-right:8px;}
}

/* ══════════════════════════════════════════════════════════════
   MOBILE ≤860px
══════════════════════════════════════════════════════════════ */
@media(max-width:860px){

  .str{width:100%;border-radius:12px;box-shadow:0 4px 20px rgba(26,39,68,.1)}

  .str{
    width:100%;  /* su mobile occupa tutto */
  }
  .str__main{
    display:flex;flex-direction:column;
    height:auto;overflow:visible;border-radius:0;
  }

  /* Col 1 mobile: titolo centrato + sottotitolo */
  .str__hcol{
    border-right:none;border-bottom:1px solid var(--bd);
    padding:16px 20px 14px;      /* più aria */
    gap:5px;flex-shrink:0;
    align-items:center;           /* centra orizzontalmente */
    text-align:center;
  }
  .str__col-title{
    font-size:1.18rem;
    justify-content:center;       /* centra icona+testo */
  }
  .str__m-subtitle{
    display:block;
    font-size:.7rem;font-weight:600;color:var(--gy);
    font-style:italic;
    border-left:3px solid var(--or);padding-left:9px;line-height:1.3;
    text-align:left;              /* testo allineato sx anche se centrato il wrapper */
  }
  .str__col-acts{display:none}
  .str__social-wrap{display:none}

  /* Col 2 centro mobile */
  .str__center{
    border-right:none;border-bottom:none;
    flex-shrink:0;contain:paint;overflow:hidden;
    padding-left:12px;padding-right:12px;
  }
  .str__vport{
    height:180px;min-height:180px;
    flex:none;overflow:hidden;contain:strict;
  }
  .str__vtrack{
    flex-direction:row;
    will-change:auto;
    transition:transform .45s cubic-bezier(.4,0,.2,1);
  }
  .str-vc{
    padding:0 14px;
    border-radius:8px;
    gap:5px;
  }
  .str-vc__row{ gap:10px; }
  .str-vc__av{width:40px;height:40px}
  .str-vc__txt{-webkit-line-clamp:3;font-size:.76rem;}
  .str-vc__name{font-size:.8rem}

  /* Frecce e barra anche su mobile */
  .str__center-footer{padding:6px 0 8px;}
  .str__cna{width:26px;height:26px}
  .str__cna svg{width:10px;height:10px}

  /* Col 3 nascosta */
  .str__panel{display:none}

  /* Footer mobile */
  .str__m-footer{
    display:flex;flex-direction:column;gap:8px;
    padding:14px 20px 18px;      /* più aria */
    border-top:1px solid var(--bd);flex-shrink:0;
  }
  .str__m-plat-row{display:flex;gap:8px}
  .str__m-plat-row .str__plat{flex:1;justify-content:center;font-size:.63rem;padding:8px 10px}
  .str__m-sep{border:none;border-top:1px solid var(--bd);margin:3px 0;flex-shrink:0;}
  .str__m-footer .str__lbtn{font-size:.68rem;padding:10px 14px}
  .str__m-footer .str__cta{font-size:.68rem;padding:10px 14px}
  .str__m-footer .str__see-all-btn{
    font-size:.67rem;padding:10px 14px;border-radius:8px;justify-content:center;
  }
}

@media(max-width:520px){
  .str{border-radius:10px}
  .str__hcol{padding:14px 16px 12px}
  .str__col-title{font-size:1.05rem}
  .str__vport{height:165px;min-height:165px}
  .str-vc{padding:0 12px;gap:4px;}
  .str-vc__row{gap:9px;}
  .str-vc__av{width:36px;height:36px}
  .str-vc__txt{font-size:.73rem;-webkit-line-clamp:3}
  .str__center{padding-left:10px;padding-right:10px;}
  .str__m-footer{padding:12px 16px 16px;gap:7px}
  .str__m-plat-row .str__plat{font-size:.6rem;padding:7px 8px}
  .str-modal{padding:22px 16px 18px;border-radius:14px}
  .str-row2{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .str__vtrack{animation:none!important;transition:none!important}
  .str-msg,.str-vc__photo-track{animation:none!important;transition:none!important}
  .str__progress-fill{transition:none!important}
}