@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

/* Global font */
* { font-family: 'Inter', sans-serif !important; }

/* Service cards */
.service {
  background: rgba(20, 20, 30, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(10px) !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease !important;
}
.service:hover {
  transform: translateY(-3px) scale(1.01) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0,0,0,0.4) !important;
}

/* Icon area - transparent, no tint */
.service-icon {
  background: transparent !important;
}
.service-icon img {
  filter: none !important;
}

/* Section headers */
.service-group-name {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  opacity: 0.5 !important;
}

/* Service name text */
.service-title {
  color: rgba(240, 240, 255, 0.92) !important;
  font-weight: 500 !important;
}

/* Service description */
.service-description {
  color: rgba(200, 200, 220, 0.5) !important;
  font-size: 0.71rem !important;
}

/* Widget stat numbers */
.service-tags span, .service-tag {
  font-weight: 500 !important;
  opacity: 0.85 !important;
}

/* Top widget bar */
.widget-container {
  background: rgba(20, 20, 30, 0.5) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 6px 14px !important;
}

/* Search bar */
input[type='text'], input[type='search'], input.rounded-md {
  background: rgba(20, 20, 30, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  color: rgba(240, 240, 255, 0.9) !important;
  backdrop-filter: blur(8px) !important;
}
input[type='text']:focus, input[type='search']:focus, input.rounded-md:focus {
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06) !important;
}
input::placeholder { color: rgba(200, 200, 220, 0.35) !important; }

/* Bookmark icons */
.bookmark-icon-container, a[class*='bookmark'] {
  background: rgba(20, 20, 30, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.bookmark-icon-container:hover, a[class*='bookmark']:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

/* Thin scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }
/* ═══════════════════════════════════════════════════
   ENHANCED SEARCH BAR
   ═══════════════════════════════════════════════════ */

/* Make the search widget container full-width and taller */
form.information-widget-search {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Make the search input much taller and more prominent */
form.information-widget-search input {
  height: 3rem !important;
  font-size: 1rem !important;
  padding: 0 1.25rem !important;
  border-radius: 14px !important;
  background: rgba(15, 15, 25, 0.65) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.13) !important;
  color: rgba(240, 240, 255, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  width: 100% !important;
}

form.information-widget-search input:focus {
  border-color: rgba(120, 160, 255, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(100, 140, 255, 0.1), 0 2px 12px rgba(0,0,0,0.3) !important;
  outline: none !important;
}

form.information-widget-search input::placeholder {
  color: rgba(200, 200, 220, 0.4) !important;
  font-size: 0.9rem !important;
}

/* Provider switcher buttons */
form.information-widget-search button {
  border-radius: 10px !important;
  padding: 0.4rem 0.7rem !important;
  font-size: 0.75rem !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(220,220,240,0.7) !important;
  transition: all 0.15s !important;
}

form.information-widget-search button:hover {
  background: rgba(255,255,255,0.12) !important;
  color: rgba(240,240,255,0.9) !important;
}

/* Make the top widget bar a bit taller to accommodate bigger search */
#information-widgets {
  min-height: 5.5rem !important;
}