/* Explorer page full background (guaranteed full-viewport)
   We add a body class from header.php: body.nh-explore-page
*/
body.nh-explore-page{
  min-height:100vh;
  background:
    radial-gradient(1200px 800px at 10% 0%, rgba(99,102,241,0.16), rgba(255,255,255,0) 55%),
    radial-gradient(1100px 760px at 90% 10%, rgba(168,85,247,0.14), rgba(255,255,255,0) 55%),
    radial-gradient(900px 720px at 55% 105%, rgba(34,211,238,0.10), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #f7f9ff 0%, #f5f7fb 55%, #ffffff 100%);
  background-attachment: fixed;
}
/* Disable the older pseudo background when body class is present */
body.nh-explore-page .nhx-wrap::before{ display:none; }

/* NameHippo Explorer — ultra light premium UI */

.nhx-wrap{max-width:1180px;margin:0 auto;padding:26px 18px 48px 18px;position:relative;min-height:calc(100vh - 140px);}
.nhx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;}
.nhx-title h1{margin:0;font-size:38px;letter-spacing:-0.02em;line-height:1.05;color:#0f172a;}
.nhx-title p{margin:8px 0 0 0;color:#4b5563;font-size:14px;}

.nhx-top-actions{display:flex;gap:10px;flex-wrap:wrap;}

.nhx-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:18px;align-items:start;}

.nhx-card{background:rgba(255,255,255,0.94);border:1px solid rgba(15,23,42,0.08);border-radius:18px;box-shadow:0 18px 48px rgba(2,6,23,0.08);overflow:hidden;}

.nhx-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 12px 14px;border-bottom:1px solid rgba(15,23,42,0.06);}

.nhx-filterbar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;}

.nhx-field{display:flex;flex-direction:column;gap:6px;}
.nhx-field span{font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:0.08em;}

.nhx-select{height:38px;border-radius:12px;border:1px solid rgba(15,23,42,0.10);background:rgba(255,255,255,0.92);padding:0 12px;font-size:14px;color:#0f172a;min-width:220px;outline:none;}
.nhx-select:focus{border-color:rgba(99,102,241,0.55);box-shadow:0 0 0 4px rgba(99,102,241,0.12);}

.nhx-btn{height:38px;border-radius:12px;border:1px solid rgba(15,23,42,0.10);background:rgba(255,255,255,0.92);padding:0 14px;font-size:14px;color:#0f172a;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;cursor:pointer;}
.nhx-btn svg{width:18px;height:18px;display:block;fill:currentColor;stroke:currentColor;}
.nhx-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(2,6,23,0.10);}
.nhx-btn:active{transform:translateY(0);}

.nhx-btn-ghost{background:rgba(15,23,42,0.04);border-color:rgba(15,23,42,0.10);color:#0f172a;}

.nhx-btn-soft{background:rgba(99,102,241,0.10);border-color:rgba(99,102,241,0.18);color:#3730a3;}

.nhx-stats{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.nhx-badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:8px 10px;border:1px solid rgba(15,23,42,0.08);background:rgba(255,255,255,0.92);font-size:12px;color:#0f172a;}
.nhx-badge-muted{color:#64748b;background:rgba(148,163,184,0.10);border-color:rgba(148,163,184,0.20);}

.nhx-orb-canvas{
  height:520px;
  min-height:520px;
  position:relative;
  border:1px solid rgba(15,23,42,0.08);
  border-radius:18px;
  overflow:hidden;
  /* Match CMS orb vibe: smoother, more saturated, less "same as page" */
  background:
    radial-gradient(520px 520px at 30% 30%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.0) 52%),
    radial-gradient(820px 520px at 70% 18%, rgba(99,102,241,0.32) 0%, rgba(99,102,241,0.0) 60%),
    radial-gradient(820px 560px at 40% 82%, rgba(168,85,247,0.26) 0%, rgba(168,85,247,0.0) 62%),
    radial-gradient(900px 620px at 18% 78%, rgba(34,211,238,0.18) 0%, rgba(34,211,238,0.0) 62%),
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,250,252,0.78));
}

/* Make the actual WebGL sphere more premium (subtle pop) */
.nhx-orb-canvas canvas{
  filter: saturate(1.18) contrast(1.04);
}

/* Orb polish (CMS-globe feel): vignette + soft glow */
.nhx-orb-canvas::before{
  content:"";
  position:absolute;inset:-2px;
  background:
    radial-gradient(420px 360px at 50% 45%, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.0) 55%, rgba(2,6,23,0.06) 100%),
    radial-gradient(420px 320px at 24% 22%, rgba(99,102,241,0.14), rgba(255,255,255,0.0) 64%),
    radial-gradient(420px 320px at 78% 70%, rgba(168,85,247,0.10), rgba(255,255,255,0.0) 60%);
  pointer-events:none;
  mix-blend-mode:multiply;
}
.nhx-orb-canvas::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(520px 420px at 50% 55%, rgba(34,211,238,0.12), rgba(255,255,255,0.0) 60%);
  opacity:0.55;
  pointer-events:none;
}

.nhx-hints{display:flex;gap:10px;flex-wrap:wrap;padding:10px 14px 6px 14px;}
.nhx-hint{font-size:12px;color:#64748b;display:inline-flex;align-items:center;gap:6px;}
.nhx-footnote{padding:0 14px 14px 14px;color:#94a3b8;font-size:12px;}

kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:11px;padding:2px 6px;border-radius:7px;border:1px solid rgba(15,23,42,0.14);background:rgba(255,255,255,0.8);color:#0f172a;}

.nhx-card-side .nhx-card-head{padding-bottom:14px;}

.nhx-input{width:100%;height:42px;border-radius:14px;border:1px solid rgba(15,23,42,0.10);background:rgba(255,255,255,0.92);padding:0 14px;font-size:14px;color:#0f172a;outline:none;}
.nhx-input:focus{border-color:rgba(99,102,241,0.55);box-shadow:0 0 0 4px rgba(99,102,241,0.12);}

.nhx-selected{padding:14px;border-bottom:1px solid rgba(15,23,42,0.06);}
.nhx-selected-empty{padding:10px 10px 2px 10px;border-radius:14px;border:1px dashed rgba(148,163,184,0.45);background:rgba(255,255,255,0.55);}
.nhx-selected-title{font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:0.08em;}
.nhx-selected-sub{margin-top:6px;color:#475569;font-size:13px;}

.nhx-preview{display:flex;gap:12px;align-items:center;}
.nhx-preview-logo{width:54px;height:54px;border-radius:14px;border:1px solid rgba(15,23,42,0.10);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto;}
.nhx-preview-logo img{max-width:78%;max-height:78%;object-fit:contain;}
.nhx-preview-meta{flex:1 1 auto;min-width:0;}
.nhx-preview-name{font-weight:700;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nhx-preview-price{margin-top:4px;color:#334155;font-size:13px;}
.nhx-preview-tags{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;}
.nhx-tag{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(15,23,42,0.08);background:rgba(255,255,255,0.85);color:#0f172a;}
.nhx-tag-soft{background:rgba(99,102,241,0.10);border-color:rgba(99,102,241,0.18);color:#3730a3;}

.nhx-preview-actions{display:flex;gap:8px;align-items:center;}
.nhx-icon-btn{width:38px;height:38px;border-radius:12px;border:1px solid rgba(15,23,42,0.10);background:rgba(255,255,255,0.92);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.nhx-icon-btn:hover{box-shadow:0 10px 24px rgba(2,6,23,0.10);transform:translateY(-1px)}

.nhx-list{max-height:470px;overflow:auto;padding:10px 10px 14px 10px;}

.nhx-row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;border:1px solid transparent;cursor:pointer;}
.nhx-row:hover{border-color:rgba(99,102,241,0.25);background:rgba(99,102,241,0.06);}
.nhx-row.is-active{border-color:rgba(99,102,241,0.35);background:rgba(99,102,241,0.10);}

.nhx-row-avatar{width:40px;height:40px;border-radius:12px;border:1px solid rgba(15,23,42,0.10);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto;}
.nhx-row-avatar img{max-width:78%;max-height:78%;object-fit:contain;}
.nhx-row-initials{font-weight:700;color:#334155;font-size:13px;}

.nhx-row-main{flex:1 1 auto;min-width:0;}
.nhx-row-name{font-weight:700;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nhx-row-sub{margin-top:4px;color:#64748b;font-size:12px;display:flex;gap:10px;flex-wrap:wrap;}

.nhx-row-actions{display:flex;gap:6px;align-items:center;}

/* ensure legacy orb overlays sit correctly */
#orb-container canvas{display:block;}

@media (max-width: 1100px){
  .nhx-grid{grid-template-columns:1fr;}
  .nhx-orb-canvas{height:460px;min-height:460px;}
  .nhx-list{max-height:360px;}
}

/* Mobile responsiveness: keep the exact visual language, but prevent overflow and
   heavy fixed heights that break small screens. */
@media (max-width: 820px){
  .nhx-wrap{padding:20px 14px 40px 14px;}
  .nhx-head{align-items:flex-start;flex-direction:column;gap:12px;}
  .nhx-top-actions{width:100%;}

  .nhx-card-head{flex-direction:column;align-items:flex-start;}
  .nhx-filterbar{width:100%;}
  .nhx-stats{width:100%;justify-content:flex-start;}

  .nhx-orb-canvas{height:360px;min-height:360px;}
  .nhx-list{max-height:52vh;}
}

@media (max-width: 520px){
  .nhx-title h1{font-size:30px;}
  .nhx-select{min-width:170px;}
  .nhx-orb-canvas{height:300px;min-height:300px;}
  .nhx-hints{gap:8px;}
}

/* --- Compatibility: JS uses nhx-avatar / nhx-row-mid / nhx-sel* --- */
.nhx-avatar{width:40px;height:40px;border-radius:999px;border:1px solid rgba(17,24,39,.12);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.nhx-avatar img{width:100%;height:100%;object-fit:contain;padding:6px;}
.nhx-avatar span{font-weight:800;font-size:12px;color:#0f172a;letter-spacing:.02em;}

.nhx-row-mid{min-width:0;flex:1;}
.nhx-row-name{font-weight:800;color:#0f172a;font-size:13px;line-height:1.2;}
.nhx-row-sub{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;color:#64748b;font-size:12px;}

.nhx-actions{display:flex;gap:8px;}

.nhx-sel{display:flex;gap:12px;align-items:center;}
.nhx-sel-media{width:56px;height:56px;border-radius:14px;border:1px solid rgba(17,24,39,.12);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 56px;}
.nhx-sel-media img{max-width:80%;max-height:80%;object-fit:contain;}
.nhx-sel-media span{font-weight:900;color:#0f172a;}

.nhx-sel-name{font-weight:900;color:#0f172a;font-size:15px;line-height:1.2;}
.nhx-sel-meta{margin-top:4px;color:#64748b;font-size:12px;display:flex;flex-wrap:wrap;gap:8px;}

/* Prevent any logos from exploding layout */
.nhx-row .nhx-avatar img,
.nhx-sel-media img{max-width:100%;max-height:100%;}

/* Explorer list action buttons (premium) */
.nhx-row-actions .nh-like-btn,
.nhx-row-actions .compare-toggle{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.08);
  background: rgba(255,255,255,.9);
  box-shadow: 0 10px 24px rgba(17,24,39,.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .14s ease, box-shadow .14s ease;
}
.nhx-row-actions .nh-like-btn:hover,
.nhx-row-actions .compare-toggle:hover{ transform: translateY(-1px); box-shadow: 0 16px 32px rgba(17,24,39,.12); }


/* --- icon rendering: SVG only (no font dependencies) --- */
.nhx-ico{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;}
.nhx-ico svg{width:18px;height:18px;display:block;fill:currentColor;stroke:currentColor;}

/* Orb hover tooltip (dots-only explorer) */
.nhx-orb-tooltip{
  position:absolute;
  z-index:30;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(99,102,241,0.18);
  box-shadow:0 18px 44px rgba(2,6,23,0.16);
  font-size:12px;
  font-weight:700;
  color:#0f172a;
  pointer-events:none;
  transform:translate(-50%,-120%);
  backdrop-filter:blur(10px);
  white-space:nowrap;
  opacity:0;
  transition:opacity .12s ease, transform .12s ease;
}
.nhx-orb-tooltip.is-on{opacity:1;transform:translate(-50%,-135%);}
.nhx-orb-tooltip .nhx-orb-tip-price{margin-left:8px;color:#4f46e5;font-weight:800;}
.nhx-row-actions .nhx-icon-btn,
.nhx-row-actions .compare-toggle,
.nhx-row-actions .compare-remove,
.nhx-row-actions .nh-like-btn{line-height:0 !important;}

.nhx-row-actions .compare-toggle,
.nhx-row-actions .compare-remove,
.nhx-row-actions .nh-like-btn {
  color: #64748b;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.08);
  background: rgba(255,255,255,0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(15,23,42,0.08);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* Like state (likes.js toggles .is-liked) */
.nhx-row-actions .nh-like-btn.is-liked,
.nhx-sel-actions .nh-like-btn.is-liked{
  color: #e11d48;
  border-color: rgba(225,29,72,0.28);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 14px 34px rgba(225,29,72,0.14);
}

/* Compare state (compare.js toggles .is-compared) */
.nhx-row-actions .compare-toggle.is-compared,
.nhx-sel-actions .compare-toggle.is-compared{
  color: #4f46e5;
  border-color: rgba(79,70,229,0.28);
  background: linear-gradient(180deg, rgba(79,70,229,0.10), rgba(236,72,153,0.06));
  box-shadow: 0 14px 34px rgba(79,70,229,0.16);
}

.nhx-row-actions .compare-toggle:hover,
.nhx-row-actions .compare-remove:hover,
.nhx-row-actions .nh-like-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(15,23,42,0.12);
  border-color: rgba(99,102,241,0.22);
}

.nhx-row-actions .compare-toggle.is-compared,
.nhx-row-actions .compare-remove.is-active {
  border-color: rgba(99,102,241,0.35);
  background: linear-gradient(180deg, rgba(99,102,241,0.14), rgba(236,72,153,0.08));
}

.nhx-selected {
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,0.08);
  background: rgba(255,255,255,0.9);
}

.nhx-selected .nhx-selected-title {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.nhx-selected .nhx-selected-actions .nhx-btn {
  border-radius: 999px;
}

/* Selected domain card (right side) */
.nhx-sel{display:flex;gap:14px;align-items:flex-start;padding:4px 0}
.nhx-sel-media{width:56px;height:56px;border-radius:16px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;border:1px solid rgba(20,30,60,.08)}
.nhx-sel-media img{width:100%;height:100%;object-fit:contain;padding:8px}
.nhx-avatar span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.nhx-sel-main{flex:1}
.nhx-sel-top{display:flex;gap:12px;justify-content:space-between;align-items:flex-start}
.nhx-sel-name{font-weight:800;font-size:16px;line-height:1.2}
.nhx-sel-sub{margin-top:4px;color:rgba(20,30,60,.65);font-size:13px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nhx-sel-price{font-weight:800;color:#10162a}
.nhx-sel-dot{opacity:.5}
.nhx-sel-pills{margin-top:10px}
.nhx-sel-actions{margin-top:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.nhx-sel-actions .nhx-icon-btn{width:40px;height:40px;border-radius:14px}
.nhx-sel-actions .nhx-btn{height:40px;border-radius:14px}

/* --- Mobile / reduced-motion fallback orb --- */
/* JS adds .nhx-orb-fallback-wrap on the container. Keep both selectors for backward-compat. */
.nhx-orb-canvas.is-fallback,
.nhx-orb-fallback-wrap{display:flex;align-items:center;justify-content:center;}
.nhx-orb-fallback{position:relative;width:min(440px, 92%);aspect-ratio:1/1;border-radius:999px;background:
  radial-gradient(55% 55% at 30% 25%, rgba(255,255,255,0.95) 0%, rgba(230,238,255,0.45) 55%, rgba(210,225,255,0.25) 100%),
  radial-gradient(60% 60% at 75% 70%, rgba(189,135,255,0.28) 0%, rgba(255,255,255,0.0) 60%),
  radial-gradient(65% 65% at 20% 75%, rgba(75,214,255,0.22) 0%, rgba(255,255,255,0.0) 60%);
  box-shadow: 0 25px 60px rgba(15,23,42,0.12);
  border:1px solid rgba(203,213,255,0.55);
  overflow:hidden;
}
.nhx-orb-fallback::after{content:"";position:absolute;inset:-2px;border-radius:999px;background:
  repeating-linear-gradient(0deg, rgba(148,163,184,0.10) 0px, rgba(148,163,184,0.10) 1px, rgba(255,255,255,0.0) 22px, rgba(255,255,255,0.0) 26px),
  repeating-linear-gradient(90deg, rgba(148,163,184,0.08) 0px, rgba(148,163,184,0.08) 1px, rgba(255,255,255,0.0) 22px, rgba(255,255,255,0.0) 26px);
  opacity:0.35;pointer-events:none;}
.nhx-orb-pill{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.9);
  border:1px solid rgba(226,232,240,0.9);box-shadow:0 12px 30px rgba(15,23,42,0.10);
  font-size:12px;color:#111827;white-space:nowrap;max-width:70%;overflow:hidden;text-overflow:ellipsis;
}
.nhx-orb-pill .dot{width:8px;height:8px;border-radius:999px;background:linear-gradient(180deg,#60a5fa,#a78bfa);}

/* Like/Compare states */
.nhx-row-actions .nh-like-btn,
.nhx-row-actions .compare-toggle{
  color:#64748b;
}
.nhx-row-actions .nh-like-btn.is-liked{
  color:#ef4444;
  border-color:rgba(239,68,68,0.28);
  background:linear-gradient(180deg, rgba(239,68,68,0.10), rgba(255,255,255,0.92));
}
.nhx-row-actions .compare-toggle.is-compared{
  color:#4f46e5;
  border-color:rgba(79,70,229,0.28);
  background:linear-gradient(180deg, rgba(79,70,229,0.12), rgba(255,255,255,0.92));
}

/* Make SVG hearts outlines by default */
.nhx-row-actions .nh-like-btn svg path{fill:none;stroke:currentColor;stroke-width:1.8}

/* Filled heart when liked (more premium feedback) */
.nhx-row-actions .nh-like-btn.is-liked svg path,
.nhx-sel-actions .nh-like-btn.is-liked svg path,
.nh-like-btn.is-liked svg path{fill:currentColor;stroke:currentColor;}

/* Orb label pills (on-globe) */
.nhx-orb-label{
  position:absolute;
  left:0;top:0;
  transform:translate(-50%,-50%);
  padding:8px 10px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(99,102,241,0.92), rgba(236,72,153,0.82));
  color:#fff;
  font-weight:800;
  font-size:12px;
  letter-spacing:.01em;
  box-shadow:0 18px 46px rgba(2,6,23,0.16);
  border:1px solid rgba(255,255,255,0.26);
  pointer-events:none;
  white-space:nowrap;
  opacity:0;
  transition:opacity .12s ease, transform .12s ease;
}
.nhx-orb-label.is-on{
  opacity:1;
  transform:translate(-50%,-60%);
}
.nhx-orb-label .p{
  opacity:.92;
  font-weight:900;
  margin-left:8px;
}

/* Global icon button colors (selected card + list) */
.nh-like-btn,
.compare-toggle{
  color:#64748b;
}
.nh-like-btn.is-liked{color:#ef4444;}
.compare-toggle.is-compared{color:#4f46e5;}

/* Keep SVG outline in selected card too */
.nh-like-btn svg path{fill:none;stroke:currentColor;stroke-width:1.8}
.compare-toggle svg path{fill:none;stroke:currentColor;stroke-width:1.8}