/* ============================================================
   HiddenFlirt UI · hf-components-ext.css
   Estensioni: pagine errore, animazioni utility, tabelle, wizard,
   timeline, poll, commenti, tag-input, prezzi, wallet, cookie,
   offcanvas, swipe deck, share, reazioni, datepicker, stat.
   ============================================================ */

/* ---------- Animazioni utility (classi .hf-anim-*) ---------- */
.hf-anim-rise { animation: hf-rise .6s var(--hf-ease) both; }
.hf-anim-pop { animation: hf-pop .5s var(--hf-ease) both; }
.hf-anim-fade { animation: hf-fade .4s both; }
.hf-anim-shake { animation: hf-shake .3s; }
.hf-anim-float { animation: hf-float 3.4s ease-in-out infinite; }
.hf-anim-glow { animation: hf-glow 2.8s ease-in-out infinite; }
.hf-anim-blink { animation: hf-eyeblink 6s cubic-bezier(.4,0,.2,1) infinite; }
.hf-anim-burst { animation: hf-burst 1.6s ease-out both; }
.hf-anim-orbit { animation: hf-orbit 9s linear infinite; }
.hf-anim-spark { animation: hf-spark 2.8s ease-out infinite; }
.hf-delay-1 { animation-delay: .2s; } .hf-delay-2 { animation-delay: .4s; }
.hf-delay-3 { animation-delay: .6s; } .hf-delay-4 { animation-delay: .8s; }
.hf-delay-5 { animation-delay: 1s; }
@keyframes hf-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes hf-eyeblink { 0%,86%,100% { transform: translateY(-6%); } 91%,95% { transform: translateY(52%); } }
@keyframes hf-burst { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes hf-orbit { to { transform: rotate(360deg); } }
@keyframes hf-spark { 0% { transform: translateY(0) scale(1); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-46px) scale(.3); opacity: 0; } }

/* ---------- Logo occhio animato (marchio) ---------- */
.hf-logo { --_w: 34px; width: var(--_w); height: var(--_w); border-radius: 29%; background: var(--hf-dark); display: grid; place-content: center; }
.hf-logo__eye { width: calc(var(--_w)*.6); height: calc(var(--_w)*.36); border-radius: 999px; background: #fff; display: grid; place-content: center; overflow: hidden; position: relative; }
.hf-logo__eye i { width: calc(var(--_w)*.22); height: calc(var(--_w)*.22); border-radius: 999px; background: var(--hf-primary); }
.hf-logo__lid { position: absolute; left: -20%; right: -20%; top: -110%; height: 140%; border-radius: 0 0 100% 100%; background: var(--hf-dark); animation: hf-eyeblink 6s cubic-bezier(.4,0,.2,1) infinite; }

/* ---------- Pagine errore 404 / 500 / offline / vietato ---------- */
.hf-errorpage { min-height: 480px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 48px 28px; text-align: center; position: relative; overflow: hidden; background: var(--hf-bg); }
.hf-errorpage__halo { position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%); width: 560px; height: 560px; border-radius: 999px; background: radial-gradient(circle, var(--hf-glow), transparent 62%); pointer-events: none; }
.hf-errorpage__code { position: relative; display: flex; align-items: center; gap: 10px; font: 400 clamp(72px, 12vw, 130px)/1 var(--hf-font-display); color: var(--hf-ink); }
.hf-errorpage__code .hf-logo { --_w: clamp(52px, 8vw, 92px); border-radius: 999px; }
.hf-errorpage__title { font: 400 clamp(22px,3vw,30px)/1.2 var(--hf-font-display); position: relative; }
.hf-errorpage__text { font: 400 13.5px/1.65 var(--hf-font); color: var(--hf-muted); max-width: 380px; position: relative; text-wrap: pretty; }
.hf-errorpage__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; position: relative; }
.hf-errorpage--dark { background: var(--hf-dark); }
.hf-errorpage--dark .hf-errorpage__code, .hf-errorpage--dark .hf-errorpage__title { color: #fff; }
.hf-errorpage--dark .hf-errorpage__text { color: var(--hf-on-dark-muted); }

/* ---------- Tabella ---------- */
.hf-table { width: 100%; border-collapse: separate; border-spacing: 0; font: 500 12.5px/1.4 var(--hf-font); }
.hf-table th { text-align: left; padding: 12px 16px; font: 800 10.5px/1 var(--hf-font); letter-spacing: .08em; text-transform: uppercase; color: var(--hf-faint); border-bottom: 1px solid var(--hf-border); cursor: pointer; white-space: nowrap; }
.hf-table th[aria-sort]:not([aria-sort="none"])::after { content: " ↑"; color: var(--hf-primary); }
.hf-table th[aria-sort="descending"]::after { content: " ↓"; }
.hf-table td { padding: 13px 16px; border-bottom: 1px solid var(--hf-canvas); }
.hf-table tr:hover td { background: var(--hf-surface); }

/* ---------- Wizard steps ---------- */
.hf-steps { display: flex; align-items: center; gap: 5px; }
.hf-steps i { flex: 1; height: 5px; border-radius: 999px; background: var(--hf-canvas); }
.hf-steps i.is-done { background: var(--hf-primary); }
.hf-steps__label { font: 700 11px/1 var(--hf-font); color: var(--hf-faint); }

/* ---------- Timeline ---------- */
.hf-timeline { display: flex; flex-direction: column; }
.hf-timeline__item { display: flex; gap: 14px; }
.hf-timeline__rail { display: flex; flex-direction: column; align-items: center; }
.hf-timeline__dot { width: 12px; height: 12px; border-radius: 999px; background: var(--hf-primary); flex: none; margin-top: 4px; }
.hf-timeline__dot--empty { background: var(--hf-bg); border: 2.5px solid var(--hf-border); }
.hf-timeline__line { width: 2px; flex: 1; background: var(--hf-border-soft); min-height: 26px; }
.hf-timeline__body { padding-bottom: 20px; font: 500 12.5px/1.5 var(--hf-font); color: var(--hf-muted); }
.hf-timeline__body b { display: block; color: var(--hf-ink); font-weight: 700; }

/* ---------- Poll / sondaggio ---------- */
.hf-poll { display: flex; flex-direction: column; gap: 8px; }
.hf-poll__opt { position: relative; padding: 12px 15px; border-radius: var(--hf-r-md); border: 1.5px solid var(--hf-border); font: 600 12.5px/1.3 var(--hf-font); cursor: pointer; overflow: hidden; }
.hf-poll__opt i { position: absolute; inset: 0; width: var(--hf-poll-pct, 0%); background: var(--hf-primary-tint); z-index: 0; transition: width var(--hf-t-reveal) var(--hf-ease); }
.hf-poll__opt span { position: relative; z-index: 1; display: flex; justify-content: space-between; }
.hf-poll__opt.is-voted { border-color: var(--hf-primary); }
.hf-poll__meta { font: 500 11px/1 var(--hf-font); color: var(--hf-faint); }

/* ---------- Commenti (thread) ---------- */
.hf-comment { display: flex; gap: 11px; padding: 12px 0; }
.hf-comment__body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.hf-comment__head { display: flex; align-items: baseline; gap: 7px; font: 700 12.5px/1 var(--hf-font); }
.hf-comment__head time { font: 500 10.5px/1 var(--hf-font); color: var(--hf-faint); }
.hf-comment__text { font: 400 13px/1.5 var(--hf-font); color: var(--hf-ink); }
.hf-comment__actions { display: flex; gap: 14px; font: 700 11px/1 var(--hf-font); color: var(--hf-faint); }
.hf-comment__actions span { cursor: pointer; }
.hf-comment__actions span:hover { color: var(--hf-primary); }
.hf-comment--reply { margin-left: 44px; border-left: 2px solid var(--hf-canvas); padding-left: 14px; }
.hf-mention { color: var(--hf-primary); font-weight: 700; }
.hf-hashtag { color: var(--hf-primary); }

/* ---------- Tags input ---------- */
.hf-tagsinput { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: 1.5px solid var(--hf-border); border-radius: var(--hf-r-md); background: var(--hf-bg); cursor: text; }
.hf-tagsinput:focus-within { border-color: var(--hf-primary); box-shadow: 0 0 0 3px var(--hf-glow); }
.hf-tagsinput .hf-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--hf-primary-tint); border: 1px solid var(--hf-primary-tint-border); color: var(--hf-primary); font: 700 11px/1 var(--hf-font); }
.hf-tagsinput .hf-tag b { cursor: pointer; font-weight: 800; }
.hf-tagsinput input { border: 0; outline: 0; flex: 1; min-width: 90px; font: 500 12.5px/1 var(--hf-font); background: transparent; color: var(--hf-ink); }

/* ---------- Range doppio (età min-max) ---------- */
.hf-range2 { position: relative; height: 30px; }
.hf-range2 input { position: absolute; inset: 0; width: 100%; appearance: none; background: none; pointer-events: none; }
.hf-range2 input::-webkit-slider-thumb { appearance: none; pointer-events: auto; width: 22px; height: 22px; border-radius: 999px; background: #fff; border: 2px solid var(--hf-primary); box-shadow: var(--hf-shadow-card); cursor: grab; }
.hf-range2__rail { position: absolute; left: 0; right: 0; top: 50%; height: 6px; transform: translateY(-50%); border-radius: 999px; background: var(--hf-border); }
.hf-range2__fill { position: absolute; top: 50%; height: 6px; transform: translateY(-50%); border-radius: 999px; background: var(--hf-primary); }

/* ---------- Pricing / Premium ---------- */
.hf-price { position: relative; border: 1.5px solid var(--hf-border); border-radius: var(--hf-r-lg); padding: 24px; display: flex; flex-direction: column; gap: 12px; background: var(--hf-bg); }
.hf-price--hot { border-color: var(--hf-primary); box-shadow: var(--hf-shadow-glow); }
.hf-price__ribbon { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: var(--hf-primary); color: #fff; font: 800 9.5px/1 var(--hf-font); letter-spacing: .1em; white-space: nowrap; }
.hf-price__amount { display: flex; align-items: baseline; gap: 4px; }
.hf-price__amount b { font: 800 34px/1 var(--hf-font); }
.hf-price__amount span { font: 600 12px/1 var(--hf-font); color: var(--hf-faint); }
.hf-price ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font: 500 12.5px/1.4 var(--hf-font); color: var(--hf-muted); }
.hf-price li::before { content: "✓  "; color: var(--hf-online-ink); font-weight: 800; }

/* ---------- Wallet / crediti / tip ---------- */
.hf-wallet { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--hf-dark); color: #fff; font: 800 13px/1 var(--hf-font); font-variant-numeric: tabular-nums; }
.hf-wallet i { color: #F5C36B; }
.hf-tipgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.hf-tipgrid button { padding: 14px; border-radius: var(--hf-r-md); border: 1.5px solid var(--hf-border); background: var(--hf-bg); font: 800 14px/1.3 var(--hf-font); cursor: pointer; }
.hf-tipgrid button small { display: block; font: 600 10px/1 var(--hf-font); color: var(--hf-faint); margin-top: 4px; }
.hf-tipgrid button[aria-pressed="true"] { border-color: var(--hf-primary); background: var(--hf-primary-tint); color: var(--hf-primary); }

/* ---------- Cookie banner / consenso ---------- */
.hf-cookiebar { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: var(--hf-z-toast); max-width: 560px; margin: 0 auto; background: var(--hf-dark); color: #fff; border-radius: var(--hf-r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--hf-shadow-pop); animation: hf-rise .4s var(--hf-ease); }
.hf-cookiebar p { margin: 0; font: 500 12px/1.6 var(--hf-font); color: var(--hf-on-dark-muted); }
.hf-cookiebar__row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Offcanvas nav mobile ---------- */
.hf-offcanvas { position: fixed; top: 0; bottom: 0; left: 0; width: min(320px, 84vw); background: var(--hf-bg); z-index: var(--hf-z-sheet); box-shadow: var(--hf-shadow-pop); animation: hf-slide-right var(--hf-t-reveal) var(--hf-ease) both; padding: 20px; overflow-y: auto; }
@keyframes hf-slide-right { from { transform: translateX(-100%); } }

/* ---------- Back to top ---------- */
.hf-backtop { position: fixed; right: 20px; bottom: 84px; z-index: var(--hf-z-nav); width: 46px; height: 46px; border-radius: 999px; border: 0; background: var(--hf-dark); color: #fff; font-size: 15px; cursor: pointer; box-shadow: var(--hf-shadow-pop); opacity: 0; pointer-events: none; transition: opacity var(--hf-t-ui); }
.hf-backtop.is-visible { opacity: 1; pointer-events: auto; }

/* ---------- Swipe deck (mi piace / passa) ---------- */
.hf-deck { position: relative; width: 100%; aspect-ratio: 3/4; }
.hf-deck__card { position: absolute; inset: 0; border-radius: var(--hf-r-lg); overflow: hidden; background: var(--hf-dark); box-shadow: var(--hf-shadow-sheet); cursor: grab; transition: transform .35s var(--hf-ease), opacity .35s; touch-action: none; }
.hf-deck__card:nth-child(2) { transform: scale(.95) translateY(12px); }
.hf-deck__card:nth-child(3) { transform: scale(.9) translateY(24px); }
.hf-deck__card.is-out-right { transform: translateX(130%) rotate(16deg); opacity: 0; }
.hf-deck__card.is-out-left { transform: translateX(-130%) rotate(-16deg); opacity: 0; }
.hf-deck__stamp { position: absolute; top: 22px; padding: 8px 16px; border-radius: 10px; font: 800 16px/1 var(--hf-font); letter-spacing: .08em; border: 3px solid; transform: rotate(-12deg); opacity: 0; }
.hf-deck__stamp--like { left: 18px; color: #4ADE80; border-color: #4ADE80; }
.hf-deck__stamp--nope { right: 18px; color: #FF8A8A; border-color: #FF8A8A; transform: rotate(12deg); }

/* ---------- Reazioni emoji ---------- */
.hf-reactions { display: inline-flex; gap: 4px; padding: 8px; border-radius: 999px; background: var(--hf-bg); border: 1px solid var(--hf-border); box-shadow: var(--hf-shadow-sheet); }
.hf-reactions button { width: 40px; height: 40px; border: 0; border-radius: 999px; background: none; font-size: 20px; cursor: pointer; transition: transform var(--hf-t-tap) var(--hf-ease); }
.hf-reactions button:hover { transform: scale(1.35) translateY(-4px); }

/* ---------- Datepicker minimale ---------- */
.hf-calendar { width: 280px; border: 1px solid var(--hf-border); border-radius: var(--hf-r-lg); padding: 14px; background: var(--hf-bg); }
.hf-calendar__head { display: flex; justify-content: space-between; align-items: center; font: 800 13px/1 var(--hf-font); margin-bottom: 10px; }
.hf-calendar__grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; text-align: center; }
.hf-calendar__grid b { font: 800 9.5px/2.4 var(--hf-font); color: var(--hf-faint); }
.hf-calendar__grid button { aspect-ratio: 1; border: 0; border-radius: 9px; background: none; font: 600 12px/1 var(--hf-font); cursor: pointer; }
.hf-calendar__grid button:hover { background: var(--hf-surface); }
.hf-calendar__grid button[aria-selected="true"] { background: var(--hf-primary); color: #fff; font-weight: 800; }
.hf-calendar__grid button:disabled { color: var(--hf-disabled); }

/* ---------- Stat / KPI ---------- */
.hf-stat { padding: 14px 16px; border-radius: var(--hf-r-md); background: var(--hf-surface); border: 1px solid var(--hf-border-soft); display: flex; flex-direction: column; gap: 4px; }
.hf-stat b { font: 800 22px/1 var(--hf-font); color: var(--hf-primary); font-variant-numeric: tabular-nums; }
.hf-stat span { font: 500 10.5px/1.4 var(--hf-font); color: var(--hf-faint); }

/* ---------- Kbd / code ---------- */
.hf-kbd { padding: 3px 8px; border-radius: 7px; background: var(--hf-surface); border: 1px solid var(--hf-border); border-bottom-width: 2.5px; font: 700 11px/1 var(--hf-font-mono); }

/* ---------- Feed scroll-snap (TikTok) ---------- */
.hf-snapfeed { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; }
.hf-snapfeed::-webkit-scrollbar { display: none; }
.hf-snapfeed > * { scroll-snap-align: start; scroll-snap-stop: always; height: 100%; }