/* ================================
   ENCRALYS – Header actions propres
   Objectif :
   - Colonne d’actions à droite, sans chevaucher flairs / synopsis
   - Boutons Encralys sous le bouton BuddyBoss (Rejoindre/Quitter/Organisateur)
   - Responsive : en mobile, tout passe sous le header
================================ */

/* Le header devient le référent pour positionner la colonne d’actions */
body.single-item.groups #item-header-content{
  position: relative !important;
  /* on réserve la place de la colonne d’actions à droite */
  padding-right: 240px !important; /* ~ 200px (bouton) + marge */
}

/* ✅ Conteneur d’actions BuddyBoss (à droite) — CENTRÉ verticalement dans l’axe */
body.single-item.groups #item-header-content .group-actions-absolute{
  position: absolute !important;
  right: 0 !important;
  width: 220px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  z-index: 20 !important;
  pointer-events: auto !important;

  /* ✅ MODIF : centrage vertical + petit décalage vers le bas */
  top: 50% !important;
  transform: translateY(calc(-50% + 18px)) !important; /* ajuste : +10 / +14 / +18 / +22 */
}

/* ✅ Le bloc qui contient le bouton Organisateur/Rejoindre/Quitter + nos actions */
body.single-item.groups #item-header-content .group-actions-absolute .bp-generic-meta.groups-meta.action{
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important; /* gap entre bouton BB et tes boutons */
}

/* Wrapper du bouton BuddyBoss */
body.single-item.groups #item-header-content .group-actions-absolute .bp-generic-meta.groups-meta.action > .generic-button{
  width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
}

/* Bouton BuddyBoss de base : même largeur */
body.single-item.groups #item-header-content .group-actions-absolute .group-button{
  width: 200px !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

/* ✅ Nos actions sous le bouton BuddyBoss */
body.single-item.groups #item-header-content .encralys-header-actions{
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;          /* gap Watchlist / Vu / Liste */
  align-items: center !important; /* même axe */
  margin: 0 !important;
  padding: 0 !important;
}

/* Wrappers des boutons ENCRALYS */
body.single-item.groups #item-header-content .encralys-header-actions .generic-button{
  width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
}

/* Boutons ENCRALYS : largeur uniforme + annule min-width inline */
body.single-item.groups #item-header-content .encralys-header-actions .group-button.button,
body.single-item.groups #item-header-content .encralys-header-actions .encralys-btn-seen{
  width: 200px !important;
  max-width: 100% !important;
  text-align: center !important;
  margin: 0 !important;
  min-width: 0 !important;
}

/* Optionnel : cacher la cloche */
body.single-item.groups #item-header-content .group-actions-absolute .group-subscription{
  display: none !important;
}

/* ✅ FIX DOUBLONS (TOUS ÉTATS : membre / non-membre / orga)
   On garde le 1er bloc, on masque tous les suivants */
body.single-item.groups #item-header-content .group-actions-absolute
  > .bp-generic-meta.groups-meta.action:nth-of-type(n+2){
  display: none !important;
}

/* ================================
   ENCRALYS – Bouton Bande-annonce amélioré
   (sous les flairs)
================================ */

/* Wrapper */
body.single-item.groups #item-header-content .encralys-trailer-under-flairs{
  margin-top: 10px !important;
}

/* Bouton trailer */
body.single-item.groups #item-header-content .encralys-trailer-under-flairs .encralys-trailer-button{
  width: 200px !important;
  max-width: 100% !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  font-weight: 700 !important;
  letter-spacing: .2px !important;

  background: #3b5bff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #fff !important;

  border-radius: 999px !important;
  height: 40px !important;
  padding: 0 14px !important;

  box-shadow: 0 8px 18px rgba(59,91,255,.25) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

body.single-item.groups #item-header-content .encralys-trailer-under-flairs .encralys-trailer-button::before{
  content: "" !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 9px solid #fff !important;
  border-top: 6px solid transparent !important;
  border-bottom: 6px solid transparent !important;
  transform: translateX(1px) !important;
  opacity: .95 !important;
}

body.single-item.groups #item-header-content .encralys-trailer-under-flairs .encralys-trailer-button:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 26px rgba(59,91,255,.35) !important;
  filter: brightness(1.05) !important;
}

body.single-item.groups #item-header-content .encralys-trailer-under-flairs .encralys-trailer-button:focus,
body.single-item.groups #item-header-content .encralys-trailer-under-flairs .encralys-trailer-button:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59,91,255,.35), 0 10px 24px rgba(59,91,255,.30) !important;
}

body.single-item.groups #item-header-content .encralys-trailer-under-flairs .encralys-trailer-button:active{
  transform: translateY(0) !important;
  box-shadow: 0 6px 14px rgba(59,91,255,.22) !important;
}

/* Responsive */
@media (max-width: 782px){
  body.single-item.groups #item-header-content{
    padding-right: 0 !important;
  }

  body.single-item.groups #item-header-content .group-actions-absolute{
    position: static !important;
    width: 100% !important;
    align-items: stretch !important;
    top: auto !important;
    transform: none !important;
    margin-top: 8px !important;
  }

  body.single-item.groups #item-header-content .group-actions-absolute .bp-generic-meta.groups-meta.action{
    align-items: stretch !important;
  }

  body.single-item.groups #item-header-content .group-actions-absolute .group-button,
  body.single-item.groups #item-header-content .encralys-header-actions .group-button.button,
  body.single-item.groups #item-header-content .encralys-header-actions .encralys-btn-seen{
    width: 100% !important;
  }

  body.single-item.groups #item-header-content .encralys-header-actions .generic-button,
  body.single-item.groups #item-header-content .group-actions-absolute .bp-generic-meta.groups-meta.action > .generic-button{
    justify-content: stretch !important;
  }

  body.single-item.groups #item-header-content .encralys-trailer-under-flairs .encralys-trailer-button{
    width: 100% !important;
  }
}