/* FM Reviews — frontend styles (v1.10.4) */

/* z-index:0 crea un contesto di impilamento chiuso: tutto cio' che sta
   dentro il widget (frecce, avatar) resta confinato e non puo' finire sopra
   menu, dropdown o overlay del tema. */
.fmr-widget{--fmr-gap:16px;--fmr-cols:3;--fmr-lines:6;position:relative;z-index:0;max-width:1100px;margin:0 auto;box-sizing:border-box;isolation:isolate}
.fmr-widget *,.fmr-widget *::before,.fmr-widget *::after{box-sizing:border-box}
.fmr-track{display:flex;gap:var(--fmr-gap)}
.fmr-item{background:#fff;background-color:#fff;border:1px solid #e1e1e1;border-radius:14px;padding:18px;box-sizing:border-box;display:flex;flex-direction:column;color:#333;box-shadow:none;margin:0}
/* Intestazione della card. Usiamo un div (non <header>) e azzeriamo gli
   stili che temi e widget della barra laterale applicano ai contenitori:
   era da li' che arrivava la banda scura dietro il nome. */
.fmr-head,.fmr-item header{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:0;
	background:none;background-color:transparent;border:0;box-shadow:none;
	color:inherit;text-align:left;font-size:inherit;line-height:inherit;min-height:0;width:auto}
.fmr-head::before,.fmr-head::after{content:none;display:none}
.fmr-av{width:42px;height:42px;border-radius:50%;color:#ffffff;font-weight:700;font-size:15px;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;position:static;z-index:auto;text-shadow:none}
.fmr-hmeta{display:flex;flex-direction:column;line-height:1.3}
.fmr-au{font-weight:600;color:#232b2d;font-size:15px;line-height:1.3;text-transform:none;letter-spacing:normal}
.fmr-plat{font-size:12px;color:#6b7173;font-weight:400;text-transform:none;letter-spacing:normal}
.fmr-rate{color:#e8930c;letter-spacing:2px;margin-bottom:8px;font-size:15px}
/* Il testo ha altezza fissa e scorre: le card restano tutte uguali e nulla
   viene troncato. Quando c'e' testo oltre il bordo, la barra resta sempre
   visibile (classe .fmr-scrollable aggiunta via JS) piu' una sfumatura in
   fondo, cosi' si capisce a colpo d'occhio che si puo' scorrere. */
.fmr-body-wrap{position:relative;flex:0 0 auto}
.fmr-body{font-size:14px;line-height:1.55;color:#232b2d;margin:0;white-space:pre-line;
	height:calc(var(--fmr-lines,6) * 1.55em);
	overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
	padding-right:10px;
	scrollbar-width:thin;scrollbar-color:#c2c2c2 #ededed}

/* Barra sempre visibile (non overlay) quando il testo eccede. */
.fmr-body::-webkit-scrollbar{width:8px;-webkit-appearance:none}
.fmr-body::-webkit-scrollbar-track{background:#ededed;border-radius:4px}
.fmr-body::-webkit-scrollbar-thumb{background:#bdbdbd;border-radius:4px;border:2px solid #ededed}
.fmr-body::-webkit-scrollbar-thumb:hover{background:#9a9a9a}

/* Sfumatura di fondo: sparisce quando sei arrivato in fondo al testo. */
.fmr-body-wrap.fmr-scrollable::after{content:"";position:absolute;left:0;right:10px;bottom:0;
	height:26px;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);
	opacity:1;transition:opacity .18s}
.fmr-body-wrap.fmr-scrollable.fmr-at-end::after{opacity:0}

/* Slider: spazio laterale riservato alle frecce, cosi non si sovrappongono
   mai alle card (48px per lato). */
.fmr-slider{padding:0 62px}
.fmr-slider .fmr-track{overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.fmr-slider .fmr-track::-webkit-scrollbar{height:0;width:0}
.fmr-slider .fmr-item{flex:0 0 calc((100% - (var(--fmr-cols) - 1) * var(--fmr-gap)) / var(--fmr-cols));scroll-snap-align:start}

/* Frecce: disegnate in CSS (nessun carattere tipografico, sempre visibili
   qualunque font usi il tema). */
.fmr-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;padding:0;border-radius:50%;border:1px solid #ddd;background:#fff;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.10);z-index:2;font-size:0;line-height:0;color:transparent;-webkit-appearance:none;appearance:none}
.fmr-nav::before{content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;border-top:2px solid #333;border-right:2px solid #333;box-sizing:border-box}
.fmr-next::before{transform:translate(-65%,-50%) rotate(45deg)}
.fmr-prev::before{transform:translate(-35%,-50%) rotate(-135deg)}
.fmr-prev{left:10px}
.fmr-next{right:10px}
.fmr-nav:hover{background:#f5f5f5}
.fmr-nav:hover::before{border-color:#000}
.fmr-nav:focus-visible{outline:2px solid #1a73e8;outline-offset:2px}

/* Contenitore stretto (es. barra laterale): il JS misura la larghezza reale
   del contenitore - non della finestra - e imposta data-narrow. Frecce piu'
   piccole e meno spazio laterale, cosi' resta leggibile anche a 280px. */
.fmr-widget[data-narrow="1"].fmr-slider{padding:0 32px}
.fmr-widget[data-narrow="1"] .fmr-nav{width:26px;height:26px;box-shadow:0 1px 4px rgba(0,0,0,.10)}
.fmr-widget[data-narrow="1"] .fmr-nav::before{width:7px;height:7px;border-width:2px}
.fmr-widget[data-narrow="1"] .fmr-prev{left:0}
.fmr-widget[data-narrow="1"] .fmr-next{right:0}
.fmr-widget[data-narrow="1"] .fmr-item{padding:14px}
.fmr-widget[data-narrow="1"] .fmr-av{width:34px;height:34px;font-size:13px;letter-spacing:.3px}
.fmr-widget[data-narrow="1"] .fmr-body{font-size:13px}

/* Griglia */
.fmr-grid .fmr-track{display:grid;grid-template-columns:repeat(var(--fmr-cols),minmax(0,1fr))}

/* Elenco */
.fmr-list .fmr-track{flex-direction:column}
.fmr-list .fmr-item{width:100%}
.fmr-list .fmr-body{font-size:15px;height:auto;overflow:visible;padding-right:0}
.fmr-list .fmr-body-wrap::after{display:none}

/* Riepilogo */
.fmr-summary{display:inline-flex;align-items:center;gap:14px;background:#fff;border:1px solid #e1e1e1;border-radius:14px;padding:14px 20px}
.fmr-sum-score{font-size:38px;font-weight:700;line-height:1;color:#1a1a1a}
.fmr-sum-right{display:flex;flex-direction:column;gap:2px}
.fmr-summary .fmr-rate{margin:0;font-size:18px}
.fmr-sum-count{font-size:13px;color:#6b6b6b}

/* Le colonne sono calcolate dal JS sulla larghezza del CONTENITORE (vedi
   fitColumns in fmr.js), quindi qui niente override di flex-basis: creerebbero
   conflitto. Restano solo le regole di comodo per schermi telefono. */
@media(max-width:600px){
	.fmr-slider{padding:0 26px}
	.fmr-nav{width:26px;height:26px}
	.fmr-nav::before{width:7px;height:7px}
	.fmr-prev{left:0}
	.fmr-next{right:0}
}

/* Se il JS non gira (raro), il layout resta usabile: una colonna sotto i
   700px di finestra invece di tre card compresse. */
/* Ripiego se il JS non gira: una card a schermo intero sotto i 700px.
   Il :not([data-narrow]) e' essenziale - quando il JS c'e', mette quell'attributo
   e questa regola si disattiva, lasciando il calcolo basato sul contenitore. */
@media (max-width:700px){
	.fmr-widget:not([data-narrow]) .fmr-slider .fmr-item{flex:0 0 100%}
	.fmr-grid .fmr-track{grid-template-columns:1fr}
}


@media(prefers-reduced-motion:reduce){
	.fmr-slider .fmr-track{scroll-behavior:auto}
}

span.fmr-summary-line {
    text-align: center;
    margin: 0 auto .8em;
    font-weight: 700;
}