/* ===== SSM Compare Engine — site-wide styles ===== */
:root{
  --ssm-navy:#031b3d; --ssm-green:#1faa42; --ssm-green-2:#27c34d;
  --ssm-ink:#071d3c; --ssm-muted:#5f6f85; --ssm-line:#dbe4ee; --ssm-soft:#f5f8fb;
  --ssm-radius:18px; --ssm-radius-sm:12px;
}

/* Category tabs */
.ssm-cat-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.ssm-cat-tab{padding:12px 26px;border-radius:12px;border:1px solid var(--ssm-line);
  background:#fff;font-size:14px;font-weight:800;color:var(--ssm-muted);cursor:pointer;transition:.18s}
.ssm-cat-tab.active{background:var(--ssm-green);border-color:var(--ssm-green);color:#fff}

.ssm-cat-panel{display:none}
.ssm-cat-panel.active{display:block}

/* Vendor grid */
.ssm-vendor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.ssm-vendor-card{background:#fff;border:1px solid var(--ssm-line);border-radius:var(--ssm-radius);
  padding:22px;transition:.2s ease}
.ssm-vendor-card:hover{transform:translateY(-3px);box-shadow:0 14px 38px rgba(5,29,61,.10)}
.ssm-vendor-card__logo{display:block;height:74px;display:grid;place-items:center;
  background:var(--ssm-soft);border-radius:var(--ssm-radius-sm);margin-bottom:14px;font-weight:900}
.ssm-vendor-card h3{font-size:16px;margin-bottom:10px}

/* Add-to-compare checkbox — reused on home grid AND native Directorist cards */
.directorist-thumb-bottom-right{
  position:absolute; right:12px; bottom:12px; z-index:5;
}
.ssm-compare-check{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  color:var(--ssm-ink);cursor:pointer;background:#fff;border:1px solid var(--ssm-line);
  border-radius:8px;padding:6px 10px;transition:.15s;user-select:none;white-space:nowrap;
  box-shadow:0 4px 10px rgba(0,0,0,.12)}
.ssm-compare-check:hover{border-color:var(--ssm-green)}
.ssm-compare-check.selected{border-color:var(--ssm-green);background:#eefbf1}
.ssm-compare-input{accent-color:var(--ssm-green);width:14px;height:14px;margin:0}

/* Floating dock */
.ssm-compare-dock{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);
  width:min(860px,calc(100% - 32px));background:var(--ssm-navy);color:#fff;border-radius:16px;
  padding:14px 18px;display:flex;align-items:center;gap:16px;
  box-shadow:0 20px 50px rgba(3,27,61,.45);z-index:9999;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.2)}
.ssm-compare-dock.visible{transform:translate(-50%,0)}
.ssm-compare-dock__slots{display:flex;align-items:center;gap:10px;flex:1;min-width:0;flex-wrap:wrap}
.ssm-dock-chip{background:rgba(255,255,255,.1);border-radius:8px;padding:4px 8px;font-size:12px;display:flex;gap:6px;align-items:center}
.ssm-dock-chip button{background:none;border:none;color:#fff;cursor:pointer;font-size:12px}
.ssm-compare-dock__count{font-size:13px;color:#8fa3bd;font-weight:700}
.ssm-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:12px;
  font-size:14px;font-weight:800;border:none;cursor:pointer;text-decoration:none}
.ssm-btn--compare{background:linear-gradient(135deg,var(--ssm-green),var(--ssm-green-2));color:#fff;margin-left:auto}

/* Compare table */
.ssm-empty-compare{text-align:center;color:var(--ssm-muted);padding:60px 20px;
  border:2px dashed var(--ssm-line);border-radius:var(--ssm-radius)}
.compare-wrap{display:grid;grid-template-columns:220px 1fr 1fr;border:1px solid var(--ssm-line);
  border-radius:var(--ssm-radius);overflow:hidden;background:#fff}
.compare-wrap>div{padding:16px 20px;border-bottom:1px solid var(--ssm-line);font-size:14px}
.compare-wrap .row-label{color:var(--ssm-muted);font-weight:700;background:var(--ssm-soft)}
.compare-wrap .row-head{font-weight:900;font-size:16px}
.compare-wrap .row-head img{display:block;max-width:100%;border-radius:8px;margin-bottom:6px}

@media(max-width:640px){
  .compare-wrap{grid-template-columns:110px 1fr 1fr;font-size:13px}
}