/* ======================================================
CONTADOR
====================================================== */

.relationship-timer{
  margin-top:40px;
  text-align:center;
  font-family:'Inter', sans-serif;
  color:#ffffff;
}


/* ======================================================
TÍTULO
====================================================== */

.relationship-timer h3{
  font-size:0.9rem;
  font-weight:500;
  margin-top: 10px;
  margin-bottom:14px;
  opacity:.75;
}


/* ======================================================
PILL
====================================================== */

.timer-pill{
  display: block;

  padding:12px 20px;

  border-radius:999px;

  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.03);

  max-width: 545px; /* 🔥 controla o tamanho */
  width: 100%;

  margin: 0 auto;
}


/* ======================================================
LINHA DO CONTADOR
====================================================== */

#timer{

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

  gap:10px;

}


/* ======================================================
UNIDADE
====================================================== */

.time-unit{
  display:flex;
  align-items:baseline;
  gap:4px;
}


/* ======================================================
NÚMEROS COM GRADIENT
====================================================== */

.time-unit span{

  font-weight:600;

  background:linear-gradient(
    90deg,
    #ff7aa2,
    #ff8fb5,
    #ffa6c6
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

}


/* ======================================================
LABELS (visíveis no fundo preto)
====================================================== */

.time-unit p{

  font-size:0.8rem;
  color:rgba(255,255,255,0.75);

}



.relationship-timer{
  margin: 0 16px 40px 16px; /* 👈 ESSA É A CHAVE */
}