/* ==========================================================================
   9wickets — unified premium button language (loads LAST, after hero-v3)
   --------------------------------------------------------------------------
   Design system:
   - Shape: soft rectangle, 13px radius (moves away from full pills)
   - Primary: gold→amber gradient, charcoal ink text, soft gold shadow
   - Secondary (ghost/glass): white, 1.5px ink border, subtle warm fill on hover
   - WhatsApp: brand green kept, reshaped to the same radius/shadow language
   - Hover: 2px lift, deeper shadow, gradient shift, icon nudges right
   - focus-visible ring + prefers-reduced-motion respected
   The wickets-home.css retrofit layers use !important on these classes; this
   file wins by matching specificity (+ !important) later in the cascade.
   ========================================================================== */

body.vk {
    --btn-r: 13px;
    --btn-ink: #1A1813;
    --btn-grad: linear-gradient(135deg, #FFD34D 0%, #F7B500 48%, #E8940A 100%);
    --btn-grad-hover: linear-gradient(135deg, #FFDE70 0%, #FFC22A 48%, #F29D0C 100%);
    --btn-shadow: 0 8px 20px -6px rgba(200, 134, 11, 0.45), 0 1px 0 rgba(255, 255, 255, 0.45) inset;
    --btn-shadow-hover: 0 15px 32px -8px rgba(200, 134, 11, 0.58), 0 1px 0 rgba(255, 255, 255, 0.55) inset;
    --btn-wa-grad: linear-gradient(135deg, #2EE372 0%, #25D366 52%, #16A57A 100%);
    --btn-wa-shadow: 0 8px 20px -6px rgba(31, 170, 90, 0.50), 0 1px 0 rgba(255, 255, 255, 0.35) inset;
    --btn-wa-shadow-hover: 0 15px 32px -8px rgba(31, 170, 90, 0.62), 0 1px 0 rgba(255, 255, 255, 0.45) inset;
}

/* ---- 1. Core .vk-btn (hero CTAs, verify section, final CTA, header, footer,
        mobile menu). Sizing kept close to old scale = no layout shifts. ---- */
body.vk .vk-btn {
    border-radius: var(--btn-r) !important;
    gap: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
}
body.vk .vk-btn--sm { border-radius: 11px !important; gap: 8px !important; }
body.vk .vk-btn svg {
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.15, 1);
}
body.vk .vk-btn:hover svg { transform: translateX(3px); }
body.vk .vk-btn:focus-visible {
    outline: 2.5px solid #B5830F !important;
    outline-offset: 3px !important;
}

/* Primary — gold→amber gradient, ink text */
body.vk .vk-btn--primary {
    background: var(--btn-grad) !important;
    color: var(--btn-ink) !important;
    border: 1px solid rgba(184, 122, 8, 0.55) !important;
    text-shadow: none !important;
    box-shadow: var(--btn-shadow) !important;
}
body.vk .vk-btn--primary svg { color: var(--btn-ink) !important; stroke: var(--btn-ink) !important; }
body.vk .vk-btn--primary:hover {
    background: var(--btn-grad-hover) !important;
    color: var(--btn-ink) !important;
    border-color: rgba(184, 122, 8, 0.75) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--btn-shadow-hover) !important;
}
body.vk .vk-btn--primary:hover svg { color: var(--btn-ink) !important; stroke: var(--btn-ink) !important; }
body.vk .vk-btn--primary:active { transform: translateY(0) !important; }

/* Secondary — white, 1.5px ink border; warm fill on hover */
body.vk .vk-btn--ghost,
body.vk .vk-btn--glass {
    background: #FFFFFF !important;
    border: 1.5px solid var(--btn-ink) !important;
    color: var(--btn-ink) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 14px -6px rgba(26, 24, 19, 0.28) !important;
}
body.vk .vk-btn--ghost svg,
body.vk .vk-btn--glass svg { color: var(--btn-ink) !important; stroke: var(--btn-ink) !important; }
body.vk .vk-btn--ghost:hover,
body.vk .vk-btn--glass:hover {
    background: #FFF3D1 !important;
    border-color: #B5830F !important;
    color: var(--btn-ink) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 26px -8px rgba(200, 134, 11, 0.40) !important;
}
body.vk .vk-btn--ghost:hover svg,
body.vk .vk-btn--glass:hover svg { color: #B5830F !important; stroke: #B5830F !important; }

/* WhatsApp — green identity, new shape/shadow language */
body.vk .vk-btn--whatsapp {
    background: var(--btn-wa-grad) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(14, 128, 92, 0.55) !important;
    text-shadow: 0 1px 0 rgba(0, 60, 30, 0.25) !important;
    box-shadow: var(--btn-wa-shadow) !important;
}
body.vk .vk-btn--whatsapp:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--btn-wa-shadow-hover) !important;
}
body.vk .vk-btn--whatsapp:active { transform: translateY(0) !important; }

/* Header সাপোর্ট — designed exception: ink fill + gold label for contrast
   against the gold header band (gold-on-gold would vanish). */
body.vk .vk-header .vk-btn--primary.vk-cta-pulse {
    background: #1A1813 !important;
    color: #F7B500 !important;
    border: 1px solid #1A1813 !important;
    box-shadow: 0 6px 16px -5px rgba(26, 24, 19, 0.45) !important;
}
body.vk .vk-header .vk-btn--primary.vk-cta-pulse svg { color: #F7B500 !important; stroke: #F7B500 !important; }
body.vk .vk-header .vk-btn--primary.vk-cta-pulse:hover {
    background: #000000 !important;
    color: #FFC22A !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 22px -6px rgba(26, 24, 19, 0.55) !important;
}
body.vk .vk-header .vk-btn--primary.vk-cta-pulse:hover svg { color: #FFC22A !important; stroke: #FFC22A !important; }
/* pulse ring follows the new radius */
body.vk .vk-cta-pulse::before { border-radius: 14px !important; }

/* Header search icon button — squircle to match */
body.vk .vk-icon-btn {
    border-radius: 12px !important;
    border-width: 1.5px !important;
}

/* ---- 2. Card CTAs (.vk-card__cta) & social CTAs (.vk-social__cta) ----
   These sit on gold surfaces: ink squircle chip + gold glyph (high contrast,
   mirrors the plink arrow chip). Specificity matches the retrofit's
   .vk-card--agent rule so the 999px radius is beaten. */
body.vk .vk-card__cta i, body.vk .vk-card__cta svg,
body.vk .vk-card--agent .vk-card__cta svg,
body.vk .vk-social__cta i, body.vk .vk-social__cta svg,
body.vk .vk-social__card .vk-social__cta i {
    border-radius: 9px !important;
    background: var(--btn-ink) !important;
    color: #F7B500 !important;
    fill: #F7B500 !important;
    stroke: #F7B500 !important;
    box-shadow: 0 3px 10px -3px rgba(26, 24, 19, 0.50) !important;
}

/* ---- 3. Platform rows' "অফিসিয়াল ভিজিট" (.vk-plink__go) ----
   Dark pill → gold-gradient rectangle with dark arrow chip. */
body.vk .vk-plink__go {
    border-radius: var(--btn-r) !important;
    background: var(--btn-grad) !important;
    border: 1px solid rgba(184, 122, 8, 0.55) !important;
    color: var(--btn-ink) !important;
    box-shadow: var(--btn-shadow) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
}
body.vk .vk-plink__go-label { color: var(--btn-ink) !important; }
body.vk .vk-plink__go-arrow {
    border-radius: 8px !important;
    background: var(--btn-ink) !important;
    border-color: var(--btn-ink) !important;
    color: #F7B500 !important;
}
body.vk .vk-plink__go-arrow svg { color: #F7B500 !important; stroke: #F7B500 !important; }
body.vk .vk-plink:hover .vk-plink__go {
    background: var(--btn-grad-hover) !important;
    color: var(--btn-ink) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--btn-shadow-hover) !important;
}
body.vk .vk-plink:hover .vk-plink__go-label { color: var(--btn-ink) !important; }
body.vk .vk-plink:hover .vk-plink__go-arrow { transform: translateX(3px) !important; }

/* ---- 4. Hero agent-card buttons (.hv3-abtn) ---- */
body.vk .hv3-abtn { border-radius: 11px; }
body.vk .hv3-abtn--wa {
    background: var(--btn-wa-grad);
    box-shadow: 0 6px 16px -5px rgba(31, 170, 90, 0.55), 0 1px 0 rgba(255, 255, 255, 0.30) inset;
}
body.vk .hv3-abtn--wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -6px rgba(31, 170, 90, 0.65), 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}
body.vk .hv3-abtn--all {
    background: var(--btn-grad);
    color: var(--btn-ink) !important;
    border: 1px solid rgba(184, 122, 8, 0.55);
    box-shadow: 0 6px 16px -5px rgba(200, 134, 11, 0.50);
}
body.vk .hv3-abtn--all:hover {
    background: var(--btn-grad-hover);
    color: var(--btn-ink) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -6px rgba(200, 134, 11, 0.60);
}
body.vk .hv3-abtn--all svg { color: var(--btn-ink); stroke: var(--btn-ink); }

/* ---- 5. Hero official-link go chips (.hv3-link__go) ---- */
body.vk .hv3-link__go {
    border-radius: 8px;
    background: var(--btn-grad);
    color: var(--btn-ink);
    box-shadow: 0 3px 10px -3px rgba(200, 134, 11, 0.55);
}

/* ---- 6. Elementor kit buttons (inner pages insurance) ---- */
body.vk .elementor-button {
    border-radius: var(--btn-r) !important;
    background: var(--btn-grad) !important;
    color: var(--btn-ink) !important;
    border: 1px solid rgba(184, 122, 8, 0.55) !important;
    box-shadow: var(--btn-shadow) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
body.vk .elementor-button:hover {
    background: var(--btn-grad-hover) !important;
    color: var(--btn-ink) !important;
    transform: translateY(-2px);
    box-shadow: var(--btn-shadow-hover) !important;
}

/* ---- 7. Accessibility: visible focus for every interactive family ---- */
body.vk .hv3-abtn:focus-visible,
body.vk .hv3-link:focus-visible,
body.vk .vk-plink:focus-visible,
body.vk .vk-card__cta:focus-visible,
body.vk .vk-social__cta:focus-visible,
body.vk .vk-icon-btn:focus-visible,
body.vk .elementor-button:focus-visible {
    outline: 2.5px solid #B5830F !important;
    outline-offset: 3px !important;
}

/* ---- 8. Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    body.vk .vk-btn, body.vk .vk-btn svg,
    body.vk .vk-btn--primary, body.vk .vk-btn--ghost, body.vk .vk-btn--glass,
    body.vk .vk-btn--whatsapp,
    body.vk .vk-plink__go, body.vk .vk-plink__go-arrow,
    body.vk .hv3-abtn, body.vk .hv3-link__go,
    body.vk .elementor-button {
        transition: none !important;
        transform: none !important;
    }
    body.vk .vk-cta-pulse::before { animation: none !important; }
}