{{-- Gradient Theme: Bold gradient background, centered card (Mega) --}}
<div
    style="direction:rtl;background:linear-gradient(160deg,{{ $primaryDark }} 0%,{{ $primaryColor }} 40%,{{ $secondaryColor }} 100%);padding:48px 16px;font-family:'Tahoma','Arial',sans-serif;text-align:right;min-height:100%">
    <div style="max-width:520px;margin:auto">

        {{-- Floating site name --}}
        <div style="text-align:center;margin-bottom:24px">
            <span
                style="font-size:28px;font-weight:800;color:#ffffff;text-shadow:0 2px 8px rgba(0,0,0,0.3)">{{ $siteName }}</span>
        </div>

        {{-- Main card --}}
        <div
            style="background:rgba(255,255,255,0.97);border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.25)">

            {{-- Content --}}
            <div style="padding:36px 30px 20px;text-align:center">
                <div
                    style="display:inline-block;width:56px;height:56px;background:linear-gradient(135deg,{{ $primaryColor }},{{ $secondaryColor }});border-radius:50%;line-height:56px;font-size:26px;margin-bottom:16px">
                    🔐</div>

                <h2 style="margin:0 0 8px;font-size:20px;font-weight:800;color:#1e1e2f">{{ $subjectLine }}</h2>
                <p style="margin:0 0 28px;font-size:14px;color:#6b7280;line-height:1.7">{{ $introLine }}</p>

                {{-- Code display --}}
                <div style="margin:0 0 28px">
                    <div
                        style="display:inline-block;background:linear-gradient(135deg,{{ $primaryDark }},{{ $primaryColor }});color:#fff;font-size:34px;letter-spacing:10px;padding:20px 36px;border-radius:16px;font-weight:800;font-family:'Courier New',monospace;box-shadow:0 6px 20px {{ $primaryColor }}44">
                        {{ $code }}</div>
                    <div style="margin-top:14px">
                        <span
                            style="display:inline-block;background:linear-gradient(90deg,{{ $primaryColor }}22,{{ $secondaryColor }}22);color:{{ $primaryDark }};font-size:12px;padding:6px 18px;border-radius:20px;font-weight:600">⏳
                            صالح 5 دقائق</span>
                    </div>
                </div>

                @if (!empty($activationUrl))
                    <a href="{{ $activationUrl }}" target="_blank"
                        style="display:inline-block;background:linear-gradient(135deg,{{ $secondaryColor }},{{ $primaryColor }});color:#fff;text-decoration:none;padding:16px 40px;border-radius:14px;font-size:16px;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,0.15);margin-bottom:8px">
                        ⚡ تفعيل فوري
                    </a>
                    <p style="margin:12px 0 0;font-size:10px;color:#94a3b8">
                        <span style="direction:ltr;word-break:break-all">{{ $activationUrl }}</span>
                    </p>
                @endif
            </div>

            {{-- Footer inside card --}}
            <div style="padding:16px 30px;background:#fafbfc;border-top:1px solid #f0f0f5;text-align:center">
                <p style="margin:0;font-size:11px;color:#94a3b8">رسالة آلية — إذا لم تطلب الكود، تجاهلها</p>
            </div>
        </div>

        {{-- Bottom text --}}
        <div style="text-align:center;margin-top:20px">
            <p style="margin:0;font-size:11px;color:rgba(255,255,255,0.6)">© {{ date('Y') }} {{ $siteName }}
            </p>
        </div>
    </div>
</div>