/* ==================
blog details CSS
=================== */

.blog_details_container {
max-width: 1400px;
margin: 0 auto;
padding: 40px 20px;
}

.blog_details_post_content section {
padding: 0px 0px !important;
}

.blog_details_layout {
display: grid;
grid-template-columns: 0.8fr 2.4fr 0.8fr;
gap: 40px;
align-items: start;
overflow: visible !important;
}

/* LEFT SIDEBAR - TABLE OF CONTENTS */

.blog_details_toc_sidebar {
position: sticky;
position: -webkit-sticky;
top: 30px;
/* Thoda kam kar diya */
/*background: #6366f1;*/
/*border-radius: 8px;*/
/*padding: 25px;*/
/*align-self: flex-start;*/
/*height: fit-content;*/
/*max-height: calc(100vh - 120px);*/
/*overflow-y: auto;*/
/*z-index: 100;*/
}

.blog_details_toc_sidebar h3 {
font-size: 26px;
margin-bottom: 15px;
color: #fff;
padding-bottom: 10px;
border-bottom: 2px solid #e2e8f0;
}

.blog_details_toc_list {
list-style: none;
padding-left: 0px;
max-height: calc(100vh - 180px);
}

.blog_details_toc_list li {
margin-bottom: 10px;
}

.blog_details_toc_list a {
color: #fff;
text-decoration: none;
font-size: 18px;
display: block;
padding: 8px 12px;
border-radius: 5px;
transition: all 0.3s ease;
}

.blog_details_toc_list a:hover,
.blog_details_toc_list a.active {
background: #f7fafc;
color: #3182ce;
padding-left: 16px;
}

/* MAIN CONTENT AREA */
.blog_details_main_content {
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.blog_details_post_meta {
display: flex;
gap: 25px;
font-size: 20px;
color: #8c8f94;
margin-bottom: 20px;
flex-wrap: wrap;
}

.blog_details_post_meta span {
display: flex;
align-items: center;
gap: 5px;
}

.blog_details_post_title {
font-size: 36px;
color: #fff;
margin-bottom: 25px;
line-height: 1.3;
}

.blog_details_featured_image {
width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 30px;
}

.blog_details_post_content h2 {
font-size: 35px;
color: #fff;
margin: 0px 0 15px;
padding-top: 10px;
}

.blog_details_post_content h3 {
font-size: 22px;
color: #fff;
margin: 25px 0 12px;
}

.blog_details_post_content p {
margin-bottom: 22px;
line-height: 1.6;
color: #ccc;
font-size: 18px !important;
}

.blog_details_post_content ul {
margin: 20px 0 20px 20px;
line-height: 1.8;
}

.blog_details_post_content ul li {
margin-bottom: 8px;
color: #8c8f94;
}

.blog_details_content_image {
width: 100%;
height: auto;
border-radius: 8px;
margin: 25px 0;
}

.blog_details_post_footer {
border-top: 1px solid #e2e8f0;
margin-top: 40px;
padding-top: 25px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}

.blog_details_post_tags {
display: flex;
gap: 10px;
align-items: center;
}

.blog_details_post_tags span {
font-weight: 600;
color: #2d3748;
}

.blog_details_tag {
background: #edf2f7;
color: #4a5568;
padding: 6px 12px;
border-radius: 5px;
font-size: 13px;
text-decoration: none;
transition: all 0.3s ease;
}

.blog_details_tag:hover {
background: #3182ce;
color: #fff;
}

.blog_details_post_category {
display: flex;
gap: 10px;
align-items: center;
}

.blog_details_post_category span {
font-weight: 600;
color: #2d3748;
}

.blog_details_category_link {
background: #3182ce;
color: #fff;
padding: 6px 12px;
border-radius: 5px;
font-size: 13px;
text-decoration: none;
transition: all 0.3s ease;
}

.blog_details_category_link:hover {
background: #2c5aa0;
}

/* COMMENT SECTION */

.blog_details_comments_section {
margin-top: 40px;
padding-top: 40px;
border-top: 1px solid #e2e8f0;
}

.blog_details_comments_section h3 {
font-size: 24px;
margin-bottom: 20px;
color: #fff;
}

.blog_details_comment_form {
display: grid;
gap: 15px;
}

.blog_details_form_group {
display: flex;
flex-direction: column;
}

.blog_details_form_group label {
margin-bottom: 8px;
color: #fff;
font-weight: 500;
}

.blog_details_form_group input,
.blog_details_form_group textarea {
padding: 12px;
border: 1px solid #1d1d1d;
border-radius: 5px;
font-family: inherit;
font-size: 14px;
}

.blog_details_form_group textarea {
min-height: 120px;
resize: vertical;
background-color: #1d1d1d;
}

.blog_details_submit_btn {
background: #6366f1;
color: #fff;
padding: 12px 30px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 15px;
font-weight: 600;
transition: all 0.3s ease;
justify-self: start;
}

.blog_details_submit_btn:hover {
background: #2c5aa0;
}

/* RIGHT SIDEBAR */
.blog_details_sidebar_widget {
background: #1d1d1d;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
padding: 25px;
margin-bottom: 30px;
border: 1px solid #1d1d1d;
}

.blog_details_sidebar_widget h3 {
font-size: 20px;
margin-bottom: 20px;
color: #fff;
padding-bottom: 12px;
border-bottom: 2px solid #e2e8f0;
}

/* SEARCH BAR */

.blog_details_search_form {
display: flex;
gap: 10px;
}

.blog_details_search_input {
flex: 1;
padding: 12px 15px;
border: 1px solid #e2e8f0;
border-radius: 5px;
font-size: 14px;
}

.blog_details_search_btn {
background: #6366f1;
color: #fff;
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}

.blog_details_search_input .form-control,
.form-select,
input {
background-color: #1d1d1d !important;
color: #fff !important;
}

.blog_details_search_btn:hover {
background: #2c5aa0;
}

/* RECENT POSTS */

.blog_details_recent_post {
display: flex;
gap: 15px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #f7fafc;
}

.blog_details_recent_post:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}

.blog_details_recent_post_image {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 5px;
flex-shrink: 0;
}

.blog_details_recent_post_content h4 {
font-size: 15px;
margin-bottom: 8px;
line-height: 1.4;
}

.blog_details_recent_post_content h4 a {
color: #fff;
text-decoration: none;
transition: color 0.3s ease;
}

.blog_details_recent_post_content h4 a:hover {
color: #3182ce;
}

.blog_details_recent_post_date {
font-size: 13px;
color: #fff;
}

/* CATEGORIES */

.blog_details_category_list {
list-style: none;
padding-left: 0px;
}

.blog_details_category_item {
margin-bottom: 12px;
}

.blog_details_category_item a {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
background: #f7fafc;
border-radius: 5px;
color: #4a5568;
text-decoration: none;
transition: all 0.3s ease;
}

.blog_details_category_item a:hover {
background: #3182ce;
color: #fff;
padding-left: 20px;
}

.blog_details_category_count {
background: #e2e8f0;
color: #4a5568;
padding: 3px 10px;
border-radius: 12px;
font-size: 12px;
}

.blog_details_category_item a:hover .blog_details_category_count {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}

/* CATEGORY IMAGES */

.blog_details_category_images {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}

.blog_details_category_image_item {
position: relative;
overflow: hidden;
border-radius: 5px;
cursor: pointer;
}

.blog_details_category_image_item img {
width: 100%;
height: 90px;
object-fit: cover;
transition: transform 0.3s ease;
}

.blog_details_category_image_item:hover img {
transform: scale(1.1);
}

.blog_details_category_image_overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
color: #fff;
padding: 8px;
font-size: 11px;
font-weight: 600;
}

/* Scrollbar styling for TOC */

.blog_details_toc_sidebar::-webkit-scrollbar {
width: 6px;
}

.blog_details_toc_sidebar::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}

.blog_details_toc_sidebar::-webkit-scrollbar-thumb {
background: #cbd5e0;
border-radius: 10px;
}

.blog_details_toc_sidebar::-webkit-scrollbar-thumb:hover {
background: #a0aec0;
}

/* Mobile TOC Toggle Button */

.blog_details_mobile_toc_toggle {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
background: #3182ce;
color: #fff;
width: 56px;
height: 56px;
border-radius: 50%;
border: none;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
z-index: 1000;
font-size: 24px;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}

.blog_details_mobile_toc_toggle:hover {
background: #2c5aa0;
transform: scale(1.05);
}

.blog_details_mobile_toc_overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}

.blog_details_mobile_toc_overlay.active {
display: block;
}

/* =========================================
POST META WITH CATEGORY & READ TIME
========================================= */

.blog_details_post_meta {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.post_meta_left img {
width: 50px;
border-radius: 50px;
}
.post_meta_left {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}

.post_meta_left span {
display: flex;
align-items: center;
gap: 8px;
color: #a0aec0;
font-size: 14px;
}

.post_meta_left span i {
color: #667eea;
}

.post_meta_right {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}

.post_category_tag {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
padding: 6px 14px;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
}

.post_category_tag:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
color: #fff;
}

.post_category_tag i {
font-size: 12px;
}

.post_read_time {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.08);
color: #e2e8f0;
padding: 6px 14px;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.post_read_time i {
color: #667eea;
font-size: 12px;
}

.blog_details_right_sidebar {
height: 100%;
}

/*.blog_details_right_sidebar .blog_details_sidebar_widget:last-child {*/
/* position: sticky;/
/ top: 30px;/
/}*/

.blog_details_right_sidebar .right-sidebar-sticky {
position : sticky;
top: 30px;
display :flex;
flex-direction:column;
}

/* =========================================
AI SUMMARY BUTTONS
========================================= */

.ai_summary_buttons {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #f0f0f5;
}

.ai_summary_label {
font-size: 12px;
font-weight: 600;
color: #6b7280;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.ai_buttons_wrapper {
display: flex;
gap: 10px;
}

.ai_btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
flex: 1;
justify-content: center;
}

.ai_btn svg {
flex-shrink: 0;
}

.ai_btn_chatgpt {
background: linear-gradient(135deg, #10a37f 0%, #0d8f6f 100%);
color: white;
}

.ai_btn_chatgpt:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(16, 163, 127, 0.4);
color: white;
}

.ai_btn_perplexity {
background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
color: white;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.ai_btn_perplexity:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
background: linear-gradient(135deg, #2d2d44 0%, #3d3d5c 100%);
color: white;
}

/* =========================================
SOCIAL SHARE BUTTONS
========================================= */

.blog_share_buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
margin: 20px 0;
padding: 15px 20px;
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
}

.blog_share_bottom {
justify-content: start !important;
margin-top: 40px;
padding: 25px;
background: linear-gradient(
135deg,
rgba(102, 126, 234, 0.08) 0%,
rgba(118, 75, 162, 0.08) 100%
);
border: 1px solid rgba(102, 126, 234, 0.2);
}

.share_label {
font-size: 14px;
font-weight: 600;
color: #a0aec0;
}

.share_icons {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}

.share_btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 42px;
height: 42px;
border-radius: 50%;
text-decoration: none;
transition: all 0.3s ease;
}

.blog_share_bottom .share_btn {
width: auto;
height: auto;
padding: 10px 18px;
border-radius: 25px;
font-size: 13px;
font-weight: 500;
}

.blog_share_bottom .share_btn span {
display: inline;
}

.share_facebook {
background: #1877f2;
color: white;
}

.share_facebook:hover {
background: #166fe5;
transform: translateY(-3px);
box-shadow: 0 5px 20px rgba(24, 119, 242, 0.4);
color: white;
}

.share_twitter {
background: #1a1a2e;
color: white;
}

.share_twitter:hover {
background: #2d2d44;
transform: translateY(-3px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
color: white;
}

.share_linkedin {
background: #0a66c2;
color: white;
}

.share_linkedin:hover {
background: #095196;
transform: translateY(-3px);
box-shadow: 0 5px 20px rgba(10, 102, 194, 0.4);
color: white;
}

/* Mobile Responsive */
@media (max-width: 768px) {
.blog_details_post_meta {
flex-direction: column;
align-items: flex-start;
}

.post_meta_right {
    width: 100%;
}

.ai_buttons_wrapper {
    flex-direction: column;
}

.ai_btn {
    justify-content: center;
}

.blog_share_buttons {
    flex-direction: column;
    align-items: flex-start;
}

.share_icons {
    width: 100%;
    justify-content: flex-start;
}

.blog_share_bottom .share_btn {
    flex: 1;
    justify-content: center;
}

}


.banner-content {
max-width: 75%;
}

.blog_details_container {
margin-left: 50px;
margin-right: 50px;
max-width: 100%;
}


@media (max-width: 1599px) {
.blog_details_container {
margin-left: 25px;
margin-right: 25px;
}
}

/* ============================================
AUTHOR BIO SECTION (SEJ STYLE - DARK)
=============================================== */
.author-bio-card {
display: flex;
background: var(--jdg-dark-grey);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 20px;  
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
padding: 40px;
gap: 40px;
margin-top: 50px;
margin-bottom: 50px;
align-items: flex-start;
}

/* Left Column: Image & Button */
.author-bio-sidebar {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
flex: 0 0 auto;
}

.author-avatar-wrapper {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.1);
}

.author-avatar-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.read-bio-btn {
background: transparent;
border: 1px solid var(--jdg-gray);
color: var(--jdg-white);
border-radius: 20px; /* Pill-shaped button */
padding: 8px 20px;
font-size: 13px;
cursor: pointer;
transition: all 0.3s ease;
font-family: var(--jdg-body-font-family);
white-space: nowrap;
}

.read-bio-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--jdg-white);
}

/* Right Column: Text Content */
.author-bio-content {
display: flex;
flex-direction: column;
flex: 1;
}

.author-bio-label {
font-family: var(--jdg-body-font-family);
font-size: 13px;
font-weight: 700;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
}

.author-bio-name {
font-family: var(--jdg-heading-font-family);
font-size: 28px;
font-weight: 700;
color: #6366f1; /* Changed to Blue */
margin: 0 0 8px 0;
}

.author-bio-role {
font-family: var(--jdg-body-font-family);
font-size: 15px;
font-weight: 400;
color: var(--jdg-gray);
margin-bottom: 20px;
}

.author-bio-text {
font-family: var(--jdg-body-font-family);
font-size: 15px;
line-height: 1.7;
color: var(--jdg-light-grey);
margin: 0;
}

/* Bio Truncation Setup / */
.truncate-bio {
display: -webkit-box;
-webkit-line-clamp: 2; /* Shows exactly 2 lines initially*/
-webkit-box-orient: vertical;
overflow: hidden;
transition: all 0.3s ease;
}

.truncate-bio.expanded {
-webkit-line-clamp: unset; /* Removes the limit when expanded */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
.author-bio-card {
flex-direction: column;
align-items: center;
text-align: center;
padding: 30px 20px;
gap: 25px;
}
.author-bio-sidebar {
    gap: 15px;
}
}

/* =========================================
TABLE OF CONTENTS - STICKY SIDEBAR
========================================= */
body.toc-open {
overflow: hidden;
height: 100vh;
touch-action: none;
}

.blog_details_mobile_toc_overlay {
overscroll-behavior: contain;
}

.blog_details_toc_sidebar {
align-self: flex-start;
height: fit-content;
}

.toc_sticky_wrapper {
position: relative;
background: #0a0a0a;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
padding: 24px;
max-height: calc(100vh - 140px);
display: flex;
flex-direction: column;
border: 1px solid;
}

.toc_sticky_wrapper h3 {
font-size: 18px;
font-weight: 700;
color: #ffffff;
margin: 0 0 16px 0;
padding-bottom: 12px;
border-bottom: 2px solid #f0f0f5;
flex-shrink: 0;
}

/* Scrollable Container */
.toc_scroll_container {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding-right: 8px;
margin-right: -8px;
}

/* Custom Scrollbar */
.toc_scroll_container::-webkit-scrollbar {
width: 6px;
}

.toc_scroll_container::-webkit-scrollbar-track {
background: #f5f5f7;
border-radius: 10px;
}

.toc_scroll_container::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
border-radius: 10px;
}

.toc_scroll_container::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #5a6fd6 0%, #6a4190 100%);
}

/* Firefox Scrollbar */
.toc_scroll_container {
scrollbar-width: thin;
scrollbar-color: #667eea #f5f5f7;
}

/* Progress Bar */
.toc_progress {
flex-shrink: 0;
height: 4px;
background: #f0f0f5;
border-radius: 4px;
margin-top: 16px;
overflow: hidden;
}

.toc_progress_bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
border-radius: 4px;
transition: width 0.3s ease;
}

/* =========================================
TOC LIST STYLING
========================================= */

.blog_details_toc_list {
list-style: none;
padding: 0;
margin: 0;
}

.blog_details_toc_list .toc-item {
margin-bottom: 4px;
position: relative;
transition: all 0.3s ease;
}

/* H2 Items */
.blog_details_toc_list .toc-h2 {
margin-top: 8px;
}

.blog_details_toc_list .toc-h2:first-child {
margin-top: 0;
}

/* H2 - main section */
.blog_details_toc_list .toc-h2 .blog_details_toc_link {
font-weight: 700;
font-size: 14px;
color: #919199;
padding: 10px 12px 10px 28px;
border-radius: 8px;
position: relative;
}

 /*H2 number badge /*/
.blog_details_toc_list .toc-h2 .blog_details_toc_link::before {
content: attr(data-number);
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
font-size: 11px;
font-weight: 700;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
/*/ H3 Items (Indented with dash) */
.blog_details_toc_list .toc-h3 {
padding-left: 26px;
}

.blog_details_toc_list .toc-h3 .blog_details_toc_link {
font-size: 13px;
font-weight: 500;
color: #6b7280;
padding: 6px 10px 6px 18px;
position: relative;
}

/* H3 bullet */
.blog_details_toc_list .toc-h3 .blog_details_toc_link::before {
content: "";
position: absolute;
left: -6px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background: #cbd5e0;
border-radius: 50%;
}

.blog_details_toc_list .toc-h3 .toc-prefix {
color: #a0aec0;
margin-right: 6px;
font-weight: 500;
}

/* TOC Link Base Styles */
.blog_details_toc_link {
display: block;
text-decoration: none;
border-radius: 6px;
transition: all 0.25s ease;
position: relative;
line-height: 1.4;
}

.blog_details_toc_link:hover {
background: #f8fafc;
transform: translateX(6px);
}

.blog_details_toc_list .toc-h3 .blog_details_toc_link:hover {
border-left-color: #667eea;
}

/* Active State */
.blog_details_toc_list .toc-h2.active .blog_details_toc_link {
background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
color: #667eea;
border-left-color: #667eea;
font-weight: 700;
}

.blog_details_toc_list .toc-h3.active .blog_details_toc_link {
background: #f0f4ff;
color: #667eea;
border-left-color: #667eea;
font-weight: 700;
}
.blog_details_toc_list .toc-item.active .blog_details_toc_link {
background: linear-gradient(90deg, #667eea20, #764ba220);
color: #667eea;
font-weight: 700;
}

.blog_details_toc_list .toc-h3.active .toc-prefix {
color: #667eea;
}

/* Passed State (Already scrolled past) */
.blog_details_toc_list .toc-item.passed .blog_details_toc_link {
color: #a0aec0;
}

.blog_details_toc_list .toc-h2.passed .blog_details_toc_link {
border-left-color: #cbd5e0;
}

.blog_details_toc_list .toc-h3.passed .blog_details_toc_link {
border-left-color: #e2e8f0;
}

.blog_details_toc_list .toc-item.passed .toc-prefix {
color: #cbd5e0;
}

/* Active indicator dot */
.blog_details_toc_list .toc-item.active .blog_details_toc_link::before {
content: "";
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background: #667eea;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.blog_details_toc_list .toc-h3.active .blog_details_toc_link::before {
left: -2px;
width: 6px;
height: 6px;
}

/* =========================================
MOBILE TOC STYLES
========================================= */

.blog_details_mobile_toc_toggle {
display: none;
position: fixed;
bottom: 20px;
left: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
font-size: 24px;
cursor: pointer;
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
z-index: 999;
transition: all 0.3s ease;
}

.blog_details_mobile_toc_toggle:hover {
transform: scale(1.1);
box-shadow: 0 6px 25px rgba(102, 126, 234, 0.5);
}

.blog_details_mobile_toc_overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
z-index: 999;
opacity: 0;
transition: opacity 0.3s ease;
}

.blog_details_mobile_toc_overlay.active {
display: block;
opacity: 1;
}

.blog_details_mobile_toc_close {
display: none;
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
border-radius: 50%;
background: #f5f5f7;
border: none;
font-size: 20px;
cursor: pointer;
color: #666;
transition: all 0.3s ease;
}

.blog_details_mobile_toc_close:hover {
background: #e0e0e5;
color: #333;
}

/* Blog Details CSS Responsive */

/* RESPONSIVE */

@media (max-width: 1200px) {
.blog_details_layout {
grid-template-columns: 1fr 320px;
gap: 30px;
}
}

@media (max-width: 992px) {
.blog_details_layout {
grid-template-columns: 1fr 350px;
gap: 30px;
}
.blog_details_toc_sidebar {
display: none;
}

.blog_details_container {
    padding: 30px 15px;
}
}

@media (max-width: 768px) {
.blog_details_layout {
grid-template-columns: 1fr;
gap: 20px;
}

.blog_details_right_sidebar {
    position: static;
}

.blog_details_post_title {
    font-size: 24px;
}

.blog_details_main_content {
    padding: 20px;
}

.blog_details_sidebar_widget {
    padding: 20px;
}

.blog_details_container {
    padding: 20px 10px;
}

.blog_details_post_content h2 {
    font-size: 22px;
}

.blog_details_post_content h3 {
    font-size: 18px;
}

.blog_details_post_footer {
    flex-direction: column;
    align-items: flex-start;
}

.blog_details_search_form {
    flex-direction: column;
}

.blog_details_search_btn {
    width: 100%;
}

.blog_details_recent_post {
    flex-direction: column;
}

.blog_details_recent_post_image {
    width: 100%;
    height: 200px;
}

.blog_details_category_images {
    grid-template-columns: repeat(2, 1fr);
}

.blog_details_post_meta {
    font-size: 13px;
}
}

@media (max-width: 480px) {
.blog_details_post_title {
font-size: 20px;
}

.blog_details_main_content {
    padding: 15px;
}

.blog_details_sidebar_widget {
    padding: 15px;
}

.blog_details_post_content h2 {
    font-size: 20px;
}

.blog_details_post_content h3 {
    font-size: 16px;
}

.blog_details_post_content p {
    font-size: 15px;
}

.blog_details_category_images {
    grid-template-columns: 1fr;
}

.blog_details_recent_post_image {
    height: 180px;
}

.blog_details_sidebar_widget h3 {
    font-size: 18px;
}

.blog_details_toc_sidebar h3 {
    font-size: 16px;
}
}

@media (max-width: 1200px) {
.blog_details_mobile_toc_toggle {
display: flex;
}

text

.blog_details_toc_sidebar.mobile-active {
    display: block;
    position: fixed;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    max-width: 90%;
    width: 80%;
    max-height: 75%;
}

.blog_details_mobile_toc_close {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #718096;
    width: 30px;
    height: 30px;
    padding: 0;
    line-height: 1;
}

.blog_details_mobile_toc_close:hover {
    color: #2d3748;
}
}

@media (min-width: 993px) {
.blog_details_mobile_toc_close {
display: none;
}
}

/* Touch-friendly improvements */

@media (hover: none) and (pointer: coarse) {
.blog_details_toc_list a,
.blog_details_category_item a,
.blog_details_recent_post_content h4 a {
min-height: 44px;
display: flex;
align-items: center;
}

.blog_details_search_btn,
.blog_details_submit_btn {
    min-height: 48px;
}

.blog_details_form_group input,
.blog_details_form_group textarea,
.blog_details_search_input {
    font-size: 16px;
    /* Prevents zoom on iOS */
}
}

@media (max-width : 768px) {
.blog_details_comment_form {
gap: 20px;
}


.blog_details_form_group input,
.blog_details_form_group textarea {
    padding: 14px;
}

.blog_details_submit_btn {
    width: 100%;
    padding: 14px 30px;
}
}

@media (max-width: 1200px) {
.blog_details_toc_sidebar {
position: fixed;
top: 0;
left: -320px;
width: 300px;
height: 100vh;
z-index: 1001;
transition: left 0.3s ease;
background: white;
border-radius: 0;
}

.toc_sticky_wrapper {
    position: relative;
    top: 0;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
}

.blog_details_mobile_toc_toggle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog_details_mobile_toc_close {
    display: flex;
    align-items: center;
    justify-content: center;
}
}

/* =========================================
CATEGORY BADGE
========================================= */

.blog_category_badge {
display: inline-block;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
padding: 5px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
margin-right: 8px;
margin-bottom: 8px;
text-decoration: none;
transition: all 0.3s ease;
}

.blog_category_badge:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
color: #fff;
}

/* =========================================
COMMENTS SECTION
========================================= */

.blog_details_comments_section {
margin-top: 50px;
padding-top: 40px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.blog_details_comments_section > h3 {
font-size: 24px;
font-weight: 700;
color: #fff;
margin-bottom: 30px;
display: flex;
align-items: center;
gap: 10px;
}

.blog_details_comments_section > h3 i {
color: #667eea;
}

/* Comments List */
.blog_comments_list {
margin-bottom: 40px;
}

.blog_comment_item {
display: flex;
gap: 15px;
padding: 20px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
margin-bottom: 15px;
transition: all 0.3s ease;
}

.blog_comment_item:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(102, 126, 234, 0.3);
}

.comment_avatar {
flex-shrink: 0;
}

.comment_avatar img {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.1);
}

.comment_content {
flex: 1;
}

.comment_header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 10px;
}

.comment_author_name,
.comment_author_link {
font-weight: 600;
font-size: 15px;
color: #667eea;
}

.comment_author_link {
text-decoration: none;
transition: color 0.3s ease;
}

.comment_author_link:hover {
color: #764ba2;
}

.comment_date {
font-size: 12px;
color: #6b7280;
}

.comment_text {
font-size: 14px;
line-height: 1.7;
color: #e2e8f0;
}

/* No Comments Message */
.no_comments_message {
text-align: center;
padding: 40px;
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
margin-bottom: 30px;
}

.no_comments_message p {
color: #6b7280;
margin: 0;
}

/* Comment Form */
.blog_comment_form_wrapper {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 30px;
}

.blog_comment_form_wrapper h4 {
font-size: 20px;
font-weight: 600;
color: #fff;
margin-bottom: 10px;
}

.comment_moderation_notice {
font-size: 13px;
color: #6b7280;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 8px;
}

.comment_moderation_notice i {
color: #667eea;
}

.blog_details_form_row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

@media (max-width: 768px) {
.blog_details_form_row {
grid-template-columns: 1fr;
}
}

.blog_details_form_group {
margin-bottom: 20px;
}

.blog_details_form_group label {
display: block;
font-size: 14px;
font-weight: 500;
color: #e2e8f0;
margin-bottom: 8px;
}

.blog_details_form_group input,
.blog_details_form_group textarea {
width: 100%;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
color: #fff;
font-size: 14px;
transition: all 0.3s ease;
}

.blog_details_form_group input:focus,
.blog_details_form_group textarea:focus {
outline: none;
border-color: #667eea;
background: rgba(102, 126, 234, 0.1);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.blog_details_form_group input::placeholder,
.blog_details_form_group textarea::placeholder {
color: #6b7280;
}

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

.blog_details_submit_btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 32px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
border: none;
border-radius: 30px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}

.blog_details_submit_btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.blog_details_submit_btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}

/* Comment Message */
.comment_message {
margin-top: 20px;
padding: 15px 20px;
border-radius: 10px;
font-size: 14px;
}

.comment_message.success {
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
color: #10b981;
}

.comment_message.error {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #ef4444;
}

/* =========================================
NESTED REPLIES STYLES
========================================= */

.comment_replies_wrapper {
margin-left: 30px;
padding-left: 20px;
border-left: 2px solid rgba(102, 126, 234, 0.3);
}

/* Reply depth indentation */
.blog_comment_item.comment_reply {
background: rgba(102, 126, 234, 0.05);
border-color: rgba(102, 126, 234, 0.2);
}

.blog_comment_item.depth_1 {
margin-left: 0;
}

.blog_comment_item.depth_2 {
background: rgba(102, 126, 234, 0.08);
}

.blog_comment_item.depth_3 {
background: rgba(102, 126, 234, 0.12);
}

/* Admin Badge */
.admin_badge {
display: inline-block;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
border-radius: 10px;
margin-left: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}

/* Comment Author Info */
.comment_author_info {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
}

/* Comment Actions */
.comment_actions {
margin-top: 10px;
display: flex;
gap: 10px;
}

.comment_reply_btn {
background: transparent;
border: 1px solid rgba(102, 126, 234, 0.5);
color: #667eea;
padding: 5px 12px;
border-radius: 15px;
font-size: 12px;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 5px;
}

.comment_reply_btn:hover {
background: #667eea;
color: #fff;
border-color: #667eea;
}

/* Reply Form */
.comment_reply_form_wrapper {
margin-top: 15px;
padding: 20px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
}

.replying_to {
font-size: 13px;
color: #a0aec0;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: space-between;
}

.replying_to strong {
color: #667eea;
}

.cancel_reply_btn {
background: transparent;
border: none;
color: #ef4444;
font-size: 12px;
cursor: pointer;
padding: 0;
}

.cancel_reply_btn:hover {
text-decoration: underline;
}

.reply_form_row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 15px;
}

@media (max-width: 576px) {
.reply_form_row {
grid-template-columns: 1fr;
}
comment_replies_wrapper {
    margin-left: 15px;
    padding-left: 15px;
}
}

.comment_reply_form input,
.comment_reply_form textarea {
width: 100%;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: #fff;
font-size: 13px;
transition: all 0.3s ease;
}

.comment_reply_form input:focus,
.comment_reply_form textarea:focus {
outline: none;
border-color: #667eea;
background: rgba(102, 126, 234, 0.1);
}

.comment_reply_form input::placeholder,
.comment_reply_form textarea::placeholder {
color: #6b7280;
}

.submit_reply_btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}

.submit_reply_btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

.submit_reply_btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}

/* =========================================
BLOG CONTENT - CODE BLOCK
========================================= */

/* Inline code */
.blog_details_post_content code {
display: inline-block;
padding: 2px 8px;
margin: 0 2px;
border-radius: 6px;
background: rgba(99, 102, 241, 0.12);
border: 1px solid rgba(99, 102, 241, 0.18);
color: #c7d2fe;
font-size: 0.92em;
font-family: "Fira Code", "Consolas", "Monaco", monospace;
line-height: 1.5;
word-break: break-word;
}

/* Code block wrapper */
.blog_details_post_content pre {
position: relative;
margin: 28px 0 34px;
padding: 26px 24px;
border-radius: 18px;
background:
linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.015) 100%),
#0b0b0f;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
overflow-x: auto;
overflow-y: hidden;
}

/* Top accent line */
.blog_details_post_content pre::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--jdg-btn-gradient);
border-radius: 18px 18px 0 0;
}

/* Code text inside pre */
.blog_details_post_content pre code {
display: block;
padding: 0;
margin: 0;
background: transparent;
border: none;
color: #e5e7eb;
font-size: 0.95rem;
line-height: 1.9;
font-family: "Fira Code", "Consolas", "Monaco", monospace;
white-space: pre;
min-width: max-content;
}

/* Optional subtle scrollbar for code block */
.blog_details_post_content pre::-webkit-scrollbar {
height: 8px;
}

.blog_details_post_content pre::-webkit-scrollbar-track {
background: rgba(255,255,255,0.04);
border-radius: 10px;
}

.blog_details_post_content pre::-webkit-scrollbar-thumb {
background: rgba(99, 102, 241, 0.35);
border-radius: 10px;
}

.blog_details_post_content pre::-webkit-scrollbar-thumb:hover {
background: rgba(99, 102, 241, 0.55);
}

/* =========================================
BLOG CONTENT - BLOCKQUOTE / QUOTE BLOCK
========================================= */
.blog_details_post_content blockquote {
position: relative;
margin: 34px 0;
padding: 30px 28px 30px 78px;
border-radius: 20px;
background: linear-gradient(
135deg,
rgba(99, 102, 241, 0.08) 0%,
rgba(118, 75, 162, 0.07) 100%
);
border: 1px solid rgba(99, 102, 241, 0.16);
overflow: hidden;
}

/* Left glowing accent */
.blog_details_post_content blockquote::before {
content: '';
position: absolute;
left: 0;
top: 18px;
bottom: 18px;
width: 4px;
border-radius: 10px;
background: var(--jdg-btn-gradient);
}

/* Quote mark */
.blog_details_post_content blockquote::after {
content: '“';
position: absolute;
top: 18px;
left: 24px;
font-family: Georgia, serif;
font-size: 54px;
line-height: 1;
color: rgba(165, 180, 252, 0.35);
font-weight: 700;
}

/* Quote text */
.blog_details_post_content blockquote p {
margin: 0 !important;
font-family: var(--jdg-heading-font-family);
font-size: clamp(1.05rem, 1vw, 1.18rem) !important;
line-height: 1.9;
color: #e5e7eb !important;
font-style: italic;
}

/* If multiple paragraphs are inside blockquote */
.blog_details_post_content blockquote p + p {
margin-top: 14px !important;
}

/* Optional cite/footer inside quote */
.blog_details_post_content blockquote cite,
.blog_details_post_content blockquote footer {
display: block;
margin-top: 16px;
font-style: normal;
font-size: 0.9rem;
color: rgba(255,255,255,0.55);
font-family: var(--jdg-body-font-family);
}

/* =========================================
RESPONSIVE
========================================= */
@media (max-width: 768px) {
.blog_details_post_content pre {
padding: 22px 18px;
border-radius: 14px;
}
.blog_details_post_content pre code {
    font-size: 0.88rem;
    line-height: 1.75;
}

.blog_details_post_content blockquote {
    padding: 24px 20px 24px 58px;
    border-radius: 16px;
}

.blog_details_post_content blockquote::after {
    left: 18px;
    top: 14px;
    font-size: 42px;
}

.blog_details_post_content blockquote p {
    font-size: 1rem !important;
    line-height: 1.8;
}
}


/* =========================================
BLOG CONTENT - LINKS
========================================= */
.blog_details_post_content a {
color: rgba(165, 180, 252, 0.92);
text-decoration: none;
border-bottom: 1px solid rgba(165, 180, 252, 0.28);
transition: all 0.25s ease;
word-break: break-word;
}

.blog_details_post_content a:hover {
color: #fff;
border-bottom-color: rgba(165, 180, 252, 0.85);
}

/* =========================================
BLOG CONTENT - LISTS
========================================= */
.blog_details_post_content ul,
.blog_details_post_content ol {
margin: 22px 0 26px 0;
padding-left: 0;
}

.blog_details_post_content ul li,
.blog_details_post_content ol li {
position: relative;
margin-bottom: 12px;
color: #8c8f94;
font-size: 18px;
line-height: 1.8;
}

.blog_details_post_content ul {
list-style: none;
}

.blog_details_post_content ul li {
padding-left: 24px;
}

.blog_details_post_content ul li::before {
content: '';
position: absolute;
left: 0;
top: 12px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--jdg-btn-gradient);
}

.blog_details_post_content ol {
counter-reset: blog-ol-counter;
list-style: none;
}

.blog_details_post_content ol li {
counter-increment: blog-ol-counter;
padding-left: 34px;
}

.blog_details_post_content ol li::before {
content: counter(blog-ol-counter) ".";
position: absolute;
left: 0;
top: 0;
font-family: var(--jdg-heading-font-family);
font-size: 0.95em;
font-weight: 600;
color: rgba(165, 180, 252, 0.9);
}

.blog_details_post_content li > ul,
.blog_details_post_content li > ol {
margin-top: 12px;
margin-bottom: 8px;
}


/* =========================================
   BLOG CONTENT - TABLES (FINAL CLEAN VERSION)
   ========================================= */

/* Main content constraints */
.blog_details_main_content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.blog_details_post_content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Table wrapper (auto-created by JS) */
.blog_details_post_content .table-responsive {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 32px 0 38px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Scroll Shadow Indicators */
.blog_details_post_content .table-responsive::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to right, rgba(10, 10, 15, 1) 0%, rgba(10, 10, 15, 0) 100%);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show left shadow when scrolled */
.blog_details_post_content .table-responsive.scrolled-left::before {
    opacity: 1;
}

/* Direct table fallback (if not wrapped) */
.blog_details_post_content table {
    width: 100%;
    min-width: 100%;
    margin: 32px 0 38px;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Table inside wrapper */
.blog_details_post_content .table-responsive table {
    min-width: 700px;
    margin: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}

/* Table header */
.blog_details_post_content table thead {
    background: linear-gradient(
        135deg,
        rgba(99, 102, 241, 0.14) 0%,
        rgba(118, 75, 162, 0.10) 100%
    );
}

.blog_details_post_content table thead tr {
    border-bottom: 2px solid rgba(99, 102, 241, 0.3);
}

/* Table cells */
.blog_details_post_content table th,
.blog_details_post_content table td {
    padding: 16px 20px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.blog_details_post_content table th {
    font-family: var(--jdg-heading-font-family), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.blog_details_post_content table td {
    font-family: var(--jdg-body-font-family), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.94rem;
    line-height: 1.6;
    color: #a0aec0;
    white-space: nowrap;
}

/* Row styles */
.blog_details_post_content table tbody tr {
    transition: background 0.2s ease;
}

.blog_details_post_content table tbody tr:hover {
    background: rgba(99, 102, 241, 0.06);
}

.blog_details_post_content table tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.015);
}

.blog_details_post_content table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.008);
}

.blog_details_post_content table tbody tr:nth-child(odd):hover {
    background: rgba(99, 102, 241, 0.08);
}

.blog_details_post_content table tbody tr:nth-child(even):hover {
    background: rgba(99, 102, 241, 0.06);
}

.blog_details_post_content table tbody tr:last-child td {
    border-bottom: none;
}

/* Custom scrollbar */
.blog_details_post_content .table-responsive::-webkit-scrollbar {
    height: 10px;
}

.blog_details_post_content .table-responsive::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0 0 16px 16px;
}

.blog_details_post_content .table-responsive::-webkit-scrollbar-thumb {
    background: linear-gradient(
        90deg,
        rgba(99, 102, 241, 0.6) 0%,
        rgba(118, 75, 162, 0.6) 100%
    );
    border-radius: 10px;
    border: 2px solid rgba(10, 10, 15, 1);
}

.blog_details_post_content .table-responsive::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        90deg,
        rgba(99, 102, 241, 0.85) 0%,
        rgba(118, 75, 162, 0.85) 100%
    );
}

/* Firefox scrollbar */
.blog_details_post_content .table-responsive {
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.6) rgba(255, 255, 255, 0.03);
}

/* =========================================
   RESPONSIVE BREAKPOINTS
   ========================================= */

@media (max-width: 1200px) {
    .blog_details_post_content .table-responsive table {
        min-width: 600px;
    }
}

@media (max-width: 992px) {
    .blog_details_post_content table th,
    .blog_details_post_content table td {
        padding: 14px 16px;
        font-size: 0.88rem;
    }

    .blog_details_post_content table,
    .blog_details_post_content .table-responsive {
        margin: 28px 0;
        border-radius: 14px;
    }
}

@media (max-width: 768px) {
    .blog_details_layout {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 100vw;
    }
    
    .blog_details_container {
        padding: 20px 10px;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .blog_details_post_content .table-responsive {
        margin: 24px 0;
    }
    
    .blog_details_post_content .table-responsive table {
        min-width: 500px;
    }

    .blog_details_post_content table th,
    .blog_details_post_content table td {
        padding: 12px 14px;
        font-size: 0.85rem;
    }

    .blog_details_post_content table th {
        font-size: 0.8rem;
    }

    .blog_details_post_content .table-responsive::-webkit-scrollbar {
        height: 8px;
    }
}

@media (max-width: 600px) {
    .blog_details_container {
        margin-left: 10px;
        margin-right: 10px;
        padding: 15px 5px;
    }

    .blog_details_post_content .table-responsive table {
        min-width: 450px;
    }
}

@media (max-width: 480px) {
    .blog_details_post_content .table-responsive {
        margin: 20px 0;
        border-radius: 12px;
    }

    .blog_details_post_content .table-responsive table {
        min-width: 400px;
    }

    .blog_details_post_content table th,
    .blog_details_post_content table td {
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    .blog_details_post_content table th {
        font-size: 0.75rem;
    }
}

/* Table scroll hint (created by JS) */
.table-scroll-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 6px 14px;
    background: rgba(99, 102, 241, 0.95);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    z-index: 10;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

/* Animation */
@keyframes fadeOutHint {
    0%, 60% { 
        opacity: 1; 
    }
    100% { 
        opacity: 0; 
        visibility: hidden; 
    }
}