@extends('site.layouts.master')

@section('seoTags')
    @seoTags()
@endsection

@php
    $seo = SEO\Models\Page::where('path', URL::full())->first();

    $tagTranslations = [
        'Investment & Markets' => 'الاستثمار والأسواق',
        'Projects & Opportunities' => 'المشروعات والفرص',
        'Areas & Cities' => 'المناطق والمدن',
        'Real Estate Guide' => 'الدليل العقاري',
        'Future of Real Estate' => 'مستقبل العقارات',
    ];
@endphp

@section('metatags')
    @if(empty($seo->title))
        @section('title')
            <title>{{ $blog->title }}</title>
        @endsection
    @endif

    @if(!empty($seo))
        <meta name="title" content="{{ $seo->meta_title ?? $seo->title }}">
        <meta name="keywords" content="{{ $seo->meta_keywords }}">
        <meta name="description" content="{{ $seo->description ?? '' }}">
        <meta name="og:title" content="{{ $seo->meta_title ?? ($seo->title ?? 'RE/MAX ALMOHAGER ريـ/ـماكس المهاجر') }}">
        <meta name="og:keywords" content="{{ $seo->meta_keywords }}">
        <meta name="og:description" content="{{ $seo->description ?? 'RE/MAX ALMOHAGER ريـ/ـماكس المهاجر' }}">
    @else
        <meta name="title" content="{{ $blog->title }}">
        <meta name="og:title" content="{{ $blog->title }}">
        <meta name="description" content="{{ $blog->title }}">
        <meta name="og:description" content="{{ $blog->title }}">
    @endif

    <link rel="canonical" href="{{ str_replace('public/', '', url()->current()) }}">

    <link rel="alternate"
          hreflang="{{ app()->getLocale() == 'ar' ? 'en' : 'ar' }}"
          href="@if(app()->getLocale() == 'en' && str_contains(url()->current(), '/en/')){{ 'https://nileestate.com/ar/blogs/' . $blog->slug_ar }}@else{{ 'https://nileestate.com/en/blogs/' . $blog->slug_en }}@endif">

    <link rel="alternate"
          hreflang="{{ app()->getLocale() }}"
          href="{{ str_replace('public/', '', url()->current()) }}">
@endsection

@section('content')
    <div class="d-none">
        {{ Breadcrumbs::render('blog', $blog) }}
    </div>

    {!! $breadcrumbSchema !!}
    {!! $blogPostSchema !!}

    <main class="article-design-page">
        <div class="reading-progress">
    <div class="reading-progress-bar" id="readingProgress"></div>
</div>
        <div class="article-container">

            <nav class="article-breadcrumb" aria-label="Breadcrumb">
                <a href="{{ url('/') }}">
                    {{ app()->getLocale() === 'ar' ? 'الرئيسية' : 'Home' }}
                </a>

                <span>›</span>

                <a href="{{ route('blogs.index') }}">
                    {{ app()->getLocale() === 'ar' ? 'المدونة' : 'Blog' }}
                </a>

                <span>›</span>
                <span class="current">{{ $blog->title }}</span>
            </nav>

            <header class="article-header">
                @php
                    $articleTag = null;

                    if(isset($blog->tags) && $blog->tags->count()) {
                        $articleTag = $blog->tags->first()->name ?? null;
                    }

                    $displayArticleTag = $articleTag && app()->getLocale() === 'ar'
                        ? ($tagTranslations[$articleTag] ?? $articleTag)
                        : $articleTag;
                @endphp

                @if($displayArticleTag)
                    <a href="{{ route('blogs.index', ['tag' => $articleTag]) }}"
                       class="article-top-tag">
                        <svg width="12" height="12" viewBox="0 0 24 24"
                             fill="none" stroke="currentColor" stroke-width="2.5">
                            <path d="M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82Z"/>
                            <line x1="7" y1="7" x2="7.01" y2="7"/>
                        </svg>

                        {{ $displayArticleTag }}
                    </a>
                @endif

                <h1>{{ $blog->title }}</h1>

                <div class="article-meta-bar">
                    <div class="meta-author">
                        <div class="author-avatar">NE</div>

                        <div class="author-info">
                            <strong>Nileestate</strong>
                            <span>
                                {{ app()->getLocale() === 'ar'
                                    ? 'المحرر العقاري'
                                    : 'Real Estate Editor' }}
                            </span>
                        </div>
                    </div>

                    <span class="meta-sep"></span>

                    <div class="meta-item">
                        <svg width="15" height="15" viewBox="0 0 24 24"
                             fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="3" y="4" width="18" height="18" rx="2"/>
                            <line x1="16" y1="2" x2="16" y2="6"/>
                            <line x1="8" y1="2" x2="8" y2="6"/>
                            <line x1="3" y1="10" x2="21" y2="10"/>
                        </svg>

                        {{ \Carbon\Carbon::parse($blog->created_at)
                            ->locale(app()->getLocale())
                            ->translatedFormat('j F Y') }}
                    </div>

                    <span class="meta-sep"></span>

                    <div class="meta-item">
                        <svg width="15" height="15" 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"/>
                            <circle cx="12" cy="12" r="3"/>
                        </svg>

                        {{ number_format($blog->views ?? 0) }}
                        {{ app()->getLocale() === 'ar' ? 'مشاهدة' : 'Views' }}
                    </div>

                    <span class="meta-sep"></span>

                    <div class="meta-item">
                        <svg width="15" height="15" viewBox="0 0 24 24"
                             fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                        </svg>

                        {{ $blog->comments()->count() }}
                        {{ app()->getLocale() === 'ar' ? 'تعليقات' : 'Comments' }}
                    </div>

                    <div class="share-bar">
                        <span class="share-label">
                            {{ app()->getLocale() === 'ar' ? 'شارك:' : 'Share:' }}
                        </span>

                        <a href="https://wa.me/201222126844?text={{ urlencode($blog->title . ' ' . url()->current()) }}"
                           target="_blank"
                           rel="noopener"
                           class="share-btn wa"
                           aria-label="WhatsApp">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z"/>
                            </svg>
                        </a>

                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}"
                           target="_blank"
                           rel="noopener"
                           class="share-btn"
                           aria-label="Facebook">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M24 12.073c0-6.627-5.373-12-12-12S0 5.446 0 12.073c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                            </svg>
                        </a>

                        <button type="button"
                                class="share-btn"
                                id="copyArticleLink"
                                aria-label="Copy link">
                            <svg width="16" height="16" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2">
                                <rect x="9" y="9" width="13" height="13" rx="2"/>
                                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </header>

            <div class="article-layout">
                <article class="article-content" id="articleContent">
                    @if($blog->image && $blog->image->full_url)
                        <div class="hero-image">
                            <img src="{{ $blog->image->full_url }}"
                                 alt="{{ $blog->title }}">
                        </div>
                    @endif

                    <div id="blogContent">
                        {!! $content !!}
                    </div>

                    <footer class="article-footer">
                        <div class="article-footer-title">
                            {{ app()->getLocale() === 'ar'
                                ? 'شارك المقال'
                                : 'Share this article' }}
                        </div>

                        <div class="share-row">
                            <a href="https://wa.me/201222126844?text={{ urlencode($blog->title . ' ' . url()->current()) }}"
                               target="_blank"
                               rel="noopener"
                               class="share-pill wa">
                                WhatsApp
                            </a>

                            <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}"
                               target="_blank"
                               rel="noopener"
                               class="share-pill fb">
                                Facebook
                            </a>

                            <button type="button"
                                    class="share-pill copy"
                                    id="copyArticleLinkBottom">
                                {{ app()->getLocale() === 'ar'
                                    ? 'نسخ الرابط'
                                    : 'Copy link' }}
                            </button>
                        </div>
                    </footer>
                </article>

                <aside class="article-sidebar">
                    @if(!empty($toc))
                        <div class="toc-card">
                            <div class="toc-head">
                                <span class="toc-head-icon">
                                    <svg width="15" height="15" viewBox="0 0 24 24"
                                         fill="none" stroke="currentColor" stroke-width="2">
                                        <line x1="8" y1="6" x2="21" y2="6"/>
                                        <line x1="8" y1="12" x2="21" y2="12"/>
                                        <line x1="8" y1="18" x2="21" y2="18"/>
                                        <line x1="3" y1="6" x2="3.01" y2="6"/>
                                        <line x1="3" y1="12" x2="3.01" y2="12"/>
                                        <line x1="3" y1="18" x2="3.01" y2="18"/>
                                    </svg>
                                </span>

                                {{ app()->getLocale() === 'ar'
                                    ? 'محتويات المقال'
                                    : 'Article contents' }}
                            </div>

                            <div class="toc-box">
                                {!! $toc !!}
                            </div>
                        </div>
                    @endif



                    <!-- @if(!empty($recent_blogs) && count($recent_blogs))
                        <div class="sidebar-card">
                            <div class="sidebar-head">
                                <span class="sidebar-head-icon">
                                    <svg width="15" height="15" viewBox="0 0 24 24"
                                         fill="none" stroke="currentColor" stroke-width="2">
                                        <circle cx="12" cy="12" r="10"/>
                                        <polyline points="12 6 12 12 16 14"/>
                                    </svg>
                                </span>

                                @lang('site.blog_recent')
                            </div>

                            <div class="recent-list">
                                @foreach($recent_blogs as $recent_blog)
                                    <a href="{{ route('blogs.show', $recent_blog->slug) }}"
                                       class="recent-item">

                                        @if($recent_blog->image && $recent_blog->image->full_url)
                                            <div class="recent-img">
                                                <img src="{{ $recent_blog->image->full_url }}"
                                                     alt="{{ $recent_blog->title }}"
                                                     loading="lazy">
                                            </div>
                                        @endif

                                        <div class="recent-info">
                                            <h4>{{ $recent_blog->title }}</h4>
                                            <span>
                                                {{ \Carbon\Carbon::parse($recent_blog->created_at)
                                                    ->locale(app()->getLocale())
                                                    ->translatedFormat('j F Y') }}
                                            </span>
                                        </div>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    @endif -->

                    @if(!empty($tags))
                        <div class="sidebar-card">
                            <div class="sidebar-head">
                                <span class="sidebar-head-icon">
                                    <svg width="15" height="15" viewBox="0 0 24 24"
                                         fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82Z"/>
                                        <line x1="7" y1="7" x2="7.01" y2="7"/>
                                    </svg>
                                </span>

                                @lang('site.Popular Tags')
                            </div>

                            <div class="sidebar-tags">
                                @foreach($tags as $tag)
                                    @php
                                        $tag = trim($tag);
                                        $displayTag = app()->getLocale() === 'ar'
                                            ? ($tagTranslations[$tag] ?? $tag)
                                            : $tag;
                                    @endphp

                                    <a href="{{ route('blogs.index', ['tag' => $tag]) }}"
                                       class="s-tag-btn">
                                        {{ $displayTag }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    @endif

                      <div class="sidebar-contact">
                        <h4>
                            {{ app()->getLocale() === 'ar'
                                ? 'هل تبحث عن عقار؟'
                                : 'Looking for a property?' }}
                        </h4>

                        <p>
                            {{ app()->getLocale() === 'ar'
                                ? 'تواصل مع فريق ريـ/ماكس المهاجر لمساعدتك في إيجاد العقار المناسب.'
                                : 'Contact the RE/MAX Almohager team to help you find the right property.' }}
                        </p>

                        <div class="contact-btns">
                            <a href="https://wa.me/201222126844"
                               target="_blank"
                               rel="noopener"
                               class="contact-btn wa">
                                WhatsApp
                            </a>

                            <a href="tel:+201222126844"
                               class="contact-btn phone">
                                +20 122 212 6844
                            </a>
                        </div>
                    </div>
                </aside>
            </div>

            <section class="related-section">

    <div class="related-head">
        <h2 class="related-title">
            {{ app()->getLocale() == 'ar' ? 'مقالات ذات صلة' : 'Related Articles' }}
        </h2>

        <a href="{{ route('blogs.index') }}" class="related-link">
            {{ app()->getLocale() == 'ar' ? 'عرض الكل' : 'View all' }}
        </a>
    </div>

    <div class="related-grid">

        @foreach($relatedBlogs as $related)

            @php
                $relatedTag = optional($related->tags->first())->name;
                $displayTag = app()->getLocale() == 'ar'
                    ? ($tagTranslations[$relatedTag] ?? $relatedTag)
                    : $relatedTag;
            @endphp

            <a href="{{ route('blogs.show',$related->slug) }}" class="related-card">

                <div class="related-img">

                    @if($related->image && $related->image->full_url)
                        <img
                            src="{{ $related->image->full_url }}"
                            alt="{{ $related->title }}">
                    @endif

                    @if($displayTag)
                        <span class="related-tag">
                            {{ $displayTag }}
                        </span>
                    @endif

                </div>

                <div class="related-body">

                    <h3>{{ $related->title }}</h3>

                    <div class="related-footer">

                        <span>
                            {{ \Carbon\Carbon::parse($related->created_at)
                                ->locale(app()->getLocale())
                                ->translatedFormat('j F Y') }}
                        </span>

                        <span class="related-read">
                            {{ app()->getLocale()=='ar'
                                ? 'اقرأ المزيد'
                                : 'Read more' }}
                        </span>

                    </div>

                </div>

            </a>

        @endforeach

    </div>

</section>

            <!-- <section class="comments-area">
                <h2>@lang('site.Leave Comment')</h2>

                @if(!empty(session()->get('y')))
                    <div class="alert alert-danger text-center showValidationErrors2">
                        {{ session()->get('y') }}
                    </div>
                @endif

                <form action="{{ route('blogs.comment', $blog->id) }}"
                      method="POST"
                      enctype="multipart/form-data"
                      class="comment-form">
                    @csrf

                    <input type="hidden" id="gtokenComment" name="gToken">

                    <div class="comment-fields">
                        <input type="text"
                               required
                               name="name"
                               class="form-control blogplaceholder"
                               placeholder="@lang('site.Full_Name')">

                        <input type="text"
                               required
                               name="phone"
                               class="form-control blogplaceholder"
                               placeholder="@lang('hr.Mobile_Number')">

                        <input type="email"
                               required
                               name="email"
                               class="form-control blogplaceholder"
                               placeholder="@lang('site.Email_Address')">

                        <input type="text"
                               required
                               name="subject"
                               class="form-control blogplaceholder"
                               placeholder="@lang('site.Subject')">
                    </div>

                    <textarea class="form-control blogplaceholder"
                              required
                              rows="7"
                              name="message"
                              placeholder="@lang('site.Your comment and feedback are very important to us')"></textarea>

                    <a onclick="Captcha('gtokenComment')"
                       class="comment-submit-btn">
                        @lang('site.comment_submit')
                    </a>

                    <button hidden
                            type="submit"
                            id="doSubmitWithCaptchagtokenComment"></button>
                </form>

                @if($blog->getApprovedComments()->count() > 0)
                    <div class="comments-section">
                        <h2 class="comments-title">@lang('site.blog_comments')</h2>

                        <ul class="comments-list">
                            @foreach($blog->getApprovedComments() as $comment)
                                <li class="comment-card">
                                    <div class="comment-avatar">
                                        {{ mb_substr($comment->writer->name, 0, 1) }}
                                    </div>

                                    <div class="comment-details">
                                        <strong>{{ $comment->writer->name }}</strong>
                                        <p>{{ $comment->content }}</p>
                                        <span>{{ $comment->created_at->format('H:i A m/d/Y') }}</span>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </section> -->
        </div>
    </main>
@endsection

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap"
      rel="stylesheet">

<style>

/* ========= RELATED ARTICLES ========= */
.related-section {
    padding: 56px 0 72px;
    border-top: 1px solid var(--line);
}

.related-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.related-title {
    font-size: 22px;
    font-weight: 900;
    color: var(--navy);
    letter-spacing: -.04em;
}

.related-link {
    color: var(--blue);
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 6px;
}

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

.related-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    transition: .22s;
}

.related-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft);
}

.related-img {
    height: 180px;
    overflow: hidden;
    background: linear-gradient(135deg, #dcecff, #eaf3ff);
    position: relative;
}

.related-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: .4s;
}

.related-card:hover .related-img img {
    transform: scale(1.06);
}

.related-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 11px;
    font-weight: 800;
    color: var(--navy);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(229,234,240,.8);
    padding: 4px 10px;
    border-radius: 999px;
}

.related-body {
    padding: 18px;
}

.related-body h3 {
    font-size: 15px;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -.02em;
    line-height: 1.4;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--muted);
    font-weight: 700;
}

.related-read {
    color: var(--blue);
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 4px;
}

@media (max-width: 1024px) {
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .related-section {
        padding: 36px 0 48px;
    }
}

.article-design-page{
    --bg:#f7f9fc;
    --surface:#fff;
    --navy:#102f4f;
    --blue:#1f5fa8;
    --sky:#eaf3ff;
    --orange:#d9822b;
    --text:#1f2937;
    --muted:#667085;
    --line:#e5eaf0;
    --radius:24px;
    background:var(--bg);
    color:var(--text);
    padding-bottom:72px;
    font-family:"Cairo","Noto Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
}

.article-design-page *,
.article-design-page *::before,
.article-design-page *::after{box-sizing:border-box}

.article-design-page a{text-decoration:none}

.article-container{
    width:min(1220px,calc(100% - 40px));
    margin-inline:auto;
}

.article-breadcrumb{
    display:flex;
    align-items:center;
    gap:8px;
    padding:18px 0 0;
    color:var(--muted);
    font-size:13px;
    font-weight:700;
}

.article-breadcrumb a{color:var(--muted)}
.article-breadcrumb a:hover{color:var(--blue)}
.article-breadcrumb .current{color:var(--navy)}

.article-header{padding:28px 0 0}

.article-top-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:18px;
    padding:6px 14px;
    border-radius:999px;
    background:var(--sky);
    color:var(--blue);
    font-size:12px;
    font-weight:800;
}

.article-header h1{
    max-width:900px;
    margin:0 0 20px;
    color:var(--navy);
    font-size:clamp(28px,3.6vw,46px);
    font-weight:900;
    letter-spacing:-.04em;
    line-height:1.25;
}

.article-meta-bar{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
    margin-bottom:28px;
    padding:16px 20px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
}

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

.author-avatar{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    flex-shrink:0;
    border-radius:50%;
    background:linear-gradient(135deg,var(--navy),var(--blue));
    color:#fff;
    font-size:13px;
    font-weight:900;
}

.author-info strong{
    display:block;
    color:var(--navy);
    font-size:13px;
    font-weight:800;
}

.author-info span{color:var(--muted);font-size:12px}

.meta-sep{width:1px;height:32px;background:var(--line)}

.meta-item{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--muted);
    font-size:13px;
    font-weight:700;
}

.meta-item svg{color:var(--blue);opacity:.7;flex-shrink:0}

.share-bar{
    display:flex;
    align-items:center;
    gap:8px;
    margin-inline-start:auto;
}

.share-label{color:var(--muted);font-size:12px;font-weight:700}

.share-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    padding:0;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    color:var(--navy);
    cursor:pointer;
}

.share-btn:hover{border-color:var(--blue);background:var(--sky);color:var(--blue)}
.share-btn.wa{border-color:#25d366;background:#25d366;color:#fff}

.article-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:40px;
    align-items:start;
}

.article-content{
    overflow:hidden;
    padding:40px 44px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:#fff;
    box-shadow:0 4px 16px rgba(16,47,79,.04);
}

.hero-image{
    width:calc(100% + 88px);
    margin:-40px -44px 32px;
    overflow:hidden;
    aspect-ratio:16/9;
    border-radius:var(--radius) var(--radius) 0 0;
    background:var(--sky);
}

.hero-image img{display:block;width:100%;height:100%;object-fit:cover}

#blogContent p{
    margin:0 0 22px;
    color:#374151;
    font-size:17px;
    line-height:1.9;
}

#blogContent h2{
    margin:36px 0 16px;
    padding-inline-start:16px;
    border-inline-start:4px solid var(--blue);
    color:var(--navy);
    font-size:clamp(20px,2.2vw,26px);
    font-weight:900;
    line-height:1.3;
}

#blogContent h3{
    margin:28px 0 12px;
    color:var(--navy);
    font-size:20px;
    font-weight:800;
}

.reading-progress{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:transparent;
    z-index:99999;
    pointer-events:none;
}

.reading-progress-bar{
    width:0%;
    height:100%;
    background:#1f5fa8;
    transition:width .08s linear;
}

#blogContent ul,
#blogContent ol{
    margin:0 0 22px;
    padding-inline-start:24px;
}

#blogContent li{
    margin-bottom:8px;
    color:#374151;
    font-size:16px;
    line-height:1.8;
}

#blogContent li::marker{color:var(--blue);font-weight:900}

#blogContent strong{color:var(--navy);font-weight:800}

#blogContent img{
    display:block;
    width:100% !important;
    height:auto !important;
    margin:24px 0 !important;
    border:1px solid var(--line);
    border-radius:18px;
    object-fit:contain !important;
}

#blogContent table{
    display:block;
    width:100%;
    max-width:100%;
    margin:24px 0;
    overflow-x:auto;
    border-collapse:collapse;
}

#blogContent th{
    padding:12px 16px;
    background:var(--navy);
    color:#fff;
    text-align:start;
    font-size:13px;
    font-weight:800;
}

#blogContent td{
    padding:12px 16px;
    border-bottom:1px solid var(--line);
}

#blogContent a{
    color:var(--blue);
    text-decoration:underline;
    text-decoration-color:rgba(31,95,168,.3);
}

.article-footer{
    margin-top:36px;
    padding-top:28px;
    border-top:1px solid var(--line);
}

.article-footer-title{
    margin-bottom:14px;
    color:var(--muted);
    font-size:13px;
    font-weight:800;
}

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

.share-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border:0;
    border-radius:999px;
    font:inherit;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
}

.share-pill.wa{background:#25d366;color:#fff}
.share-pill.fb{background:#1877f2;color:#fff}
.share-pill.copy{border:1px solid var(--line);background:#fff;color:var(--navy)}

.article-sidebar{
    position:sticky;
    top:100px;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.toc-card,
.sidebar-card{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:#fff;
}

.toc-head,
.sidebar-head{
    display:flex;
    align-items:center;
    gap:10px;
    padding:16px 20px;
    border-bottom:1px solid var(--line);
    color:var(--navy);
    font-size:14px;
    font-weight:900;
}

.toc-head{background:#fafbfc}

.toc-head-icon,
.sidebar-head-icon{
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    flex-shrink:0;
    border-radius:9px;
    background:var(--sky);
    color:var(--blue);
}

.toc-box{
    padding:10px 12px !important;
}

.toc-box button,
.toc-box .btn,
.toc-box [role="button"],
.toc-box .toc-button,
.toc-box .toc_toggle,
.toc-box .toc-toggle,
.toc-box .ez-toc-toggle,
.toc-box .lwptoc_toggle{
    display:none !important;
}

.toc-box .collapse,
.toc-box .collapsed,
.toc-box .toc-list,
.toc-box .toc-list-wrapper,
.toc-box .ez-toc-list,
.toc-box .ez-toc-list-level-1,
.toc-box .lwptoc_items,
.toc-box [class*="collapse"]{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
}

.toc-box ul,
.toc-box ol{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
}

.toc-box li{
    display:block !important;
    position:relative !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
}

.toc-box li::before{
    display:none !important;
}

.toc-box a{
    display:flex !important;
    align-items:flex-start !important;
    gap:10px !important;
    width:100% !important;
    padding:8px 10px !important;
    border-radius:10px !important;
    background:transparent !important;
    color:#344054 !important;
    font-size:13px !important;
    font-weight:700 !important;
    line-height:1.4 !important;
    text-decoration:none !important;
    transition:.15s !important;
}

.toc-box a::before{
    content:"" !important;
    display:block !important;
    width:7px !important;
    height:7px !important;
    flex:0 0 7px !important;
    margin-top:5px !important;
    border-radius:50% !important;
    background:#e5eaf0 !important;
    transition:.15s !important;
}

.toc-box a:hover,
.toc-box a.toc-active,
.toc-box a.active,
.toc-box li.active > a{
    background:#eaf3ff !important;
    color:#1f5fa8 !important;
}

.toc-box a:hover::before,
.toc-box a.toc-active::before,
.toc-box a.active::before,
.toc-box li.active > a::before{
    background:#1f5fa8 !important;
}

.toc-box .collapse,
.toc-box .collapsed,
.toc-box .toc-list,
.toc-box .toc-list-wrapper,
.toc-box .ez-toc-list,
.toc-box .ez-toc-list-level-1,
.toc-box .lwptoc_items,
.toc-box [class*="collapse"]{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
}

.toc-box .collapse:not(.show){
    display:block !important;
}

.toc-box > div{
    visibility:visible !important;
    opacity:1 !important;
    height:auto !important;
    max-height:none !important;
}

.sidebar-contact{
    padding:22px;
    border-radius:var(--radius);
    background:linear-gradient(135deg,var(--navy),#1f5fa8);
    color:#fff;
}

.sidebar-contact h4{margin:0 0 6px;font-size:16px;font-weight:900}

.sidebar-contact p{
    margin:0 0 16px;
    color:rgba(255,255,255,.72);
    font-size:13px;
    line-height:1.6;
}

.contact-btns{display:flex;flex-direction:column;gap:8px}

.contact-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:12px 16px;
    border-radius:14px;
    font-size:13px;
    font-weight:800;
}

.contact-btn.wa{background:#25d366;color:#fff}
.contact-btn.phone{
    border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.15);
    color:#fff;
}

.recent-list{padding:8px}

.recent-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px;
    border-radius:12px;
}

.recent-item:hover{background:var(--bg)}

.recent-img{
    width:60px;
    height:60px;
    flex:0 0 60px;
    overflow:hidden;
    border-radius:10px;
    background:var(--sky);
}

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

.recent-info{min-width:0}

.recent-info h4{
    display:-webkit-box;
    overflow:hidden;
    margin:0 0 5px;
    color:var(--navy);
    font-size:12px;
    font-weight:800;
    line-height:1.4;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.recent-info span{color:var(--muted);font-size:11px;font-weight:700}

.sidebar-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:14px;
}

.s-tag-btn{
    padding:7px 14px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
    color:#344054;
    font-size:12px;
    font-weight:700;
}

.s-tag-btn:hover{border-color:var(--blue);background:var(--sky);color:var(--blue)}

.comments-area{
    margin-top:40px;
    padding:32px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:#fff;
}

.comments-area > h2,
.comments-title{
    margin:0 0 22px;
    color:var(--navy);
    font-size:22px;
    font-weight:900;
}

.comment-form{display:flex;flex-direction:column;gap:14px}

.comment-fields{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.comment-form .form-control{
    width:100%;
    min-height:50px;
    padding:13px 15px;
    border:1px solid var(--line);
    border-radius:14px;
    outline:0;
    background:#fff;
    font:inherit;
}

.comment-form textarea.form-control{min-height:150px;resize:vertical}

.comment-form .form-control:focus{border-color:var(--blue)}

.comment-submit-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    align-self:flex-start;
    min-width:170px;
    min-height:48px;
    padding:10px 22px;
    border-radius:999px;
    background:var(--orange);
    color:#fff !important;
    font-weight:800;
    cursor:pointer;
}

.comments-section{margin-top:36px}

.comments-list{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin:0;
    padding:0;
    list-style:none;
}

.comment-card{
    display:flex;
    gap:14px;
    padding:18px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fafbfc;
}

.comment-avatar{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    flex:0 0 42px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--navy),var(--blue));
    color:#fff;
    font-weight:900;
}

.comment-details strong{color:var(--navy)}

.comment-details p{margin:6px 0;color:#374151}

.comment-details span{color:var(--muted);font-size:12px}

@media(max-width:1024px){
    .article-layout{grid-template-columns:1fr}
    .article-sidebar{position:static}
}

@media(max-width:720px){
    .article-container{width:calc(100% - 24px)}
    .article-header h1{font-size:28px}
    .article-meta-bar{gap:12px}
    .meta-sep{display:none}
    .share-bar{width:100%;margin:0}
    .article-content{padding:24px 20px}
    .hero-image{
        width:calc(100% + 40px);
        margin:-24px -20px 24px;
    }
    #blogContent p{font-size:15px}
    .comments-area{padding:22px 18px}
    .comment-fields{grid-template-columns:1fr}
    .comment-submit-btn{width:100%}
}
</style>

@section('script')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const tocLinks = document.querySelectorAll('.toc-box a[href^="#"]');

    const progress = document.getElementById("readingProgress");

function updateReadingProgress() {
    const article = document.getElementById("articleContent");
    if (!article || !progress) return;

    const rect = article.getBoundingClientRect();
    const articleTop = window.scrollY + rect.top;
    const articleHeight = article.offsetHeight;
    const viewport = window.innerHeight;

    const percent = Math.min(
        100,
        Math.max(
            0,
            ((window.scrollY - articleTop) / (articleHeight - viewport)) * 100
        )
    );

    progress.style.width = percent + "%";
}

window.addEventListener("scroll", updateReadingProgress);
window.addEventListener("resize", updateReadingProgress);
updateReadingProgress();

    function setActiveToc() {
        let currentId = '';

        tocLinks.forEach(function (link) {
            const id = decodeURIComponent(link.getAttribute('href').replace('#', ''));
            const section = document.getElementById(id);

            if (section && section.getBoundingClientRect().top <= 140) {
                currentId = id;
            }
        });

        tocLinks.forEach(function (link) {
            link.classList.remove('toc-active');

            const linkId = decodeURIComponent(
                link.getAttribute('href').replace('#', '')
            );

            if (linkId === currentId) {
                link.classList.add('toc-active');
            }
        });
    }

    window.addEventListener('scroll', setActiveToc);
    setActiveToc();

    ['copyArticleLink', 'copyArticleLinkBottom'].forEach(function (id) {
        const button = document.getElementById(id);

        if (!button) return;

        button.addEventListener('click', function () {
            navigator.clipboard.writeText(window.location.href);
        });
    });
});
</script>
@endsection