/* ═══════════════════════════════════════════════════════════════
 * TemplateHouse Block Toolkit – Global Frontend Design Polish (v2)
 * Modern, eye-catching upgrades for all blocks.
 * No ::before/::after injection (blocks already use them).
 * Attribute / inline colors stay untouched.
 * ═══════════════════════════════════════════════════════════════ */

:root {
    --bblockx-polish-accent: #2563eb;
    --bblockx-polish-accent-soft: rgba(37, 99, 235, 0.10);
    --bblockx-polish-accent-mid: rgba(37, 99, 235, 0.20);
    --bblockx-polish-ink: #0f172a;
    --bblockx-polish-radius-sm: 10px;
    --bblockx-polish-radius-md: 14px;
    --bblockx-polish-radius-lg: 18px;
    --bblockx-polish-radius-xl: 22px;
    --bblockx-polish-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --bblockx-polish-shadow-md: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.08);
    --bblockx-polish-shadow-lg: 0 6px 16px rgba(15, 23, 42, 0.06), 0 18px 40px rgba(37, 99, 235, 0.10);
    --bblockx-polish-shadow-hover: 0 14px 36px rgba(37, 99, 235, 0.14), 0 4px 10px rgba(15, 23, 42, 0.05);
    --bblockx-polish-ease: 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Shared box model ───────────────────────────────────────── */
[class*="bblockx-"] *,
[class*="bblockx-"] *::before,
[class*="bblockx-"] *::after,
[class^="bkqp-"] *,
[class*=" bkqp-"] * {
    box-sizing: border-box;
}

/* ── Typography snap ────────────────────────────────────────── */
[class*="bblockx-"] h1,
[class*="bblockx-"] h2,
[class*="bblockx-"] h3,
[class*="bblockx-"][class*="-title"],
[class*="bblockx-"][class*="-heading"],
[class*="bblockx-"][class*="-name"] {
    letter-spacing: -0.02em;
}

/* ── Card / panel / tile shells ─────────────────────────────── */
[class*="bblockx-"][class*="-card"],
[class*="bblockx-"][class*="-panel"],
[class*="bblockx-"][class*="-box"]:not([class*="-checkbox"]):not([class*="-textbox"]),
[class*="bblockx-"][class*="-tile"],
[class*="bblockx-"][class*="-item-card"],
[class*="bblockx-"][class*="-plan"],
[class*="bblockx-"][class*="-member"],
[class*="bblockx-"][class*="-feature"] {
    transition:
        transform var(--bblockx-polish-ease),
        box-shadow var(--bblockx-polish-ease),
        border-color var(--bblockx-polish-ease),
        background-color var(--bblockx-polish-ease),
        filter var(--bblockx-polish-ease),
        opacity var(--bblockx-polish-ease);
}

@media (hover: hover) and (pointer: fine) {
    [class*="bblockx-"][class*="-card"]:hover,
    [class*="bblockx-"][class*="-tile"]:hover,
    [class*="bblockx-"][class*="-plan"]:hover,
    [class*="bblockx-"][class*="-feature"]:hover,
    [class*="bblockx-"][class*="-member"]:hover {
        border-color: var(--bblockx-polish-accent-mid);
        filter: saturate(1.05);
    }
}

/* ── Buttons / CTAs ─────────────────────────────────────────── */
[class*="bblockx-"][class*="-btn"],
[class*="bblockx-"][class*="-button"],
[class*="bblockx-"][class*="-cta"] {
    transition:
        transform var(--bblockx-polish-ease),
        box-shadow var(--bblockx-polish-ease),
        opacity var(--bblockx-polish-ease),
        background-color var(--bblockx-polish-ease),
        color var(--bblockx-polish-ease),
        border-color var(--bblockx-polish-ease),
        filter var(--bblockx-polish-ease);

}

[class*="bblockx-"][class*="-btn"]:hover,
[class*="bblockx-"][class*="-button"]:hover,
[class*="bblockx-"][class*="-cta"]:hover {
    filter: brightness(1.05) saturate(1.06);
}

[class*="bblockx-"][class*="-btn"]:active,
[class*="bblockx-"][class*="-button"]:active,
[class*="bblockx-"][class*="-cta"]:active {
    transform: translateY(0) scale(1);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    filter: brightness(0.98);
}

/* ── Chips / badges / pills / tags ──────────────────────────── */
[class*="bblockx-"][class*="-chip"],
[class*="bblockx-"][class*="-pill"],
[class*="bblockx-"][class*="-badge"],
[class*="bblockx-"][class*="-tag"],
[class*="bblockx-"][class*="-skill"] {
    transition:
        transform var(--bblockx-polish-ease),
        box-shadow var(--bblockx-polish-ease),
        background-color var(--bblockx-polish-ease),
        color var(--bblockx-polish-ease),
        border-color var(--bblockx-polish-ease);
}

@media (hover: hover) and (pointer: fine) {
    [class*="bblockx-"][class*="-chip"]:hover,
    [class*="bblockx-"][class*="-pill"]:hover,
    [class*="bblockx-"][class*="-tag"]:hover,
    [class*="bblockx-"][class*="-skill"]:hover,
    [class*="bblockx-"][class*="-badge"]:hover {
       
        box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
    }
}

/* ── Icons ──────────────────────────────────────────────────── */
[class*="bblockx-"][class*="-icon"],
[class*="bblockx-"][class*="-icon-wrap"],
[class*="bblockx-"][class*="-icon-box"],
[class*="bblockx-"][class*="-num"] {
    transition:
        transform var(--bblockx-polish-ease),
        background-color var(--bblockx-polish-ease),
        color var(--bblockx-polish-ease),
        box-shadow var(--bblockx-polish-ease),
        border-color var(--bblockx-polish-ease);
}

@media (hover: hover) and (pointer: fine) {
    [class*="bblockx-"][class*="-card"]:hover [class*="-icon"],
    [class*="bblockx-"][class*="-card"]:hover [class*="-icon-wrap"],
    [class*="bblockx-"][class*="-card"]:hover [class*="-icon-box"],
    [class*="bblockx-"][class*="-tile"]:hover [class*="-icon"],
    [class*="bblockx-"][class*="-feature"]:hover [class*="-icon"],
    [class*="bblockx-"][class*="-step"]:hover [class*="-num"] {
      
    }
}

/* ── Images / media ─────────────────────────────────────────── */
[class*="bblockx-"] img {
    max-width: 100%;
    height: auto;
}

[class*="bblockx-"][class*="-photo"],
[class*="bblockx-"][class*="-avatar"],
[class*="bblockx-"][class*="-thumb"],
[class*="bblockx-"][class*="-image"] img,
[class*="bblockx-"][class*="-media"] img,
[class*="bblockx-"][class*="-photo"] img,
[class*="bblockx-"][class*="-avatar"] img {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
    [class*="bblockx-"][class*="-card"]:hover [class*="-photo"],
    [class*="bblockx-"][class*="-card"]:hover [class*="-thumb"],
    [class*="bblockx-"][class*="-card"]:hover [class*="-image"] img,
    [class*="bblockx-"][class*="-tile"]:hover img,
    [class*="bblockx-"][class*="-member"]:hover [class*="-photo"] {

    }
}

/* ── Links ──────────────────────────────────────────────────── */
[class*="bblockx-"] a {
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        opacity 0.2s ease,
        text-decoration-color 0.2s ease,
        box-shadow 0.2s ease;
}

[class*="bblockx-"] a:hover {
    text-underline-offset: 3px;
}

/* ── Forms ──────────────────────────────────────────────────── */
[class*="bblockx-"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
[class*="bblockx-"] select,
[class*="bblockx-"] textarea {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

[class*="bblockx-"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
[class*="bblockx-"] select:focus,
[class*="bblockx-"] textarea:focus {
    outline: none;
    border-color: var(--bblockx-polish-accent) !important;
    box-shadow: 0 0 0 4px var(--bblockx-polish-accent-soft), var(--bblockx-polish-shadow-sm);
}

/* ── Lists / rows / items ───────────────────────────────────── */
[class*="bblockx-"][class*="-item"],
[class*="bblockx-"][class*="-row"],
[class*="bblockx-"] li {
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    [class*="bblockx-"][class*="-item"]:hover,
    [class*="bblockx-"][class*="-list"] li:hover,
    [class*="bblockx-"][class*="-features"] li:hover {
       
    }
}

/* ── Tabs / nav ─────────────────────────────────────────────── */
[class*="bblockx-"][class*="-tab"],
[class*="bblockx-"][class*="-nav"] a,
[class*="bblockx-"][class*="-link"] {
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        opacity 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    [class*="bblockx-"][class*="-tab"]:hover,
    [class*="bblockx-"][class*="-nav"] a:hover {
        
    }
}

[class*="bblockx-"][class*="-tab"].active,
[class*="bblockx-"][class*="-tab"].is-active,
[class*="bblockx-"][class*="-link"].active,
[class*="bblockx-"][class*="-link"].is-active,
[class*="bblockx-"][class*="-nav"] a.active,
[class*="bblockx-"][class*="-nav"] a.is-active {
    box-shadow: 0 4px 14px var(--bblockx-polish-accent-soft);
}

/* ── Progress fills ─────────────────────────────────────────── */
[class*="bblockx-"][class*="-fill"],
[class*="bblockx-"][class*="-progress-fill"],
[class*="bblockx-"][class*="-bar-fill"] {
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
}

/* ── Social / share buttons ─────────────────────────────────── */
[class*="bblockx-"][class*="-social"],
[class*="bblockx-"][class*="-share"] a,
[class*="bblockx-"][class*="-shs-btn"] {
    transition:
        transform var(--bblockx-polish-ease),
        box-shadow var(--bblockx-polish-ease),
        background-color var(--bblockx-polish-ease),
        color var(--bblockx-polish-ease),
        filter var(--bblockx-polish-ease);
}

@media (hover: hover) and (pointer: fine) {
    [class*="bblockx-"][class*="-social"]:hover,
    [class*="bblockx-"][class*="-share"] a:hover,
    [class*="bblockx-"][class*="-shs-btn"]:hover {
      
        box-shadow: 0 10px 20px rgba(15, 23, 42, 0.16);
    }
}

/* ── Selection color ────────────────────────────────────────── */
[class*="bblockx-"] ::selection {
    background: rgba(37, 99, 235, 0.18);
    color: var(--bblockx-polish-ink);
}

/* ── Focus ring ─────────────────────────────────────────────── */
[class*="bblockx-"] a:focus-visible,
[class*="bblockx-"] button:focus-visible,
[class*="bblockx-"] [role="button"]:focus-visible,
[class*="bblockx-"] input:focus-visible,
[class*="bblockx-"] select:focus-visible,
[class*="bblockx-"] textarea:focus-visible {
    outline: 2px solid var(--bblockx-polish-accent);
    outline-offset: 3px;
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    [class*="bblockx-"] *,
    [class*="bblockx-"] *::before,
    [class*="bblockx-"] *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}