/* Countdown aligned + loader */
.xcd{
  --xcd-color: currentColor;
  --xcd-scale: 1;
  --xcd-gap: 12px;
  color: var(--xcd-color);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0.25rem;
}

/* Anti-flicker loader: di default l'elemento con data-xcd-deadline mostra uno spinner
   e rende invisibile l'eventuale testo "Countdown". Quando JS aggiunge .xcd-ready,
   si nasconde lo spinner e si mostra il contenuto reale. */

[data-xcd-deadline]{
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 8ch;           /* dà uno spazio minimo per evitare salto layout */
  min-height: 3ch;
}

/* Nasconde il testo grezzo finché non siamo ready (senza incidere sul loader) */
[data-xcd-deadline]:not(.xcd-ready){
  color: transparent;
}

/* Spinner visibile finché manca .xcd-ready */
[data-xcd-deadline]:not(.xcd-ready)::after{
  content: "";
  width: 24px;
  height: 24px;
  border: 2px solid rgba(128,128,128,.3);
  border-top-color: rgba(128,128,128,.85);
  border-radius: 50%;
  animation: xcd-spin .8s linear infinite;
  display: inline-block;
}

/* Quando pronto: rimuove lo spinner e mostra il contenuto */
[data-xcd-deadline].xcd-ready::after{
  content: none;
}

@keyframes xcd-spin{ to { transform: rotate(360deg);} }

/* Struttura allineata a colonne */
.xcd-grid{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  column-gap: calc(var(--xcd-gap) * 2);
  align-items: end;
  justify-items: center;
}

.xcd-col{
  position: relative;
  display: grid;
  justify-items: center;
  align-items: center;
  row-gap: 0.35rem;
}

.xcd-num{
  font-size: calc(2.25rem * var(--xcd-scale));
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
  line-height: 1;
}

.xcd-label{
  display: block;
  font-size: calc(0.7rem * var(--xcd-scale));
  letter-spacing: 3px;
  opacity: .85;
}

/* Separatore tra colonne */
.xcd:not(.xcd-no-sep) .xcd-col:not(:last-child)::after{
  content: var(--xcd-sep, ":" );
  position: absolute;
  top: 0;
  right: calc(-1 * var(--xcd-gap));
  font-size: calc(2.25rem * var(--xcd-scale));
  line-height: 1;
  opacity: .9;
  pointer-events: none;
}

.xcd-finish{
  font-size: calc(1.25rem * var(--xcd-scale));
  font-weight: 600;
}