/* Overlay popup */
#glive-onboarding-overlay{
  position:fixed;
  top:0; left:0;
  width:100vw; height:100vh;
  background: rgba(0,0,0,0.6);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
  opacity:0;
  visibility:hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
#glive-onboarding-overlay.active{
  opacity:1;
  visibility:visible;
}

/* Popup container */
#glive-onboarding-container{
  width:90%;
  max-width:500px;
  max-height:80%;
  background: linear-gradient(120deg,#0f2027,#2c5364,#1c92d2);
  color:#fff;
  border-radius:20px;
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transform: translateY(-50px);
  transition: transform 0.3s ease;
}

/* Slides */
#glive-onboarding{display:flex;transition:transform 0.8s cubic-bezier(0.77,0,0.175,1);}
.glive-slide{
  min-width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:20px;
  transform-style: preserve-3d;
  transition: transform 0.8s ease;
}
.glive-slide h1, .glive-slide p{opacity:0;transform:translateY(20px);animation:fadeUp 0.6s forwards;}
.glive-start-btn{
  margin-top:20px;
  padding:12px 28px;
  background:#ff6b6b;
  border-radius:25px;
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.glive-start-btn:hover{transform:translateY(-3px);box-shadow:0 6px 15px rgba(0,0,0,0.4);}

/* Navigation boutons */
.glive-nav-buttons{
  width:100%;
  display:flex;
  justify-content:space-between;
  margin-top:10px;
}
.glive-nav-buttons button{
  background:rgba(255,255,255,0.2);
  border:none;
  color:#fff;
  border-radius:50%;
  padding:8px 16px;
  cursor:pointer;
}
.glive-nav-buttons button:hover{
  background: rgba(255,255,255,0.4);
  transform:scale(1.2);
}

@keyframes fadeUp{to{opacity:1;transform:translateY(0);}}