/* Modern Glassmorphism Styling for Homepage */

/* Glass card styling for all service cards */
.service > div {
  background: rgba(18, 22, 34, 0.55) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Card hover effect: gentle elevation and subtle violet/glow accent */
.service > div:hover {
  background: rgba(28, 34, 52, 0.72) !important;
  border-color: rgba(168, 85, 247, 0.35) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.55), 0 0 18px 2px rgba(168, 85, 247, 0.2) !important;
}

/* Glassmorphism for Bookmark cards */
#bookmarks a {
  background: rgba(18, 22, 34, 0.55) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#bookmarks a:hover {
  background: rgba(28, 34, 52, 0.72) !important;
  border-color: rgba(168, 85, 247, 0.35) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.55), 0 0 18px 2px rgba(168, 85, 247, 0.2) !important;
}

/* Top Information Widgets (CPU, Memory, Storage, Uptime) */
#information-widgets > div,
#information-widgets-right > div,
#widgets-wrap > div {
  background: rgba(18, 22, 34, 0.55) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  padding: 0.4rem 0.75rem !important;
}

/* Group Headers */
.service-group-name {
  font-weight: 600 !important;
  letter-spacing: 0.025em !important;
  color: #f1f5f9 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}

.services-group {
  margin-bottom: 1.25rem !important;
}

/* Search input glass styling */
input[type="search"],
input[type="text"] {
  background: rgba(18, 22, 34, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0.5rem !important;
  color: #f8fafc !important;
}

input[type="search"]:focus,
input[type="text"]:focus {
  border-color: rgba(168, 85, 247, 0.5) !important;
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.25) !important;
  outline: none !important;
}