/* =========================
   FLOATING BAR - BASE
========================= */

.floating-bar {

  position: fixed;

  bottom: 20px;
  left: 50%;

  transform: translateX(-50%);

  display: flex;

  gap: 12px;

  padding: 12px 14px;

  background: rgba(255,255,255,0.75);

  backdrop-filter: blur(20px);

  border: 1px solid rgba(255,255,255,0.4);

  border-radius: 999px;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.12);

  z-index: 1000;

}

/* =========================
   BUTTONS
========================= */

.floating-bar a {

  text-decoration: none;

  padding: 10px 16px;

  border-radius: 999px;

  font-size: 0.9rem;

  font-weight: 500;

  color: #333;

  background: rgba(255,79,163,0.08);

  transition: 0.25s ease;

  white-space: nowrap;

}

.floating-bar a:hover {

  background: rgba(255,79,163,0.18);

  transform: translateY(-2px);

}

/* =========================
   MOBILE FIX
========================= */

@media (max-width: 768px) {

  .floating-bar {

    left: 12px;
    right: 12px;
    transform: none;

    bottom: 14px;

    justify-content: space-between;

    padding: 12px;

    border-radius: 20px;

  }

  .floating-bar a {

    flex: 1;

    text-align: center;

    font-size: 0.85rem;

    padding: 12px 10px;

  }

}