/* css/components/unlock-banner.css */
.unlock-banner {
  position: fixed;
  bottom: calc(var(--nav-height) + 12px);
  left: 50%; transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 398px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  display: flex; align-items: center; gap: var(--s-3);
  box-shadow: 0 8px 24px rgba(31,94,102,.35);
  z-index: 90;
  animation: slide-up 0.3s ease;
}

@keyframes slide-up {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);   opacity: 1; }
}

.unlock-banner__text { flex: 1; font-size: 14px; font-weight: 500; }
.unlock-banner__close {
  background: none; border: none; color: rgba(255,255,255,.7);
  font-size: 20px; cursor: pointer; padding: 0; line-height: 1;
}

.unlock-banner__btn {
  background: #fff; color: var(--accent);
  border: none; border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}