/**
 * ============================================================================
 * 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: #404040; 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: #30405a; }
.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> now has 4 direct children when the subtitle is rendered -- icon
   span, label span, count badge span, subtitle span (see
   sites-catalog-layout.php's $zl_public_redesign branch) -- there is no
   wrapper around label+badge+subtitle to flex/stack as a group. CSS Grid
   solves this without extra markup: icon stays in column 1 (left, spanning
   both rows), label+subtitle stack in column 2 (title over description),
   and the big count number sits alone in column 3 (right, vertically
   centered across both rows) — icon/description left, count right. */
.zl-rif2026 .zetlink-sites-catalog__category-link {
	width: 100%;
	min-height: auto;
	/* sites-catalogv9.css locks display/padding/border-radius down with
	   !important on this same selector — !important always wins over a
	   plain declaration regardless of specificity or source order, so
	   without matching !important here the base file's `display: flex`
	   silently wins and every grid-column/grid-row below becomes a no-op. */
	display: grid !important;
	grid-template-columns: 44px 1fr auto;
	grid-template-rows: auto auto;
	column-gap: 14px;
	row-gap: 2px;
	align-items: center;
	padding: 14px 16px !important;
	background: #fff;
	border: 1px solid var(--sc-border);
	border-radius: 14px !important;
	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: 44px;
	height: 44px;
	border-radius: 12px;
	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)); width: 19px; height: 19px; } /* USA card: real PNG flag sized + centred inside the 44px icon tile. */ .zl-rif2026 .zetlink-cat-icon { display: flex; align-items: center; justify-content: center; } .zl-rif2026 .zetlink-cat-icon img.zl-cat-flag-img { width: 28px; height: 28px; object-fit: contain; border-radius: 3px; display: block; box-shadow: 0 1px 2px rgba(15,23,42,.18); }
.zl-rif2026 .zetlink-cat-label {
	grid-column: 2;
	grid-row: 1;
	font-size: 16.5px;
	font-weight: 500;
	color: #30405a; /* filter text er same ink */
	text-align: left;
}
.zl-rif2026 .zetlink-cat-subtitle {
	grid-column: 2;
	grid-row: 2;
	font-size: 12.5px;
	font-weight: 500;
	color: #001955;
}
/* Big bold colored number — the mockup's headline figure, pinned to the
   right edge of the card and vertically centered across both text rows. */
.zl-rif2026 .zetlink-sites-catalog__category-link .badge {
	grid-column: 3;
	grid-row: 1 / 3;
	justify-self: end;
	/* Same !important-vs-!important issue as the parent link above: v9's
	   .badge rule locks font-size/weight/padding/border-radius/color down
	   with !important, so this must match to actually take effect. */
	font-family: inherit; /* v9 er Inter override — count number-o ek font e */
	font-size: 16px !important;
	line-height: 1.15;
	font-weight: 800 !important;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	color: var(--accent-color, var(--sc-blue)) !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0;
	border-radius: 0 !important;
}

.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: #020e25; }
.zl-rif2026 .zetlink-wsm-results-toolbar__total,
.zl-rif2026 .zetlink-wsm-results-toolbar__range { color: #020e25; }

.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::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;
	/* v9 ekhane 'Outfit' dey — oi font load-i hoy na, fallback Arial dekhato.
	   inherit => root er Plus Jakarta Sans, cards/table er sathe ek font. */
	font-family: inherit;
	font-weight: 400;
    height: 40px;
    min-height: 40px;
    font-size: 1rem;
    padding: 5px 26px 5px 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; }
/* Dropdown khulle je option-list — v9 oita Poppins/#111 kore rakhe. Same ink + font. */
.zl-rif2026 .zetlink-wsm-filter-grid select option,
.zl-rif2026 .wsm-filter__input-wrap select option {
	font-family: inherit;
	color: #30405a;
	font-weight: 400;
}
.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: #30405a; /* filter text er same ink */
	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: #30405a;
}

.zl-rif2026 .zetlink-wsm-domain-link { color: #30405a; 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: #30405a;
}
.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: #30405a;
}
.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); box-shadow: 0 7px 16px rgba(14, 86, 245, .32); }

/* 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;
	}
}

/* ============================================================================
   FILTER BAR — responsive reflow (added 2026-08).
   The desktop rules earlier in this file size each filter to its content
   (flex: 0 0 auto; width: auto) with NO small-screen breakpoint, and the
   generic rules in sites-catalog-responsive.css set grid-template-columns on
   what is actually a FLEX container (a no-op) AND lack the .zl-rif2026 prefix,
   so they were out-specified by this file. These .zl-rif2026-scoped rules win
   on both specificity and source order (and use !important only where they
   must override responsive.css's own !important display:none), so the filter
   bar reflows — and stays visible — on tablet and phone. Desktop (>1024px)
   is intentionally left untouched.
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.zl-rif2026 .zetlink-wsm-filter-grid,
	.zl-rif2026 .wsm-websites-grid__filter .zetlink-wsm-filter-grid,
	.zl-rif2026 .wsm-websites-grid__filter .zetlink-wsm-filter-grid.is-open {
		display: grid !important;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
		gap: 8px !important;
		align-items: center !important;
	}
	.zl-rif2026 .zetlink-wsm-filter-grid .wsm-filter__input-wrap {
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		flex: 0 1 auto !important;
	}
	.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: none !important;
	}
	/* Bigger tap targets on touch devices. */
	.zl-rif2026 .zetlink-wsm-filter-grid select,
	.zl-rif2026 .zetlink-wsm-filter-grid .wsm-filter__input,
	.zl-rif2026 .zetlink-wsm-filter-grid .wsm-filter__input-wrap input {
		height: 40px !important;
		min-height: 40px !important;
		font-size: 13px !important;
	}
}
@media (max-width: 640px) {
	.zl-rif2026 .zetlink-wsm-filter-grid,
	.zl-rif2026 .wsm-websites-grid__filter .zetlink-wsm-filter-grid.is-open {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 6px !important;
	}
	/* COMPACT PASS (2026-08-29): 16 filters at the tablet 40px "tap target"
	   size stacked 2-up ate most of a phone screen. 34px still clears the
	   32px minimum touch size while trimming every row; smaller type,
	   tighter padding and a smaller chevron finish the shrink. */
	.zl-rif2026 .zetlink-wsm-filter-grid select,
	.zl-rif2026 .zetlink-wsm-filter-grid .wsm-filter__input,
	.zl-rif2026 .zetlink-wsm-filter-grid .wsm-filter__input-wrap input {
		height: 34px !important;
		min-height: 34px !important;
		font-size: 12px !important;
		padding: 0 22px 0 10px !important;
		border-radius: 8px !important;
		background-position: right 8px center !important;
		background-size: 8px 8px !important;
	}
	.zl-rif2026 .zetlink-wsm-filter-grid input[type="text"] { padding: 0 10px !important; }

	/* Hero + stats strip: one size down on phones. The !important flags are
	   needed only where sites-catalog-responsive.css already pins the same
	   property with !important at <=768px (hero padding, title, desc). */
	.zetlink-sites-catalog.zl-rif2026 .zl-hero.hero { padding: 18px 14px 14px !important; }
	.zetlink-sites-catalog.zl-rif2026 .zl-hero__title::after { width: 84px !important; margin: 12px auto 10px !important; }
	.zetlink-sites-catalog.zl-rif2026 .zl-hero__desc { font-size: 14px !important; line-height: 1.55 !important; }
	.zl-rif2026 .trust-row { margin-top: 12px !important; gap: 6px 16px !important; font-size: 11.5px !important; }
	.zl-rif2026 .trust-item svg { width: 12px !important; height: 12px !important; }
	.zl-rif2026 .stats-strip { margin-top: 12px !important; margin-bottom: 6px !important; }
	.zl-rif2026 .stats-strip .stat { height: 50px !important; gap: 8px !important; }
	.zl-rif2026 .stats-strip .stat-icon { width: 28px !important; height: 28px !important; }
	.zl-rif2026 .stats-strip .stat-icon svg { width: 14px !important; height: 14px !important; }
	.zl-rif2026 .stats-strip .stat strong { font-size: 14px !important; }
	.zl-rif2026 .stats-strip .stat small { font-size: 10px !important; }
}
@media (max-width: 380px) {
	.zl-rif2026 .zetlink-wsm-filter-grid,
	.zl-rif2026 .wsm-websites-grid__filter .zetlink-wsm-filter-grid.is-open {
		grid-template-columns: 1fr 1fr !important;
		gap: 5px !important;
	}
	.zl-rif2026 .zetlink-wsm-filter-grid select,
	.zl-rif2026 .zetlink-wsm-filter-grid .wsm-filter__input,
	.zl-rif2026 .zetlink-wsm-filter-grid .wsm-filter__input-wrap input {
		height: 32px !important;
		min-height: 32px !important;
		font-size: 11.5px !important;
	}
	/* 2026-08-31: upore-r @media (max-width:380px) block er closing } file e
	   chilo-i na — browser EOF-e auto-close kore dey tai eto din chokhe poreni,
	   kintu er niche kichu append korlei seta 380px block er VITORE dhuke
	   jeto (desktop e silently kaj korto na). */
}

/* ============================================================================
   RESPONSIVE FIX PASS (2026-08-31)
   1) 641-1024px: category card gulo kete jacchilo — ei file er desktop
      repeat(4,1fr) rule (0,2,0) v9/responsive er media rule (0,1,0) ke
      specificity te haray, tai tablet/boro-phone e 4 column-i theke jeto;
      tar upor responsive.css er ≤1024 block ta FLEX scroll-row er jonno lekha
      (overflow-x:auto + .nav-item width:48%) — grid er sathe mile horizontal
      clip hoto. Ekhane 2 column + overflow off.
   2) ≤768px: v9 er "RIF grid v11/v18" block table header ke 16px + 14px
      padding !important diye pin kore — responsive.css er mobile shrink
      (0,1,1) hariye jay. Ei file sobar seshe load hoy, tai v11/v18 er SAME
      compound selector + !important diye ekhane mobile size dewa.
   3) ≤768px: responsive.css ekta "Filter" toggle button dekhay, kintu ei
      redesign e filter grid sob somoy khola (uporer 1024px block) — button ta
      kichui kore na, tai hide.
============================================================================ */
@media (max-width: 1024px) {
	.zl-rif2026 .zetlink-sites-catalog__category-tabs {
		grid-template-columns: repeat(2, 1fr) !important;
		overflow-x: visible !important;
		gap: 10px !important;
		padding-bottom: 0 !important;
	}
	.zl-rif2026 .zetlink-sites-catalog__category-tabs .nav-item { width: 100% !important; }
}
@media (max-width: 768px) {
	.zl-rif2026 .zl-mobile-filter-toggle { display: none !important; }

	.zetlink-sites-catalog.zl-rif2026 .zetlink-wsm-websites-table thead th,
	.zetlink-sites-catalog.zl-rif2026 .zetlink-wsm-websites-table thead th.zl-th-price,
	.zetlink-sites-catalog.zl-rif2026 .zetlink-wsm-websites-table thead th.zl-th-special,
	.zetlink-sites-catalog.zl-rif2026 .zetlink-wsm-websites-table thead th.zl-th-action {
		font-size: 11.5px !important;
		padding: 9px 8px !important;
		line-height: 1.25 !important;
	}
	.zetlink-sites-catalog.zl-rif2026 .zetlink-wsm-websites-table thead th .zl-th-label,
	.zetlink-sites-catalog.zl-rif2026 .zetlink-wsm-websites-table thead th.zl-th-action .zl-th-label,
	.zetlink-sites-catalog.zl-rif2026 .zetlink-wsm-websites-table thead th.zl-th-price .zl-th-top,
	.zetlink-sites-catalog.zl-rif2026 .zetlink-wsm-websites-table thead th.zl-th-special .zl-th-top,
	.zetlink-sites-catalog.zl-rif2026 .zetlink-wsm-websites-table thead th.zl-th-action .zl-th-top,
	.zetlink-sites-catalog.zl-rif2026 .zl-th-top { font-size: 10.5px !important; }
	.zetlink-sites-catalog.zl-rif2026 .zl-th-brand { height: 13px !important; line-height: 13px !important; margin-bottom: 2px !important; }
	.zetlink-sites-catalog.zl-rif2026 .zl-th-logo,
	.zetlink-sites-catalog.zl-rif2026 .zl-th--two .zl-th-logo { height: 10px !important; }
	.zetlink-sites-catalog.zl-rif2026 .zl-th-logo--as { height: 11px !important; }
	.zetlink-sites-catalog.zl-rif2026 .zetlink-wsm-websites-table tbody td {
		padding: 8px 8px !important;
		font-size: 11.5px !important;
	}
	.zetlink-sites-catalog.zl-rif2026 .zl-traffic .zl-spark { width: 54px !important; height: 18px !important; }
	.zetlink-sites-catalog.zl-rif2026 .zl-traffic__body b { font-size: 0.78rem !important; }
	.zetlink-sites-catalog.zl-rif2026 .zl-countries .zl-flag-list img.emoji { width: 20px !important; height: 16px !important; }
	.zetlink-sites-catalog.zl-rif2026 .zl-flag-list .zl-pct { font-size: 11.5px !important; }
}
@media (max-width: 480px) {
	.zl-rif2026 .zetlink-sites-catalog__category-tabs {
		grid-template-columns: 1fr !important;
	}
}

/* Mobile blank space, price font and filter size fix */
@media (max-width: 767.98px) {
	html body.page-template-page-templateswebsites-php .header + .main,
	html body.page-template-page-templateswebsites-php #main-content.wrapper,
	html body.page-template-page-templateswebsites-php #main-content.wrapper > .container,
	html body.page-template-page-templateswebsites-php #main-content.wrapper > .container > .row,
	html body.page-template-page-templateswebsites-php .zetlink-sites-catalog.zl-rif2026 {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}

	html body.page-template-page-templateswebsites-php
	.zl-rif2026
	.zetlink-wsm-filter-grid {
		gap: 10px !important;
	}

	html body.page-template-page-templateswebsites-php
	.zl-rif2026
	.zetlink-wsm-filter-grid select,
	html body.page-template-page-templateswebsites-php
	.zl-rif2026
	.zetlink-wsm-filter-grid .wsm-filter__input,
	html body.page-template-page-templateswebsites-php
	.zl-rif2026
	.zetlink-wsm-filter-grid .wsm-filter__input-wrap input {
		width: 100% !important;
		height: 52px !important;
		min-height: 52px !important;
		font-family: "Plus Jakarta Sans", Inter, sans-serif !important;
		font-size: 13px !important;
		font-weight: 500 !important;
		line-height: 1.3 !important;
		letter-spacing: -0.01em !important;
		border-radius: 12px !important;
	}

	html body.page-template-page-templateswebsites-php
	.zl-rif2026
	.wsm-filter__input-wrap--budget
	.wsm-filter__input--budget::placeholder {
		font-family: "Plus Jakarta Sans", Inter, sans-serif !important;
		font-size: 13px !important;
		font-weight: 500 !important;
		line-height: 1.3 !important;
		letter-spacing: -0.01em !important;
		color: #374151 !important;
		opacity: 1 !important;
	}
}