/* ==========================================================================
   9wickets — "স্পোর্টস বেটিং" (Sports Betting) landing page (2026-08)
   --------------------------------------------------------------------------
   New standalone page (post: sports-betting). No new photos this time —
   markets/features/tournaments are icon-and-copy sections, so it leans
   entirely on already-sitewide components:
     - .w9ip-hero                                (inner-pages-hero-cta.css)
     - .vk-section / .vk-section__head / .vk-eyebrow / .vk-h2 / .vk-lead
     - .b9g-sec / .b9g-wrap / .b9g-glass--dark / .b9g-mesh--navy
       (sections-glass.css) — generic, non-ID-scoped, safe to reuse here
     - .vk-how--v3 / .hw3-*  (steps-road-v3.css) — the home page's "4-step
       onboarding" panel, reworded for a betting flow instead of signup

   2026-08 v2: the markets/features cards were upgraded from the generic
   sitewide .b9g-card (flat white box, small icon chip) to a dedicated
   .w9sb-card component with two context-aware skins — exact same pattern
   as live-casino-page.css's .w9lc-card (kept as its own copy rather than
   shared cross-page, matching this codebase's one-file-per-page-component
   convention):
     - inside .w9sb-sports (cream section): warm white card, gold-gradient
       icon disc, gold-glow lift on hover.
     - inside .w9sb-why (navy section): the "Spotlight Ring" language from
       the home page's Agent Category redesign (agents-cards-v5.css,
       .a5-card) — dark card, gold-ring icon, radial spotlight glow.
   ========================================================================== */

.w9sb-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin-top: clamp(20px, 3vw, 32px);
}

.w9sb-card {
    position: relative;
    isolation: isolate;
    flex: 1 1 210px;
    max-width: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 20px 24px;
    border-radius: 20px;
    transition: transform .4s cubic-bezier(.2, .7, .15, 1), box-shadow .4s ease, border-color .4s ease;
}
.w9sb-card:hover { transform: translateY(-6px); }

.w9sb-card__icon {
    position: relative;
    z-index: 1;
    flex: none;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    transition: transform .4s cubic-bezier(.2, .7, .15, 1), background .4s ease, border-color .4s ease;
}
.w9sb-card__icon svg { width: 24px; height: 24px; display: block; }
.w9sb-card:hover .w9sb-card__icon { transform: scale(1.08) rotate(-4deg); }

.w9sb-card__title { position: relative; z-index: 1; font-size: 16px; font-weight: 800; line-height: 1.3; margin: 0 0 6px; }
.w9sb-card__body { position: relative; z-index: 1; font-size: 12.5px; line-height: 1.58; margin: 0; }

/* ---- light skin (markets grid, cream section) ---- */
.w9sb-sports .w9sb-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFCF6 100%);
    border: 1px solid rgba(8, 65, 92, .08);
    box-shadow: 0 10px 28px -14px rgba(8, 65, 92, .16);
}
.w9sb-sports .w9sb-card:hover {
    border-color: rgba(232, 162, 0, .5);
    box-shadow: 0 22px 42px -16px rgba(8, 65, 92, .24), 0 0 0 1px rgba(232, 162, 0, .16);
}
.w9sb-sports .w9sb-card__icon {
    background: linear-gradient(135deg, #F9E900 0%, #E6D200 100%);
    color: #1A0F02;
    box-shadow: 0 10px 22px -6px rgba(232, 162, 0, .5);
}
/* !important + body.vk prefix: wickets-home.css's "PREMIUM REBALANCE" retrofit
   layer forces `body.vk h1..h5 { color:#1A1813 !important }` globally, which
   otherwise beats these rules even at higher class-count specificity — same
   fix already applied to .vk-story/.vk-cta/.w9ip-hero/.w9lc-card titles
   elsewhere in this codebase. */
body.vk .w9sb-sports .w9sb-card__title { color: #08415C !important; }
.w9sb-sports .w9sb-card__body { color: #4A5A66; }

/* ---- dark "Spotlight Ring" skin (why-us grid, navy section) — matches
   .a5-card in agents-cards-v5.css / .w9lc-card in live-casino-page.css
   exactly, same component language ---- */
.w9sb-why.b9g-glass { border-radius: 0; box-shadow: none; }
.w9sb-why .b9g-wrap { max-width: 1080px; }
.w9sb-why .w9sb-card {
    background: linear-gradient(180deg, #17150F 0%, #0E0C09 100%);
    border: 1px solid rgba(247, 185, 0, .16);
    box-shadow: 0 4px 20px rgba(23, 21, 15, .18);
}
.w9sb-why .w9sb-card:hover {
    border-color: rgba(247, 185, 0, .55);
    box-shadow: 0 24px 46px rgba(23, 21, 15, .34), 0 0 0 1px rgba(247, 185, 0, .1);
}
.w9sb-why .w9sb-card__spot {
    position: absolute;
    z-index: 0;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(247, 185, 0, .28), transparent 72%);
    filter: blur(6px);
    opacity: .7;
    pointer-events: none;
    transition: opacity .4s ease;
}
.w9sb-why .w9sb-card:hover .w9sb-card__spot { opacity: 1; }
.w9sb-why .w9sb-card__icon {
    background: rgba(23, 21, 15, .6);
    border: 1.5px solid rgba(247, 185, 0, .4);
    color: #F7B900;
}
.w9sb-why .w9sb-card:hover .w9sb-card__icon {
    background: rgba(247, 185, 0, .16);
    border-color: rgba(247, 185, 0, .8);
}
body.vk .w9sb-why .w9sb-card__title { color: #FFFFFF !important; }
.w9sb-why .w9sb-card__body { color: rgba(255, 255, 255, .72); }

/* tournament chip row */
.w9sb-chiprow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: clamp(18px, 2.5vw, 26px);
}
.w9sb-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(8, 65, 92, .12);
    box-shadow: 0 4px 14px rgba(8, 65, 92, .06);
    font-family: var(--vk-font-bn);
    font-weight: 700;
    font-size: 13px;
    color: #08415C;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.w9sb-chip svg { flex: none; width: 14px; height: 14px; color: #E6A800; }
.w9sb-chip:hover {
    transform: translateY(-3px);
    border-color: rgba(249, 233, 0, .55);
    box-shadow: 0 10px 22px rgba(8, 65, 92, .12);
}

@media (max-width: 767px) {
    .w9sb-card { flex: 1 1 140px; max-width: 160px; padding: 22px 14px 18px; }
    .w9sb-chip { padding: 8px 16px; font-size: 12.5px; }
}