/* ==========================================================================
   AGENT PAGES -> AGENT-LIST DARK MATCH (2026-07-26)
   --------------------------------------------------------------------------
   Direct request: the other 7 w9-agentpage surfaces (master/super/admin/
   sub-admin-agent-list, customer-service, complaints-feedback, new-account)
   must use the SAME colors and design as Agent List (post 54), not a
   related-but-different cream/stock-photo treatment. This file recolors
   every shared "Site 5" component on those 7 pages to the exact premium
   dark palette Agent List already uses (agentlist-hero-cta-v2.css) and
   positions a JS-injected copy of Agent List's animated verify-orbit
   graphic (agent-pages-orbit-inject.js) into the hero.

   Palette source of truth: agentlist-hero-cta-v2.css (post 54 only). Values
   copied verbatim so both pages are pixel-identical in color:
     bg gradient  #0B0906 -> #15110A -> #17150F
     gold accent  #FFC72C   |  line/border  rgba(255,199,44,.16-.30)
     heading text #FBF6EC   |  muted text  #C9BFA6 / #8A8270
     card text    #F3ECDD

   Everything below is scoped to `body.w9-agentpage:not(.page-id-54)` so
   Agent List's own hand-built `.vk-alh` hero (different markup entirely,
   see agentlist-hero-cta-v2.css) is never touched by this file. Depends on
   (loads after) both agent-pages.css and agentlist-hero-cta-v2.css so it
   wins every cascade tie and can reuse the latter's unscoped `.vk-alh-*`
   orbit rules/keyframes as-is (no need to redefine the animation here).
   ========================================================================== */

/* ---------- HERO: dark gradient, no more cream + stock-photo bleed ---------- */
body.w9-agentpage:not(.page-id-54) .s5-ihero {
	background: linear-gradient(180deg, #0B0906 0%, #15110A 55%, #17150F 100%) !important;
	border-bottom: 1px solid rgba(255, 199, 44, .16);
	position: relative;
}

/* ---------- kill the white wave-divider notch ----------
   .s5-ihero.s5-wave-b::after / .s5-sec.s5-wave-t::before (w9-site5.php)
   paint a white SVG wave meant to blend a cream hero into a white section
   below it — with both sides now the same dark gradient, that white notch
   just floats as a stray shape on top of an otherwise seamless dark page. */
body.w9-agentpage:not(.page-id-54) .s5-ihero.s5-wave-t::before,
body.w9-agentpage:not(.page-id-54) .s5-ihero.s5-wave-b::after,
body.w9-agentpage:not(.page-id-54) .s5-sec.s5-wave-t::before,
body.w9-agentpage:not(.page-id-54) .s5-sec.s5-wave-b::after {
	background-image: none !important;
}

/* ---------- eyebrow / h1 / lede ---------- */
body.w9-agentpage:not(.page-id-54) .s5-ihero .s5-eyebrow .elementor-heading-title {
	background: rgba(255, 199, 44, .12) !important;
	border: 1px solid rgba(255, 199, 44, .30);
	color: #FFC72C !important;
}
body.w9-agentpage:not(.page-id-54) .s5-ihero h1.elementor-heading-title {
	color: #FBF6EC !important;
}
body.w9-agentpage:not(.page-id-54) .s5-ihero .s5-lede p {
	color: #C9BFA6 !important;
}

/* ---------- herometa line -> pill chips (matches Agent List's .vk-alh-stat) ---------- */
body.w9-agentpage:not(.page-id-54) .s5-herometa {
	color: #C9BFA6;
}
body.w9-agentpage:not(.page-id-54) .s5-herometa span {
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 199, 44, .16);
	font-size: 11.5px;
	transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
body.w9-agentpage:not(.page-id-54) .s5-herometa span:hover {
	border-color: rgba(255, 199, 44, .40);
	background: rgba(255, 199, 44, .08);
	transform: translateY(-2px);
}
/* the base middot-separator (::before on span+span) is superseded by the
   chip's own border now acting as the divider — remove it so chips don't
   carry a stray dot glued to their left edge. */
body.w9-agentpage:not(.page-id-54) .s5-herometa span + span::before { display: none; }
body.w9-agentpage:not(.page-id-54) .s5-herometa b { color: #FFC72C; }
body.w9-agentpage:not(.page-id-54) .s5-herometa i { color: #FFC72C; }

/* ---------- orbit visual (markup injected by agent-pages-orbit-inject.js) ----------
   Reuses the vk-alh-orbit / vk-alh-visual rules verbatim from
   agentlist-hero-cta-v2.css (unscoped there, so they already apply to any
   element carrying those classes) — only positioning is added here. */
body.w9-agentpage:not(.page-id-54) .s5-ihero .vk-alh-visual {
	position: absolute;
	z-index: 2;
	right: clamp(24px, 6vw, 90px);
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}
@media (max-width: 1024px) {
	body.w9-agentpage:not(.page-id-54) .s5-ihero .vk-alh-visual { display: none; }
}

/* ==========================================================================
   AGENT-LIST SECTION (head + search + card grid) — same dark-aurora
   treatment as agentlist-hero-cta-v2.css's body.page-id-54 block, widened
   to the other 7 surfaces.
   ========================================================================== */
body.w9-agentpage:not(.page-id-54) .s5-sec--cream {
	background:
		radial-gradient(820px 460px at 12% 10%, rgba(255, 199, 44, .14), transparent 64%),
		linear-gradient(180deg, #0B0906 0%, #15110A 55%, #17150F 100%) !important;
}
body.w9-agentpage:not(.page-id-54) .s5-sec--cream .s5-eyebrow .elementor-heading-title {
	background: rgba(255, 199, 44, .12) !important;
	border: 1px solid rgba(255, 199, 44, .30);
	color: #FFC72C !important;
}
body.w9-agentpage:not(.page-id-54) .s5-sec--cream .s5-sechead .elementor-heading-title,
body.w9-agentpage:not(.page-id-54) .s5-sec--cream .s5-head { color: #FBF6EC !important; }
body.w9-agentpage:not(.page-id-54) .s5-sec--cream .s5-lede-c p,
body.w9-agentpage:not(.page-id-54) .s5-sec--cream .s5-head p { color: #C9BFA6 !important; }

body.w9-agentpage:not(.page-id-54) .w9a-group { background: rgba(255, 199, 44, .14) !important; color: #FFC72C !important; }
body.w9-agentpage:not(.page-id-54) a.w9a-group:hover { background: rgba(255, 199, 44, .24) !important; }

body.w9-agentpage:not(.page-id-54) .w9a-search-input {
	background: linear-gradient(135deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 100%) !important;
	border: 1px solid rgba(255, 199, 44, .18) !important;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .35) !important;
	color: #F3ECDD !important;
}
body.w9-agentpage:not(.page-id-54) .w9a-search-input::placeholder { color: #8A8270; }
body.w9-agentpage:not(.page-id-54) .w9a-search-clear {
	background: rgba(255, 255, 255, .05) !important;
	border: 1px solid rgba(255, 199, 44, .18) !important;
	color: #C9BFA6 !important;
}
body.w9-agentpage:not(.page-id-54) .w9a-search-count {
	background: rgba(255, 255, 255, .05);
	box-shadow: none;
	border: 1px solid rgba(255, 199, 44, .14);
	color: #C9BFA6;
}
body.w9-agentpage:not(.page-id-54) .w9a-search-empty,
body.w9-agentpage:not(.page-id-54) .w9a-empty-msg {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 199, 44, .14);
	box-shadow: none;
	color: #C9BFA6;
}

body.w9-agentpage:not(.page-id-54) .w9a-card {
	background: linear-gradient(135deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 100%), rgba(21, 17, 10, .5);
	border: 1px solid rgba(255, 199, 44, .16);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .04) inset;
}
body.w9-agentpage:not(.page-id-54):not(.w9a-modal-open) .w9a-card:hover {
	border-color: rgba(255, 199, 44, .40) !important;
	box-shadow: 0 16px 38px -6px rgba(255, 199, 44, .22), 0 1px 0 rgba(255, 255, 255, .06) inset !important;
}
body.w9-agentpage:not(.page-id-54) .w9a-photo { box-shadow: 0 0 0 2px #15130E, 0 0 0 4px rgba(255, 199, 44, .30); }
body.w9-agentpage:not(.page-id-54) .w9a-verified-badge { box-shadow: 0 0 0 2px #15130E; }
body.w9-agentpage:not(.page-id-54) .w9a-name { color: #F3ECDD !important; }
body.w9-agentpage:not(.page-id-54) .w9a-idrow { color: #8A8270 !important; }
body.w9-agentpage:not(.page-id-54) .w9a-idlabel { color: #C9BFA6 !important; }
body.w9-agentpage:not(.page-id-54) .w9a-rating::before,
body.w9-agentpage:not(.page-id-54) .w9a-idrow::before { background: rgba(255, 199, 44, .35) !important; }
body.w9-agentpage:not(.page-id-54) .w9a-toggle {
	background: rgba(255, 255, 255, .05) !important;
	border: 1px solid rgba(255, 199, 44, .18) !important;
	color: #F3ECDD !important;
}

/* ---- contact modal (portalled to <body>, still a body descendant) ---- */
body.w9-agentpage:not(.page-id-54) .w9a-contact {
	background: linear-gradient(180deg, #1C1610 0%, #100D08 100%);
	border-color: rgba(255, 199, 44, .30);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}
body.w9-agentpage:not(.page-id-54) .w9a-modal-backdrop { background: rgba(0, 0, 0, .6); }
body.w9-agentpage:not(.page-id-54) .w9a-modal-header {
	background: radial-gradient(120% 140% at 0% 0%, rgba(255, 199, 44, .18), transparent 65%), rgba(255, 199, 44, .04);
	border-bottom-color: rgba(255, 199, 44, .20);
}
body.w9-agentpage:not(.page-id-54) .w9a-modal-photo { box-shadow: 0 0 0 2px #15130E, 0 0 0 4px rgba(255, 199, 44, .30); }
body.w9-agentpage:not(.page-id-54) .w9a-modal-id b { color: #F3ECDD; }
body.w9-agentpage:not(.page-id-54) .w9a-modal-id span { color: #8A8270; }
body.w9-agentpage:not(.page-id-54) .w9a-contact-item { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 199, 44, .14); }
body.w9-agentpage:not(.page-id-54) .w9a-contact-number { color: #F3ECDD; }
body.w9-agentpage:not(.page-id-54) .w9a-copy-btn {
	background: rgba(255, 255, 255, .05) !important;
	border: 1px solid rgba(255, 199, 44, .18) !important;
	color: #C9BFA6 !important;
}

/* ==========================================================================
   REST OF PAGE — feature-grid cards / stat-grid / numbered steps, so the
   whole page reads as one continuous dark surface instead of alternating
   back to light bands between the now-dark hero/list/story/CTA sections.
   Agent List has no direct equivalent of these (it has no feature-grid or
   step list), so this reuses the base file's own already-proven
   `.s5-sec--dark .s5-card` dark-card palette (w9-site5.php) rather than
   inventing new colors — same technique, just applied without needing the
   literal `.s5-sec--dark` class.
   ========================================================================== */
body.w9-agentpage:not(.page-id-54) .s5-sec {
	background: linear-gradient(180deg, #0B0906 0%, #15110A 55%, #17150F 100%) !important;
}
body.w9-agentpage:not(.page-id-54) .s5-sechead .elementor-heading-title,
body.w9-agentpage:not(.page-id-54) .s5-head { color: #FBF6EC !important; }
body.w9-agentpage:not(.page-id-54) .s5-lede-c p { color: #C9BFA6 !important; }
body.w9-agentpage:not(.page-id-54) .s5-eyebrow .elementor-heading-title {
	background: rgba(255, 199, 44, .12) !important;
	border: 1px solid rgba(255, 199, 44, .30);
	color: #FFC72C !important;
}

body.w9-agentpage:not(.page-id-54) .s5-card,
body.w9-agentpage:not(.page-id-54) .s5-tier,
body.w9-agentpage:not(.page-id-54) .s5-statgrid li,
body.w9-agentpage:not(.page-id-54) .s5-steps li {
	background: rgba(255, 255, 255, .06) !important;
	box-shadow: none !important;
	border: 1px solid rgba(255, 199, 44, .14);
}
body.w9-agentpage:not(.page-id-54) .s5-card h3,
body.w9-agentpage:not(.page-id-54) .s5-tier h3,
body.w9-agentpage:not(.page-id-54) .s5-steps h3 { color: #FBF6EC !important; }
body.w9-agentpage:not(.page-id-54) .s5-card p,
body.w9-agentpage:not(.page-id-54) .s5-tier p,
body.w9-agentpage:not(.page-id-54) .s5-steps p { color: #C9BFA6 !important; }
body.w9-agentpage:not(.page-id-54) .s5-stat-l { color: #C9BFA6 !important; }

/* ==========================================================================
   STORY STATS (.vk-story) + FINAL CTA (.vk-cta--premium) — identical rules
   to agentlist-hero-cta-v2.css's page-id-54 block, widened to the other 7.
   ========================================================================== */
body.w9-agentpage:not(.page-id-54) .vk-story {
	/* full-bleed fix (same one already documented/applied for post 54 in
	   agentlist-hero-cta-v2.css): base `.vk-section{ max-width:var(--vk-max);
	   margin:0 auto }` boxes the dark background into a centered 1280px
	   column, leaving the page's own cream background visible in the side
	   margins — full width removes that gap entirely. */
	max-width: none !important;
	width: 100%;
	margin: 0 !important;
	background: linear-gradient(180deg, #0B0906 0%, #15110A 55%, #17150F 100%) !important;
	border-top: 1px solid rgba(255, 199, 44, .14);
	border-bottom: 1px solid rgba(255, 199, 44, .14);
}
body.w9-agentpage:not(.page-id-54) .vk-story__aura {
	background:
		radial-gradient(closest-side, rgba(255, 199, 44, .14), transparent 70%) 12% 20% / 42% 70% no-repeat,
		radial-gradient(closest-side, rgba(200, 134, 11, .12), transparent 70%) 88% 80% / 42% 70% no-repeat;
	opacity: .8;
}
body.w9-agentpage:not(.page-id-54) .vk-story .vk-eyebrow {
	background: rgba(255, 199, 44, .12) !important;
	border-color: rgba(255, 199, 44, .30) !important;
	color: #FFC72C !important;
}
body.w9-agentpage:not(.page-id-54) .vk-story .vk-h2 { color: #FBF6EC !important; }
body.w9-agentpage:not(.page-id-54) .vk-story .vk-lead { color: #C9BFA6 !important; }
body.w9-agentpage:not(.page-id-54) .vk-story__stat {
	background: linear-gradient(140deg, rgba(255, 199, 44, .08), rgba(255, 255, 255, .02)), rgba(21, 17, 10, .5);
	border: 1px solid rgba(255, 199, 44, .16);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
body.w9-agentpage:not(.page-id-54) .vk-story__stat:hover {
	border-color: rgba(255, 199, 44, .40);
	box-shadow: 0 16px 38px -6px rgba(255, 199, 44, .20);
}
body.w9-agentpage:not(.page-id-54) .vk-story__stat-lbl { color: #C9BFA6 !important; }

body.w9-agentpage:not(.page-id-54) .vk-cta--premium {
	background: linear-gradient(180deg, #0B0906 0%, #15110A 60%, #17150F 100%) !important;
	border-top: 1px solid rgba(255, 199, 44, .16);
}
body.w9-agentpage:not(.page-id-54) .vk-cta--premium .vk-cta__bg::before {
	background:
		radial-gradient(55% 60% at 50% 40%, rgba(255, 199, 44, .16) 0%, transparent 62%),
		radial-gradient(40% 50% at 15% 85%, rgba(200, 134, 11, .16) 0%, transparent 62%),
		radial-gradient(40% 50% at 85% 15%, rgba(230, 169, 30, .14) 0%, transparent 62%);
}
body.w9-agentpage:not(.page-id-54) .vk-cta--premium .vk-orb { opacity: .5; }
body.w9-agentpage:not(.page-id-54) .vk-cta--premium .vk-cta__content::before {
	background: rgba(11, 9, 6, .34);
	border-color: rgba(255, 199, 44, .20);
	box-shadow: 0 24px 54px -30px rgba(0, 0, 0, .6);
}
body.w9-agentpage:not(.page-id-54) .vk-cta--premium .vk-cta__content .vk-eyebrow {
	background: rgba(255, 199, 44, .10);
	border-color: rgba(255, 199, 44, .30);
	color: #FFC72C;
}
body.w9-agentpage:not(.page-id-54) .vk-cta--premium .vk-cta__content .vk-h1 { color: #FBF6EC !important; }
body.w9-agentpage:not(.page-id-54) .vk-cta--premium .vk-cta__content .vk-lead { color: #C9BFA6 !important; }
body.w9-agentpage:not(.page-id-54) .vk-cta--premium .vk-cta__frame {
	background: linear-gradient(160deg, rgba(255, 199, 44, .55) 0%, rgba(200, 134, 11, .30) 45%, rgba(255, 255, 255, .18) 100%);
	box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .65), 0 0 0 1px rgba(200, 134, 11, .30);
}

@media (prefers-reduced-motion: reduce) {
	body.w9-agentpage:not(.page-id-54) .s5-herometa span { transition: none; }
}