/* ======================================================================
   TECHNO PARTICLES BLOG DETAIL
   Home-page cyber design language applied to individual blog articles.
   ====================================================================== */

body.tp-blog-detail-page {
    background: var(--tp-bg-space, #030712) !important;
    color: var(--tp-text-primary, #f8fafc);
}

body.tp-blog-detail-page #smooth-content,
body.tp-blog-detail-page main {
    position: relative;
    z-index: 1;
}

body.tp-blog-detail-page .main-bg,
body.tp-blog-detail-page .tp-blog-detail-section {
    background: transparent !important;
}

body.tp-blog-detail-page .tp-blog-detail-header {
    position: relative;
    padding-top: 170px !important;
    overflow: hidden;
}

body.tp-blog-detail-page .tp-blog-detail-header::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 245, 212, .35), transparent);
}

body.tp-blog-detail-page .blog-breadcrumb {
    color: var(--tp-text-muted, #64748b);
    font: 700 10px/1.5 monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
}

body.tp-blog-detail-page .blog-breadcrumb a {
    color: var(--tp-cyan, #00f5d4);
}

body.tp-blog-detail-page .blog-breadcrumb a:hover,
body.tp-blog-detail-page .blog-breadcrumb a:focus-visible {
    color: #fff;
}

body.tp-blog-detail-page .blog-header .caption .sub-title {
    border-color: rgba(0, 245, 212, .25);
    background: rgba(0, 245, 212, .06);
    color: var(--tp-cyan, #00f5d4);
    font: 700 10px/1 monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
}

body.tp-blog-detail-page .blog-header .caption h1 {
    color: var(--tp-text-primary, #f8fafc);
    font-size: clamp(32px, 5vw, 68px) !important;
    letter-spacing: -.05em;
}

body.tp-blog-detail-page .blog-header .info {
    border-color: rgba(255, 255, 255, .1);
    border-radius: 18px;
    background: rgba(7, 16, 36, .72);
    box-shadow: 0 20px 50px -15px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.tp-blog-detail-page .blog-header .info .opacity-7,
body.tp-blog-detail-page .blog-header .info .opacity-8 {
    color: var(--tp-text-muted, #64748b) !important;
}

body.tp-blog-detail-page .blog-header .info h6 {
    color: var(--tp-text-primary, #f8fafc);
}

body.tp-blog-detail-page .blog-header .info .circle-60 {
    border: 1px solid rgba(0, 245, 212, .3);
    background: rgba(0, 245, 212, .06);
}

body.tp-blog-detail-page .blog-header .info .right-info {
    color: var(--tp-cyan, #00f5d4);
}

body.tp-blog-detail-page .blog-header .thumbnail img {
    border-color: rgba(0, 245, 212, .2);
    border-radius: 20px !important;
    box-shadow: 0 28px 70px -20px rgba(0, 0, 0, .85), 0 0 35px rgba(0, 210, 180, .1);
}

body.tp-blog-detail-page .tp-blog-detail-section {
    padding-top: 100px !important;
}

body.tp-blog-detail-page .main-post .item {
    padding: 36px 38px 44px !important;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 22px;
    background: rgba(7, 16, 36, .72);
    box-shadow: 0 24px 58px -20px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.tp-blog-detail-page .main-post .text {
    color: var(--tp-text-secondary, #cbd5e1);
}

body.tp-blog-detail-page .main-post .text p,
body.tp-blog-detail-page .main-post .text li {
    color: var(--tp-text-secondary, #cbd5e1);
    line-height: 1.85;
}

body.tp-blog-detail-page .main-post .text h2,
body.tp-blog-detail-page .main-post .text h3,
body.tp-blog-detail-page .main-post .text h4 {
    color: var(--tp-text-primary, #f8fafc);
}

body.tp-blog-detail-page .main-post .blog-content a {
    color: var(--tp-cyan, #00f5d4);
    text-decoration-color: rgba(0, 245, 212, .42);
}

body.tp-blog-detail-page .main-post .blog-content a:hover,
body.tp-blog-detail-page .main-post .blog-content a:focus-visible {
    color: #fff;
}

body.tp-blog-detail-page .main-post .post-qoute {
    border-color: rgba(0, 245, 212, .25);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(0, 210, 180, .1), rgba(7, 16, 36, .35));
}

body.tp-blog-detail-page .main-post .post-qoute::before {
    color: rgba(0, 245, 212, .7);
}

body.tp-blog-detail-page .main-post .post-qoute h6,
body.tp-blog-detail-page .main-post .post-qoute h6 .sub-title {
    color: var(--tp-text-primary, #f8fafc);
}

body.tp-blog-detail-page .main-post .iner-img img {
    border-color: rgba(255, 255, 255, .12);
    border-radius: 15px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .5);
}

body.tp-blog-detail-page .main-post .info-area {
    border-color: rgba(255, 255, 255, .1) !important;
}

body.tp-blog-detail-page .main-post .info-area .tags span,
body.tp-blog-detail-page .main-post .info-area .share-icon span {
    color: var(--tp-text-muted, #64748b);
}

body.tp-blog-detail-page .main-post .info-area .tags > div:last-child span {
    display: inline-block;
    margin: 4px 5px 4px 0;
    padding: 7px 10px;
    border: 1px solid rgba(0, 245, 212, .2);
    border-radius: 6px;
    background: rgba(0, 245, 212, .06);
    color: var(--tp-cyan, #00f5d4);
    font: 700 10px/1 monospace;
    letter-spacing: .06em;
}

body.tp-blog-detail-page .main-post .info-area .share-icon a {
    border-color: rgba(0, 245, 212, .2);
    background: rgba(0, 245, 212, .05);
    color: var(--tp-cyan, #00f5d4);
}

body.tp-blog-detail-page .main-post .author-area {
    border-color: rgba(255, 255, 255, .1) !important;
}

body.tp-blog-detail-page .main-post .author-area p {
    color: var(--tp-text-secondary, #94a3b8);
}

body.tp-blog-detail-page .sidebar {
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 20px;
    background: rgba(7, 16, 36, .72);
    box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.tp-blog-detail-page .sidebar .widget,
body.tp-blog-detail-page .sidebar .widget * {
    color: var(--tp-text-secondary, #94a3b8);
}

body.tp-blog-detail-page .sidebar .widget .title-widget {
    color: var(--tp-text-primary, #f8fafc);
}

body.tp-blog-detail-page .sidebar .widget a:hover {
    color: var(--tp-cyan, #00f5d4) !important;
}

body.tp-blog-detail-page .MainTableContent {
    max-width: none;
    margin: 24px 0 0;
    border-color: rgba(0, 245, 212, .22);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(16, 30, 55, .9), rgba(7, 16, 36, .78));
    box-shadow: 0 18px 42px -14px rgba(0, 0, 0, .7);
}

body.tp-blog-detail-page .Tbl-cONTENT-h4 {
    color: var(--tp-text-primary, #f8fafc);
}

body.tp-blog-detail-page .MainTableContent li {
    border-left-color: var(--tp-cyan, #00f5d4) !important;
}

body.tp-blog-detail-page .MainTableContent li a {
    color: var(--tp-text-secondary, #cbd5e1) !important;
}

body.tp-blog-detail-page .MainTableContent li a:hover {
    color: var(--tp-cyan, #00f5d4) !important;
}

body.tp-blog-detail-page .comments-from {
    padding: 30px 34px 34px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 20px;
    background: rgba(7, 16, 36, .72);
    box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .7);
}

body.tp-blog-detail-page .comments-from h3 {
    color: var(--tp-text-primary, #f8fafc);
}

body.tp-blog-detail-page .comments-from input,
body.tp-blog-detail-page .comments-from textarea {
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 10px !important;
    background: rgba(3, 7, 18, .42) !important;
    color: var(--tp-text-primary, #f8fafc) !important;
}

body.tp-blog-detail-page .comments-from input:focus,
body.tp-blog-detail-page .comments-from textarea:focus {
    border-color: rgba(0, 245, 212, .62) !important;
    box-shadow: 0 0 0 3px rgba(0, 245, 212, .08);
    outline: none;
}

body.tp-blog-detail-page .comments-from input::placeholder,
body.tp-blog-detail-page .comments-from textarea::placeholder {
    color: var(--tp-text-muted, #64748b);
}

body.tp-blog-detail-page #comment-submit-btn {
    min-width: 175px;
    padding: 14px 22px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--tp-emerald, #00d2b4), var(--tp-ocean, #008b8b));
    color: #030712;
    box-shadow: 0 0 25px rgba(0, 210, 180, .3), 0 8px 20px rgba(0, 0, 0, .35);
    font: 800 11px/1 monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: transform .35s var(--tp-ease-expo), box-shadow .35s ease;
}

body.tp-blog-detail-page #comment-submit-btn:hover {
    box-shadow: 0 0 38px rgba(0, 245, 212, .5), 0 12px 28px rgba(0, 0, 0, .45);
    transform: translateY(-3px);
}

@media (max-width: 991px) {
    body.tp-blog-detail-page .tp-blog-detail-header {
        padding-top: 145px !important;
    }

    body.tp-blog-detail-page .sidebar {
        margin-top: 42px;
    }
}

@media (max-width: 767px) {
    body.tp-blog-detail-page .tp-blog-detail-header {
        padding-top: 120px !important;
    }

    body.tp-blog-detail-page .tp-blog-detail-section {
        padding-top: 70px !important;
    }

    body.tp-blog-detail-page .main-post .item,
    body.tp-blog-detail-page .comments-from,
    body.tp-blog-detail-page .sidebar {
        padding: 24px 20px 28px !important;
        border-radius: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.tp-blog-detail-page #comment-submit-btn {
        transition: none;
    }
}