/* ==========================================================================
   9wickets — Agent card grid + contact modal  ([w9_agent_list])
   --------------------------------------------------------------------------
   Restyled entirely in ninew5's light cream/gold "s5" premium language (see
   w9-site5.php / w9-vk/agents-cards.css) — NOT the dark near-black/gold
   "luxe" palette this component used on the reference site. Structure and
   interaction (portalled modal, copy-to-clipboard, responsive stack,
   client-side search) match the reference; every colour/radius/shadow token
   below reuses this site's existing --s5-* custom properties.
   Markup: wp-content/mu-plugins/w9-agents/agent-shortcode.php
   Behaviour: agent-list.js
   ========================================================================== */

/* ---------- grid ----------
   flexbox + wrap + justify-content:center, NOT CSS grid — grid's `1fr`
   columns stretch every card (including a lone result on a filtered/empty
   search or a sparse tier like Admin's single agent) to fill the full
   column width, and an incomplete last row stays left-aligned with grid
   (grid has no built-in way to center leftover items in a partial row).
   Flexbox centers naturally in both cases: `.w9a-card` gets a flex-basis
   instead of a stretchy fr unit, so cards keep a sane width and any
   partial final row (or a single-card result) centers instead of
   stretching or hugging the left edge. */
.w9a-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}
.w9a-card { flex: 1 1 320px; max-width: 380px; }

.w9a-empty-msg {
	text-align: center;
	padding: 40px 24px;
	font-family: var(--s5-bn);
	font-size: 15px;
	color: var(--s5-mid);
	background: #FFFFFF;
	border-radius: 22px;
	box-shadow: var(--s5-shadow);
}

/* ---------- card — TRUE PILL treatment, same design family as the
   homepage's .vk-sp-pill / .vk-pp-pill (w9-vk/social-pills.css,
   platform-pills.css): translucent gradient glass, backdrop blur, a soft
   brand-tinted ambient glow behind the card, refined lift-on-hover.
   border-radius:999px on a short, wide box is clamped per-corner to
   min(width,height)/2 — with this card's ~150-180px height that resolves
   to genuine stadium/capsule end-caps (same silhouette math as
   .vk-sp-pill), not just "rounded corners". Extra horizontal padding on
   .w9a-main (below) keeps content clear of the curve. ---------- */
.w9a-card {
	position: relative;
	background: linear-gradient(135deg, rgba(255, 255, 255, .95) 0%, rgba(255, 252, 240, .90) 100%);
	border: 1px solid rgba(30, 27, 20, .08);
	border-radius: 999px;
	box-shadow: 0 8px 22px rgba(30, 27, 20, .07), 0 1px 0 rgba(255, 255, 255, .7) inset;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	overflow: hidden;
	isolation: isolate;
	transition: transform .4s cubic-bezier(.2, .7, .15, 1), box-shadow .4s ease, border-color .4s ease;
}
/* brand-tinted ambient glow, sits behind the card — same pattern as .vk-sp-pill::before */
.w9a-card::before {
	content: "";
	position: absolute;
	inset: -35% -10%;
	background: radial-gradient(closest-side, var(--s5-gold-2), transparent 72%);
	opacity: .06;
	z-index: -1;
	filter: blur(26px);
	pointer-events: none;
	transition: opacity .5s ease;
}
body:not(.w9a-modal-open) .w9a-card:hover {
	transform: translateY(-4px);
	border-color: var(--s5-line-gold);
	box-shadow: 0 16px 38px -6px rgba(200, 134, 11, .22), 0 1px 0 rgba(255, 255, 255, .8) inset;
}
body:not(.w9a-modal-open) .w9a-card:hover::before { opacity: .16; }
.w9a-card.w9a-hide { display: none !important; }

/* ==========================================================================
   AGENT PILL REDESIGN — "Yellow Pill" (2026-07) — deliberately different
   colour combination from the white/cream pill above: solid gold/yellow
   gradient AS the card body (not just an accent), navy as the guaranteed-
   contrast ink for every text/icon element on top of it (the same
   navy-on-gold pairing already proven on every CTA button sitewide), white
   used only as small separating rings/chips so avatar, badge and tag stay
   legible regardless of exactly how yellow the surrounding card reads.
   Supersedes every color declared in `.w9a-card`/`.w9a-photo`/
   `.w9a-verified-badge`/`.w9a-group`/`.w9a-rating`/`.w9a-toggle` above —
   loads after on purpose (last-in-file wins the cascade at equal
   specificity, same "supersedes" pattern used across this codebase) rather
   than editing those rules in place, so the earlier block stays on record
   as the previous look. Structure/markup: unchanged.
   ========================================================================== */
.w9a-card {
	background: linear-gradient(135deg, #FFEC80 0%, #F9E900 55%, #F3D900 100%) !important;
	border-color: rgba(8, 65, 92, .16) !important;
	box-shadow: 0 8px 22px rgba(8, 65, 92, .10), 0 1px 0 rgba(255, 255, 255, .5) inset !important;
}
body:not(.w9a-modal-open) .w9a-card:hover {
	border-color: rgba(8, 65, 92, .34) !important;
	box-shadow: 0 16px 34px -6px rgba(8, 65, 92, .28), 0 1px 0 rgba(255, 255, 255, .6) inset !important;
}
/* !important throughout this sub-block: the later "TIER COLOUR FAMILIES"
   block below has higher-specificity `.w9a-card .w9a-photo` / `.w9a-card
   .w9a-group` / `.w9a-card .w9a-rating` selectors (2 classes vs 1) that
   would otherwise still win the cascade and reintroduce tier-tinted rings/
   chips/stars — which, for the ~99% of cards in the gold "master" tier,
   means gold-on-gold-card invisibility right back again. !important forces
   these fixed navy/white values to win regardless of that later rule's
   higher specificity. */
.w9a-photo { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px rgba(8, 65, 92, .30) !important; }
.w9a-verified-badge { background: #08415C !important; color: #FFFFFF !important; box-shadow: 0 0 0 2px #FFFFFF !important; }
.w9a-name { color: #08415C !important; }
.w9a-group {
	background: rgba(255, 255, 255, .82) !important;
	color: #08415C !important;
	border: 1px solid rgba(8, 65, 92, .12);
}
.w9a-rating { color: #08415C !important; }
.w9a-idrow { color: rgba(8, 65, 92, .62); }
.w9a-idlabel { color: rgba(8, 65, 92, .8); }
.w9a-toggle {
	background: rgba(255, 255, 255, .55) !important;
	border-color: rgba(8, 65, 92, .18) !important;
	color: #08415C !important;
}
/* `body` prefix bumps specificity above the later tier block's
   `.w9a-card .w9a-toggle:hover` (both !important, so specificity breaks
   the tie — without the extra element selector this loses on a pure
   class-count tie despite loading first). */
body .w9a-card .w9a-toggle:hover,
.w9a-toggle:hover { background: #08415C !important; color: #F9E900 !important; border-color: transparent !important; }

.w9a-main {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px 12px 14px;
}

/* ---------- photo / avatar — fully circular, reinforces the pill/capsule
   identity the same way .vk-sp-pill__icon's circle chip does. ---------- */
.w9a-photo-wrap { position: relative; flex-shrink: 0; }
.w9a-photo {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px rgba(200, 134, 11, .28);
}
.w9a-photo-placeholder span {
	font-family: var(--s5-en);
	font-size: 18px;
	font-weight: 700;
	color: #FFFFFF;
}
.w9a-avatar-v1 { background: linear-gradient(135deg, #8C92AC 0%, #08415C 100%); }
.w9a-avatar-v2 { background: linear-gradient(135deg, #C9A6FF 0%, #7C5CFC 100%); }
.w9a-avatar-v3 { background: linear-gradient(135deg, #7EE8D6 0%, #12A594 100%); }
.w9a-avatar-v4 { background: linear-gradient(135deg, #FFB4D0 0%, #E8548C 100%); }
.w9a-avatar-v5 { background: linear-gradient(135deg, #B7E88A 0%, #4C9A2A 100%); }

.w9a-verified-badge {
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--s5-grad);
	color: #08415C;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px #FFFFFF;
}

/* ---------- info ---------- */
.w9a-info { flex: 1 1 auto; min-width: 0; }
.w9a-name-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
/* !important: .w9a-name is an <h3> — Elementor's global Kit CSS
   (.elementor-kit-5 h3, specificity 0,1,1) beats a single bare class
   (0,1,0) and was silently forcing 22px regardless of the value here. Same
   kit-vs-bare-element bug already hit on .w9a-toggle/.w9a-search-input/etc. */
.w9a-name {
	margin: 0 !important;
	font-family: var(--s5-en) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	color: var(--s5-ink) !important;
	line-height: 1.25 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.w9a-crown { font-size: 10px; line-height: 1; }

/* ---------- meta row: group + rating + ID, condensed onto one line ----------
   All three were separate block-level rows (each with its own margin-top),
   stacking the card to 4 lines total. Switched to inline-flex (inline-level,
   so they flow together after the block-level .w9a-name-row instead of each
   forcing its own new line) with a shared middot separator — same "combine
   into one slim meta line" technique used for the hero's .s5-herometa. */
.w9a-group,
.w9a-rating,
.w9a-idrow {
	display: inline-flex;
	align-items: center;
	margin: 3px 0 0;
	vertical-align: middle;
}
.w9a-rating,
.w9a-idrow { margin-left: 8px; }
.w9a-rating::before,
.w9a-idrow::before {
	content: '';
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--s5-line-gold);
	margin-right: 8px;
	flex: none;
}
.w9a-group {
	padding: 1px 8px;
	border-radius: 999px;
	background: rgba(200, 134, 11, .12);
	color: var(--s5-gold-3);
	font-family: var(--s5-en);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.w9a-rating {
	color: var(--s5-gold);
	font-size: 10.5px;
	letter-spacing: 1px;
	white-space: nowrap;
}
.w9a-idrow {
	font-family: var(--s5-en);
	font-size: 10.5px;
	color: var(--s5-dim);
	white-space: nowrap;
}
.w9a-idlabel { font-weight: 600; color: var(--s5-mid); margin-right: 3px; }

/* ---------- contact toggle ---------- */
/* !important throughout: beats Elementor's global Kit button rule
   (`.elementor-kit-5 button`), which outranks a single bare class on
   specificity and otherwise paints every plain <button> here black. */
.w9a-toggle {
	flex-shrink: 0;
	width: 32px !important;
	height: 32px !important;
	margin-left: auto;
	margin-top: 2px;
	border-radius: 999px !important;
	border: 1px solid var(--s5-line) !important;
	background: rgba(30, 27, 20, .03) !important;
	color: var(--s5-ink) !important;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.w9a-toggle:hover { background: var(--s5-grad) !important; color: #08415C !important; border-color: transparent !important; }
.w9a-toggle svg { transition: transform .3s ease; }
.w9a-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---------- contact modal (portalled to <body> by agent-list.js) —
   refreshed to carry the card redesign's pill language in: same glass-card
   gradient body as .w9a-card, a gold gradient header band (echoes the
   avatar's gradient ring) instead of a flat rule, fully-rounded (999px)
   contact-item rows instead of 14px rounded-rect rows. Not itself a single
   capsule shape (too much content — WA/Messenger rows, two action buttons)
   but every internal component now reads as part of the same pill family. */
.w9a-contact-hidden { display: none; }
.w9a-contact {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(.96);
	width: min(420px, calc(100vw - 32px));
	max-height: 85vh;
	overflow-y: auto;
	background: linear-gradient(180deg, #FFFCF2 0%, #FFFFFF 100%);
	border: 1px solid var(--s5-line-gold);
	border-radius: 32px;
	box-shadow: 0 30px 70px rgba(30, 27, 20, .30);
	padding: 0 22px 22px;
	z-index: 99999;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease;
}
.w9a-contact.w9a-contact-open {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
	pointer-events: auto;
}
.w9a-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(20, 16, 8, .45);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	z-index: 99998;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}
.w9a-modal-backdrop.w9a-backdrop-open { opacity: 1; pointer-events: auto; }
body.w9a-modal-open { overflow-y: hidden; }

.w9a-modal-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 -22px 16px;
	padding: 18px 22px 16px;
	border-radius: 32px 32px 0 0;
	background: radial-gradient(120% 140% at 0% 0%, rgba(255, 199, 44, .22), transparent 65%), rgba(255, 199, 44, .07);
	border-bottom: 1px solid var(--s5-line-gold);
}
.w9a-modal-photo { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px rgba(200, 134, 11, .28); }
.w9a-modal-id { min-width: 0; }
.w9a-modal-id b { display: block; font-family: var(--s5-en); font-size: 15px; color: var(--s5-ink); }
.w9a-modal-id span { display: block; font-family: var(--s5-en); font-size: 12px; color: var(--s5-dim); margin-top: 2px; }
.w9a-modal-close {
	margin-left: auto;
	flex-shrink: 0;
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	border: 0 !important;
	background: rgba(239, 68, 68, .10) !important;
	color: #ef4444 !important;
	font-size: 18px;
	line-height: 1;
	padding: 0 !important;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .3s ease, color .3s ease;
}
.w9a-modal-close:hover { background: #ef4444 !important; color: #FFFFFF !important; }

.w9a-contact-col { margin-bottom: 14px; }
.w9a-contact-col:last-child { margin-bottom: 0; }
.w9a-col-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-family: var(--s5-en);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.w9a-col-wa .w9a-col-head { color: #10b981; }
.w9a-col-msn .w9a-col-head { color: var(--s5-gold-3); }

.w9a-contact-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 8px 10px 18px;
	background: #FFFFFF;
	border: 1px solid var(--s5-line);
	border-radius: 999px;
	margin-bottom: 8px;
}
.w9a-contact-item:last-child { margin-bottom: 0; }
.w9a-contact-number {
	font-family: var(--s5-en);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--s5-ink);
	word-break: break-all;
}
.w9a-contact-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.w9a-copy-btn {
	width: 30px !important;
	height: 30px !important;
	border-radius: 999px !important;
	border: 1px solid var(--s5-line) !important;
	background: #FFFFFF !important;
	color: var(--s5-mid) !important;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.w9a-copy-btn:hover,
.w9a-copy-btn.w9a-copied { background: var(--s5-grad) !important; color: #08415C !important; border-color: transparent !important; }
.w9a-msg-btn {
	padding: 8px 14px;
	border-radius: 999px;
	font-family: var(--s5-en);
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.w9a-msg-wa { background: #10b981; color: #FFFFFF; }
.w9a-msg-wa:hover { filter: brightness(1.06); transform: translateY(-2px); color: #FFFFFF; }
.w9a-msg-msn { background: var(--s5-grad); color: #08415C; box-shadow: var(--s5-glow); }
.w9a-msg-msn:hover { box-shadow: var(--s5-glow-hi); transform: translateY(-2px); color: #08415C; }

/* ---------- search bar — "premium" pass ----------
   Previous version was a bare white pill with a tiny grey magnifying-glass
   glyph floating alone at 340px max-width — functionally fine but visually
   reads as an unstyled browser input at a glance (this is the "search looks
   broken/cheap" complaint). Redesigned as: a wide glass-pill input with the
   icon promoted into its own gold gradient chip (same chip language as
   .w9a-toggle/.s5-chip), a live agent-count badge for context, and a clear
   (×) button that appears once text is typed (wired in agent-list.js). */
.w9a-listbar {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	flex-wrap: wrap;
	margin: 34px 0 28px;
}
.w9a-searchwrap { position: relative; flex: 1 1 440px; max-width: 560px; }
.w9a-search-ic {
	position: absolute;
	left: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--s5-grad);
	color: #1A0F02;
	box-shadow: var(--s5-glow);
	pointer-events: none;
	z-index: 1;
}
/* !important throughout: an `input[type="search"]` (or similar tag+attribute
   selector) somewhere in the Elementor/theme/HFE cascade outranks a single
   bare class on specificity (element+attribute = (0,1,1) beats class-only
   (0,1,0)) and was silently overriding padding to 8px 16px — the exact same
   class of kit-vs-bare-element bug already fixed on .w9a-toggle/.w9a-copy-btn/
   .w9a-modal-close above, same fix. */
.w9a-search-input {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 15px 50px 15px 58px !important;
	border-radius: 999px !important;
	border: 1px solid var(--s5-line) !important;
	background: linear-gradient(135deg, #FFFFFF 0%, #FFFCF2 100%) !important;
	box-shadow: 0 10px 28px rgba(30, 27, 20, .08), 0 1px 0 rgba(255, 255, 255, .8) inset !important;
	font-family: var(--s5-bn) !important;
	font-size: 15px !important;
	color: var(--s5-ink) !important;
	transition: border-color .3s ease, box-shadow .3s ease;
	-webkit-appearance: none;
	appearance: none;
}
.w9a-search-input::-webkit-search-cancel-button,
.w9a-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.w9a-search-input:focus {
	outline: none !important;
	border-color: var(--s5-gold) !important;
	box-shadow: 0 0 0 5px rgba(255, 199, 44, .16), var(--s5-glow) !important;
}
.w9a-search-input::placeholder { color: var(--s5-dim); }

.w9a-search-clear {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px !important;
	height: 32px !important;
	border-radius: 999px !important;
	border: 1px solid var(--s5-line) !important;
	background: #FFFFFF !important;
	color: var(--s5-mid) !important;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.w9a-search-clear[hidden] { display: none !important; }
.w9a-search-clear:hover { background: #ef4444 !important; color: #FFFFFF !important; border-color: transparent !important; }

.w9a-search-count {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	border-radius: 999px;
	background: #FFFFFF;
	box-shadow: var(--s5-shadow);
	font-family: var(--s5-bn);
	font-size: 13.5px;
	color: var(--s5-mid);
	white-space: nowrap;
}
.w9a-search-count b {
	font-family: var(--s5-en);
	font-size: 14.5px;
	font-weight: 800;
	color: var(--s5-gold-3);
}

.w9a-search-empty {
	display: none;
	text-align: center;
	padding: 46px 24px;
	font-family: var(--s5-bn);
	font-size: 15px;
	color: var(--s5-mid);
	background: #FFFFFF;
	border-radius: 22px;
	box-shadow: var(--s5-shadow);
}
.w9a-search-empty.w9a-show { display: block; }

/* ---------- header search suggestion dropdown ----------
   The dropdown itself (.search-suggestions/.suggestions-list/.suggestion-item/
   .suggestion-thumb/.suggestion-info/...) is already styled light/gold in
   wp-content/mu-plugins/w9-vk/wickets-home.css ("SEARCH SUGGESTIONS DROPDOWN
   — premium light redesign" block) — that file ships the reference site's
   CSS verbatim and happened to already carry this component, unused, ahead
   of agent-search.js wiring it up. The only gap: a placeholder avatar for
   agents without a photo, reusing this file's .w9a-avatar-vN gradients but
   sized to the dropdown's 40x40 .suggestion-thumb box instead of the card
   grid's fixed 42px circle (agent-search.js). ---------- */
.suggestion-thumb .w9a-photo-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
}
.suggestion-thumb .w9a-photo-placeholder span { font-size: 15px; }

/* ==========================================================================
   TIER COLOUR FAMILIES (2026-07 "premium redevelop" pass) — each official
   tier gets its own accent from the site's extended palette instead of
   every card reading the same flat gold: gold=Master, teal=Super,
   coral=Admin, violet=Sub Admin. Same four hues already used for the FAQ
   accordion cycle and the Gaming Platform mirror-link pills on the home
   page, so this list reads as part of the same design system rather than
   inventing a new palette. Modifier classes (`.w9a-card--{tier}`,
   `.w9a-contact--{tier}`) are purely additive — added by
   agent-shortcode.php alongside the existing `.w9a-card`/`.w9a-contact`
   classes, nothing renamed — so agent-list.js's selectors and the search
   filter are completely unaffected.
   ========================================================================== */
.w9a-card--master { --w9a-c: #F9E900; --w9a-c2: #E6D200; --w9a-ink: #8A7500; --w9a-tint: rgba(230,210,0,.14); --w9a-tint-30: rgba(230,210,0,.40); }
.w9a-card--super  { --w9a-c: #4FD8E3; --w9a-c2: #1F8E9A; --w9a-ink: #0E6570; --w9a-tint: rgba(31,142,154,.14); --w9a-tint-30: rgba(31,142,154,.38); }
.w9a-card--admin  { --w9a-c: #FF9169; --w9a-c2: #E85A38; --w9a-ink: #B23D22; --w9a-tint: rgba(232,90,56,.14); --w9a-tint-30: rgba(232,90,56,.38); }
.w9a-card--subadmin { --w9a-c: #B49CF0; --w9a-c2: #7B5FD1; --w9a-ink: #5A3FB0; --w9a-tint: rgba(123,95,209,.14); --w9a-tint-30: rgba(123,95,209,.40); }

.w9a-card::before { background: radial-gradient(closest-side, var(--w9a-c2, var(--s5-gold-2)), transparent 72%); }
body:not(.w9a-modal-open) .w9a-card:hover {
	border-color: var(--w9a-tint-30, var(--s5-line-gold));
	box-shadow: 0 16px 38px -6px var(--w9a-tint-30, rgba(200,134,11,.22)), 0 1px 0 rgba(255,255,255,.8) inset;
}
.w9a-card .w9a-photo { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--w9a-tint-30, rgba(200,134,11,.28)); }
.w9a-card .w9a-verified-badge { background: linear-gradient(135deg, var(--w9a-c, #F9E900), var(--w9a-c2, #E6D200)); color: var(--w9a-ink, #08415C); }
.w9a-card .w9a-group { background: var(--w9a-tint, rgba(200,134,11,.12)); color: var(--w9a-ink, var(--s5-gold-3)); }
.w9a-card .w9a-rating { color: var(--w9a-c2, var(--s5-gold)); }
.w9a-card .w9a-toggle:hover { background: linear-gradient(135deg, var(--w9a-c, #F9E900), var(--w9a-c2, #E6D200)) !important; color: var(--w9a-ink, #08415C) !important; }

/* contact modal — same tier tint on the header band + Messenger accent +
   button, so the popover visually "belongs" to the card that opened it */
.w9a-contact--master .w9a-modal-header,
.w9a-contact--super .w9a-modal-header,
.w9a-contact--admin .w9a-modal-header,
.w9a-contact--subadmin .w9a-modal-header {
	background: radial-gradient(120% 140% at 0% 0%, var(--w9a-tint-30), transparent 65%), var(--w9a-tint);
	border-bottom-color: var(--w9a-tint-30);
}
.w9a-contact--master, .w9a-contact--super, .w9a-contact--admin, .w9a-contact--subadmin { border-color: var(--w9a-tint-30) !important; }
.w9a-contact--master .w9a-photo, .w9a-contact--super .w9a-photo, .w9a-contact--admin .w9a-photo, .w9a-contact--subadmin .w9a-photo {
	box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--w9a-tint-30);
}
.w9a-contact--master .w9a-col-msn .w9a-col-head,
.w9a-contact--super .w9a-col-msn .w9a-col-head,
.w9a-contact--admin .w9a-col-msn .w9a-col-head,
.w9a-contact--subadmin .w9a-col-msn .w9a-col-head { color: var(--w9a-ink); }
.w9a-contact--master .w9a-msg-msn, .w9a-contact--super .w9a-msg-msn, .w9a-contact--admin .w9a-msg-msn, .w9a-contact--subadmin .w9a-msg-msn {
	background: linear-gradient(135deg, var(--w9a-c), var(--w9a-c2)) !important;
	color: var(--w9a-ink) !important;
	box-shadow: 0 8px 20px var(--w9a-tint-30);
}
.w9a-contact--master .w9a-copy-btn:hover, .w9a-contact--master .w9a-copy-btn.w9a-copied,
.w9a-contact--super .w9a-copy-btn:hover, .w9a-contact--super .w9a-copy-btn.w9a-copied,
.w9a-contact--admin .w9a-copy-btn:hover, .w9a-contact--admin .w9a-copy-btn.w9a-copied,
.w9a-contact--subadmin .w9a-copy-btn:hover, .w9a-contact--subadmin .w9a-copy-btn.w9a-copied {
	background: linear-gradient(135deg, var(--w9a-c), var(--w9a-c2)) !important;
	color: var(--w9a-ink) !important;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
	.w9a-grid { gap: 12px; }
	.w9a-card { flex-basis: 260px; max-width: 340px; }
}
@media (max-width: 640px) {
	.w9a-grid { gap: 14px; }
	.w9a-card { flex-basis: 100%; max-width: 100%; }
	.w9a-main { padding: 17px 24px 17px 19px; gap: 12px; }
	.w9a-photo { width: 48px; height: 48px; }
	.w9a-listbar { flex-direction: column; align-items: stretch; margin: 24px 0 20px; }
	.w9a-searchwrap { flex-basis: auto; max-width: none; }
	/* was align-self:flex-start — left the "X agents found" count pill
	   hugging the left edge under the (now full-width, centered-content)
	   search input. Site-wide mobile-centering pass (2026-07): centered
	   like every other standalone element in this column. */
	.w9a-search-count { align-self: center; }
}

/* ---------- SLIM MOBILE PILL (2026-07-24 revision) ----------
   The previous pass restacked .w9a-main into a centered COLUMN (avatar on
   top, name + meta stacked underneath) — with 78 real agents in the grid,
   that reads tall and heavy on a phone (~150px/card, a lot of scrolling)
   and was reported as "looking poor, make it slim and premium". Reverted
   to a horizontal row — same silhouette as the desktop card, just tuned
   smaller — which is both objectively shorter AND the more premium-reading
   pattern for a dense verified-contact list (this is the same row-item
   language banking/wallet apps use for account lists, not a compromise).
   Alignment is still deliberate, just row-level (avatar + text vertically
   centered together as one unit, chevron trailing) rather than every piece
   individually centered — a slim identity row reads as more "premium" than
   a tall centered stack, not less, once it actually fits the content. */
@media (max-width: 767px) {
	.w9a-card { border-radius: 999px; }
	.w9a-main {
		padding: 8px 12px 8px 8px;
		gap: 10px;
	}
	.w9a-photo,
	.w9a-photo-placeholder { width: 38px; height: 38px; }
	.w9a-photo-placeholder span { font-size: 15px; }
	.w9a-verified-badge { width: 13px; height: 13px; right: -1px; bottom: -1px; }
	.w9a-verified-badge svg { width: 8px; height: 8px; }
	.w9a-info { min-width: 0; }
	.w9a-name-row { justify-content: flex-start; }
	.w9a-name { font-size: 12.5px !important; }
	.w9a-group { font-size: 8px; padding: 1px 6px; }
	.w9a-rating,
	.w9a-idrow { font-size: 9.5px; }
	.w9a-toggle {
		width: 26px !important;
		height: 26px !important;
		margin: 0 0 0 4px;
	}
	.w9a-toggle svg { width: 11px; height: 11px; }
}
@media (max-width: 360px) {
	/* narrowest common phones (iPhone SE class) — the meta row (badge ·
	   rating · ID) can still wrap to a second line at this width with a
	   long name; let it, rather than shrinking text further past the point
	   of comfortable reading. */
	.w9a-name-row { flex-wrap: wrap; }
}