/* ==========================================================================
   9wickets — "যেকোনো ডিভাইস · যেকোনো সময়" (Any Device · Any Time) section
   REDESIGN v3 "Anywhere, Anytime" (loads LAST)
   --------------------------------------------------------------------------
   Full rebuild, not a restyle of v2 (verify-devices.css, kept on disk for
   rollback, unused): the old "live-casino poker moment, small framed card
   image beside text on cream" layout is replaced with a full-bleed
   editorial split-hero — dark navy copy panel on one side, a large
   lifestyle photo bleeding to the viewport edge on the other, blended at
   the seam with a soft gradient. Copy widens from "live casino only" to a
   general "bet/play anywhere — sports or casino, any device" pitch,
   matching the more casual, energetic street-style photo (not a
   casino-table shot). Scoped entirely under .vk-verify--v3 / .vv3-*; the
   legacy .vk-verify__* rules in wickets-home.css are NOT reused (all new
   markup/classes) so they simply don't apply — same "old version inert on
   disk" pattern as every other v2+ layer in this codebase.
   Full-bleed like the hero (hero-v6.css) and Agent Category band
   (agents-cards-v4.css) — same convention already applied this pass to
   #how/#why/#quotes/#live/#about.
   Markup: post 11, widget vp0005.
   ========================================================================== */

body.vk .vk-verify--v3.vk-section {
    max-width: none !important;
    padding: 0 !important;
}

body.vk .vv3-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    min-height: clamp(300px, 27vw, 380px);
    background: #05141F;
    overflow: hidden;
}

/* ---- copy side ---- */
body.vk .vv3-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: clamp(20px, 2.6vw, 32px) clamp(20px, 4vw, 56px);
    max-width: 600px;
}
body.vk .vv3-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: var(--vk-r-pill, 999px);
    background: rgba(249, 233, 0, 0.14);
    border: 1px solid rgba(249, 233, 0, 0.32);
    color: #F9E900 !important;
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
    margin-bottom: 10px;
}
body.vk .vv3-h2 {
    font-family: var(--vk-font-display, var(--vk-font-bn));
    font-size: clamp(20px, 2.4vw, 30px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #FFFFFF !important;
    margin: 0 0 8px;
}
body.vk .vv3-h2 em {
    font-style: italic;
    color: #F9E900;
}
body.vk .vv3-lead {
    font-size: clamp(12.5px, 1vw, 14px);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.76) !important;
    margin: 0 0 14px;
    max-width: 52ch;
}

/* ---- feature list: icon-in-circle + text, no card chrome, reads
        directly against the dark panel ---- */
body.vk .vv3-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    gap: 6px;
}
body.vk .vv3-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.88);
}
body.vk .vv3-list li .vv3-list-ic {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    margin-top: 1px;
    border-radius: 50%;
    background: rgba(249, 233, 0, 0.16);
    color: #F9E900;
}
body.vk .vv3-list li .vv3-list-ic svg { width: 10px; height: 10px; }

/* ---- device chips: frosted glass, reinforces "any device" over the
        dark panel / photo seam ---- */
body.vk .vv3-devices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}
body.vk .vv3-device {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 6px;
    border-radius: var(--vk-r-pill, 999px);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
body.vk .vv3-device:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(249, 233, 0, 0.4);
    transform: translateY(-2px);
}
body.vk .vv3-device-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFD34D 0%, #F7B900 55%, #E6AD00 100%);
    color: var(--vk-text);
}
body.vk .vv3-device-ic svg { width: 10px; height: 10px; }

body.vk .vv3-cta .vk-btn {
    min-width: 0;
    justify-content: center;
    padding: 10px 22px !important;
    font-size: 13.5px !important;
}

/* ---- media side: full-bleed photo, gradient-blended into the panel ---- */
body.vk .vv3-media {
    position: relative;
    min-height: 260px;
    overflow: hidden;
}
body.vk .vv3-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 18%;
    display: block;
}
/* soft seam blending the photo into the dark copy panel, avoids a hard
   vertical cut line between the two grid columns */
body.vk .vv3-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, #05141F 0%, rgba(5, 20, 31, 0.55) 10%, transparent 26%);
    pointer-events: none;
}
/* floating "live" chip on the photo, echoes the site's other floating
   image chips (#verify v2, #vip) without depending on their classes */
body.vk .vv3-chip {
    position: absolute;
    z-index: 2;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--vk-r-pill, 999px);
    background: rgba(5, 20, 31, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 12.5px;
}
body.vk .vv3-chip-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #F9E900;
    box-shadow: 0 0 0 0 rgba(249, 233, 0, .6);
    animation: vv3-pulse 1.8s ease-out infinite;
}
@keyframes vv3-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(249, 233, 0, .6); }
    70%  { box-shadow: 0 0 0 8px rgba(249, 233, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(249, 233, 0, 0); }
}

@media (max-width: 960px) {
    body.vk .vv3-hero { grid-template-columns: 1fr; min-height: 0; }
    body.vk .vv3-media { order: -1; min-height: clamp(200px, 46vw, 280px); }
    body.vk .vv3-media::before { background: linear-gradient(180deg, transparent 55%, #05141F 96%); }
    body.vk .vv3-media img { object-position: 60% 14%; }
    body.vk .vv3-copy { max-width: none; padding: clamp(20px, 4vw, 28px) var(--vk-pad); text-align: center; align-items: center; }
    body.vk .vv3-eyebrow { align-self: center; }
    body.vk .vv3-lead { margin-left: auto; margin-right: auto; }
    body.vk .vv3-list { justify-items: center; }
    body.vk .vv3-list li { text-align: left; }
    body.vk .vv3-devices { justify-content: center; }
}
@media (max-width: 480px) {
    body.vk .vv3-h2 { font-size: clamp(20px, 6vw, 24px); }
}
@media (prefers-reduced-motion: reduce) {
    body.vk .vv3-chip-dot { animation: none; }
    body.vk .vv3-device { transition: none; }
}