{{-- Modern Theme: Gradient header with rounded card, icons (Kaiali) --}}
<div
    style="direction:rtl;background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);padding:40px 16px;font-family:'Tahoma','Arial',sans-serif;text-align:right">
    <div
        style="max-width:540px;margin:auto;background:#ffffff;border-radius:16px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,0.12)">

        {{-- Gradient Header --}}
        <div
            style="background:linear-gradient(135deg,{{ $primaryColor }} 0%,{{ $primaryDark }} 100%);padding:32px 28px;text-align:center;position:relative">
            <div style="font-size:40px;margin-bottom:8px">✉️</div>
            <h1 style="margin:0;font-size:24px;font-weight:800;color:#ffffff">{{ $siteName }}</h1>
            <p style="margin:8px 0 0;font-size:13px;color:rgba(255,255,255,0.85);font-weight:400">{{ $subjectLine }}</p>
        </div>

        {{-- Body --}}
        <div style="padding:32px 28px 16px">
            <p style="margin:0 0 8px;font-size:14px;color:#64748b;font-weight:500">مرحباً بك 👋</p>
            <p style="margin:0 0 20px;font-size:15px;line-height:1.8;color:#334155">{{ $introLine }}</p>

            {{-- Code card --}}
            <div style="text-align:center;margin:24px 0 28px">
                <div
                    style="display:inline-block;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);color:#fff;font-size:32px;letter-spacing:12px;padding:20px 36px;border-radius:14px;font-weight:800;font-family:'Courier New',monospace;box-shadow:0 4px 15px rgba(15,23,42,0.3)">
                    {{ $code }}</div>
                <div
                    style="margin-top:16px;display:inline-block;background:#fef3c7;color:#92400e;font-size:12px;padding:6px 16px;border-radius:20px;font-weight:600">
                    ⏳ صالح لمدة 5 دقائق فقط</div>
            </div>

            @if (!empty($activationUrl))
                <div style="margin:8px 0 32px;text-align:center">
                    <a href="{{ $activationUrl }}" target="_blank"
                        style="background:linear-gradient(135deg,{{ $secondaryColor }} 0%,{{ $primaryColor }} 100%);color:#fff;text-decoration:none;padding:16px 36px;border-radius:12px;display:inline-block;font-size:15px;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,0.15)">
                        🚀 تفعيل الحساب
                    </a>
                    <div style="margin-top:16px;font-size:11px;color:#94a3b8">
                        أو انسخ الرابط التالي:
                        <span
                            style="direction:ltr;display:block;margin-top:4px;color:{{ $primaryColor }};word-break:break-all;font-size:10px">{{ $activationUrl }}</span>
                    </div>
                </div>
            @endif

            {{-- Divider --}}
            <div
                style="height:2px;background:linear-gradient(90deg,transparent,#e2e8f0,transparent);margin:16px 0 20px">
            </div>
            <p style="font-size:12px;color:#94a3b8;margin:0;line-height:1.6;text-align:center">
                🔒 هذه رسالة آلية مؤمّنة. إذا لم تطلب هذا الكود، تجاهل الرسالة.
            </p>
        </div>

        {{-- Footer --}}
        <div
            style="padding:18px 28px;text-align:center;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-top:1px solid #e2e8f0">
            <p style="margin:0;font-size:11px;color:#94a3b8;font-weight:500">© {{ date('Y') }} {{ $siteName }}
                — جميع الحقوق محفوظة</p>
        </div>
    </div>
</div>