/* ============================================
   Best VLE Tools — Main Stylesheet
   Premium Design System with Dark/Light Mode
   ============================================ */

/* ─── CSS Variables (Design Tokens) ──────── */
:root {
    /* Primary Colors */
    --primary: #4F46E5;
    --primary-light: #6366F1;
    --primary-dark: #3730A3;
    --primary-glow: rgba(79, 70, 229, 0.3);

    /* Accent Colors */
    --accent: #F59E0B;
    --accent-light: #FBBF24;
    --accent-dark: #D97706;

    /* Success / Error / Warning */
    --success: #10B981;
    --error: #EF4444;
    --warning: #F59E0B;
    --info: #3B82F6;

    /* Light Theme */
    --bg-primary: #F8FAFC;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F1F5F9;
    --bg-card: #FFFFFF;
    --bg-glass: rgba(255, 255, 255, 0.7);
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #94A3B8;
    --border-color: #E2E8F0;
    --border-light: #F1F5F9;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 0 30px rgba(79, 70, 229, 0.15);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #EC4899 100%);
    --gradient-hero: linear-gradient(135deg, #0F172A 0%, #1E293B 30%, #312E81 70%, #4F46E5 100%);
    --gradient-card: linear-gradient(135deg, rgba(79, 70, 229, 0.05) 0%, rgba(124, 58, 237, 0.05) 100%);
    --gradient-accent: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;

    /* Spacing */
    --container-max: 1280px;
    --container-padding: 1.5rem;
    --section-padding: 5rem 0;
    --card-padding: 1.5rem;
    --border-radius: 12px;
    --border-radius-lg: 20px;
    --border-radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Header */
    --header-height: 72px;
}

/* ─── Dark Theme ─────────────────────────── */
[data-theme="dark"] {
    --bg-primary: #0B0F1A;
    --bg-secondary: #111827;
    --bg-tertiary: #1E293B;
    --bg-card: #1E293B;
    --bg-glass: rgba(30, 41, 59, 0.8);
    --text-primary: #F1F5F9;
    --text-secondary: #CBD5E1;
    --text-muted: #64748B;
    --border-color: #334155;
    --border-light: #1E293B;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 30px rgba(79, 70, 229, 0.25);
    --gradient-hero: linear-gradient(135deg, #0B0F1A 0%, #111827 30%, #1E1B4B 70%, #312E81 100%);
    --gradient-card: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%);
}

/* ─── Reset & Base ───────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--text-primary);
    background: var(--bg-primary);
    overflow-x: hidden;
    transition: background var(--transition-base), color var(--transition-base);
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-light);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    outline: none;
    background: none;
}

ul,
ol {
    list-style: none;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

/* ─── Container ──────────────────────────── */
.bvths-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* ─── HEADER / NAVBAR ────────────────────── */
.bvths-site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
    transition: all var(--transition-base);
}

.bvths-site-header.bvths-scrolled {
    box-shadow: var(--shadow-lg);
}

.bvths-header-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

/* Logo */
.bvths-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 800;
    font-size: var(--font-size-xl);
    transition: transform var(--transition-fast);
}

.bvths-logo:hover {
    transform: scale(1.02);
    color: var(--text-primary);
}

.bvths-logo-icon {
    font-size: 1.75rem;
}

.bvths-logo-img {
    height: 40px;
    width: auto;
}

.bvths-logo-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Navigation */
.bvths-main-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bvths-nav-list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.bvths-nav-item {
    position: relative;
}

.bvths-nav-link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: var(--font-size-sm);
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.bvths-nav-link:hover,
.bvths-nav-link.bvths-active {
    color: var(--primary);
    background: rgba(79, 70, 229, 0.08);
}

.bvths-nav-arrow {
    font-size: 0.6rem;
    transition: transform var(--transition-fast);
}

.bvths-nav-item.bvths-has-mega-menu:hover .bvths-nav-arrow {
    transform: rotate(180deg);
}

/* Mega Menu — full page width, docked under header */
.bvths-mega-menu {
    position: fixed;
    top: var(--header-height, 72px);
    left: 0;
    right: 0;
    width: 100vw;
    margin: 0;
    transform: translateY(0);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    box-shadow: var(--shadow-xl);
    padding: 1.5rem clamp(1.5rem, 5vw, 4rem) 2rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-base), visibility var(--transition-base);
    z-index: 100;
    max-height: calc(100vh - var(--header-height, 72px));
    overflow-y: auto;
}

/* Invisible bridge that spans the gap between the nav link and the
   fixed-position menu below the header, so hover never breaks. */
.bvths-nav-item.bvths-has-mega-menu::after {
    content: "";
    position: absolute;
    left: -100px;
    right: -100px;
    top: 100%;
    height: 40px;
}

.bvths-nav-item.bvths-has-mega-menu:hover .bvths-mega-menu,
.bvths-mega-menu:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.bvths-mega-menu-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.bvths-mega-menu-heading {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-light);
}

.bvths-mega-menu-links li a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    border-radius: 8px;
    transition: all var(--transition-fast);
}

.bvths-mega-menu-links li a:hover {
    color: var(--primary);
    background: rgba(79, 70, 229, 0.06);
    padding-left: 0.75rem;
}

.bvths-mega-menu-links li a i {
    font-size: 0.75rem;
    width: 18px;
    text-align: center;
    color: var(--text-muted);
}

/* Cut mark — "+X more tools" row shown when a category has more than 5 tools */
.bvths-mega-menu-cut {
    margin-top: 0.35rem;
    padding-top: 0.55rem;
    border-top: 1px dashed var(--border-color);
}

.bvths-mega-menu-more {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary);
    border-radius: 8px;
    transition: all var(--transition-fast);
}

.bvths-mega-menu-more:hover {
    background: rgba(79, 70, 229, 0.08);
    padding-left: 0.75rem;
}

.bvths-mega-menu-more i {
    font-size: 0.7rem;
    color: var(--primary);
}

/* Theme Toggle */
.bvths-theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    font-size: var(--font-size-lg);
    transition: all var(--transition-fast);
    margin-left: 0.5rem;
}

.bvths-theme-toggle:hover {
    color: var(--accent);
    transform: rotate(30deg);
    box-shadow: var(--shadow-md);
}

/* Mobile Menu Toggle */
.bvths-mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    z-index: 1100;
}

.bvths-hamburger-line {
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all var(--transition-base);
}

.bvths-mobile-menu-toggle.bvths-active .bvths-hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.bvths-mobile-menu-toggle.bvths-active .bvths-hamburger-line:nth-child(2) {
    opacity: 0;
}

.bvths-mobile-menu-toggle.bvths-active .bvths-hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ─── HERO SECTION ───────────────────────── */
.bvths-hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--gradient-hero);
    padding: calc(var(--header-height) + 3rem) var(--container-padding) 4rem;
    overflow: hidden;
}

/* Animated background particles */
.bvths-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(79, 70, 229, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(124, 58, 237, 0.1) 0%, transparent 50%);
    animation: heroGlow 8s ease-in-out infinite alternate;
}

@keyframes heroGlow {
    0% {
        opacity: 0.5;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Floating shapes */
.bvths-hero-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.bvths-hero-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
    animation: float 20s ease-in-out infinite;
}

.bvths-hero-shape:nth-child(1) {
    width: 300px;
    height: 300px;
    background: var(--primary);
    top: -100px;
    right: -50px;
    animation-delay: 0s;
}

.bvths-hero-shape:nth-child(2) {
    width: 200px;
    height: 200px;
    background: var(--accent);
    bottom: -50px;
    left: -30px;
    animation-delay: -5s;
}

.bvths-hero-shape:nth-child(3) {
    width: 150px;
    height: 150px;
    background: #EC4899;
    top: 30%;
    left: 10%;
    animation-delay: -10s;
}

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(30px, -30px) rotate(90deg);
    }

    50% {
        transform: translate(-20px, 20px) rotate(180deg);
    }

    75% {
        transform: translate(10px, -10px) rotate(270deg);
    }
}

.bvths-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.bvths-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--border-radius-full);
    color: #E2E8F0;
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
    animation: fadeInUp 0.6s ease-out;
}

.bvths-hero-badge i {
    color: var(--accent);
}

.bvths-hero-title {
    font-size: clamp(2.5rem, 6vw, var(--font-size-6xl));
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    animation: fadeInUp 0.6s ease-out 0.1s both;
}

.bvths-hero-title .bvths-gradient-text {
    background: linear-gradient(135deg, var(--accent-light), #F472B6, var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bvths-hero-subtitle {
    font-size: clamp(1rem, 2vw, var(--font-size-xl));
    color: #CBD5E1;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    animation: fadeInUp 0.6s ease-out 0.2s both;
}

.bvths-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    animation: fadeInUp 0.6s ease-out 0.3s both;
}

.bvths-hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-top: 3.5rem;
    animation: fadeInUp 0.6s ease-out 0.4s both;
}

.bvths-hero-stat {
    text-align: center;
}

.bvths-hero-stat-number {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: #FFFFFF;
    display: block;
}

.bvths-hero-stat-label {
    font-size: var(--font-size-sm);
    color: #94A3B8;
    margin-top: 0.25rem;
}

/* Scroll indicator */
.bvths-hero-scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.4);
    font-size: var(--font-size-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(10px);
    }
}

/* ─── BUTTONS ────────────────────────────── */
.bvths-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    font-size: var(--font-size-base);
    border-radius: var(--border-radius);
    border: 2px solid transparent;
    transition: all var(--transition-base);
    white-space: nowrap;
    cursor: pointer;
}

.bvths-btn-primary {
    background: var(--gradient-primary);
    color: #FFFFFF;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
}

.bvths-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.5);
    color: #FFFFFF;
}

.bvths-btn-outline {
    background: transparent;
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.3);
}

.bvths-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    transform: translateY(-2px);
}

.bvths-btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.bvths-btn-secondary:hover {
    background: var(--primary);
    color: #FFFFFF;
    border-color: var(--primary);
    transform: translateY(-2px);
}

.bvths-btn-accent {
    background: var(--gradient-accent);
    color: #FFFFFF;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.bvths-btn-accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.5);
    color: #FFFFFF;
}

.bvths-btn-sm {
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
}

.bvths-btn-lg {
    padding: 1rem 2.5rem;
    font-size: var(--font-size-lg);
}

.bvths-btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
}

/* ─── SECTION STYLES ─────────────────────── */
.bvths-section {
    padding: var(--section-padding);
    position: relative;
}

.bvths-section-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 3.5rem;
}

.bvths-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 1rem;
    background: rgba(79, 70, 229, 0.08);
    color: var(--primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: var(--border-radius-full);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bvths-section-title {
    font-size: clamp(1.75rem, 4vw, var(--font-size-4xl));
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.bvths-section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ─── TOOLS SECTION ──────────────────────── */
.bvths-tools-section {
    background: var(--bg-primary);
}

/* Category Filters */
.bvths-tools-filter {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
}

.bvths-filter-btn {
    padding: 0.6rem 1.25rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-full);
    transition: all var(--transition-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.bvths-filter-btn:hover,
.bvths-filter-btn.bvths-active {
    background: var(--primary);
    color: #FFFFFF;
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
    transform: translateY(-1px);
}

.bvths-filter-btn i {
    font-size: 0.8rem;
}

/* Tools Grid */
.bvths-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* Tool Card */
.bvths-tool-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--card-padding);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.bvths-tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.bvths-tool-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary);
}

.bvths-tool-card:hover::before {
    transform: scaleX(1);
}

.bvths-tool-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    background: var(--gradient-card);
    color: var(--primary);
    transition: all var(--transition-base);
}

.bvths-tool-card:hover .bvths-tool-card-icon {
    background: var(--gradient-primary);
    color: #FFFFFF;
    transform: scale(1.05) rotate(-3deg);
}

.bvths-tool-card-category {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--primary);
    background: rgba(79, 70, 229, 0.08);
    padding: 0.2rem 0.6rem;
    border-radius: var(--border-radius-full);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bvths-tool-card-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.bvths-tool-card-desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: 1rem;
}

.bvths-tool-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.bvths-tool-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary);
    transition: gap var(--transition-base);
}

.bvths-tool-card:hover .bvths-tool-card-link {
    gap: 0.75rem;
}

.bvths-tool-card-views {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Save (bookmark) button — small circular button in the top-right
   corner of a Big Tools card. The card itself is an <a>, so this button
   stops propagation on click (see csc-tools.php JS) instead of
   navigating to the tool. Kept visually distinct from
   .bvths-tool-action-btn (the pill-shaped save button on individual
   tool pages) since this one has to fit inside a small card corner. */
.bvths-tool-card-save-btn {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.bvths-tool-card-save-btn:hover {
    transform: scale(1.08);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: var(--shadow-md);
}

.bvths-tool-card-save-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.bvths-tool-card-save-btn.is-saved {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #fff;
}

.bvths-tool-card-save-btn.is-saved i { animation: bvthsSavePop 0.35s ease; }

/* ─── QUICK TOOLS (Recently Used / Saved on /tools) ───── */
.bvths-quick-tools-section {
    margin-bottom: 2.5rem;
}

.bvths-quick-tools-heading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1.15rem;
}

.bvths-quick-tools-heading i {
    color: var(--primary);
    font-size: 1.1rem;
}

.bvths-quick-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

.bvths-quick-tool-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.bvths-quick-tool-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.bvths-quick-tool-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.bvths-quick-tool-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--gradient-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    transition: transform var(--transition-base);
}

.bvths-quick-tool-card:hover .bvths-quick-tool-icon {
    transform: scale(1.06) rotate(-4deg);
}

.bvths-quick-tool-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--success);
    background: rgba(16, 185, 129, 0.1);
    padding: 0.2rem 0.6rem;
    border-radius: var(--border-radius-full);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bvths-quick-tool-status i { font-size: 0.45rem; }

.bvths-quick-tool-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.bvths-quick-tool-desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.55;
    flex-grow: 1;
    margin-bottom: 0.9rem;
}

.bvths-quick-tool-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.bvths-quick-tool-stats span {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
}

.bvths-quick-tool-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border-light);
}

.bvths-quick-tool-access {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 500;
}

.bvths-quick-tool-launch {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--gradient-primary);
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius-full);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.bvths-quick-tool-launch:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ─── ABOUT SECTION ──────────────────────── */
.bvths-about-section {
    background: var(--bg-secondary);
}

.bvths-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.bvths-about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}

.bvths-about-feature {
    padding: 1.25rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-light);
    transition: all var(--transition-base);
}

.bvths-about-feature:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.bvths-about-feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: #FFFFFF;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.bvths-about-feature h4 {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}

.bvths-about-feature p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* About Visual */
.bvths-about-visual {
    position: relative;
}

.bvths-about-image-card {
    background: var(--gradient-hero);
    border-radius: var(--border-radius-lg);
    padding: 3rem;
    color: #FFFFFF;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.bvths-about-image-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 40%, rgba(79, 70, 229, 0.3) 0%, transparent 60%);
}

.bvths-about-image-card .bvths-big-number {
    font-size: 5rem;
    font-weight: 900;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.bvths-about-image-card .bvths-big-label {
    font-size: var(--font-size-xl);
    font-weight: 600;
    opacity: 0.9;
    position: relative;
    z-index: 1;
}

/* About Showcase Card (replaces the plain number counter) */
.bvths-about-showcase-card {
    text-align: left;
    padding: 2.75rem 2.5rem;
}

.bvths-about-showcase-icon {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #FFFFFF;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.bvths-about-showcase-title {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}

.bvths-about-showcase-desc {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.6;
    margin-bottom: 1.75rem;
    position: relative;
    z-index: 1;
}

.bvths-about-showcase-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    position: relative;
    z-index: 1;
}

.bvths-about-showcase-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #FFFFFF;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.bvths-about-showcase-tag i {
    color: var(--accent-light);
}

.bvths-about-floating-card {
    position: absolute;
    background: var(--bg-card);
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-xl);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: float 6s ease-in-out infinite;
}

.bvths-about-floating-card.bvths-card-1 {
    top: -1rem;
    right: -1rem;
    animation-delay: -2s;
}

.bvths-about-floating-card.bvths-card-2 {
    bottom: -1rem;
    left: -1rem;
    animation-delay: -4s;
}

.bvths-about-floating-card i {
    font-size: 1.5rem;
    color: var(--primary);
}

.bvths-about-floating-card .bvths-float-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.bvths-about-floating-card .bvths-float-value {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
}

/* ─── FAQ SECTION ────────────────────────── */
.bvths-faq-section {
    background: var(--bg-primary);
}

.bvths-faq-grid {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bvths-faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: all var(--transition-base);
}

.bvths-faq-item:hover {
    border-color: var(--primary);
}

.bvths-faq-item.bvths-active {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.bvths-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    gap: 1rem;
    width: 100%;
    text-align: left;
    background: none;
}

.bvths-faq-question i {
    font-size: 0.85rem;
    color: var(--primary);
    transition: transform var(--transition-base);
    flex-shrink: 0;
}

.bvths-faq-item.bvths-active .bvths-faq-question i {
    transform: rotate(180deg);
}

.bvths-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
}

.bvths-faq-answer-inner {
    padding: 0 1.5rem 1.25rem;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.7;
}

/* ─── FAQ v2 (numbered/chip style, homepage) ─── */
.bvths-faq2-list {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.bvths-faq2-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.bvths-faq2-item:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
}

.bvths-faq2-item.bvths-faq2-active {
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

.bvths-faq2-question {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 1.1rem 1.35rem;
    cursor: pointer;
}

.bvths-faq2-num {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    font-weight: 800;
    color: var(--primary);
    background: rgba(79, 70, 229, 0.08);
    border-radius: var(--border-radius-full);
    padding: 0.3rem 0.6rem;
    letter-spacing: 0.03em;
}

.bvths-faq2-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--bg-tertiary);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background var(--transition-base), color var(--transition-base), transform var(--transition-base);
}

.bvths-faq2-active .bvths-faq2-icon {
    background: var(--gradient-primary);
    color: #fff;
    transform: scale(1.05);
}

.bvths-faq2-text {
    flex: 1;
    font-weight: 700;
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

.bvths-faq2-toggle {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: background var(--transition-base), color var(--transition-base), transform var(--transition-base);
}

.bvths-faq2-active .bvths-faq2-toggle {
    background: var(--gradient-primary);
    color: #fff;
    transform: rotate(135deg);
}

.bvths-faq2-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
}

.bvths-faq2-answer-inner {
    padding: 0 1.35rem 1.35rem 4.85rem;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.7;
}

@media (max-width: 560px) {
    .bvths-faq2-answer-inner { padding-left: 1.35rem; }
    .bvths-faq2-icon { display: none; }
}

/* ─── VIDEOS SECTION ─────────────────────── */
.bvths-videos-section {
    background: var(--bg-secondary);
}

.bvths-videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
}

.bvths-video-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
}

.bvths-video-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.bvths-video-card-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.bvths-video-card-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.bvths-video-card-info {
    padding: 1rem 1.25rem;
}

.bvths-video-card-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

/* ─── BLOG SECTION ───────────────────────── */
.bvths-blog-section {
    background: var(--bg-primary);
}

.bvths-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.bvths-blog-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
}

.bvths-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.bvths-blog-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: var(--gradient-card);
}

.bvths-blog-card-body {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.bvths-blog-card-date {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.bvths-blog-card-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.bvths-blog-card-excerpt {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    flex-grow: 1;
}

.bvths-blog-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary);
    margin-top: 1rem;
}

/* ─── TRUST SECTION ──────────────────────── */
/* ─── HOW IT WORKS SECTION ───────────────── */
.bvths-howit-section {
    background: var(--bg-primary);
    overflow: hidden;
}

.bvths-howit-gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bvths-howit-track {
    position: relative;
    display: none;
    align-items: center;
    justify-content: space-between;
    max-width: 900px;
    margin: 0 auto 2rem;
    padding: 0 3rem;
}

.bvths-howit-line {
    position: absolute;
    left: 3rem;
    right: 3rem;
    top: 50%;
    height: 2px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--border-color) 100%);
    transform: translateY(-50%);
    z-index: 0;
}

.bvths-howit-node {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--gradient-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: var(--font-size-sm);
    transform: rotate(45deg);
    box-shadow: var(--shadow-lg);
}

.bvths-howit-node::after {
    content: attr(data-num);
    transform: rotate(-45deg);
    display: block;
}

.bvths-howit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.bvths-howit-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.75rem 1.5rem;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.bvths-howit-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-lg);
    padding: 1.5px;
    background: var(--gradient-primary);
    opacity: 0;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: opacity var(--transition-base);
    pointer-events: none;
}

.bvths-howit-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

.bvths-howit-card:hover::before {
    opacity: 1;
}

.bvths-howit-card-result {
    background: var(--gradient-card);
}

.bvths-howit-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.bvths-howit-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(79, 70, 229, 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    transition: transform var(--transition-base), background var(--transition-base), color var(--transition-base);
}

.bvths-howit-card:hover .bvths-howit-card-icon {
    background: var(--gradient-primary);
    color: #fff;
    transform: scale(1.08) rotate(-6deg);
}

.bvths-howit-chip {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 0.25rem 0.65rem;
    border-radius: var(--border-radius-full);
}

.bvths-howit-chip-result {
    color: var(--success);
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.25);
}

.bvths-howit-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.bvths-howit-card p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.1rem;
}

.bvths-howit-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--success);
}

.bvths-howit-check i {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(16, 185, 129, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
}

.bvths-howit-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    max-width: fit-content;
    margin: 2.5rem auto 0;
    padding: 0.75rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-full);
    box-shadow: var(--shadow-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.bvths-howit-summary i.fa-arrow-right-long {
    color: var(--primary);
    font-size: 0.75rem;
}

.bvths-howit-summary-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

@media (min-width: 900px) {
    .bvths-howit-track { display: flex; }
}

@media (max-width: 900px) {
    .bvths-howit-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .bvths-howit-grid {
        grid-template-columns: 1fr;
    }
    .bvths-howit-summary {
        flex-wrap: wrap;
        text-align: center;
    }
}

.bvths-trust-section {
    background: var(--bg-secondary);
}

.bvths-trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.bvths-trust-card {
    text-align: center;
    padding: 2rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    transition: all var(--transition-base);
}

.bvths-trust-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.bvths-trust-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: #FFFFFF;
    font-size: 1.5rem;
    margin: 0 auto 1.25rem;
}

.bvths-trust-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.bvths-trust-card p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ─── CTA SECTION ────────────────────────── */
.bvths-cta-section {
    background: var(--gradient-hero);
    padding: 5rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.bvths-cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(79, 70, 229, 0.2) 0%, transparent 70%);
}

.bvths-cta-content {
    position: relative;
    z-index: 2;
}

.bvths-cta-title {
    font-size: clamp(1.75rem, 4vw, var(--font-size-4xl));
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 1rem;
}

.bvths-cta-subtitle {
    font-size: var(--font-size-lg);
    color: #CBD5E1;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ─── FOOTER ─────────────────────────────── */
.bvths-site-footer {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    position: relative;
    padding-top: 0;
}

.bvths-footer-wave {
    color: var(--bg-secondary);
    line-height: 0;
}

.bvths-footer-wave svg {
    width: 100%;
    height: 60px;
}

.bvths-footer-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 2rem var(--container-padding) 1.5rem;
}

.bvths-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 2rem;
}

.bvths-footer-heading {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bvths-footer-about {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.bvths-footer-social {
    display: flex;
    gap: 0.75rem;
}

.bvths-footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    transition: all var(--transition-base);
}

.bvths-footer-social a:hover {
    background: var(--primary);
    color: #FFFFFF;
    border-color: var(--primary);
    transform: translateY(-3px);
}

.bvths-footer-links li {
    margin-bottom: 0.5rem;
}

.bvths-footer-links a {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all var(--transition-fast);
}

.bvths-footer-links a:hover {
    color: var(--primary);
    padding-left: 0.25rem;
}

.bvths-footer-links a i {
    font-size: 0.75rem;
    width: 16px;
}

.bvths-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ─── BACK TO TOP ────────────────────────── */
.bvths-back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #FFFFFF;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition-base);
    z-index: 900;
}

.bvths-back-to-top.bvths-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bvths-back-to-top:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.5);
}

/* ─── TOOL PAGE LAYOUT ───────────────────── */
.bvths-tool-page {
    padding-top: calc(var(--header-height) + 2rem);
    padding-bottom: 4rem;
    min-height: 100vh;
}

.bvths-tool-page-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 2rem 0;
}

.bvths-tool-page-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.bvths-tool-page-breadcrumb a {
    color: var(--text-secondary);
}

.bvths-tool-page-breadcrumb a:hover {
    color: var(--primary);
}

.bvths-tool-page-breadcrumb .bvths-separator {
    color: var(--text-muted);
}

.bvths-tool-page-title {
    font-size: clamp(1.5rem, 3vw, var(--font-size-3xl));
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.bvths-tool-page-desc {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
}

/* Tool Page — Save & Share Actions
   ─────────────────────────────────────────────────────── */
.bvths-tool-actions-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.bvths-tool-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.15rem;
    border-radius: 999px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.bvths-tool-action-btn:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: var(--shadow-md);
}

.bvths-tool-action-btn:active { transform: translateY(0); }
.bvths-tool-action-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.bvths-tool-action-btn i { font-size: 0.95em; transition: transform 0.25s ease; }

/* Compound (.bvths-tool-action-btn.bvths-toolpage-*) selectors used
   throughout, and unique bvths-toolpage- prefixed class names, so this
   never collides with the unrelated .bvths-share-btn used by the blog
   post share box (which sets color:#fff / border:none and expects an
   extra .bvths-whatsapp/.bvths-telegram/etc. modifier for its background —
   without a modifier class that rule renders invisible white-on-white
   text, which is what caused the empty-looking button in light mode). */
.bvths-tool-action-btn.bvths-toolpage-save-btn.is-saved {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #fff;
}

.bvths-tool-action-btn.bvths-toolpage-save-btn.is-saved i { transform: scale(1.1); }

@keyframes bvthsSavePop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.bvths-tool-action-btn.bvths-toolpage-save-btn.is-saved i.fas {
    animation: bvthsSavePop 0.35s ease;
}

.bvths-tool-action-btn.bvths-toolpage-share-btn:hover {
    border-color: var(--accent);
    color: var(--accent-dark);
}


/* Tool Page Grid
   Full-width 3-column grid: [flexible gutter][content, max-width][flexible
   gutter]. The ad rails live in the outer gutter columns and the tool
   content lives in the fixed-width center column — this is what lets the
   ad sit at the true outer edge of the page while the tool itself still
   renders at its usual max-width, centered, without ever being squeezed
   by the ads.

   The center column uses its own (narrower) max-width instead of the
   sitewide --container-max, specifically so there's always enough room
   left in the outer gutters for the 160px ad box + its margin to render
   fully on screen instead of being clipped at the browser edge. The
   outer gutter columns also get a guaranteed minmax() floor (ad width +
   margin + a little breathing room) so they never get squeezed thinner
   than the ad itself. */
.bvths-tool-page-grid {
    --tool-content-max: 1100px;
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(0, var(--tool-content-max)) minmax(200px, 1fr);
    align-items: start;
    justify-content: center;
    position: relative;
}

.bvths-tool-content-wrapper {
    grid-column: 2;
    min-width: 0;
    padding: 0 var(--container-padding);
}

.bvths-tool-main-content {
    min-width: 0;
    width: 100%;
}

/* Ad Sidebar Containers — 160x600 skyscraper, living in the grid's outer
   gutter columns. `position: sticky` on a normal (non-floated,
   non-absolute) grid item sticks it near the top of the viewport as the
   user scrolls through the tool, and — because its containing block is
   .bvths-tool-page-grid's own normal-flow height (= the tool content's height,
   since that's what stretches the grid row) — it naturally stops and
   scrolls away once the tool content ends, instead of a `fixed` ad
   floating forever and ending up stuck down by the footer. */
.bvths-ad-sidebar-container {
    position: sticky;
    align-self: start;
    top: calc(var(--header-height) + 1.5rem);
    width: 160px;
    height: 600px;
    z-index: 5;
}

.bvths-ad-left-container {
    grid-column: 1;
    justify-self: end;
    margin-right: 1rem;
}

.bvths-ad-right-container {
    grid-column: 3;
    justify-self: start;
    margin-left: 1rem;
}

/* Below 1500px there usually isn't enough spare margin outside the
   (now narrower) 1100px content column to fit both 160px ad rails
   without clipping them at the browser edge, so they're hidden rather
   than rendering cut off or overlapping the content. */
@media (max-width: 1500px) {
    .bvths-tool-page-grid {
        grid-template-columns: 1fr;
    }
    .bvths-tool-content-wrapper {
        grid-column: 1;
    }
    .bvths-ad-sidebar-container {
        display: none;
    }
}


.bvths-ad-slot {
    background: var(--bg-tertiary);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    overflow: hidden;
}

/* Fallback placeholder shown inside an ad slot when no ad code has been
   configured yet in Admin > Settings. Compact horizontal strip (icon +
   label + sub-label side by side) rather than a large stacked block, so
   an empty slot reads as an intentional small "ad space reserved" strip
   instead of a big blank box — especially noticeable on pages like
   /csc-tools where it now sits directly under the search bar. */
.ad-placeholder {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    height: 100%;
    min-height: 44px;
    padding: 0.6rem 1rem;
    text-align: center;
    color: var(--text-muted);
}

.ad-placeholder i {
    font-size: 1rem;
    opacity: 0.55;
    flex-shrink: 0;
}

.ad-placeholder span {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ad-placeholder small {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.ad-placeholder small::before {
    content: '•';
    margin-right: 0.5rem;
    opacity: 0.6;
}


/* Sidebar skyscraper ads (left/right, fixed-position) — fixed 160x600.
   These are the ONLY ad slots that stay vertical. This is the REAL size
   used once an admin sets actual ad code (standard IAB skyscraper). */
.bvths-ad-sidebar-left,
.bvths-ad-sidebar-right {
    width: 160px;
    height: 600px;
}

/* Empty state ONLY — compact themed strip instead of a tall 600px blank
   column. Once real ad code is saved, .bvths-ad-empty no longer applies
   and the slot returns to the full 160x600 skyscraper above. */
.bvths-ad-sidebar-left.bvths-ad-empty,
.bvths-ad-sidebar-right.bvths-ad-empty {
    height: auto;
    min-height: 120px;
    border-radius: 10px;
}

.bvths-ad-sidebar-left.bvths-ad-empty .ad-placeholder,
.bvths-ad-sidebar-right.bvths-ad-empty .ad-placeholder {
    flex-direction: column;
    gap: 0.4rem;
}

/* Blog post sidebar ad — standard IAB Large Rectangle (336x280), NOT the
   160x600 skyscraper used on tool pages. Kept as its own class instead of
   sharing .bvths-ad-sidebar-right so the two contexts can size independently
   going forward without one accidentally affecting the other again. */
.bvths-ad-blog-sidebar {
    width: 336px;
    max-width: 100%;
    height: 280px;
    margin: 0 auto;
}

.bvths-ad-blog-sidebar.bvths-ad-empty {
    height: auto;
    min-height: 100px;
    border-radius: 10px;
}

/* On narrow phones (<360px viewport) even 336px slightly overflows common
   device widths once page padding is subtracted; scale the box down to the
   next standard IAB size (300x250) rather than letting it clip or leaving
   dead whitespace. */
@media (max-width: 380px) {
    .bvths-ad-blog-sidebar {
        width: 300px;
        height: 250px;
    }
    .bvths-ad-blog-sidebar.bvths-ad-empty {
        height: auto;
        min-height: 100px;
    }
}

/* All other ad slots (header, bottom, in-tool) are standard responsive
   horizontal banners — full width of their container, banner-height.
   This is the REAL size used once an admin sets actual ad code, and
   matches standard AdSense unit dimensions (e.g. 728x90 leaderboard),
   so it's left untouched. */
.bvths-ad-header,
.bvths-ad-bottom,
.bvths-ad-in-tool {
    width: 100%;
    max-width: 728px;
    height: 90px;
    margin-left: auto;
    margin-right: auto;
}

/* Empty state ONLY (no ad code configured yet) — compact themed strip
   instead of a full 90px banner-height blank box. Once a real ad code
   is saved in Admin > Ads, .bvths-ad-empty is no longer applied and the
   slot returns to its full standard banner size above. */
.bvths-ad-header.bvths-ad-empty,
.bvths-ad-bottom.bvths-ad-empty,
.bvths-ad-in-tool.bvths-ad-empty {
    height: auto;
    min-height: 44px;
    max-width: 480px;
    border-radius: 10px;
}

.bvths-ad-bottom {
    margin-top: 2rem;
}

.bvths-ad-in-tool {
    margin: 1.5rem auto;
}

@media (max-width: 480px) {
    .bvths-ad-header,
    .bvths-ad-bottom,
    .bvths-ad-in-tool {
        height: 100px;
    }
    .bvths-ad-header.bvths-ad-empty,
    .bvths-ad-bottom.bvths-ad-empty,
    .bvths-ad-in-tool.bvths-ad-empty {
        height: auto;
        min-height: 44px;
        max-width: 100%;
    }
}

/* Tool Embed Container
   NOTE: background intentionally NOT set here (only border/padding/shadow,
   which are theme-independent chrome). It lives instead in the
   :where(.bvths-tool-embed) rule below, alongside color. Reason: this
   selector is a plain, non-:where class selector with real specificity
   (0,1,0) — if it also set `background: var(--bg-card)` here, that value
   swings between light/dark per the site's theme toggle, and being
   non-:where it would UNCONDITIONALLY outrank the zero-specificity
   :where(.bvths-tool-embed) fallback below regardless of document order,
   defeating that fallback's whole purpose (pinning the embed to a light
   background so tools built standalone against a white page don't go
   dark-on-dark under the site's dark theme — see the detailed comment
   on that rule). Keeping background out of this rule avoids that
   specificity conflict entirely instead of relying on rule ordering. */
.bvths-tool-embed {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
}

/* ─── Embedded-tool theme isolation ──────────────────────────
   Uploaded tools are almost always built and tested as standalone pages
   that assume a plain white background with normal dark text — including
   ones that pull in Tailwind's CDN script, which generates its utility
   CSS live in the browser and can never be touched by the server-side
   scopeCss()/scopeToolHtml() pass (that CSS doesn't exist yet at request
   time, only after the tool's own <script> runs client-side). Because of
   that gap, any input/text color a tool leaves unset falls back to
   whatever the BROWSER's default is for the page's color-scheme, and on
   this site that default is influenced by [data-theme="dark"] on <html>.
   A tool that never had a dark ancestor while being built has no reason
   to defend against that — hence "filled fields look invisible" the
   first time a tool goes live on a dark-mode page even though the exact
   same file is perfect opened standalone.

   Fix: pin #tool-embed to its own light color-scheme and safe base
   colors, unconditionally, regardless of the site theme. This makes
   "embedded" behave like "standalone" for every current and future
   tool without needing any per-tool CSS change — a tool's own explicit
   colors (bg-white, text-slate-900, etc.) still win as normal, this only
   fixes the fallback/inherited case that was silently breaking.

   IMPORTANT — selector wrapped in :where(...): a plain ".bvths-tool-embed"
   class selector has specificity (0,1,0), which is EXACTLY the same
   specificity as a one-class Tailwind utility like ".text-white" or
   ".text-slate-900". With equal specificity, whichever rule's <style>
   happens to land later in the DOM wins — and a Tailwind CDN tool
   generates and injects its OWN utility <style> tag client-side, AFTER
   this file has already loaded, so which one "wins" ends up depending on
   exactly where in the document Tailwind chooses to insert that tag (an
   internal implementation detail that isn't guaranteed and was observed
   to sometimes lose to this rule) rather than on any deliberate cascade
   design. That produced exactly the silent failure this comment already
   warned about being fixed — e.g. a tool's own `text-white` heading
   rendering as this rule's dark #0f172a instead, on a light background,
   because both rules matched with equal specificity and this one simply
   happened to come out on top for that particular class/tool. :where()
   always contributes zero to specificity, so this rule keeps applying
   (still overriding the browser's raw inherited default) but can never
   again outrank ANY class the tool itself sets — a tool's own explicit
   color always wins now, unconditionally, regardless of script/style
   insertion order. */
:where(.bvths-tool-embed) {
    color-scheme: light;
    background: #ffffff;
    color: #0f172a;
}
:where(.bvths-tool-embed) input,
:where(.bvths-tool-embed) textarea,
:where(.bvths-tool-embed) select {
    color: #0f172a;
    background-color: #ffffff;
}

/* ─── Tool Modal, Fixed Overlays & Button Protection ───────── */
#tool-embed .modal-overlay,
#tool-embed [class*="modal-overlay"] {
    z-index: 2000 !important;
}

#tool-embed [class*="toast"],
#tool-embed [id*="toast"],
#tool-embed [class*="notification"],
#tool-embed [id*="notification"],
#tool-embed [class*="snackbar"],
#tool-embed [id*="snackbar"] {
    z-index: 99999 !important;
    font-family: var(--font-family) !important;
}

/* Ensure toast notifications inside tools have rich dark slate contrast & crisp pill styling */
#tool-embed .toast,
#tool-embed #toast {
    background: #0f172a !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

/* Ensure back-to-top button on tool pages does not overlap bottom-right toast notifications */
.bvths-tool-page .bvths-back-to-top {
    bottom: 5rem;
    right: 1.5rem;
}

/* Tool button font inheritance — background/color intentionally NOT set here.
   Scoped tool CSS classes (#tool-embed .btn-class) already beat the site's
   global `button { background:none }` reset by specificity, so no override needed. */
#tool-embed button {
    font-family: inherit;
}

/* Universal Select Dropdown Option Readability Guard */
#tool-embed select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* Universal Tool Dropdown, Tooltip & Color Picker Elevation */
#tool-embed [class*="dropdown"],
#tool-embed [class*="popover"],
#tool-embed [class*="tooltip"],
#tool-embed [class*="picker"],
#tool-embed [id*="dropdown"],
#tool-embed [id*="picker"] {
    z-index: 1500;
}

/* Inline Image Protection inside Embedded Tools
   EXCEPTION: CropperJS manages its own img transform; max-width:100% breaks its
   internal coordinate calculations. Scope ONLY to non-cropper images. */
#tool-embed img:not(.cropper-hidden):not([data-v-cropper]) {
    max-width: 100%;
}

/* Same equal-specificity risk as .bvths-tool-embed above (see the detailed
   comment there): wrapped in :where(...) so a tool's own explicit input/
   textarea/select color always wins regardless of Tailwind's client-side
   style-tag insertion order, and this only fills in the otherwise-inherited
   fallback. */
:where(.bvths-relocated-fixed),
:where(.bvths-relocated-fixed) * {
    color-scheme: light;
}
:where(.bvths-relocated-fixed) input,
:where(.bvths-relocated-fixed) textarea,
:where(.bvths-relocated-fixed) select {
    color: #0f172a;
    background-color: #ffffff;
}

/* Tools that ship their own full mini-app layout (sidebar + content, e.bvths-g.
   dashboard-style tools) need their padding reset to zero so their
   internal grid gets the entire embed box edge-to-edge instead of being
   squeezed inside the theme's card padding. Admins can mark a tool as
   "full bleed" from the tool editor; when not marked, normal padding
   applies for simple single-widget tools (calculators, converters, etc.).
   Height is intentionally left to grow with the tool's own content
   (no fixed height / no internal overflow-y) so the PAGE scrolls as one
   unit instead of creating a second scrollbar nested inside the embed. */
.bvths-tool-embed.bvths-tool-embed-fullbleed {
    padding: 0;
    overflow-x: hidden;
    min-height: 600px;
}

/* Defensive pairing with main.js's initToolEmbedAutoFit(): that script
   creates #tool-embed-autofit as the wrapper it scales down when a
   tool's content is wider than its embed box, and separately relocates
   any position:fixed descendant out to document.body specifically so
   that scaling can never trap it. This rule is the CSS-side half of
   that same guarantee — it makes sure the wrapper itself never gets an
   overflow/contain value that would ALSO create its own containing
   block for fixed descendants (independent of the transform), which
   would defeat the relocation fix by trapping anything not yet moved
   during the brief window before main.js's observer runs. Explicitly
   pinning this to visible/none, rather than leaving it to inherit
   whatever a future style change elsewhere might set, keeps this
   correct even if this stylesheet is edited again later. */
#tool-embed-autofit {
    overflow: visible;
    contain: none;
}

/* How to Use Section */
.bvths-tool-howto {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
}

.bvths-tool-howto h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.bvths-tool-howto-content {
    color: var(--text-secondary);
    line-height: 1.8;
}

/* Rich-text content styling — the admin's Quill editor content (headings,
   bold, numbered/bulleted lists, quotes, code, links) renders as plain
   unstyled text on the live tool page without these rules, because the
   site-wide reset at the top of this file sets `list-style: none` on
   every <ul>/<ol> globally. These selectors re-enable and style markers
   specifically inside How-to-Use / About content so admin-authored
   formatting (step numbers, bullet dots, headings, bold) actually shows
   up the same way it looked in the editor. */
.bvths-tool-howto-content p,
.bvths-tool-description-content p {
    margin: 0 0 1rem;
}

.bvths-tool-howto-content p:last-child,
.bvths-tool-description-content p:last-child {
    margin-bottom: 0;
}

.bvths-tool-howto-content h1,
.bvths-tool-howto-content h2,
.bvths-tool-howto-content h3,
.bvths-tool-howto-content h4,
.bvths-tool-description-content h1,
.bvths-tool-description-content h2,
.bvths-tool-description-content h3,
.bvths-tool-description-content h4 {
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.35;
    margin: 1.5rem 0 0.75rem;
}

.bvths-tool-howto-content h1:first-child,
.bvths-tool-howto-content h2:first-child,
.bvths-tool-howto-content h3:first-child,
.bvths-tool-howto-content h4:first-child,
.bvths-tool-description-content h1:first-child,
.bvths-tool-description-content h2:first-child,
.bvths-tool-description-content h3:first-child,
.bvths-tool-description-content h4:first-child {
    margin-top: 0;
}

.bvths-tool-howto-content h3,
.bvths-tool-description-content h3 {
    font-size: var(--font-size-lg);
}

.bvths-tool-howto-content h4,
.bvths-tool-description-content h4 {
    font-size: var(--font-size-base);
}

.bvths-tool-howto-content strong,
.bvths-tool-description-content strong {
    color: var(--text-primary);
    font-weight: 700;
}

.bvths-tool-howto-content em,
.bvths-tool-description-content em {
    font-style: italic;
}

.bvths-tool-howto-content a,
.bvths-tool-description-content a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bvths-tool-howto-content a:hover,
.bvths-tool-description-content a:hover {
    color: var(--primary-light);
}

/* Bulleted lists — visible dot markers, comfortable spacing */
.bvths-tool-howto-content ul,
.bvths-tool-description-content ul {
    list-style: none;
    margin: 0.5rem 0 1.25rem;
    padding: 0;
}

.bvths-tool-howto-content ul li,
.bvths-tool-description-content ul li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.65rem;
    line-height: 1.7;
}

.bvths-tool-howto-content ul li::before,
.bvths-tool-description-content ul li::before {
    content: '';
    position: absolute;
    left: 0.15rem;
    top: 0.65rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gradient-primary);
}

/* Numbered lists (How-to-Use steps) — styled step badges instead of the
   browser's plain "1. 2. 3." default, which is the look shown in the
   reference design. */
.bvths-tool-howto-content ol,
.bvths-tool-description-content ol {
    list-style: none;
    counter-reset: bvths-step-counter;
    margin: 0.5rem 0 1.25rem;
    padding: 0;
}

.bvths-tool-howto-content ol li,
.bvths-tool-description-content ol li {
    counter-increment: bvths-step-counter;
    position: relative;
    padding-left: 2.6rem;
    margin-bottom: 1rem;
    line-height: 1.9rem;
    min-height: 1.9rem;
}

/* NOTE: this list item is intentionally NOT display:flex. Flexbox
   treats a run of inline text + inline tags (e.g. "click <strong>Add
   Subject</strong> to continue") as anonymous flex items, and browsers
   collapse whitespace at those anonymous-item boundaries — which is
   exactly what was eating the space around <strong> tags in step text
   even though the space was genuinely present in the saved HTML (see
   the "not fixed" follow-up — the earlier fix in functions.php/
   ai-functions.php was correct but this CSS was a second, unrelated
   cause of the same visual symptom). Plain block flow does not have
   this problem, so the number badge below is positioned with absolute
   positioning instead of flex alignment. */

.bvths-tool-howto-content ol li:last-child,
.bvths-tool-description-content ol li:last-child {
    margin-bottom: 0;
}

.bvths-tool-howto-content ol li::before,
.bvths-tool-description-content ol li::before {
    content: counter(bvths-step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.9rem;
    height: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: 700;
}

/* Nested lists inside a list item — smaller markers, no double counters */
.bvths-tool-howto-content li ul,
.bvths-tool-howto-content li ol,
.bvths-tool-description-content li ul,
.bvths-tool-description-content li ol {
    margin: 0.5rem 0 0;
}

.bvths-tool-howto-content blockquote,
.bvths-tool-description-content blockquote {
    border-left: 3px solid var(--primary);
    background: var(--bg-tertiary);
    padding: 0.85rem 1.15rem;
    margin: 1rem 0;
    border-radius: 0 8px 8px 0;
    color: var(--text-secondary);
    font-style: italic;
}

.bvths-tool-howto-content code,
.bvths-tool-description-content code {
    background: var(--bg-tertiary);
    color: var(--primary-light);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: 'Fira Code', ui-monospace, monospace;
}

.bvths-tool-howto-content pre,
.bvths-tool-description-content pre {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
    margin: 1rem 0;
}

.bvths-tool-howto-content pre code,
.bvths-tool-description-content pre code {
    background: none;
    padding: 0;
}

.bvths-tool-howto-content img,
.bvths-tool-description-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
}

/* Tool Description */
.bvths-tool-description {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
}

/* Clearfix — if the admin left- or right-aligns an image inside the
   rich-text content below, that image gets `float: left/right` (see
   assets/js/quill-image-tools.js). A floated child does not count
   toward its parent's height in normal CSS flow, so without this the
   card's rounded border/background would stop where the *text*
   content ends while the floated image keeps rendering past it —
   visually "bursting out" of the bottom of the box. This forces the
   card to expand and contain any floated content inside it. */
.bvths-tool-description::after,
.bvths-tool-howto::after {
    content: '';
    display: table;
    clear: both;
}

.bvths-tool-description h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.bvths-tool-description-content {
    color: var(--text-secondary);
    line-height: 1.8;
}

/* Tool Video */
.bvths-tool-video {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
}

.bvths-tool-video h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.bvths-tool-video-embed {
    position: relative;
    padding-bottom: 56.25%;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.bvths-tool-video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Tool FAQ */
.bvths-tool-faq {
    margin-bottom: 2rem;
}

.bvths-tool-faq h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

/* Related Tools */
.bvths-related-tools {
    margin-bottom: 2rem;
}

.bvths-related-tools h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.bvths-related-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.bvths-related-tool-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: all var(--transition-base);
    text-decoration: none;
}

.bvths-related-tool-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.bvths-related-tool-card i {
    font-size: 1.25rem;
    color: var(--primary);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(79, 70, 229, 0.08);
    border-radius: 8px;
    flex-shrink: 0;
}

.bvths-related-tool-card span {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

/* ─── PAGE LAYOUTS (Blog, Contact, Static) ─ */
.bvths-page-layout {
    padding-top: calc(var(--header-height) + 2rem);
    padding-bottom: 4rem;
    min-height: 100vh;
}

.bvths-page-header {
    text-align: center;
    padding: 3rem 0;
    margin-bottom: 2rem;
    background: var(--gradient-card);
    border-radius: var(--border-radius-lg);
}

.bvths-page-title {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.bvths-page-subtitle {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

.bvths-page-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 2.5rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

.bvths-page-content h1,
.bvths-page-content h2,
.bvths-page-content h3 {
    color: var(--text-primary);
    margin: 1.5rem 0 0.75rem;
}

.bvths-page-content h2 {
    font-size: var(--font-size-2xl);
}

.bvths-page-content h3 {
    font-size: var(--font-size-xl);
}

.bvths-page-content p {
    margin-bottom: 1rem;
}

.bvths-page-content a {
    color: var(--primary);
    text-decoration: underline;
}

.bvths-page-content ul,
.bvths-page-content ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
    list-style: disc;
}

/* Contact Form */
.bvths-contact-form {
    max-width: 640px;
    margin: 0 auto;
}

.bvths-form-group {
    margin-bottom: 1.25rem;
}

.bvths-form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.bvths-form-input,
.bvths-form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
}

.bvths-form-input:focus,
.bvths-form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.bvths-form-textarea {
    min-height: 120px;
    resize: vertical;
}

/* ─── CATEGORY PAGE ──────────────────────── */
.bvths-category-page {
    padding-top: calc(var(--header-height) + 2rem);
    padding-bottom: 4rem;
    min-height: 100vh;
}

/* ─── ANIMATIONS ─────────────────────────── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Scroll-triggered animations */
.bvths-animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.bvths-animate-on-scroll.bvths-animated {
    opacity: 1;
    transform: translateY(0);
}

/* ─── LOADING STATES ─────────────────────── */
.bvths-skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--border-light) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 8px;
}

@keyframes skeleton-loading {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* ─── TOAST NOTIFICATIONS ────────────────── */
.bvths-toast-container {
    position: fixed;
    top: calc(var(--header-height) + 1rem);
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bvths-toast {
    padding: 0.75rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--font-size-sm);
    animation: slideInRight 0.3s ease-out;
    max-width: 400px;
}

.bvths-toast.bvths-success {
    border-left: 4px solid var(--success);
}

.bvths-toast.bvths-error {
    border-left: 4px solid var(--error);
}

.bvths-toast.bvths-warning {
    border-left: 4px solid var(--warning);
}

.bvths-toast.bvths-info {
    border-left: 4px solid var(--info);
}

/* ─── RESPONSIVE ─────────────────────────── */
@media (max-width: 1024px) {
    .bvths-footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .bvths-about-grid {
        grid-template-columns: 1fr;
    }

    .bvths-about-visual {
        order: -1;
    }

    .bvths-hero-stats {
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    :root {
        --container-padding: 1rem;
        --section-padding: 3.5rem 0;
        --card-padding: 1.25rem;
    }

    /* Mobile Nav toggle button */
    .bvths-mobile-menu-toggle {
        display: flex;
    }

    /* The desktop dropdown nav/mega-menu is fully replaced on mobile by the
       dedicated .bvthsMobPanel below — hide it entirely here rather than
       trying to force its dropdown layout into a mobile shape. */
    .bvths-main-nav {
        display: none;
    }

    /* Hero */
    .bvths-hero {
        min-height: 80vh;
    }

    .bvths-hero-stats {
        flex-direction: column;
        gap: 1.5rem;
    }

    .bvths-hero-actions {
        flex-direction: column;
    }

    /* Grids */
    .bvths-tools-grid {
        grid-template-columns: 1fr;
    }

    .bvths-footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .bvths-footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .bvths-about-features {
        grid-template-columns: 1fr;
    }

    .bvths-trust-grid {
        grid-template-columns: 1fr;
    }

    .bvths-videos-grid {
        grid-template-columns: 1fr;
    }

    .bvths-blog-grid {
        grid-template-columns: 1fr;
    }

    .bvths-related-tools-grid {
        grid-template-columns: 1fr;
    }

    .bvths-tool-embed {
        padding: 1rem;
    }

    .bvths-page-content {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .bvths-hero-title {
        font-size: 2rem;
    }

    .bvths-section-title {
        font-size: 1.5rem;
    }

    .bvths-tools-filter {
        gap: 0.35rem;
    }

    .bvths-filter-btn {
        padding: 0.45rem 0.85rem;
        font-size: var(--font-size-xs);
    }
}

/* ─── INDIAN BLOG SINGLE PAGE LAYOUT & SIDEBAR STYLING ─── */
.bvths-blog-single-page {
    padding-bottom: 4rem;
}

.bvths-blog-single-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2rem;
    align-items: start;
}

.bvths-blog-main-content {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.bvths-blog-post-category {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    background: rgba(79, 70, 229, 0.15);
    color: var(--primary-light);
    border-radius: 20px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.bvths-blog-post-title {
    font-size: clamp(1.75rem, 3.5vw, 2.35rem);
    font-weight: 800;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.bvths-blog-post-meta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.bvths-blog-post-meta .bvths-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.bvths-blog-post-meta .bvths-meta-item i {
    color: var(--primary);
}

.bvths-blog-highlights-box {
    background: rgba(79, 70, 229, 0.06);
    border-left: 4px solid var(--primary);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.75rem;
}

.bvths-blog-highlights-box .bvths-highlights-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary-light);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bvths-blog-highlights-box p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

.bvths-blog-post-banner {
    width: 100%;
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
}

.bvths-blog-post-banner img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════
   ARTICLE BODY TYPOGRAPHY  (blog single page — .bvths-blog-post-body)
   Platform-level styling for every blog post, light + dark.

   Why this block exists:
   - Site-wide reset sets `* {margin:0;padding:0}` and `ul,ol {list-style:none}`
     so bullets/numbers/spacing vanished inside blog content.
   - Imported / pasted posts carry inline styles (font-family, color,
     background) that break in dark mode. Text-level inline colours/fonts are
     therefore neutralised with !important; any block with an inline
     background becomes a theme-aware callout instead.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Theme tokens (scoped to article body) ── */
.bvths-blog-post-body {
    --bp-text: #334155;
    --bp-strong: #0F172A;
    --bp-heading: #0F172A;
    --bp-link: #4338CA;
    --bp-link-hover: #3730A3;
    --bp-marker: #4F46E5;
    --bp-muted: #64748B;
    --bp-rule: #E2E8F0;
    --bp-soft-bg: #F8FAFC;
    --bp-accent-bg: rgba(79, 70, 229, 0.07);
    --bp-quote-bg: #FFFBEB;
    --bp-quote-border: #F59E0B;
    --bp-quote-text: #78350F;
    --bp-code-bg: #EEF2FF;
    --bp-code-text: #4338CA;
    --bp-pre-bg: #0F172A;
    --bp-pre-text: #E2E8F0;
    --bp-th-bg: #EEF2FF;
    --bp-zebra: #F8FAFC;
    --bp-mark: #FEF08A;

    font-family: 'Inter', 'Noto Sans Devanagari', 'Mukta', 'Nirmala UI', 'Mangal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--bp-text);
    word-wrap: break-word;
    overflow-wrap: anywhere;
    -webkit-font-smoothing: antialiased;
}

[data-theme="dark"] .bvths-blog-post-body {
    --bp-text: #CBD5E1;
    --bp-strong: #F8FAFC;
    --bp-heading: #F8FAFC;
    --bp-link: #A5B4FC;
    --bp-link-hover: #C7D2FE;
    --bp-marker: #818CF8;
    --bp-muted: #94A3B8;
    --bp-rule: #334155;
    --bp-soft-bg: #172033;
    --bp-accent-bg: rgba(129, 140, 248, 0.12);
    --bp-quote-bg: rgba(245, 158, 11, 0.10);
    --bp-quote-border: #FBBF24;
    --bp-quote-text: #FDE68A;
    --bp-code-bg: rgba(129, 140, 248, 0.16);
    --bp-code-text: #C7D2FE;
    --bp-pre-bg: #0B1220;
    --bp-pre-text: #E2E8F0;
    --bp-th-bg: #273449;
    --bp-zebra: #182234;
    --bp-mark: rgba(250, 204, 21, 0.30);
}

/* ── Neutralise pasted / imported inline colours, fonts & backgrounds ── */
.bvths-blog-post-body :is(p, span, font, li, td, th, div, section, article, strong, b, em, i, u, small, label, cite, code, kbd) {
    font-family: inherit !important;
    color: inherit !important;
    background-color: transparent !important;
    background-image: none !important;
}

.bvths-blog-post-body :is(span, font, li, td, th, strong, b, em, i, u, label, cite) {
    font-size: inherit !important;
    line-height: inherit !important;
}

/* Any block that had an inline background becomes a theme-aware callout */
.bvths-blog-post-body :is(div, section, aside, p)[style*="background"] {
    background-color: var(--bp-accent-bg) !important;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}

/* ── Headings ── */
.bvths-blog-post-body :is(h1, h2, h3, h4, h5, h6) {
    font-family: inherit !important;
    color: var(--bp-heading) !important;
    background: none !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    text-align: left !important;
    scroll-margin-top: calc(var(--header-height, 72px) + 1rem);
}

.bvths-blog-post-body :is(h1, h2, h3, h4, h5, h6) * {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

.bvths-blog-post-body h1 {
    font-size: clamp(1.6rem, 3vw, 2rem) !important;
    line-height: 1.35;
    margin: 2rem 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, #4F46E5, #7C3AED 55%, transparent) 1;
}

.bvths-blog-post-body h2 {
    font-size: clamp(1.3rem, 2.4vw, 1.55rem) !important;
    line-height: 1.4;
    margin: 2.5rem 0 1.1rem;
    padding: 0.55rem 0.9rem;
    background: var(--bp-accent-bg) !important;
    border-left: 4px solid var(--bp-marker);
    border-radius: 0 10px 10px 0;
}

.bvths-blog-post-body h3 {
    font-size: 1.25rem !important;
    line-height: 1.45;
    margin: 2rem 0 0.8rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px dashed var(--bp-rule);
}

.bvths-blog-post-body h4 {
    font-size: 1.1rem !important;
    line-height: 1.5;
    margin: 1.6rem 0 0.6rem;
}

.bvths-blog-post-body h5,
.bvths-blog-post-body h6 {
    font-size: 0.95rem !important;
    line-height: 1.5;
    margin: 1.4rem 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bp-muted) !important;
}

.bvths-blog-post-body > :first-child {
    margin-top: 0;
}

/* ── Paragraphs & inline text ── */
.bvths-blog-post-body p {
    margin: 0 0 1.25rem;
    text-align: left !important;
}

/* A paragraph that is only bold text (e.g. a question line) reads as a sub-heading */
.bvths-blog-post-body p:has(> strong:only-child),
.bvths-blog-post-body p:has(> b:only-child) {
    margin-top: 1.9rem;
    margin-bottom: 0.6rem;
    color: var(--bp-heading);
}

.bvths-blog-post-body strong,
.bvths-blog-post-body b {
    color: var(--bp-strong) !important;
    font-weight: 700;
}

.bvths-blog-post-body em,
.bvths-blog-post-body i:not([class*="fa"]) {
    font-style: italic;
}

.bvths-blog-post-body small {
    font-size: 0.85em;
    color: var(--bp-muted) !important;
}

.bvths-blog-post-body mark {
    background: var(--bp-mark) !important;
    color: inherit !important;
    padding: 0.05em 0.3em;
    border-radius: 4px;
}

.bvths-blog-post-body sup,
.bvths-blog-post-body sub {
    font-size: 0.75em;
    line-height: 0;
}

/* ── Links ── */
.bvths-blog-post-body a,
.bvths-blog-post-body a * {
    color: var(--bp-link) !important;
}

.bvths-blog-post-body a {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--bp-link) 40%, transparent);
    transition: text-decoration-color var(--transition-fast, 0.15s ease);
}

.bvths-blog-post-body a:hover,
.bvths-blog-post-body a:hover * {
    color: var(--bp-link-hover) !important;
}

.bvths-blog-post-body a:hover {
    text-decoration-color: currentColor;
}

/* ── Lists (bullets & numbers restored) ── */
.bvths-blog-post-body ul,
.bvths-blog-post-body ol {
    margin: 1rem 0 1.5rem;
    padding-left: 1.75rem;
}

.bvths-blog-post-body ul {
    list-style: disc outside;
}

.bvths-blog-post-body ol {
    list-style: decimal outside;
}

.bvths-blog-post-body ul ul,
.bvths-blog-post-body ol ul {
    list-style-type: circle;
}

.bvths-blog-post-body ul ul ul,
.bvths-blog-post-body ol ul ul {
    list-style-type: square;
}

.bvths-blog-post-body ol ol,
.bvths-blog-post-body ul ol {
    list-style-type: lower-alpha;
}

.bvths-blog-post-body ol ol ol {
    list-style-type: lower-roman;
}

.bvths-blog-post-body li {
    display: list-item;
    margin: 0 0 0.6rem;
    padding-left: 0.35rem;
    color: var(--bp-text);
}

.bvths-blog-post-body li::marker {
    color: var(--bp-marker);
    font-weight: 700;
}

.bvths-blog-post-body li > p {
    margin-bottom: 0.5rem;
}

.bvths-blog-post-body li > ul,
.bvths-blog-post-body li > ol {
    margin: 0.6rem 0 0.4rem;
}

.bvths-blog-post-body li:last-child {
    margin-bottom: 0;
}

/* ── Blockquote ── */
.bvths-blog-post-body blockquote {
    position: relative;
    margin: 1.75rem 0;
    padding: 1.1rem 1.4rem 1.1rem 1.6rem;
    background: var(--bp-quote-bg) !important;
    border-left: 4px solid var(--bp-quote-border) !important;
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: var(--bp-quote-text) !important;
}

.bvths-blog-post-body blockquote * {
    color: inherit !important;
}

.bvths-blog-post-body blockquote p {
    margin: 0 0 0.75rem;
}

.bvths-blog-post-body blockquote p:last-child {
    margin-bottom: 0;
}

/* ── Horizontal rule ── */
.bvths-blog-post-body hr {
    border: 0;
    height: 2px;
    margin: 2.5rem 0;
    background: linear-gradient(90deg, transparent, var(--bp-rule) 15%, var(--bp-rule) 85%, transparent);
}

/* ── Images, figures, embeds ── */
.bvths-blog-post-body img {
    max-width: 100% !important;
    height: auto !important;
    margin: 1.75rem auto;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

.bvths-blog-post-body figure {
    margin: 1.75rem 0;
}

.bvths-blog-post-body figure img {
    margin: 0 auto;
}

.bvths-blog-post-body figcaption {
    margin-top: 0.6rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--bp-muted) !important;
}

.bvths-blog-post-body iframe,
.bvths-blog-post-body video {
    display: block;
    max-width: 100%;
    margin: 1.75rem auto;
    border: 0;
    border-radius: 12px;
}

.bvths-blog-post-body iframe[src*="youtube"],
.bvths-blog-post-body iframe[src*="youtu.be"] {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

/* ── Tables (scroll on small screens) ── */
.bvths-blog-post-body table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    margin: 1.75rem 0;
    border-collapse: collapse;
    border: 1px solid var(--bp-rule);
    border-radius: 10px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.bvths-blog-post-body th,
.bvths-blog-post-body td {
    padding: 0.7rem 1rem;
    border: 1px solid var(--bp-rule);
    text-align: left;
    vertical-align: top;
}

.bvths-blog-post-body th {
    background: var(--bp-th-bg) !important;
    color: var(--bp-heading) !important;
    font-weight: 700;
    white-space: nowrap;
}

.bvths-blog-post-body tbody tr:nth-child(even) td {
    background: var(--bp-zebra) !important;
}

/* ── Code ── */
.bvths-blog-post-body code,
.bvths-blog-post-body kbd {
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace !important;
    font-size: 0.88em;
    padding: 0.15em 0.45em;
    border-radius: 6px;
    background: var(--bp-code-bg) !important;
    color: var(--bp-code-text) !important;
}

.bvths-blog-post-body pre {
    margin: 1.5rem 0;
    padding: 1.1rem 1.25rem;
    overflow-x: auto;
    background: var(--bp-pre-bg);
    color: var(--bp-pre-text);
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.7;
    white-space: pre;
    overflow-wrap: normal;
}

.bvths-blog-post-body pre code {
    padding: 0;
    background: transparent !important;
    color: inherit !important;
    font-size: inherit;
}

/* ── Definition lists & details ── */
.bvths-blog-post-body dt {
    font-weight: 700;
    color: var(--bp-heading);
    margin-top: 1rem;
}

.bvths-blog-post-body dd {
    margin: 0.25rem 0 0.75rem 1.5rem;
}

.bvths-blog-post-body details {
    margin: 1.25rem 0;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--bp-rule);
    border-radius: 10px;
    background: var(--bp-soft-bg);
}

.bvths-blog-post-body summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--bp-heading);
}

/* ── Hindi / Devanagari comfort ── */
.bvths-blog-post-body :lang(hi) {
    line-height: 1.95;
}

/* ── Mobile ── */
@media (max-width: 576px) {
    .bvths-blog-post-body {
        font-size: 1rem;
        line-height: 1.8;
    }

    .bvths-blog-post-body h2 {
        padding: 0.5rem 0.75rem;
    }

    .bvths-blog-post-body ul,
    .bvths-blog-post-body ol {
        padding-left: 1.4rem;
    }

    .bvths-blog-post-body blockquote {
        padding: 0.9rem 1rem 0.9rem 1.15rem;
    }
}

/* ── Print ── */
@media print {
    .bvths-blog-post-body {
        --bp-text: #000;
        --bp-heading: #000;
        --bp-strong: #000;
        --bp-link: #000;
        color: #000;
    }
}

/* Tool Callout Banner */
.bvths-blog-tool-callout {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(14, 165, 233, 0.12));
    border: 1px solid rgba(79, 70, 229, 0.3);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    margin: 2.5rem 0;
    flex-wrap: wrap;
}

.bvths-blog-tool-callout .bvths-tool-callout-icon {
    width: 48px;
    height: 48px;
    background: var(--gradient-primary);
    color: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.bvths-blog-tool-callout .bvths-tool-callout-info {
    flex: 1;
    min-width: 220px;
}

.bvths-blog-tool-callout .bvths-tool-callout-info h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.bvths-blog-tool-callout .bvths-tool-callout-info p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Share Buttons */
.bvths-blog-share-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    margin: 2rem 0;
    border-top: 1px dashed var(--border-color);
    border-bottom: 1px dashed var(--border-color);
    flex-wrap: wrap;
}

.bvths-blog-share-box .bvths-share-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.bvths-blog-share-box .bvths-share-buttons {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.bvths-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: #fff;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.bvths-share-btn.bvths-whatsapp {
    background: #25D366;
}

.bvths-share-btn.bvths-telegram {
    background: #0088cc;
}

.bvths-share-btn.bvths-facebook {
    background: #1877F2;
}

.bvths-share-btn.bvths-copylink {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.bvths-share-btn:hover {
    transform: translateY(-2px);
    opacity: 0.95;
    color: #fff;
}

.bvths-share-btn.bvths-copylink:hover {
    color: var(--primary);
}

/* Author Box */
.bvths-blog-author-box {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
}

.bvths-blog-author-box .bvths-author-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.bvths-blog-author-box .bvths-author-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.bvths-blog-author-box .bvths-author-bio {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Related Section */
.bvths-blog-related-section {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.bvths-related-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bvths-blog-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.bvths-related-blog-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
    transition: all 0.2s;
    text-decoration: none;
    display: block;
}

.bvths-related-blog-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.bvths-related-blog-card h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.bvths-related-blog-card span {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* ─── RIGHT SIDEBAR WIDGETS (1 ADS WIDGET + POPULAR TOOLS) ─── */
.bvths-blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: calc(var(--header-height) + 1.5rem);
}

.bvths-blog-widget {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.bvths-blog-widget .bvths-widget-title {
    padding: 0.9rem 1.25rem;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bvths-blog-widget .bvths-widget-content {
    padding: 1rem;
}

/* 1 Ads Widget Slot Styling */
.bvths-widget-ad {
    border-color: rgba(79, 70, 229, 0.3);
    background: var(--card-bg);
}

.bvths-widget-ad .bvths-widget-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: rgba(79, 70, 229, 0.05);
}

.bvths-widget-ad .bvths-widget-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 280px;
    padding: 0.75rem;
}

/* Popular Tools Widget List */
.bvths-widget-tools-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bvths-widget-tool-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    text-decoration: none;
    transition: all 0.2s;
}

.bvths-widget-tool-item:hover {
    border-color: var(--primary);
    background: rgba(79, 70, 229, 0.08);
    transform: translateX(4px);
}

.bvths-widget-tool-item .bvths-wtool-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(79, 70, 229, 0.15);
    color: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.bvths-widget-tool-item .bvths-wtool-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.bvths-widget-tool-item .bvths-wtool-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

/* Recent Posts Widget List */
.bvths-widget-posts-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bvths-widget-post-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px dashed var(--border-color);
    text-decoration: none;
    transition: all 0.2s;
}

.bvths-widget-post-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.bvths-widget-post-item:hover .bvths-wpost-title {
    color: var(--primary);
}

.bvths-widget-post-item .bvths-wpost-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    transition: color 0.2s;
}

.bvths-widget-post-item .bvths-wpost-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* CTA Widget */
.bvths-widget-cta {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.15), rgba(14, 165, 233, 0.15));
    border: 1px solid rgba(79, 70, 229, 0.3);
    padding: 1.5rem 1.25rem;
    text-align: center;
}

.bvths-widget-cta .bvths-cta-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #0088cc;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 0.75rem auto;
}

.bvths-widget-cta h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}

.bvths-widget-cta p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0;
    line-height: 1.4;
}

/* RESPONSIVE LAYOUT BREAKPOINTS FOR BLOG */
@media (max-width: 992px) {
    .bvths-blog-single-layout {
        grid-template-columns: 1fr;
    }

    .bvths-blog-sidebar {
        position: static;
    }
}

@media (max-width: 576px) {
    .bvths-blog-main-content {
        padding: 1.25rem;
    }

    .bvths-blog-post-meta {
        gap: 0.75rem;
    }

    .bvths-blog-share-box {
        flex-direction: column;
        align-items: stretch;
    }

    .bvths-blog-share-box .bvths-share-buttons {
        justify-content: space-between;
    }
}

/* ─── PRINT STYLES ───────────────────────── */
@media print {

    header,
    footer,
    nav,
    .bvths-site-header,
    .bvths-site-footer,
    .bvths-tool-page-header,
    .bvths-tool-page-breadcrumb,
    .bvths-ad-sidebar-container,
    .bvths-ad-left-container,
    .bvths-ad-right-container,
    .bvths-tool-howto,
    .bvths-tool-video,
    .bvths-tool-description,
    .bvths-tool-faq,
    .bvths-related-tools,
    .bvths-back-to-top,
    .bvths-ad-slot,
    .bvths-tool-ads-wrapper,
    .bvths-theme-toggle,
    .bvthsMobPanel {
        display: none !important;
    }

    body, main, .bvths-tool-page, .bvths-tool-page-grid, .bvths-tool-content-wrapper, .bvths-tool-main-content {
        background: #FFFFFF !important;
        color: #000000 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .bvths-tool-embed {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE MENU PANEL — bvthsMobPanel*
   Dedicated, card-based mobile navigation. All classes below are
   prefixed bvthsMobPanel__ (BEM-style) so they are guaranteed not
   to collide with any other class in this stylesheet.
   ══════════════════════════════════════════════════════════════ */

.bvthsMobPanel {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    font-family: var(--font-family);
}

.bvthsMobPanel.bvthsMobPanel--open {
    display: block;
}

.bvthsMobPanel__scrim {
    position: absolute;
    inset: 0;
    background: rgba(3, 6, 16, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    animation: bvthsMobScrimIn 0.3s ease forwards;
}

@keyframes bvthsMobScrimIn {
    to { opacity: 1; }
}

.bvthsMobPanel__sheet {
    position: absolute;
    top: 0;
    right: 0;
    height: 100dvh;
    height: 100vh; /* fallback for browsers without dvh support */
    width: min(88vw, 400px);
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    animation: bvthsMobSheetIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    overflow: hidden;
}

@keyframes bvthsMobSheetIn {
    to { transform: translateX(0); }
}

.bvthsMobPanel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    background: var(--gradient-hero);
    flex-shrink: 0;
}

.bvthsMobPanel__logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
}

.bvthsMobPanel__logoIcon {
    font-size: 1.4rem;
}

.bvthsMobPanel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.bvthsMobPanel__close:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: rotate(90deg);
}

.bvthsMobPanel__search {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1rem 1.1rem 0.25rem;
    padding: 0.7rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-full);
    flex-shrink: 0;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.bvthsMobPanel__search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.bvthsMobPanel__searchIcon {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.bvthsMobPanel__searchInput {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 0.92rem;
}

.bvthsMobPanel__searchInput::placeholder {
    color: var(--text-muted);
}

.bvthsMobPanel__primaryLinks {
    display: flex;
    flex-direction: column;
    padding: 0.85rem 1.1rem 0.25rem;
    gap: 0.15rem;
    flex-shrink: 0;
}

.bvthsMobPanel__primaryLink {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.94rem;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), padding-left var(--transition-fast);
}

.bvthsMobPanel__primaryLink i {
    color: var(--primary);
    width: 18px;
    text-align: center;
}

.bvthsMobPanel__primaryLink:hover {
    background: var(--bg-tertiary);
    padding-left: 1.1rem;
    color: var(--primary);
}

.bvthsMobPanel__categoryTabs {
    display: flex;
    gap: 0.5rem;
    padding: 0.9rem 1.1rem 0.1rem;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
}

.bvthsMobPanel__categoryTabs::-webkit-scrollbar {
    display: none;
}

.bvthsMobPanel__categoryTab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-full);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.bvthsMobPanel__categoryTab:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.bvthsMobPanel__categoryTab--active {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}

.bvthsMobPanel__toolsGrid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
    padding: 1rem 1.1rem 1.25rem;
    align-content: start;
}

.bvthsMobPanel__toolCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    padding: 1rem 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    text-decoration: none;
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    opacity: 0;
    animation: bvthsMobCardIn 0.4s ease forwards;
}

/* Stagger the card entrance so they cascade in rather than popping in at once */
.bvthsMobPanel__toolCard:nth-child(1)  { animation-delay: 0.02s; }
.bvthsMobPanel__toolCard:nth-child(2)  { animation-delay: 0.05s; }
.bvthsMobPanel__toolCard:nth-child(3)  { animation-delay: 0.08s; }
.bvthsMobPanel__toolCard:nth-child(4)  { animation-delay: 0.11s; }
.bvthsMobPanel__toolCard:nth-child(5)  { animation-delay: 0.14s; }
.bvthsMobPanel__toolCard:nth-child(6)  { animation-delay: 0.17s; }
.bvthsMobPanel__toolCard:nth-child(7)  { animation-delay: 0.20s; }
.bvthsMobPanel__toolCard:nth-child(8)  { animation-delay: 0.23s; }
.bvthsMobPanel__toolCard:nth-child(n+9) { animation-delay: 0.26s; }

@keyframes bvthsMobCardIn {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.bvthsMobPanel__toolCard:hover,
.bvthsMobPanel__toolCard:active {
    transform: translateY(-3px);
    border-color: var(--primary);
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.25);
}

.bvthsMobPanel__toolCardIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--gradient-card);
    color: var(--primary);
    font-size: 1.15rem;
}

.bvthsMobPanel__toolCardName {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
}

.bvthsMobPanel__footer {
    flex-shrink: 0;
    padding: 0.85rem 1.1rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.bvthsMobPanel__themeToggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.bvthsMobPanel__themeToggle:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Prevent the page behind the panel from scrolling while it's open,
   without breaking scroll restoration (position:fixed technique, iOS-safe) */
body.bvthsMobScrollLock {
    overflow: hidden;
    width: 100%;
}

@media (min-width: 769px) {
    .bvthsMobPanel {
        display: none !important;
    }
}

@media (max-width: 380px) {
    .bvthsMobPanel__sheet {
        width: 100vw;
    }
    .bvthsMobPanel__toolsGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.55rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bvthsMobPanel__scrim,
    .bvthsMobPanel__sheet,
    .bvthsMobPanel__toolCard {
        animation: none !important;
    }
    .bvthsMobPanel__sheet {
        transform: translateX(0);
    }
}
/* ══════════════════════════════════════════════════════ */
/* HOMEPAGE SOCIAL CHANNELS POPUP                          */
/* ══════════════════════════════════════════════════════ */
.bvths-social-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.bvths-social-popup-overlay.bvths-social-popup-open {
    opacity: 1;
    visibility: visible;
}

.bvths-social-popup {
    position: relative;
    width: 100%;
    max-width: 820px;
    max-height: 92vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: var(--shadow-xl);
    transform: scale(0.94) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bvths-social-popup-overlay.bvths-social-popup-open .bvths-social-popup {
    transform: scale(1) translateY(0);
}

.bvths-social-popup-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 5;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: #0F172A;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: transform 0.18s ease, background 0.18s ease;
}

.bvths-social-popup-close i {
    font-size: 0.95rem;
    line-height: 1;
}

.bvths-social-popup-close:hover {
    transform: rotate(90deg);
    background: #fff;
}

/* Left panel */
.bvths-social-popup-left {
    position: relative;
    background: var(--gradient-hero);
    padding: 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.bvths-social-popup-left-bg {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 25% 20%, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: 0.6;
}

.bvths-social-popup-left-bg::after {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.35), transparent 70%);
    top: -60px;
    left: -60px;
}

.bvths-social-popup-left-content {
    position: relative;
    z-index: 1;
}

.bvths-social-popup-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.bvths-social-popup-brand-logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    background: #fff;
    padding: 4px;
}

.bvths-social-popup-brand-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.bvths-social-popup-brand-name {
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.2;
}

.bvths-social-popup-brand-tag {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.bvths-social-popup-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #E0E7FF;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 1.1rem;
    width: fit-content;
}

.bvths-social-popup-heading {
    color: #fff;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 0.85rem;
}

.bvths-social-popup-sub {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.bvths-social-popup-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.bvths-social-popup-features li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.85rem;
    font-weight: 600;
}

.bvths-social-popup-features li i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.bvths-social-popup-icon-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.bvths-social-popup-mini-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.85rem;
}

.bvths-mini-whatsapp { background: #25D366; }
.bvths-mini-telegram { background: #229ED9; }
.bvths-mini-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }

.bvths-social-popup-icon-row-label {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75rem;
    margin-left: 0.25rem;
}

/* Right panel */
.bvths-social-popup-right {
    background: #FFFFFF;
    padding: 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* This right panel is intentionally a fixed white card regardless of
   site theme (same as the left panel is always a fixed dark gradient
   regardless of theme) — it should look the same whether the visitor
   has Light or Dark mode on. Colors below are fixed, not theme
   variables, so contrast never depends on --text-primary/--bg-card
   flipping under dark mode (that mismatch was making this panel look
   dark-on-dark with washed-out text before this fix). */
.bvths-social-popup-kicker {
    color: #4F46E5;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}

.bvths-social-popup-right-title {
    color: #0F172A;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 0.6rem;
}

.bvths-social-popup-right-sub {
    color: #64748B;
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.bvths-social-popup-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.bvths-social-popup-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    text-decoration: none;
    color: #fff;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.bvths-social-popup-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.bvths-social-popup-link-whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E);
}

.bvths-social-popup-link-telegram {
    background: linear-gradient(135deg, #34A9E8, #1B7FBF);
}

.bvths-social-popup-link-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.bvths-social-popup-link-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.bvths-social-popup-link-text strong {
    font-size: 0.92rem;
    font-weight: 700;
}

.bvths-social-popup-link-text small {
    font-size: 0.74rem;
    opacity: 0.85;
}

.bvths-social-popup-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    flex-shrink: 0;
    white-space: nowrap;
}

.bvths-social-popup-links-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.bvths-social-popup-link-small {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    text-decoration: none;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.bvths-social-popup-link-small:hover {
    transform: translateY(-2px);
    border-color: #4F46E5;
}

.bvths-social-popup-link-small .bvths-social-popup-link-icon {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    color: #fff;
}

.bvths-social-popup-link-instagram .bvths-social-popup-link-text strong {
    color: #D6249F;
}

.bvths-social-popup-link-small .bvths-social-popup-link-text small {
    color: #64748B;
    opacity: 1;
}

.bvths-social-popup-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #059669;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    margin-bottom: 1.25rem;
}

.bvths-social-popup-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.bvths-social-popup-dontshow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: #475569;
    cursor: pointer;
}

.bvths-social-popup-dontshow input {
    width: 16px;
    height: 16px;
    accent-color: #4F46E5;
    cursor: pointer;
}

.bvths-social-popup-later {
    background: none;
    border: none;
    color: #94A3B8;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bvths-social-popup-later:hover {
    color: #0F172A;
}

@media (max-width: 720px) {
    .bvths-social-popup {
        grid-template-columns: 1fr;
        max-height: 88vh;
        overflow-y: auto;
    }
    .bvths-social-popup-left {
        padding: 1.75rem 1.5rem;
    }
    .bvths-social-popup-heading {
        font-size: 1.4rem;
    }
    .bvths-social-popup-right {
        padding: 1.75rem 1.5rem;
        overflow-y: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bvths-social-popup-overlay,
    .bvths-social-popup {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   BLOG PAGINATION  (blog listing)
   ═══════════════════════════════════════════════════════════════════ */
.bvths-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 2.5rem 0 1rem;
}

.bvths-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 42px;
    height: 42px;
    padding: 0 0.9rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all var(--transition-fast);
}

a.bvths-page-link:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}

.bvths-page-link.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    cursor: default;
}

.bvths-page-gap {
    color: var(--text-muted);
    padding: 0 0.15rem;
}

@media (max-width: 576px) {
    .bvths-page-link { min-width: 38px; height: 38px; padding: 0 0.7rem; font-size: 0.9rem; }
}