/* AI lawyer search on the public pages, and lawyer pictures everywhere a
 * client or a visitor sees a lawyer (docs/AI_LAWYER_SEARCH.md).
 *
 * Self-contained on purpose: no Tailwind utility is needed for anything this
 * file draws, so the pages keep their look whatever replaces the Tailwind CDN.
 * Logical properties (inline-start/end) keep Arabic RTL and English LTR one
 * stylesheet.
 */

/* ---------------------------------------------------------------- picture */
.ekav {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(135deg, #2a306e, #4550c9);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  user-select: none;
}
.ekav > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.ekav.has-img { background: #e8eaf6; }
.ekav.has-img > .ekav-i { visibility: hidden; }
/* Inside an existing sized, coloured wrapper: take its box, radius and type. */
.ekav.ekav--fill {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font-size: inherit;
}
.ekav.ekav--fill.has-img { background: #e8eaf6; }
.ekav--circle { border-radius: 50%; }

/* ---------------------------------------------------------------- section */
.ekls-section { padding: 0 0 40px; }
/* Clear the public pages' sticky header when scrolled to (#ai-lawyer-search,
   the results, the sign-up panel). */
.ekls-section, .ekls-out, .ekls-gate { scroll-margin-top: 84px; }
.ekls-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: 16px;
}
.ekls-section--overlap .ekls-card { margin-top: -40px; position: relative; z-index: 10; }
.ekls-section--profile { padding: 8px 0 56px; background: #f8fafc; }
@media (min-width: 640px) {
  .ekls-wrap { padding-inline: 24px; }
  .ekls-section--overlap .ekls-card { margin-top: -64px; }
}
@media (min-width: 1024px) {
  .ekls-wrap { padding-inline: 32px; }
}

.ekls-card {
  background: #fff;
  border: 1px solid #eceff6;
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(20, 20, 56, 0.10);
  padding: 20px 18px;
  color: #1f2937;
  text-align: start;
}
@media (min-width: 640px) { .ekls-card { padding: 30px 32px; } }

.ekls-head { margin-bottom: 16px; }
.ekls-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #eef1fb;
  color: #2a306e;
  font-size: 12.5px;
  font-weight: 700;
}
.ekls-badge svg { width: 15px; height: 15px; flex: none; }
.ekls-title {
  margin: 12px 0 6px;
  color: #2a306e;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.45;
}
@media (min-width: 640px) { .ekls-title { font-size: 25px; } }
.ekls-sub { margin: 0; color: #5b6475; font-size: 14.5px; line-height: 1.8; }

/* ---------------------------------------------------------------- form */
.ekls-form { margin: 0; }
.ekls-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 118px;
  resize: vertical;
  padding: 14px 16px;
  border: 1.5px solid #e1e5ef;
  border-radius: 16px;
  background: #fbfcfe;
  color: #111827;
  font: inherit;
  font-size: 15.5px;
  line-height: 1.85;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.ekls-input:focus { border-color: #4550c9; background: #fff; box-shadow: 0 0 0 4px rgba(69, 80, 201, 0.12); }
.ekls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 12px;
}
.ekls-city {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #e1e5ef;
  border-radius: 12px;
  background: #fff;
  color: #374151;
  font: inherit;
  font-size: 14px;
}
.ekls-count { color: #9ca3af; font-size: 12.5px; direction: ltr; unicode-bidi: isolate; }
.ekls-spacer { flex: 1 1 auto; }
.ekls-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #2a306e, #4550c9);
  box-shadow: 0 8px 22px rgba(42, 48, 110, 0.30);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.ekls-go svg { width: 18px; height: 18px; flex: none; }
.ekls-go:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(42, 48, 110, 0.38); }
.ekls-go:disabled { opacity: 0.6; cursor: progress; }
@media (max-width: 639px) {
  .ekls-city { flex: 1 1 auto; }
  .ekls-spacer { display: none; }
  .ekls-go { flex: 1 1 100%; }
}

.ekls-turnstile { margin-top: 12px; max-width: 100%; overflow: hidden; }
.ekls-turnstile .cf-turnstile { margin: 0; }

.ekls-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 12px;
}
.ekls-allow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
}
.ekls-allow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.ekls-allow.is-out { background: #fff7ed; color: #b45309; }
.ekls-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #6b7280;
  font-size: 12.5px;
  line-height: 1.6;
}
.ekls-note svg { width: 14px; height: 14px; flex: none; }

.ekls-msg {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 14px;
  line-height: 1.7;
}
.ekls-msg.is-info { background: #fff7ed; color: #9a3412; }

/* ---------------------------------------------------------------- progress */
.ekls-steps {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid #f0f2f7;
  list-style: none;
}
.ekls-step {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #94a3b8;
  font-size: 13.5px;
  transition: color 0.3s;
}
.ekls-step::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 50%;
  flex: none;
}
.ekls-step.is-on { color: #2a306e; font-weight: 700; }
.ekls-step.is-on::before { background: currentColor; animation: ekls-pulse 1s ease-in-out infinite; }
@keyframes ekls-pulse { 50% { transform: scale(1.3); } }

/* ---------------------------------------------------------------- results */
.ekls-out { margin-top: 20px; padding-top: 18px; border-top: 1px solid #f0f2f7; animation: ekls-in 0.3s ease; }
@keyframes ekls-in { from { opacity: 0; transform: translateY(8px); } }
.ekls-analysis {
  padding: 14px 16px;
  border-radius: 16px;
  background: #f7f8fd;
}
.ekls-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ekls-cat {
  padding: 5px 14px;
  border-radius: 999px;
  background: #2a306e;
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
}
.ekls-chip {
  padding: 3px 11px;
  border-radius: 999px;
  background: #eef1fb;
  color: #2a306e;
  font-size: 12px;
  font-weight: 700;
}
.ekls-matches { color: #6b7280; font-size: 12.5px; }
.ekls-reason { margin: 10px 0 0; color: #374151; font-size: 14.5px; line-height: 1.85; }
.ekls-keywords { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.ekls-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin: 20px 0 12px;
}
.ekls-list-head h3 { margin: 0; color: #2a306e; font-size: 17px; font-weight: 800; }
.ekls-list-head a { color: #4550c9; font-size: 13.5px; font-weight: 700; text-decoration: none; }
.ekls-list-head a:hover { text-decoration: underline; }

.ekls-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) { .ekls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ekls-section--directory .ekls-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ekls-lawyer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #eceff6;
  border-radius: 18px;
  background: #fff;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.ekls-lawyer:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(20, 20, 56, 0.09); border-color: #c9cef5; }
.ekls-lawyer-top { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.ekls-lawyer-id { min-width: 0; flex: 1 1 auto; }
.ekls-lawyer-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #111827;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.ekls-this {
  padding: 1px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 11px;
  font-weight: 700;
}
.ekls-lawyer-meta { margin: 2px 0 0; color: #6b7280; font-size: 12.5px; line-height: 1.6; }
.ekls-stars { margin: 4px 0 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #6b7280; }
.ekls-stars b { color: #f59e0b; letter-spacing: 1px; font-weight: 400; direction: ltr; unicode-bidi: isolate; }
.ekls-lawyer .ekls-keywords { margin-top: 0; }
.ekls-view {
  display: block;
  margin-top: auto;
  padding: 10px 12px;
  border: 1.5px solid #2a306e;
  border-radius: 12px;
  color: #2a306e;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.ekls-view:hover { background: #2a306e; color: #fff; }
.ekls-empty {
  margin: 0;
  padding: 18px;
  border-radius: 16px;
  background: #f8fafc;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
}
.ekls-skel {
  height: 150px;
  border-radius: 18px;
  background: linear-gradient(90deg, #f1f3f7 25%, #e7eaf1 45%, #f1f3f7 65%);
  background-size: 220% 100%;
  animation: ekls-shimmer 1.1s linear infinite;
}
@keyframes ekls-shimmer { to { background-position: -120% 0; } }

/* ---------------------------------------------------------------- sign-up */
.ekls-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 22px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, #2a306e, #1e2456);
  color: #fff;
  text-align: center;
}
.ekls-gate svg { width: 30px; height: 30px; opacity: 0.9; }
.ekls-gate h3 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.5; }
.ekls-gate p { margin: 0; color: #c7d2fe; font-size: 14px; line-height: 1.8; }
.ekls-gate a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  padding: 11px 22px;
  border-radius: 12px;
  background: #fff;
  color: #2a306e;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}
.ekls-gate small { color: #a5b4fc; font-size: 12.5px; }

/* The directory's classic filters, below the AI card. */
.ekls-filters-title { margin: 0 0 14px; color: #2a306e; font-size: 17px; font-weight: 800; }

.ekls-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* `hidden` must win over the display values above (the chip is also used on
   the client dashboard's AI page, outside [data-ekls]). */
[data-ekls] [hidden], .ekls-allow[hidden] { display: none !important; }