/* Dropdown wrapper */
.dropdown {
  position: relative;
}

/* Dropdown Menu */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  flex-direction: column;
  background: var(--white); /* #fff */
  padding: calc(var(--spacing-md) + 3px); /* 15px approx */
  margin: 0;
  list-style: none;
  min-width: 280px;
  border-radius: var(--radius-md); /* 10px approx */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* No var yet, custom */
  z-index: 999;
}

/* Show on hover */
.dropdown:hover .dropdown-menu {
  display: flex;
}

/* Dropdown card */
.dropdown-card {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm); /* 12px approx */
  padding: var(--spacing-sm); /* 12px */
  border-radius: var(--radius-sm); /* 8px */
  transition: background 0.3s ease;
  cursor: pointer;
}

.dropdown-card i {
  font-size: 1.25rem; /* 20px */
  color: #233061; /* Brand color, consider adding to variables */
  margin-top: 3px;
}

.dropdown-card h4 {
  margin: 0;
  font-size: 1rem; /* 16px */
  color: #222; /* Consider var(--text-dark) if you add */
}

.dropdown-card p {
  margin: 2px 0 0;
  font-size: 0.8125rem; /* 13px */
  color: #555; /* Consider var(--text-muted) if you add */
}

/* Hover effect */
.dropdown-card:hover {
  background: #f4f9fb; /* Light background, consider var(--background-light) */
}