/**
 * ============================================================================
 * ZETLINK SITES CATALOG - PUBLIC /sites/ PAGE REDESIGN (2026)
 * ============================================================================
 * Scoped entirely under .zl-rif2026 (added only to the public /sites/ page's
 * <section class="zetlink-sites-catalog">) so the dashboard "Websites" tab,
 * which renders the exact same shared template/shortcode markup, keeps its
 * existing look untouched -- this file never loads there.
 *
 * Visual target: rabbi-it-marketplace-real-demo.html (blue/white corporate
 * marketplace look). No markup/behavior changes -- every selector below
 * targets classes that already exist in the shared PHP/shortcode output, so
 * all real functionality (filters, AJAX search/sort/pagination, cart, login
 * gating, popups) is untouched.
 * ============================================================================
 */

/* ============================================================================
   1. DESIGN TOKENS -- remap the existing --sc-* custom properties so every
      component that already reads them (badges, buttons, pagination, active
      states, shadows) repaints blue/white automatically without per-rule
      overrides.
============================================================================ */
.zl-rif2026 {
	--sc-blue: #0e56f5;
	--sc-blue-soft: #edf4ff;
	--sc-blue-hover: #1748e8;
	--sc-purple: #1748e8;
	--sc-purple-soft: #edf4ff;
	--sc-pink: #d6336c;
	--sc-green: #08a972;
	--sc-orange: #f57c0c;
	--sc-red: #e84c57;
	--sc-amber: #f57c0c;
	--sc-text: #14233f;
	--sc-text-2: #1b2b47;
	--sc-muted: #66758f;
	--sc-muted-soft: #97a3b8;
	--sc-glass: #ffffff;
	--sc-glass-hover: #f7faff;
	--sc-glass-strong: #ffffff;
	--sc-glass-soft: #ffffff;
	--sc-glass-border: #dfe6ef;
	--sc-glass-border-strong: #c7d2e0;
	--sc-border: #dfe6ef;
	--sc-border-soft: #edf1f6;
	--sc-radius: 10px;
	--sc-radius-sm: 7px;
	--sc-radius-md: 10px;
	--sc-radius-lg: 14px;
	--sc-radius-xl: 16px;
	--sc-grad-primary: linear-gradient(135deg, #0e56f5, #0a47df);
	--sc-grad-purple: linear-gradient(135deg, #0e56f5, #0a47df);
	--sc-grad-aurora: linear-gradient(135deg, #0e56f5, #0a47df);
	--sc-shadow-xs: 0 1px 2px 0 rgba(14, 86, 245, 0.06);
	--sc-shadow-sm: 0 2px 6px -1px rgba(14, 86, 245, 0.12);
	--sc-shadow-md: 0 4px 12px -2px rgba(14, 86, 245, 0.16);
	--sc-shadow-lg: 0 10px 25px -5px rgba(14, 86, 245, 0.22);

	font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	background: transparent;
	padding: 20px 0 60px;
}

.zl-rif2026 .zl-hero,
.zl-rif2026 .zetlink-sites-catalog__card-body {
	background: #ffffff;
}

/* ============================================================================
   2. HERO -- competes with an inline <style> block the same template prints
      just above this markup (see sites-catalog-layout.php). That block's
      selectors are plain 1-2 class selectors placed later in the document,
      so an EQUAL-specificity override here would lose the cascade tie
      (later same-specificity rule wins). Every selector that touches a
      .zl-hero__* class is therefore compounded as
      ".zetlink-sites-catalog.zl-rif2026" (both classes live on the same
      <section> element) to guarantee strictly higher specificity, which
      wins regardless of source order.
============================================================================ */
.zetlink-sites-catalog.zl-rif2026 .zl-hero {
	border: 1px solid #eef1f6;
	border-radius: 24px;
	padding: 20px 10px 24px;
	background:
		radial-gradient(900px 420px at 0% 40%, rgba(253, 243, 227, .95), rgba(253, 243, 227, 0) 60%),
		radial-gradient(900px 420px at 100% 40%, rgba(232, 239, 252, .95), rgba(232, 239, 252, 0) 60%),
		#fbfcfe;
}

.zetlink-sites-catalog.zl-rif2026 .zl-hero__inner { gap: 30px; }

.zetlink-sites-catalog.zl-rif2026 .zl-hero__title {
	font-size: clamp(2.2rem, 5vw, 3.1rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.03em;
	color: #0f172a;
	max-width: 900px;
	margin: 0 auto;
}
.zetlink-sites-catalog.zl-rif2026 .zl-hero__title::after {
	content: '';
	display: block;
	width: 150px;
	height: 2px;
	margin: 20px auto 16px;
	background: linear-gradient(90deg, rgba(79, 70, 229, 0), #6366f1, rgba(79, 70, 229, 0));
}

/* Repaint the inline block's .grad gradient-text with the 2026 centered-hero
   blue->purple ramp. Cascade only overrides matched PROPERTIES, not the whole
   rule, so every clip/fill property is restated with !important to guarantee
   this wins regardless of any stylesheet loaded after this one (e.g. a
   mobile-only CSS file). */
.zetlink-sites-catalog.zl-rif2026 .zl-hero__title .grad {
	background: linear-gradient(120deg, #2563eb 0%, #4f46e5 45%, #7c3aed 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: #4f46e5 !important;
}

.zetlink-sites-catalog.zl-rif2026 .zl-hero__desc { color: #707a91; font-size: 18px; line-height: 1.8; margin: 0 auto; max-width: 760px; font-family: "Plus Jakarta Sans", Inter, sans-serif;}

/* Hero layout: two columns (copy | search box), exactly mirroring the
   mockup's .hero grid -- this markup only renders on the redesign branch
   (see sites-catalog-layout.php), the dashboard's old badges/buttons hero
   markup is untouched and never gets these classes. */
.zetlink-sites-catalog.zl-rif2026 .zl-hero.hero {
	display: block;
	text-align: center;
}
.zl-rif2026 .hero-copy { min-width: 0; }

.zl-rif2026 .trust-row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 18px 42px;
	margin-top: 38px;
	font-size: 15px;
	font-weight: 650;
	color: #25344e;
}
.zl-rif2026 .trust-item { display: flex; align-items: center; gap: 8px; }
.zl-rif2026 .trust-item svg { flex-shrink: 0; }
.zl-rif2026 .trust-item span { color: #263750; }
.zl-rif2026 .trust-item.blue   { color: #1555f5; }
.zl-rif2026 .trust-item.green  { color: #1555f5; }
.zl-rif2026 .trust-item.orange { color: #1555f5; }
.zl-rif2026 .trust-item.purple { color: #1555f5; }

.zl-rif2026 .hero-search {
	background: rgba(255,255,255,.94);
	border: 1px solid rgba(221,227,238,.95);
	border-radius: 16px;
	padding: 17px;
	box-shadow: 0 14px 28px rgba(29,47,82,.13);
}
.zl-rif2026 .hero-search .search-box {
	height: 49px;
	border: 1px solid #d6deea;
	border-radius: 8px;
	display: flex;
	align-items: center;
	background: #fff;
	padding: 4px 4px 4px 14px;
	gap: 9px;
}
.zl-rif2026 .hero-search .search-box input {
	border: 0;
	outline: 0;
	flex: 1;
	min-width: 0;
	background: transparent;
	font-size: 13px;
	font-family: inherit;
	color: var(--sc-text);
}
.zl-rif2026 .hero-search .btn {
	border: 1px solid var(--sc-border);
	border-radius: 9px;
	background: #fff;
	min-height: 40px;
	padding: 0 18px;
	font-weight: 750;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: inherit;
	cursor: pointer;
	transition: .18s ease;
}
.zl-rif2026 .hero-search .btn-primary {
	color: #fff;
	border-color: var(--sc-blue);
	background: var(--sc-grad-primary);
	box-shadow: 0 6px 15px rgba(14,86,245,.2);
	height: 40px;
	min-width: auto;
}
.zl-rif2026 .hero-search .btn-primary:hover { box-shadow: 0 9px 20px rgba(14,86,245,.28); }
.zl-rif2026 .popular-searches {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 14px;
	font-size: 11.5px;
	color: #52617a;
}
.zl-rif2026 .popular-searches strong { color: #2c3a54; }
/* .tiny-chip doubles as .zetlink-sites-catalog__category-link (reused so
   clicking it applies the real category filter via the existing delegated
   click handler in sites-catalog-order.js) -- that class carries the big
   icon-left card layout from section 4 below, so every one of those
   properties must be reset back to a small inline pill here. This selector
   (.zl-rif2026 .popular-searches .tiny-chip, 3 classes) is naturally more
   specific than the category-card rule (.zl-rif2026 .zetlink-sites-catalog__category-link,
   2 classes), so it wins without needing !important. */
.zl-rif2026 .popular-searches .tiny-chip {
	display: inline-flex;
	width: auto;
	height: auto;
	flex: none;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0;
	border: 1px solid #e0e6ee;
	background: #f7f9fc;
	border-radius: 6px;
	padding: 3px 10px;
	font-weight: 650;
	color: #40506c;
	font-family: inherit;
	font-size: 11.5px;
	line-height: 1.4;
	cursor: pointer;
	box-shadow: none;
	transform: none;
}
.zl-rif2026 .popular-searches .tiny-chip:hover {
	border-color: #bcd4fb;
	background: var(--sc-blue-soft);
	color: var(--sc-blue);
	transform: none;
	box-shadow: none;
}
.zl-rif2026 .popular-searches .tiny-chip.active,
.zl-rif2026 .popular-searches .tiny-chip.zetlink-sites-catalog__category-link--active {
	border-color: var(--sc-blue);
	background: var(--sc-blue-soft);
	color: var(--sc-blue);
}
.zl-rif2026 .popular-searches .tiny-chip::before { display: none; }

/* Stats strip -- a separate slim band right below the hero, matching the
   mockup's standalone .stats-strip section (not nested inside the hero
   card at all). */
.zl-rif2026 .stats-strip {
	height: 72px;
	margin-top: 13px;
	margin-bottom: 15px;
	border: 1px solid var(--sc-border);
	border-radius: 13px;
	background: #fff;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	box-shadow: var(--sc-shadow-sm);
}
.zl-rif2026 .stats-strip .stat {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 13px;
	position: relative;
}
.zl-rif2026 .stats-strip .stat:not(:last-child)::after {
	content: '';
	width: 1px;
	height: 29px;
	background: var(--sc-border);
	position: absolute;
	right: 0;
}
.zl-rif2026 .stats-strip .stat-icon {
	width: 37px;
	height: 37px;
	border-radius: 50%;
	background: var(--sc-blue-soft);
	color: var(--sc-blue);
	display: grid;
	place-items: center;
	flex-shrink: 0;
}
.zl-rif2026 .stats-strip .stat strong { display: block; font-size: 17px; line-height: 1.1; color: #071936; }
.zl-rif2026 .stats-strip .stat small { font-size: 11px; color: var(--sc-muted); }

@media (max-width: 900px) {
	.zetlink-sites-catalog.zl-rif2026 .zl-hero.hero { grid-template-columns: 1fr; text-align: center; }
	.zl-rif2026 .stats-strip { height: auto; grid-template-columns: 1fr 1fr; }
	.zl-rif2026 .stats-strip .stat { height: 64px; }
	.zl-rif2026 .stats-strip .stat:nth-child(3)::after { display: none; }
}
@media (max-width: 640px) {
	.zl-rif2026 .stats-strip { grid-template-columns: 1fr 1fr; height: auto; }
	.zl-rif2026 .stats-strip .stat:not(:last-child)::after { left: 20px; right: 20px; bottom: 0; top: auto; width: auto; height: 1px; }
	.zl-rif2026 .active .zetlink-cat-label, .zl-rif2026 .active .zetlink-cat-icon svg{
		color: #fff !important;
	}
	.zl-rif2026 .zetlink-sites-catalog__login-notice{
		margin-top: 15px;
	}
}

/* ============================================================================
   3. TOGGLE BAR -> "source tabs" pill group (mockup's .source-tabs). These
      classes come from the external sites-catalog.css (this file's own
      enqueue dependency), so a plain .zl-rif2026 prefix already wins on
      source order -- no compounding needed here.
============================================================================ */
.zl-rif2026 .zl-toggle-bar {
	border-bottom: 1px solid var(--sc-border);
	border-radius: 0px;
	margin-bottom: 20px;
	box-shadow: none;
	padding: 8px 0px 12px;
}
.zl-rif2026 .zetlink-wsm-catalog-toggle__opt,
.zl-rif2026 .zetlink-wsm-catalog-toggle--header a.zetlink-wsm-catalog-toggle__opt {
	border-radius: 7px;
	padding: 0.5rem 1.1rem;
	color: #172743;
}
.zl-rif2026 .zetlink-wsm-catalog-toggle__opt--active,
.zl-rif2026 .zetlink-wsm-catalog-toggle--header a.zetlink-wsm-catalog-toggle__opt--active {
	background: linear-gradient(120deg, #2563eb 0%, #4f46e5 45%, #7c3aed 100%) !important;
	box-shadow: 0 5px 13px rgba(14, 86, 245, .22), inset 0 1px 0 rgba(255,255,255,.15);
}

/* ============================================================================
   4. CATEGORY GRID -> icon-left horizontal cards (mockup's .category)
============================================================================ */
.zl-rif2026 .zl-categories__head { justify-content: space-between; }
.zl-rif2026 .zl-categories__title { font-size: 14px; font-weight: 800; color: #071936; }
.zl-rif2026 .zl-categories__view-all {
	font-size: 12px;
	color: var(--sc-blue);
	font-weight: 750;
	display: flex;
	align-items: center;
	gap: 5px;
	text-decoration: none;
}
.zl-rif2026 .zl-categories__view-all:hover { color: var(--sc-blue-hover); }
/* The mockup hard-codes 6 short single-word category names (Technology,
   Business, ...) into repeat(6,1fr). The real catalog's category labels are
   longer phrases ("Total Websites", "Link Insertion", ...) and there are
   7-8 of them, not 6 -- a fixed 6-column grid either clips the last column
   (items can't shrink below their min-content width) or, once forced to
   shrink via min-width:0, truncates every label to "Tot…" / "Lin…" to fit.
   auto-fit + minmax sidesteps both: each card gets at least 180px (enough
   for the longest real label without truncating) and the browser fits as
   many columns as actually have room, wrapping the rest -- no breakpoint
   guessing needed, and it degrades gracefully to whatever the real label
   lengths require instead of a number chosen to match the mockup's fake
   6-item dataset. */
.zl-rif2026 .zetlink-sites-catalog__category-tabs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	width: 100%;
}
.zl-rif2026 .zetlink-sites-catalog__category-tabs .nav-item { width: 100%; min-width: 0; }
.zl-rif2026 .zetlink-sites-catalog__category-link { min-width: 0; }
/* Real labels ("Total Websites", "Link Insertion") run longer than the
   mockup's single-word placeholders -- wrap instead of ellipsis-clipping
   them down to 3 characters, and let the card grow a little taller
   (min-height, not a hard height) to fit a wrapped 2nd line cleanly. */
.zl-rif2026 .zetlink-cat-label { white-space: normal; line-height: 1.2; overflow: visible; }
.zl-rif2026 .zetlink-sites-catalog__category-link .badge {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}
/* The <a> has 3 direct sibling children -- icon span, label span, count
   badge span (see sites-catalog-layout.php) -- there is no wrapper around
   label+badge to flex/stack as a pair. CSS Grid solves this without any
   markup change: icon occupies column 1 across both rows, label sits in
   column 2 row 1, and the count badge is pulled into column 2 row 2 right
   below it, exactly matching the mockup's "name over count" category card. */
.zl-rif2026 .zetlink-sites-catalog__category-link {
	width: 100%;
	min-height: auto;
	display: grid;
	grid-template-columns: 40px 1fr;
	grid-template-rows: auto auto;
	column-gap: 12px;
	row-gap: 1px;
	align-items: center;
	padding: 11px 14px;
	background: #fff;
	border: 1px solid var(--sc-border);
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(25, 52, 90, .025);
}
.zl-rif2026 .zetlink-sites-catalog__category-link:hover {
	transform: translateY(-2px);
	border-color: #bad0fa;
	box-shadow: var(--sc-shadow-sm);
}
.zl-rif2026 .zetlink-cat-icon {
	grid-column: 1;
	grid-row: 1 / 3;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--accent-color, var(--sc-blue-soft));
	background: color-mix(in srgb, var(--accent-color, var(--sc-blue)) 14%, #fff);
	flex-shrink: 0;
}
.zl-rif2026 .zetlink-cat-icon svg { color: var(--accent-color, var(--sc-blue)); }
.zl-rif2026 .zetlink-cat-label {
	grid-column: 2;
	grid-row: 1;
	font-size: 13px;
	font-weight: 700;
	color: #0d2143;
	text-align: left;
}
.zl-rif2026 .zetlink-sites-catalog__category-link .badge {
	grid-column: 2;
	grid-row: 2;
	justify-self: start;
	font-size: 11.5px;
	font-weight: 500;
	color: var(--sc-muted);
	background: transparent !important;
	padding: 0;
	margin: 0;
}

.zl-rif2026 .zetlink-sites-catalog__category-link.active { border-color: var(--sc-blue); }
.zl-rif2026 .zetlink-sites-catalog__category-link.active::before { opacity: .06; }

/* auto-fit already reflows column count smoothly at every width above this
   -- only pin an explicit count on small phones, where auto-fit's math
   (minmax(180px,1fr) inside a ~340px viewport) would otherwise still try
   to squeeze in a lopsided 1-2 column mix. */
@media (max-width: 640px) {
	.zl-rif2026 .zetlink-sites-catalog__category-tabs { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   5. LOGIN NOTICE -> "pricing visible to members" banner (mockup's .price-notice)
============================================================================ */
.zl-rif2026 .zetlink-sites-catalog__login-notice {
	background: #fffaf0;
	border: 1px solid #ffe0ac;
	border-radius: 8px;
	color: #9a5013;
}
.zl-rif2026 .zetlink-sites-catalog__login-link {
	background: var(--sc-grad-primary);
}

/* ============================================================================
   6. CATALOG CARD (results toolbar, filters, table, pagination)
============================================================================ */
.zl-rif2026 .zetlink-sites-catalog__card-body {
	border: 1px solid var(--sc-border);
	border-radius: 13px;
	box-shadow: var(--sc-shadow-sm);
	overflow: hidden;
}

.zl-rif2026 .zetlink-wsm-results-toolbar {
	border-bottom: 1px solid var(--sc-border-soft);
	background: #fff;
}
.zl-rif2026 .zetlink-wsm-results-toolbar__summary { color: #65758f; }
.zl-rif2026 .zetlink-wsm-results-toolbar__total,
.zl-rif2026 .zetlink-wsm-results-toolbar__range { color: #315eb3; }

.zl-rif2026 .zetlink-wsm-toolbar-search-wrap {
	background: #fff;
	border: 1px solid #dce4ef;
	border-radius: 7px;
}
.zl-rif2026 .zetlink-wsm-toolbar-search-icon { display: flex; }
.zl-rif2026 .zetlink-wsm-toolbar-search-wrap:focus-within {
	border-color: var(--sc-blue);
	box-shadow: 0 0 0 3px var(--sc-blue-soft);
}

.zl-rif2026 .zetlink-wsm-toolbar-sort,
.zl-rif2026 .zetlink-wsm-results-toolbar__selects select {
	background: #fff;
	border: 1px solid #dce4ef;
	border-radius: 7px;
	color: #33435d;
}

.zl-rif2026 .zetlink-wsm-bulk-search-btn {
	background: #fff;
	border: 1px solid #dce4ef;
	color: var(--sc-blue);
	box-shadow: none;
}
.zl-rif2026 .zetlink-wsm-bulk-search-btn::before { display: none; }
.zl-rif2026 .zetlink-wsm-bulk-search-btn:hover { background: var(--sc-blue-soft); filter: none; }

/* Filter selects (Moz DA / Ahrefs DR / Traffic / Niche / ...) -> the mockup's
   .filter-btn pills are content-hugging (just as wide as their label), one
   slim row. The real markup's wrapper is `flex:1 1 160px;min-width:140px`
   and the select itself is `width:100%` (both set by the base
   sites-catalog.css, not this file), which together stretch every filter
   into a uniform wide block -- that's the "doesn't match" look. Both need
   to be reset to auto/content-width here to get the snug pill row. */
.zl-rif2026 .zetlink-wsm-filter-grid {
	padding: 8px 12px;
	gap: 8px;
	row-gap: 8px;
}
.zl-rif2026 .zetlink-wsm-filter-grid .wsm-filter__input-wrap {
	flex: 0 0 auto;
	min-width: 0;
	max-width: none;
	width: auto;
}
.zl-rif2026 .wsm-filter__input-wrap input,
.zl-rif2026 .zetlink-wsm-filter-grid select,
.zl-rif2026 .zetlink-wsm-filter-grid .wsm-filter__input {
	width: 100%;
	min-width: 0;
	background: #fff;
	border: 1px solid #dce3ed;
	border-radius: 7px;
	color: #30405a;
	font-weight: 650;
	height: 33px;
	min-height: 33px;
	font-size: 11.5px;
	padding: 0 26px 0 12px;
	background-position: right 10px center;
	background-size: 9px 9px;
}
.zl-rif2026 .zetlink-wsm-filter-grid .wsm-filter__input-wrap--budget,
.zl-rif2026 .zetlink-wsm-filter-grid .wsm-filter__input-wrap--budget input {
	max-width: 140px;
}
.zl-rif2026 .zetlink-wsm-filter-grid input[type="text"] { padding: 0 12px; }
.zl-rif2026 .zetlink-wsm-filter-grid .wsm-filter__input:focus {
	border-color: #9bb8f7;
	background-color: #f0f5ff;
	color: var(--sc-blue);
}

/* Table */

.zl-rif2026 .zetlink-wsm-websites-table thead th {
	background: #fbfcfe;
	border-bottom: 1px solid var(--sc-border);
	color: #263750;
	font-size: 10.5px;
	font-weight: 800;
	text-transform: none;
	white-space: nowrap;
}
.zl-rif2026 .zetlink-wsm-th--sortable:hover,
.zl-rif2026 .zetlink-wsm-th--sortable:focus-visible { color: var(--sc-blue); }
.zl-rif2026 .zetlink-wsm-websites-table tbody tr:hover { background: #f7faff; }
.zl-rif2026 .zetlink-wsm-websites-table tbody td {
	border-bottom: 1px solid #edf1f5;
	font-size: 12px;
	color: #263650;
}

.zl-rif2026 .zetlink-wsm-domain-link { color: #0d2143; font-weight: 600; }
.zl-rif2026 .zetlink-wsm-domain-link:hover { color: var(--sc-blue); }
.zl-rif2026 .zetlink-wsm-new-badge {
	color: #dc7500;
	border: 1px solid #ffdca3;
	background: #fff6e5;
}

/* Favicon tile injected by the page's own JS (.zl-site-favicon) -- now a
   generic globe icon (assets/images/globe-svgrepo-com.svg) instead of a
   per-domain monogram letter. */
.zl-rif2026 .zl-site-favicon {
	display: grid !important;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--sc-blue-soft);
	flex-shrink: 0;
}
.zl-rif2026 .zl-site-favicon img {
	width: 16px;
	height: 16px;
	display: block;
}

.zl-rif2026 .zetlink-wsm-view-rules {
	background: #f5f5f5;
    color: #00105d;
}
.zl-rif2026 .zetlink-wsm-view-rules:hover { background: #dbe8fe; }

/* Ring-style DA/DR badges, echoing the mockup's circular .metric-ring --
   a real proportional conic-gradient fill (100 = full ring, 80 = 80% of the
   ring, etc). The percentage comes from --score, a CSS custom property set
   per-badge by JS (applyFavicons() in this file's <script> below, look for
   ".zetlink-wsm-metric-badge" / "--score") which reads the badge's own
   rendered number -- the plugin's PHP never outputs the value as a
   separate data attribute, so the client fills the gap the same way the
   existing favicon-monogram enhancement already does for other columns.

   FIX: box-shadow:inset paints its color on the OUTER band and leaves the
   conic-gradient background showing through the CENTER -- exactly
   backwards from a progress ring (that painted the pie/pac-man look in the
   middle instead of a thin ring at the edge). A ring needs the opposite:
   the conic-gradient must be visible only at the outer edge, with the
   center covered in white. Two background layers do this correctly (first
   layer paints on top): an opaque white disc that stops short of the edge
   (radial-gradient) sits over the conic-gradient pie, so only the outer
   band of the pie remains visible -- a true ring, not a filled wedge. */
  .zl-rif2026 .zetlink-wsm-metric-badge {
	--score: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-weight: 800;
	font-size: 11px;
	padding: 0;
	color: #172742;
}
.zl-rif2026 .zetlink-wsm-metric-badge--da {
	background:
		radial-gradient(closest-side, #fff calc(100% - 4px), transparent calc(100% - 4px)),
		conic-gradient(#4dbdeb  calc(var(--score) * 1%), #e5e9ef 0);
}
.zl-rif2026 .zetlink-wsm-metric-badge--dr {
	background:
		radial-gradient(closest-side, #fff calc(100% - 4px), transparent calc(100% - 4px)),
		conic-gradient(#f57c0c calc(var(--score) * 1%), #e5e9ef 0);
}

.zl-rif2026 .zetlink-wsm-col-niche a { background: var(--sc-blue-soft); color: #1764d6; }
.zl-rif2026 .zetlink-wsm-col-niche a:hover { background: #dbe8fe; color: var(--sc-blue-hover); }

.zl-rif2026 .zetlink-wsm-col-links span { background: var(--sc-blue-soft); color: #1764d6; }

.zl-rif2026 .zetlink-wsm-col-publish span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #853e00;
	background: #fff4e8;
	border-radius: 12px;
	padding: 4px 9px;
	font-size: 9.5px;
	font-weight: 800;
}

.zl-rif2026 .zetlink-wsm-order-btn {
	background: linear-gradient(120deg, #2563eb 0%, #4f46e5 45%, #7c3aed 100%) !important;
	box-shadow: 0 4px 9px rgba(14, 86, 245, .19);
	border-radius: 5px;
}
.zl-rif2026 .zetlink-wsm-order-btn:hover { background: var(--sc-blue-hover); }

/* Pagination */
.zl-rif2026 .wsm-sites__pagination__nav-btn:hover { border-color: var(--sc-blue); color: var(--sc-blue); }
.zl-rif2026 .wsm-sites__pagination__item--active { background: var(--sc-blue); border-color: var(--sc-blue); }

/* Login-gate / no-results panels */
.zl-rif2026 .zetlink-wsm-login-gate__btn,
.zl-rif2026 .zetlink-wsm-login-gate__icon { background: var(--sc-grad-primary); }
/* ============================================================================
   LAPTOP COMPACT (901px–1599px) — hero + stats-strip + toggle scale-down.
   Only 900/640 breakpoints existed, so 13–15" laptops (Windows 125% scaling
   reports 1536px CSS width) were getting the full monitor-size hero.
   Same-selector overrides appended at EOF win on source order.
============================================================================ */
@media (min-width: 901px) and (max-width: 1599px) {

	/* Section + hero card — the 20px section pad + 30px hero pad were
	   stacking into one tall blank band between the nav and the title */
	.zetlink-sites-catalog.zl-rif2026 {
		padding: 6px 0 28px;
	}

	.zetlink-sites-catalog.zl-rif2026 .zl-hero.hero {
		padding: 20px 24px 26px;
	}

	.zetlink-sites-catalog.zl-rif2026 .zl-hero__title {
		font-size: clamp(1.85rem, 2.5vw, 2.3rem);
	}

	.zetlink-sites-catalog.zl-rif2026 .zl-hero__title::after {
		width: 120px;
		margin: 20px auto 18px;
	}

	.zetlink-sites-catalog.zl-rif2026 .zl-hero__desc {
		font-size: 15px;
		line-height: 1.7;
		max-width: 660px;
	}

	/* Trust row */
	.zl-rif2026 .trust-row {
		margin-top: 24px;
		gap: 12px 30px;
		font-size: 13.5px;
	}

	.zl-rif2026 .trust-item svg {
		width: 14px;
		height: 14px;
	}

	/* Stats strip */
	.zl-rif2026 .stats-strip {
		height: 58px;
		margin-top: 11px;
		margin-bottom: 12px;
	}

	.zl-rif2026 .stats-strip .stat {
		gap: 10px;
	}

	.zl-rif2026 .stats-strip .stat-icon {
		width: 31px;
		height: 31px;
	}

	.zl-rif2026 .stats-strip .stat-icon svg {
		width: 16px;
		height: 16px;
	}

	.zl-rif2026 .stats-strip .stat strong {
		font-size: 14.5px;
	}

	.zl-rif2026 .stats-strip .stat small {
		font-size: 10.5px;
	}

	.zl-rif2026 .stats-strip .stat:not(:last-child)::after {
		height: 24px;
	}

	/* Source toggle bar (All Sites / Rabbi It Firm / Marketplace) */
	.zl-rif2026 .zl-toggle-bar {
		padding: 6px 0 10px;
		margin-bottom: 16px;
	}

	.zl-rif2026 .zetlink-wsm-catalog-toggle__opt,
	.zl-rif2026 .zetlink-wsm-catalog-toggle--header a.zetlink-wsm-catalog-toggle__opt {
		padding: 0.42rem 0.9rem;
		font-size: 13.5px;
	}
}