/* ==========================================================================
   9wickets — /agent-list/ (page 54) STATIC SECTIONS — "Premium Redevelop"
   --------------------------------------------------------------------------
   Rebuilds the page's hero / intro / trust-story / closing-CTA sections in
   the exact same component language as the home page (post 11): the
   `.b9g-sec` / `.b9g-wrap` / `.b9g-glass` / `.b9g-glass--dark` /
   `.b9g-mesh--navy` / `.b9g-eyebrow` / `.b9g-h2` / `.b9g-btn` classes
   already defined in w9-vk/sections-glass.css (home page) and reused
   verbatim here — same navy/gold colour combination, same rounded glass
   panel-on-navy-mesh hero/CTA treatment as home's VIP and closing CTA
   sections. This file only adds the page-specific classes that sit inside
   those shared panels (stat rows, tier quick-links, story tiles); it does
   NOT touch `.w9a-card`/`.w9a-grid`/`.w9a-contact`/search-bar styling —
   that component's own redesign lives in agent-list.css, scoped so the
   search filter (agent-list.js) and its class hooks are untouched.
   Loads after agent-list.css (same page, no ordering conflict either way,
   but kept after for readability of the cascade).
   ========================================================================== */

/* ==========================================================================
   HERO v2 (2026-07 "slim full-width" revision) — supersedes the v1 inset
   glass-card hero above with a true full-bleed navy banner, same visual DNA
   (navy gradient + gold dot mesh, gold eyebrow, gold accents) but shaped
   like the site's actual hero (hero-v4.css) rather than an indented CTA
   card: edge-to-edge background, shorter vertical padding ("slim"), and a
   two-column split — copy left, a framed portrait + organic colour blobs +
   floating stat badges right (same "photo on a soft blob shape with
   floating info chips" pattern as modern SaaS hero references). Photo:
   attachment 88 (already in the media library, titled "9wickets verified
   agent support"), cropped tight to a head-and-shoulders portrait so it
   reads as a friendly support-agent headshot.
   ========================================================================== */
.w9a-hero2 {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 180% at 100% -20%, rgba(249,233,0,.08), transparent 55%),
        linear-gradient(135deg, #08415C 0%, #052A3D 100%);
    padding: 44px var(--vk-pad, 24px);
}
.w9a-hero2::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(249,233,0,.16) 1.4px, transparent 1.4px);
    background-size: 22px 22px;
    opacity: .5;
    pointer-events: none;
}
.w9a-hero2__inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 48px;
}
.w9a-hero2__copy { flex: 1 1 54%; min-width: 0; }
.w9a-hero2__copy .b9g-eyebrow { background: rgba(249,233,0,.16); color: #F9E900 !important; }
/* `body.vk` prefix is load-bearing: wickets-home.css has a very late,
   high-specificity `body.vk h1..h5{color:#08415C !important}` override
   (0,1,2) that beats a bare `.w9a-hero2__title{color:#fff !important}`
   (0,1,0) despite both being !important — same navy-on-navy trap already
   hit and fixed on the footer. Prefixing with `body.vk` raises this to
   (0,2,1), which wins on the class-count tiebreak. */
body.vk .w9a-hero2__title {
    color: #fff !important;
    font-family: var(--vk-font-display);
    font-weight: 700;
    font-size: clamp(24px, 3.2vw, 36px);
    line-height: 1.22;
    margin: 0 0 12px;
}
.w9a-hero2__lead {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255,255,255,.76);
    max-width: 480px;
    margin: 0 0 18px;
}
.w9a-hero2__stripe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    font-family: var(--vk-font-bn);
    font-size: 13px;
    font-weight: 700;
    color: #F9E900;
}
.w9a-hero2__stripe span { color: rgba(255,255,255,.5); font-weight: 400; }
.w9a-hero2__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- visual side: blobs + framed portrait + floating badges ---- */
.w9a-hero2__visual {
    flex: 1 1 46%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 340px;
}
.w9a-hero2__blob {
    position: absolute;
    border-radius: 63% 37% 54% 46% / 43% 37% 63% 57%;
    pointer-events: none;
}
.w9a-hero2__blob--a {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #F9E900 0%, #E6D200 100%);
    opacity: .16;
    filter: blur(2px);
    transform: rotate(-8deg);
}
.w9a-hero2__blob--b {
    width: 230px;
    height: 230px;
    right: 8%;
    bottom: 4%;
    background: linear-gradient(135deg, #4FD8E3 0%, #08415C 100%);
    opacity: .22;
    border-radius: 46% 54% 37% 63% / 57% 43% 63% 37%;
    transform: rotate(12deg);
}
/* Badges are positioned absolute against `.w9a-hero2__framewrap`, NOT the
   much wider `.w9a-hero2__visual` flex column — that was the bug: percentage
   offsets computed against the wide split-layout column (or the full-width
   stacked column on mobile) put the badges wherever that column's edges
   happened to be, not relative to the actual photo, so they drifted onto
   the image or off the card at anything other than the exact width this was
   first eyeballed at. `.w9a-hero2__framewrap` is sized to match the frame
   exactly at every breakpoint (same `width` value, duplicated deliberately
   instead of shared via a class, since the frame also needs its own
   `aspect-ratio`/`overflow:hidden` that the wrap must NOT have), so badges
   anchored to it stay pinned to the photo's own corners everywhere. */
.w9a-hero2__framewrap {
    position: relative;
    width: min(280px, 70vw);
}
.w9a-hero2__frame {
    position: relative;
    width: 100%;
    /* matches the source photo's own 683x1024 aspect exactly, so the full
       image shows with zero cropping (no object-fit:cover trimming, no
       transform-scale zoom) — "image will not cut" per direct feedback. */
    aspect-ratio: 683 / 1024;
    border-radius: 28px;
    overflow: hidden;
    background: #FFFCF2;
    border: 3px solid rgba(249,233,0,.5);
    box-shadow: 0 24px 60px rgba(0,0,0,.4);
    isolation: isolate;
}
.w9a-hero2__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.w9a-hero2__badge {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 26px rgba(0,0,0,.30);
    white-space: nowrap;
}
.w9a-hero2__badge-ic {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    /* !important: Elementor's kit CSS (`.elementor-kit-5 span{display:block}`
       or similar element+kit-class rule) outranks a bare `.w9a-hero2__badge-ic`
       class on specificity and was silently forcing display:block, which
       left the inline <svg> pinned to the top-left corner of the circle
       instead of centered — same class of kit-vs-bare-class override bug
       already hit and documented on .w9a-toggle/.w9a-search-input/etc. in
       agent-list.css. */
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex: none;
    background: linear-gradient(135deg, #F9E900, #E6D200);
}
.w9a-hero2__badge-ic svg { display: block; }
.w9a-hero2__badge b { font-family: var(--vk-font-bn); font-size: 13px; font-weight: 800; color: #08415C; display: block; line-height: 1.1; }
.w9a-hero2__badge span { font-size: 10px; color: #4A5A66; display: block; line-height: 1.1; }
/* all three offsets keep the whole badge pill within/just past the frame's
   own box (no more than ~55% of the pill hanging off an edge), so it never
   depends on extra breathing room from a surrounding column that may not
   be there. */
.w9a-hero2__badge--1 { top: 4%; left: -10%; }
.w9a-hero2__badge--2 { top: 42%; right: -14%; }
.w9a-hero2__badge--3 { bottom: 4%; left: -6%; }

@media (max-width: 900px) {
    .w9a-hero2__inner { flex-direction: column; text-align: center; }
    .w9a-hero2__copy { order: 2; }
    .w9a-hero2__visual { order: 1; min-height: 300px; margin-bottom: 8px; }
    .w9a-hero2__lead { margin-left: auto; margin-right: auto; }
    .w9a-hero2__stripe, .w9a-hero2__actions { justify-content: center; }
}
@media (max-width: 480px) {
    .w9a-hero2 { padding: 32px 16px; }
    .w9a-hero2__framewrap { width: min(220px, 58vw); }
    .w9a-hero2__badge { padding: 6px 12px 6px 6px; }
    .w9a-hero2__badge-ic { width: 22px; height: 22px; font-size: 10px; }
    .w9a-hero2__badge b { font-size: 11.5px; }
    .w9a-hero2__badge span { font-size: 9px; }
    .w9a-hero2__badge--1 { left: -4%; }
    .w9a-hero2__badge--2 { right: -8%; }
    .w9a-hero2__badge--3 { left: -2%; }
}

/* ---- tier quick-link pills — jewel-tone per tier, same family as the
   agent-card redesign in agent-list.css so hero → grid reads as one system ---- */
.w9a-tierlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--vk-font-bn);
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.w9a-tierlink span { font-size: 11px; font-weight: 800; opacity: .85; }
.w9a-tierlink:hover, .w9a-tierlink:focus-visible { transform: translateY(-3px) scale(1.02); color: #fff; }
.w9a-tierlink--master { border-color: rgba(249,233,0,.55); background: linear-gradient(135deg, rgba(249,233,0,.22) 0%, rgba(230,210,0,.08) 100%); }
.w9a-tierlink--master:hover { border-color: #F9E900; box-shadow: 0 14px 30px rgba(249,233,0,.30); }
.w9a-tierlink--super { border-color: rgba(79,216,227,.5); background: linear-gradient(135deg, rgba(79,216,227,.20) 0%, rgba(79,216,227,.06) 100%); }
.w9a-tierlink--super:hover { border-color: #4FD8E3; box-shadow: 0 14px 30px rgba(79,216,227,.30); }
.w9a-tierlink--admin { border-color: rgba(255,145,105,.5); background: linear-gradient(135deg, rgba(255,145,105,.20) 0%, rgba(255,145,105,.06) 100%); }
.w9a-tierlink--admin:hover { border-color: #FF9169; box-shadow: 0 14px 30px rgba(255,145,105,.30); }
.w9a-tierlink--subadmin { border-color: rgba(180,156,240,.5); background: linear-gradient(135deg, rgba(180,156,240,.20) 0%, rgba(180,156,240,.06) 100%); }
.w9a-tierlink--subadmin:hover { border-color: #B49CF0; box-shadow: 0 14px 30px rgba(180,156,240,.30); }

/* ==========================================================================
   SEARCH INTRO BOX (2026-07 "very slim" revision) — the heading (alh0007)
   and the search bar (al0021) used to sit bare on the section's plain
   background as two tall separate stacked blocks; now nested (via the
   build script, not this file) inside one shared `.w9a-searchbox` card,
   laid out as a SINGLE ROW (heading left, search bar right) instead of
   stacked, so the whole card is only as tall as one line of text / the
   input itself — a few dozen px, not a few hundred. The lead paragraph
   (`.b9g-lead`) is hidden here on purpose: its message ("search by name/ID
   or jump to a tier") is already redundant with the hero copy right above
   it, and cutting it is most of what makes the one-row layout possible.
   `.w9a-searchsec` is an additive class on the outer section (al0025,
   alongside its existing `b9g-sec`) that trims the section's own padding
   to match.
   ========================================================================== */
#agent-grid.w9a-searchsec.b9g-sec,
.w9a-searchsec.b9g-sec { padding-top: 16px; padding-bottom: 20px; }
/* TWO separate bugs were compounding here, both now fixed:
   1) `.b9g-head--center` / `.w9a-listbar` are not direct children of
      `.w9a-searchbox` — Elementor wraps each nested widget in its own
      `.elementor-widget-html > .elementor-widget-container` pair first, and
      THOSE wrapper divs are the real flex items. `align-items:stretch` on
      the box stretched the *wrappers* to the full 60px, but the actual
      content inside them (only ~15px tall) just sat at the wrapper's top
      instead of centering — hence "not aligned". Fixed by making every
      link in that wrapper chain itself a centered flex box.
   2) A second stylesheet, agent-pages.css, carries page-wide
      `body.w9-agentpage .w9a-listbar/.w9a-search-input/.w9a-search-ic/
      .w9a-search-count` rules (for the separate tier pages) that ALSO
      match this page's body class and were winning several of these same
      properties on specificity (`body.w9-agentpage .x` outranks a bare
      `.w9a-searchbox .x`) or on the !important+specificity tie for
      `.w9a-search-input`. Every selector below is prefixed `body.vk` to
      out-specify that file regardless of load order, load order be damned. */
.w9a-searchbox {
    max-width: 900px;
    height: 60px;
    margin: 0 auto 16px;
    padding: 0 8px 0 26px;
    /* !important on display+flex-direction: `alh0020` is an Elementor
       *container* element, and Elementor's own generated container CSS
       (`.e-con{ flex-direction:var(--flex-direction,column); ... }`) still
       applies alongside this custom class — since the container's own
       layout settings were never configured (only css_classes was set when
       building it), that variable defaults to column. My own `display:flex`
       here won every display tie already, but flex-direction was never
       overridden at all, so Elementor's column default silently stacked
       the heading above the search bar instead of beside it. */
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,252,240,.93) 100%);
    border: 1px solid rgba(8,65,92,.08);
    border-radius: 999px;
    box-shadow: 0 10px 26px rgba(8,65,92,.10);
}
/* the two Elementor widget-wrapper divs (alh0007's and al0021's) are the
   TRUE direct flex children of .w9a-searchbox — make each one a full-height
   centered flex box in its own right so whatever it contains centers
   correctly regardless of that content's own natural height. */
.w9a-searchbox > .elementor-widget-html,
.w9a-searchbox > .elementor-widget-html > .elementor-widget-container {
    display: flex;
    align-items: center;
    height: 100%;
}
.w9a-searchbox > .elementor-widget-html:first-child { flex: none; }
.w9a-searchbox > .elementor-widget-html:last-child { flex: 1 1 auto; min-width: 0; }
/* eyebrow + lead dropped inside the box entirely — the short heading
   ("এজেন্ট খুঁজুন") next to the search input already says everything
   needed, no room wasted on repeating the hero's own copy. */
body.vk .w9a-searchbox .b9g-head--center {
    margin: 0;
    flex: none;
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
    padding-right: 18px;
}
/* thin vertical divider between the label and the search field — the
   "premium" separator that was missing, instead of just a wide empty gap */
body.vk .w9a-searchbox .b9g-head--center::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background: rgba(8,65,92,.14);
}
body.vk .w9a-searchbox .b9g-eyebrow { display: none; }
body.vk .w9a-searchbox .b9g-h2 { margin: 0; font-size: 15px; white-space: nowrap; line-height: 1; }
body.vk .w9a-searchbox .b9g-lead { display: none; }
body.vk .w9a-searchbox .w9a-listbar {
    margin: 0 !important;
    max-width: none !important;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    align-items: center;
    justify-content: flex-start !important;
    flex-wrap: nowrap;
}
body.vk .w9a-searchbox .w9a-searchwrap {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    display: flex;
    align-items: center;
}
/* the base .w9a-search-input/.w9a-search-ic rules (agent-list.css) are
   sized for a tall standalone search hero (58px+ of padding alone) — too
   tall for a 60px pill that also has to hold a heading + count badge at
   the same height. Re-sized here, `!important` to beat both that base
   rule's own `!important`s AND agent-pages.css's competing
   `body.w9-agentpage` `!important` padding (see file-header note above —
   `body.vk` on this selector out-specifies `body.w9-agentpage` so this
   wins the tie). */
body.vk .w9a-searchbox .w9a-search-input {
    height: 40px !important;
    padding: 0 16px 0 42px !important;
    font-size: 13.5px !important;
    background: rgba(8,65,92,.035) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
body.vk .w9a-searchbox .w9a-search-input:focus {
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(249,233,0,.22) !important;
}
body.vk .w9a-searchbox .w9a-search-ic {
    width: 26px !important;
    height: 26px !important;
    left: 6px !important;
    box-shadow: none;
}
body.vk .w9a-searchbox .w9a-search-ic svg { width: 13px !important; height: 13px !important; }
body.vk .w9a-searchbox .w9a-search-clear {
    width: 26px !important;
    height: 26px !important;
    right: 6px;
}
body.vk .w9a-searchbox .w9a-search-count {
    margin-top: 0 !important;
    padding: 0 16px;
    height: 40px;
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px !important;
    color: #08415C;
    text-align: left !important;
    white-space: nowrap;
    background: linear-gradient(135deg, #F9E900 0%, #E6D200 100%);
    box-shadow: none;
}
body.vk .w9a-searchbox .w9a-search-count b { color: #08415C; }
@media (max-width: 767px) {
    .w9a-searchbox {
        height: auto;
        flex-wrap: wrap;
        border-radius: 22px;
        padding: 16px;
        justify-content: center;
        text-align: center;
        gap: 12px;
    }
    .w9a-searchbox > .elementor-widget-html:first-child,
    .w9a-searchbox > .elementor-widget-html:last-child { flex: 1 1 100%; }
    /* flex:none from the desktop rule (line ~327) is still in effect here --
       .b9g-head--center shrinks to its own content width, so its own
       justify-content:center has no extra space to center the h2 within.
       width:100% gives it the full row width so centering actually shows. */
    body.vk .w9a-searchbox .b9g-head--center { justify-content: center; padding-right: 0; height: auto; width: 100%; }
    body.vk .w9a-searchbox .b9g-head--center::after { display: none; }
    body.vk .w9a-searchbox .w9a-listbar {
        flex: 1 1 100% !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        height: auto;
    }
    body.vk .w9a-searchbox .w9a-searchwrap { flex: 1 1 100%; }
}

/* ==========================================================================
   TRUST STRIP (2026-07 "slim" revision) — supersedes the old tall
   `.w9a-story` block (4-tile stat grid + separate pill note, ~40px padding
   + a lot of vertical rhythm) with one slim single-row split panel: a small
   framed photo + a short 1-sentence lead (which now folds the old separate
   "safety note" link straight into itself, one sentence doing both jobs
   instead of two blocks) + a compact one-line stat stripe. Echoes the same
   navy-glass panel as the hero/CTA on this page and the home page's VIP
   section, just shaped like the home hero's slim `.s5-herometa` line
   instead of a boxed stat grid.
   ========================================================================== */
.w9a-trust {
    padding: 24px 30px;
    display: flex;
    align-items: center;
    gap: 28px;
}
.w9a-trust__media {
    flex: none;
    width: 180px;
    aspect-ratio: 740 / 419;
    border-radius: 18px;
    overflow: hidden;
    border: 2px solid rgba(249,233,0,.45);
    box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.w9a-trust__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 35%; }
.w9a-trust__body { flex: 1 1 auto; min-width: 0; }
.w9a-trust__body .b9g-eyebrow { background: rgba(249,233,0,.16); color: #F9E900 !important; }
.w9a-trust__body .b9g-h2 { color: #fff !important; margin: 0 0 6px; font-size: clamp(18px, 2.2vw, 23px); }
.w9a-trust__lead {
    font-size: 13px;
    line-height: 1.65;
    color: rgba(255,255,255,.76);
    max-width: 640px;
    margin: 0 0 10px;
}
.w9a-trust__lead a { color: #F9E900; font-weight: 700; text-decoration: underline; }
.w9a-trust__stripe {
    margin: 0;
    font-family: var(--vk-font-bn);
    font-size: 13px;
    font-weight: 700;
    color: #F9E900;
}
.w9a-trust__stripe span { color: rgba(255,255,255,.45); font-weight: 400; margin: 0 2px; }

/* ---- closing CTA lead paragraph (buttons/eyebrow/h2 reuse b9g-* as-is,
   exact vp0016 pattern from the home page) ---- */
.w9a-cta__lead {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255,255,255,.78);
    max-width: 560px;
    margin: 8px auto 0;
}

@media (max-width: 767px) {
    .w9a-hero { padding: 30px 22px; }
    .w9a-hero__stats li { padding: 8px 14px; }
    .w9a-trust { flex-direction: column; text-align: center; padding: 22px 20px; gap: 16px; }
    .w9a-trust__media { width: 140px; margin: 0 auto; }
    .w9a-trust__lead { max-width: none; }
}