/* =========================================================
   EXPLAINERS
   ========================================================= */

.explainer {

  /* Design tokens locali */
  --explainer-bg: rgba(13, 110, 253, 0.06);
  --explainer-border: rgba(13, 110, 253, 0.35);

  margin: 0;
  padding: 0 1rem;

  border-left: 3px solid transparent;
  border-radius: var(--radius-md);

  background: transparent;

  max-height: 0;
  overflow: hidden;

  opacity: 0;
  transform: translateY(-6px);

  font-size: 0.9rem;
  line-height: 1.5;
  color: #5f6f81;

  transition:
    max-height 350ms ease,
    opacity 220ms ease,
    transform 220ms ease,
    padding 250ms ease,
    margin 250ms ease,
    background 200ms ease,
    border-color 200ms ease;
}

.explainer.is-open {

  max-height: 600px; /* più safe per scalabilità */

  opacity: 1;
  transform: translateY(0);

  margin-top: 0.5rem;
  margin-bottom: 1rem;

  padding: 0.75rem 1rem;

  background: var(--explainer-bg);
  border-left-color: var(--explainer-border);
}


/* Testo interno */

.explainer p {
  margin: 0 0 0.45rem 0;
}

.explainer p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   INFO ICON – MODERN MINIMAL
   ========================================================= */

.label-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem; /* distanza uniforme */
}

.info-icon {

  width: 18px;
  height: 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: none;
  background: transparent;
  padding: 0;

  color: #7a8a9a;
  cursor: pointer;

  transition:
    color 160ms ease,
    transform 120ms ease,
    opacity 160ms ease;
}

/* SVG via mask */

.info-icon::before {
  content: "";
  width: 16px;
  height: 16px;

  background-color: currentColor;

  -webkit-mask: url('/assets/icons/info.svg') no-repeat center;
  mask: url('/assets/icons/info.svg') no-repeat center;

  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Hover */

.info-icon:hover {
  color: #0d6efd;
  transform: translateY(-1px);
}

/* Active (quando explainer aperto – opzionale ma elegante) */

.info-icon.is-active {
  color: #0d6efd;
}