/* SaudiTech AI Tools Directory — bold cards on the electric-green system.
   RTL-first; reuses child-theme tokens with safe fallbacks. */

.st-ai-dir { --_brand: var(--st-brand, #00e63c); --_ink: var(--st-ink, #0d1117); --_green: var(--c-main, #0a8f46); }

/* Filters */
.st-ai-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-block: 8px 24px;
}
.st-ai-search {
  flex: 1 1 240px; min-inline-size: 200px;
  padding: 10px 16px; font-size: 15px;
  border: 1.5px solid var(--c-separator, #e5e9e7); border-radius: 999px;
  background: var(--c-contrast-0, #fff); color: inherit;
}
.st-ai-search:focus { outline: none; border-color: var(--_brand); }
.st-ai-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.st-ai-pills button {
  border: 1.5px solid var(--c-separator, #e5e9e7); background: transparent;
  color: var(--c-contrast-700, #38403d);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all .15s ease;
}
.st-ai-pills button:hover { border-color: var(--_green); color: var(--_green); }
.st-ai-pills button.is-active { background: var(--_ink); border-color: var(--_ink); color: #fff; }
.st-ai-artoggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; cursor: pointer; color: var(--_green);
}
.st-ai-artoggle input { accent-color: var(--_green); inline-size: 16px; block-size: 16px; }

/* Grid */
.st-ai-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px;
}
.st-ai-card {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--c-separator, #e5e9e7); border-radius: var(--st-radius, 14px);
  background: var(--c-contrast-0, #fff);
  padding: 18px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .st-ai-card:hover { transform: translateY(-3px); border-color: var(--_brand); box-shadow: var(--st-shadow-card-hov, 0 12px 30px -12px rgba(13,17,23,.2)); }
}
.st-ai-card[hidden] { display: none; }

.st-ai-card-head { display: flex; align-items: center; gap: 12px; }
.st-ai-logo, .st-ai-logo img {
  inline-size: 48px; block-size: 48px; border-radius: 12px; object-fit: cover; display: block;
}
.st-ai-logo-ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--_ink); color: var(--_brand);
  font-weight: 800; font-size: 22px;
}
.st-ai-name { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.3; }
.st-ai-name a { color: inherit; text-decoration: none; }
.st-ai-name a:hover { color: var(--_green); }
.st-ai-tag {
  margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--c-contrast-600, #505a56);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-block-size: 2.6em;
}

/* Badges */
.st-ai-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.st-ai-ar, .st-ai-price {
  font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 3px 10px;
}
.st-ar-5, .st-ar-4 { background: rgba(0, 230, 60, .14); color: #067a35; }
.st-ar-3          { background: rgba(0, 230, 60, .08); color: #3d7a55; }
.st-ar-1          { background: rgba(224, 168, 63, .15); color: #8a6414; }
.st-ar-0          { background: rgba(120, 130, 140, .12); color: #5e6b76; }
.st-price-free     { background: rgba(0, 140, 255, .10); color: #0866b8; }
.st-price-freemium { background: rgba(120, 90, 240, .10); color: #6444d8; }
.st-price-paid     { background: rgba(13, 17, 23, .08); color: #38403d; }

/* Dark scheme */
.s-dark .st-ai-card, .site-s-dark .st-ai-card { background: var(--c-contrast-50, #13171b); }
.s-dark .st-ar-5, .s-dark .st-ar-4, .site-s-dark .st-ar-5, .site-s-dark .st-ar-4 { color: #4dffa1; }
.s-dark .st-price-free, .site-s-dark .st-price-free { color: #6cc0ff; }
.s-dark .st-price-freemium, .site-s-dark .st-price-freemium { color: #b3a1ff; }
.s-dark .st-price-paid, .site-s-dark .st-price-paid { background: rgba(255,255,255,.08); color: #bfcad3; }

/* Visit button */
.st-ai-visit {
  margin-block-start: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--_brand); color: var(--_ink) !important;
  font-weight: 800; font-size: 13.5px; text-decoration: none;
  border-radius: 10px; padding: 9px 14px;
  transition: filter .15s ease;
}
.st-ai-visit:hover { filter: brightness(1.08); }
.st-ai-visit-lg { font-size: 16px; padding: 13px 26px; margin-block-start: 12px; }

/* Single-tool panel */
.st-ai-single-panel {
  margin-block-start: 28px; padding: 20px;
  border: 1px solid var(--c-separator, #e5e9e7); border-radius: var(--st-radius, 14px);
  background: var(--c-contrast-50, #f5f7f6);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
}
.st-ai-single-ar { font-size: 15px; }
.st-ai-stars { color: #f0a010; letter-spacing: 2px; }

.st-ai-empty { text-align: center; color: var(--c-contrast-500, #656f6b); padding-block: 40px; }

@media (max-width: 640px) {
  .st-ai-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .st-ai-card { padding: 14px; }
  .st-ai-tag { -webkit-line-clamp: 3; }
}
@media (max-width: 420px) {
  .st-ai-grid { grid-template-columns: 1fr; }
}