/* Styles for the dynamic upsell progress bar and notification */
/* The upsell bar encourages users to scroll through tiers by visualising progress
   and leveraging psychological triggers like the goal‑gradient effect, social proof
   and scarcity. It adapts between desktop and mobile layouts. */

.upsell-bar {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(10, 10, 10, 0.85);
  padding: 0.5rem 0.25rem;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.upsell-bar .upsell-steps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.upsell-bar .upsell-step {
  background: transparent;
  border: none;
  color: var(--color-gray);
  font-size: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.upsell-bar .upsell-step.active {
  color: var(--color-black);
  background-color: var(--color-gold);
}

.upsell-bar .upsell-progress {
  position: absolute;
  left: 50%;
  top: 0.5rem;
  transform: translateX(-50%);
  width: 2px;
  height: calc(100% - 1rem);
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.upsell-bar .upsell-progress-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: var(--color-gold);
  transition: height 0.4s ease;
}

.upsell-notification {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  max-width: 300px;
  padding: 1rem 1.25rem;
  background: rgba(10, 10, 10, 0.9);
  color: var(--color-light);
  border-left: 4px solid var(--color-gold);
  border-radius: 4px;
  font-size: 0.85rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 1000;
}

.upsell-notification.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Responsive tweaks: reposition upsell bar horizontally on mobile */
@media (max-width: 768px) {
  .upsell-bar {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    transform: none;
    flex-direction: row;
    justify-content: space-around;
    padding: 0.5rem;
    border-radius: 8px 8px 0 0;
  }

  .upsell-bar .upsell-steps {
    flex-direction: row;
    gap: 0.5rem;
  }

  .upsell-bar .upsell-step {
    width: 2rem;
    height: 2rem;
    font-size: 0.9rem;
  }

  .upsell-bar .upsell-progress,
  .upsell-bar .upsell-progress-fill {
    display: none;
  }

  .upsell-notification {
    left: 50%;
    bottom: 4.5rem;
    transform: translate(-50%, 20px);
  }
}