/*!
 * 9wickets Pro — Mobile Responsive ("Stadium Night")
 * Centers all text, icons, and content on small screens.
 * Loaded site-wide as the LAST CSS layer.
 *
 * Breakpoints:
 *   ≤980px  — tablet (nav becomes drawer, columns relax)
 *   ≤720px  — mobile (single column, full center)
 *   ≤480px  — narrow phone (further compaction)
 */

/* ============================================================
   ≤ 980px — TABLET ADJUSTMENTS
   ============================================================ */
@media (max-width: 980px) {
    body.vk .nw-section,
    body.vk .vk-section {
        padding: clamp(28px, 4vw, 48px) clamp(14px, 4vw, 32px) !important;
    }
    body.vk .nw-hero,
    body.vk .vk-hero,
    body.vk .vk-pagehero {
        padding: clamp(40px, 6vw, 64px) clamp(14px, 4vw, 32px) clamp(28px, 4vw, 48px) !important;
    }
    body.vk .nw-hero__inner {
        gap: 28px;
    }
    body.vk .nw-hero__panel {
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }
    /* Decorative cricket ball would crowd narrower hero — already hidden via cricket.css */
}

/* ============================================================
   ≤ 720px — MOBILE: full center alignment
   ============================================================ */
@media (max-width: 720px) {

    /* ---- Section paddings tightened further ---- */
    body.vk .nw-section,
    body.vk .vk-section {
        padding: 28px 14px !important;
    }
    body.vk .nw-hero,
    body.vk .vk-hero,
    body.vk .vk-pagehero {
        padding: 32px 14px 24px !important;
    }
    body.vk .nw-stats {
        padding: 22px 14px !important;
    }

    /* ---- Hero copy block — center everything ---- */
    body.vk .nw-hero__copy,
    body.vk .vk-hero__inner,
    body.vk .vk-pagehero__inner {
        text-align: center !important;
    }
    body.vk .nw-hero__copy .nw-hero__chip,
    body.vk .nw-hero__chip {
        margin-left: auto !important;
        margin-right: auto !important;
        display: inline-flex !important;
    }
    body.vk .vk-pagehero__inner .vk-breadcrumb {
        display: flex !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }
    body.vk .nw-hero__title,
    body.vk .vk-hero__title,
    body.vk .vk-h1,
    body.vk .nw-hero__lead,
    body.vk .vk-hero__lead,
    body.vk .vk-pagehero__lead {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    body.vk .nw-hero__title small {
        text-align: center !important;
    }
    body.vk .nw-hero__cta,
    body.vk .vk-hero__cta,
    body.vk .vk-pagehero__cta {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    body.vk .nw-hero__cta a,
    body.vk .vk-hero__cta a,
    body.vk .vk-pagehero__cta a {
        flex: 1 1 240px;
        max-width: 320px;
        justify-content: center !important;
    }

    /* ---- Hero panel — center align rows ---- */
    body.vk .nw-hero__panel {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* ---- Section heads ---- */
    body.vk .nw-section__head,
    body.vk .vk-section__head {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* ---- ALL CARDS — center content on mobile ---- */
    body.vk .nw-agent-card,
    body.vk .nw-why-card,
    body.vk .nw-quote,
    body.vk .nw-social-card,
    body.vk .nw-blog-card,
    body.vk .nw-blog-card a,
    body.vk .vk-card,
    body.vk .vk-quote,
    body.vk .vk-blog__card,
    body.vk .vk-contact__card,
    body.vk .vk-social__card,
    body.vk .vk-pagefeature {
        text-align: center !important;
        align-items: center !important;
    }
    body.vk .nw-agent-card .nw-agent-card__badge,
    body.vk .nw-agent-card__sub,
    body.vk .nw-agent-card__title,
    body.vk .nw-agent-card__desc,
    body.vk .nw-why-card__title,
    body.vk .nw-why-card__desc,
    body.vk .nw-quote blockquote,
    body.vk .nw-social-card__title,
    body.vk .nw-social-card__desc,
    body.vk .nw-blog-card__title,
    body.vk .nw-blog-card__excerpt {
        text-align: center !important;
    }
    body.vk .nw-agent-card__badge,
    body.vk .nw-agent-card__cta,
    body.vk .nw-blog-card__cta,
    body.vk .nw-social-card__cta {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    body.vk .nw-agent-card__foot {
        flex-direction: column !important;
        gap: 8px;
    }

    /* ---- Why card icon centered, number disc still top-right ---- */
    body.vk .nw-why-card__icon {
        margin-left: auto !important;
        margin-right: auto !important;
        display: flex !important;
    }

    /* ---- Quote: center avatar + author block ---- */
    body.vk .nw-quote__rating {
        justify-content: center !important;
    }
    body.vk .nw-quote__foot,
    body.vk .vk-quote figcaption {
        justify-content: center !important;
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center !important;
    }
    body.vk .nw-quote__avatar,
    body.vk .vk-quote__avatar {
        margin: 0 auto !important;
    }
    body.vk .nw-quote__who { text-align: center !important; }

    /* ---- Live activity rows: stack content centered ---- */
    body.vk .nw-live__row {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 8px !important;
    }
    body.vk .nw-live__avatar {
        margin: 0 auto !important;
    }
    body.vk .nw-live__body {
        text-align: center !important;
    }
    body.vk .nw-live__who {
        justify-content: center !important;
    }
    body.vk .nw-live__time {
        align-self: center !important;
        padding-top: 0 !important;
    }

    /* ---- Steps: center numbers + text ---- */
    body.vk .nw-step {
        text-align: center !important;
        border-right: 0 !important;
        border-bottom: 1px dashed rgba(245, 177, 0, 0.18);
    }
    body.vk .nw-step:last-child { border-bottom: 0 !important; }
    body.vk .nw-step__num {
        margin-left: auto !important;
        margin-right: auto !important;
        display: flex !important;
    }

    /* ---- Social card top row centered ---- */
    body.vk .nw-social-card__top {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }
    body.vk .nw-social-card__count {
        text-align: center !important;
    }
    body.vk .nw-social-card__icon {
        margin: 0 auto !important;
    }

    /* ---- Blog card: meta + title + excerpt centered ---- */
    body.vk .nw-blog-card__meta {
        justify-content: center !important;
    }

    /* ---- FAQ summary: keep question left-aligned (long text), center on mobile ---- */
    body.vk .nw-faq__item summary,
    body.vk .vk-faq__item summary {
        text-align: left !important;       /* multi-line wraps cleanly */
        gap: 10px !important;
    }
    body.vk .nw-faq__answer,
    body.vk .vk-faq__answer {
        text-align: left !important;
    }

    /* ---- Final CTA buttons stack and center ---- */
    body.vk .nw-final__buttons,
    body.vk .vk-cta__buttons,
    body.vk .vk-pagecta__buttons,
    body.vk .vk-pagecta__cta,
    body.vk .nw-blog__more,
    body.vk .nw-faq__more {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    body.vk .nw-final__buttons a,
    body.vk .vk-cta__buttons a,
    body.vk .vk-pagecta__buttons a,
    body.vk .vk-pagecta__cta a,
    body.vk .nw-blog__more a,
    body.vk .nw-faq__more a {
        justify-content: center !important;
        text-align: center !important;
    }

    /* ---- Hero ticker — speed up on mobile so content cycles faster ---- */
    body.vk .nw-hero__ticker-track {
        animation-duration: 22s !important;
    }

    /* ---- Stat strip: 2-cols (already at 720) — center labels ---- */
    body.vk .nw-stat,
    body.vk .vk-stat {
        text-align: center !important;
    }

    /* ---- Footer CTA band stacked ---- */
    body.vk .nw-cta-band__inner {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 16px !important;
    }
    body.vk .nw-cta-band__btn {
        justify-self: center !important;
        margin: 0 auto !important;
    }
    body.vk .nw-cta-band__title,
    body.vk .nw-cta-band__sub,
    body.vk .nw-cta-band__eyebrow {
        text-align: center !important;
    }
    body.vk .nw-cta-band__eyebrow {
        justify-content: center !important;
    }

    /* ---- Footer grid: 1 column on small mobile, all centered ---- */
    body.vk .nw-foot__grid {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        text-align: center !important;
    }
    body.vk .nw-foot__brand p {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    body.vk .nw-foot__brand img {
        margin-left: auto !important;
        margin-right: auto !important;
        height: auto !important;
        max-height: 48px !important;
        width: auto !important;
        max-width: 200px !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        display: block !important;
    }
    body.vk .nw-foot__brand {
        overflow: visible !important;
        padding: 0 !important;
    }
    body.vk .nw-foot__brand,
    body.vk .nw-foot__col {
        text-align: center !important;
    }
    body.vk .nw-foot__h {
        padding-left: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    body.vk .nw-foot__h::before {
        position: static !important;
        transform: none !important;
        display: inline-block !important;
    }
    body.vk .nw-foot__col ul a {
        justify-content: center !important;
        gap: 6px !important;
    }
    body.vk .nw-foot__col ul a::before {
        display: none !important;            /* hover bar removed when centered */
    }
    body.vk .nw-foot__social {
        justify-content: center !important;
        display: flex !important;
    }
    body.vk .nw-foot__trust {
        justify-content: center !important;
        align-items: center !important;
    }
    body.vk .nw-foot__trust li {
        justify-content: center !important;
        text-align: left !important;
    }
    body.vk .nw-foot__bot {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 10px !important;
    }
    body.vk .nw-foot__bot-mid,
    body.vk .nw-foot__legal {
        justify-self: center !important;
        justify-content: center !important;
    }

    /* ---- 404 page ---- */
    body.vk .nw-404__num {
        font-size: clamp(72px, 30vw, 160px) !important;
    }
    body.vk .nw-404__buttons {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    body.vk .nw-404__buttons a {
        justify-content: center !important;
    }
    body.vk .nw-404__quicklinks {
        flex-direction: column !important;
        gap: 10px !important;
    }
}

/* ============================================================
   ≤ 480px — NARROW PHONE
   ============================================================ */
@media (max-width: 480px) {
    body.vk .nw-h2,
    body.vk .vk-h2 {
        font-size: 22px !important;
    }
    body.vk .nw-hero__title,
    body.vk .vk-hero__title,
    body.vk .vk-h1 {
        font-size: 28px !important;
        line-height: 1.15 !important;
    }
    body.vk .nw-hero__title small {
        font-size: 11px !important;
    }
    body.vk .nw-stat__num,
    body.vk .vk-stat__num {
        font-size: 24px !important;
    }
    body.vk .nw-stat__lbl,
    body.vk .vk-stat__lbl {
        font-size: 11px !important;
    }
    body.vk .nw-final__inner,
    body.vk .vk-pagecta__inner {
        padding: 28px 18px !important;
    }
    body.vk .nw-final h2 {
        font-size: 22px !important;
    }
    /* Tighten card paddings */
    body.vk .nw-agent-card,
    body.vk .nw-why-card,
    body.vk .nw-quote,
    body.vk .nw-social-card {
        padding: 16px 16px !important;
    }
    body.vk .nw-blog-card__body {
        padding: 14px 14px 16px !important;
    }
    /* Header bar */
    body.vk .nw-bar__inner {
        column-gap: 8px !important;
    }
    body.vk .nw-cta {
        padding: 0 12px !important;
        font-size: 11.5px !important;
        height: 32px !important;
    }
}

/* ============================================================
   GLOBAL — text wrapping safety on every screen
   ============================================================ */
body.vk .nw-h2,
body.vk .vk-h2,
body.vk .nw-hero__title,
body.vk .vk-h1,
body.vk .nw-hero__lead,
body.vk .vk-hero__lead,
body.vk .nw-lead,
body.vk .vk-lead {
    overflow-wrap: anywhere;
    word-break: normal;
}
body.vk img,
body.vk video {
    max-width: 100%;
    height: auto;
}
/* Scrollbar gutter — reserve space on the right only so the page flushes
   to the left edge. (Previous `both-edges` was reserving 15px on EACH side
   which created a visible left-edge gap on long pages.) Inner sections
   already use max-width + margin:0 auto so they remain visually centered. */
html {
    overflow-x: clip;
    scrollbar-gutter: stable;
}
body.vk { overflow-x: clip; }

/* ============================================================
   ENHANCED MOBILE — newer components + centering polish
   Covers: header, hero, .vk-quick provider slider, .vk-odds live
   table, live activity panel, banners, search panel
   ============================================================ */

/* --- Header bar: tighter, larger tap targets --- */
@media (max-width: 720px) {
    body.vk .nw-bar__inner {
        column-gap: 6px !important;
        padding-inline: 12px !important;
    }
    body.vk .nw-brand img {
        height: auto !important;
        max-height: 48px !important;
        width: auto !important;
        max-width: none !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        object-position: left center !important;
        display: block !important;
    }
    body.vk .nw-brand {
        flex-shrink: 0 !important;
        min-width: 0 !important;
        overflow: visible !important;
    }
    /* Make sure the bar grid gives the brand its full natural width */
    body.vk .nw-bar__inner {
        grid-template-columns: max-content 1fr max-content !important;
    }
    body.vk .nw-bar__cta { gap: 6px !important; }
    body.vk .nw-icon-btn,
    body.vk .nw-burger {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        flex-shrink: 0 !important;
    }
    body.vk .nw-icon-btn svg { width: 17px !important; height: 17px !important; }
    body.vk .nw-cta {
        padding: 0 12px !important;
        font-size: 12px !important;
        height: 36px !important;
        gap: 6px !important;
    }
    body.vk .nw-cta__icon { width: 16px !important; height: 16px !important; }
    /* Hide WhatsApp text label on narrow phones, keep icon */
    body.vk .nw-cta > span:last-child { display: none !important; }
}

/* --- Hero: full-width copy, panel under slider, slim slides --- */
@media (max-width: 980px) {
    body.vk .nw-hero__inner {
        grid-template-columns: 1fr !important;
    }
    body.vk .nw-hero__slider,
    body.vk .nw-hero__panel {
        max-width: 640px;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100%;
    }
}
@media (max-width: 720px) {
    body.vk .nw-hero__chip {
        font-size: 11px !important;
        padding: 4px 12px 4px 6px !important;
    }
    body.vk .nw-hero__bonus-amount { font-size: clamp(44px, 16vw, 78px) !important; }
    body.vk .nw-hero__bonus-line { font-size: clamp(15px, 4vw, 22px) !important; }
    body.vk .nw-hero__match {
        padding: 12px 10px !important;
        gap: 10px !important;
    }
    body.vk .nw-hero__match-flag {
        width: 36px !important; height: 36px !important; font-size: 12px !important;
    }
    body.vk .nw-hero__match-name { font-size: 12px !important; }
    body.vk .nw-hero__match-vs { font-size: 11px !important; }
    body.vk .nw-hero__match-time { font-size: 11px !important; }
    /* Slider arrows shrink */
    body.vk .nw-hero__arrow {
        width: 30px !important; height: 30px !important;
    }
    body.vk .nw-hero__arrow svg { width: 14px !important; height: 14px !important; }
    /* Live activity panel centered & full-width */
    body.vk .nw-hero__panel-h h3 { font-size: 13px !important; }
    body.vk .nw-hero__panel-live { font-size: 9.5px !important; }
    body.vk .nw-hero__panel-row {
        gap: 10px !important;
        padding: 10px 12px !important;
    }
    body.vk .nw-hero__panel-row__icon {
        width: 30px !important; height: 30px !important;
    }
    body.vk .nw-hero__panel-row__icon svg { width: 14px !important; height: 14px !important; }
    body.vk .nw-hero__panel-row__name { font-size: 12.5px !important; }
    body.vk .nw-hero__panel-row__sub { font-size: 11px !important; }
    body.vk .nw-hero__panel-row__time { font-size: 10.5px !important; }
}

/* --- Search panel — center close + better tap area --- */
@media (max-width: 720px) {
    body.vk .nw-search,
    body.vk .vk-search-panel {
        padding: 14px 14px 18px !important;
    }
    body.vk .vk-search-panel__close { width: 38px !important; height: 38px !important; }
    body.vk .nw-search__hint {
        line-height: 1.9 !important;
    }
    body.vk .nw-search__hint a {
        margin: 2px 3px !important;
    }
}

/* --- Provider slider (.vk-quick) — slim cards, centered text --- */
@media (max-width: 720px) {
    body.vk section.vk-quick {
        margin-top: 18px !important;
        padding: 0 10px !important;
    }
    body.vk section.vk-quick .vk-quick__head {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
    }
    body.vk section.vk-quick .vk-quick__title {
        flex: 1 1 100% !important;
        order: 3 !important;
        text-align: center !important;
        font-size: 13px !important;
    }
    body.vk section.vk-quick .vk-quick__eye { font-size: 9.5px !important; padding: 3px 9px !important; }
    body.vk section.vk-quick .vk-quick__nav {
        width: 34px !important; height: 34px !important;
    }
    body.vk section.vk-quick .vk-quick__card {
        width: 140px !important;
    }
    body.vk section.vk-quick .vk-quick__name { font-size: 10.5px !important; }
    body.vk section.vk-quick .vk-quick__track-wrap[data-vk-dir="reverse"] {
        margin-top: 6px !important;
    }
}
@media (max-width: 480px) {
    body.vk section.vk-quick .vk-quick__card { width: 124px !important; }
    body.vk section.vk-quick .vk-quick__track { gap: 8px !important; padding: 4px 2px 10px !important; }
}

/* --- Live odds (.vk-odds) — compact horizontal row design on mobile.
       Front-page.php holds the layout; this file only carries shared overrides
       (margin, header padding) so the two stay in lockstep. --- */
@media (max-width: 720px) {
    body.vk section.vk-odds {
        margin-top: 18px !important;
    }
    body.vk section.vk-odds .vk-odds__head {
        padding: 10px 14px !important;
    }
    body.vk section.vk-odds .vk-odds__title { font-size: 13.5px !important; }
    body.vk section.vk-odds .vk-odds__pulse { font-size: 9.5px !important; padding: 3px 9px !important; }
    body.vk section.vk-odds .vk-odds__updated { font-size: 9.5px !important; padding: 3px 8px !important; }
    body.vk section.vk-odds .vk-odds__bet { width: 100% !important; }
    body.vk section.vk-odds .vk-odds__foot {
        flex-direction: column !important;
        text-align: center !important;
        gap: 6px !important;
        padding: 8px 14px !important;
    }
}

/* --- Banner image slider — tighter on mobile --- */
@media (max-width: 720px) {
    body.vk .nw-banners {
        margin-top: 14px !important;
        padding: 0 10px !important;
    }
    body.vk .nw-banners__track img {
        border-radius: 12px !important;
    }
}

/* --- Game grid (.nw-games__grid) — better card density --- */
@media (max-width: 720px) {
    body.vk .nw-games {
        padding: 24px 14px !important;
    }
    body.vk .nw-games__title { font-size: 22px !important; }
    /* Stack title above subtabs and center both on mobile */
    body.vk .nw-games__head {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 12px !important;
    }
    body.vk .nw-games__title { width: 100% !important; text-align: center !important; }
    body.vk .nw-games__subtabs {
        margin: 0 auto !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    body.vk .nw-games__subtab {
        font-size: 11.5px !important;
        padding: 5px 12px !important;
    }
}

/* --- Sticky bottom CTA on very small phones (optional comfort tweak) --- */
@media (max-width: 480px) {
    body.vk .nw-bar__cta .nw-cta { /* keep the WhatsApp pill compact in cluster */
        padding: 0 10px !important;
        height: 34px !important;
    }
    body.vk .nw-cta__icon { width: 15px !important; height: 15px !important; }
}

/* --- Minimum tap-target safety: any interactive element gets at least 36px in narrow viewports --- */
@media (max-width: 720px) {
    body.vk button:not(.nw-hero__dot):not(.vk-quick__close),
    body.vk .nw-icon-btn,
    body.vk .nw-burger,
    body.vk a.nw-btn,
    body.vk a.nw-cta {
        min-height: 36px;
    }
}

/* --- Reduced-motion polish: respect prefers-reduced-motion for animations --- */
@media (prefers-reduced-motion: reduce) {
    body.vk section.vk-quick .vk-quick__track { scroll-behavior: auto !important; }
    body.vk section.vk-odds .vk-odds__bet.is-up,
    body.vk section.vk-odds .vk-odds__bet.is-down,
    body.vk .vk-quick__card,
    body.vk .nw-hero__bonus-tag::before { animation: none !important; transition: none !important; }
}