/* ==========================================================================
   selfHosted Theme — Brands / Buttons
   ========================================================================== */

.rounded-avatar {
  border-radius: 50%;
  border: 2px solid rgba(34, 211, 238, 0.25);
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.12);
}

.social-icon {
  font-size: 26px;
  padding: 8px;
  color: #8899aa;
  transition: color 0.3s ease;
}
.social-icon:hover {
  color: #22d3ee;
}
.social-icon-div {
  padding-bottom: 16px;
}

.icon {
  padding: 0px 8px 3.5px 0px;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  filter: none;
}

/* ==========================================================================
   Pill buttons — only target .button class, not bare <button>
   ========================================================================== */
.button {
  display: inline-block;
  position: relative;
  text-decoration: none;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 20px;
  white-space: wrap;
  outline: none;
  cursor: pointer;

  min-width: 200px;
  max-width: 100%;
  width: 100%;
  height: auto;
  padding: 14px 20px;
  box-sizing: border-box;

  border-radius: 50px;
  border: none;

  background: linear-gradient(135deg, rgba(20, 28, 38, 0.8) 0%, rgba(15, 22, 32, 0.9) 100%);
  color: #c8d6e5;

  box-shadow:
    inset 0 0 0 1px rgba(34, 211, 238, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.2);

  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.button:hover {
  color: #f0f6fc;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.08) 0%, rgba(94, 234, 212, 0.05) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(34, 211, 238, 0.4),
    0 4px 20px rgba(34, 211, 238, 0.1),
    0 0 40px rgba(34, 211, 238, 0.04);
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0px);
  transition-duration: 0.1s;
}

/* Brand hover tints */
.button.button-default:hover { box-shadow: inset 0 0 0 1px rgba(0, 133, 255, 0.4), 0 4px 20px rgba(0, 133, 255, 0.1); }
.button.button-discord:hover { box-shadow: inset 0 0 0 1px rgba(88, 101, 242, 0.45), 0 4px 20px rgba(88, 101, 242, 0.1); }
.button.button-twitter:hover { box-shadow: inset 0 0 0 1px rgba(29, 161, 242, 0.45), 0 4px 20px rgba(29, 161, 242, 0.1); }
.button.button-instagram:hover { box-shadow: inset 0 0 0 1px rgba(225, 48, 108, 0.4), 0 4px 20px rgba(225, 48, 108, 0.08); }
.button.button-facebook:hover { box-shadow: inset 0 0 0 1px rgba(24, 119, 242, 0.45), 0 4px 20px rgba(24, 119, 242, 0.1); }
.button.button-messenger:hover { box-shadow: inset 0 0 0 1px rgba(0, 132, 255, 0.45), 0 4px 20px rgba(0, 132, 255, 0.1); }
.button.button-youtube:hover,
.button.button-youtube-music:hover { box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.35), 0 4px 20px rgba(255, 0, 0, 0.08); }
.button.button-twitch:hover { box-shadow: inset 0 0 0 1px rgba(145, 70, 255, 0.45), 0 4px 20px rgba(145, 70, 255, 0.1); }
.button.button-github:hover { box-shadow: inset 0 0 0 1px rgba(200, 210, 220, 0.35), 0 4px 20px rgba(200, 210, 220, 0.06); }
.button.button-gitlab:hover { box-shadow: inset 0 0 0 1px rgba(97, 81, 178, 0.45), 0 4px 20px rgba(97, 81, 178, 0.1); }
.button.button-spotify:hover { box-shadow: inset 0 0 0 1px rgba(30, 215, 96, 0.4), 0 4px 20px rgba(30, 215, 96, 0.08); }
.button.button-steam:hover { box-shadow: inset 0 0 0 1px rgba(102, 192, 244, 0.4), 0 4px 20px rgba(102, 192, 244, 0.08); }
.button.button-reddit:hover { box-shadow: inset 0 0 0 1px rgba(255, 69, 0, 0.35), 0 4px 20px rgba(255, 69, 0, 0.08); }
.button.button-linkedin:hover { box-shadow: inset 0 0 0 1px rgba(40, 103, 178, 0.45), 0 4px 20px rgba(40, 103, 178, 0.1); }
.button.button-whatsapp:hover { box-shadow: inset 0 0 0 1px rgba(37, 211, 102, 0.4), 0 4px 20px rgba(37, 211, 102, 0.08); }
.button.button-telegram:hover { box-shadow: inset 0 0 0 1px rgba(63, 174, 232, 0.45), 0 4px 20px rgba(63, 174, 232, 0.1); }
.button.button-signal:hover { box-shadow: inset 0 0 0 1px rgba(58, 118, 240, 0.45), 0 4px 20px rgba(58, 118, 240, 0.1); }
.button.button-tiktok:hover { box-shadow: inset 0 0 0 1px rgba(255, 0, 80, 0.35), 0 4px 20px rgba(255, 0, 80, 0.08); }
.button.button-snapchat:hover { box-shadow: inset 0 0 0 1px rgba(255, 252, 0, 0.3), 0 4px 20px rgba(255, 252, 0, 0.06); }
.button.button-medium:hover { box-shadow: inset 0 0 0 1px rgba(200, 210, 220, 0.35), 0 4px 20px rgba(200, 210, 220, 0.06); }
.button.button-pinterest:hover { box-shadow: inset 0 0 0 1px rgba(230, 0, 35, 0.35), 0 4px 20px rgba(230, 0, 35, 0.08); }
.button.button-mastodon:hover { box-shadow: inset 0 0 0 1px rgba(99, 100, 255, 0.45), 0 4px 20px rgba(99, 100, 255, 0.1); }
.button.button-lemmy:hover,
.button.button-matrix:hover { box-shadow: inset 0 0 0 1px rgba(200, 210, 220, 0.35), 0 4px 20px rgba(200, 210, 220, 0.06); }
.button.button-patreon:hover { box-shadow: inset 0 0 0 1px rgba(255, 66, 77, 0.4), 0 4px 20px rgba(255, 66, 77, 0.08); }
.button.button-paypal:hover { box-shadow: inset 0 0 0 1px rgba(0, 48, 135, 0.45), 0 4px 20px rgba(0, 48, 135, 0.1); }
.button.button-ko-fi:hover { box-shadow: inset 0 0 0 1px rgba(19, 195, 255, 0.45), 0 4px 20px rgba(19, 195, 255, 0.1); }
.button.button-coffee:hover { box-shadow: inset 0 0 0 1px rgba(255, 221, 0, 0.3), 0 4px 20px rgba(255, 221, 0, 0.06); }
.button.button-cashapp:hover { box-shadow: inset 0 0 0 1px rgba(0, 200, 83, 0.4), 0 4px 20px rgba(0, 200, 83, 0.08); }
.button.button-venmo:hover { box-shadow: inset 0 0 0 1px rgba(61, 149, 206, 0.45), 0 4px 20px rgba(61, 149, 206, 0.1); }
.button.button-amazon:hover { box-shadow: inset 0 0 0 1px rgba(255, 153, 0, 0.35), 0 4px 20px rgba(255, 153, 0, 0.08); }
.button.button-appstore:hover { box-shadow: inset 0 0 0 1px rgba(0, 122, 255, 0.45), 0 4px 20px rgba(0, 122, 255, 0.1); }
.button.button-playstore:hover { box-shadow: inset 0 0 0 1px rgba(52, 168, 83, 0.4), 0 4px 20px rgba(52, 168, 83, 0.08); }
.button.button-apple-music:hover { box-shadow: inset 0 0 0 1px rgba(252, 60, 68, 0.4), 0 4px 20px rgba(252, 60, 68, 0.08); }
.button.button-apple-podcasts:hover { box-shadow: inset 0 0 0 1px rgba(131, 56, 236, 0.45), 0 4px 20px rgba(131, 56, 236, 0.1); }
.button.button-bandcamp:hover { box-shadow: inset 0 0 0 1px rgba(29, 159, 195, 0.45), 0 4px 20px rgba(29, 159, 195, 0.1); }
.button.button-soundcloud:hover { box-shadow: inset 0 0 0 1px rgba(255, 85, 0, 0.35), 0 4px 20px rgba(255, 85, 0, 0.08); }
.button.button-deezer:hover { box-shadow: inset 0 0 0 1px rgba(160, 30, 210, 0.4), 0 4px 20px rgba(160, 30, 210, 0.08); }
.button.button-vimeo:hover { box-shadow: inset 0 0 0 1px rgba(26, 183, 234, 0.45), 0 4px 20px rgba(26, 183, 234, 0.1); }
.button.button-flickr:hover { box-shadow: inset 0 0 0 1px rgba(255, 0, 132, 0.35), 0 4px 20px rgba(255, 0, 132, 0.08); }
.button.button-codepen:hover,
.button.button-codeberg:hover { box-shadow: inset 0 0 0 1px rgba(33, 133, 208, 0.45), 0 4px 20px rgba(33, 133, 208, 0.1); }
.button.button-figma:hover { box-shadow: inset 0 0 0 1px rgba(162, 89, 255, 0.4), 0 4px 20px rgba(162, 89, 255, 0.08); }
.button.button-trello:hover { box-shadow: inset 0 0 0 1px rgba(0, 121, 191, 0.45), 0 4px 20px rgba(0, 121, 191, 0.1); }
.button.button-wordpress:hover { box-shadow: inset 0 0 0 1px rgba(33, 117, 155, 0.45), 0 4px 20px rgba(33, 117, 155, 0.1); }
.button.button-etsy:hover { box-shadow: inset 0 0 0 1px rgba(244, 88, 0, 0.35), 0 4px 20px rgba(244, 88, 0, 0.08); }
.button.button-itchio:hover { box-shadow: inset 0 0 0 1px rgba(250, 92, 92, 0.4), 0 4px 20px rgba(250, 92, 92, 0.08); }
.button.button-tumblr:hover { box-shadow: inset 0 0 0 1px rgba(53, 70, 92, 0.5), 0 4px 20px rgba(53, 70, 92, 0.1); }

.button.button-website:hover,
.button.button-custom_website:hover,
.button.button-custom:hover,
.button.button-web:hover,
.button.button-littlelink-custom:hover,
.button.button-dev-to:hover,
.button.button-notion:hover,
.button.button-unity:hover,
.button.button-kit:hover,
.button.button-all-inkl:hover,
.button.button-epic-games:hover,
.button.button-owncast:hover,
.button.button-plemora:hover,
.button.button-bookwyrm:hover,
.button.button-vrchat:hover,
.button.button-threema:hover,
.button.button-misskey:hover {
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.4), 0 4px 20px rgba(34, 211, 238, 0.08);
}

.button.button-peertube:hover { box-shadow: inset 0 0 0 1px rgba(194, 89, 18, 0.4), 0 4px 20px rgba(194, 89, 18, 0.08); }
.button.button-pixelfed:hover { box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.4), 0 4px 20px rgba(94, 234, 212, 0.08); }
.button.button-funkwhale:hover { box-shadow: inset 0 0 0 1px rgba(0, 159, 227, 0.45), 0 4px 20px rgba(0, 159, 227, 0.1); }
.button.button-goodreads:hover { box-shadow: inset 0 0 0 1px rgba(135, 86, 43, 0.4), 0 4px 20px rgba(135, 86, 43, 0.08); }
.button.button-letterboxd:hover { box-shadow: inset 0 0 0 1px rgba(0, 210, 120, 0.4), 0 4px 20px rgba(0, 210, 120, 0.08); }
.button.button-strava:hover { box-shadow: inset 0 0 0 1px rgba(252, 82, 0, 0.35), 0 4px 20px rgba(252, 82, 0, 0.08); }
.button.button-untappd:hover { box-shadow: inset 0 0 0 1px rgba(255, 192, 0, 0.3), 0 4px 20px rgba(255, 192, 0, 0.06); }
.button.button-session:hover { box-shadow: inset 0 0 0 1px rgba(0, 247, 130, 0.35), 0 4px 20px rgba(0, 247, 130, 0.08); }
.button.button-briar:hover { box-shadow: inset 0 0 0 1px rgba(149, 210, 32, 0.4), 0 4px 20px rgba(149, 210, 32, 0.08); }
.button.button-xing:hover { box-shadow: inset 0 0 0 1px rgba(2, 100, 102, 0.45), 0 4px 20px rgba(2, 100, 102, 0.1); }
.button.button-odysee:hover { box-shadow: inset 0 0 0 1px rgba(245, 75, 100, 0.4), 0 4px 20px rgba(245, 75, 100, 0.08); }
.button.button-unraid:hover { box-shadow: inset 0 0 0 1px rgba(227, 110, 41, 0.4), 0 4px 20px rgba(227, 110, 41, 0.08); }
.button.button-humble-bundle:hover { box-shadow: inset 0 0 0 1px rgba(203, 39, 44, 0.4), 0 4px 20px rgba(203, 39, 44, 0.08); }
.button.button-kickstarter:hover { box-shadow: inset 0 0 0 1px rgba(5, 206, 120, 0.4), 0 4px 20px rgba(5, 206, 120, 0.08); }
.button.button-producthunt:hover { box-shadow: inset 0 0 0 1px rgba(218, 85, 47, 0.4), 0 4px 20px rgba(218, 85, 47, 0.08); }
.button.button-scribd:hover { box-shadow: inset 0 0 0 1px rgba(31, 123, 133, 0.45), 0 4px 20px rgba(31, 123, 133, 0.1); }
.button.button-liberapay:hover { box-shadow: inset 0 0 0 1px rgba(246, 201, 21, 0.3), 0 4px 20px rgba(246, 201, 21, 0.06); }
.button.button-cryptpad:hover { box-shadow: inset 0 0 0 1px rgba(0, 135, 255, 0.45), 0 4px 20px rgba(0, 135, 255, 0.1); }
.button.button-openstreetmap:hover { box-shadow: inset 0 0 0 1px rgba(126, 188, 89, 0.4), 0 4px 20px rgba(126, 188, 89, 0.08); }
.button.button-piwigo:hover { box-shadow: inset 0 0 0 1px rgba(255, 119, 0, 0.35), 0 4px 20px rgba(255, 119, 0, 0.08); }
.button.button-castopod:hover { box-shadow: inset 0 0 0 1px rgba(0, 86, 74, 0.45), 0 4px 20px rgba(0, 86, 74, 0.1); }
.button.button-upptime:hover { box-shadow: inset 0 0 0 1px rgba(0, 88, 71, 0.45), 0 4px 20px rgba(0, 88, 71, 0.1); }
.button.button-firefox:hover { box-shadow: inset 0 0 0 1px rgba(255, 68, 0, 0.35), 0 4px 20px rgba(255, 68, 0, 0.08); }
.button.button-f-droid:hover { box-shadow: inset 0 0 0 1px rgba(26, 139, 71, 0.4), 0 4px 20px rgba(26, 139, 71, 0.08); }
.button.button-apple-books:hover { box-shadow: inset 0 0 0 1px rgba(248, 154, 28, 0.4), 0 4px 20px rgba(248, 154, 28, 0.08); }
.button.button-skoob:hover { box-shadow: inset 0 0 0 1px rgba(49, 137, 200, 0.45), 0 4px 20px rgba(49, 137, 200, 0.1); }