/* HearFlow — componenti UI condivisi del sito
 *
 *  1. .hf-badge   badge "verificato" (account Pro): forma smerlata + riflesso
 *  2. .hf-confetti coriandoli, per festeggiare l'assegnazione del badge
 *  3. .hf-switch  interruttore stile Material Design 3
 *
 *  Vanilla: nessun framework, nessun font, nessuna richiesta di rete. Le
 *  animazioni si spengono da sole con prefers-reduced-motion.
 */

/* ============================== 1. BADGE ============================== */

.hf-badge {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 22px;
  height: 22px;
  color: hsl(203, 89%, 57%);
  flex: none;
}
.hf-badge svg { display: block; width: 100%; height: 100%; }
.hf-badge .hf-badge-shape { fill: currentColor; }
.hf-badge .hf-badge-check {
  fill: none;
  stroke: #fff;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Riflesso: una banda chiara che attraversa il badge, mascherata sulla forma. */
.hf-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  -webkit-mask-image: var(--hf-badge-mask);
  mask-image: var(--hf-badge-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: hf-badge-shimmer 2s ease-in-out infinite;
}
.hf-badge.is-static::after { display: none; }

@keyframes hf-badge-shimmer {
  0%   { transform: translateX(-100%); opacity: 1; }
  25%  { transform: translateX(200%);  opacity: 1; }
  25.1%, 100% { transform: translateX(200%); opacity: 0; }
}

/* ============================ 2. CORIANDOLI ============================ */

.hf-confetti {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 0;                      /* dietro al nome e al badge */
}
.hf-confetti i {
  position: absolute;
  display: block;
  width: 6px;
  height: 10px;
  border-radius: 2px;
  opacity: 0;
  will-change: transform, opacity;
  animation: hf-confetti-fly var(--dur, 1.5s) cubic-bezier(.15,.7,.35,1) var(--delay, 0s) forwards;
}
@keyframes hf-confetti-fly {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
}

/* Il contenitore di ciò che si festeggia: serve per posizionare i coriandoli. */
.hf-celebrate { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.hf-celebrate > *:not(.hf-confetti) { position: relative; z-index: 1; }

/* ============================= 3. SWITCH ============================== */

.hf-switch {
  --hf-switch-on: var(--accent, #2FA6CC);
  --hf-switch-track-off: rgba(20,21,22,.10);
  --hf-switch-border-off: rgba(20,21,22,.22);
  --hf-switch-knob-off: rgba(20,21,22,.72);
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 52px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--hf-switch-border-off);
  border-radius: 999px;
  background: var(--hf-switch-track-off);
  cursor: pointer;
  transition: background .3s ease, border-color .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.hf-switch:focus-visible { outline: 2px solid var(--hf-switch-on); outline-offset: 2px; }
.hf-switch[aria-checked="true"] {
  background: var(--hf-switch-on);
  border-color: var(--hf-switch-on);
}
.hf-switch[disabled] { opacity: .5; cursor: not-allowed; }

.hf-switch .hf-knob {
  position: absolute;
  top: 50%;
  left: 3px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--hf-switch-knob-off);
  color: transparent;
  transform: translateY(-50%);
  /* Molla: il pallino "supera" e rientra, come in Material 3. */
  transition: width .3s cubic-bezier(.175,.885,.32,1.275),
              height .3s cubic-bezier(.175,.885,.32,1.275),
              left .3s cubic-bezier(.175,.885,.32,1.275),
              background .3s ease, color .2s ease;
}
.hf-switch[aria-checked="true"] .hf-knob {
  width: 24px; height: 24px;
  left: calc(100% - 27px);
  background: #fff;
  color: var(--hf-switch-on);
}
.hf-switch.is-pressed .hf-knob { width: 27px; height: 27px; }
.hf-switch.is-pressed[aria-checked="true"] .hf-knob { left: calc(100% - 30px); }

.hf-switch .hf-knob svg { width: 11px; height: 11px; display: block; }
.hf-switch .hf-knob .hf-ico-on  { display: none; }
.hf-switch[aria-checked="true"] .hf-knob .hf-ico-on  { display: block; }
.hf-switch[aria-checked="true"] .hf-knob .hf-ico-off { display: none; }
.hf-switch .hf-knob .hf-ico-off { color: #fff; }

/* Alone Material: appare al passaggio del mouse e alla pressione. */
.hf-switch .hf-halo {
  position: absolute;
  top: 50%;
  left: 11px;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 999px;
  background: currentColor;
  color: rgba(20,21,22,.9);
  opacity: 0;
  transform: scale(.5);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, left .3s cubic-bezier(.175,.885,.32,1.275);
}
.hf-switch[aria-checked="true"] .hf-halo { left: calc(100% - 15px); color: var(--hf-switch-on); }
.hf-switch:hover .hf-halo { opacity: .07; transform: scale(1); }
.hf-switch.is-pressed .hf-halo { opacity: .14; transform: scale(1); }

/* Compatto, per le righe fitte. */
.hf-switch.hf-switch-sm { width: 42px; height: 24px; }
.hf-switch.hf-switch-sm .hf-knob { width: 13px; height: 13px; }
.hf-switch.hf-switch-sm[aria-checked="true"] .hf-knob { width: 18px; height: 18px; left: calc(100% - 21px); }
.hf-switch.hf-switch-sm .hf-knob svg { width: 9px; height: 9px; }

/* Tema scuro: la traccia spenta deve restare visibile. */
@media (prefers-color-scheme: dark) {
  .hf-switch {
    --hf-switch-track-off: rgba(255,255,255,.10);
    --hf-switch-border-off: rgba(255,255,255,.22);
    --hf-switch-knob-off: rgba(255,255,255,.75);
  }
  .hf-switch .hf-halo { color: rgba(255,255,255,.9); }
}

@media (prefers-reduced-motion: reduce) {
  .hf-badge::after { animation: none; display: none; }
  .hf-confetti i { animation: none; display: none; }
  .hf-switch, .hf-switch .hf-knob, .hf-switch .hf-halo { transition-duration: .01ms; }
}