.stripe-bottom-bar {
  position: fixed;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, calc(100% - 24px));
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  color: #fff;
  border-radius: 18px 18px 0px 0px;
  padding: 18px 20px;
  z-index: 9999;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px; /* Reduced gap to bring button closer to text */
  align-items: center;
}

.stripe-left { 
  display: grid; 
  gap: 6px; 
}

/* Title shadow */
.stripe-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

/* Meta text shadow */
.stripe-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  opacity: .95;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

/* Smaller button + shadow */
.stripe-btn {
  background: var(--bbg);
  color: var(--btc);
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; 
  align-content: center;
  margin-right: 80px; 
}

/* Button hover effect */
.stripe-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.45);
  opacity: 0.95;
}

.stripe-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

/* Mobile */
@media (max-width: 640px) {
  .stripe-bottom-bar {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .stripe-btn { 
    width: 100%; 
    text-align: center; 
    margin-right: 0; /* Reset margin for mobile centering */
  }
}