/* =========================================================
   TOOL DIRECTORY — PREMIUM LAYER
   Loaded only on /tools/, /category/{slug}/, and single tool pages
   (see inc/enqueue.php). Two parts:
   1. New theme-owned components (.sb-tcard, .sb-filters, .sb-thero…)
      for the redesigned archive/category pages.
   2. A light reskin of the plugin's own .sbr-* classes (hero, tabs,
      badges, sticky CTA) so the tool DETAIL page looks premium
      without any template override — zero functional risk.
   ========================================================= */

/* =========================================================
   PLUGIN VARIABLE BRIDGE
   The stratobliss-reviews plugin has its own --sbr-* design tokens,
   independent of this theme's --sb-color-* system (see inc/dark-mode.php
   for the body-class half of this fix). Re-pointing them here means
   every .sbr-* component — including ones this file doesn't explicitly
   restyle — automatically tracks the theme's palette and dark mode,
   instead of maintaining two color systems that can drift out of sync.
   This does mean the plugin's own admin color pickers (Settings ->
   Colors) no longer visibly change anything; Customize -> Theme Colors
   is the one place brand color is set now. Worth a heads-up to whoever
   has admin access.
   ========================================================= */
:root {
  --sbr-primary: var(--sb-color-primary);
  --sbr-secondary: var(--sb-color-text-muted);
  --sbr-bg: var(--sb-color-bg);
  --sbr-bg-soft: var(--sb-color-bg-alt);
  --sbr-text: var(--sb-color-text);
  --sbr-text-muted: var(--sb-color-text-muted);
  --sbr-border: var(--sb-color-border);
  --sbr-radius-sm: var(--sb-radius-sm);
  --sbr-radius-md: var(--sb-radius-md);
  --sbr-radius-lg: var(--sb-radius-lg);
  --sbr-shadow: var(--sb-shadow-sm);
  --sbr-shadow-hover: var(--sb-shadow-md);
  --sbr-font: var(--sb-font-body);
}
/* The plugin's own body.sbr-dark-mode block re-sets --sbr-bg/text/border
   to fixed hex values, which would override the aliases above by
   source order. Since inc/dark-mode.php already keeps sbr-dark-mode in
   sync with [data-theme="dark"], simplest fix is to re-assert the alias
   at equal specificity, after the plugin's own dark block — this file
   is enqueued with 'sbr-public' as an explicit dependency so it always
   loads later. */
body.sbr-dark-mode {
  --sbr-bg: var(--sb-color-bg);
  --sbr-bg-soft: var(--sb-color-bg-alt);
  --sbr-text: var(--sb-color-text);
  --sbr-text-muted: var(--sb-color-text-muted);
  --sbr-border: var(--sb-color-border);
  --sbr-shadow: var(--sb-shadow-sm);
  --sbr-shadow-hover: var(--sb-shadow-md);
}

/* ---- 1. Plugin class reskin (tool detail page + anywhere .sbr-* appears) ---- */
.sbr-hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--sb-color-primary) 6%, transparent), transparent 60%);
  border: 1px solid var(--sbr-border, var(--sb-color-border));
  border-radius: var(--sb-radius-lg);
  padding: var(--sb-space-6);
}
.sbr-hero__logo { border-radius: var(--sb-radius-md); box-shadow: var(--sb-shadow-sm); }
.sbr-hero__name { font-size: var(--sb-fs-2xl); font-weight: 700; margin: 0; }
.sbr-btn { border-radius: var(--sb-radius-sm); font-weight: 600; transition: transform .12s ease, box-shadow .12s ease; }
.sbr-btn:hover { transform: translateY(-1px); }
.sbr-tabs { display: flex; gap: var(--sb-space-2); border-bottom: 1px solid var(--sb-color-border); overflow-x: auto; margin-block: var(--sb-space-6); }
.sbr-tabs__item { padding: var(--sb-space-3) var(--sb-space-4); font-weight: 600; font-size: var(--sb-fs-sm); color: var(--sb-color-text-muted); white-space: nowrap; border-bottom: 2px solid transparent; }
.sbr-tabs__item.is-active { color: var(--sb-color-primary); border-bottom-color: var(--sb-color-primary); }
.sbr-card { border-radius: var(--sb-radius-md); border: 1px solid var(--sb-color-border); box-shadow: var(--sb-shadow-sm); transition: transform .15s ease, box-shadow .15s ease; }
.sbr-card:hover { transform: translateY(-3px); box-shadow: var(--sb-shadow-md); }
.sbr-sticky-sidebar__card { border-radius: var(--sb-radius-md); border: 1px solid var(--sb-color-border); box-shadow: var(--sb-shadow-sm); padding: var(--sb-space-5); }
.sbr-sticky-cta { box-shadow: var(--sb-shadow-lg); border-radius: var(--sb-radius-md) var(--sb-radius-md) 0 0; backdrop-filter: blur(8px); }
.sbr-faq-item { border: 1px solid var(--sb-color-border); border-radius: var(--sb-radius-sm); padding: var(--sb-space-3) var(--sb-space-4); margin-bottom: var(--sb-space-3); }
.sbr-faq-item summary { font-weight: 600; cursor: pointer; }

/* ---- 2. Directory hero (archive-tools.php override) ---- */
.sb-thero {
  position: relative; overflow: hidden; text-align: center;
  padding-block: var(--sb-space-12) var(--sb-space-8);
  background:
    radial-gradient(600px 300px at 15% 0%, color-mix(in srgb, var(--sb-color-primary) 12%, transparent), transparent 70%),
    radial-gradient(600px 300px at 85% 10%, color-mix(in srgb, var(--sb-color-accent) 10%, transparent), transparent 70%);
}
.sb-thero__title { font-size: clamp(2rem, 4.5vw, var(--sb-fs-4xl)); max-width: 760px; margin-inline: auto; }
.sb-thero__subtitle { color: var(--sb-color-text-muted); max-width: 560px; margin: 0 auto var(--sb-space-6); }
.sb-thero__search { max-width: 620px; margin-inline: auto; position: relative; }
.sb-thero__search input {
  width: 100%; font-size: var(--sb-fs-lg); padding: var(--sb-space-4) var(--sb-space-5);
  border-radius: 999px; border: 1px solid var(--sb-color-border); box-shadow: var(--sb-shadow-md);
  background: var(--sb-color-surface); color: var(--sb-color-text);
}
.sb-thero__search input:focus { outline: none; border-color: var(--sb-color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sb-color-primary) 18%, transparent); }
.sb-thero__suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20;
  background: var(--sb-color-surface); border: 1px solid var(--sb-color-border); border-radius: var(--sb-radius-md);
  box-shadow: var(--sb-shadow-lg); text-align: left; overflow: hidden; display: none;
}
.sb-thero__suggest.is-open { display: block; }
.sb-thero__suggest a, .sb-thero__suggest button {
  display: flex; align-items: center; gap: var(--sb-space-3); width: 100%; text-align: left;
  padding: var(--sb-space-3) var(--sb-space-4); border: none; background: none; cursor: pointer; font-size: var(--sb-fs-sm); color: var(--sb-color-text);
}
.sb-thero__suggest a:hover, .sb-thero__suggest button:hover { background: var(--sb-color-bg-alt); }
.sb-thero__suggest img { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; }
.sb-thero__suggest .sb-thero__suggest-label { padding: var(--sb-space-2) var(--sb-space-4); font-size: var(--sb-fs-xs); color: var(--sb-color-text-muted); text-transform: uppercase; letter-spacing: .04em; }

.sb-thero__popular { margin-top: var(--sb-space-5); display: flex; gap: var(--sb-space-2); flex-wrap: wrap; justify-content: center; }
.sb-thero__popular a { font-size: var(--sb-fs-xs); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--sb-color-border); color: var(--sb-color-text-muted); }
.sb-thero__popular a:hover { border-color: var(--sb-color-primary); color: var(--sb-color-primary); text-decoration: none; }

.sb-thero__stats { display: flex; gap: var(--sb-space-8); justify-content: center; margin-top: var(--sb-space-8); flex-wrap: wrap; }
.sb-thero__stat strong { display: block; font-size: var(--sb-fs-2xl); }
.sb-thero__stat span { font-size: var(--sb-fs-xs); color: var(--sb-color-text-muted); text-transform: uppercase; letter-spacing: .04em; }

.sb-thero__trending { margin-top: var(--sb-space-6); display: flex; gap: var(--sb-space-2); flex-wrap: wrap; justify-content: center; }
.sb-thero__trending a {
  font-size: var(--sb-fs-sm); font-weight: 600; padding: var(--sb-space-2) var(--sb-space-4);
  border-radius: var(--sb-radius-sm); background: var(--sb-color-surface); border: 1px solid var(--sb-color-border);
}
.sb-thero__trending a:hover { text-decoration: none; border-color: var(--sb-color-primary); color: var(--sb-color-primary); }

/* ---- 3. Filter panel + toolbar ---- */
.sb-directory { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: var(--sb-space-6); align-items: start; padding-block: var(--sb-space-8) var(--sb-space-10); }
@media (max-width: 960px) { .sb-directory { grid-template-columns: 1fr; } }

.sb-filters { position: sticky; top: calc(var(--sb-header-h) + var(--sb-space-5)); border: 1px solid var(--sb-color-border); border-radius: var(--sb-radius-md); padding: var(--sb-space-5); background: var(--sb-color-surface); }
@media (max-width: 960px) { .sb-filters { position: static; } }
.sb-filters__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sb-space-4); }
.sb-filters__clear { font-size: var(--sb-fs-xs); color: var(--sb-color-text-muted); background: none; border: none; cursor: pointer; text-decoration: underline; }
.sb-filter-group { border-bottom: 1px solid var(--sb-color-border); padding-block: var(--sb-space-4); }
.sb-filter-group:last-child { border-bottom: none; }
.sb-filter-group__title { font-size: var(--sb-fs-sm); font-weight: 700; margin-bottom: var(--sb-space-3); }
.sb-filter-group label { display: flex; align-items: center; gap: var(--sb-space-2); font-size: var(--sb-fs-sm); color: var(--sb-color-text-muted); padding: 4px 0; cursor: pointer; }
.sb-filter-group label:hover { color: var(--sb-color-text); }
.sb-filter-group input { accent-color: var(--sb-color-primary); }

.sb-chips { display: flex; flex-wrap: wrap; gap: var(--sb-space-2); margin-bottom: var(--sb-space-5); }
.sb-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--sb-fs-xs); font-weight: 600;
  background: color-mix(in srgb, var(--sb-color-primary) 10%, transparent); color: var(--sb-color-primary);
  padding: 5px 10px; border-radius: 999px; border: none; cursor: pointer;
}

.sb-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sb-space-5); flex-wrap: wrap; gap: var(--sb-space-3); }
.sb-toolbar__count { font-size: var(--sb-fs-sm); color: var(--sb-color-text-muted); }
.sb-toolbar__sort select { padding: var(--sb-space-2) var(--sb-space-4); border-radius: var(--sb-radius-sm); border: 1px solid var(--sb-color-border); background: var(--sb-color-surface); color: var(--sb-color-text); font-weight: 600; font-size: var(--sb-fs-sm); }

/* ---- 4. Premium tool card ---- */
.sb-tcard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sb-space-5); }
@media (max-width: 1100px) { .sb-tcard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sb-tcard-grid { grid-template-columns: 1fr; } }

.sb-tcard {
  position: relative; border: 1px solid var(--sb-color-border); border-radius: var(--sb-radius-lg);
  background: var(--sb-color-surface); box-shadow: var(--sb-shadow-sm); overflow: hidden;
  display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease;
}
.sb-tcard:hover { transform: translateY(-4px); box-shadow: var(--sb-shadow-lg); }
.sb-tcard__ribbon { position: absolute; top: var(--sb-space-3); right: var(--sb-space-3); z-index: 2; }
.sb-tcard__link { padding: var(--sb-space-5); display: flex; flex-direction: column; gap: var(--sb-space-3); flex: 1; color: inherit; }
.sb-tcard__link:hover { text-decoration: none; }
.sb-tcard__head { display: flex; align-items: center; gap: var(--sb-space-3); }
.sb-tcard__logo { width: 48px; height: 48px; border-radius: var(--sb-radius-sm); object-fit: cover; flex-shrink: 0; transition: transform .3s ease; }
.sb-tcard:hover .sb-tcard__logo { transform: scale(1.08); }
.sb-tcard__logo--placeholder {
  display: flex; align-items: center; justify-content: center; background: var(--sb-color-bg-alt);
  font-weight: 700; font-size: var(--sb-fs-lg); color: var(--sb-color-text-muted);
}
.sb-tcard__title { margin: 0; font-size: var(--sb-fs-lg); line-height: 1.3; }
.sb-tcard__cat { font-size: var(--sb-fs-xs); color: var(--sb-color-text-muted); }
.sb-tcard__verified { margin-left: auto; color: var(--sb-color-success); font-weight: 700; }
.sb-tcard__excerpt { font-size: var(--sb-fs-sm); color: var(--sb-color-text-muted); margin: 0; flex: 1; }
.sb-tcard__badges { display: flex; gap: 6px; flex-wrap: wrap; }
.sb-tcard__meta { display: flex; justify-content: space-between; align-items: center; font-size: var(--sb-fs-sm); }
.sb-tcard__rating { font-weight: 700; color: var(--sb-color-warning); }
.sb-tcard__rating small { font-weight: 400; color: var(--sb-color-text-muted); }
.sb-tcard__price { font-weight: 600; }
.sb-tcard__actions { display: flex; align-items: center; gap: var(--sb-space-2); padding: var(--sb-space-4) var(--sb-space-5); border-top: 1px solid var(--sb-color-border); }
.sb-tcard__save { width: 38px; height: 38px; font-size: var(--sb-fs-lg); line-height: 1; }
.sb-tcard__save[aria-pressed="true"] { color: var(--sb-color-accent); border-color: var(--sb-color-accent); }
.sb-tcard__compare { flex: 1; text-align: center; font-size: var(--sb-fs-sm); }
.sb-tcard__compare.is-added { background: var(--sb-color-bg-alt); }
.sb-tcard__visit { padding: var(--sb-space-2) var(--sb-space-4); font-size: var(--sb-fs-sm); }
.sb-tcard[aria-busy="true"] { opacity: .5; pointer-events: none; }

/* Compare tray */
.sb-compare-tray {
  position: fixed; bottom: var(--sb-space-5); right: var(--sb-space-5); z-index: 490;
  background: var(--sb-color-surface); border: 1px solid var(--sb-color-border); border-radius: var(--sb-radius-md);
  box-shadow: var(--sb-shadow-lg); padding: var(--sb-space-4); display: flex; align-items: center; gap: var(--sb-space-3);
}

/* Grid loading state */
.sb-tcard-grid[aria-busy="true"] { opacity: .6; }
.sb-tcard-grid__empty { grid-column: 1 / -1; text-align: center; padding: var(--sb-space-10); color: var(--sb-color-text-muted); }
.sb-tcard-grid__empty svg { color: var(--sb-color-text-muted); margin-bottom: var(--sb-space-4); }
.sb-tcard-grid__empty h3 { color: var(--sb-color-text); margin-bottom: var(--sb-space-2); }

/* Empty state (search, category, etc.) */
.sb-empty-state { text-align: center; padding: var(--sb-space-10) var(--sb-space-5); color: var(--sb-color-text-muted); }
.sb-empty-state__illustration { color: var(--sb-color-text-muted); margin-bottom: var(--sb-space-5); }
.sb-empty-state h3 { color: var(--sb-color-text); margin-bottom: var(--sb-space-2); }
.sb-empty-state .sb-btn { margin-top: var(--sb-space-4); }

/* Skeleton loaders — used while a grid is aria-busy, in place of a spinner */
@keyframes sb-skeleton-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.sb-skeleton-card {
  border: 1px solid var(--sb-color-border); border-radius: var(--sb-radius-lg);
  padding: var(--sb-space-5); background: var(--sb-color-surface);
  animation: sb-skeleton-pulse 1.4s ease-in-out infinite;
}
.sb-skeleton-line { height: 12px; border-radius: 6px; background: var(--sb-color-bg-alt); margin-bottom: var(--sb-space-3); }
.sb-skeleton-line--title { height: 18px; width: 70%; }
.sb-skeleton-line--short { width: 40%; }
.sb-skeleton-avatar { width: 48px; height: 48px; border-radius: var(--sb-radius-sm); background: var(--sb-color-bg-alt); margin-bottom: var(--sb-space-3); }
@media (prefers-reduced-motion: reduce) { .sb-skeleton-card { animation: none; } }

/* Load more */
.sb-loadmore { display: flex; justify-content: center; margin-top: var(--sb-space-8); }

/* ---- 5. Category page ---- */
.sb-cathero { padding-block: var(--sb-space-10) var(--sb-space-6); text-align: center; }
.sb-cathero__icon { width: 56px; height: 56px; border-radius: var(--sb-radius-md); margin-inline: auto var(--sb-space-4); }
.sb-cathero__banner { border-radius: var(--sb-radius-lg); overflow: hidden; margin-bottom: var(--sb-space-6); max-height: 280px; }
.sb-cathero__banner img { width: 100%; height: 100%; object-fit: cover; }
.sb-buying-guide { max-width: var(--sb-container-narrow); margin-inline: auto; }
.sb-related-cats { display: flex; gap: var(--sb-space-3); flex-wrap: wrap; justify-content: center; margin-top: var(--sb-space-5); }