/* NameCraft inner template styles (scoped) - Tailwind-compatible dark mode */
/* Using both html.dark and .dark selectors for maximum compatibility */

/* Base layout + background ---------------------------------------------------- */
body.page-template-page-namecraft,
body.page-template-templatespage-namecrafthtml {
  background: #f8fafc !important;
  color: #0f172a !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

html.dark body.page-template-page-namecraft,
.dark body.page-template-page-namecraft,
html.dark body.page-template-templatespage-namecrafthtml,
.dark body.page-template-templatespage-namecrafthtml {
  background: #0f172a !important;
  color: #f1f5f9 !important;
}

body.page-template-page-namecraft .wp-site-blocks,
body.page-template-templatespage-namecrafthtml .wp-site-blocks {
  background: transparent;
}

/* Ensure dark mode background is applied to page wrapper */
html.dark .namecraft-page,
.dark .namecraft-page {
  background: #0f172a !important;
}

.namecraft-page.gradient-bg,
.namecraft-wrap {
  background: transparent;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: #0f172a;
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
  /* Base font size for all content */
  font-size: 1rem;
  line-height: 1.5rem;
  overflow: visible;
}

.namecraft-wrap .nc-icon,
.nc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-size: 1rem;
  line-height: 1;
  vertical-align: middle;
}
.nc-cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  min-height: 3rem;
}
.namecraft-wrap button:focus-visible,
.namecraft-wrap a:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
  border-radius: 0.375rem;
}

@media (prefers-reduced-motion: reduce) {
  .namecraft-wrap *,
  .namecraft-page * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

html.dark .namecraft-page.gradient-bg,
.dark .namecraft-page.gradient-bg,
html.dark .namecraft-wrap,
.dark .namecraft-wrap {
  /* background: radial-gradient(
      1100px circle at 15% 0%,
      rgba(99, 102, 241, 0.15),
      transparent 55%
    ),
    radial-gradient(
      900px circle at 90% 10%,
      rgba(168, 85, 247, 0.12),
      transparent 50%
    ),
    linear-gradient(180deg, #0f172a 0%, #020617 100%) !important; */
  color: #f1f5f9 !important;
}

.namecraft-wrap .container {
  max-width: 1280px;
  width: 100%;
}

/* Improved responsive spacing */
@media (max-width: 640px) {
  .namecraft-wrap {
    font-size: 0.9375rem;
  }
}

@media (min-width: 1024px) {
  .namecraft-wrap .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.namecraft-wrap a {
  text-decoration: none;
  transition: color 0.2s ease;
}

.namecraft-wrap header,
.namecraft-wrap main {
  color: inherit;
  font-size: inherit;
}

/* Ensure all text elements inherit base font size unless they have a text-* class */
.namecraft-wrap {
  font-size: 1rem;
  line-height: 1.5rem;
}

/* Elements with Tailwind text-* classes should use their specified size */
.namecraft-wrap [class*='text-xs'],
.namecraft-wrap [class*='text-sm'],
.namecraft-wrap [class*='text-base'],
.namecraft-wrap [class*='text-lg'],
.namecraft-wrap [class*='text-xl'],
.namecraft-wrap [class*='text-2xl'],
.namecraft-wrap [class*='text-3xl'],
.namecraft-wrap [class*='text-4xl'],
.namecraft-wrap [class*='text-5xl'] {
  font-size: inherit;
}

.namecraft-wrap h1,
.namecraft-wrap h2,
.namecraft-wrap h3,
.namecraft-wrap h4 {
  letter-spacing: -0.02em;
  font-weight: 700;
  line-height: 1.2;
  /* Don't override Tailwind's text size classes */
  font-size: inherit;
}

html.dark .namecraft-wrap h1,
.dark .namecraft-wrap h1,
html.dark .namecraft-wrap h2,
.dark .namecraft-wrap h2,
html.dark .namecraft-wrap h3,
.dark .namecraft-wrap h3,
html.dark .namecraft-wrap h4,
.dark .namecraft-wrap h4 {
  color: #f1f5f9 !important;
}

/* Only apply clamp if no Tailwind text size class is present */
.namecraft-wrap h1:not([class*='text-']) {
  font-size: clamp(2rem, 5vw, 3rem);
}

.namecraft-wrap h2:not([class*='text-']) {
  font-size: clamp(1.5rem, 4vw, 2rem);
}

/* Force dark mode for all white backgrounds ----------------------------------- */
html.dark .namecraft-wrap .bg-white,
.dark .namecraft-wrap .bg-white {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}

html.dark .namecraft-wrap .bg-slate-50,
.dark .namecraft-wrap .bg-slate-50 {
  background-color: #0f172a !important;
}

html.dark .namecraft-wrap .bg-slate-100,
.dark .namecraft-wrap .bg-slate-100 {
  background-color: #1e293b !important;
}

/* Unified Card System ====================================================== */

/* All cards follow consistent styling */
.namecraft-wrap .nc-name-card,
.namecraft-wrap .bg-white.dark\:bg-slate-900,
.namecraft-wrap section > div.bg-white {
  border-radius: 12px !important; /* Consistent 12px for all cards */
  border: 1px solid #e2e8f0 !important; /* Consistent border */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08),
    0 1px 2px -1px rgba(0, 0, 0, 0.08) !important; /* Consistent shadow */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Consistent transition */
}

/* Enhanced Cards + surfaces with improved shadows and depth ------------------- */
.namecraft-wrap .nc-name-card {
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

.namecraft-wrap .nc-name-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #6366f1, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.namecraft-wrap .nc-name-card:hover::before {
  opacity: 1;
}

html.dark .namecraft-wrap .nc-name-card,
.dark .namecraft-wrap .nc-name-card {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
  color: #f1f5f9 !important;
}

.namecraft-wrap .nc-name-card {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.namecraft-wrap .nc-name-card:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: #6366f1;
  box-shadow: 0 12px 24px -6px rgba(99, 102, 241, 0.25),
    0 8px 16px -8px rgba(0, 0, 0, 0.15);
}

html.dark .namecraft-wrap .nc-name-card:hover,
.dark .namecraft-wrap .nc-name-card:hover {
  border-color: #818cf8 !important;
  box-shadow: 0 12px 24px -6px rgba(99, 102, 241, 0.4),
    0 8px 16px -8px rgba(0, 0, 0, 0.5);
}

/* Enhanced category links with better hover effects --------------------------- */
.namecraft-wrap .nc-category {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.namecraft-wrap .nc-category::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #6366f1, #8b5cf6);
  transform: scaleY(0);
  transition: transform 0.25s ease;
}

.namecraft-wrap .nc-category:hover::before {
  transform: scaleY(1);
}

html.dark .namecraft-wrap .nc-category,
.dark .namecraft-wrap .nc-category {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

.namecraft-wrap .nc-category:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  transform: translateX(4px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

html.dark .namecraft-wrap .nc-category:hover,
.dark .namecraft-wrap .nc-category:hover {
  background: #334155 !important;
  border-color: #475569 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 2px 4px -2px rgba(0, 0, 0, 0.3);
}

.namecraft-wrap .active-category {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.4),
    0 2px 8px -4px rgba(99, 102, 241, 0.3);
  transform: translateX(4px);
}

.namecraft-wrap .active-category::before {
  transform: scaleY(1);
  background: rgba(255, 255, 255, 0.3);
}

html.dark .namecraft-wrap .active-category,
.dark .namecraft-wrap .active-category {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.5),
    0 2px 8px -4px rgba(99, 102, 241, 0.4);
}

/* Enhanced category cards with better depth ----------------------------------- */
.namecraft-wrap .nc-category-card {
  border-radius: 12px !important; /* Consistent with design system */
  border: 1px solid #e2e8f0 !important; /* Consistent border */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Consistent transition */
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08),
    0 1px 2px -1px rgba(0, 0, 0, 0.08) !important; /* Consistent shadow */
}

.namecraft-wrap .nc-category-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.05),
    rgba(139, 92, 246, 0.05)
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.namecraft-wrap .nc-category-card:hover::after {
  opacity: 1;
}

html.dark .namecraft-wrap .nc-category-card,
.dark .namecraft-wrap .nc-category-card {
  border-color: #334155 !important;
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}

.namecraft-wrap .nc-category-card:hover {
  transform: translateY(-2px) scale(1.01); /* Consistent with name cards */
  box-shadow: 0 12px 24px -6px rgba(99, 102, 241, 0.25),
    0 8px 16px -8px rgba(0, 0, 0, 0.15); /* Consistent shadow */
  border-color: #6366f1;
}

html.dark .namecraft-wrap .nc-category-card:hover,
.dark .namecraft-wrap .nc-category-card:hover {
  box-shadow: 0 12px 24px -6px rgba(99, 102, 241, 0.4),
    0 8px 16px -8px rgba(0, 0, 0, 0.5); /* Consistent shadow */
  border-color: #818cf8 !important;
}

.namecraft-wrap .nc-category-card .nc-badge {
  background: #eef2ff;
  color: #4338ca;
  transition: all 0.2s ease;
}

html.dark .namecraft-wrap .nc-category-card .nc-badge,
.dark .namecraft-wrap .nc-category-card .nc-badge {
  background: rgba(99, 102, 241, 0.2) !important;
  color: #a5b4fc !important;
}

/* Enhanced copy buttons with better styling ---------------------------------- */
.namecraft-wrap .nc-copy-btn,
.namecraft-wrap .nc-copy-all-btn {
  border: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.namecraft-wrap .nc-name-card .nc-copy-btn {
  background: #f1f5f9;
  color: #475569;
  border-radius: 8px !important; /* Consistent with design system */
  font-size: 0.75rem !important; /* Smaller text - 12px */
  line-height: 1rem !important;
  padding: 0.375rem 0.75rem !important; /* Standardized padding */
  border: 1px solid transparent; /* Consistent border */
}

.namecraft-wrap .nc-name-card .nc-copy-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.namecraft-wrap .nc-name-card .nc-copy-btn:hover::before {
  opacity: 0.1;
}

html.dark .namecraft-wrap .nc-name-card .nc-copy-btn,
.dark .namecraft-wrap .nc-name-card .nc-copy-btn {
  background: #334155 !important;
  color: #cbd5e1 !important;
}

.namecraft-wrap .nc-name-card .nc-copy-btn:hover {
  background: #e2e8f0;
  transform: scale(1.05);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

html.dark .namecraft-wrap .nc-name-card .nc-copy-btn:hover,
.dark .namecraft-wrap .nc-name-card .nc-copy-btn:hover {
  background: #475569 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 2px 4px -2px rgba(0, 0, 0, 0.3);
}

.namecraft-wrap .nc-copy-all-btn {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #ffffff;
  border-radius: 8px !important; /* Consistent with design system */
  border: 1px solid transparent; /* Consistent border */
}

.namecraft-wrap .nc-copy-all-btn:hover {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -6px rgba(99, 102, 241, 0.5),
    0 8px 16px -8px rgba(99, 102, 241, 0.4);
}

.namecraft-wrap .nc-copy-all-btn:active {
  transform: translateY(0);
}

.namecraft-wrap .nc-copy-notification {
  background: linear-gradient(135deg, #10b981, #22c55e);
  color: #ffffff;
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.5),
    0 4px 10px -4px rgba(16, 185, 129, 0.4);
  border-radius: 12px;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  backdrop-filter: blur(10px);
}

/* Enhanced theme toggle button ------------------------------------------------ */
.namecraft-wrap .nc-theme-toggle {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

html.dark .namecraft-wrap .nc-theme-toggle,
.dark .namecraft-wrap .nc-theme-toggle {
  background-color: #1e293b !important;
  border: 1px solid #475569 !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3) !important;
}

.namecraft-wrap .nc-theme-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.25),
    0 2px 8px -4px rgba(99, 102, 241, 0.2);
}

html.dark .namecraft-wrap .nc-theme-toggle:hover,
.dark .namecraft-wrap .nc-theme-toggle:hover {
  background-color: #334155 !important;
  border-color: #64748b !important;
  box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.3),
    0 2px 8px -4px rgba(99, 102, 241, 0.2) !important;
}

.namecraft-wrap .nc-theme-toggle:active {
  transform: scale(0.95);
}

/* Enhanced badges and tags --------------------------------------------------- */
.namecraft-wrap header .bg-indigo-100,
.namecraft-wrap .bg-indigo-100 {
  background: #eef2ff;
  color: #4338ca;
  box-shadow: 0 1px 2px 0 rgba(99, 102, 241, 0.1);
  transition: all 0.2s ease;
}

.namecraft-wrap header .bg-indigo-100:hover,
.namecraft-wrap .bg-indigo-100:hover {
  box-shadow: 0 2px 4px 0 rgba(99, 102, 241, 0.2);
  transform: translateY(-1px);
}

html.dark .namecraft-wrap header .bg-indigo-100,
.dark .namecraft-wrap header .bg-indigo-100,
html.dark .namecraft-wrap .bg-indigo-100,
.dark .namecraft-wrap .bg-indigo-100 {
  background: rgba(99, 102, 241, 0.2) !important;
  color: #a5b4fc !important;
  box-shadow: 0 1px 2px 0 rgba(99, 102, 241, 0.3);
}

.namecraft-wrap header .bg-emerald-100,
.namecraft-wrap .bg-emerald-100 {
  background: #ecfdf3;
  color: #047857;
  box-shadow: 0 1px 2px 0 rgba(16, 185, 129, 0.1);
  transition: all 0.2s ease;
}

.namecraft-wrap header .bg-emerald-100:hover,
.namecraft-wrap .bg-emerald-100:hover {
  box-shadow: 0 2px 4px 0 rgba(16, 185, 129, 0.2);
  transform: translateY(-1px);
}

html.dark .namecraft-wrap header .bg-emerald-100,
.dark .namecraft-wrap header .bg-emerald-100,
html.dark .namecraft-wrap .bg-emerald-100,
.dark .namecraft-wrap .bg-emerald-100 {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #6ee7b7 !important;
  box-shadow: 0 1px 2px 0 rgba(16, 185, 129, 0.3);
}

/* Enhanced jump-to tags ------------------------------------------------------ */
.namecraft-wrap .nc-tag {
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px 0 rgba(99, 102, 241, 0.1);
}

.namecraft-wrap .nc-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.2),
    0 2px 4px -2px rgba(99, 102, 241, 0.1);
}

/* Hero and badge styling ---------------------------------------------------- */
.namecraft-wrap header .text-slate-600,
.namecraft-wrap .text-slate-600 {
  color: #475569;
}

html.dark .namecraft-wrap header .text-slate-600,
.dark .namecraft-wrap header .text-slate-600,
html.dark .namecraft-wrap .text-slate-600,
.dark .namecraft-wrap .text-slate-600 {
  color: #94a3b8 !important;
}

/* Text colors and sizes for name cards -------------------------------------- */
.namecraft-wrap .nc-name-card {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.namecraft-wrap .nc-name-card span {
  color: #0f172a;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}

html.dark .namecraft-wrap .nc-name-card span,
.dark .namecraft-wrap .nc-name-card span {
  color: #f1f5f9 !important;
}

/* Force all text-slate-900 to be light in dark mode ------------------------- */
html.dark .namecraft-wrap .text-slate-900,
.dark .namecraft-wrap .text-slate-900 {
  color: #f1f5f9 !important;
}

html.dark .namecraft-wrap .text-slate-800,
.dark .namecraft-wrap .text-slate-800 {
  color: #e2e8f0 !important;
}

html.dark .namecraft-wrap .text-slate-700,
.dark .namecraft-wrap .text-slate-700 {
  color: #cbd5e1 !important;
}

/* Enhanced gradient sections ------------------------------------------------- */
.namecraft-wrap .bg-gradient-to-r.from-blue-50,
.namecraft-wrap .bg-gradient-to-r.from-red-50 {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

html.dark .namecraft-wrap .bg-gradient-to-r.from-blue-50,
.dark .namecraft-wrap .bg-gradient-to-r.from-blue-50,
html.dark .namecraft-wrap .bg-gradient-to-r.from-red-50,
.dark .namecraft-wrap .bg-gradient-to-r.from-red-50 {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
}

/* Enhanced sidebar styling --------------------------------------------------- */
.namecraft-wrap aside .rounded-xl {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

html.dark .namecraft-wrap aside .rounded-xl,
.dark .namecraft-wrap aside .rounded-xl {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 2px 4px -2px rgba(0, 0, 0, 0.3);
}

/* Section spacing ----------------------------------------------------------- */
.namecraft-wrap section:last-of-type {
  margin-bottom: 0;
}

/* Enhanced section headers -------------------------------------------------- */
.namecraft-wrap section[id] {
  scroll-margin-top: 100px;
}

.namecraft-wrap section[id] .w-10.h-10 {
  box-shadow: 0 2px 4px 0 rgba(99, 102, 241, 0.2);
  transition: all 0.3s ease;
}

.namecraft-wrap section[id]:hover .w-10.h-10 {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 4px 8px 0 rgba(99, 102, 241, 0.3);
}

/* Smooth transitions for all interactive elements -------------------------- */
.namecraft-wrap .nc-category-card,
.namecraft-wrap .category-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
}

.namecraft-wrap .nc-category-card:hover,
.namecraft-wrap .category-card:hover {
  transform: translateY(-5px);
  border-color: #6366f1;
}

html.dark .namecraft-wrap .nc-category-card:hover,
.dark .namecraft-wrap .nc-category-card:hover,
html.dark .namecraft-wrap .category-card:hover,
.dark .namecraft-wrap .category-card:hover {
  border-color: #818cf8 !important;
}

/* Enhanced fade-in animation ----------------------------------------------- */
@keyframes ncFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.namecraft-wrap .nc-fade-in {
  animation: ncFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* High Priority Micro-Interactions ========================================= */

/* 1. Copy Button Ripple Effect --------------------------------------------- */
.nc-copy-btn {
  position: relative;
  overflow: hidden;
}

.nc-copy-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.25);
  transform: translate(-50%, -50%);
  transition: width 0.4s ease-out, height 0.4s ease-out, opacity 0.4s ease-out;
  opacity: 0;
  pointer-events: none;
}

.nc-copy-btn:active::before {
  width: 200px;
  height: 200px;
  opacity: 1;
}

html.dark .nc-copy-btn::before {
  background: rgba(129, 140, 248, 0.3);
}

/* 2. Staggered Card Fade-In Animation (for search results only) ---------- */
.nc-name-card.nc-animate-in {
  animation: fadeInUp 0.3s ease-out backwards;
}

.nc-name-card.nc-animate-in:nth-child(1) {
  animation-delay: 0.05s;
}
.nc-name-card.nc-animate-in:nth-child(2) {
  animation-delay: 0.1s;
}
.nc-name-card.nc-animate-in:nth-child(3) {
  animation-delay: 0.15s;
}
.nc-name-card.nc-animate-in:nth-child(4) {
  animation-delay: 0.15s;
}
.nc-name-card.nc-animate-in:nth-child(5) {
  animation-delay: 0.2s;
}
.nc-name-card.nc-animate-in:nth-child(6) {
  animation-delay: 0.2s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 3. Notification Slide Animation ------------------------------------------ */
.nc-copy-notification {
  animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nc-copy-notification.hiding {
  animation: slideOutDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideOutDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100px);
    opacity: 0;
  }
}

/* 4. Search Results Staggered Fade-In (handled by .nc-animate-in class above) */

/* 5. Enhanced Card Hover - Updated to use scale for smoother effect */
.namecraft-wrap .nc-name-card {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Respect reduced motion preference ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nc-name-card,
  .nc-copy-notification,
  .nc-copy-btn::before {
    animation: none !important;
    transition: none !important;
  }

  .nc-name-card {
    opacity: 1;
  }
}

/* Unified Button System ==================================================== */

/* Base button styles - all buttons follow this (except theme toggle which has its own border) */
.nc-sort-btn,
.nc-share-btn,
.nc-copy-all-btn,
.nc-copy-btn {
  border-radius: 8px !important; /* Consistent 8px for all buttons */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-weight: 500;
  will-change: transform;
  border: 1px solid transparent; /* Consistent border */
}

/* Theme toggle excluded from unified border system - has visible border */
.namecraft-wrap .nc-theme-toggle {
  border-radius: 8px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-weight: 500;
  will-change: transform;
}

/* Sorting Button Styles ---------------------------------------------------- */
.nc-sort-btn {
  font-weight: 500;
}

.nc-sort-btn.active-sort {
  background: #e0e7ff !important;
  color: #4338ca !important;
  font-weight: 600;
  border-color: #c7d2fe !important;
  box-shadow: 0 1px 3px 0 rgba(99, 102, 241, 0.2),
    0 1px 2px -1px rgba(99, 102, 241, 0.1);
}

html.dark .nc-sort-btn.active-sort {
  background: rgba(99, 102, 241, 0.2) !important;
  color: #c7d2fe !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
  box-shadow: 0 1px 3px 0 rgba(99, 102, 241, 0.3),
    0 1px 2px -1px rgba(99, 102, 241, 0.2);
}

.nc-sort-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.25),
    0 2px 8px -4px rgba(99, 102, 241, 0.2);
}

html.dark .nc-sort-btn:hover {
  box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.4),
    0 2px 8px -4px rgba(99, 102, 241, 0.3);
}

/* Share Button Styles ------------------------------------------------------ */
.nc-share-btn {
  border-radius: 8px !important;
}

.nc-share-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.3),
    0 2px 8px -4px rgba(16, 185, 129, 0.2);
}

/* Copy All Button Styles --------------------------------------------------- */
.nc-copy-all-btn {
  border-radius: 8px !important;
  box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.25),
    0 2px 8px -4px rgba(99, 102, 241, 0.2);
}

.nc-copy-all-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -6px rgba(99, 102, 241, 0.35),
    0 8px 16px -8px rgba(99, 102, 241, 0.25);
}

/* Prose styling for article content ----------------------------------------- */
.namecraft-article {
  color: inherit;
}

html.dark .namecraft-article,
.dark .namecraft-article {
  color: #f1f5f9 !important;
}

.namecraft-article :where(h1, h2, h3, h4) {
  font-weight: 700;
  line-height: 1.3;
  margin-top: 1.5em;
  margin-bottom: 0.75em;
  letter-spacing: -0.02em;
  font-size: inherit;
}

html.dark .namecraft-article :where(h1, h2, h3, h4),
.dark .namecraft-article :where(h1, h2, h3, h4) {
  color: #f1f5f9 !important;
}

.namecraft-article :where(p, ul, ol, table) {
  margin: 1em 0;
  line-height: 1.7;
  font-size: inherit;
}

html.dark .namecraft-article :where(p, ul, ol, table),
.dark .namecraft-article :where(p, ul, ol, table) {
  color: #cbd5e1 !important;
}

.namecraft-article :where(ul, ol) {
  padding-left: 1.5em;
}

.namecraft-article :where(ul) {
  list-style: disc;
}

.namecraft-article :where(ol) {
  list-style: decimal;
}

.namecraft-article :where(a) {
  color: #6366f1;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

html.dark .namecraft-article :where(a),
.dark .namecraft-article :where(a) {
  color: #818cf8 !important;
}

.namecraft-article :where(a):hover {
  color: #4f46e5;
  text-decoration-thickness: 2px;
}

html.dark .namecraft-article :where(a):hover,
.dark .namecraft-article :where(a):hover {
  color: #a5b4fc !important;
}

/* Improved focus states for accessibility ----------------------------------- */
.namecraft-wrap button:focus-visible,
.namecraft-wrap a:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
  border-radius: 4px;
}

html.dark .namecraft-wrap button:focus-visible,
.dark .namecraft-wrap button:focus-visible,
html.dark .namecraft-wrap a:focus-visible,
.dark .namecraft-wrap a:focus-visible {
  outline-color: #818cf8;
}

/* Loading state improvements ------------------------------------------------ */
.namecraft-wrap .nc-copy-btn.nc-copied {
  background: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.4);
}

html.dark .namecraft-wrap .nc-copy-btn.nc-copied,
.dark .namecraft-wrap .nc-copy-btn.nc-copied {
  background: #059669 !important;
  box-shadow: 0 4px 12px -2px rgba(5, 150, 105, 0.5);
}

/* Better spacing and typography --------------------------------------------- */
.namecraft-wrap p {
  line-height: 1.7;
  margin-bottom: 1em;
  font-size: inherit;
}

html.dark .namecraft-wrap p,
.dark .namecraft-wrap p {
  color: #cbd5e1 !important;
}

/* Ensure Tailwind text size classes work properly and consistently */
.namecraft-wrap .text-xs {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}

.namecraft-wrap .text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

.namecraft-wrap .text-base {
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

.namecraft-wrap .text-lg {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
}

.namecraft-wrap .text-xl {
  font-size: 1.25rem !important;
  line-height: 1 !important;
}

.namecraft-wrap .text-2xl {
  font-size: 1.5rem !important;
  line-height: 2rem !important;
}

.namecraft-wrap .text-3xl {
  font-size: 1.875rem !important;
  line-height: 2.25rem !important;
}

.namecraft-wrap .text-4xl {
  font-size: 2.25rem !important;
  line-height: 2.5rem !important;
}

.namecraft-wrap .text-5xl {
  font-size: 3rem !important;
  line-height: 1 !important;
}

html.dark .namecraft-wrap .text-lg,
.dark .namecraft-wrap .text-lg {
  color: #e2e8f0 !important;
}

/* Smooth scroll behavior ---------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

/* Ensure proper z-index for sticky elements -------------------------------- */
.namecraft-wrap .sticky {
  z-index: 10;
}

/* Force dark mode for sidebar and all containers ---------------------------- */
html.dark .namecraft-wrap aside,
.dark .namecraft-wrap aside {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}

html.dark .namecraft-wrap .rounded-xl,
.dark .namecraft-wrap .rounded-xl {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

html.dark .namecraft-wrap .rounded-2xl,
.dark .namecraft-wrap .rounded-2xl {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

/* Force all borders to dark in dark mode ------------------------------------ */
html.dark .namecraft-wrap .border-slate-200,
.dark .namecraft-wrap .border-slate-200 {
  border-color: #334155 !important;
}

html.dark .namecraft-wrap .border-slate-300,
.dark .namecraft-wrap .border-slate-300 {
  border-color: #475569 !important;
}

/* Screen reader only class for accessibility -------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sr-only:focus,
.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Back to top button styles ------------------------------------------------- */
.nc-back-to-top {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nc-back-to-top:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -4px rgba(99, 102, 241, 0.4);
}

.nc-back-to-top:focus {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

html.dark .nc-back-to-top:focus {
  outline-color: #818cf8;
}

/* Enhanced Search input styles ---------------------------------------------- */
#nc-search-input {
  transition: all 0.2s ease;
}

#nc-search-input:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  border-color: #6366f1;
}

html.dark #nc-search-input:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
  border-color: #818cf8;
}

#nc-search-input.nc-has-results {
  border-color: #10b981;
}

html.dark #nc-search-input.nc-has-results {
  border-color: #22c55e;
}

#nc-search-input.nc-searching {
  border-color: #f59e0b;
}

html.dark #nc-search-input.nc-searching {
  border-color: #fbbf24;
}

.nc-search-clear {
  transition: all 0.2s ease;
}

.nc-search-clear:hover {
  transform: translateY(-50%) scale(1.1);
  color: #dc2626;
}

html.dark .nc-search-clear:hover {
  color: #ef4444;
}

.nc-search-clear:focus {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

/* Search results message styles --------------------------------------------- */
#nc-search-results {
  min-height: 1.5rem;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

#nc-search-results.nc-search-success {
  background: #ecfdf3;
  color: #047857;
  border: 1px solid #10b981;
}

html.dark #nc-search-results.nc-search-success {
  background: rgba(16, 185, 129, 0.1);
  color: #6ee7b7;
  border-color: #22c55e;
}

#nc-search-results.nc-search-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #ef4444;
}

html.dark #nc-search-results.nc-search-error {
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
  border-color: #f87171;
}

/* Search loading spinner ---------------------------------------------------- */
.nc-search-spinner {
  animation: ncSpin 0.6s linear infinite;
}

#nc-search-loading {
  pointer-events: none;
}

/* Loading spinner animation -------------------------------------------------- */
@keyframes ncSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.nc-spinner {
  animation: ncSpin 1s linear infinite;
}

/* Loading overlay styles ---------------------------------------------------- */
.nc-loading {
  transition: opacity 0.3s ease;
}

/* Search results message ----------------------------------------------------- */
#nc-search-results {
  min-height: 1.5rem;
  font-size: 0.875rem;
}

/* Hidden name cards (for search) -------------------------------------------- */
.nc-name-card[style*='display: none'] {
  display: none !important;
}

/* Hidden sections (for search) ---------------------------------------------- */
section[style*='display: none'] {
  display: none !important;
}

/* Enhanced related pages links ---------------------------------------------- */
.namecraft-wrap aside a[href]:not(.nc-category):not(.nc-tag) {
  transition: all 0.2s ease;
  border-radius: 6px;
}

.namecraft-wrap aside a[href]:not(.nc-category):not(.nc-tag):hover {
  background: #f1f5f9;
  transform: translateX(4px);
  padding-left: 0.875rem;
}

html.dark .namecraft-wrap aside a[href]:not(.nc-category):not(.nc-tag):hover {
  background: #334155 !important;
}

/* Enhanced generator CTA box ------------------------------------------------ */
.namecraft-wrap .bg-gradient-to-r.from-indigo-50 {
  box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.15);
  transition: all 0.3s ease;
}

.namecraft-wrap .bg-gradient-to-r.from-indigo-50:hover {
  box-shadow: 0 8px 24px -4px rgba(99, 102, 241, 0.25);
  transform: translateY(-2px);
}

html.dark .namecraft-wrap .bg-gradient-to-r.from-indigo-50 {
  box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.3);
}

html.dark .namecraft-wrap .bg-gradient-to-r.from-indigo-50:hover {
  box-shadow: 0 8px 24px -4px rgba(99, 102, 241, 0.4);
}

.namecraft-wrap .bg-gradient-to-r.from-indigo-50 a {
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px 0 rgba(99, 102, 241, 0.2);
}

.namecraft-wrap .bg-gradient-to-r.from-indigo-50 a:hover {
  box-shadow: 0 4px 8px 0 rgba(99, 102, 241, 0.3);
  transform: translateY(-1px);
}
.wp-singular.post-template-default img{
	max-width: 100%!important;
}