/* =========================
   HEADER LAYOUT
========================= */

.top-navigation {
  height: 64px;
  background: #f5f2ef;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
}

/* Logo */

.logo-btn {
  width: 32px;
  height: 32px;
  border: none;
  background-color: #0c0c0a;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Right side */

.right-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* =========================
   ICON BUTTON (notifications)
========================= */

.icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid transparent;
  background: transparent;
  color: #0c0c0a;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    transform 0.05s ease;
}

.icon-btn:active {
  transform: translateY(1px);
}

.icon-btn:focus-visible {
  outline: 2px solid #0c0c0a;
  outline-offset: 2px;
}

.icon-btn--on-surface {
  background: #f5f2ef;
}

.icon-btn--on-surface:hover {
  background: #e8e2daa8;
}

.icon-btn--on-surface:active {
  background: #ddd6cd;
}

.notifications-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff5501;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Satoshi", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.notifications-badge.hidden {
  display: none;
}