/* ==========================================================================
   9wickets — Help Desk pages (কাস্টমার সার্ভিস / অভিযোগ / নতুন একাউন্ট)
   --------------------------------------------------------------------------
   Two new, deliberately isolated components layered on top of the existing
   "s5" light cream/gold system (w9-site5.php) — reuses --s5-* custom
   properties for colour/shadow/typography so these pages match the rest of
   the site, but ships its own class prefix (.hd-*) so nothing here can leak
   into or be leaked into by unrelated s5 selectors.

   1. .hd-chan / .hd-chan-grid — contact-channel "pill card" grid (WhatsApp,
      Telegram, Facebook, Email, YouTube, Instagram, phone hotline). Visual
      vocabulary borrowed from agent-list.css's .w9a-card + the homepage's
      .vk-sp-pill (icon circle / status chip / title / detail / sub / arrow),
      restyled with s5 tokens instead of vk's dark palette.
   2. .hd-route / .hd-route-grid — the 4-card "which route" grid on the
      New Account page, gradient-themed per card using the SAME gradient
      values already established for agent avatars (agent-list.css
      .w9a-avatar-v1..v5) rather than inventing new brand hues.

   Loaded by: wp-content/mu-plugins/w9-help-desk.php
   Markup:    claudedocs/build/build_help_desk_pages.php
   ========================================================================== */

/* ---------- contact channel cards ---------- */
.hd-chan-grid {
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 18px;
}
/* ---------- SMART PILL REDESIGN ----------
   Was a tall rectangular card (icon 54px, title/status/detail/sub across 3
   stacked lines, 20-22px padding, 24px radius). Condensed onto a true pill
   silhouette: detail + sub merge onto one middot-separated line (same
   technique as .w9a-idrow's meta-row condensing), icon/arrow shrink, radius
   goes to 999px. "Smart" = the merge keeps every piece of information (no
   content dropped), just laid out more efficiently. */
.hd-chan {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 18px 10px 10px;
	background: #FFFFFF;
	border: 1px solid var(--s5-line);
	border-radius: 999px;
	box-shadow: var(--s5-shadow);
	text-decoration: none;
	transition: transform .4s cubic-bezier(.2,.7,.15,1), box-shadow .4s ease, border-color .4s ease;
}
.hd-chan:hover,
.hd-chan:focus-visible {
	transform: translateY(-3px);
	border-color: var(--s5-line-gold);
	box-shadow: 0 16px 36px rgba(200,134,11,.20);
}
.hd-chan--primary {
	grid-column: span 2;
	background: linear-gradient(135deg, #FFFDF5 0%, #FFF7DE 100%);
	border-color: var(--s5-line-gold);
}
@media (max-width: 900px) { .hd-chan--primary { grid-column: span 1; } }

.hd-chan__icon {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	font-size: 14px;
	background: var(--hd-brand, var(--s5-grad));
	box-shadow: 0 8px 16px -6px var(--hd-brand, rgba(200,134,11,.5));
}
.hd-chan__body { flex: 1 1 auto; min-width: 0; }
.hd-chan__top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hd-chan__title { font-family: var(--s5-en); font-size: 12.5px; font-weight: 700; color: var(--s5-ink); }
.hd-chan__status {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba(16,185,129,.12);
	color: #0f9d6e;
	font-family: var(--s5-en);
	font-size: 8.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	white-space: nowrap;
}
.hd-chan__status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #10b981; }

/* detail + sub merged onto one line (was two stacked lines) */
.hd-chan__detail {
	display: inline-flex;
	align-items: center;
	margin-top: 2px;
	font-family: var(--s5-en);
	font-size: 11px;
	font-weight: 600;
	color: var(--s5-mid);
}
.hd-chan__sub {
	display: inline-flex;
	align-items: center;
	margin-top: 2px;
	font-family: var(--s5-bn);
	font-size: 10.5px;
	color: var(--s5-dim);
	line-height: 1.3;
}
.hd-chan__sub::before {
	content: '';
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--s5-line-gold);
	margin: 0 6px;
	flex: none;
}
.hd-chan__arrow {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(30,27,20,.05);
	border: 1px solid var(--s5-line);
	color: var(--s5-ink);
	transition: transform .4s cubic-bezier(.2,.7,.15,1), background .4s ease, color .4s ease, border-color .4s ease;
}
.hd-chan__arrow svg { width: 12px; height: 12px; display: block; }
.hd-chan:hover .hd-chan__arrow,
.hd-chan:focus-visible .hd-chan__arrow {
	background: var(--hd-brand, var(--s5-grad));
	color: #FFFFFF;
	border-color: transparent;
	transform: translateX(4px);
}

.hd-chan--wa   { --hd-brand: #25D366; }
.hd-chan--tg   { --hd-brand: #229ED9; }
.hd-chan--msgr { --hd-brand: #00B2FF; }
.hd-chan--fb   { --hd-brand: #1877F2; }
.hd-chan--mail { --hd-brand: #C8860B; }
.hd-chan--yt   { --hd-brand: #FF0000; }
.hd-chan--ig   { --hd-brand: #E1306C; }
.hd-chan--tel  { --hd-brand: #7C5CFC; }

@media (max-width: 640px) {
	.hd-chan-grid { grid-template-columns: 1fr; }
	.hd-chan { padding: 16px 18px; gap: 13px; }
	.hd-chan__icon { width: 46px; height: 46px; font-size: 17px; }
}

/* ---------- MOBILE CENTERING PASS (2026-07) ----------
   .hd-chan stays a horizontal pill row (icon / title+detail / arrow) on
   mobile — collapsing it to a centered vertical stack would break the
   compact "scannable contact list" pill this component was explicitly
   redesigned as (see the "SMART PILL REDESIGN" note above), and orphan the
   icon/arrow away from the text. Instead the TEXT COLUMN centers within
   its own flexible middle slot between the icon (fixed left) and the
   arrow (fixed right) — the "not left-aligned text next to a left-aligned
   icon" anti-pattern this pass targets is fixed without discarding the
   row layout. Desktop (>767px) is untouched. */
@media (max-width: 767px) {
	.hd-chan__body { text-align: center; }
	.hd-chan__top { justify-content: center; }
}

/* ---------- trust stat strip (4-up variant of the existing .s5-trust) ---------- */
.s5-trust--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .s5-trust--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .s5-trust--4 { grid-template-columns: 1fr; } }

/* MOBILE CENTERING PASS (2026-07) — the base .s5-trust li rule
   (w9-site5.php) is a left-aligned row: icon top-aligned on the left,
   "number + label" text block on the right. .s5-trust--4 only appears on
   the Customer Service page (this modifier class is defined here, not in
   the shared base file), so it's safe to restack it as a centered column
   on mobile without touching plain .s5-trust usage elsewhere on the site. */
@media (max-width: 767px) {
	.s5-trust--4 li { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
}

/* ---------- onboarding "which route" cards ---------- */
.hd-route-grid {
	list-style: none;
	margin: 34px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
@media (max-width: 1024px) { .hd-route-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .hd-route-grid { grid-template-columns: 1fr; } }

.hd-route {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 26px 22px;
	border-radius: 28px;
	background: #FFFFFF;
	box-shadow: var(--s5-shadow);
	border: 1px solid var(--s5-line);
	overflow: hidden;
	text-decoration: none;
	transition: transform .45s cubic-bezier(.2,.7,.15,1), box-shadow .4s ease;
}
.hd-route::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: .10;
	background: var(--hd-grad);
	z-index: 0;
	pointer-events: none;
}
.hd-route > * { position: relative; z-index: 1; }
.hd-route:hover,
.hd-route:focus-visible { transform: translateY(-6px); box-shadow: 0 24px 54px rgba(200,134,11,.22); }

.hd-route__badge {
	align-self: flex-start;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--hd-grad);
	color: #1A0F02;
	font-family: var(--s5-en);
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.hd-route__title { margin: 14px 0 0; font-family: var(--s5-en); font-size: 19px; font-weight: 700; color: var(--s5-ink); }
.hd-route__subtitle { margin: 2px 0 0; font-family: var(--s5-en); font-size: 12px; font-weight: 600; color: var(--s5-dim); text-transform: uppercase; letter-spacing: .04em; }
.hd-route__desc { margin: 10px 0 0; font-family: var(--s5-bn); font-size: 13.5px; color: var(--s5-mid); line-height: 1.7; flex: 1 1 auto; }
.hd-route__meta { margin: 14px 0 0; font-family: var(--s5-en); font-size: 12px; font-weight: 700; color: var(--s5-gold-3); }
.hd-route__cta { margin: 14px 0 0; display: inline-flex; align-items: center; gap: 6px; font-family: var(--s5-en); font-size: 13px; font-weight: 700; color: var(--s5-ink); }
.hd-route__cta svg { width: 13px; height: 13px; transition: transform .35s ease; }
.hd-route:hover .hd-route__cta svg { transform: translateX(4px); }

/* gradients reused verbatim from agent-list.css .w9a-avatar-v1/v2/v3/v5 — keeps the
   whole site on one small, deliberate colour set instead of inventing new hues. */
.hd-route--master { --hd-grad: linear-gradient(135deg, #FFD34D 0%, #C8860B 100%); }
.hd-route--super  { --hd-grad: linear-gradient(135deg, #C9A6FF 0%, #7C5CFC 100%); }
.hd-route--admin  { --hd-grad: linear-gradient(135deg, #7EE8D6 0%, #12A594 100%); }
.hd-route--care   { --hd-grad: linear-gradient(135deg, #B7E88A 0%, #4C9A2A 100%); }

/* ---------- MOBILE CENTERING PASS (2026-07) ----------
   .hd-route is a vertical card (badge / title / subtitle / description /
   meta / cta), left-aligned on desktop. Restacked centered on mobile —
   badge centered instead of hugging the top-left corner, description text
   centered (all four cards' descriptions are short one-liners, so centered
   wrapping stays tidy), cta row centered. Desktop (>767px) untouched. */
@media (max-width: 767px) {
	.hd-route { align-items: center; text-align: center; }
	.hd-route__badge { align-self: center; }
	.hd-route__cta { justify-content: center; }
}

/* ==========================================================================
   SITE-WIDE MOBILE PASS (2026-07) — raw-<ul> bullet/indent bug fix, New
   Account page only (143). Same root cause + same fix already applied on
   the agent-tier pages (w9-agents/agent-pages.css §"FEATURE-GRID FIX") and
   the blog listing (blog-premium.css): the shared base rule
   `.s5-grid,.s5-g3,...{ display:grid; ... }` (w9-site5.php) never resets
   list-style/padding on this raw <ul class="s5-grid s5-g3">, so a native
   bullet + the browser's ~40px indent survive — invisible-ish at desktop's
   multi-column grid, impossible to miss once mobile collapses it to one
   column (bullet floats to the left of every card). New Account's "কেন
   প্রথম থেকেই আস্থা রাখবেন" list is the only .hd-* surface still on this
   un-fixed base behaviour (Complaints doesn't use .s5-grid at all — checked
   directly against its _elementor_data). Scoped to body.page-id-143 (WP's
   own body class) so it can't touch Complaints/Customer-Service, which
   share this stylesheet but never had the bug.
   ========================================================================== */
body.page-id-143 .s5-grid,
body.page-id-143 .s5-g3,
body.page-id-143 .s5-g4 { list-style: none !important; padding: 0 !important; }
@media (max-width: 767px) {
	body.page-id-143 .s5-card { border: 1px solid rgba(200, 134, 11, .14); box-shadow: 0 10px 26px rgba(30, 27, 20, .10); }
}