/* ============================================================
   Link Prospector Pro v2.1 — Frontend CSS
   Font: Poppins | intentiveseo.com brand
   Readable font sizes based on site reference (15-16px body)
   Orange accent only — charcoal text everywhere else
   ============================================================ */

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

/* ── Variables (scoped to .lpp so they don't bleed into theme) ── */
.lpp {
  --c-orange:       #F47B20;
  --c-orange-hover: #d96a14;
  --c-orange-bg:    #fff6f0;
  --c-orange-rim:   rgba(244,123,32,.28);

  --c-head:   #1a2133;   /* headings & labels       */
  --c-body:   #374151;   /* body text               */
  --c-muted:  #6b7280;   /* secondary / muted       */
  --c-dim:    #9ca3af;   /* placeholders / hints    */

  --c-white:  #ffffff;
  --c-bg:     #f3f4f6;
  --c-bg-tag: #eef0f5;
  --c-bdr:    #d1d5db;
  --c-bdr-lt: #e5e7eb;

  --r-card:  10px;
  --r-input:  7px;
  --r-pill:  999px;
  --shadow:  0 1px 3px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.05);
  --focus:   0 0 0 3px rgba(244,123,32,.2);

  /* Site reference: body ~15-16px, labels 13px, meta 12px */
  --f-xs:   11px;
  --f-sm:   12.5px;
  --f-base: 14.5px;
  --f-md:   15.5px;
  --f-lg:   17px;
  --f-xl:   20px;

  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}

/* ── Reset ── */
.lpp *, .lpp *::before, .lpp *::after { box-sizing: border-box; margin: 0; padding: 0; }

.lpp {
  font-family: var(--font);
  font-size: var(--f-base);
  color: var(--c-body);
  background: transparent;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════
   CARD
══════════════════════════════════════════════ */
.lpp .lpp-card {
  background: var(--c-white);
  border: 1px solid var(--c-bdr);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 24px 28px;
}

/* ══════════════════════════════════════════════
   SECTION HEADER  (badge + title + desc)
══════════════════════════════════════════════ */
.lpp .lpp-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* Orange numbered badge */
.lpp .lpp-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: var(--c-orange);
  color: #fff;
  border-radius: 50%;
  font-size: var(--f-base);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  user-select: none;
  line-height: 1;
}

/* Text block next to badge */
.lpp .lpp-section-head-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* Section title — sentence case, strong, charcoal */
.lpp .lpp-section-label {
  font-size: var(--f-lg);      /* 17px — clearly readable */
  font-weight: 700;
  color: var(--c-head);
  line-height: 1.3;
  display: block;
}

/* Subtitle description below the title */
.lpp .lpp-section-desc {
  font-size: var(--f-base);
  font-weight: 400;
  color: var(--c-muted);
  line-height: 1.5;
  display: block;
}

/* Right-side actions in section header */
.lpp .lpp-section-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
  padding-top: 2px;
}

/* ══════════════════════════════════════════════
   KEYWORD SEARCH FIELD  (full-width, no button)
══════════════════════════════════════════════ */
.lpp .lpp-search-field {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--c-bdr);
  border-radius: var(--r-input);
  background: var(--c-white);
  transition: border-color .15s, box-shadow .15s;
}
.lpp .lpp-search-field:focus-within {
  border-color: var(--c-orange);
  box-shadow: var(--focus);
}

.lpp .lpp-search-icon {
  flex-shrink: 0;
  margin: 0 10px 0 14px;
  color: var(--c-dim);
}

.lpp .lpp-search-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
  font-family: var(--font);
  font-size: var(--f-md);    /* 15.5px — comfortable reading */
  font-weight: 400;
  color: var(--c-head);
  padding: 13px 8px;
  min-width: 0;
}
.lpp .lpp-search-input::placeholder {
  color: var(--c-dim);
  font-weight: 400;
}

/* X circle button */
.lpp .lpp-xcircle {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-right: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--c-orange);
  background: transparent;
  color: var(--c-orange);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .15s, color .15s;
}
.lpp .lpp-xcircle:hover { background: var(--c-orange); color: #fff; }

/* ══════════════════════════════════════════════
   OPTIONAL MODIFIER FIELDS
══════════════════════════════════════════════ */
.lpp .lpp-opt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.lpp .lpp-opt-wrap  { display: flex; flex-direction: column; gap: 6px; }

.lpp .lpp-opt-label {
  font-size: var(--f-sm);     /* 12.5px */
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--c-muted);
}

.lpp .lpp-opt-input {
  border: 1.5px solid var(--c-bdr) !important;
  border-radius: var(--r-input);
  background: var(--c-white);
  font-family: var(--font);
  font-size: var(--f-base);   /* 14.5px */
  font-weight: 400;
  color: var(--c-head);
  padding: 9px 12px;
  outline: none;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
  box-shadow: none !important;
}
.lpp .lpp-opt-input:focus {
  border-color: var(--c-orange) !important;
  box-shadow: var(--focus) !important;
}
.lpp .lpp-opt-input::placeholder { color: var(--c-dim); }

/* ══════════════════════════════════════════════
   HISTORY BAR
══════════════════════════════════════════════ */
.lpp .lpp-hist-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--c-bdr-lt);
}
.lpp .lpp-hist-lbl {
  font-size: var(--f-sm);
  font-weight: 500;
  color: var(--c-dim);
  white-space: nowrap;
}
.lpp .lpp-hist-tags { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.lpp .lpp-hist-tag {
  background: var(--c-white);
  border: 1.5px solid var(--c-bdr);
  color: var(--c-body);
  font-family: var(--font);
  font-size: var(--f-sm);
  font-weight: 500;
  padding: 4px 13px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.lpp .lpp-hist-tag:hover {
  border-color: var(--c-orange);
  color: var(--c-orange);
  background: var(--c-orange-bg);
}

/* ══════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════ */

/* Primary — solid orange */
.lpp .lpp-btn-primary {
  background: var(--c-orange);
  color: #fff;
  border: none;
  border-radius: var(--r-input);
  font-family: var(--font);
  font-size: var(--f-md);     /* 15.5px */
  font-weight: 600;
  padding: 0 28px;
  height: 48px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, box-shadow .15s, transform .1s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: .1px;
}
.lpp .lpp-btn-primary:hover {
  background: var(--c-orange-hover);
  box-shadow: 0 4px 16px rgba(244,123,32,.32);
}
.lpp .lpp-btn-primary:active { transform: scale(.98); }
.lpp .lpp-btn-primary.lpp-loading { opacity: .7; pointer-events: none; }

/* Outline — gray border, hover = orange */
.lpp .lpp-btn-outline {
  background: var(--c-white);
  border: 1.5px solid var(--c-bdr);
  color: var(--c-body);
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: var(--f-sm);
  font-weight: 500;
  padding: 6px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.5;
  text-decoration: none;
}
.lpp .lpp-btn-outline:hover {
  border-color: var(--c-orange);
  color: var(--c-orange);
  background: var(--c-orange-bg);
}

/* Ghost — dashed border */
.lpp .lpp-btn-ghost {
  background: transparent;
  border: 1.5px dashed var(--c-bdr);
  color: var(--c-muted);
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: var(--f-sm);
  font-weight: 500;
  padding: 6px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.5;
}
.lpp .lpp-btn-ghost:hover {
  border-color: var(--c-orange);
  color: var(--c-orange);
  background: var(--c-orange-bg);
}

/* ══════════════════════════════════════════════
   CTA ROW — Step 3, full-width run button
══════════════════════════════════════════════ */
.lpp .lpp-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--c-white);
  border: 1px solid var(--c-bdr);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 18px 28px;
  flex-wrap: wrap;
}

/* Make the run button wider and more prominent here */
.lpp .lpp-btn-run {
  height: 52px;
  font-size: var(--f-lg);    /* 17px */
  padding: 0 36px;
  border-radius: var(--r-input);
  flex-shrink: 0;
}

.lpp .lpp-cta-hint {
  font-size: var(--f-sm);
  color: var(--c-dim);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════
   PROSPECT TYPE TAGS
══════════════════════════════════════════════ */
.lpp .lpp-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Unchecked = gray pill */
.lpp .lpp-type-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-bdr);
  background: var(--c-bg-tag);
  color: var(--c-body);
  font-size: var(--f-base);  /* 14.5px — big enough to read */
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, background .15s, color .15s;
}
.lpp .lpp-type-tag input,
.lpp .lpp-type-cb { display: none; }
.lpp .lpp-type-tag:hover {
  border-color: var(--c-orange-rim);
  background: var(--c-orange-bg);
  color: var(--c-orange);
}

/* Checked = orange fill */
.lpp .lpp-type-tag.on {
  background: var(--c-orange);
  border-color: var(--c-orange);
  color: #fff;
}
.lpp .lpp-type-tag.on:hover {
  background: var(--c-orange-hover);
  border-color: var(--c-orange-hover);
}

.lpp .lpp-type-em { font-size: 15px; line-height: 1; }
.lpp .lpp-type-nm { line-height: 1.3; }

/* ══════════════════════════════════════════════
   RESULTS
══════════════════════════════════════════════ */
.lpp .lpp-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: lpp-fade .25s ease;
}
@keyframes lpp-fade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* Summary bar — orange left accent border */
.lpp .lpp-res-bar {
  background: var(--c-white);
  border: 1px solid var(--c-bdr);
  border-left: 4px solid var(--c-orange);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.lpp .lpp-res-info {
  font-size: var(--f-base);
  color: var(--c-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-weight: 400;
}
.lpp .lpp-dot { color: var(--c-bdr); }
/* Only orange text element — the searched keyword */
.lpp .lpp-accent-text { color: var(--c-orange); font-weight: 700; }
.lpp .lpp-res-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Category tabs + filter row */
.lpp .lpp-cat-nav {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.lpp .lpp-cat-tabs { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }

.lpp .lpp-cat-tab {
  background: var(--c-white);
  border: 1.5px solid var(--c-bdr);
  color: var(--c-muted);
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: var(--f-sm);
  font-weight: 500;
  padding: 5px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all .15s;
  white-space: nowrap;
}
.lpp .lpp-cat-tab:hover,
.lpp .lpp-cat-tab.active {
  background: var(--c-orange);
  border-color: var(--c-orange);
  color: #fff;
}
.lpp .lpp-cat-tab .lpp-tab-n {
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,255,255,.25);
  border-radius: 10px;
  padding: 0 5px;
}
.lpp .lpp-cat-tab:not(.active) .lpp-tab-n {
  background: var(--c-bg-tag);
  color: var(--c-dim);
}

/* Filter input */
.lpp .lpp-filter-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid var(--c-bdr);
  border-radius: var(--r-pill);
  background: var(--c-white);
  padding: 6px 14px;
  transition: border-color .15s, box-shadow .15s;
  flex-shrink: 0;
  color: var(--c-dim);
}
.lpp .lpp-filter-wrap:focus-within {
  border-color: var(--c-orange);
  box-shadow: var(--focus);
}
.lpp .lpp-filter-input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
  font-family: var(--font);
  font-size: var(--f-base);
  color: var(--c-head);
  width: 170px;
  padding: 0;
}
.lpp .lpp-filter-input::placeholder { color: var(--c-dim); }

/* ══════════════════════════════════════════════
   RESULTS LIST + CATEGORY GROUPS
══════════════════════════════════════════════ */
.lpp .lpp-list { display: flex; flex-direction: column; gap: 10px; }

/* Category group card */
.lpp .lpp-cg {
  background: var(--c-white);
  border: 1px solid var(--c-bdr);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Header: white + orange left border, dark label */
.lpp .lpp-cg-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  background: var(--c-white);
  border-left: 3px solid var(--c-orange);
  border-bottom: 1px solid var(--c-bdr-lt);
  cursor: pointer;
  user-select: none;
  transition: background .12s;
}
.lpp .lpp-cg-head:hover { background: var(--c-bg); }

.lpp .lpp-cg-icon  { font-size: 16px; line-height: 1; }

/* Category group label — readable size */
.lpp .lpp-cg-label {
  font-size: var(--f-md);    /* 15.5px */
  font-weight: 600;
  color: var(--c-head);
  flex: 1;
}

.lpp .lpp-cg-badge {
  font-size: var(--f-xs);
  font-weight: 700;
  font-family: var(--mono);
  color: var(--c-orange);
  background: var(--c-orange-bg);
  border: 1px solid var(--c-orange-rim);
  border-radius: var(--r-pill);
  padding: 2px 9px;
}
.lpp .lpp-cg-chev {
  font-size: 12px;
  color: var(--c-dim);
  transition: transform .2s;
}
.lpp .lpp-cg.collapsed .lpp-cg-chev { transform: rotate(-90deg); }

.lpp .lpp-cg-rows {
  padding: 6px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lpp .lpp-cg.collapsed .lpp-cg-rows { display: none; }

/* ── Query Row ── */
.lpp .lpp-qrow {
  display: grid;
  /* Label | Query text | Buttons */
  grid-template-columns: 180px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background .1s, border-color .1s;
  animation: lpp-in .18s ease both;
}
@keyframes lpp-in { from { opacity:0; transform:translateX(-4px); } to { opacity:1; transform:none; } }
.lpp .lpp-qrow:hover { background: var(--c-bg); border-color: var(--c-bdr-lt); }

/* Query label — bold, readable */
.lpp .lpp-qlbl {
  font-size: var(--f-base);  /* 14.5px */
  font-weight: 600;
  color: var(--c-head);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Query text — mono, legible size */
.lpp .lpp-qtxt {
  font-size: var(--f-base);  /* 14.5px */
  color: var(--c-muted);
  font-family: var(--mono);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Orange only on search operators inside the query */
.lpp .lpp-qtxt .op { color: var(--c-orange); font-weight: 600; }

.lpp .lpp-qbtns { display: flex; gap: 6px; flex-shrink: 0; }

/* Copy / Search per-row buttons */
.lpp .lpp-qbtn {
  font-family: var(--font);
  font-size: var(--f-sm);
  font-weight: 500;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-bdr);
  background: var(--c-bg-tag);
  color: var(--c-muted);
  cursor: pointer;
  transition: all .12s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
}
.lpp .lpp-qbtn:hover {
  border-color: var(--c-orange-rim);
  color: var(--c-orange);
  background: var(--c-orange-bg);
}
/* Search button = orange-tint pill */
.lpp .lpp-qbtn.lpp-sbtn {
  border-color: var(--c-orange-rim);
  color: var(--c-orange);
  background: var(--c-orange-bg);
  font-weight: 600;
}
.lpp .lpp-qbtn.lpp-sbtn:hover {
  background: var(--c-orange);
  border-color: var(--c-orange);
  color: #fff;
}
.lpp .lpp-qbtn.copied {
  border-color: var(--c-orange-rim);
  color: var(--c-orange);
  background: var(--c-orange-bg);
}

/* ══════════════════════════════════════════════
   OPERATOR REFERENCE
══════════════════════════════════════════════ */
.lpp .lpp-ref-card  { padding: 18px 28px; }
.lpp .lpp-ref-head  { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lpp .lpp-ref-title { font-size: var(--f-base); font-weight: 600; color: var(--c-head); }

.lpp .lpp-ops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.lpp .lpp-op-item {
  background: var(--c-bg);
  border: 1px solid var(--c-bdr-lt);
  border-radius: 7px;
  padding: 11px 14px;
}
.lpp .lpp-op-code {
  font-family: var(--mono);
  font-size: var(--f-sm);
  color: var(--c-orange);
  background: var(--c-orange-bg);
  border: 1px solid var(--c-orange-rim);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 6px;
}
.lpp .lpp-op-desc { font-size: var(--f-base); color: var(--c-body); line-height: 1.5; }
.lpp .lpp-op-eg   { font-size: var(--f-sm); font-family: var(--mono); color: var(--c-dim); margin-top: 4px; }

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
.lpp .lpp-footer {
  text-align: center;
  font-size: var(--f-sm);
  color: var(--c-dim);
  padding: 4px 0;
}

/* ══════════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════════ */
.lpp ::-webkit-scrollbar       { width: 4px; height: 4px; }
.lpp ::-webkit-scrollbar-track { background: var(--c-bg); }
.lpp ::-webkit-scrollbar-thumb { background: var(--c-bdr); border-radius: 4px; }
.lpp ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .lpp .lpp-card       { padding: 18px 16px; }
  .lpp .lpp-ref-card   { padding: 16px; }
  .lpp .lpp-cta-row    { padding: 16px; flex-direction: column; align-items: flex-start; }
  .lpp .lpp-btn-run    { width: 100%; justify-content: center; }
  .lpp .lpp-opt-grid   { grid-template-columns: 1fr 1fr; }
  .lpp .lpp-qrow       { grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 6px; }
  .lpp .lpp-qlbl       { grid-column: 1; }
  .lpp .lpp-qtxt       { grid-column: 1 / -1; order: 3; font-size: var(--f-sm); }
  .lpp .lpp-qbtns      { grid-column: 2; grid-row: 1; }
  .lpp .lpp-res-bar    { flex-direction: column; align-items: flex-start; }
  .lpp .lpp-cat-nav    { flex-direction: column; }
  .lpp .lpp-filter-wrap { width: 100%; }
  .lpp .lpp-filter-input { width: 100%; flex: 1; }
}
@media (max-width: 520px) {
  .lpp .lpp-opt-grid   { grid-template-columns: 1fr; }
  .lpp .lpp-section-actions { width: 100%; }
}