/* Custom CSS for a Premium, Sleek Look in Homepage (custom.css) */
/* Documentation: https://gethomepage.dev/latest/configs/custom-css-js/ */

/* Glassmorphism styling for all service and bookmark cards */
.service-card, .bookmark {
  backdrop-filter: blur(12px) !important;
  background-color: rgba(30, 41, 59, 0.4) !important; /* Semi-transparent slate-800 */
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Premium Hover effects: shadow glow, subtle lift, border color transition */
.service-card:hover, .bookmark:hover {
  transform: translateY(-3px) scale(1.008) !important;
  background-color: rgba(30, 41, 59, 0.65) !important;
  border-color: rgba(14, 165, 233, 0.45) !important; /* Elegant Sky Blue tint */
  box-shadow: 0 12px 28px -4px rgba(14, 165, 233, 0.18), 
              0 8px 12px -6px rgba(14, 165, 233, 0.18) !important;
}

/* Customizing the main search input bar for a glass look */
input[type="text"] {
  background-color: rgba(30, 41, 59, 0.35) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 0.3s ease !important;
}

input[type="text"]:focus {
  border-color: rgba(14, 165, 233, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25) !important;
}

/* Customizing scrollbars to fit the dark slate/sky theme */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.2);
}

::-webkit-scrollbar-thumb {
  background: rgba(14, 165, 233, 0.35);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(14, 165, 233, 0.6);
}

/* Centering layout elements (Service cards, Bookmarks, and Section Headers) */
#services, #bookmarks {
  justify-content: center !important;
}

.services-list, .bookmark-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important; /* Centering the items horizontally */
  align-items: center !important;
}

/* Center group header titles dynamically */
.services-group button, .bookmark-group button {
  justify-content: center !important;
}

.services-group button h2, .bookmark-group button h2 {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.services-group button svg, .bookmark-group button svg {
  margin-left: 0 !important;
}