/* ── Contact blur — standalone, no Tailwind, no dependencies ── */

/* Outer wrapper: questo è il target dell'hover/focus/tap */
.cb-outer {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  outline: none;
}

/* Riga icona + testo */
.cb-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #4ade80;
}

/* Il valore da offuscare */
.cb-val {
  display: inline-block;
  filter: blur(5px) !important;
  -webkit-filter: blur(5px) !important;
  user-select: none;
  -webkit-user-select: none;
  transition: filter 0.3s ease, -webkit-filter 0.3s ease;
  color: #4ade80;
  font-size: 0.875rem;
}

/* Rivelazione su hover / focus / stato active (tap mobile) */
.cb-outer:hover .cb-val,
.cb-outer:focus .cb-val,
.cb-outer.revealed .cb-val {
  filter: blur(0px) !important;
  -webkit-filter: blur(0px) !important;
  user-select: text;
  -webkit-user-select: text;
}

/* Hint testuale */
.cb-hint {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  transition: opacity 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
}

.cb-outer:hover .cb-hint,
.cb-outer:focus .cb-hint,
.cb-outer.revealed .cb-hint {
  opacity: 0;
}