/* ============================================================
   SOKOHAI DISCOVER ENGINE — DEEP PRODUCT & DISCOVERY SYSTEM
   2026-09-19 — Phase 2-15
   Design System: #1268A8 #2B82BD #0B4F7A #18A982 #D8B83A #F6F9FC Inter
   Global Discovery Engine: Products, Businesses, Services, Transport,
   People, Groups, Offline Sellers, Nearby, Opportunities
   ============================================================ */

/* --- Overlay Shell --- */
.skh-discover-engine {
  position: fixed; inset: 0; z-index: 100001;
  background: #F6F9FC; display: none; flex-direction: column;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  overflow: hidden;
}
.skh-discover-engine.open { display: flex; }
.skh-de-header {
  background: #fff; border-bottom: 1px solid #e2e8f0;
  padding: 12px 16px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 1px 8px rgba(15,23,42,.06);
}
.skh-de-header b { font-size: 16px; font-weight: 900; color: #0f172a; }
.skh-de-header small { font-size: 11.5px; color: #64748b; display: block; font-weight: 600; }
.skh-de-back {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid #e2e8f0;
  background: #f8fafc; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-weight: 900; font-size: 18px; color: #0f172a;
}
.skh-de-body { flex: 1; overflow-y: auto; padding: 14px 14px 90px; }

/* --- Search Bar Intelligent --- */
.skh-de-search-wrap {
  position: relative; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid #dbe5ef; border-radius: 16px;
  padding: 12px 14px; box-shadow: 0 2px 10px rgba(15,23,42,.06);
  transition: border-color .16s, box-shadow .16s;
}
.skh-de-search-wrap:focus-within {
  border-color: #18A982; box-shadow: 0 0 0 3px rgba(24,169,130,.14), 0 4px 16px rgba(24,169,130,.10);
}
.skh-de-search-wrap input {
  flex: 1; border: none; outline: none; font-size: 14px; font-weight: 600;
  background: transparent; color: #0f172a;
}
.skh-de-search-wrap input::placeholder { color: #94a3b8; font-weight: 500; }
.skh-de-search-ic { color: #94a3b8; flex-shrink: 0; }
.skh-de-search-helper {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
  box-shadow: 0 18px 44px rgba(15,23,42,.18); z-index: 6000;
  max-height: 52vh; overflow-y: auto; padding: 8px; display: none;
}
.skh-de-search-helper.open { display: block; }
.skh-de-suggest-sec { font-size: 10.5px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; color: #94a3b8; padding: 10px 10px 4px; }
.skh-de-suggest-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 10px;
  border-radius: 12px; cursor: pointer; transition: background .14s;
}
.skh-de-suggest-row:hover { background: #f1f6fb; }
.skh-de-suggest-ic { width: 36px; height: 36px; border-radius: 10px; background: #eef2f7; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; }
.skh-de-suggest-tx { min-width: 0; flex: 1; }
.skh-de-suggest-tx b { display: block; font-size: 13px; color: #0f172a; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skh-de-suggest-tx small { font-size: 11.5px; color: #64748b; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Quick Discovery Categories --- */
.skh-de-quick { display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 4px; scrollbar-width: none; }
.skh-de-quick::-webkit-scrollbar { display: none; }
.skh-de-qcat {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 12px; min-width: 68px; border-radius: 14px; border: 1px solid #e2e8f0;
  background: #fff; cursor: pointer; transition: transform .14s, box-shadow .14s, border-color .14s;
  box-shadow: 0 1px 4px rgba(15,23,42,.06);
}
.skh-de-qcat:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,23,42,.12); border-color: #bfdcf5; }
.skh-de-qcat.active { background: #18A982; border-color: #18A982; color: #fff; }
.skh-de-qcat-ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: #f1f6fb; }
.skh-de-qcat.active .skh-de-qcat-ic { background: rgba(255,255,255,.18); }
.skh-de-qcat label { font-size: 11px; font-weight: 800; text-align: center; }

/* --- Sections --- */
.skh-de-section { margin-top: 18px; }
.skh-de-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 0 2px; }
.skh-de-section-head h3 { font-size: 13px; font-weight: 900; color: #0f172a; margin: 0; letter-spacing: .2px; }
.skh-de-section-head a { font-size: 11.5px; font-weight: 800; color: #1268A8; text-decoration: none; cursor: pointer; }
.skh-de-hscroll { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.skh-de-hscroll::-webkit-scrollbar { display: none; }

/* --- Product Cards --- */
.skh-de-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(15,23,42,.06); cursor: pointer; transition: transform .16s, box-shadow .16s;
  min-width: 0;
}
.skh-de-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,.12); }
.skh-de-card--offline { border-left: 3.5px solid #D8B83A; background: #FFF9E8; }
.skh-de-card--online { border: 1px solid #dbe5ef; }
.skh-de-card--service { border-left: 3.5px solid #2B82BD; }
.skh-de-card--transport { border-left: 3.5px solid #18A982; }
/* [PRODUCT CARD STANDARD v1] square 1:1 + contain — bidhaa haikatwi */
.skh-de-card-img { position: relative; width: 100%; aspect-ratio: 1 / 1; background: #F7FAF9; overflow: hidden; padding: 10px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.skh-de-card-img img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.skh-de-card-badge {
  position: absolute; top: 8px; left: 8px; font-size: 9.5px; font-weight: 900;
  padding: 4px 8px; border-radius: 8px; background: #fff; border: 1px solid #e2e8f0; color: #334155;
  box-shadow: 0 2px 6px rgba(15,23,42,.12);
}
.skh-de-card-badge--offline { background: #FFF9E8; border-color: #ead98a; color: #8a6d00; }
.skh-de-card-badge--online { background: #f0faf6; border-color: #cbe9dd; color: #0f766e; }
.skh-de-card-badge--service { background: #eef6fc; border-color: #bfdcf5; color: #0B4F7A; }
.skh-de-card-body { padding: 10px 12px; }
.skh-de-card-title { font-size: 13.5px; font-weight: 800; color: #0f172a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; }
.skh-de-card-price { font-size: 13px; font-weight: 900; color: #0B4F7A; margin-top: 4px; }
.skh-de-card-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11.5px; color: #64748b; }
.skh-de-card-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: #94a3b8; }
.skh-de-card-distance { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #0f766e; background: #f0faf6; border: 1px solid #cbe9dd; border-radius: 99px; padding: 2px 8px; }
.skh-de-card-business { font-size: 11.5px; color: #334155; font-weight: 700; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skh-de-card-actions { display: flex; gap: 6px; margin-top: 10px; }
.skh-de-card-btn {
  flex: 1; border: 1px solid #e2e8f0; background: #fff; border-radius: 10px; padding: 8px 10px;
  font-size: 11.5px; font-weight: 800; cursor: pointer; text-align: center; color: #334155;
}
.skh-de-card-btn--primary { background: #18A982; border-color: #18A982; color: #fff; }
.skh-de-card-btn--green { background: #18A982; border-color: #18A982; color: #fff; }
.skh-de-card-btn--gold { background: #D8B83A; border-color: #D8B83A; color: #0f172a; }

/* --- Availability --- */
.skh-de-avail { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 99px; border: 1px solid #e2e8f0; }
.skh-de-avail--available { background: #f0faf6; color: #0f766e; border-color: #cbe9dd; }
.skh-de-avail--low { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.skh-de-avail--out { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.skh-de-avail--notracked { background: #f8fafc; color: #475569; border-color: #e2e8f0; }
.skh-de-avail--unknown { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.skh-de-avail--stale { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.skh-de-avail-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.skh-de-avail--available .skh-de-avail-dot { background: #18A982; }
.skh-de-avail--low .skh-de-avail-dot { background: #f59e0b; }
.skh-de-avail--out .skh-de-avail-dot { background: #ef4444; }
.skh-de-avail--notracked .skh-de-avail-dot { background: #94a3b8; }

/* --- Filters --- */
.skh-de-filters { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px; scrollbar-width: none; margin-top: 8px; }
.skh-de-filters::-webkit-scrollbar { display: none; }
.skh-de-filter {
  flex: 0 0 auto; padding: 7px 12px; border-radius: 99px; border: 1.5px solid #dbe5ef;
  background: #fff; color: #475569; font-size: 12px; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.skh-de-filter.active { background: #18A982; border-color: #18A982; color: #fff; }

/* --- Business/Service/Transport/People Cards --- */
.skh-de-biz-card, .skh-de-service-card, .skh-de-transport-card, .skh-de-person-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 12px;
  display: flex; gap: 12px; align-items: center; margin-bottom: 8px;
}
.skh-de-biz-avatar { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg,#1268A8,#2B82BD); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px; flex-shrink: 0; }
.skh-de-biz-info { flex: 1; min-width: 0; }
.skh-de-biz-info b { display: block; font-size: 13.5px; font-weight: 800; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skh-de-biz-info small { display: block; font-size: 11.5px; color: #64748b; }
.skh-de-biz-products { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.skh-de-biz-products span { font-size: 10px; font-weight: 700; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 6px; padding: 2px 6px; }

/* --- Product Detail --- */
.skh-de-detail { background: #fff; border-radius: 20px; overflow: hidden; }
.skh-de-detail-hero { position: relative; width: 100%; aspect-ratio: 1.1; background: #f1f5f9; }
.skh-de-detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.skh-de-detail-body { padding: 16px; }
.skh-de-detail-title { font-size: 18px; font-weight: 900; color: #0f172a; margin: 0 0 6px; }
.skh-de-detail-price { font-size: 18px; font-weight: 900; color: #0B4F7A; }
.skh-de-detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.skh-de-attr-section { margin-top: 16px; border-top: 1px solid #f1f5f9; padding-top: 14px; }
.skh-de-attr-section h4 { font-size: 12.5px; font-weight: 900; color: #0f172a; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .5px; }
.skh-de-options { display: flex; flex-wrap: wrap; gap: 8px; }
.skh-de-option {
  padding: 8px 12px; border-radius: 10px; border: 1.5px solid #e2e8f0; background: #fff;
  font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all .14s;
}
.skh-de-option:hover { border-color: #18A982; background: #f1f6fb; }
.skh-de-option.selected { background: #18A982; border-color: #18A982; color: #fff; }
.skh-de-variant-info { font-size: 12px; color: #475569; margin-top: 8px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px; }
.skh-de-location-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; margin-top: 12px; }
.skh-de-location-card b { font-size: 12.5px; color: #0f172a; display: block; }
.skh-de-location-card small { font-size: 11.5px; color: #64748b; }

/* --- Request Nearby --- */
.skh-de-request { background: #fff; border: 1.5px dashed #bfdcf5; border-radius: 14px; padding: 16px; text-align: center; margin-top: 12px; }
.skh-de-request b { display: block; font-size: 14px; color: #0f172a; }
.skh-de-request small { display: block; font-size: 12px; color: #64748b; margin-top: 4px; }
.skh-de-request button { margin-top: 10px; border: none; background: #18A982; color: #fff; font-weight: 800; font-size: 12.5px; padding: 10px 16px; border-radius: 10px; cursor: pointer; }

/* --- Empty States --- */
.skh-de-empty { text-align: center; padding: 36px 18px; color: #94a3b8; background: #fff; border: 1px dashed #dbe4ed; border-radius: 16px; margin: 12px 2px; }
.skh-de-empty b { display: block; font-size: 14px; color: #334155; margin-bottom: 6px; }
.skh-de-empty small { display: block; font-size: 12px; margin-bottom: 10px; }
.skh-de-empty-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.skh-de-empty-actions button { border: 1.5px solid #1268A8; background: #fff; color: #1268A8; font-weight: 800; font-size: 12px; padding: 8px 14px; border-radius: 99px; cursor: pointer; }

/* --- Ranking & Intent Badges --- */
.skh-de-intent { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 99px; background: #eef6fc; border: 1px solid #bfdcf5; color: #0B4F7A; }
.skh-de-distance-filter { display: flex; gap: 6px; overflow-x: auto; padding: 6px 2px; scrollbar-width: none; }
.skh-de-distance-filter::-webkit-scrollbar { display: none; }
.skh-de-dist-btn { flex: 0 0 auto; padding: 6px 10px; border-radius: 99px; border: 1px solid #e2e8f0; background: #fff; font-size: 11px; font-weight: 800; cursor: pointer; }
.skh-de-dist-btn.active { background: #18A982; color: #fff; border-color: #18A982; }

/* --- Commerce Context for Negotiation --- */
.skh-de-nego-context { background: #f0faf6; border: 1px solid #cbe9dd; border-radius: 12px; padding: 10px 12px; margin-top: 10px; font-size: 12px; }
.skh-de-nego-context b { font-size: 11.5px; color: #0f766e; display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .4px; }

/* --- Saved/Follows --- */
.skh-de-eng { display: flex; gap: 8px; margin-top: 8px; }
.skh-de-eng button { border: 1px solid #e2e8f0; background: #fff; border-radius: 10px; padding: 6px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 5px; }
.skh-de-eng button.active { background: #f0faf6; border-color: #18A982; color: #0f766e; }

/* --- PRODUCTION ENHANCEMENT 2026-09-19: Filters, Feed, Admin, Skeleton, Mobile, Accessibility --- */
.skh-de-filter-bar { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:10px; margin-bottom:12px; }
.skh-de-filter-chips { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.skh-de-filter-chips::-webkit-scrollbar{ display:none; }
.skh-de-chip { flex:0 0 auto; border:1.5px solid #e2e8f0; background:#fff; color:#475569; font-weight:800; font-size:11px; padding:7px 12px; border-radius:99px; cursor:pointer; white-space:nowrap; }
.skh-de-chip.active { background:#18A982; border-color:#18A982; color:#fff; }
.skh-de-chip--gold.active { background:#D8B83A; border-color:#D8B83A; color:#4a3900; }
.skh-de-chip--green.active { background:#18A982; border-color:#18A982; color:#fff; }
.skh-de-feed-tabs { display:flex; gap:6px; overflow-x:auto; padding:10px 0; margin-bottom:12px; border-bottom:1px solid #e2e8f0; scrollbar-width:none; }
.skh-de-feed-tabs::-webkit-scrollbar{ display:none; }
.skh-de-feed-tab { flex:0 0 auto; border:1.5px solid #e2e8f0; background:#fff; color:#475569; font-weight:800; font-size:11.5px; padding:8px 14px; border-radius:99px; cursor:pointer; white-space:nowrap; }
.skh-de-feed-tab.active { background:#18A982; border-color:#18A982; color:#fff; }
.skh-de-skeleton { background:#fff; border:1px solid #e2e8f0; border-radius:14px; overflow:hidden; animation:pulse 1.5s infinite; }
@keyframes pulse{0%{opacity:1}50%{opacity:.6}100%{opacity:1}}
.skh-de-admin { background:#fff; border:1.5px solid #0B4F7A; border-radius:14px; padding:14px; margin-top:12px; }
.skh-de-admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:11.5px; margin-top:10px; }
.skh-de-zero-analytics { background:#fff; border:1px dashed #cbd5e1; border-radius:14px; padding:12px; margin-top:12px; }
.skh-de-offline-rule { background:#FFF9E8; border:1px solid #ead98a; border-left:4px solid #D8B83A; border-radius:10px; padding:8px 10px; font-size:11px; color:#8a6d00; margin-top:8px; }
.skh-de-online-rule { background:#f0faf6; border:1px solid #cbe9dd; border-radius:10px; padding:8px 10px; font-size:11px; color:#0f766e; margin-top:8px; }
.skh-de-eng-count { font-size:10px; font-weight:800; color:#0B4F7A; background:#eef6fc; border:1px solid #d3e6f5; border-radius:6px; padding:2px 6px; margin-left:4px; }
.skh-de-eng-real { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:#334155; }
.skh-de-deep-link { font-size:10px; color:#1268A8; text-decoration:underline; cursor:pointer; }
.skh-de-nav-stack { display:flex; gap:4px; align-items:center; font-size:11px; color:#64748b; margin-bottom:8px; }
.skh-de-nav-stack b { color:#0f172a; }

/* --- Mobile --- */
@media (max-width: 640px) {
  .skh-de-body { padding: 10px 10px 90px; }
  .skh-de-search-wrap { padding: 10px 12px; }
  .skh-de-qcat { min-width: 60px; padding: 8px 10px; }
  .skh-de-card-body { padding: 9px 10px; }
  .skh-de-detail-body { padding: 12px; }
  .skh-de-filter-bar { padding: 8px; }
  .skh-de-admin-grid { grid-template-columns:1fr; }
}

/* Accessibility */
.skh-de-card:focus-visible, .skh-de-qcat:focus-visible, .skh-de-chip:focus-visible, .skh-de-feed-tab:focus-visible {
  outline: 2px solid #1268A8; outline-offset:2px;
}
.skh-de-card[role="button"], .skh-de-qcat[role="button"] { cursor:pointer; }

/* ============================================================
   83-UNIFIED-SYSTEM ADDITIONS — 2026-09-19
   Share, Report, Pagination, Enhanced Skeleton, Mobile fixes
   ============================================================ */

/* --- Enhanced Skeleton --- */
.skh-de-skeleton {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  animation: skh-de-pulse 1.5s ease-in-out infinite;
}
@keyframes skh-de-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* --- Load More Button --- */
[data-act="de-load-more"] {
  transition: transform 0.14s, box-shadow 0.14s;
}
[data-act="de-load-more"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(18, 104, 168, 0.2);
}

/* --- Share Bar --- */
[data-act="de-share-search"],
[data-act="de-share-entity"] {
  transition: background 0.14s, border-color 0.14s;
}
[data-act="de-share-search"]:hover,
[data-act="de-share-entity"]:hover {
  background: #f1f6fb !important;
  border-color: #18A982 !important;
}

/* --- Report Modal --- */
#skhDiscoverReportModal [data-act="de-submit-report"] {
  transition: background 0.14s, border-color 0.14s;
}
#skhDiscoverReportModal [data-act="de-submit-report"]:hover {
  background: #fef2f2 !important;
  border-color: #ef4444 !important;
  color: #b91c1c !important;
}

/* --- Engagement Buttons Active State --- */
.skh-de-eng button.active {
  background: #f0faf6 !important;
  border-color: #18A982 !important;
  color: #0f766e !important;
}
.skh-de-eng button[data-act="de-like"].active {
  background: #fef2f2 !important;
  border-color: #ef4444 !important;
  color: #dc2626 !important;
}
.skh-de-eng button[data-act="de-save"].active {
  background: #fffbeb !important;
  border-color: #D8B83A !important;
  color: #8a6d00 !important;
}

/* --- Deep Link Active Indicator --- */
.skh-de-deep-link-active {
  border-left: 3px solid #1268A8 !important;
}

/* --- Enhanced Empty States --- */
.skh-de-empty {
  animation: skh-de-fadeIn 0.3s ease;
}
@keyframes skh-de-fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Enhanced Error States --- */
.skh-de-error-state {
  animation: skh-de-shake 0.4s ease;
}
@keyframes skh-de-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* --- Filter Bar Scroll Indicator --- */
.skh-de-filter-bar::after {
  content: '';
  position: sticky;
  right: 0;
  top: 0;
  bottom: 0;
  width: 30px;
  background: linear-gradient(90deg, transparent, #fff);
  pointer-events: none;
}

/* --- Card Hover Enhancement --- */
.skh-de-card:hover .skh-de-card-img img {
  transform: scale(1.03);
  transition: transform 0.3s ease;
}
.skh-de-card-img img {
  transition: transform 0.3s ease;
}

/* --- Mobile-specific fixes --- */
@media (max-width: 380px) {
  .skh-de-header b { font-size: 14px; }
  .skh-de-header small { font-size: 10px; }
  .skh-de-qcat { min-width: 56px; padding: 7px 8px; }
  .skh-de-qcat label { font-size: 10px; }
  .skh-de-card-title { font-size: 12px; min-height: 32px; }
  .skh-de-card-price { font-size: 12px; }
  .skh-de-card-btn { font-size: 10.5px; padding: 6px 8px; }
  .skh-de-detail-title { font-size: 16px; }
  .skh-de-detail-price { font-size: 16px; }
  .skh-de-search-wrap { padding: 8px 10px; }
  .skh-de-search-wrap input { font-size: 13px; }
}

@media (max-width: 640px) {
  .skh-de-body {
    padding: 10px 10px 100px !important;
  }
  .skh-de-section-head h3 { font-size: 12px; }
  .skh-de-biz-card, .skh-de-service-card, .skh-de-transport-card, .skh-de-person-card {
    padding: 10px;
    gap: 10px;
  }
  .skh-de-biz-avatar { width: 42px; height: 42px; font-size: 16px; }
}

/* --- FAB position fix when bottom nav present --- */
#skhDiscFab {
  transition: bottom 0.2s ease, transform 0.14s;
  z-index: 4800;
}
#skhDiscFab:hover {
  transform: scale(1.05);
}

/* --- Toast integration --- */
.skh-de-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  color: #fff;
  padding: 10px 20px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 700;
  z-index: 100010;
  animation: skh-de-toastIn 0.3s ease, skh-de-toastOut 0.3s ease 2.7s;
  pointer-events: none;
}
@keyframes skh-de-toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes skh-de-toastOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* --- Pagination dots --- */
.skh-de-pagination {
  display: flex;
  gap: 4px;
  justify-content: center;
  padding: 12px 0;
}
.skh-de-pagination-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e2e8f0;
  transition: background 0.14s;
}
.skh-de-pagination-dot.active {
  background: #18A982;
  width: 20px;
  border-radius: 99px;
}

/* --- Offline/Online card visual distinction --- */
.skh-de-card--offline {
  border-left: 3.5px solid #D8B83A !important;
  background: linear-gradient(135deg, #FFF9E8 0%, #fff 100%) !important;
}
.skh-de-card--online {
  border: 1px solid #dbe5ef;
  background: linear-gradient(135deg, #f8fffe 0%, #fff 100%);
}

/* --- Search Intent Badge --- */
.skh-de-intent-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 99px;
  background: #eef6fc;
  border: 1px solid #bfdcf5;
  color: #0B4F7A;
}

/* --- Accessibility: focus rings --- */
.skh-de-card:focus-visible,
.skh-de-qcat:focus-visible,
.skh-de-chip:focus-visible,
.skh-de-card-btn:focus-visible,
[data-act]:focus-visible {
  outline: 2px solid #1268A8;
  outline-offset: 2px;
}

/* --- Print-friendly (hide discover on print) --- */
@media print {
  .skh-discover-engine,
  #skhDiscFab,
  #skhDiscoverOverlay,
  #skhDiscoverReportModal {
    display: none !important;
  }
}