/* Hostable Custom Styles - Tailwind v4 Compatible */

/* Font Awesome 7 Pro Font Definitions */
@font-face {
  font-family: "Font Awesome 6 Pro";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("/static/fonts/fa-solid-900.woff2") format("woff2");
}

@font-face {
  font-family: "Font Awesome 6 Pro";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/static/fonts/fa-regular-400.woff2") format("woff2");
}

@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/static/fonts/fa-brands-400.woff2") format("woff2");
}

/* Font Awesome Base Classes */
.fas, .fa-solid, [class*="fa-"] {
  font-family: "Font Awesome 6 Pro", sans-serif;
  font-weight: 900;
  font-style: normal;
  display: inline-block;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.far, .fa-regular {
  font-family: "Font Awesome 6 Pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fab, .fa-brands {
  font-family: "Font Awesome 6 Brands", sans-serif;
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fas:before, .fa-solid:before, [class*="fa-"]:before {
  font-weight: 900;
}

.far:before, .fa-regular:before {
  font-weight: 400;
}

.fab:before, .fa-brands:before {
  font-weight: 400;
}

/* Social Media Icon Hover Effects */
.social-icon {
  transition: all 0.3s ease;
}

.social-icon:hover {
  background-color: #0263e0 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(2, 99, 224, 0.3);
}

/* Footer Link Hover Effects */
.footer-link {
  transition: all 0.3s ease;
  position: relative;
}

.footer-link:hover {
  color: #bfdbfe !important;
  transform: translateX(4px);
}

.footer-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #bfdbfe;
  transition: width 0.3s ease;
}

.footer-link:hover::after {
  width: 100%;
}

/* Help Article Voting Button Spacing */
.fa-regular.fa-thumbs-up, .fa-regular.fa-thumbs-down {
  margin-right: 1rem !important; /* Extra spacing for voting icons */
}

/* Additional targeting for voting buttons */
button .fa-thumbs-up, button .fa-thumbs-down {
  margin-right: 1rem !important;
}

/* Voting Button Cursor States */
.voting-button {
  cursor: pointer !important;
}

.voting-button:disabled,
.voting-button[disabled] {
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

.voting-button:not([disabled]):hover {
  cursor: pointer !important;
}

/* Complete Tailwind Color Palette - All variants 50-950 */

/* Slate Colors */
.bg-slate-50 { background-color: #f8fafc !important; } .text-slate-50 { color: #f8fafc !important; }
.bg-slate-100 { background-color: #f1f5f9 !important; } .text-slate-100 { color: #f1f5f9 !important; }
.bg-slate-200 { background-color: #e2e8f0 !important; } .text-slate-200 { color: #e2e8f0 !important; }
.bg-slate-300 { background-color: #cbd5e1 !important; } .text-slate-300 { color: #cbd5e1 !important; }
.bg-slate-400 { background-color: #94a3b8 !important; } .text-slate-400 { color: #94a3b8 !important; }
.bg-slate-500 { background-color: #64748b !important; } .text-slate-500 { color: #64748b !important; }
.bg-slate-600 { background-color: #475569 !important; } .text-slate-600 { color: #475569 !important; }
.bg-slate-700 { background-color: #334155 !important; } .text-slate-700 { color: #334155 !important; }
.bg-slate-800 { background-color: #1e293b !important; } .text-slate-800 { color: #1e293b !important; }
.bg-slate-900 { background-color: #0f172a !important; } .text-slate-900 { color: #0f172a !important; }
.bg-slate-950 { background-color: #020617 !important; } .text-slate-950 { color: #020617 !important; }

/* Gray Colors */
.bg-gray-50 { background-color: #f9fafb !important; } .text-gray-50 { color: #f9fafb !important; }
.bg-gray-100 { background-color: #f3f4f6 !important; } .text-gray-100 { color: #f3f4f6 !important; }
.bg-gray-200 { background-color: #e5e7eb !important; } .text-gray-200 { color: #e5e7eb !important; }
.bg-gray-300 { background-color: #d1d5db !important; } .text-gray-300 { color: #d1d5db !important; }
.bg-gray-400 { background-color: #9ca3af !important; } .text-gray-400 { color: #9ca3af !important; }
.bg-gray-500 { background-color: #6b7280 !important; } .text-gray-500 { color: #6b7280 !important; }
.bg-gray-600 { background-color: #4b5563 !important; } .text-gray-600 { color: #4b5563 !important; }
.bg-gray-700 { background-color: #374151 !important; } .text-gray-700 { color: #374151 !important; }
.bg-gray-800 { background-color: #1f2937 !important; } .text-gray-800 { color: #1f2937 !important; }
.bg-gray-900 { background-color: #111827 !important; } .text-gray-900 { color: #111827 !important; }
.bg-gray-950 { background-color: #030712 !important; } .text-gray-950 { color: #030712 !important; }

/* Zinc Colors */
.bg-zinc-50 { background-color: #fafafa !important; } .text-zinc-50 { color: #fafafa !important; }
.bg-zinc-100 { background-color: #f4f4f5 !important; } .text-zinc-100 { color: #f4f4f5 !important; }
.bg-zinc-200 { background-color: #e4e4e7 !important; } .text-zinc-200 { color: #e4e4e7 !important; }
.bg-zinc-300 { background-color: #d4d4d8 !important; } .text-zinc-300 { color: #d4d4d8 !important; }
.bg-zinc-400 { background-color: #a1a1aa !important; } .text-zinc-400 { color: #a1a1aa !important; }
.bg-zinc-500 { background-color: #71717a !important; } .text-zinc-500 { color: #71717a !important; }
.bg-zinc-600 { background-color: #52525b !important; } .text-zinc-600 { color: #52525b !important; }
.bg-zinc-700 { background-color: #3f3f46 !important; } .text-zinc-700 { color: #3f3f46 !important; }
.bg-zinc-800 { background-color: #27272a !important; } .text-zinc-800 { color: #27272a !important; }
.bg-zinc-900 { background-color: #18181b !important; } .text-zinc-900 { color: #18181b !important; }
.bg-zinc-950 { background-color: #09090b !important; } .text-zinc-950 { color: #09090b !important; }

/* Neutral Colors */
.bg-neutral-50 { background-color: #fafafa !important; } .text-neutral-50 { color: #fafafa !important; }
.bg-neutral-100 { background-color: #f5f5f5 !important; } .text-neutral-100 { color: #f5f5f5 !important; }
.bg-neutral-200 { background-color: #e5e5e5 !important; } .text-neutral-200 { color: #e5e5e5 !important; }
.bg-neutral-300 { background-color: #d4d4d4 !important; } .text-neutral-300 { color: #d4d4d4 !important; }
.bg-neutral-400 { background-color: #a3a3a3 !important; } .text-neutral-400 { color: #a3a3a3 !important; }
.bg-neutral-500 { background-color: #737373 !important; } .text-neutral-500 { color: #737373 !important; }
.bg-neutral-600 { background-color: #525252 !important; } .text-neutral-600 { color: #525252 !important; }
.bg-neutral-700 { background-color: #404040 !important; } .text-neutral-700 { color: #404040 !important; }
.bg-neutral-800 { background-color: #262626 !important; } .text-neutral-800 { color: #262626 !important; }
.bg-neutral-900 { background-color: #171717 !important; } .text-neutral-900 { color: #171717 !important; }
.bg-neutral-950 { background-color: #0a0a0a !important; } .text-neutral-950 { color: #0a0a0a !important; }

/* Blue Colors */
.bg-blue-50 { background-color: #eff6ff !important; } .text-blue-50 { color: #eff6ff !important; }
.bg-blue-100 { background-color: #dbeafe !important; } .text-blue-100 { color: #dbeafe !important; }
.bg-blue-200 { background-color: #bfdbfe !important; } .text-blue-200 { color: #bfdbfe !important; }
.bg-blue-300 { background-color: #93c5fd !important; } .text-blue-300 { color: #93c5fd !important; }
.bg-blue-400 { background-color: #60a5fa !important; } .text-blue-400 { color: #60a5fa !important; }
.bg-blue-500 { background-color: #3b82f6 !important; } .text-blue-500 { color: #3b82f6 !important; }
.bg-blue-600 { background-color: #2563eb !important; } .text-blue-600 { color: #2563eb !important; }
.bg-blue-700 { background-color: #1d4ed8 !important; } .text-blue-700 { color: #1d4ed8 !important; }
.bg-blue-800 { background-color: #1e40af !important; } .text-blue-800 { color: #1e40af !important; }
.bg-blue-900 { background-color: #1e3a8a !important; } .text-blue-900 { color: #1e3a8a !important; }
.bg-blue-950 { background-color: #172554 !important; } .text-blue-950 { color: #172554 !important; }

/* Red Colors */
.bg-red-50 { background-color: #fef2f2 !important; } .text-red-50 { color: #fef2f2 !important; }
.bg-red-100 { background-color: #fee2e2 !important; } .text-red-100 { color: #fee2e2 !important; }
.bg-red-200 { background-color: #fecaca !important; } .text-red-200 { color: #fecaca !important; }
.bg-red-300 { background-color: #fca5a5 !important; } .text-red-300 { color: #fca5a5 !important; }
.bg-red-400 { background-color: #f87171 !important; } .text-red-400 { color: #f87171 !important; }
.bg-red-500 { background-color: #ef4444 !important; } .text-red-500 { color: #ef4444 !important; }
.bg-red-600 { background-color: #dc2626 !important; } .text-red-600 { color: #dc2626 !important; }
.bg-red-700 { background-color: #b91c1c !important; } .text-red-700 { color: #b91c1c !important; }
.bg-red-800 { background-color: #991b1b !important; } .text-red-800 { color: #991b1b !important; }
.bg-red-900 { background-color: #7f1d1d !important; } .text-red-900 { color: #7f1d1d !important; }
.bg-red-950 { background-color: #450a0a !important; } .text-red-950 { color: #450a0a !important; }

/* Green Colors */
.bg-green-50 { background-color: #f0fdf4 !important; } .text-green-50 { color: #f0fdf4 !important; }
.bg-green-100 { background-color: #dcfce7 !important; } .text-green-100 { color: #dcfce7 !important; }
.bg-green-200 { background-color: #bbf7d0 !important; } .text-green-200 { color: #bbf7d0 !important; }
.bg-green-300 { background-color: #86efac !important; } .text-green-300 { color: #86efac !important; }
.bg-green-400 { background-color: #4ade80 !important; } .text-green-400 { color: #4ade80 !important; }
.bg-green-500 { background-color: #22c55e !important; } .text-green-500 { color: #22c55e !important; }
.bg-green-600 { background-color: #16a34a !important; } .text-green-600 { color: #16a34a !important; }
.bg-green-700 { background-color: #15803d !important; } .text-green-700 { color: #15803d !important; }
.bg-green-800 { background-color: #166534 !important; } .text-green-800 { color: #166534 !important; }
.bg-green-900 { background-color: #14532d !important; } .text-green-900 { color: #14532d !important; }
.bg-green-950 { background-color: #052e16 !important; } .text-green-950 { color: #052e16 !important; }

/* Hover states for commonly used colors */
.hover\:text-blue-700:hover { color: #1d4ed8 !important; }
.hover\:text-blue-800:hover { color: #1e40af !important; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8 !important; }
.hover\:bg-blue-800:hover { background-color: #1e40af !important; }

/* ------------------------------------------------------------------ */
/* Extracted utility classes (from repeated inline styles)             */
/* ------------------------------------------------------------------ */

/* Dark section backgrounds */
.bg-dark-section     { background: #0F172A; }

/* CTA red glow (270deg) - wraps a CTA card */
.bg-cta-glow         { background: linear-gradient(270deg, rgba(239,33,58,.4) 0%, rgba(15,23,42,0) 51.61%); border-radius: 16px; }

/* Decorative red edge glow (90deg horizontal) */
.bg-red-edge-glow    { background: linear-gradient(90deg, rgba(239,33,58,.4) 0%, rgba(15,23,42,0) 20%, rgba(15,23,42,0) 80%, rgba(239,33,58,.4) 100%); }

/* Blue gradient (buttons, badges) */
.bg-blue-gradient    { background: linear-gradient(135deg, #0263e0, #3B82F6); }

/* Pricing card gradient */
.bg-pricing-gradient { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); }

/* White alpha text */
.text-white-70       { color: rgba(255,255,255,0.7); }
.text-white-80       { color: rgba(255,255,255,0.8); }

/* Dark translucent panel */
.bg-panel-dark       { background: rgba(26,35,56,0.6); border-color: rgba(255,255,255,0.1); backdrop-filter: blur(20px); }

/* Blue button drop-shadow */
.shadow-blue-btn     { box-shadow: 0 4px 15px rgba(2,99,224,0.4); }

/* Common card shadow */
.shadow-card         { box-shadow: 0px 4px 40px 0px rgba(0,0,0,0.08); }

/* Light section background */
.bg-light-section    { background-color: #F4F7FA; }

/* Custom color variables */
:root {
  --hostable-red: #D71F38;
  --hostable-blue: #0263e0;
  --hostable-pink: #D82A42;
  --hostable-dark: #1A2338;
  --hostable-darker: #000D25;
  --hostable-light: #F4F7FA;
}

/* Service card component - Using default-theme.css definitions for consistency */

/* Hostable button styles */
.btn-hostable-primary {
  background-color: var(--hostable-red);
  color: white;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.btn-hostable-primary:hover {
  background-color: #B91C31;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(215, 31, 56, 0.3);
}

.btn-hostable-secondary {
  background-color: var(--hostable-blue);
  color: white;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.btn-hostable-secondary:hover {
  background-color: #0552CC;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(2, 99, 224, 0.3);
}

/* Text gradient utility */
.text-gradient {
  background: linear-gradient(135deg, var(--hostable-red) 0%, var(--hostable-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hostable color utilities for Tailwind v4 */
.bg-hostable-red { background-color: var(--hostable-red); }
.bg-hostable-blue { background-color: var(--hostable-blue); }
.bg-hostable-pink { background-color: var(--hostable-pink); }
.bg-hostable-dark { background-color: var(--hostable-dark); }
.bg-hostable-darker { background-color: var(--hostable-darker); }
.bg-hostable-light { background-color: var(--hostable-light); }

.text-hostable-red { color: var(--hostable-red); }
.text-hostable-blue { color: var(--hostable-blue); }
.text-hostable-pink { color: var(--hostable-pink); }
.text-hostable-dark { color: var(--hostable-dark); }
.text-hostable-darker { color: var(--hostable-darker); }

.border-hostable-red { border-color: var(--hostable-red); }
.border-hostable-blue { border-color: var(--hostable-blue); }

/* Responsive improvements */
@media (max-width: 768px) {
  .service-card {
    margin-bottom: 1.5rem;
  }
}

/* Animation utilities */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* Banner spacing fix */
body.has-banner {
  padding-top: 140px !important;
}

body:not(.has-banner) {
  padding-top: 80px !important;
}

/* Navigation fixes for Tailwind v4 compatibility */
.nav-ps {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 4px 20px rgba(2, 99, 224, 0.08), 0 2px 8px rgba(2, 99, 224, 0.05) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  min-height: 80px !important;
  z-index: 50 !important;
  display: block !important;
}

body.has-banner .nav-ps {
  top: 60px !important;
}

.nav-ps-link {
  color: #1A2338 !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

.nav-ps-link:hover {
  color: #D71F38 !important;
}

/* Desktop navigation display fixes */
.desktop-nav {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* Prevent navigation items from wrapping */
.desktop-nav > div {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Ensure nav buttons don't wrap text */
.nav-ps-link {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Force all navigation items to stay on one line */
@media (min-width: 1024px) {
  .desktop-nav a, .desktop-nav button {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
}

.desktop-cta {
  display: flex !important;
}

/* Mobile navigation visibility */
@media (max-width: 1023px) {
  .desktop-nav {
    display: none !important;
  }
  .desktop-cta {
    display: none !important;
  }
  .mobile-menu-btn {
    display: block !important;
  }
}

@media (min-width: 1024px) {
  .mobile-menu-btn {
    display: none !important;
  }
}

/* Mobile menu styling */
.mobile-menu-shadow {
  box-shadow: 0 4px 20px rgba(2, 99, 224, 0.08), 0 2px 8px rgba(2, 99, 224, 0.05) !important;
}

/* Mobile menu button default state */
.mobile-menu-btn {
  display: none;
}

/* Mobile menu icon transitions and proper display */
.mobile-menu-btn i {
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* Ensure Alpine.js x-show works properly and prevent FOUC */
[x-cloak] { display: none !important; }

/* Force proper mobile menu icon states */
.mobile-menu-btn .fa-bars {
  display: block !important;
}

.mobile-menu-btn .fa-xmark {
  display: none !important;
}

/* Override Alpine.js when menu is open */
.mobile-menu-btn[data-menu-open="true"] .fa-bars {
  display: none !important;
}

.mobile-menu-btn[data-menu-open="true"] .fa-xmark {
  display: block !important;
}

/* Dropdown menu fixes */
.bg-white {
  background-color: white !important;
}

.rounded-2xl {
  border-radius: 1rem !important;
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
}

/* Icon and background fixes for dropdown headers */
.bg-opacity-20 {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Ensure all Tailwind utilities work */
.w-8 { width: 2rem !important; }

/* Centralized dropdown header color */
:root {
  --dropdown-header-color: #1e293b; /* Tailwind slate-800 */
}

/* Force remove all borders from dropdown elements */
.dropdown-header-slate,
.dropdown-header-slate *,
.dropdown-header-slate::before,
.dropdown-header-slate::after {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--dropdown-header-color) !important;
}

.dropdown-header-slate {
  padding: 0.625rem 1.5rem !important;
  background-color: var(--dropdown-header-color) !important;
  border-radius: 1rem 1rem 0 0 !important;
}

/* Dropdown arrow colors using CSS variable - override all inline styles */
.dropdown-arrow-domains div,
.dropdown-arrow-hosting div,
.dropdown-arrow-help div {
  width: 0 !important;
  height: 0 !important;
  border-left: 14px solid transparent !important;
  border-right: 14px solid transparent !important;
  border-bottom: 14px solid var(--dropdown-header-color) !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3)) !important;
  display: block !important;
}

/* Remove any potential borders from dropdown containers */
.absolute.top-full.mt-6.z-50 > div,
.absolute.top-full.mt-6.z-50 > div > div,
.relative {
  border: none !important;
  outline: none !important;
}

/* Ensure dropdown content doesn't clip arrows */
div[style*="overflow: visible"] {
  overflow: visible !important;
}

/* Force arrow visibility with highest specificity */
.dropdown-arrow-domains,
.dropdown-arrow-hosting,
.dropdown-arrow-help {
  z-index: 100 !important;
  display: block !important;
  position: absolute !important;
  top: -0.75rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.dropdown-arrow-domains div,
.dropdown-arrow-hosting div,
.dropdown-arrow-help div {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 14px solid transparent !important;
  border-right: 14px solid transparent !important;
  border-bottom: 14px solid var(--dropdown-header-color) !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3)) !important;
}

/* Target all potential dropdown elements more specifically */
div[style*="min-width: 280px"],
div[style*="min-width: 320px"],
div[style*="min-width: 350px"] {
  border: none !important;
  outline: none !important;
  background: linear-gradient(to bottom, var(--dropdown-header-color) 0%, var(--dropdown-header-color) 3rem, #fefefe 3rem, #fefefe 100%) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Ensure arrows are always visible above dropdown */
.z-60 {
  z-index: 60 !important;
}
.h-8 { height: 2rem !important; }
.w-5 { width: 1.25rem !important; }
.h-5 { height: 1.25rem !important; }
.rounded-lg { border-radius: 0.5rem !important; }
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.max-w-7xl { max-width: 80rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
.sm\:px-6 { }
@media (min-width: 640px) {
  .sm\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
}
.lg\:px-8 { }
@media (min-width: 1024px) {
  .lg\:px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
}
.mr-8 { margin-right: 2rem !important; }
.ml-8 { margin-left: 2rem !important; }
.mr-12 { margin-right: 3rem !important; }
.ml-12 { margin-left: 3rem !important; }

/* Spacing utilities for navigation */
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  margin-left: 0.75rem !important;
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  margin-left: 1rem !important;
}
.space-x-6 > :not([hidden]) ~ :not([hidden]) {
  margin-left: 1.5rem !important;
}
.space-x-8 > :not([hidden]) ~ :not([hidden]) {
  margin-left: 2rem !important;
}
.space-x-10 > :not([hidden]) ~ :not([hidden]) {
  margin-left: 2.5rem !important;
}
.space-x-12 > :not([hidden]) ~ :not([hidden]) {
  margin-left: 3rem !important;
}

/* Flex utilities */
.flex-1 { flex: 1 1 0% !important; }
.justify-center { justify-content: center !important; }

/* Transform and animation utilities */
.transform { 
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0deg;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important; 
}
.transition-transform { 
  transition-property: transform !important; 
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; 
  transition-duration: 150ms !important;
}
.duration-200 { transition-duration: 200ms !important; }
.rotate-180 { --tw-rotate: 180deg !important; }
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  margin-left: 0.75rem !important;
}
.text-base { font-size: 1rem !important; line-height: 1.5rem !important; }
.font-semibold { font-weight: 600 !important; }

/* Font Awesome 7 Pro icon mappings for proper display */
.fa-solid.fa-magnifying-glass:before { content: "\f002" !important; }
.fa-solid.fa-sort:before { content: "\f0dc" !important; }
.fa-solid.fa-right-left:before { content: "\f362" !important; }
.fa-solid.fa-window-maximize:before { content: "\f2d0" !important; }
.fa-solid.fa-ticket:before { content: "\f145" !important; }
.fa-solid.fa-book:before { content: "\f02d" !important; }
.fa-solid.fa-phone:before { content: "\f095" !important; }
.fa-solid.fa-chart-line:before { content: "\f201" !important; }
.fa-solid.fa-bullhorn:before { content: "\f0a1" !important; }
.fa-solid.fa-newspaper:before { content: "\f1ea" !important; }
.fa-solid.fa-envelope:before { content: "\f0e0" !important; }
.fa-solid.fa-headset:before { content: "\f590" !important; }
.fa-solid.fa-arrow-right:before { content: "\f061" !important; }
.fa-solid.fa-code:before { content: "\f121" !important; }
.fa-solid.fa-shield:before { content: "\f132" !important; }
.fa-solid.fa-road:before { content: "\f018" !important; }
.fa-solid.fa-file-lines:before { content: "\f15c" !important; }
.fa-solid.fa-circle-check:before { content: "\f058" !important; }
.fa-solid.fa-triangle-exclamation:before { content: "\f071" !important; }
.fa-solid.fa-circle-pause:before { content: "\f28b" !important; }
.fa-solid.fa-pen-to-square:before { content: "\f044" !important; }
.fa-solid.fa-circle-info:before { content: "\f05a" !important; }
.fa-solid.fa-globe:before { content: "\f0ac" !important; }
.text-white { color: white !important; }
.text-slate-600 { color: #475569 !important; }
.text-slate-800 { color: #1e293b !important; }
.text-slate-500 { color: #64748b !important; }
.text-slate-400 { color: #94a3b8 !important; }
.hover\:bg-slate-50:hover { background-color: #f8fafc !important; }
.hover\:text-slate-900:hover { color: #0f172a !important; }
.border-b { border-bottom-width: 1px !important; }
.border-blue-100 { border-color: #dbeafe !important; }
.border-slate-200 { border-color: #e2e8f0 !important; }
.text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }
.font-medium { font-weight: 500 !important; }
.mt-0\.5 { margin-top: 0.125rem !important; }
.flex { display: flex !important; }
.items-center { align-items: center !important; }
.items-start { align-items: flex-start !important; }
.justify-center { justify-content: center !important; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important; }
.group:hover .group-hover\:text-slate-900 { color: #0f172a !important; }.fa-brands.fa-wordpress:before { content: "\f19a" !important; }
.fa-regular.fa-thumbs-up:before { content: "\f164" !important; }
.fa-regular.fa-thumbs-down:before { content: "\f165" !important; }
.fa-regular.fa-folder-open:before { content: "\f07c" !important; }
.fa-solid.fa-arrow-up:before { content: "\f062" !important; }
.fa-solid.fa-house:before { content: "\f015" !important; }
.fa-solid.fa-floppy-disk:before { content: "\f0c7" !important; }
.fa-solid.fa-arrow-left:before { content: "\f060" !important; }
.fa-solid.fa-gift:before { content: "\f06b" !important; }
.fa-solid.fa-calendar-check:before { content: "\f274" !important; }
.fa-solid.fa-cog:before { content: "\f013" !important; }
.fa-solid.fa-flag:before { content: "\f024" !important; }
.fa-solid.fa-gear:before { content: "\f013" !important; }
.fa-solid.fa-xmark:before { content: "\f00d" !important; }
.fa-solid.fa-bars:before { content: "\f0c9" !important; }
.fa-solid.fa-cart-shopping:before { content: "\f07a" !important; }
.fa-solid.fa-chevron-down:before { content: "\f078" !important; }
.fa-solid.fa-plus:before { content: "\f067" !important; }
.fa-solid.fa-tag:before { content: "\f02b" !important; }
.fa-solid.fa-server:before { content: "\f233" !important; }
.fa-solid.fa-circle-question:before { content: "\f059" !important; }
.fa-solid.fa-check:before { content: "\f00c" !important; }
.fa-solid.fa-wand-magic-sparkles:before { content: "\e2ca" !important; }
.fa-solid.fa-lock:before { content: "\f023" !important; }
.fa-solid.fa-blog:before { content: "\f781" !important; }
.fa-brands.fa-cc-visa:before { content: "\f1f0" !important; }
.fa-brands.fa-cc-mastercard:before { content: "\f1f1" !important; }
.fa-brands.fa-cc-paypal:before { content: "\f1f4" !important; }
.fa-solid.fa-sort-up:before { content: "\f0de" !important; }
.fa-solid.fa-sort-down:before { content: "\f0dd" !important; }

/* Force Dropdown Menu Hover Effects */
.dropdown-menu a:hover,
a[class*="hover:bg-blue-50"]:hover {
  background-color: #e2e8f0 !important; /* slate-200 */
  color: #1e293b !important; /* slate-800 */
}

/* Specific dropdown menu item hover styles */
div[class*="p-2"] > a:hover {
  background-color: #e2e8f0 !important; /* slate-200 */
  color: #1e293b !important; /* slate-800 */
  transition: all 0.2s ease-in-out !important;
}

/* Target the exact dropdown structure */
.relative > div[class*="p-2"] > a:hover {
  background-color: #e2e8f0 !important;
  color: #1e293b !important;
}