@extends('layouts.master', [
    'title' => $post->title . ' - ' . config('app.name'),
    'description' => $post->meta_description ?? Str::limit(strip_tags($post->content), 160),
    'keywords' => $post->meta_keywords ?? $post->tags->pluck('name')->implode(', '),
    'image' => $post->thumbnail_url,
    'publishedTime' => $post->published_at->toIso8601String(),
    'modifiedTime' => $post->updated_at->toIso8601String(),
    'author' => $post->author,
    'category' => $post->category,
    'articleId' => $post->id,
    'schema' => true,
])

@section('content')
<div class="reading-progress-container">
    <div class="reading-progress-bar" id="readingProgress"></div>
</div>
<article class="single-post single-post-redesign" itemscope itemtype="https://schema.org/NewsArticle">
    <div class="container">
        {{-- Breadcrumb --}}
        @component('components.breadcrumb', [
            'items' => [
                ['label' => $post->category->name_bn ?? '', 'url' => route('category.show', $post->category->slug ?? '#')],
                ['label' => Str::limit($post->title, 40), 'url' => null]
            ]
        ])
        @endcomponent
        
        {{-- Post Header --}}
        <header class="post-header">
            @if($post->category)
            <a href="{{ route('category.show', $post->category->slug) }}" class="post-category">
                {{ $post->category->name_bn }}
            </a>
            @endif
            
            <h1 class="post-title" itemprop="headline">{{ $post->title }}</h1>
            
            @if($post->is_sponsored)
            <div class="sponsored-badge">
                <span class="badge bg-warning text-dark">
                    <i class="fas fa-star me-1"></i> স্পন্সরড
                </span>
                @if($post->sponsor_name)
                <span class="sponsor-info">
                    {{ $post->sponsor_name }}
                </span>
                @endif
            </div>
            @endif
            
            @if($post->is_premium)
            <div class="premium-badge mb-2">
                <span class="badge bg-gradient text-white" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <i class="fas fa-crown me-1"></i> প্রিমিয়াম
                </span>
            </div>
            @endif
            
            @if($post->excerpt)
            <p class="post-excerpt">{{ $post->excerpt }}</p>
            @endif
            
            <div class="post-meta">
                @if($post->author)
                <div class="post-author">
                    <img src="{{ $post->author->avatar_url ?? asset('images/default-avatar.png') }}" 
                         alt="{{ $post->author->name }}"
                         class="author-avatar"
                         width="48"
                         height="48">
                    <div class="author-info">
                        <a href="{{ route('author.show', $post->author->username) }}" class="author-name">
                            {{ $post->author->name }}
                        </a>
                        @if($post->author->designation)
                        <span class="author-designation">{{ $post->author->designation }}</span>
                        @endif
                    </div>
                </div>
                @endif
                
                <div class="post-date-info">
                    <time class="post-published" datetime="{{ $post->published_at->toIso8601String() }}" itemprop="datePublished">
                        {{ \Carbon\Carbon::parse($post->published_at)->locale('bn_BD')->isoFormat('jMMMM Y, dddd') }}
                    </time>
                    <span class="post-updated" itemprop="dateModified" content="{{ $post->updated_at->toIso8601String() }}">
                        আপডেট: {{ \Carbon\Carbon::parse($post->updated_at)->locale('bn_BD')->isoFormat('jMMMM Y') }}
                    </span>
                </div>
                
                <div class="post-stats">
                    <span class="post-views">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                            <circle cx="12" cy="12" r="3"></circle>
                        </svg>
                        {{ number_format($post->views_count) }} পঠিত
                    </span>
                    @if($post->read_time)
                    <span class="post-read-time">
                        {{ $post->read_time }} মিনিট পড়ুন
                    </span>
                    @endif
                </div>
                
                <div class="post-actions">
                    <button class="action-btn share-btn" data-share-url="{{ url()->current() }}" data-share-title="{{ $post->title }}">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <circle cx="18" cy="5" r="3"></circle>
                            <circle cx="6" cy="12" r="3"></circle>
                            <circle cx="18" cy="19" r="3"></circle>
                            <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
                            <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
                        </svg>
                        শেয়ার
                    </button>
                    <button class="action-btn bookmark-btn" data-post-id="{{ $post->id }}">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
                        </svg>
                        বুকমার্ক
                    </button>
                    <button class="action-btn print-btn" onclick="window.print()">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="6 9 6 2 18 2 18 9"></polyline>
                            <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>
                            <rect x="6" y="14" width="12" height="8"></rect>
                        </svg>
                        প্রিন্ট
                    </button>
                </div>
            </div>
        </header>
        
        {{-- Featured Image --}}
        @if($post->thumbnail_url && !$post->video_embed && !$post->video_url && !$post->custom_embed)
        <figure class="post-featured-image">
            <img src="{{ $post->thumbnail_url }}" 
                 alt="{{ $post->title }}"
                 class="featured-img"
                 width="800"
                 height="450"
                 itemprop="image">
            @if($post->image_caption)
            <figcaption class="image-caption">{{ $post->image_caption }}</figcaption>
            @endif
        </figure>
        @endif
        
        {{-- Video Embed --}}
        @if($post->video_embed)
        <div class="post-video-embed mb-4">
            <div class="video-container">
                @if(str_contains($post->video_embed, 'youtube.com/embed'))
                <iframe src="{{ $post->video_embed }}" frameborder="0" allowfullscreen></iframe>
                @elseif(str_contains($post->video_embed, 'youtube.com/watch'))
                <iframe src="https://www.youtube.com/embed/{{ explode('v=', $post->video_embed)[1] ?? '' }}" frameborder="0" allowfullscreen></iframe>
                @else
                {!! $post->video_embed !!}
                @endif
            </div>
        </div>
        @endif
        
        {{-- Custom/External Video --}}
        @if($post->video_url && !$post->video_embed)
        <div class="post-video-embed mb-4">
            <div class="video-container">
                <video controls style="width: 100%;">
                    <source src="{{ $post->video_url }}" type="video/mp4">
                    আপনার ব্রাউজার ভিডিও সাপোর্ট করে না।
                </video>
            </div>
        </div>
        @endif
        
        {{-- Facebook Embed --}}
        @if($post->facebook_embed)
        <div class="post-embed facebook-embed mb-4">
            {!! $post->facebook_embed !!}
        </div>
        @endif
        
        {{-- Twitter Embed --}}
        @if($post->twitter_embed)
        <div class="post-embed twitter-embed mb-4">
            {!! $post->twitter_embed !!}
        </div>
        @endif
        
        {{-- Custom Embed --}}
        @if($post->custom_embed)
        <div class="post-embed custom-embed mb-4">
            {!! $post->custom_embed !!}
        </div>
        @endif
        
        {{-- Fallback Image if video/custom embed exists --}}
        @if(($post->video_embed || $post->video_url || $post->custom_embed) && $post->thumbnail_url)
        <figure class="post-featured-image mb-4">
            <img src="{{ $post->thumbnail_url }}" 
                 alt="{{ $post->title }}"
                 class="featured-img"
                 width="800"
                 height="450">
        </figure>
        @endif
        
        {{-- Ad after image --}}
        <div class="single-inline-ad single-inline-ad-top">
            @component('components.ad', ['placement' => 'in_article'])
            @endcomponent
        </div>
        
        <div class="content-grid single-content-grid">
            {{-- Main Content --}}
            <div class="main-content article-main-column">
                {{-- Post Content --}}
                <div class="post-content" itemprop="articleBody">
                    {!! $post->content !!}
                    
                    @if($post->is_premium && !($canAccessFullContent ?? false))
                    <div class="paywall-overlay">
                        <div class="paywall-content text-center py-5">
                            <i class="fas fa-lock fa-3x text-muted mb-3"></i>
                            <h4>প্রিমিয়াম কন্টেন্ট</h4>
                            <p>এই আর্টিকেলটি পড়তে আপনাকে সাবস্ক্রাইব করতে হবে।</p>
                            <div class="mt-4">
                                @auth
                                    <a href="{{ route('frontend.profile') }}" class="btn btn-primary">
                                        <i class="fas fa-crown me-1"></i> সাবস্ক্রাইব করুন
                                    </a>
                                @else
                                    <a href="{{ route('frontend.login.form') }}" class="btn btn-primary me-2">
                                        <i class="fas fa-sign-in-alt me-1"></i> লগইন করুন
                                    </a>
                                    <a href="{{ route('frontend.register.form') }}" class="btn btn-outline-primary">
                                        রেজিস্টার করুন
                                    </a>
                                @endauth
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
                
                {{-- Photo Gallery with Lightbox --}}
                @if($post->gallery_images && count($post->gallery_images) > 0)
                <div class="post-gallery mt-4">
                    <h4 class="gallery-title"><i class="fas fa-images"></i> ফটো গ্যালারি</h4>
                    <div class="gallery-grid">
                        @foreach($post->gallery_images as $index => $image)
                        <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#galleryModal" data-index="{{ $index }}">
                            @if(str_starts_with($image, 'http'))
                            <img src="{{ $image }}" alt="Gallery {{ $index + 1 }}" class="img-fluid">
                            @else
                            <img src="{{ asset('storage/' . $image) }}" alt="Gallery {{ $index + 1 }}" class="img-fluid">
                            @endif
                        </div>
                        @endforeach
                    </div>
                </div>

                <div class="modal fade" id="galleryModal" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-lg modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header border-0">
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body p-0">
                                <div id="galleryCarousel" class="carousel slide" data-bs-ride="false">
                                    <div class="carousel-inner">
                                        @foreach($post->gallery_images as $index => $image)
                                        <div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
                                            @if(str_starts_with($image, 'http'))
                                            <img src="{{ $image }}" class="d-block w-100" alt="Gallery {{ $index + 1 }}">
                                            @else
                                            <img src="{{ asset('storage/' . $image) }}" class="d-block w-100" alt="Gallery {{ $index + 1 }}">
                                            @endif
                                        </div>
                                        @endforeach
                                    </div>
                                    <button class="carousel-control-prev" type="button" data-bs-target="#galleryCarousel" data-bs-slide="prev">
                                        <span class="carousel-control-prev-icon bg-dark rounded-circle p-3" aria-hidden="true"></span>
                                    </button>
                                    <button class="carousel-control-next" type="button" data-bs-target="#galleryCarousel" data-bs-slide="next">
                                        <span class="carousel-control-next-icon bg-dark rounded-circle p-3" aria-hidden="true"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
                
                {{-- Tags --}}
                @if($post->tags->count() > 0)
                <div class="post-tags post-panel">
                    <span class="tags-label">ট্যাগ:</span>
                    @foreach($post->tags as $tag)
                    @php
                        $tagSlug = data_get($tag, 'slug');
                        $tagNameRaw = data_get($tag, 'name_bn') ?? data_get($tag, 'name') ?? data_get($tag, 'title');
                        if (is_array($tagNameRaw)) {
                            $tagName = $tagNameRaw['bn'] ?? $tagNameRaw['en'] ?? reset($tagNameRaw);
                        } else {
                            $tagName = $tagNameRaw;
                        }
                        $tagName = trim((string) $tagName);
                    @endphp
                    @if($tagName !== '')
                    <a href="{{ $tagSlug ? route('tag.show', $tagSlug) : '#' }}" class="tag-link">
                        {{ $tagName }}
                    </a>
                    @endif
                    @endforeach
                </div>
                @endif

                {{-- Reactions --}}
                <div class="post-reactions post-panel mt-4 p-3 border rounded">
                    <h5><i class="fas fa-heart text-danger"></i> আপনার প্রতিক্রিয়া</h5>
                    <div class="reactions-container" data-post-id="{{ $post->id }}">
                        <button class="reaction-btn" data-reaction="like"><i class="fas fa-thumbs-up"></i> <span class="count">0</span></button>
                        <button class="reaction-btn" data-reaction="love"><i class="fas fa-heart"></i> <span class="count">0</span></button>
                        <button class="reaction-btn" data-reaction="angry"><i class="fas fa-angry"></i> <span class="count">0</span></button>
                    </div>
                </div>
 
                {{-- Star Rating --}}
                <div class="post-rating post-panel mt-4 p-3 border rounded">
                    <h5><i class="fas fa-star text-warning"></i> এই পোস্টটি রেট করুন</h5>
                    <div class="rating-container" data-post-id="{{ $post->id }}">
                        <div class="star-rating">
                            @for($i = 1; $i <= 5; $i++)
                            <span class="star" data-rating="{{ $i }}"><i class="far fa-star"></i></span>
                            @endfor
                        </div>
                        <span class="rating-info">
                            <span class="average-rating">{{ $post->averageRating() }}</span>/5 
                            (<span class="total-ratings">{{ $post->totalRatings() }}</span> ভোট)
                        </span>
                    </div>
                </div>

                {{-- Poll --}}
                @if($post->poll && $post->poll->is_active)
                @php
                    $poll = $post->poll;
                    $hasVoted = $poll->hasVoted(auth()->id(), request()->ip());
                    $totalVotes = $poll->options->sum('votes');
                @endphp
                <div class="post-poll post-panel mt-4 p-3 border rounded">
                    <h5><i class="fas fa-poll text-primary"></i> {{ $poll->question }}</h5>
                    @if($hasVoted || ($poll->expires_at && $poll->expires_at->isPast()))
                        <div class="poll-results">
                            @foreach($poll->options as $option)
                            @php $percentage = $totalVotes > 0 ? round(($option->votes / $totalVotes) * 100, 1) : 0; @endphp
                            <div class="poll-result-item mb-2">
                                <div class="d-flex justify-content-between">
                                    <span>{{ $option->option_text }}</span>
                                    <span>{{ $percentage }}%</span>
                                </div>
                                <div class="progress" style="height: 8px;">
                                    <div class="progress-bar bg-success" style="width: {{ $percentage }}%"></div>
                                </div>
                            </div>
                            @endforeach
                            <small class="text-muted">মোট ভোট: {{ $totalVotes }}</small>
                        </div>
                    @else
                        <form class="poll-form" data-poll-id="{{ $poll->id }}">
                            @foreach($poll->options as $option)
                            <div class="poll-option mb-2">
                                <label class="d-flex align-items-center p-2 border rounded" style="cursor: pointer;">
                                    <input type="radio" name="poll_option" value="{{ $option->id }}" class="me-2" required>
                                    <span>{{ $option->option_text }}</span>
                                </label>
                            </div>
                            @endforeach
                            <button type="submit" class="btn btn-primary btn-sm mt-2">ভোট দিন</button>
                        </form>
                    @endif
                </div>
                @endif

                {{-- Ad before author --}}
                <div class="single-inline-ad single-inline-ad-mid">
                    @component('components.ad', ['placement' => 'in_article'])
                    @endcomponent
                </div>
                
                {{-- Author Box --}}
                @if($post->author)
                <div class="author-box post-panel">
                    <img src="{{ $post->author->avatar_url ?? asset('images/default-avatar.png') }}" 
                         alt="{{ $post->author->name }}"
                         class="author-box-avatar"
                         width="80"
                         height="80">
                    <div class="author-box-info">
                        <h4 class="author-box-name">
                            <a href="{{ route('author.show', $post->author->username) }}">
                                {{ $post->author->name }}
                            </a>
                            @if($post->author->is_verified)
                            <span class="verified-badge" title="যাচাইকৃত লেখক">
                                <i class="fas fa-check-circle text-primary"></i>
                            </span>
                            @endif
                            @auth
                            <button class="btn btn-sm btn-outline-primary follow-btn ms-2" 
                                    data-author-id="{{ $post->author->id }}"
                                    data-following="{{ $isFollowingAuthor ? 'true' : 'false' }}">
                                {{ $isFollowingAuthor ? 'অনুসরণ করছেন' : 'অনুসরণ করুন' }}
                            </button>
                            @endauth
                        </h4>
                        @if($post->author->bio)
                        <p class="author-box-bio">{{ $post->author->bio }}</p>
                        @endif
                        <div class="author-box-stats">
                            <span class="followers-count">
                                <i class="fas fa-users"></i> 
                                {{ $post->author->followers_count }} অনুসারী
                            </span>
                            <span class="posts-count">
                                <i class="fas fa-newspaper"></i> 
                                {{ $post->author->posts_count }} পোস্ট
                            </span>
                        </div>
                        <div class="author-box-social">
                            @if($post->author->facebook)
                            <a href="{{ $post->author->facebook }}" target="_blank" rel="noopener">
                                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
                            </a>
                            @endif
                            @if($post->author->twitter)
                            <a href="{{ $post->author->twitter }}" target="_blank" rel="noopener">
                                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg>
                            </a>
                            @endif
                        </div>
                        <a href="{{ route('author.show', $post->author->username) }}" class="author-box-more">
                            আরও পোস্ট দেখুন
                        </a>
                    </div>
                </div>
                @endif
                
                {{-- Related Posts --}}
                @if($relatedPosts->count() > 0)
                <section class="related-posts post-panel">
                    <h3 class="related-title">সম্পর্কিত খবর</h3>
                    <div class="related-grid">
                        @foreach($relatedPosts->take(4) as $relatedPost)
                        @component('components.news-card-large', [
                            'post' => $relatedPost,
                            'size' => 'medium',
                            'showExcerpt' => false,
                            'showCategory' => true,
                            'showDate' => true,
                        ])
                        @endcomponent
                        @endforeach
                    </div>
                </section>
                @endif
            </div>
            
            {{-- Sidebar --}}
            <div class="sidebar-container article-sidebar-column">
                @component('components.sidebar', ['sticky' => true])
                @endcomponent
            </div>
        </div>
    </div>
</article>
@endsection

@push('styles')
<style>
.single-post-redesign {
    background: linear-gradient(180deg, #f2f5fa 0%, #f6f7f9 36%, #f3f4f6 100%);
    padding: 16px 0 48px;
}

.single-post-redesign .container {
    max-width: 1280px;
}

.single-post-redesign .post-header {
    background: #ffffff;
    border: 1px solid #e5ebf2;
    border-radius: 16px;
    box-shadow: 0 14px 36px rgba(18, 38, 63, 0.06);
    padding: 28px 32px;
    margin-bottom: 18px;
}

.single-post-redesign .post-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff4f4;
    color: #b60000;
    border: 1px solid #ffd2d2;
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.single-post-redesign .post-title {
    font-family: var(--font-headline);
    font-size: clamp(30px, 3.2vw, 46px);
    line-height: 1.2;
    letter-spacing: -0.2px;
    color: #111827;
    margin: 14px 0 14px;
}

.single-post-redesign .post-excerpt {
    font-size: 20px;
    line-height: 1.7;
    color: #475467;
    margin-bottom: 16px;
    max-width: 92ch;
}

.single-post-redesign .post-meta {
    display: grid;
    grid-template-columns: minmax(230px, 1.3fr) minmax(180px, 1fr) auto auto;
    align-items: center;
    gap: 14px 18px;
    margin-top: 12px;
    padding-top: 18px;
    border-top: 1px solid #edf1f7;
}

.single-post-redesign .post-author {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.single-post-redesign .author-avatar {
    border-radius: 50%;
    border: 2px solid #f0f2f6;
    object-fit: cover;
}

.single-post-redesign .author-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.single-post-redesign .author-name {
    color: #111827;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.35;
}

.single-post-redesign .author-designation {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.3;
}

.single-post-redesign .post-date-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.single-post-redesign .post-published {
    color: #0f172a;
    font-weight: 600;
    font-size: 14px;
}

.single-post-redesign .post-updated {
    color: #6b7280;
    font-size: 13px;
}

.single-post-redesign .post-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.single-post-redesign .post-views,
.single-post-redesign .post-read-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f7f8fb;
    border: 1px solid #e6eaf0;
    border-radius: 999px;
    padding: 5px 11px;
}

.single-post-redesign .post-views svg {
    width: 15px;
    height: 15px;
}

.single-post-redesign .post-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.single-post-redesign .action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #d7deea;
    color: #1f2937;
    font-size: 13px;
    font-weight: 700;
    border-radius: 999px;
    padding: 8px 12px;
    transition: all 0.2s ease;
}

.single-post-redesign .action-btn svg {
    width: 15px;
    height: 15px;
}

.single-post-redesign .action-btn:hover {
    border-color: #c00;
    color: #c00;
    background: #fff7f7;
}

.single-post-redesign .post-featured-image,
.single-post-redesign .post-video-embed,
.single-post-redesign .post-embed,
.single-post-redesign .single-inline-ad {
    background: #ffffff;
    border: 1px solid #e5ebf2;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(18, 38, 63, 0.06);
    padding: 12px;
    margin-bottom: 18px;
}

.single-post-redesign .featured-img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.single-post-redesign .image-caption {
    margin-top: 10px;
    color: #6b7280;
    font-size: 13px;
    border-top: 1px dashed #e4e7ec;
    padding-top: 10px;
}

.single-post-redesign .single-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 22px;
    align-items: start;
}

.single-post-redesign .article-main-column {
    min-width: 0;
}

.single-post-redesign .article-main-column > * {
    background: #ffffff;
    border: 1px solid #e5ebf2;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(18, 38, 63, 0.05);
    padding: 22px;
    margin-bottom: 18px;
}

.single-post-redesign .post-content {
    font-family: var(--font-body);
    font-size: 19px;
    line-height: 1.92;
    color: #1f2937;
}

.single-post-redesign .post-content p {
    margin-bottom: 24px;
}

.single-post-redesign .post-content h2 {
    font-family: var(--font-headline);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.35;
    margin: 34px 0 14px;
    color: #111827;
}

.single-post-redesign .post-content h3 {
    font-family: var(--font-headline);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    margin: 28px 0 14px;
    color: #111827;
}

.single-post-redesign .post-content img {
    max-width: 100%;
    height: auto;
    margin: 26px 0;
    border-radius: 12px;
}

.single-post-redesign .post-content a {
    color: #c00;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.single-post-redesign .post-content a:hover {
    color: #a00000;
}

.single-post-redesign .post-content ul,
.single-post-redesign .post-content ol {
    margin: 14px 0 20px;
    padding-left: 28px;
}

.single-post-redesign .post-content li {
    margin-bottom: 8px;
}

.single-post-redesign .post-content blockquote {
    border-left: 4px solid #c00;
    background: #fff7f7;
    border-radius: 10px;
    padding: 18px 20px;
    margin: 24px 0;
    font-style: italic;
}

.single-post-redesign .post-content pre {
    background: #111827;
    color: #e5e7eb;
    padding: 16px;
    border-radius: 10px;
    overflow-x: auto;
    margin: 24px 0;
}

.single-post-redesign .post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    overflow: hidden;
    border-radius: 10px;
}

.single-post-redesign .post-content th,
.single-post-redesign .post-content td {
    border: 1px solid #e4e7ec;
    padding: 12px;
    text-align: left;
}

.single-post-redesign .post-content th {
    background: #f8fafc;
    font-weight: 700;
}

.single-post-redesign .post-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.single-post-redesign .tags-label {
    font-weight: 700;
    color: #111827;
    margin-right: 2px;
}

.single-post-redesign .tag-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid #d9e0ea;
    border-radius: 999px;
    color: #374151;
    background: #f8fafc;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.single-post-redesign .tag-link:hover {
    color: #c00;
    border-color: #f0b3b3;
    background: #fff5f5;
}

.single-post-redesign .post-panel h5 {
    font-size: 18px;
    margin-bottom: 14px;
    color: #111827;
}

.single-post-redesign .reactions-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.single-post-redesign .reaction-btn {
    border: 1px solid #dbe3ef;
    background: #f8fafc;
    color: #374151;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.single-post-redesign .reaction-btn:hover {
    background: #fff5f5;
    border-color: #f3b1b1;
    color: #c00;
}

.single-post-redesign .star-rating .star {
    font-size: 24px;
    cursor: pointer;
    color: #ddd;
    transition: color 0.2s;
}

.single-post-redesign .star-rating .star:hover,
.single-post-redesign .star-rating .star.active,
.single-post-redesign .star-rating .star.fas {
    color: #ffc107;
}

.single-post-redesign .poll-option label:hover {
    background: #f8fafc;
}

.single-post-redesign .poll-option input:checked + span {
    font-weight: 700;
}

.single-post-redesign .author-box {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 16px;
    background: linear-gradient(135deg, #fff7f7 0%, #ffffff 70%);
    border: 1px solid #ffd9d9;
}

.single-post-redesign .author-box-avatar {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.single-post-redesign .author-box-info {
    min-width: 0;
}

.single-post-redesign .author-box-name {
    margin: 0 0 10px;
    font-size: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.single-post-redesign .author-box-name a {
    color: #111827;
}

.single-post-redesign .author-box-bio {
    color: #4b5563;
    margin-bottom: 12px;
}

.single-post-redesign .author-box-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 10px;
    color: #475467;
    font-size: 14px;
}

.single-post-redesign .author-box-stats i {
    color: #c00;
    margin-right: 5px;
}

.single-post-redesign .author-box-social {
    display: flex;
    gap: 9px;
    margin-bottom: 12px;
}

.single-post-redesign .author-box-social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    color: #475467;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.single-post-redesign .author-box-social a:hover {
    color: #c00;
    border-color: #f2b9b9;
    background: #fff5f5;
}

.single-post-redesign .author-box-social svg {
    width: 16px;
    height: 16px;
}

.single-post-redesign .author-box-more {
    color: #c00;
    font-weight: 700;
    font-size: 14px;
}

.single-post-redesign .follow-btn {
    font-size: 12px;
    border-radius: 999px;
    padding: 4px 10px;
}

.single-post-redesign .sponsored-badge {
    margin: 12px 0 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.single-post-redesign .sponsor-info {
    font-size: 13px;
    color: #667085;
}

.single-post-redesign .paywall-overlay {
    margin-top: -90px;
    padding-top: 90px;
    background: linear-gradient(transparent, #ffffff 52%);
}

.single-post-redesign .paywall-content {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-top: 16px;
}

.single-post-redesign .related-posts {
    border: 1px solid #e5ebf2;
}

.single-post-redesign .related-title {
    font-family: var(--font-headline);
    font-size: 30px;
    line-height: 1.25;
    margin-bottom: 16px;
    padding-left: 12px;
    border-left: 4px solid #c00;
    color: #111827;
}

.single-post-redesign .related-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.single-post-redesign .article-sidebar-column .sidebar {
    position: sticky;
    top: 104px;
}

.single-post-redesign .article-sidebar-column .sidebar-section {
    border: 1px solid #e5ebf2;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(18, 38, 63, 0.06);
    background: #ffffff;
    overflow: hidden;
}

.single-post-redesign .article-sidebar-column .sidebar-title {
    margin: 0;
    padding: 12px 14px;
    border-bottom: 1px solid #edf1f7;
    background: linear-gradient(135deg, #fff8f8 0%, #ffffff 100%);
    color: #111827;
    font-family: var(--font-headline);
    font-size: 18px;
}

.single-post-redesign .article-sidebar-column .title-icon {
    color: #c00;
}

.single-post-redesign .article-sidebar-column .most-read-list {
    margin: 0;
    padding: 10px 12px 12px;
}

.single-post-redesign .article-sidebar-column .most-read-item {
    border-bottom: 1px solid #edf1f7;
}

.single-post-redesign .article-sidebar-column .most-read-item:last-child {
    border-bottom: none;
}

.single-post-redesign .article-sidebar-column .most-read-link {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 8px 2px;
}

.single-post-redesign .article-sidebar-column .most-read-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #c00;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-top: 2px;
}

.single-post-redesign .article-sidebar-column .most-read-title {
    color: #111827;
    font-size: 14px;
    line-height: 1.45;
    margin: 0;
}

.single-post-redesign .article-sidebar-column .most-read-link:hover .most-read-title {
    color: #c00;
}

.single-post-redesign .article-sidebar-column .most-read-meta {
    margin-top: 4px;
    color: #6b7280;
    font-size: 12px;
}

.single-post-redesign .article-sidebar-column .sidebar-newsletter .newsletter-box {
    margin: 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, #c70000 0%, #930000 100%);
    color: #fff;
    padding: 16px;
    overflow: hidden;
}

.single-post-redesign .article-sidebar-column .sidebar-newsletter .newsletter-form {
    display: block;
    width: 100%;
}

.single-post-redesign .article-sidebar-column .sidebar-newsletter .newsletter-input-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    gap: 8px;
    width: 100%;
    align-items: stretch;
}

.single-post-redesign .article-sidebar-column .sidebar-newsletter .newsletter-title,
.single-post-redesign .article-sidebar-column .sidebar-newsletter .newsletter-desc {
    color: #fff;
    margin-bottom: 8px;
}

.single-post-redesign .article-sidebar-column .sidebar-newsletter .newsletter-title {
    font-size: 20px;
    line-height: 1.3;
}

.single-post-redesign .article-sidebar-column .sidebar-newsletter .newsletter-desc {
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.95;
}

.single-post-redesign .article-sidebar-column .sidebar-newsletter .newsletter-input {
    border: 1px solid #ffd2d2;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border-radius: 8px;
    border-right: 1px solid #ffd2d2;
    padding: 10px 12px;
    font-size: 14px;
    box-sizing: border-box;
}

.single-post-redesign .article-sidebar-column .sidebar-newsletter .newsletter-submit {
    background: #ffffff;
    color: #9d0000;
    border-radius: 8px;
    width: 46px;
    min-width: 46px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.single-post-redesign .article-sidebar-column .sidebar-newsletter .newsletter-submit:hover {
    background: #fff5f5;
}

.single-post-redesign .article-sidebar-column .sidebar-newsletter .newsletter-submit svg {
    width: 18px;
    height: 18px;
}

.single-post-redesign .article-sidebar-column .sidebar-live .sidebar-title {
    background: linear-gradient(135deg, #fff0f0 0%, #ffe4e4 100%);
    color: #9d0000;
}

.single-post-redesign .article-sidebar-column .sidebar-weather .weather-main,
.single-post-redesign .article-sidebar-column .sidebar-horoscope .horoscope-widget {
    padding: 12px;
}

@media (max-width: 1199px) {
    .single-post-redesign .post-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .single-post-redesign .post-actions {
        justify-self: start;
    }

    .single-post-redesign .single-content-grid {
        grid-template-columns: minmax(0, 1fr) 310px;
    }
}

@media (max-width: 991px) {
    .single-post-redesign {
        padding-top: 10px;
    }

    .single-post-redesign .post-header {
        padding: 22px;
    }

    .single-post-redesign .post-title {
        font-size: clamp(26px, 5.4vw, 38px);
    }

    .single-post-redesign .post-excerpt {
        font-size: 18px;
    }

    .single-post-redesign .single-content-grid {
        grid-template-columns: 1fr;
    }

    .single-post-redesign .article-sidebar-column .sidebar {
        position: static;
    }
}

@media (max-width: 767px) {
    .single-post-redesign .post-header {
        padding: 18px;
        border-radius: 12px;
    }

    .single-post-redesign .post-title {
        line-height: 1.28;
        margin-top: 10px;
    }

    .single-post-redesign .post-meta {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .single-post-redesign .post-stats {
        flex-wrap: wrap;
        white-space: normal;
    }

    .single-post-redesign .post-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .single-post-redesign .article-main-column > * {
        padding: 16px;
        border-radius: 12px;
    }

    .single-post-redesign .post-content {
        font-size: 17px;
        line-height: 1.86;
    }

    .single-post-redesign .post-content h2 {
        font-size: 25px;
    }

    .single-post-redesign .post-content h3 {
        font-size: 21px;
    }

    .single-post-redesign .author-box {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .single-post-redesign .author-box-avatar {
        width: 76px;
        height: 76px;
    }

    .single-post-redesign .related-title {
        font-size: 24px;
    }

    .single-post-redesign .related-grid {
        grid-template-columns: 1fr;
    }

    .single-post-redesign .article-sidebar-column .sidebar-newsletter .newsletter-input-group {
        grid-template-columns: 1fr;
    }

    .single-post-redesign .article-sidebar-column .sidebar-newsletter .newsletter-submit {
        width: 100%;
        min-height: 40px;
    }
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Rating functionality
    const ratingContainer = document.querySelector('.rating-container');
    if (ratingContainer) {
        const stars = ratingContainer.querySelectorAll('.star');
        const postId = ratingContainer.dataset.postId;
        let currentRating = 0;

        stars.forEach(star => {
            star.addEventListener('mouseenter', function() {
                const rating = this.dataset.rating;
                highlightStars(rating);
            });

            star.addEventListener('mouseleave', function() {
                highlightStars(currentRating);
            });

            star.addEventListener('click', function() {
                const rating = this.dataset.rating;
                submitRating(postId, rating);
            });
        });

        function highlightStars(rating) {
            stars.forEach(star => {
                const starRating = star.dataset.rating;
                if (starRating <= rating) {
                    star.innerHTML = '<i class="fas fa-star"></i>';
                } else {
                    star.innerHTML = '<i class="far fa-star"></i>';
                }
            });
        }

        function submitRating(postId, rating) {
            fetch(`/rate/${postId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({ rating: rating })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    currentRating = rating;
                    highlightStars(rating);
                    ratingContainer.querySelector('.average-rating').textContent = data.average;
                    ratingContainer.querySelector('.total-ratings').textContent = data.total;
                    alert('ধন্যবাদ! আপনার রেটিং সংরক্ষিত হয়েছে।');
                }
            });
        }
    }

    const pollForm = document.querySelector('.poll-form');
    if (pollForm) {
        pollForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const pollId = this.dataset.pollId;
            const optionId = this.querySelector('input[name="poll_option"]:checked')?.value;

            if (!optionId) {
                alert('অনুগ্রহ করে একটি অপশন নির্বাচন করুন।');
                return;
            }

            fetch('/poll/vote', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({ poll_id: pollId, option_id: optionId })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else if (data.error) {
                    alert(data.error);
                }
            });
        });
    }

    const followBtn = document.querySelector('.follow-btn');
    if (followBtn) {
        followBtn.addEventListener('click', function() {
            const authorId = this.dataset.authorId;
            
            fetch(`/author/${authorId}/follow`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    if (data.following) {
                        followBtn.textContent = 'অনুসরণ করছেন';
                        followBtn.classList.remove('btn-outline-primary');
                        followBtn.classList.add('btn-primary');
                    } else {
                        followBtn.textContent = 'অনুসরণ করুন';
                        followBtn.classList.remove('btn-primary');
                        followBtn.classList.add('btn-outline-primary');
                    }
                    const followersCountEl = document.querySelector('.followers-count');
                    if (followersCountEl) {
                        followersCountEl.innerHTML = '<i class="fas fa-users"></i> ' + data.followers_count + ' অনুসারী';
                    }
                } else if (data.error) {
                    alert(data.error);
                }
            });
        });
    }
});
</script>

<style>
.reading-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #f0f0f0;
    z-index: 9999;
}

.reading-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #c00, #ff4444);
    width: 0%;
    transition: width 0.1s ease;
}
</style>

<script>
window.addEventListener('scroll', function() {
    const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    const scrolled = (winScroll / height) * 100;
    const progressBar = document.getElementById('readingProgress');
    if (progressBar) {
        progressBar.style.width = scrolled + '%';
    }
});
</script>
@endpush