/*!
 * 9wickets Pro — Inner Pages ("Stadium Night")
 * Loaded on every page EXCEPT the front page. Applies the same compact +
 * centered treatment we used on the home redesign to the legacy .vk-* classes
 * that inner page templates still use — without touching their PHP.
 *
 * All overrides are scoped to body.vk so they win against velki-home.css.
 */

/* ============================================================
   1. HERO (vk-pagehero / vk-hero)
   ============================================================ */
body.vk .vk-pagehero,
body.vk .vk-hero {
    padding: clamp(56px, 7vw, 96px) clamp(16px, 4vw, 56px) clamp(36px, 4.5vw, 64px) !important;
    min-height: 0 !important;
}

body.vk .vk-pagehero__inner,
body.vk .vk-hero__inner {
    padding: 0 !important;
    max-width: 1320px;
    margin: 0 auto !important;
    text-align: center !important;
    display: block !important;
}
body.vk .vk-pagehero__inner > *,
body.vk .vk-hero__inner > * {
    margin-left: auto !important;
    margin-right: auto !important;
}

body.vk .vk-pagehero .vk-eyebrow,
body.vk .vk-hero .vk-eyebrow {
    justify-content: center;
}

body.vk .vk-pagehero__title,
body.vk .vk-hero__title,
body.vk .vk-h1 {
    font-family: var(--vk-font-bn) !important;
    font-weight: 700 !important;
    font-size: clamp(28px, 4vw, 48px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.012em !important;
    margin: 0 auto 16px !important;
    color: var(--vk-text);
    text-align: center !important;
}

body.vk .vk-pagehero__title em,
body.vk .vk-hero__title em,
body.vk .vk-h1 em {
    font-style: normal !important;
    background: var(--vk-grad-text) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

body.vk .vk-pagehero__lead,
body.vk .vk-hero__lead,
body.vk .vk-pagehero p.vk-lead,
body.vk .vk-hero p.vk-lead {
    font-size: clamp(13.5px, 1.05vw, 15.5px) !important;
    line-height: 1.65 !important;
    margin: 0 auto 22px !important;
    max-width: 56ch !important;
    color: var(--vk-text-mid);
    text-align: center !important;
    display: block !important;
}
body.vk .vk-pagehero__lead strong,
body.vk .vk-hero__lead strong {
    color: var(--vk-gold-2);
    font-family: var(--vk-font-en);
    font-weight: 800;
}

/* Stat strip below hero — compact + centered */
body.vk .vk-hero__stats,
body.vk .vk-pagehero__stats {
    margin-top: clamp(20px, 2.6vw, 32px) !important;
    gap: clamp(16px, 2vw, 28px) !important;
    justify-content: center !important;
}
body.vk .vk-stat {
    text-align: center !important;
    padding: 12px 16px !important;
}
body.vk .vk-stat__num {
    font-size: clamp(22px, 2.6vw, 32px) !important;
    line-height: 1 !important;
}
body.vk .vk-stat__lbl {
    font-size: 12px !important;
    margin-top: 4px !important;
}

/* Hero CTA group */
body.vk .vk-hero__cta,
body.vk .vk-pagehero__cta {
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 6px !important;
}

/* ============================================================
   2. EYEBROW — centered with bilateral kicker line
   ============================================================ */
body.vk .vk-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--vk-gold-2) !important;
    font-family: var(--vk-font-en) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
body.vk .vk-eyebrow::before {
    content: "" !important;
    width: 22px !important;
    height: 1px !important;
    background: var(--vk-gold) !important;
    border: 0 !important;
}
/* Bilateral line on centered section heads */
body.vk .vk-section__head .vk-eyebrow::after {
    content: "" !important;
    width: 22px !important;
    height: 1px !important;
    background: var(--vk-gold) !important;
}

/* ============================================================
   3. SECTIONS (vk-section) — compact paddings + centered head
   ============================================================ */
body.vk .vk-section {
    padding: clamp(36px, 4.5vw, 64px) clamp(16px, 4vw, 56px) !important;
    max-width: 1320px;
    margin: 0 auto;
}

body.vk .vk-section__head {
    max-width: 720px !important;
    margin: 0 auto clamp(20px, 2.4vw, 32px) !important;
    text-align: center !important;
}
body.vk .vk-section__head .vk-eyebrow { justify-content: center; }
body.vk .vk-section__head .vk-lead {
    margin-left: auto !important;
    margin-right: auto !important;
}

body.vk .vk-h2 {
    font-family: var(--vk-font-bn) !important;
    font-weight: 700 !important;
    font-size: clamp(22px, 2.6vw, 32px) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.005em !important;
    margin: 0 0 10px !important;
    color: var(--vk-text);
}
body.vk .vk-h2 em {
    font-style: normal !important;
    background: var(--vk-grad-text) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

body.vk .vk-lead {
    margin: 0 !important;
    font-size: clamp(13.5px, 1.05vw, 15px) !important;
    line-height: 1.6 !important;
    color: var(--vk-text-mid);
    max-width: 62ch;
}

/* ============================================================
   4. BUTTONS — match home pill style
   ============================================================ */
body.vk .vk-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 11px 18px !important;
    border-radius: 999px !important;
    font-family: var(--vk-font-en) !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
    line-height: 1 !important;
}
body.vk .vk-btn--primary {
    background: var(--vk-grad-gold) !important;
    color: #0A0500 !important;
    border: 0 !important;
    box-shadow:
        0 14px 36px rgba(245, 177, 0, 0.30),
        0 0 0 1px rgba(245, 177, 0, 0.50) inset !important;
}
body.vk .vk-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 20px 50px rgba(245, 177, 0, 0.45),
        0 0 0 1px rgba(245, 177, 0, 0.78) inset !important;
}
body.vk .vk-btn--ghost,
body.vk .vk-btn--glass {
    color: var(--vk-text) !important;
    background: rgba(255, 255, 255, 0.015) !important;
    border: 1px solid rgba(245, 177, 0, 0.32) !important;
    box-shadow: none !important;
}
body.vk .vk-btn--ghost:hover,
body.vk .vk-btn--glass:hover {
    color: var(--vk-gold-2) !important;
    border-color: var(--vk-gold) !important;
    background: rgba(245, 177, 0, 0.06) !important;
    transform: translateY(-2px);
}
body.vk .vk-btn--whatsapp {
    background: rgba(255, 255, 255, 0.018) !important;
    color: var(--vk-text) !important;
    border: 1px solid rgba(245, 177, 0, 0.32) !important;
    box-shadow: none !important;
}
body.vk .vk-btn--whatsapp:hover {
    color: var(--vk-gold-2) !important;
    border-color: var(--vk-gold) !important;
    background: rgba(245, 177, 0, 0.06) !important;
    transform: translateY(-2px);
}
body.vk .vk-btn--lg { padding: 14px 22px !important; font-size: 13.5px !important; }
body.vk .vk-btn--xl { padding: 16px 26px !important; font-size: 14px !important; }
body.vk .vk-btn svg { width: 14px !important; height: 14px !important; }

/* ============================================================
   5. CARDS — Stadium Night surface + centered text (text-align only,
   no flex/layout changes that could break legacy positioning).
   ============================================================ */
body.vk .vk-card,
body.vk .vk-card--agent,
body.vk .vk-card--why,
body.vk .vk-quote,
body.vk .vk-blog__card,
body.vk .vk-faq__item,
body.vk .vk-contact__card,
body.vk .vk-social__card,
body.vk .vk-support__card,
body.vk .vk-pagefeature {
    background: linear-gradient(180deg,
        rgba(20, 22, 31, 0.55),
        rgba(10, 11, 16, 0.50)) !important;
    border: 1px solid rgba(245, 177, 0, 0.16) !important;
    text-align: center !important;
    align-items: center !important;
}
body.vk .vk-card:hover,
body.vk .vk-quote:hover,
body.vk .vk-blog__card:hover,
body.vk .vk-faq__item[open],
body.vk .vk-contact__card:hover,
body.vk .vk-social__card:hover,
body.vk .vk-support__card:hover,
body.vk .vk-pagefeature:hover {
    border-color: rgba(245, 177, 0, 0.40) !important;
}

/* Center every text-bearing element inside cards (badge, title, sub, desc, meta, CTA, kicker) */
body.vk .vk-card .vk-card__badge,
body.vk .vk-card .vk-card__title,
body.vk .vk-card .vk-card__sub,
body.vk .vk-card .vk-card__desc,
body.vk .vk-card .vk-card__meta,
body.vk .vk-card .vk-card__cta,
body.vk .vk-card .vk-card__kicker,
body.vk .vk-pagefeature .vk-pagefeature__title,
body.vk .vk-pagefeature .vk-pagefeature__desc,
body.vk .vk-quote blockquote,
body.vk .vk-quote figcaption {
    text-align: center !important;
}

/* ============================================================
   6. FAQ accordion — match home compact look
   ============================================================ */
body.vk .vk-faq__list {
    max-width: 920px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
}
body.vk .vk-faq__item {
    border-radius: 16px !important;
    overflow: hidden;
}
body.vk .vk-faq__item summary {
    padding: 14px 20px !important;
    font-size: 14px !important;
    font-weight: 600;
    color: var(--vk-text);
}
body.vk .vk-faq__answer,
body.vk .vk-faq__item[open] > div,
body.vk .vk-faq__item[open] > .vk-faq__answer {
    padding: 0 20px 18px !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    color: var(--vk-text-mid) !important;
}

/* ============================================================
   7. CTA SECTIONS at bottom of inner pages (vk-pagecta)
   ============================================================ */
body.vk .vk-pagecta {
    padding: clamp(36px, 5vw, 64px) clamp(16px, 4vw, 56px) !important;
    max-width: 1320px;
    margin: clamp(20px, 3vw, 40px) auto 0 !important;
}
body.vk .vk-pagecta__inner {
    text-align: center !important;
    padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px) !important;
    background: linear-gradient(135deg, #1A1208 0%, #0E0A04 60%) !important;
    border: 1px solid rgba(245, 177, 0, 0.32) !important;
    border-radius: clamp(16px, 2.4vw, 24px) !important;
    max-width: 960px;
    margin: 0 auto !important;
}
body.vk .vk-pagecta .vk-eyebrow { justify-content: center; }
body.vk .vk-pagecta .vk-h2,
body.vk .vk-pagecta .vk-h1 {
    margin-bottom: 10px !important;
    font-size: clamp(22px, 3vw, 36px) !important;
}
body.vk .vk-pagecta .vk-lead {
    margin: 0 auto 22px !important;
    max-width: 56ch;
}
body.vk .vk-pagecta__buttons,
body.vk .vk-pagecta__cta {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
}

/* ============================================================
   8. ORB / GLOW BACKDROPS — neutralize legacy violet/cyan glows
   ============================================================ */
body.vk .vk-orb,
body.vk .vk-pagehero .vk-orb,
body.vk .vk-hero .vk-orb {
    background: radial-gradient(closest-side,
        rgba(245, 177, 0, 0.18),
        transparent 70%) !important;
    filter: none !important;
}
body.vk .vk-orb--b,
body.vk .vk-orb--cta-b {
    background: radial-gradient(closest-side,
        rgba(211, 32, 48, 0.14),
        transparent 70%) !important;
}

/* ============================================================
   9. BLOG INDEX & ARCHIVE — match home blog cards
   ============================================================ */
body.vk .vk-blog__grid,
body.vk .vk-blog .vk-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(20px, 2.4vw, 28px);
}
body.vk .vk-blog__card {
    border-radius: 20px !important;
    overflow: hidden;
}
body.vk .vk-blog__title {
    font-size: 16px !important;
    line-height: 1.32 !important;
    margin: 0 0 6px !important;
}
body.vk .vk-blog__excerpt {
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    color: var(--vk-text-mid);
}
body.vk .vk-blog__meta {
    font-size: 11px !important;
    color: var(--vk-text-dim);
}

/* ============================================================
   10. SEARCH INPUT (FAQ + listing) — premium gold-bordered field
   ============================================================ */
body.vk .vk-search-box,
body.vk .vk-faq__search,
body.vk .vk-pagelist__search {
    max-width: 720px !important;
    margin: 16px auto 0 !important;
    padding: 10px 16px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(245, 177, 0, 0.28) !important;
    border-radius: 14px !important;
}
body.vk .vk-search-box input,
body.vk .vk-faq__search input {
    color: var(--vk-text) !important;
    font-size: 14px !important;
}

/* ============================================================
   11. DEFENSIVE — strip lingering large vertical rhythm
   ============================================================ */
body.vk:not(.vk-home) main { margin-top: 0 !important; }
body.vk .vk-section + .vk-section { margin-top: 0 !important; }
body.vk .vk-pagehero__bg span { opacity: 0.6 !important; }

/* ============================================================
   12. AGENT AVATARS — unify rainbow palette to Stadium Night
   (Used by [velki_agent_list] shortcode on agent + customer service pages)
   ============================================================ */
body.vk .agent-avatar--v1 { background: linear-gradient(135deg, #FFD66B 0%, #C98800 100%) !important; color: #0A0500 !important; }  /* hot gold */
body.vk .agent-avatar--v2 { background: linear-gradient(135deg, #C98800 0%, #8B5A0E 100%) !important; color: #FFE6A3 !important; }  /* deep amber */
body.vk .agent-avatar--v3 { background: linear-gradient(135deg, #FFE6A3 0%, #C9A65C 100%) !important; color: #2A1A00 !important; }  /* champagne */
body.vk .agent-avatar--v4 { background: linear-gradient(135deg, #E63A48 0%, #B11A29 100%) !important; color: #FFF5F0 !important; }  /* cricket-ball red */
body.vk .agent-avatar--v5 { background: linear-gradient(135deg, #B97818 0%, #6E4A0E 100%) !important; color: #FFE6A3 !important; }  /* bronze */

/* Customer-service contact card — strip leftover violet */
body.vk .vk-contact--phone {
    --brand: #F5B100 !important;
    --ctc:    rgba(245, 177, 0, 0.14) !important;
    --ctc-hi: rgba(245, 177, 0, 0.28) !important;
    color: var(--vk-gold-2) !important;
}
/* Hotline / complaint stays cricket-ball red — already correct */

/* ============================================================
   13. LOTTERY PLUGIN — rebrand to Stadium Night
   Overrides .lms-lottery-wrapper and .lms-archive-shell tokens.
   ============================================================ */
body.vk .lms-lottery-wrapper,
body.vk .lms-archive-shell {
    --noir-1:        #0A0B10 !important;     /* main bg */
    --noir-2:        #14161F !important;     /* surface */
    --noir-3:        #1B1D2A !important;     /* elevated surface */
    --noir-soft:     #252735 !important;
    --gold-50:       #FFF8E1 !important;
    --gold-100:      #FFE6A3 !important;
    --gold-300:      #FFD66B !important;
    --gold-400:      #F5B100 !important;
    --gold-500:      #F5B100 !important;     /* signature */
    --gold-600:      #C98800 !important;
    --gold-700:      #8B5A0E !important;
    --gold-grad:     linear-gradient(135deg, #FFD66B 0%, #F5B100 50%, #C98800 100%) !important;
    --cream:         #F2F0EA !important;
    --paper:         #0A0B10 !important;     /* dark paper for archive */
    --hairline:      rgba(245, 177, 0, 0.32) !important;
    --hairline-soft: rgba(245, 177, 0, 0.14) !important;
    --ink:           #F2F0EA !important;     /* on-dark */
    --ink-soft:      #B6B0A2 !important;
    --ink-mute:      #6E6857 !important;
    --velvet:        #D32030 !important;     /* cricket-ball red */
    --emerald:       #7FB069 !important;
    --accent:        #F5B100 !important;
    --accent-soft:   rgba(245, 177, 0, 0.14) !important;
    background: var(--noir-1) !important;
    color: var(--ink) !important;
}

/* Lottery — text on white surfaces should still read */
body.vk .lms-lottery-wrapper .lms-paper,
body.vk .lms-archive-shell .lms-paper { color: var(--ink) !important; }

/* Archive page tweaks */
body.vk .lms-archive-shell { padding-bottom: 32px !important; }
body.vk .lms-archive-shell .lms-archive-tag,
body.vk .lms-archive-shell h1,
body.vk .lms-archive-shell h2 { color: var(--ink) !important; }

/* ============================================================
   14. QUIZ PLUGIN — rebrand to Stadium Night
   Overrides .qms-quiz-wrapper local tokens (the plugin uses
   :root vars but our scope-bumped selector wins).
   ============================================================ */
body.vk .qms-quiz-wrapper,
body.vk .qms-quiz-archive,
body.vk .qms-list {
    --qms-primary:       #F5B100 !important;
    --qms-primary-dark:  #C98800 !important;
    --qms-primary-light: #FFD66B !important;
    --qms-accent:        #FFD66B !important;
    --qms-gold:          #F5B100 !important;
    --qms-success:       #7FB069 !important;
    --qms-danger:        #D32030 !important;
    --qms-warning:       #FFD66B !important;
    --qms-dark:          #0A0B10 !important;
    --qms-dark-2:        #14161F !important;
    --qms-text:          #F2F0EA !important;
    --qms-text-muted:    #B6B0A2 !important;
    --qms-border:        rgba(245, 177, 0, 0.18) !important;
    --qms-bg:            #0A0B10 !important;
    --qms-white:         #14161F !important;       /* "white" surfaces become charcoal */
    background: var(--qms-bg) !important;
    color: var(--qms-text) !important;
    font-family: var(--vk-font-bn), 'Sora', system-ui, sans-serif !important;
}
body.vk .qms-quiz-wrapper .qms-card,
body.vk .qms-quiz-wrapper .qms-panel,
body.vk .qms-quiz-wrapper .qms-question-card,
body.vk .qms-quiz-wrapper .qms-sidebar,
body.vk .qms-quiz-archive .qms-card,
body.vk .qms-list .qms-card {
    background: linear-gradient(180deg, rgba(20, 22, 31, 0.65), rgba(10, 11, 16, 0.55)) !important;
    border: 1px solid rgba(245, 177, 0, 0.16) !important;
    color: var(--qms-text) !important;
}
body.vk .qms-quiz-wrapper a { color: var(--qms-primary-light) !important; }
body.vk .qms-quiz-wrapper button,
body.vk .qms-quiz-wrapper .qms-btn {
    background: var(--vk-grad-gold) !important;
    color: #0A0500 !important;
    border: 0 !important;
    box-shadow:
        0 14px 36px rgba(245, 177, 0, 0.30),
        0 0 0 1px rgba(245, 177, 0, 0.50) inset !important;
}

/* ============================================================
   15. SINGLE BLOG POST — fix legacy cyan bullet diamonds → gold
   ============================================================ */
body.vk .vk-post,
body.vk .vk-post__body,
body.vk article.vk-post {
    --vk-cyan: #FFD66B;            /* sneak gold into legacy cyan slot */
    --vk-grad-cyan: var(--vk-grad-gold);
}
body.vk .vk-post__body ul li::marker,
body.vk .vk-post__body ol li::marker {
    color: var(--vk-gold-2);
}
body.vk .vk-post__body ul li::before {
    color: var(--vk-gold) !important;
    background: var(--vk-gold) !important;
}
/* Pull-quotes / table-of-contents accents */
body.vk .vk-post__toc-title,
body.vk .vk-post__pullquote,
body.vk .vk-post__toc a:hover { color: var(--vk-gold-2) !important; }