/* Blog Details Custom CSS */
.blog-details-area {
    background-color: #fcfcfc;
    overflow-x: hidden;
}

.blog-details-content {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 5px 30px rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.03);
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.blog-text img { max-width: 100%; height: auto; }
.blog-text iframe { max-width: 100%; }
.blog-text pre { overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; }

@media (max-width: 768px) {
    .blog-details-content { padding: 20px 15px; border-radius: 10px; }
    .blog-title { font-size: 24px !important; }
    .chy-breadcrumb-1-area .chy-breadcrumb-1-title { font-size: 22px !important; }
}




.blog-hero-image {
    width: 100%;
    height: auto;
    border-radius: 15px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Updated Toolbar Style */
.blog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
}

.bg-toolbar-left, .bg-toolbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.toolbar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #555;
    font-weight: 500;
}

.toolbar-item i {
    color: #1a73e8; /* Blue accent like reference */
    font-size: 16px;
}

.font-resize-btn {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #333; /* Dark background like reference */
    color: #fff;
    font-weight: 700;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    border: none;
    transition: all 0.2s;
}

.font-resize-btn:hover {
    background: #555;
}

.font-resize-btn.light {
    background: #e0e0e0;
    color: #333;
}
.font-resize-btn.light:hover { background: #d0d0d0; }

.share-btn-s {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #34495e; 
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.share-btn-s:hover { background: #2c3e50; color: #fff; }


.blog-title {
    font-size: 36px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.3;
    margin-bottom: 10px;
}

.category-badge {
    color: #1a73e8;
    font-weight: 600;
    text-decoration: none;
}

.rating-stars {
    color: #ddd;
    font-size: 18px;
    margin-left: 10px;
}
.rating-stars .active {
    color: #f1c40f;
}


.blog-text {
    font-size: 17px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px;
}

.blog-text p {
    margin-bottom: 20px;
}

.blog-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
}

.blog-text table th {
    background: #f8f9fa;
    font-weight: 700;
    color: #333;
    padding: 15px;
    text-align: left;
    border-bottom: 2px solid #e0e0e0;
}

.blog-text table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    color: #555;
}

.blog-text table tr:hover {
    background: #f8f9fa;
}

.blog-text table tr:last-child td {
    border-bottom: none;
}

/* Sidebar Widgets */
.sidebar-widget {
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 5px 30px rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.03);
}

.widget-title {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 25px;
    position: relative;
    padding-left: 15px;
}

.widget-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: #A249ED;
    border-radius: 2px;
}

.category-list li {
    list-style: none;
    margin-bottom: 15px;
}

.category-list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #555;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}

.category-list li a:hover {
    color: #A249ED;
    padding-left: 5px;
}

.category-list li a span.count {
    background: #f5f5f5;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    color: #888;
}

.recent-post-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.recent-post-img {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.recent-post-info h5 {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
}

.recent-post-info h5 a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.2s;
}

.recent-post-info h5 a:hover {
    color: #A249ED;
}

.recent-post-date {
    font-size: 12px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Comment Section */
.comments-area {
    margin-top: 50px;
}
.comment-list {
    list-style: none;
    padding: 0;
}
.comment-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 30px;
}
.comment-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    flex-shrink: 0;
}
.comment-content h5 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
}
.comment-date {
    font-size: 12px;
    color: #888;
    margin-bottom: 15px;
    display: block;
}
.comment-text {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
}

/* Form Styles */
.comment-form-box {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 15px;
    margin-top: 40px;
}
.form-input {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid #eee;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 20px;
    outline: none;
    transition: border 0.3s;
}
.form-input:focus {
    border-color: #A249ED;
}
.submit-btn {
    background: linear-gradient(135deg, #A249ED 0%, #6135D7 100%);
    color: #fff;
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(162, 73, 237, 0.3);
    transition: transform 0.2s;
}
.submit-btn:hover {
    transform: translateY(-3px);
}

.blog-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 15px 0; border-bottom: 1px solid #eee; margin-bottom: 20px; }
                        .bg-toolbar-left { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 15px; }
                        .bg-toolbar-right { display: flex; align-items: center; gap: 8px; }
                        .toolbar-item { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: #666; white-space: nowrap; }
                        .blog-details-content .blog-text table { width: 100%; border-collapse: collapse; }
                        .blog-details-content .blog-text { overflow-x: auto; }
                        @media (max-width: 768px) {
                            .blog-toolbar { flex-direction: column; align-items: flex-start; }
                            .bg-toolbar-left { width: 100%; }
                            .bg-toolbar-right { width: 100%; justify-content: flex-start; }
                            .blog-details-content .blog-text table { display: block; overflow-x: auto; white-space: nowrap; max-width: 100%; }
                        }

.tag-link {
                            display: inline-block;
                            background: #f0f0f0;
                            padding: 5px 12px;
                            border-radius: 20px;
                            color: #555;
                            font-size: 13px;
                            margin-right: 5px;
                            margin-bottom: 5px;
                            text-decoration: none;
                            transition: all 0.2s;
                        }
                        .tag-link:hover {
                            background: #A249ED;
                            color: #fff;
                        }
                        .social-share-box {
                            display: flex;
                            align-items: center;
                            gap: 15px;
                            margin-top: 30px;
                            padding: 20px;
                            background: #f9f9f9;
                            border-radius: 10px;
                        }
                        .social-share-btn {
                            width: 40px;
                            height: 40px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-radius: 8px;
                            color: #fff;
                            text-decoration: none;
                            transition: transform 0.2s;
                        }
                        .social-share-btn:hover {
                            transform: scale(1.1);
                            color: #fff;
                        }
                        .social-share-btn.facebook { background: #1877f2; }
                        .social-share-btn.twitter { background: #000; }
                        .social-share-btn.whatsapp { background: #25d366; }
                        .social-share-btn.linkedin { background: #0077b5; }
                        .author-profile-box {
                            display: flex;
                            gap: 25px;
                            margin-top: 40px;
                            padding: 30px;
                            background: #f9f9f9;
                            border-radius: 15px;
                            border-left: 4px solid #A249ED;
                        }
                        .author-avatar {
                            width: 100px;
                            height: 100px;
                            border-radius: 50%;
                            object-fit: cover;
                            flex-shrink: 0;
                        }
                        .author-info h4 {
                            font-size: 20px;
                            font-weight: 700;
                            color: #333;
                            margin-bottom: 10px;
                        }
                        .author-info h4 a {
                            color: #A249ED;
                            text-decoration: none;
                        }
                        .author-info p {
                            font-size: 15px;
                            color: #666;
                            line-height: 1.7;
                            margin-bottom: 15px;
                        }
                        .author-social a {
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            width: 35px;
                            height: 35px;
                            background: #fff;
                            border-radius: 50%;
                            color: #555;
                            margin-right: 8px;
                            transition: all 0.2s;
                        }
                        .author-social a:hover {
                            background: #A249ED;
                            color: #fff;
                        }