/* Wrapper pinned to right middle */
.whatsnew-wrapper {
  position: fixed;
  top: 65%;
  right: 0;
  z-index: 999;
}

.whatsnew-inner {
  position: relative;
  display: flex;
  align-items: stretch;
  transition: transform 0.35s ease;
  transform: translateX(0);
}

/* Collapsed – slide cards right off-screen */
.whatsnew-collapsed .whatsnew-inner {
  transform: translateX(270px);
}

/* Badge on tab */
.whatsnew-badge {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e74c64, #ed7e4e);
  color: #fff;
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}

/* Vertical tab LEFT side */
.whatsnew-tab {
  background: #2e4f86;
  color: #fff;
  padding: 40px 10px;
  width: 60px;
  height: 130px;
  border-radius: 12px 0 0 12px;
  writing-mode: sideways-lr;
  text-orientation: mixed;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  user-select: none;
  flex-shrink: 0;
}

/* Cards container RIGHT side */
.whatsnew-cards {
  position: relative;
  width: 260px;
  height: 260px;
  border-radius: 0 0 0 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: white; /* fallback */
  border: 1px solid #96969545;
}

/* Pure image cards */
.whatsnew-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 240px;
  transform: translate(-50%, -50%); /* Centers perfectly */
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.whatsnew-card.active {
  opacity: 1;
}

/* Dots indicator */
.whatsnew-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
}

.whatsnew-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00000020;
  cursor: pointer;
  transition: all 0.3s ease;
}

.whatsnew-dot.active {
  background: #000; 
  width: 24px;     
  height: 10px;    
  border-radius: 30%; 
  transform: scale(1); 
}