/* ==========================================================================
   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 ---------- */
.w9a-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 14px;
}

.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; }

.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, #FFD34D 0%, #C8860B 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: #1A1813;
	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: #1A1813 !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: #1A1813 !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: #1A1813; box-shadow: var(--s5-glow); }
.w9a-msg-msn:hover { box-shadow: var(--s5-glow-hi); transform: translateY(-2px); color: #1A1813; }

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

/* ---------- responsive ---------- */
@media (max-width: 900px) {
	.w9a-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
}
@media (max-width: 640px) {
	.w9a-grid { grid-template-columns: 1fr; gap: 14px; }
	.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; }
}