/* ==========================================================================
   iTelVoIP – Blog, Download Center, Guides Stylesheet
   Extends public.css (loaded after it).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared Page Hero (blog/downloads/guides variant)
   -------------------------------------------------------------------------- */
.itv-page-hero {
    padding: 4rem 0 2.5rem;
    background: linear-gradient(135deg, var(--itv-dark) 0%, #1e2d4f 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.itv-page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E") repeat;
    pointer-events: none;
}
.itv-page-hero-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: .75rem;
    letter-spacing: -.02em;
}
.itv-page-hero-title span { color: var(--itv-secondary); }
.itv-page-hero-sub  { color: rgba(255,255,255,.75); font-size: 1.0625rem; max-width: 580px; margin-bottom: 0; }
.itv-page-hero-count { color: rgba(255,255,255,.6); font-size: .9375rem; }
.itv-hero-breadcrumb { color: rgba(255,255,255,.5); font-size: .875rem; }

/* --------------------------------------------------------------------------
   Search Form (shared)
   -------------------------------------------------------------------------- */
.itv-search-form {}
.itv-search-group .input-group-text {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.7);
}
.itv-search-group .form-control {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    font-size: .9375rem;
}
.itv-search-group .form-control::placeholder { color: rgba(255,255,255,.5); }
.itv-search-group .form-control:focus {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.4);
    box-shadow: none;
    color: #fff;
}

/* --------------------------------------------------------------------------
   Filter Bar
   -------------------------------------------------------------------------- */
.itv-filter-bar {
    background: var(--bs-body-bg, #fff);
    border-bottom: 1px solid var(--itv-border);
    padding: .875rem 0;
}
[data-bs-theme="dark"] .itv-filter-bar { border-color: #334155; }
.itv-filter-label { font-size: .875rem; font-weight: 600; color: var(--itv-muted); white-space: nowrap; }
.itv-filter-select { max-width: 200px; font-size: .875rem; }

/* --------------------------------------------------------------------------
   Section Helpers
   -------------------------------------------------------------------------- */
.itv-section-alt { background: #f8fafc; }
[data-bs-theme="dark"] .itv-section-alt { background: #111827; }
.itv-section-title-sm { font-size: 1.25rem; font-weight: 700; }
.itv-section-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--itv-primary);
    background: rgba(26,86,219,.08);
    padding: .3rem .75rem;
    border-radius: 100px;
    letter-spacing: .01em;
}

/* --------------------------------------------------------------------------
   Blog – General Cards
   -------------------------------------------------------------------------- */
.itv-blog-card {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--itv-border);
    border-radius: var(--itv-radius-lg);
    overflow: hidden;
    transition: box-shadow .2s var(--itv-ease), transform .2s var(--itv-ease);
    display: flex;
    flex-direction: column;
}
.itv-blog-card:hover { box-shadow: var(--itv-shadow-lg); transform: translateY(-3px); }
[data-bs-theme="dark"] .itv-blog-card { background: var(--itv-dark-2); border-color: #334155; }

.itv-blog-card-img-link { display: block; overflow: hidden; aspect-ratio: 16/9; }
.itv-blog-card-img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .3s var(--itv-ease);
}
.itv-blog-card:hover .itv-blog-card-img { transform: scale(1.04); }

.itv-blog-placeholder-img {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; color: rgba(255,255,255,.2);
    aspect-ratio: 16/9;
    width: 100%;
}

.itv-blog-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.itv-blog-card-title {
    font-size: 1.0625rem; font-weight: 700;
    margin-bottom: .5rem; line-height: 1.4;
}
.itv-blog-card-title a { color: inherit; text-decoration: none; }
.itv-blog-card-title a:hover { color: var(--itv-primary); }
.itv-blog-card-excerpt { font-size: .9rem; color: var(--itv-muted); margin-bottom: .75rem; flex: 1; }

.itv-blog-cat-tag {
    display: inline-block;
    font-size: .75rem; font-weight: 600;
    color: var(--itv-primary);
    background: rgba(26,86,219,.08);
    padding: .2rem .6rem; border-radius: 100px;
    text-decoration: none;
    transition: background .15s;
}
.itv-blog-cat-tag:hover { background: rgba(26,86,219,.15); color: var(--itv-primary); }

.itv-blog-badge-featured {
    display: inline-flex; align-items: center; gap: .2rem;
    font-size: .7rem; font-weight: 700;
    color: #fff; background: var(--itv-warning);
    padding: .2rem .6rem; border-radius: 100px;
}

.itv-blog-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.itv-blog-tag {
    font-size: .75rem; font-weight: 500;
    color: var(--itv-muted);
    background: rgba(100,116,139,.08);
    padding: .15rem .5rem; border-radius: 4px;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.itv-blog-tag:hover { background: rgba(26,86,219,.1); color: var(--itv-primary); }

.itv-blog-meta {
    font-size: .8125rem;
    color: var(--itv-muted);
}

/* --------------------------------------------------------------------------
   Blog – Featured Post (index hero card)
   -------------------------------------------------------------------------- */
.itv-blog-featured { }
.itv-blog-featured-inner {
    border-radius: var(--itv-radius-xl);
    overflow: hidden;
    border: 1px solid var(--itv-border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bs-body-bg, #fff);
    transition: box-shadow .2s;
}
[data-bs-theme="dark"] .itv-blog-featured-inner { background: var(--itv-dark-2); border-color: #334155; }
.itv-blog-featured-inner:hover { box-shadow: var(--itv-shadow-lg); }
@media (max-width: 768px) { .itv-blog-featured-inner { grid-template-columns: 1fr; } }
.itv-blog-featured-img { overflow: hidden; min-height: 280px; }
.itv-blog-featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.itv-blog-featured-inner:hover .itv-blog-featured-img img { transform: scale(1.04); }
.itv-blog-featured-img.itv-blog-placeholder-img { aspect-ratio: unset; }
.itv-blog-featured-body { padding: 2rem; display: flex; flex-direction: column; }
.itv-blog-featured-title { font-size: 1.5rem; font-weight: 800; line-height: 1.3; margin-bottom: .75rem; }
.itv-blog-featured-title a { color: inherit; text-decoration: none; }
.itv-blog-featured-title a:hover { color: var(--itv-primary); }
.itv-blog-excerpt { color: var(--itv-muted); font-size: .9375rem; flex: 1; }

/* --------------------------------------------------------------------------
   Blog – Pagination
   -------------------------------------------------------------------------- */
.itv-pagination .page-link {
    border-radius: var(--itv-radius) !important;
    border: 1px solid var(--itv-border);
    color: var(--itv-body);
    padding: .5rem .875rem;
    transition: all .15s;
}
.itv-pagination .page-item.active .page-link {
    background: var(--itv-primary); border-color: var(--itv-primary); color: #fff;
}
.itv-pagination .page-link:hover { background: rgba(26,86,219,.06); color: var(--itv-primary); }

/* --------------------------------------------------------------------------
   Blog – Post Detail
   -------------------------------------------------------------------------- */
.itv-post-hero {
    padding: 3.5rem 0 2.5rem;
    background: linear-gradient(135deg, var(--itv-dark) 0%, #1e2d4f 100%);
    color: #fff;
}
.itv-post-title {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    font-weight: 800; color: #fff; line-height: 1.2; letter-spacing: -.02em;
}
.itv-post-excerpt { color: rgba(255,255,255,.75); font-size: 1.0625rem; margin-top: .75rem; }
.itv-post-meta { font-size: .875rem; color: rgba(255,255,255,.6); }
.itv-post-meta-sep { color: rgba(255,255,255,.3); }
.itv-post-author { display: flex; align-items: center; gap: .5rem; }
.itv-post-author-avatar {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(255,255,255,.2);
}
.itv-post-author-placeholder {
    background: rgba(255,255,255,.12);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.5); font-size: .875rem;
    flex-shrink: 0;
}
.itv-post-author-name { font-weight: 600; color: rgba(255,255,255,.85); }

.itv-post-featured-img-wrapper { background: var(--itv-dark); padding-bottom: 0; }
.itv-post-featured-img {
    width: 100%; display: block;
    border-radius: 0 0 var(--itv-radius-xl) var(--itv-radius-xl);
    max-height: 520px; object-fit: cover;
}

/* Post content typography */
.itv-post-content { font-size: 1.0625rem; line-height: 1.8; color: var(--itv-body); }
.itv-post-content h2 {
    font-size: 1.5rem; font-weight: 700; margin-top: 2.5rem; margin-bottom: 1rem;
    color: var(--itv-dark);
}
[data-bs-theme="dark"] .itv-post-content h2 { color: #f1f5f9; }
.itv-post-content h3 {
    font-size: 1.25rem; font-weight: 700; margin-top: 2rem; margin-bottom: .75rem;
    color: var(--itv-dark);
}
[data-bs-theme="dark"] .itv-post-content h3 { color: #e2e8f0; }
.itv-post-content p { margin-bottom: 1.25rem; }
.itv-post-content a { color: var(--itv-primary); text-decoration: underline; }
.itv-post-content ul, .itv-post-content ol {
    padding-left: 1.5rem; margin-bottom: 1.25rem;
}
.itv-post-content li { margin-bottom: .4rem; }
.itv-post-content code {
    font-size: .875em; background: rgba(26,86,219,.08);
    color: var(--itv-primary); padding: .1em .4em; border-radius: 4px;
}
.itv-post-content pre {
    background: var(--itv-dark); color: #e2e8f0;
    padding: 1.25rem; border-radius: var(--itv-radius);
    overflow-x: auto; margin-bottom: 1.5rem;
    font-size: .9rem; line-height: 1.6;
}
.itv-post-content pre code { background: none; color: inherit; padding: 0; }
.itv-post-content blockquote {
    border-left: 4px solid var(--itv-primary);
    padding: .75rem 1.25rem; margin: 1.5rem 0;
    background: rgba(26,86,219,.04);
    border-radius: 0 var(--itv-radius) var(--itv-radius) 0;
    color: var(--itv-body);
}
.itv-post-content img { max-width: 100%; height: auto; border-radius: var(--itv-radius); }
.itv-post-content table {
    width: 100%; border-collapse: collapse; margin-bottom: 1.5rem;
    font-size: .9375rem;
}
.itv-post-content th, .itv-post-content td {
    border: 1px solid var(--itv-border); padding: .625rem .875rem;
    text-align: left;
}
.itv-post-content th { background: rgba(26,86,219,.06); font-weight: 700; }

/* Guide Step Blocks */
.guide-steps { display: flex; flex-direction: column; gap: 1.5rem; margin: 1.5rem 0; }
.guide-step {
    display: flex; gap: 1.25rem; align-items: flex-start;
    padding: 1.25rem; background: rgba(26,86,219,.04);
    border-radius: var(--itv-radius-lg); border: 1px solid rgba(26,86,219,.1);
}
[data-bs-theme="dark"] .guide-step { background: rgba(26,86,219,.08); border-color: rgba(26,86,219,.2); }
.step-number {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--itv-gradient);
    color: #fff; font-weight: 800; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.step-content h3 { font-size: 1.0625rem; font-weight: 700; margin-bottom: .4rem; }
.step-content p { margin: 0; font-size: .9375rem; color: var(--itv-muted); }

/* Share Bar */
.itv-share-bar {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: 1.25rem 0; border-top: 1px solid var(--itv-border);
}
.itv-share-label { font-weight: 600; font-size: .9375rem; }
.itv-share-btns { display: flex; gap: .5rem; }
.itv-share-btn {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; border: 1px solid var(--itv-border);
    color: var(--itv-muted); background: none; cursor: pointer;
    transition: all .2s;
    text-decoration: none;
}
.itv-share-btn:hover { transform: scale(1.1); }
.itv-share-twitter:hover  { background: #000; border-color: #000; color: #fff; }
.itv-share-facebook:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.itv-share-linkedin:hover { background: #0077b5; border-color: #0077b5; color: #fff; }
.itv-share-whatsapp:hover { background: #25d366; border-color: #25d366; color: #fff; }
.itv-share-copy:hover     { background: var(--itv-primary); border-color: var(--itv-primary); color: #fff; }

/* Post Tags (detail) */
.itv-post-tags { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

/* Author Box */
.itv-author-box {
    border: 1px solid var(--itv-border); border-radius: var(--itv-radius-lg);
    overflow: hidden;
}
.itv-author-box-inner { display: flex; gap: 1rem; padding: 1.5rem; align-items: flex-start; }
@media (max-width: 576px) { .itv-author-box-inner { flex-direction: column; } }
.itv-author-box-avatar {
    width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
    object-fit: cover;
}
.itv-author-box-placeholder {
    background: linear-gradient(135deg, var(--itv-primary), var(--itv-accent));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.5rem; flex-shrink: 0;
}
.itv-author-box-name { font-weight: 700; font-size: 1rem; margin-bottom: .3rem; }
.itv-author-box-bio  { font-size: .9rem; color: var(--itv-muted); }

/* --------------------------------------------------------------------------
   Blog Sidebar
   -------------------------------------------------------------------------- */
.itv-blog-sidebar { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: calc(var(--itv-navbar-h) + 1.5rem); }
.itv-sidebar-widget {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--itv-border);
    border-radius: var(--itv-radius-lg);
    padding: 1.25rem;
}
[data-bs-theme="dark"] .itv-sidebar-widget { background: var(--itv-dark-2); border-color: #334155; }
.itv-sidebar-title {
    font-size: 1rem; font-weight: 700; margin-bottom: 1rem;
    display: flex; align-items: center;
    padding-bottom: .75rem; border-bottom: 1px solid var(--itv-border);
}

/* Category List */
.itv-sidebar-cat-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .25rem; }
.itv-sidebar-cat-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem .625rem; border-radius: var(--itv-radius);
    color: var(--itv-body); text-decoration: none; font-size: .9375rem;
    transition: background .15s;
}
.itv-sidebar-cat-link:hover { background: rgba(26,86,219,.06); color: var(--itv-primary); }
.itv-sidebar-cat-count {
    font-size: .75rem; font-weight: 700;
    color: var(--itv-muted); background: rgba(100,116,139,.1);
    padding: .1rem .45rem; border-radius: 100px;
}

/* Popular Posts */
.itv-sidebar-posts { display: flex; flex-direction: column; gap: .75rem; }
.itv-sidebar-post-item {
    display: flex; gap: .75rem; align-items: center;
    text-decoration: none; color: inherit;
    padding: .5rem; border-radius: var(--itv-radius);
    transition: background .15s;
}
.itv-sidebar-post-item:hover { background: rgba(26,86,219,.05); }
.itv-sidebar-post-img {
    width: 56px; height: 56px; border-radius: .5rem;
    object-fit: cover; flex-shrink: 0;
}
.itv-sidebar-post-placeholder {
    background: #1e293b; display: flex;
    align-items: center; justify-content: center;
    font-size: 1rem; color: rgba(255,255,255,.3); flex-shrink: 0;
}
.itv-sidebar-post-title { font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--itv-body); margin-bottom: .25rem; }
.itv-sidebar-post-meta  { font-size: .75rem; color: var(--itv-muted); display: flex; gap: .75rem; }

/* Tags Cloud */
.itv-tags-cloud { display: flex; flex-wrap: wrap; gap: .4rem; }
.itv-cloud-tag {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .8125rem; font-weight: 500;
    color: var(--itv-body); background: rgba(100,116,139,.08);
    padding: .25rem .6rem; border-radius: 100px;
    text-decoration: none; border: 1px solid transparent;
    transition: all .15s;
}
.itv-cloud-tag:hover { background: rgba(26,86,219,.1); color: var(--itv-primary); border-color: rgba(26,86,219,.2); }
.itv-cloud-count { font-size: .7rem; color: var(--itv-muted); }

/* ToC Widget */
.itv-toc-widget {}
.itv-toc-ol { padding-left: 1rem; margin: 0; }
.itv-toc-item { margin-bottom: .35rem; }
.itv-toc-item.itv-toc-sub { padding-left: .75rem; }
.itv-toc-link { font-size: .875rem; color: var(--itv-body); text-decoration: none; transition: color .15s; }
.itv-toc-link:hover { color: var(--itv-primary); }

/* Empty state */
.itv-empty-state {}
.itv-empty-icon {
    width: 80px; height: 80px; border-radius: 50%;
    background: rgba(26,86,219,.08); display: flex;
    align-items: center; justify-content: center;
    font-size: 2rem; color: var(--itv-primary);
}

/* --------------------------------------------------------------------------
   Download Center
   -------------------------------------------------------------------------- */
.itv-dl-hero {}

/* File type icon blobs */
.itv-dl-icon {
    width: 56px; height: 56px; border-radius: var(--itv-radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: #fff; flex-shrink: 0;
}
.itv-dl-icon-exe  { background: linear-gradient(135deg, #0078d4, #00b0f0); }
.itv-dl-icon-apk  { background: linear-gradient(135deg, #3ddc84, #01875f); }
.itv-dl-icon-pdf  { background: linear-gradient(135deg, #f40f02, #d44000); }
.itv-dl-icon-zip  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.itv-dl-icon-conf { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.itv-dl-icon-dmg  { background: linear-gradient(135deg, #888, #555); }
.itv-dl-icon-deb  { background: linear-gradient(135deg, #e95420, #c03000); }
.itv-dl-icon-rpm  { background: linear-gradient(135deg, #cc0000, #aa0000); }
.itv-dl-icon-other { background: linear-gradient(135deg, #64748b, #475569); }

/* Cards */
.itv-dl-card {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--itv-border);
    border-radius: var(--itv-radius-lg);
    overflow: hidden; display: flex; flex-direction: column;
    transition: box-shadow .2s, transform .2s;
}
.itv-dl-card:hover { box-shadow: var(--itv-shadow-lg); transform: translateY(-3px); }
[data-bs-theme="dark"] .itv-dl-card { background: var(--itv-dark-2); border-color: #334155; }
.itv-dl-card-featured { border-top: 3px solid var(--itv-primary); }

.itv-dl-card-header {
    padding: 1.25rem 1.25rem .75rem;
    display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
}
.itv-dl-card-body { padding: 0 1.25rem 1rem; flex: 1; }
.itv-dl-card-footer { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--itv-border); }
[data-bs-theme="dark"] .itv-dl-card-footer { border-color: #334155; }

.itv-dl-card-title { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.itv-dl-card-title a { color: inherit; text-decoration: none; }
.itv-dl-card-title a:hover { color: var(--itv-primary); }
.itv-dl-card-desc { font-size: .875rem; color: var(--itv-muted); margin-bottom: .75rem; }

.itv-dl-badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.itv-dl-type-badge {
    font-size: .7rem; font-weight: 700;
    background: var(--itv-primary); color: #fff;
    padding: .2rem .5rem; border-radius: 4px; letter-spacing: .04em;
}
.itv-dl-type-badge-lg { font-size: .8125rem; padding: .3rem .7rem; }
.itv-dl-platform-badge {
    font-size: .75rem; font-weight: 600;
    background: rgba(26,86,219,.08); color: var(--itv-primary);
    padding: .2rem .6rem; border-radius: 100px;
    display: inline-flex; align-items: center;
}
.itv-dl-cat-badge {
    font-size: .75rem; background: rgba(100,116,139,.1);
    color: var(--itv-muted); padding: .2rem .6rem; border-radius: 100px;
}

.itv-dl-meta { display: flex; gap: .75rem; flex-wrap: wrap; font-size: .8125rem; color: var(--itv-muted); }

/* List view */
.itv-dl-list { display: flex; flex-direction: column; gap: .75rem; }
.itv-dl-list-item {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.25rem; background: var(--bs-body-bg, #fff);
    border: 1px solid var(--itv-border); border-radius: var(--itv-radius-lg);
    transition: box-shadow .15s;
}
.itv-dl-list-item:hover { box-shadow: var(--itv-shadow); }
[data-bs-theme="dark"] .itv-dl-list-item { background: var(--itv-dark-2); border-color: #334155; }
.itv-dl-list-icon { flex-shrink: 0; }
.itv-dl-list-info { flex: 1; min-width: 0; }
.itv-dl-list-title { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; }
.itv-dl-list-title a { color: inherit; text-decoration: none; }
.itv-dl-list-title a:hover { color: var(--itv-primary); }
.itv-dl-list-desc { font-size: .875rem; color: var(--itv-muted); margin-bottom: .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.itv-dl-list-actions { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
@media (max-width: 576px) { .itv-dl-list-item { flex-direction: column; align-items: flex-start; } .itv-dl-list-actions { width: 100%; flex-direction: row; } }

/* Detail page */
.itv-dl-detail-icon { width: 80px; height: 80px; border-radius: var(--itv-radius-lg); font-size: 2rem; }
.itv-dl-main-btn { padding: .875rem 2rem; font-size: 1rem; position: relative; }
.itv-dl-btn-size {
    position: absolute; top: -8px; right: -8px;
    font-size: .65rem; font-weight: 700;
    background: var(--itv-success); color: #fff;
    padding: .1rem .4rem; border-radius: 100px;
    white-space: nowrap;
}

/* Content boxes */
.itv-content-box {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--itv-border); border-radius: var(--itv-radius-lg);
    padding: 1.75rem;
}
[data-bs-theme="dark"] .itv-content-box { background: var(--itv-dark-2); border-color: #334155; }
.itv-content-box-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--itv-border); }
.itv-content-text { font-size: .9375rem; line-height: 1.75; }

.itv-requirements-list, .itv-changelog { display: flex; flex-direction: column; gap: .5rem; }
.itv-req-item, .itv-changelog-item { display: flex; align-items: flex-start; gap: .5rem; font-size: .9375rem; }
.itv-link-muted { color: var(--itv-muted); text-decoration: none; }
.itv-link-muted:hover { color: var(--itv-primary); }

/* Version table */
.itv-version-table-wrap { overflow-x: auto; }
.itv-version-table { font-size: .875rem; }
.itv-version-table th { font-weight: 700; font-size: .8125rem; color: var(--itv-muted); text-transform: uppercase; letter-spacing: .04em; }
.itv-version-current td { background: rgba(26,86,219,.04); }
[data-bs-theme="dark"] .itv-version-current td { background: rgba(26,86,219,.1); }
.itv-version-num { font-weight: 700; font-family: monospace; }
.itv-badge-current {
    font-size: .65rem; font-weight: 700;
    background: var(--itv-primary); color: #fff;
    padding: .1rem .4rem; border-radius: 100px; vertical-align: middle;
}
.itv-version-changelog { max-width: 280px; }
.itv-changelog-toggle { font-size: .8125rem; padding: 0; text-decoration: underline; }
.itv-version-cl-body { padding-top: .5rem; }
.itv-version-cl-item { font-size: .8125rem; color: var(--itv-muted); padding: .2rem 0; }
.itv-version-cl-item::before { content: '+ '; font-weight: 700; color: var(--itv-primary); }

/* Download sidebar card */
.itv-dl-sidebar-card {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--itv-border); border-radius: var(--itv-radius-lg);
    padding: 1.25rem;
}
[data-bs-theme="dark"] .itv-dl-sidebar-card { background: var(--itv-dark-2); border-color: #334155; }
.itv-dl-sidebar-meta { display: flex; flex-direction: column; gap: 0; }
.itv-dl-sidebar-meta-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .5rem 0; border-bottom: 1px solid var(--itv-border);
    font-size: .875rem;
}
.itv-dl-sidebar-meta-row:last-child { border-bottom: none; }
.itv-dl-sidebar-meta-label { color: var(--itv-muted); font-size: .8125rem; }

/* --------------------------------------------------------------------------
   Guides
   -------------------------------------------------------------------------- */
.itv-guides-hero {}

/* Category pills strip */
.itv-guide-cats-strip {
    background: var(--bs-body-bg, #fff);
    border-bottom: 1px solid var(--itv-border);
    padding: .875rem 0; overflow: hidden;
}
[data-bs-theme="dark"] .itv-guide-cats-strip { border-color: #334155; }
.itv-guide-cats-scroll {
    display: flex; gap: .5rem; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none;
}
.itv-guide-cats-scroll::-webkit-scrollbar { display: none; }
.itv-guide-cat-pill {
    display: inline-flex; align-items: center; white-space: nowrap;
    font-size: .875rem; font-weight: 600;
    padding: .4rem .875rem; border-radius: 100px;
    background: rgba(100,116,139,.08); color: var(--itv-body);
    text-decoration: none; border: 1px solid transparent;
    transition: all .15s;
}
.itv-guide-cat-pill:hover, .itv-guide-cat-pill.active {
    background: rgba(26,86,219,.1);
    color: var(--itv-primary);
    border-color: rgba(26,86,219,.2);
}
.itv-guide-cat-pill.active {
    background: var(--itv-primary); color: #fff; border-color: var(--itv-primary);
}
.itv-guide-cat-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; border-radius: 100px;
    background: rgba(255,255,255,.25); font-size: .7rem; font-weight: 700;
    margin-left: .25rem;
}

/* Difficulty Pills (filter bar) */
.itv-difficulty-pill {
    display: inline-flex; align-items: center;
    font-size: .8125rem; font-weight: 600;
    padding: .3rem .75rem; border-radius: 100px;
    text-decoration: none; color: var(--itv-body);
    background: rgba(100,116,139,.08); border: 1px solid transparent;
    transition: all .15s;
}
.itv-difficulty-pill:hover, .itv-difficulty-pill.active {
    background: var(--itv-primary); color: #fff; border-color: var(--itv-primary);
}
.itv-difficulty-beginner.active     { background: #10b981; border-color: #10b981; }
.itv-difficulty-intermediate.active { background: #f59e0b; border-color: #f59e0b; }
.itv-difficulty-advanced.active     { background: #ef4444; border-color: #ef4444; }

/* Guide Cards */
.itv-guide-card {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--itv-border); border-radius: var(--itv-radius-lg);
    overflow: hidden; display: flex; flex-direction: column;
    transition: box-shadow .2s, transform .2s;
}
.itv-guide-card:hover { box-shadow: var(--itv-shadow-lg); transform: translateY(-3px); }
[data-bs-theme="dark"] .itv-guide-card { background: var(--itv-dark-2); border-color: #334155; }

.itv-guide-card-header {
    padding: 1rem 1.25rem .75rem;
    background: linear-gradient(135deg, var(--cat-color, var(--itv-primary)) 0%, color-mix(in srgb, var(--cat-color, var(--itv-primary)) 70%, #000) 100%);
    display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
}
.itv-guide-cat-icon {
    width: 40px; height: 40px; border-radius: var(--itv-radius);
    background: rgba(255,255,255,.2); display: flex; align-items: center;
    justify-content: center; font-size: 1.125rem; color: #fff;
}

.itv-guide-cat-badge {
    display: inline-flex; align-items: center;
    font-size: .75rem; font-weight: 700;
    color: rgba(255,255,255,.95); background: rgba(255,255,255,.2);
    padding: .2rem .6rem; border-radius: 100px; text-decoration: none;
}
.itv-guide-cat-badge-lg { font-size: .875rem; padding: .3rem .875rem; }

.itv-difficulty-badge {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: .2rem .5rem; border-radius: 4px; color: #fff;
}
.itv-difficulty-badge-beginner     { background: #10b981; }
.itv-difficulty-badge-intermediate { background: #f59e0b; }
.itv-difficulty-badge-advanced     { background: #ef4444; }

.itv-guide-card-img-link { display: block; overflow: hidden; aspect-ratio: 16/9; }
.itv-guide-card-img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .3s var(--itv-ease);
}
.itv-guide-card:hover .itv-guide-card-img { transform: scale(1.04); }

.itv-guide-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.itv-guide-card-title { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; line-height: 1.4; }
.itv-guide-card-title a { color: inherit; text-decoration: none; }
.itv-guide-card-title a:hover { color: var(--itv-primary); }
.itv-guide-card-excerpt { font-size: .875rem; color: var(--itv-muted); }
.itv-guide-card-meta { font-size: .8125rem; color: var(--itv-muted); border-top: 1px solid var(--itv-border); }
[data-bs-theme="dark"] .itv-guide-card-meta { border-color: #334155; }
.itv-guide-card-footer { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--itv-border); }
[data-bs-theme="dark"] .itv-guide-card-footer { border-color: #334155; }

/* Guide hero icon */
.itv-guide-hero-icon {
    width: 60px; height: 60px; border-radius: var(--itv-radius-lg);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: #fff; flex-shrink: 0;
}

/* Guide meta badges */
.itv-guide-has-video, .itv-guide-has-pdf {
    display: inline-flex; align-items: center;
    font-size: .75rem; font-weight: 600;
    padding: .25rem .625rem; border-radius: 100px;
    color: #fff;
}
.itv-guide-has-video { background: #dc2626; }
.itv-guide-has-pdf   { background: #7c3aed; }

/* Video Embed */
.itv-video-label { font-weight: 700; font-size: 1rem; color: var(--itv-body); }
.itv-video-responsive {
    position: relative; padding-bottom: 56.25%;
    height: 0; overflow: hidden; border-radius: var(--itv-radius-lg);
    background: #000;
}
.itv-video-responsive iframe {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; border: none;
}

/* PDF Box */
.itv-guide-pdf-box {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.25rem; background: rgba(124,58,237,.06);
    border: 1px solid rgba(124,58,237,.2); border-radius: var(--itv-radius-lg);
}
.itv-guide-pdf-icon {
    width: 48px; height: 48px; border-radius: var(--itv-radius);
    background: #7c3aed; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; flex-shrink: 0;
}
.itv-guide-pdf-title { font-weight: 700; font-size: .9375rem; }
.itv-guide-pdf-desc  { font-size: .8125rem; color: var(--itv-muted); }

/* Sidebar category items */
.itv-guide-sidebar-cats { display: flex; flex-direction: column; gap: .25rem; }
.itv-guide-sidebar-cat-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .625rem .75rem; border-radius: var(--itv-radius);
    text-decoration: none; color: var(--itv-body);
    transition: background .15s;
    --cat-color: var(--itv-primary);
}
.itv-guide-sidebar-cat-item:hover, .itv-guide-sidebar-cat-item.active {
    background: rgba(26,86,219,.06); color: var(--itv-primary);
}
.itv-guide-sidebar-cat-icon {
    width: 32px; height: 32px; border-radius: .5rem;
    background: var(--cat-color); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .875rem; flex-shrink: 0;
}
.itv-guide-sidebar-cat-name  { font-weight: 600; font-size: .9rem; display: block; }
.itv-guide-sidebar-cat-count { font-size: .75rem; color: var(--itv-muted); }

/* --------------------------------------------------------------------------
   Guide content (code blocks, etc.)
   -------------------------------------------------------------------------- */
.itv-guide-content code {
    font-family: 'Courier New', Consolas, monospace;
    font-size: .875em; background: rgba(26,86,219,.08);
    color: var(--itv-primary); padding: .1em .4em; border-radius: 4px;
}
.itv-guide-content pre {
    background: var(--itv-dark); color: #e2e8f0;
    padding: 1.25rem; border-radius: var(--itv-radius);
    overflow-x: auto; margin-bottom: 1.5rem;
    font-size: .9rem; line-height: 1.6;
}
.itv-guide-content pre code { background: none; color: inherit; padding: 0; }

/* --------------------------------------------------------------------------
   CTA Section
   -------------------------------------------------------------------------- */
.itv-cta-section {}
.itv-cta-box {
    background: var(--itv-gradient);
    border-radius: var(--itv-radius-xl); padding: 3rem 2rem; color: #fff;
}
.itv-cta-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
}
.itv-cta-title { font-size: 1.75rem; font-weight: 800; color: #fff; margin-bottom: .5rem; }
.itv-cta-sub   { color: rgba(255,255,255,.8); font-size: 1.0625rem; margin-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   Buttons (extend)
   -------------------------------------------------------------------------- */
.itv-btn-outline {
    border: 1.5px solid var(--itv-border);
    background: transparent; color: var(--itv-body);
    padding: .5rem 1.25rem; border-radius: var(--itv-radius);
    font-weight: 600; font-size: .9375rem;
    text-decoration: none; display: inline-flex; align-items: center;
    transition: all .2s; cursor: pointer;
}
.itv-btn-outline:hover { border-color: var(--itv-primary); color: var(--itv-primary); background: rgba(26,86,219,.05); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .itv-blog-sidebar { position: static; }
}
@media (max-width: 768px) {
    .itv-dl-list-item { gap: .75rem; }
    .itv-dl-list-desc { white-space: normal; }
}