/* ============================================================
   stackd-icons.css — vibrant, color-coded icons across Stackd
   ============================================================ */

/* Mobile menu / nav primary icons (always visible) */
.icon-navbar { font-size: 22px; }

/* Mobile bottom menu */
.menuMobile .feather.icon-home,
.navbar .feather.icon-home              { color: #FFD24A !important; }   /* Home — gold */

.menuMobile .fa-compass,
.navbar .fa-compass                     { color: #38BDF8 !important; }   /* Explore — cyan */

.menuMobile .icon-shopping-bag,
.navbar .icon-shopping-bag              { color: #F472B6 !important; }   /* Shop — pink */

.menuMobile .icon-send,
.navbar .icon-send                      { color: #A78BFA !important; }   /* Messages — purple */

.menuMobile .fa-bell,
.navbar .fa-bell                        { color: #FB923C !important; }   /* Notifications — orange */

/* Reels SVG (uses currentColor) */
.menuMobile a[href*="reels"] svg,
.navbar a[href*="reels"] svg            { color: #FF5E5B; }              /* Reels — red */

/* Search button in navbar */
.navbar .bi-search                      { color: #FFD24A; }              /* Search — gold */

/* Sidebar / dropdown nav icons */
.dropdown-navbar .bi-speedometer2,
.dropdown-navbar .icon-feather          { color: #34D399; }              /* Dashboard / Posts — green */
.dropdown-navbar .icon-archive          { color: #F59E0B; }              /* Vault — amber */
.dropdown-navbar .icon-bookmark         { color: #F472B6; }              /* Bookmarks — pink */
.dropdown-navbar .icon-heart            { color: #EF4444; }              /* Likes — red */
.dropdown-navbar .icon-users            { color: #14B8A6; }              /* Subscribers — teal */
.dropdown-navbar .icon-user-check       { color: #22C55E; }              /* Subscriptions — green */
.dropdown-navbar .bi-bag-check          { color: #F472B6; }              /* Purchases — pink */
.dropdown-navbar .icon-star             { color: #FBBF24; }              /* Featured — gold */
.dropdown-navbar .icon-moon             { color: #94A3B8; }              /* Dark mode — slate */
.dropdown-navbar .icon-sun              { color: #FBBF24; }              /* Light mode — gold */
.dropdown-navbar .icon-log-out          { color: #F87171; }              /* Logout — soft red */
.dropdown-navbar .icon-user             { color: #FFD24A; }              /* Profile — gold */
.dropdown-navbar .icon-settings         { color: #94A3B8; }              /* Settings — slate */
.dropdown-navbar .bi-gear,
.dropdown-navbar .bi-gear-fill,
.dropdown-navbar .bi-gear-wide,
.dropdown-navbar .bi-gear-wide-connected{ color: #94A3B8; }              /* Gear — slate */

/* Settings/gear in admin nav */
.btn .bi-gear,
.btn .bi-gear-fill,
.btn .icon-settings                     { color: #94A3B8 !important; }

/* Categories dropdown trigger icon */
.btn-tags-dropdown .bi-hash,
.btn-tags-dropdown .bi-tags,
.btn-tags-dropdown .feather             { color: #FFD24A; }

/* Tag chip dropdown styling */
.dropdown-tags {
  min-width: 260px;
  padding: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 24px -4px rgba(0,0,0,0.18);
}
.dropdown-tags .tags-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dropdown-tags .tags-grid a {
  background: #f3f4f6;
  color: #1f2937;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: all .12s ease;
}
.dropdown-tags .tags-grid a:hover {
  background: #FFD24A;
  color: #000;
  border-color: #FFD24A;
}
.dropdown-tags .tags-grid a.active {
  background: #FFD24A;
  color: #000;
  border-color: #FFD24A;
}

/* Tags icon in mobile bottom menu */
.menuMobile .stackd-tags-trigger .bi-hash { color: #FBBF24 !important; }

/* Subtle hover lift for nav icons */
.menuMobile .btn-mobile,
.navbar .icon-navbar {
  transition: transform .15s ease, color .15s ease;
}
.menuMobile .btn-mobile:hover .icon-navbar,
.menuMobile .btn-mobile:hover svg,
.navbar a:hover .icon-navbar { transform: translateY(-2px); }