/* ── Outreach Prospect Finder v5 — Stylesheet
   WordPress/Elementor-proof. All rules scoped to #opf-root + !important.
──────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

#opf-root, #opf-root * { box-sizing: border-box !important; -webkit-font-smoothing: antialiased !important; }
#opf-root *:not(svg):not(path):not(circle):not(line) {
  font-family: 'Plus Jakarta Sans', sans-serif !important; margin: 0 !important; padding: 0 !important;
  border: none !important; background: transparent !important; color: inherit !important;
  text-decoration: none !important; line-height: 1.5 !important;
}

/* ── ROOT ── */
#opf-root {
  background: #f4f6fb !important;
  background-image: radial-gradient(ellipse 55% 35% at 90% 0%,rgba(99,102,241,.07) 0%,transparent 55%), radial-gradient(ellipse 40% 28% at 0% 100%,rgba(139,92,246,.05) 0%,transparent 45%) !important;
  border-radius: 20px !important; padding: 36px 32px 44px !important;
  max-width: 1100px !important; margin: 0 auto !important; color: #1e1b4b !important;
}

/* ── HEADER ── */
.opf-header { display:flex !important; align-items:center !important; gap:14px !important; margin-bottom:24px !important; padding-bottom:22px !important; border-bottom:2px solid #e2e5f0 !important; flex-wrap:wrap !important; }
.opf-header-icon { width:52px !important; height:52px !important; background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%) !important; border-radius:14px !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:24px !important; flex-shrink:0 !important; line-height:1 !important; box-shadow:0 6px 20px rgba(99,102,241,.32) !important; }
.opf-header-text { flex:1 !important; min-width:180px !important; }
.opf-header-text h2 { font-size:24px !important; font-weight:800 !important; letter-spacing:-.5px !important; color:#1e1b4b !important; line-height:1.15 !important; }
.opf-header-text p { font-size:14px !important; color:#6b7280 !important; margin-top:4px !important; }
.opf-powered-badge { background:linear-gradient(135deg,#6366f1,#8b5cf6) !important; color:#fff !important; font-size:12px !important; font-weight:700 !important; padding:6px 14px !important; border-radius:20px !important; white-space:nowrap !important; }

/* ── CARD PANEL ── */
.opf-card-panel { background:#ffffff !important; border:1.5px solid #e5e7f0 !important; border-radius:16px !important; padding:20px 22px !important; margin-bottom:16px !important; box-shadow:0 2px 14px rgba(99,102,241,.06) !important; }

/* ── SEARCH ROW ── */
.opf-search-row { display:flex !important; gap:10px !important; align-items:center !important; margin-bottom:14px !important; flex-wrap:wrap !important; }
.opf-search-input-wrap { flex:1 !important; min-width:200px !important; position:relative !important; display:flex !important; align-items:center !important; }
.opf-search-ico { position:absolute !important; left:13px !important; color:#9ca3af !important; flex-shrink:0 !important; pointer-events:none !important; }
.opf-search-input { width:100% !important; background:#f8f9fc !important; border:1.5px solid #e5e7f0 !important; border-radius:10px !important; color:#374151 !important; font-size:14px !important; padding:11px 14px 11px 40px !important; outline:none !important; transition:border-color .2s !important; }
.opf-search-input::placeholder { color:#9ca3af !important; }
.opf-search-input:focus { border-color:#6366f1 !important; background:#fff !important; }
.opf-btn-search { background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%) !important; color:#fff !important; font-size:14px !important; font-weight:700 !important; padding:10px 20px !important; border-radius:10px !important; cursor:pointer !important; display:flex !important; align-items:center !important; gap:7px !important; white-space:nowrap !important; box-shadow:0 4px 14px rgba(99,102,241,.3) !important; transition:all .18s !important; }
.opf-btn-search:hover { background:linear-gradient(135deg,#4f46e5,#7c3aed) !important; transform:translateY(-1px) !important; }
.opf-btn-clear { background:#f3f4f6 !important; border:1.5px solid #e5e7f0 !important; border-radius:10px !important; color:#6b7280 !important; font-size:13px !important; font-weight:600 !important; padding:10px 16px !important; cursor:pointer !important; display:inline-flex !important; align-items:center !important; gap:5px !important; white-space:nowrap !important; transition:all .15s !important; }
.opf-btn-clear:hover { border-color:#6366f1 !important; color:#6366f1 !important; background:#eef2ff !important; }

/* ── FILTER ROW ── */
.opf-filter-row { display:flex !important; gap:10px !important; flex-wrap:wrap !important; margin-bottom:10px !important; }
.opf-select { background:#f8f9fc !important; border:1.5px solid #e5e7f0 !important; border-radius:10px !important; color:#374151 !important; font-size:13px !important; font-weight:500 !important; padding:9px 14px !important; cursor:pointer !important; outline:none !important; transition:border-color .2s !important; min-width:130px !important; }
.opf-select:focus { border-color:#6366f1 !important; background:#fff !important; }

/* ── SEARCH TIP ── */
.opf-search-tip { font-size:11px !important; color:#9ca3af !important; }
.opf-search-tip kbd { background:#f3f4f6 !important; border:1px solid #e5e7f0 !important; border-radius:4px !important; padding:1px 5px !important; font-size:11px !important; font-family:'DM Mono',monospace !important; }

/* ── ACTION BAR ── */
.opf-action-bar { display:flex !important; align-items:center !important; justify-content:space-between !important; margin-bottom:14px !important; flex-wrap:wrap !important; gap:10px !important; }
.opf-results-meta { font-size:13px !important; color:#6b7280 !important; }
.opf-results-meta strong { color:#1e1b4b !important; font-weight:700 !important; }
.opf-export-btns { display:flex !important; gap:8px !important; }
.opf-export-btn { background:#fff !important; border:1.5px solid #e5e7f0 !important; border-radius:8px !important; color:#374151 !important; font-size:12px !important; font-weight:600 !important; padding:7px 14px !important; cursor:pointer !important; transition:all .15s !important; display:flex !important; align-items:center !important; gap:5px !important; }
.opf-export-btn:hover { border-color:#6366f1 !important; color:#6366f1 !important; background:#eef2ff !important; }

/* ── LOADING ── */
.opf-loading { display:flex !important; flex-direction:column !important; align-items:center !important; padding:50px 20px !important; gap:14px !important; }
.opf-spinner { width:36px !important; height:36px !important; border:3px solid #e5e7f0 !important; border-top-color:#6366f1 !important; border-right-color:#8b5cf6 !important; border-radius:50% !important; background:transparent !important; animation:opf-spin .7s linear infinite !important; }
@keyframes opf-spin { to { transform:rotate(360deg); } }
.opf-loading p { color:#6b7280 !important; font-size:14px !important; }

/* ── EMPTY ── */
.opf-empty { display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center !important; padding:52px 20px !important; gap:12px !important; }
.opf-empty-icon { font-size:44px !important; line-height:1 !important; }
.opf-empty-title { font-size:18px !important; font-weight:700 !important; color:#1e1b4b !important; }
.opf-empty-body { font-size:14px !important; color:#9ca3af !important; max-width:380px !important; line-height:1.7 !important; }

/* ── GRID ── */
.opf-grid { display:grid !important; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) !important; gap:14px !important; }

/* ── CARD ── */
.opf-prospect-card { background:#fff !important; border:1.5px solid #e5e7f0 !important; border-radius:14px !important; overflow:hidden !important; transition:border-color .2s,transform .2s,box-shadow .2s !important; animation:opf-up .38s ease both !important; }
@keyframes opf-up { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.opf-prospect-card:hover { border-color:#a5b4fc !important; transform:translateY(-2px) !important; box-shadow:0 8px 28px rgba(99,102,241,.13) !important; }
.opf-card-stripe { height:4px !important; background:linear-gradient(90deg,#6366f1,#8b5cf6,#06b6d4) !important; }
.opf-card-inner { padding:18px !important; }

.opf-site-row { display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:10px !important; margin-bottom:10px !important; }
.opf-site-name { font-size:15px !important; font-weight:700 !important; color:#1e1b4b !important; line-height:1.25 !important; }
.opf-site-url { font-size:11px !important; color:#9ca3af !important; font-family:'DM Mono',monospace !important; margin-top:2px !important; word-break:break-all !important; }
.opf-niche-pill { background:#eef2ff !important; border:1px solid #c7d2fe !important; color:#6366f1 !important; border-radius:6px !important; padding:3px 9px !important; font-size:11px !important; font-weight:700 !important; white-space:nowrap !important; flex-shrink:0 !important; }

.opf-guidelines { font-size:12px !important; color:#6b7280 !important; background:#f8f9fc !important; border-radius:8px !important; padding:8px 11px !important; margin-bottom:10px !important; line-height:1.6 !important; }

.opf-data-list { display:flex !important; flex-direction:column !important; gap:6px !important; margin-bottom:12px !important; }
.opf-data-item { display:flex !important; align-items:center !important; gap:9px !important; background:#f8f9fc !important; border:1px solid #f0f0f8 !important; border-radius:8px !important; padding:7px 11px !important; min-width:0 !important; }
.opf-data-ico { font-size:14px !important; flex-shrink:0 !important; line-height:1 !important; width:18px !important; text-align:center !important; }
.opf-data-lbl { font-size:10px !important; font-weight:700 !important; color:#9ca3af !important; text-transform:uppercase !important; letter-spacing:.8px !important; flex-shrink:0 !important; width:42px !important; font-family:'DM Mono',monospace !important; }
.opf-data-link { font-size:12px !important; color:#6366f1 !important; font-family:'DM Mono',monospace !important; text-decoration:none !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; flex:1 !important; min-width:0 !important; }
.opf-data-link:hover { text-decoration:underline !important; color:#4f46e5 !important; }

.opf-card-footer { display:flex !important; align-items:center !important; justify-content:space-between !important; padding-top:11px !important; border-top:1px solid #f0f0f8 !important; gap:8px !important; }
.opf-footer-left { display:flex !important; align-items:center !important; gap:8px !important; }
.opf-country-tag { display:flex !important; align-items:center !important; gap:5px !important; font-size:12px !important; color:#6b7280 !important; font-weight:500 !important; }
.opf-label-tag { background:#f0fdf4 !important; border:1px solid #bbf7d0 !important; color:#16a34a !important; border-radius:6px !important; padding:2px 9px !important; font-size:11px !important; font-weight:700 !important; }

/* DA badges */
.opf-da-high    { background:#fef3c7 !important; border:1px solid #fcd34d !important; color:#92400e !important; border-radius:6px !important; padding:2px 8px !important; font-size:11px !important; font-weight:700 !important; }
.opf-da-med     { background:#e0f2fe !important; border:1px solid #93c5fd !important; color:#1e40af !important; border-radius:6px !important; padding:2px 8px !important; font-size:11px !important; font-weight:700 !important; }
.opf-da-low     { background:#f3f4f6 !important; border:1px solid #d1d5db !important; color:#6b7280 !important; border-radius:6px !important; padding:2px 8px !important; font-size:11px !important; font-weight:700 !important; }
.opf-da-unknown { background:#f3f4f6 !important; border:1px solid #e5e7eb !important; color:#9ca3af !important; border-radius:6px !important; padding:2px 8px !important; font-size:11px !important; font-weight:700 !important; }

/* ── PAGINATION ── */
.opf-pagination { margin:24px 0 !important; }
.opf-pages { display:flex !important; gap:6px !important; flex-wrap:wrap !important; justify-content:center !important; align-items:center !important; }
.opf-page-btn { background:#fff !important; border:1.5px solid #e5e7f0 !important; border-radius:8px !important; color:#374151 !important; font-size:13px !important; font-weight:600 !important; padding:7px 13px !important; cursor:pointer !important; transition:all .15s !important; min-width:38px !important; text-align:center !important; }
.opf-page-btn:hover { border-color:#6366f1 !important; color:#6366f1 !important; background:#eef2ff !important; }
.opf-page-btn.active { background:#6366f1 !important; border-color:#6366f1 !important; color:#fff !important; }
.opf-page-ellipsis { color:#9ca3af !important; font-size:14px !important; padding:0 4px !important; }

/* ── SUBMIT PANEL ── */
.opf-submit-panel { background:#fff !important; border:1.5px solid #e5e7f0 !important; border-radius:16px !important; margin-top:28px !important; overflow:hidden !important; box-shadow:0 2px 14px rgba(99,102,241,.06) !important; }
.opf-submit-toggle { display:flex !important; align-items:center !important; justify-content:space-between !important; padding:16px 22px !important; cursor:pointer !important; font-size:14px !important; font-weight:600 !important; color:#374151 !important; transition:background .15s !important; }
.opf-submit-toggle:hover { background:#f8f9fc !important; }
.opf-submit-arrow { font-size:12px !important; color:#9ca3af !important; }
.opf-submit-form { padding:0 22px 22px !important; border-top:1px solid #f0f0f8 !important; }
.opf-form-grid { display:grid !important; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) !important; gap:14px !important; margin:18px 0 16px !important; }
.opf-full-width { grid-column:1/-1 !important; }
.opf-form-group label { display:block !important; font-size:12px !important; font-weight:700 !important; color:#374151 !important; margin-bottom:5px !important; text-transform:uppercase !important; letter-spacing:.6px !important; }
.opf-form-group input,
.opf-form-group select { width:100% !important; background:#f8f9fc !important; border:1.5px solid #e5e7f0 !important; border-radius:8px !important; color:#374151 !important; font-size:13px !important; padding:9px 12px !important; outline:none !important; transition:border-color .2s !important; }
.opf-form-group input:focus,
.opf-form-group select:focus { border-color:#6366f1 !important; background:#fff !important; }
.opf-form-group input::placeholder { color:#9ca3af !important; }
.opf-btn-submit { background:linear-gradient(135deg,#6366f1,#8b5cf6) !important; color:#fff !important; font-size:14px !important; font-weight:700 !important; padding:11px 28px !important; border-radius:10px !important; cursor:pointer !important; box-shadow:0 4px 16px rgba(99,102,241,.3) !important; transition:all .18s !important; }
.opf-btn-submit:hover { background:linear-gradient(135deg,#4f46e5,#7c3aed) !important; transform:translateY(-1px) !important; }
.opf-btn-submit:disabled { opacity:.55 !important; cursor:not-allowed !important; transform:none !important; }
.opf-submit-msg { margin-top:12px !important; font-size:13px !important; font-weight:600 !important; }
.opf-submit-msg.success { color:#16a34a !important; }
.opf-submit-msg.error   { color:#dc2626 !important; }

/* ── FOOTER ── */
.opf-footer { margin-top:24px !important; background:#fff !important; border:1px solid #e5e7f0 !important; border-radius:12px !important; padding:14px 18px !important; font-size:12px !important; color:#9ca3af !important; line-height:1.7 !important; }
.opf-footer strong { color:#374151 !important; }
.opf-footer a { color:#6366f1 !important; text-decoration:none !important; font-weight:600 !important; }
.opf-footer a:hover { text-decoration:underline !important; }

/* ── RESPONSIVE ── */
@media (max-width:640px) {
  #opf-root { padding:20px 14px 30px !important; border-radius:14px !important; }
  .opf-grid { grid-template-columns:1fr !important; }
  .opf-header { flex-direction:column !important; align-items:flex-start !important; }
  .opf-filter-row { flex-direction:column !important; }
  .opf-select { width:100% !important; }
  .opf-btn-search { width:100% !important; justify-content:center !important; }
  .opf-search-row { flex-direction:column !important; }
  .opf-action-bar { flex-direction:column !important; align-items:flex-start !important; }
}