/*
  Addon CSS-only : aucun shortcode, aucun HTML injecté, aucune logique PHP métier.
  Cible uniquement les classes/IDs déjà présents dans le compteur/ticker.
*/

/* ticker : plus compact visuellement */
.lions-ticker {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.lions-track {
  gap: 28px !important;
}

.lions-item {
  font-size: 0.95rem;
}

/* compteur : on limite sa hauteur pour laisser la place au ticker */
#lions-counter {
  min-height: calc(100svh - 48px) !important;
  height: calc(100svh - 48px) !important;
  padding: 10px !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

/* meilleure occupation de l'espace intérieur */
#lions-counter .overlay {
  width: min(1120px, 100%) !important;
  min-height: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 28px 30px 22px !important;
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto 1fr auto;
  row-gap: 16px;
  align-items: center;
  justify-items: center;
}

/* logo */
#lions-counter .logo {
  top: 14px !important;
  left: 14px !important;
}

#lions-counter .logo img {
  height: 70px !important;
  width: auto;
}

/* titre */
#lions-counter h1 {
  margin: 0 !important;
  max-width: 80%;
  font-size: clamp(1.25rem, 2vw, 2.1rem) !important;
  line-height: 1.15;
  letter-spacing: 0.06em;
}

/* montant */
#lions-counter #amount {
  margin: 0 !important;
  font-size: clamp(3.2rem, 8vw, 7rem) !important;
  line-height: 0.95;
}

/* bonus */
#lions-counter #bonus {
  min-height: 1.8rem;
  font-size: clamp(1rem, 1.8vw, 1.5rem) !important;
}

/* barre */
#lions-counter .progress-container {
  width: min(780px, 92%) !important;
  height: 18px !important;
  margin-top: 0 !important;
}

/* message */
#lions-counter .message {
  margin-top: 0 !important;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem) !important;
}

/* responsive */
@media (max-width: 768px) {
  #lions-counter {
    min-height: calc(100svh - 44px) !important;
    height: calc(100svh - 44px) !important;
    padding: 8px !important;
  }

  #lions-counter .overlay {
    padding: 20px 16px 16px !important;
    row-gap: 12px;
  }

  #lions-counter .logo img {
    height: 52px !important;
  }

  #lions-counter h1 {
    max-width: 88%;
  }
}

@media (max-width: 480px) {
  #lions-counter {
    min-height: calc(100svh - 42px) !important;
    height: calc(100svh - 42px) !important;
  }

  #lions-counter .overlay {
    padding: 18px 14px 14px !important;
    row-gap: 10px;
  }

  #lions-counter h1 {
    max-width: 92%;
  }

  #lions-counter .progress-container {
    width: 95% !important;
  }
}