/* ============================================================
   HiddenFlirt UI · hf-components-4.css
   Quarta ondata: componenti ancora mancanti per un social completo.
   Segmented con icone, select multiplo, banner sistema, avatar
   group live, hovercard, popover, snackbar coda, bottom-tab pill,
   filtri attivi, chip rimovibili, data list, KPI trend, presenza,
   date range, slider verticale, radial menu, FAB speed-dial,
   comment composer, poll multi, gift picker, verified tiers,
   distance badge, compat score, online map dot, skeleton varianti.
   ============================================================ */

/* ---------- Segmented con icone ---------- */
.hf-segicon { display:inline-flex; padding:4px; gap:2px; background:var(--hf-surface); border:1px solid var(--hf-border); border-radius:var(--hf-r-md); }
.hf-segicon button { display:flex; align-items:center; gap:7px; padding:9px 14px; border:0; border-radius:10px; background:transparent; color:var(--hf-muted); font:700 12px/1 var(--hf-font); cursor:pointer; }
.hf-segicon button i { font-size:13px; }
.hf-segicon button[aria-pressed="true"] { background:var(--hf-bg); color:var(--hf-primary); box-shadow:var(--hf-shadow-card); }

/* ---------- Select multiplo (display) ---------- */
.hf-mselect { display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-height:var(--hf-control-h); padding:8px 12px; border:1.5px solid var(--hf-border); border-radius:var(--hf-r-md); background:var(--hf-bg); cursor:pointer; }
.hf-mselect:focus-within { border-color:var(--hf-primary); box-shadow:0 0 0 3px var(--hf-glow); }
.hf-mselect__ph { color:var(--hf-faint); font:500 13px/1 var(--hf-font); }

/* ---------- Filtri attivi (barra) ---------- */
.hf-activefilters { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.hf-activefilters .hf-tag { background:var(--hf-primary-tint); border:1px solid var(--hf-primary-tint-border); color:var(--hf-primary); }
.hf-activefilters__clear { font:700 11.5px/1 var(--hf-font); color:var(--hf-faint); cursor:pointer; text-decoration:underline; }

/* ---------- Banner sistema (top) ---------- */
.hf-sysbanner { display:flex; align-items:center; gap:12px; padding:11px 18px; font:600 12.5px/1.4 var(--hf-font); }
.hf-sysbanner--info { background:var(--hf-dark); color:#fff; }
.hf-sysbanner--warn { background:var(--hf-warning-tint); color:var(--hf-warning); }
.hf-sysbanner--promo { background:linear-gradient(135deg,var(--hf-primary),var(--hf-primary-soft)); color:#fff; }
.hf-sysbanner__close { margin-left:auto; cursor:pointer; opacity:.7; }

/* ---------- Avatar group live (stanza/room) ---------- */
.hf-liveroom { display:inline-flex; align-items:center; gap:9px; padding:7px 13px 7px 8px; border-radius:999px; background:var(--hf-dark); }
.hf-liveroom .hf-avatar-stack .hf-avatar { border-color:var(--hf-dark); }
.hf-liveroom__label { font:800 10.5px/1 var(--hf-font); color:#fff; display:flex; align-items:center; gap:5px; }
.hf-liveroom__label i { width:6px; height:6px; border-radius:999px; background:var(--hf-primary-soft); animation:hf-blinkdot 1.2s infinite; }

/* ---------- Hovercard profilo ---------- */
.hf-hovercard { width:280px; background:var(--hf-bg); border:1px solid var(--hf-border); border-radius:var(--hf-r-lg); box-shadow:var(--hf-shadow-pop); overflow:hidden; }
.hf-hovercard__cover { height:72px; background:var(--hf-dark); position:relative; }
.hf-hovercard__av { position:absolute; left:16px; bottom:-22px; }
.hf-hovercard__body { padding:30px 16px 16px; display:flex; flex-direction:column; gap:8px; }

/* ---------- Popover generico ---------- */
.hf-popover { background:var(--hf-bg); border:1px solid var(--hf-border); border-radius:var(--hf-r-md); box-shadow:var(--hf-shadow-pop); padding:14px; position:relative; }
.hf-popover::before { content:""; position:absolute; top:-6px; left:20px; width:12px; height:12px; background:var(--hf-bg); border-left:1px solid var(--hf-border); border-top:1px solid var(--hf-border); transform:rotate(45deg); }

/* ---------- KPI con trend ---------- */
.hf-kpi { padding:16px; border-radius:var(--hf-r-md); background:var(--hf-bg); border:1px solid var(--hf-border); display:flex; flex-direction:column; gap:6px; }
.hf-kpi__val { font:800 26px/1 var(--hf-font); font-variant-numeric:tabular-nums; }
.hf-kpi__trend { display:inline-flex; align-items:center; gap:4px; font:700 11px/1 var(--hf-font); }
.hf-kpi__trend.is-up { color:var(--hf-online-ink); } .hf-kpi__trend.is-down { color:var(--hf-danger); }
.hf-spark { display:flex; align-items:flex-end; gap:2px; height:34px; }
.hf-spark i { flex:1; border-radius:2px 2px 0 0; background:var(--hf-primary-tint); }
.hf-spark i.is-hi { background:var(--hf-primary); }

/* ---------- Presenza / online status text ---------- */
.hf-presence { display:inline-flex; align-items:center; gap:6px; font:600 11px/1 var(--hf-font); color:var(--hf-faint); }
.hf-presence::before { content:""; width:8px; height:8px; border-radius:999px; background:var(--hf-disabled); }
.hf-presence--online { color:var(--hf-online-ink); } .hf-presence--online::before { background:var(--hf-online); }
.hf-presence--away::before { background:var(--hf-warning); }
.hf-presence--recent::before { background:var(--hf-primary-soft); }

/* ---------- Distance + compat ---------- */
.hf-distance { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px; background:var(--hf-surface); border:1px solid var(--hf-border); font:700 10.5px/1 var(--hf-font); color:var(--hf-muted); }
.hf-compat { display:inline-flex; align-items:center; gap:7px; }
.hf-compat__bar { width:60px; height:6px; border-radius:999px; background:var(--hf-border); overflow:hidden; }
.hf-compat__bar i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--hf-primary),var(--hf-primary-soft)); }
.hf-compat b { font:800 12px/1 var(--hf-font); color:var(--hf-primary); }

/* ---------- Verified tiers ---------- */
.hf-tier { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px; font:800 9.5px/1 var(--hf-font); letter-spacing:.06em; }
.hf-tier--basic { background:var(--hf-surface); border:1px solid var(--hf-border); color:var(--hf-muted); }
.hf-tier--verified { background:var(--hf-primary-tint); border:1px solid var(--hf-primary-tint-border); color:var(--hf-primary); }
.hf-tier--gold { background:#FBF1DA; border:1px solid #EAD6A6; color:#9A7B27; }
.hf-tier--elite { background:var(--hf-dark); color:#F5C36B; }

/* ---------- FAB speed-dial ---------- */
.hf-speeddial { position:relative; }
.hf-speeddial__actions { position:absolute; bottom:64px; right:4px; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.hf-speeddial:not(.is-open) .hf-speeddial__actions { display:none; }
.hf-speeddial__action { display:flex; align-items:center; gap:9px; }
.hf-speeddial__action span { padding:6px 11px; border-radius:9px; background:var(--hf-dark); color:#fff; font:700 11px/1 var(--hf-font); white-space:nowrap; }
.hf-speeddial__action button { width:44px; height:44px; border-radius:999px; border:0; background:var(--hf-bg); box-shadow:var(--hf-shadow-sheet); color:var(--hf-primary); font-size:15px; cursor:pointer; }

/* ---------- Gift picker ---------- */
.hf-gifts { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.hf-gifts button { display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 6px; border:1.5px solid var(--hf-border); border-radius:var(--hf-r-md); background:var(--hf-bg); cursor:pointer; font:700 10px/1 var(--hf-font); color:var(--hf-faint); }
.hf-gifts button span { font-size:24px; }
.hf-gifts button[aria-pressed="true"] { border-color:var(--hf-primary); background:var(--hf-primary-tint); color:var(--hf-primary); }

/* ---------- Comment composer ---------- */
.hf-ccomposer { display:flex; align-items:flex-end; gap:10px; padding:10px 12px; border:1px solid var(--hf-border); border-radius:var(--hf-r-lg); background:var(--hf-bg); }
.hf-ccomposer__area { flex:1; min-height:22px; max-height:120px; overflow-y:auto; outline:0; font:400 13px/1.4 var(--hf-font); }
.hf-ccomposer__area:empty::before { content:attr(data-placeholder); color:var(--hf-faint); }
.hf-ccomposer__tools { display:flex; gap:4px; }
.hf-ccomposer__tools button { width:32px; height:32px; border:0; border-radius:8px; background:none; color:var(--hf-faint); cursor:pointer; }

/* ---------- Data list (definizioni profilo) ---------- */
.hf-dl { display:grid; grid-template-columns:auto 1fr; gap:10px 20px; }
.hf-dl dt { font:700 11px/1.4 var(--hf-font); letter-spacing:.04em; color:var(--hf-faint); text-transform:uppercase; }
.hf-dl dd { margin:0; font:600 13px/1.4 var(--hf-font); }

/* ---------- Slider verticale (volume/intensità) ---------- */
.hf-vslider { width:44px; height:160px; border-radius:999px; background:var(--hf-border); position:relative; }
.hf-vslider i { position:absolute; left:0; right:0; bottom:0; height:var(--hf-vslider-val,60%); border-radius:999px; background:linear-gradient(0deg,var(--hf-primary),var(--hf-primary-soft)); }
.hf-vslider b { position:absolute; left:50%; transform:translateX(-50%); bottom:calc(var(--hf-vslider-val,60%) - 11px); width:22px; height:22px; border-radius:999px; background:#fff; border:2px solid var(--hf-primary); }

/* ---------- Snackbar coda (in region) ---------- */
.hf-snackbar { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:var(--hf-r-md); background:var(--hf-bg); border:1px solid var(--hf-border); box-shadow:var(--hf-shadow-pop); font:600 12px/1.35 var(--hf-font); }
.hf-snackbar i.hf-dot { flex:none; }