/* Page-specific styles extracted from search.html for browser caching. */
/* ════════════════════════════════════════════════════════════════
   NAWAFETH — SEARCH PAGE · aligned to platform identity (#7E57C2 + #F1A559 + teal)
   Clean light surfaces · clear UX · every JS id/class preserved.
   ════════════════════════════════════════════════════════════════ */
body.page-search.page-search-providers {
  --p: #7E57C2; --p-dk: #8E6AD8; --p-2: #9575cd;
  --p-soft: rgba(103,58,183,.07); --p-line: rgba(103,58,183,.16);
  --accent: #F1A559; --accent-dk: #c97f34; --accent-soft: rgba(241,165,89,.14);
  --teal: #1aa8ba; --teal-soft: rgba(26,168,186,.12); --green: #22C55E;
  --bg: #f5f5fa; --surf: #ffffff; --surf-2: #faf8ff; --surf-3: #f4f0fb;
  --border: rgba(18,18,46,.07); --border-2: rgba(18,18,46,.12);
  --ink: #1a1a2e; --sub: #5b5b73; --muted: #9092a6;
  --sh-xs: 0 1px 2px rgba(18,18,46,.05);
  --sh-sm: 0 2px 10px rgba(18,18,46,.06);
  --sh-md: 0 10px 30px rgba(82,45,168,.10);
  --sh-lg: 0 20px 54px rgba(82,45,168,.16);
  --r-sm: 10px; --r: 14px; --r-lg: 18px; --r-xl: 22px;
  --shell: min(1180px, calc(100% - 32px));
  font-family: 'Cairo', sans-serif;
}
body.page-search.page-search-providers .page-content {
  background: var(--bg); padding-top: 0;
  padding-bottom: calc(var(--bottom-nav-height,64px) + env(safe-area-inset-bottom,0px) + 32px);
  overflow-x: clip;
}
.hidden { display: none !important; }

/* ── HERO ── */
.sp-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% -10%, rgba(103,58,183,.10), transparent 55%),
    radial-gradient(90% 80% at -5% 110%, rgba(26,168,186,.08), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f7f3ff 100%);
  border-bottom: 1px solid var(--border);
  padding: calc(env(safe-area-inset-top,0px) + 16px) 0 22px;
}
.sp-hero-inner { position: relative; z-index: 1; width: var(--shell); margin: 0 auto; display: grid; gap: 18px; }
.sp-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sp-back-btn {
  width: 42px; height: 42px; border-radius: 13px; border: 1px solid var(--border);
  background: var(--surf); color: var(--p-dk); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--sh-xs); transition: background .16s, transform .16s, border-color .16s;
}
.sp-back-btn:hover { background: var(--p-soft); border-color: var(--p-line); transform: translateY(-1px); }
.sp-back-btn:active { transform: scale(.95); }
[dir="ltr"] .sp-back-btn svg { transform: scaleX(-1); }
.sp-live-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--p-line); background: var(--p-soft); color: var(--p-dk);
  font-size: 11px; font-weight: 800; white-space: nowrap;
}
.sp-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(34,197,94,.18); animation: spPulse 2.4s ease-in-out infinite; }
@keyframes spPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,.18); } 50% { box-shadow: 0 0 0 6px rgba(34,197,94,.05); } }
@media (prefers-reduced-motion: reduce) { .sp-live-dot { animation: none; } }
.sp-hero-grid { display: grid; gap: 20px; }
.sp-hero-body { display: grid; gap: 14px; }
.sp-hero-kicker {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--accent-soft); background: var(--accent-soft); color: var(--accent-dk);
  font-size: 10.5px; font-weight: 900; letter-spacing: .3px; width: fit-content;
}
.sp-hero-heading { margin: 0; font-size: clamp(1.55rem, 4.6vw, 2.4rem); font-weight: 900; color: var(--ink); line-height: 1.25; letter-spacing: -.4px; }
.sp-hero-heading em { font-style: normal; background: linear-gradient(90deg, var(--p) 0%, var(--teal) 120%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sp-hero-sub { margin: 0; font-size: 13px; font-weight: 600; color: var(--sub); line-height: 1.75; max-width: 540px; }
.sp-search-row { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.sp-search-wrap {
  position: relative; flex: 1 1 auto; display: flex; align-items: center;
  background: var(--surf); border-radius: var(--r-lg); border: 1.5px solid var(--border-2);
  box-shadow: var(--sh-sm); overflow: hidden; transition: border-color .18s, box-shadow .18s;
}
.sp-search-wrap:focus-within { border-color: var(--p); box-shadow: 0 0 0 4px var(--p-soft), var(--sh-md); }
.sp-search-icon { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); color: var(--p); pointer-events: none; display: flex; }
.sp-search-input { flex: 1; height: 56px; padding-inline: 48px 14px; border: 0; background: transparent; color: var(--ink); font-family: 'Cairo', sans-serif; font-size: 14px; font-weight: 700; outline: none; width: 100%; }
.sp-search-input::placeholder { color: var(--muted); font-weight: 600; }
.sp-search-clear { position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 9px; border: 0; background: var(--surf-3); color: var(--sub); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .16s, color .16s; }
.sp-search-clear:hover { background: var(--p-soft); color: var(--p-dk); }
.sp-signals { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-signal {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surf); color: var(--sub);
  font-size: 11px; font-weight: 800; white-space: nowrap; box-shadow: var(--sh-xs);
  transition: border-color .16s, color .16s, transform .16s;
}
.sp-signal svg { color: var(--p); opacity: .9; flex-shrink: 0; }
.sp-signal:hover { border-color: var(--p-line); color: var(--p-dk); transform: translateY(-1px); }
.sp-hero-stats { display: flex; border-radius: var(--r); overflow: hidden; border: 1px solid var(--border); background: var(--surf); box-shadow: var(--sh-sm); width: fit-content; }
.sp-hero-stat { display: grid; gap: 2px; text-align: center; padding: 12px 20px; min-width: 76px; position: relative; }
.sp-hero-stat + .sp-hero-stat::before { content: ''; position: absolute; inset-inline-start: 0; top: 18%; height: 64%; width: 1px; background: var(--border); }
.sp-hero-stat-v { font-size: 20px; font-weight: 900; color: var(--p-dk); line-height: 1; }
.sp-hero-stat-l { font-size: 9.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.sp-hero-stat--warm .sp-hero-stat-v { color: var(--accent-dk); }
@media (min-width: 900px) { .sp-hero-grid { grid-template-columns: 1fr auto; align-items: end; gap: 36px; } .sp-hero-right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; } }
@media (max-width: 899px) { .sp-hero-right { display: none; } }

/* ── TOOLBAR ── */
.sp-toolbar-wrap { position: relative; z-index: 40; padding: 14px 0 4px; }
.sp-toolbar { position: relative; width: var(--shell); margin: 0 auto; background: var(--surf); border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--sh-sm); overflow: hidden; }
.sp-toolbar-bar { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-bottom: 1px solid var(--border); }
.sp-count-group { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; padding: 7px 11px; border-radius: var(--r-sm); border: 1px solid var(--p-line); background: var(--p-soft); }
.sp-count-icon { width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; background: linear-gradient(135deg, var(--p) 0%, var(--p-dk) 100%); box-shadow: 0 6px 16px rgba(103,58,183,.26); }
.sp-count-copy { display: grid; gap: 1px; min-width: 0; }
.sp-eyebrow { font-size: 10px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.sp-count { font-size: 14px; font-weight: 900; color: var(--ink); white-space: nowrap; line-height: 1.15; }
.sp-btns { display: flex; gap: 7px; flex-shrink: 0; }
.sp-btn { display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 13px; border-radius: var(--r-sm); border: 1px solid var(--p-line); background: var(--surf); color: var(--p-dk); font-family: 'Cairo', sans-serif; font-size: 11px; font-weight: 900; cursor: pointer; white-space: nowrap; box-shadow: var(--sh-xs); transition: background .16s, border-color .16s, color .16s, transform .16s, box-shadow .16s; }
.sp-btn svg { flex-shrink: 0; }
.sp-btn:hover { background: var(--p-soft); transform: translateY(-1px); }
.sp-btn:active { transform: scale(.96); }
.sp-btn.is-accent { background: linear-gradient(135deg, var(--p) 0%, var(--p-dk) 100%); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(103,58,183,.28); }
.sp-btn.is-accent:hover { filter: brightness(1.06); color: #fff; }
.sp-chips-track { display: flex; gap: 7px; overflow-x: auto; padding: 10px 14px; background: var(--surf-2); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sp-chips-track[hidden] { display: none !important; }
.sp-chips-track::-webkit-scrollbar { display: none; }
.filter-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 33px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--p-line); background: var(--surf); color: var(--sub); font-family: 'Cairo', sans-serif; font-size: 11px; font-weight: 900; cursor: pointer; white-space: nowrap; box-shadow: var(--sh-xs); transition: all .16s ease; }
.filter-chip:hover { border-color: var(--p-line); color: var(--p-dk); background: var(--p-soft); transform: translateY(-1px); }
.filter-chip.active { background: linear-gradient(135deg, var(--p) 0%, var(--p-dk) 100%); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(103,58,183,.3); }
.filter-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.24); font-size: 10px; font-weight: 900; transition: background .16s, transform .16s; }
.filter-chip.active:hover .filter-chip-x { background: rgba(255,255,255,.4); transform: rotate(90deg); }
.sp-cat-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surf); }
.sp-cat-label { margin: 0; font-size: 11px; font-weight: 800; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sp-open-cats { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--p-line); background: var(--p-soft); color: var(--p-dk); font-family: 'Cairo', sans-serif; font-size: 11px; font-weight: 900; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background .16s, transform .16s; }
.sp-open-cats:hover { background: rgba(103,58,183,.14); transform: translateY(-1px); }
.sp-open-cats:active { transform: scale(.96); }
.search-open-categories-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--p); color: #fff; font-size: 9.5px; font-weight: 900; }

/* ── MAIN ── */
.sp-content { width: var(--shell); margin: 0 auto; display: grid; gap: 16px; padding-top: 16px; }
.sp-promo-banner { overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--sh-sm); }
.promo-slide, .promo-slide img, .promo-slide video { display: block; width: 100%; }
.promo-slide img, .promo-slide video { aspect-ratio: 16/5; object-fit: cover; }
.promo-banner-media { width: 100%; display: block; }
.sp-results-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0 2px; }
.sp-results-hd-left { display: grid; gap: 4px; min-width: 0; }
.sp-results-ht { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 0; font-size: 17px; font-weight: 900; color: var(--ink); }
.sp-results-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--p-soft); border: 1px solid var(--p-line); color: var(--p-dk); font-size: 11px; font-weight: 900; line-height: 1; }
.sp-results-badge:empty { display: none; }
.sp-results-note { margin: 0; font-size: 11.5px; font-weight: 600; color: var(--muted); line-height: 1.6; }
.sp-to-top { flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--border); background: var(--surf); color: var(--p); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; pointer-events: none; box-shadow: var(--sh-xs); transition: opacity .22s, transform .18s, box-shadow .18s; }
.sp-to-top.visible { opacity: 1; pointer-events: auto; }
.sp-to-top:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.sp-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 600px)  { .sp-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .sp-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* ── PROVIDER CARD ── */
.provider-search-card { position: relative; display: grid; grid-template-rows: auto 1fr; height: 100%; background: var(--surf); border-radius: var(--r-xl); border: 1px solid var(--border); box-shadow: var(--sh-sm); overflow: hidden; cursor: pointer; isolation: isolate; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.provider-search-card:hover { transform: translateY(-4px); border-color: var(--p-line); box-shadow: var(--sh-md); }
.provider-search-card:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }
.provider-search-card.promo-featured { border-color: rgba(241,165,89,.4); box-shadow: 0 2px 10px rgba(18,18,46,.05), 0 16px 40px rgba(241,165,89,.16); }
.provider-search-card.promo-featured::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--p)); z-index: 3; }
.provider-search-cover { position: relative; height: 118px; background: linear-gradient(135deg, #7e5fc6 0%, #7E57C2 55%, #1aa8ba 130%); overflow: visible; z-index: 2; }
.provider-search-cover-frame { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.provider-search-cover-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.provider-search-cover-overlay { position: absolute; inset: auto 0 0 0; height: 70px; background: linear-gradient(0deg, rgba(20,12,40,.5), transparent); }
.provider-search-cover-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.5); }
.provider-search-cover-fallback svg { width: 42px; height: 42px; }
.provider-search-media-tags { position: absolute; top: 10px; inset-inline-start: 10px; display: flex; gap: 6px; z-index: 4; }
.provider-search-featured, .provider-search-distance-tag { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 8px; font-family: 'Cairo', sans-serif; font-size: 9.5px; font-weight: 900; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.provider-search-featured { background: linear-gradient(135deg, rgba(241,165,89,.96), rgba(103,58,183,.92)); color: #fff; border: 1px solid rgba(255,255,255,.28); }
.provider-search-distance-tag { background: rgba(255,255,255,.92); color: var(--p-dk); border: 1px solid rgba(255,255,255,.5); }
.provider-search-avatar-stack { position: absolute; left: 50%; right: auto; inset-inline-start: auto; bottom: -72px; width: 128px; height: 110px; transform: translateX(-50%); display: grid; grid-template-rows: 78px 26px; align-items: start; justify-items: center; gap: 6px; z-index: 10; pointer-events: none; }
.provider-search-avatar-shell { position: relative; width: 78px; height: 78px; box-sizing: border-box; padding: 3px; border-radius: 50%; background: var(--nw-avatar-ring-gradient, linear-gradient(135deg, var(--p), var(--teal))); box-shadow: var(--nw-avatar-ring-shadow, 0 8px 20px rgba(103,58,183,.26)); overflow: visible; pointer-events: auto; }
.provider-search-avatar { width: 100%; height: 100%; border-radius: 50%; border: 0; background: var(--nw-avatar-inner-bg, #fff); overflow: hidden; }
.provider-search-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.provider-search-avatar span { width: 100%; height: 100%; display: grid; place-items: center; font-size: 28px; font-weight: 900; font-family: 'Cairo', sans-serif; color: var(--p-dk); }
.provider-search-avatar-shell .nw-avatar-top-badges { display: none !important; }
/* نقطة حالة الاتصال أسفل يمين الأفتار — بعيدًا عن قوس الشارات في الأعلى. */
/* المُحدِّد مُقوّى (nw-presence-dot.provider-search-avatar-presence) ليتغلّب على
   قاعدة app.css ‏.provider-search-avatar-shell > .nw-presence-dot. */
.provider-search-avatar-shell > .nw-presence-dot.provider-search-avatar-presence { position: absolute; top: auto; bottom: 6px; right: 6px; left: auto; inset-inline-end: auto; z-index: 14; }
.provider-search-avatar-badge-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; direction: ltr; gap: 8px; row-gap: 6px; width: max-content; max-width: 232px; min-height: 26px; pointer-events: auto; overflow: visible; }
.provider-search-avatar-badge-row.is-empty { visibility: hidden; pointer-events: none; }
.provider-search-avatar-badge-row.is-wide { gap: 7px; }
.provider-search-avatar-seal { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #fff; background: linear-gradient(135deg, var(--provider-search-seal-color, #8B5CF6), color-mix(in srgb, var(--provider-search-seal-color, #8B5CF6) 78%, #000)); box-shadow: 0 6px 13px color-mix(in srgb, var(--provider-search-seal-color, #8B5CF6) 32%, transparent), 0 2px 5px rgba(15,23,42,.18); }
.provider-search-avatar-seal svg { width: 13.5px; height: 13.5px; }
.nw-presence-dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; display: block; box-shadow: 0 2px 6px rgba(18,18,46,.2); }
.nw-presence-dot.is-online { background: var(--green); }
.nw-presence-dot.is-offline { background: var(--muted); }
.provider-search-body { display: grid; gap: 11px; padding: 92px 16px 16px; position: relative; z-index: 1; grid-template-rows: 116px 70px 56px auto; }
.provider-search-title-row { display: flex; align-items: flex-start; justify-content: center; gap: 8px; min-width: 0; height: 116px; overflow: hidden; text-align: center; }
.provider-search-name-wrap { display: grid; grid-template-rows: 26px 44px 24px; align-content: start; justify-items: center; gap: 6px; height: 116px; width: 100%; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.provider-search-name-line { min-width: 0; max-width: 100%; display: flex; justify-content: center; }
.provider-search-name { margin: 0; max-width: 100%; font-size: 15.5px; font-weight: 900; font-family: 'Cairo', sans-serif; color: var(--ink); line-height: 1.32; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.provider-search-headline { margin: 0; height: 44px; max-height: 44px; max-width: 100%; font-size: 11px; font-weight: 600; color: var(--sub); line-height: 1.55; text-align: center; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; }
.provider-search-headline.is-empty { visibility: hidden; }
.provider-search-badges { display: flex; justify-content: center; gap: 5px; flex-wrap: nowrap; align-items: flex-start; min-width: 0; width: 100%; height: 24px; min-height: 24px; overflow: hidden; }
.provider-search-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 7px; font-family: 'Cairo', sans-serif; font-size: 9.5px; font-weight: 900; }
.provider-search-badge.is-identity, .provider-search-badge.is-verified { background: var(--p-soft); color: var(--p-dk); border: 1px solid var(--p-line); }
.provider-search-badge.is-excellence { background: var(--accent-soft); color: var(--accent-dk); border: 1px solid rgba(241,165,89,.26); }
.provider-search-title-aside { display: none; }
.provider-search-promo-note { display: inline-flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(241,165,89,.26); background: var(--accent-soft); color: var(--accent-dk); font-family: 'Cairo', sans-serif; font-size: 10.5px; font-weight: 900; }
.provider-search-promo-note span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.provider-search-meta { display: grid; grid-template-rows: 1fr 1fr; align-content: center; justify-items: center; gap: 6px; height: 70px; min-width: 0; padding: 10px 12px; background: var(--surf-2); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; text-align: center; }
.provider-search-meta-row { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; font-size: 11.5px; font-weight: 700; font-family: 'Cairo', sans-serif; color: var(--sub); min-width: 0; }
.provider-search-meta-row:nth-child(n+3) { display: none; }
.provider-search-meta-row span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.provider-search-meta-row svg { flex: 0 0 auto; width: 15px; height: 15px; opacity: .85; }
.provider-search-stats { display: flex; height: 56px; background: var(--surf-2); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; min-width: 0; }
.provider-search-stat { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 6px; position: relative; min-width: 0; }
.provider-search-stat + .provider-search-stat::before { content: ''; position: absolute; inset-inline-start: 0; top: 18%; height: 64%; width: 1px; background: var(--border-2); }
.provider-search-stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; background: var(--p-soft); flex-shrink: 0; }
.provider-search-stat-icon svg { display: block; }
.provider-search-stat-copy { display: grid; gap: 1px; text-align: start; min-width: 0; }
.provider-search-stat-copy strong { font-size: 14px; font-weight: 900; font-family: 'Cairo', sans-serif; color: var(--ink); line-height: 1.1; white-space: nowrap; }
.provider-search-stat-copy span { font-size: 9px; font-weight: 700; font-family: 'Cairo', sans-serif; color: var(--muted); white-space: nowrap; }
.provider-search-actions { display: grid; gap: 9px; min-width: 0; align-self: end; }
.provider-search-primary { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 54px; padding: 10px 14px; border-radius: var(--r); border: 0; text-decoration: none; cursor: pointer; overflow: hidden; position: relative; background: linear-gradient(135deg, var(--p) 0%, var(--p-dk) 100%); box-shadow: 0 8px 22px rgba(103,58,183,.28); transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }
.provider-search-primary::after { content: ''; position: absolute; inset-inline-end: -24px; top: -24px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); pointer-events: none; }
.provider-search-primary:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 12px 30px rgba(103,58,183,.36); }
.provider-search-primary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.provider-search-primary-icon { width: 38px; min-width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.18); flex: 0 0 auto; }
.provider-search-primary-copy { display: grid; gap: 1px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.provider-search-primary-copy strong { display: block; font-size: 13.5px; font-weight: 900; font-family: 'Cairo', sans-serif; color: #fff; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.provider-search-primary-copy small { display: block; font-size: 9.5px; font-weight: 700; font-family: 'Cairo', sans-serif; color: rgba(255,255,255,.78); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.provider-search-primary-tail { width: 32px; min-width: 32px; height: 32px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.16); margin-inline-start: auto; flex: 0 0 auto; transition: transform .16s, background .16s; }
.provider-search-primary:hover .provider-search-primary-tail { background: rgba(255,255,255,.28); transform: translateX(-3px); }
[dir="ltr"] .provider-search-primary:hover .provider-search-primary-tail { transform: translateX(3px); }
.provider-search-map-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 13px; border-radius: var(--r-sm); border: 1px solid var(--p-line); background: var(--surf); color: var(--p-dk); text-decoration: none; font-family: 'Cairo', sans-serif; font-size: 11px; font-weight: 900; box-shadow: var(--sh-xs); transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.provider-search-map-action:hover { transform: translateY(-1px); background: var(--p-soft); }
@media (max-width: 380px) { .provider-search-primary-copy small { display: none; } }

/* ── SKELETON ── */
.provider-search-skeleton { background: var(--surf); border-radius: var(--r-xl); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--sh-sm); }
.provider-search-skeleton-cover { height: 118px; background: #e9e4f3; }
.provider-search-skeleton-body { display: grid; gap: 10px; padding: 34px 16px 16px; }
.provider-search-skeleton-line, .provider-search-skeleton-pill, .provider-search-skeleton-btn { border-radius: 8px; background: linear-gradient(90deg, #ece8f5 0%, #f6f3fc 45%, #ece8f5 90%); background-size: 200% 100%; animation: spSkel 1.5s ease-in-out infinite; }
@keyframes spSkel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .provider-search-skeleton-line, .provider-search-skeleton-pill, .provider-search-skeleton-btn { animation: none; background: #ece8f5; } }
.provider-search-skeleton-line { height: 12px; border-radius: 6px; }
.provider-search-skeleton-line.is-short { width: 50%; }
.provider-search-skeleton-line.is-wide { width: 76%; }
.provider-search-skeleton-meta { display: flex; gap: 8px; }
.provider-search-skeleton-pill { width: 72px; height: 28px; border-radius: 999px; }
.provider-search-skeleton-actions { margin-top: 4px; display: grid; gap: 8px; }
.provider-search-skeleton-btn { height: 54px; border-radius: var(--r); }
.provider-search-skeleton-btn.is-secondary { height: 38px; }
.sp-skeleton-card { background: var(--surf); border-radius: var(--r-xl); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--sh-sm); }

/* ── EMPTY ── */
.sp-empty { display: grid; place-items: center; gap: 10px; text-align: center; padding: 56px 24px; background: var(--surf); border-radius: var(--r-xl); border: 1.5px dashed var(--p-line); box-shadow: var(--sh-xs); }
.sp-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 22px; background: linear-gradient(135deg, var(--p-soft), var(--teal-soft)); border: 1px solid var(--p-line); color: var(--p); margin-bottom: 4px; }
.sp-empty-title { margin: 0; font-size: 17px; font-weight: 900; font-family: 'Cairo', sans-serif; color: var(--ink); }
.sp-empty-body { margin: 0; max-width: 340px; font-size: 13px; font-weight: 600; font-family: 'Cairo', sans-serif; color: var(--sub); line-height: 1.75; }
.sp-empty-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.sp-empty-btn { min-height: 44px; padding: 0 22px; border-radius: var(--r-sm); font-family: 'Cairo', sans-serif; font-size: 12.5px; font-weight: 900; cursor: pointer; transition: transform .16s, box-shadow .16s, filter .16s; }
.sp-empty-btn:hover { transform: translateY(-1px); }
.sp-empty-btn-primary { background: linear-gradient(135deg, var(--p), var(--p-dk)); border: 0; color: #fff; box-shadow: 0 6px 18px rgba(103,58,183,.28); }
.sp-empty-btn-primary:hover { filter: brightness(1.05); }
.sp-empty-btn-secondary { background: var(--p-soft); border: 1px solid var(--p-line); color: var(--p-dk); }
.sp-empty-btn-secondary:hover { background: rgba(103,58,183,.14); }

/* ── BACKDROP + SORT SHEET ── */
.sort-sheet-backdrop { position: fixed; inset: 0; z-index: 1900; background: rgba(26,20,48,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s ease; }
.sort-sheet-backdrop.active { opacity: 1; }
.sort-sheet { position: fixed; inset-inline: 0; top: 50%; z-index: 1901; width: min(420px, calc(100vw - 32px)); max-height: min(560px, calc(100dvh - 48px)); margin: 0 auto; display: grid; gap: 9px; padding: 18px; border-radius: var(--r-xl); background: var(--surf); border: 1px solid var(--border); box-shadow: var(--sh-lg); overflow-y: auto; transform: translateY(calc(-50% + 18px)) scale(.98); opacity: 0; transition: transform .2s ease, opacity .2s ease; }
.sort-sheet.open { transform: translateY(-50%) scale(1); opacity: 1; }
.sort-sheet-handle { width: 46px; height: 5px; margin: 0 auto 8px; border-radius: 999px; background: var(--border-2); }
.sort-sheet-title { margin: 0 0 4px; font-size: 15px; font-weight: 900; font-family: 'Cairo', sans-serif; color: var(--ink); text-align: center; }
.sort-sheet-option { height: 52px; border-radius: var(--r-sm); border: 1px solid var(--border); background: transparent; color: var(--ink); font-family: 'Cairo', sans-serif; font-size: 12.5px; font-weight: 900; cursor: pointer; transition: background .16s, border-color .16s, color .16s; }
.sort-sheet-option:hover { background: var(--p-soft); border-color: var(--p-line); color: var(--p-dk); }
.sort-sheet-option.active { background: linear-gradient(135deg, var(--p), var(--p-dk)); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(103,58,183,.28); }
@media (max-width: 640px) { .sort-sheet { top: auto; bottom: calc(var(--bottom-nav-height, 68px) + env(safe-area-inset-bottom,0px) + 14px); width: min(430px, calc(100vw - 20px)); max-height: calc(100dvh - var(--bottom-nav-height, 68px) - env(safe-area-inset-bottom,0px) - 36px); border-radius: 24px; transform: translateY(18px); } .sort-sheet.open { transform: translateY(0); } }

/* ── CATEGORY PICKER ── */
.category-picker-modal { position: fixed; inset: max(20px, env(safe-area-inset-top,0px)) 12px calc(env(safe-area-inset-bottom,0px) + 12px); z-index: 1901; width: min(760px, calc(100vw - 24px)); margin: 0 auto; display: grid; grid-template-rows: auto auto auto minmax(0,1fr); gap: 12px; padding: 16px; border-radius: var(--r-xl); background: var(--surf); border: 1px solid var(--border); box-shadow: var(--sh-lg); transform: translateY(18px) scale(.98); opacity: 0; transition: transform .22s ease, opacity .22s ease; }
.category-picker-modal.open { transform: translateY(0) scale(1); opacity: 1; }
.category-picker-handle { display: none; }
.category-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.category-picker-head h3 { margin: 0; font-size: 16px; font-weight: 900; font-family: 'Cairo', sans-serif; color: var(--ink); }
.category-picker-close { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 12px; background: var(--surf-2); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .16s, transform .16s; }
.category-picker-close:hover { background: var(--p-soft); transform: rotate(90deg); }
.category-picker-search-wrap { position: relative; }
.category-picker-search-icon { position: absolute; top: 50%; inset-inline-start: 13px; transform: translateY(-50%); color: var(--p); pointer-events: none; display: flex; }
.category-picker-search { width: 100%; height: 48px; border: 1px solid var(--border-2); border-radius: var(--r-sm); background: var(--surf-2); color: var(--ink); font-family: 'Cairo', sans-serif; font-size: 13px; font-weight: 700; padding: 0 14px 0 42px; outline: none; transition: border-color .16s, box-shadow .16s; }
.category-picker-search:focus { border-color: var(--p); box-shadow: 0 0 0 4px var(--p-soft); }
.category-picker-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.category-picker-count { font-size: 11px; font-weight: 800; font-family: 'Cairo', sans-serif; color: var(--sub); }
.category-picker-reset { border: 0; border-radius: 10px; background: var(--p-soft); color: var(--p-dk); font-family: 'Cairo', sans-serif; font-size: 11px; font-weight: 900; min-height: 32px; padding: 0 12px; cursor: pointer; transition: background .16s; }
.category-picker-reset:hover { background: rgba(103,58,183,.14); }
.category-picker-quick { display: none; }
.category-picker-list { overflow-y: auto; display: grid; gap: 12px; align-content: start; scrollbar-width: thin; padding-inline-end: 2px; }
.category-picker-hero { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--r); background: linear-gradient(135deg, var(--p-soft), var(--teal-soft)); border: 1px solid var(--p-line); }
.category-picker-hero-icon { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--p), var(--p-dk)); color: #fff; font-size: 18px; font-weight: 900; flex-shrink: 0; }
.category-picker-hero strong { display: block; font-size: 13px; font-weight: 900; color: var(--ink); }
.category-picker-hero p { margin: 2px 0 0; font-size: 11px; font-weight: 600; color: var(--sub); line-height: 1.5; }
.category-picker-section { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.category-picker-section-label { font-size: 12.5px; font-weight: 900; color: var(--ink); }
.category-picker-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--p-soft); border: 1px solid var(--p-line); color: var(--p-dk); font-size: 10px; font-weight: 900; }
.category-picker-main-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 9px; }
.category-picker-sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 8px; }
.category-picker-item { font-family: 'Cairo', sans-serif; cursor: pointer; text-align: start; transition: background .16s, border-color .16s, transform .16s, box-shadow .16s; }
.category-picker-item.is-highlighted { box-shadow: 0 0 0 3px var(--p-soft); }
.category-picker-main-card { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surf-2); }
.category-picker-main-card:hover { border-color: var(--p-line); transform: translateY(-1px); }
.category-picker-main-card.is-active { border-color: transparent; background: linear-gradient(135deg, var(--p), var(--p-dk)); }
.category-picker-main-card.is-active .category-picker-main-label, .category-picker-main-card.is-active .category-picker-main-meta { color: #fff; }
.category-picker-main-card.is-active .category-picker-main-icon { background: rgba(255,255,255,.2); color: #fff; }
.category-picker-main-icon { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--p-soft); color: var(--p-dk); font-size: 16px; flex-shrink: 0; }
.category-picker-main-body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.category-picker-main-label { font-size: 12.5px; font-weight: 900; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.category-picker-main-meta { font-size: 10px; font-weight: 700; color: var(--muted); }
.category-picker-main-check { width: 18px; text-align: center; color: #fff; font-weight: 900; flex-shrink: 0; }
.category-picker-sub-card { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surf); }
.category-picker-sub-card:hover { border-color: var(--p-line); background: var(--p-soft); }
.category-picker-sub-card.is-active { border-color: var(--p-line); background: var(--p-soft); }
.category-picker-sub-radio { color: var(--p); font-size: 13px; flex-shrink: 0; }
.category-picker-item-label { font-size: 12px; font-weight: 800; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-picker-use-main { width: 100%; padding: 11px 14px; border-radius: var(--r-sm); border: 1px dashed var(--p-line); background: var(--p-soft); color: var(--p-dk); font-size: 12px; font-weight: 900; }
.category-picker-use-main.is-active { border-style: solid; background: linear-gradient(135deg, var(--p), var(--p-dk)); color: #fff; }
.category-picker-hint { padding: 12px 14px; border-radius: var(--r-sm); background: var(--surf-2); color: var(--muted); font-size: 11.5px; font-weight: 600; text-align: center; }
.category-picker-empty { padding: 40px 16px; text-align: center; color: var(--muted); font-size: 12.5px; font-weight: 800; }

/* ── MAP MODAL ── */
.search-map-modal { position: fixed; inset: max(16px, env(safe-area-inset-top,0px)) 12px calc(env(safe-area-inset-bottom,0px) + 12px); z-index: 2050; width: min(1020px, calc(100vw - 24px)); margin: 0 auto; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-xl); overflow: hidden; background: var(--surf); border: 1px solid var(--border); box-shadow: var(--sh-lg); transform: translateY(18px); opacity: 0; transition: transform .22s ease, opacity .22s ease; will-change: transform; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: auto; }
.search-map-modal.open { transform: translateY(0); opacity: 1; }
#search-map-backdrop { background: rgba(26,20,48,.3); -webkit-backdrop-filter: none !important; backdrop-filter: none !important; z-index: 2049; }
.search-map-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surf); z-index: 1; }
.search-map-head h3 { margin: 0; font-size: 15px; font-weight: 900; font-family: 'Cairo', sans-serif; color: var(--ink); }
.search-map-close { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 12px; background: var(--surf-2); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .16s; }
.search-map-close:hover { background: var(--p-soft); }
.search-map-body { position: relative; height: 100%; min-height: 320px; width: 100%; }
.search-map-canvas { min-height: 320px; height: 100%; width: 100%; background: #eef0f5; position: relative; }
.search-map-empty { position: absolute; z-index: 1200; left: 50%; top: 18px; transform: translateX(-50%); max-width: min(420px, calc(100% - 32px)); padding: 10px 16px; border-radius: 999px; background: var(--surf); border: 1px solid var(--border); box-shadow: var(--sh-md); color: var(--ink); font-family: 'Cairo', sans-serif; font-size: 12.5px; font-weight: 800; text-align: center; pointer-events: none; }
.search-map-empty.hidden { display: none; }
.search-map-canvas.google-maps-container, .search-map-canvas .google-maps-container { height: 100%; width: 100%; background: #eef0f5; font-family: 'Cairo', sans-serif; }
.search-map-canvas .search-map-pin { background: transparent; border: 0; }
.search-map-canvas .search-map-pin svg { display: block; filter: drop-shadow(0 4px 6px rgba(26,20,48,.3)); }
.search-map-canvas .google-maps-control-zoom a, .search-map-canvas .google-maps-bar a { background: #fff; color: var(--ink); border-color: var(--border); }
.search-map-canvas .google-maps-control-zoom a:hover, .search-map-canvas .google-maps-bar a:hover { background: var(--p-soft); color: var(--p-dk); }
.smp { font-family: 'Cairo', sans-serif; width: 244px; }
.smp-head { display: flex; gap: 11px; align-items: center; padding: 4px 2px 12px; }
.smp-avatar-col { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; }
.smp-badges-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 64px; }
.smp-badge-seal { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(15,23,42,.24); }
.smp-badge-seal svg { display: block; }
.smp-avatar-link { position: relative; display: inline-flex; flex-shrink: 0; }
.smp-avatar { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; display: block; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(26,20,48,.16); background: var(--p-soft); }
.smp-avatar--fallback { display: grid; place-items: center; font-size: 24px; }
.smp-head .nw-presence-dot { position: absolute; bottom: 1px; inset-inline-end: 1px; }
.smp-headline { min-width: 0; flex: 1; }
.smp-name { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 900; color: var(--ink); }
.smp-name span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smp-stats { display: flex; gap: 10px; margin-top: 5px; }
.smp-rating, .smp-completed { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; color: var(--sub); }
.smp-rating { color: var(--accent-dk); }
.smp-cta { display: flex; align-items: center; gap: 9px; text-decoration: none; padding: 10px 12px; border-radius: 13px; background: linear-gradient(135deg, var(--p), var(--p-dk)); color: #fff; box-shadow: 0 8px 20px rgba(103,58,183,.28); margin-bottom: 9px; }
.smp-cta-ic { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.smp-cta-copy strong { display: block; font-size: 12.5px; font-weight: 900; }
.smp-cta-copy small { display: block; font-size: 9.5px; font-weight: 700; opacity: .82; }
.smp-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.smp-act { display: grid; gap: 4px; place-items: center; padding: 9px 4px; border-radius: 11px; border: 1px solid var(--border); background: var(--surf); color: var(--sub); text-decoration: none; transition: background .16s, border-color .16s, color .16s; }
.smp-act:hover { background: var(--p-soft); border-color: var(--p-line); color: var(--p-dk); }
.smp-act--wa:hover { background: rgba(37,211,102,.1); border-color: rgba(37,211,102,.3); color: #128c4a; }
.smp-act.is-disabled { opacity: .45; }
.smp-act-ic { display: inline-flex; }
.smp-act-lbl { font-size: 9.5px; font-weight: 800; }

/* ── TOAST ── */
.search-toast { position: fixed; left: 50%; bottom: calc(var(--bottom-nav-height, 68px) + env(safe-area-inset-bottom,0px) + 18px); transform: translate(-50%, 16px); z-index: 2200; max-width: min(420px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 14px; background: #2a2342; color: #fff; font-family: 'Cairo', sans-serif; font-size: 12.5px; font-weight: 800; text-align: center; box-shadow: var(--sh-lg); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.search-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  body.page-search.page-search-providers { --shell: min(1180px, calc(100% - 22px)); }
  .sp-toolbar-bar { gap: 7px; padding: 10px 9px; }
  .sp-btn { padding: 0 10px; font-size: 10.5px; min-width: 50px; justify-content: center; }
  .sp-count-icon { width: 30px; height: 30px; }
  .provider-search-avatar-stack { left: 50%; right: auto; inset-inline-start: auto; bottom: -72px; width: 128px; height: 110px; transform: translateX(-50%); gap: 8px; }
  .provider-search-body { padding: 92px 15px 15px; grid-template-rows: 116px 70px 56px auto; }
}
@media (min-width: 1280px) { body.page-search.page-search-providers { --shell: min(1280px, calc(100% - 48px)); } }
@media (min-width: 1500px) { body.page-search.page-search-providers { --shell: min(1380px, calc(100% - 64px)); } .sp-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }