@extends('layouts.account', ['title' => 'لوحة التحكم | RaseedNow'])

@section('account_content')
    @php
        $walletBalance = ($user->wallet?->balance_minor ?? 0) / 100;
        $totalOrders = $user->orders->count();
        $completedOrders = $user->orders->where('fulfillment_status', 'completed')->count();
        $points = (int) ($user->loyalty_points ?? 0);
        $displayName = $user->display_name ?: $user->name;
        $dashboardCurrencies = \App\Models\Currency::where('is_active', true)->orderByDesc('is_base')->orderBy('code')->get();
        $dashboardCurrencyCode = session('store_currency', 'EGP');
        $dashboardCurrency = $dashboardCurrencies->firstWhere('code', $dashboardCurrencyCode) ?: $dashboardCurrencies->first();
        $dashboardCurrencyFlags = ['EGP' => 'eg.png', 'USD' => 'us.png', 'EUR' => 'eu.png', 'SAR' => 'sa.png', 'AED' => 'ae.png'];
        $mobileUnreadCount = $user->customerNotifications()->whereNull('read_at')->count();
        $referralUrl = $user->referral_code ? route('register', ['ref' => $user->referral_code]) : route('register');
        $fallbackImages = collect(['product-108.webp','product-109.webp','product-110.webp','product-111.webp','product-112.webp']);
        $statusLabels = [
            'completed' => 'تم التسليم',
            'delivered' => 'تم التسليم',
            'pending' => 'قيد التنفيذ',
            'processing' => 'قيد التنفيذ',
            'failed' => 'فشل الدفع',
            'cancelled' => 'ملغي',
            'refunded' => 'مسترد',
            'paid' => 'مدفوع',
        ];
        $statusTone = fn ($status) => match ($status) {
            'completed', 'delivered', 'paid' => 'success',
            'failed', 'cancelled' => 'danger',
            'refunded' => 'warning',
            default => 'warning',
        };
        $activities = collect()
            ->merge($recentOrders->map(fn ($order) => [
                'label' => 'طلب جديد '.$order->order_number,
                'meta' => $order->created_at?->diffForHumans(),
                'tone' => $statusTone($order->fulfillment_status),
            ]))
            ->merge($recentNotifications->map(fn ($notification) => [
                'label' => $notification->title,
                'meta' => $notification->created_at?->diffForHumans(),
                'tone' => $notification->read_at ? 'muted' : 'primary',
            ]))
            ->take(5);
    @endphp

    <div class="rn-mobile-dashboard" dir="rtl">
        <header class="rn-mobile-dashboard-head">
            <button type="button" class="rn-mobile-menu" data-rn-sidebar-open aria-label="فتح القائمة">
                <svg viewBox="0 0 24 24" fill="none"><path d="M5 7h14M5 12h14M5 17h14" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>
            </button>

            <details class="rn-dashboard-currency" data-rn-preference="currency">
                <summary aria-label="تغيير العملة">
                    <img data-rn-current-currency-flag src="{{ asset('images/flags/'.($dashboardCurrencyFlags[$dashboardCurrency?->code] ?? 'eg.png')) }}" alt="">
                    <b data-rn-current-currency-symbol>{{ $dashboardCurrency?->symbol ?? 'ج.م' }}</b>
                </summary>
                <div>
                    @foreach($dashboardCurrencies as $currency)
                        <form method="POST" action="{{ route('preferences.currency') }}" data-rn-ajax-form>
                            @csrf
                            <input type="hidden" name="currency" value="{{ $currency->code }}">
                            <button type="submit" data-rn-preference-option="currency" data-rn-preference-value="{{ $currency->code }}" @class(['is-active' => $dashboardCurrencyCode === $currency->code])>
                                <img src="{{ asset('images/flags/'.($dashboardCurrencyFlags[$currency->code] ?? 'eg.png')) }}" alt="">
                                <span>{{ $currency->code }}</span>
                            </button>
                        </form>
                    @endforeach
                </div>
            </details>

            <div class="rn-mobile-user-tools">
                <a href="{{ route('account.notifications') }}" class="rn-mobile-bell" aria-label="الإشعارات">
                    <svg viewBox="0 0 24 24" fill="none"><path d="M18 8a6 6 0 1 0-12 0c0 7-3 8-3 8h18s-3-1-3-8ZM10 20h4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    @if($mobileUnreadCount > 0)<em>{{ $mobileUnreadCount }}</em>@endif
                </a>
                <span class="rn-mobile-avatar">
                    <img src="{{ asset('assets/images/account/08-login-visual-clean.png') }}" alt="{{ $displayName }}">
                    <i></i>
                </span>
            </div>

            <a href="{{ route('account.wallet') }}" class="rn-mobile-balance">
                <span>رصيد المحفظة</span>
                <strong>{{ number_format($walletBalance, 2) }} <small>ج.م</small></strong>
                <b>+</b>
            </a>

            <div class="rn-mobile-greeting-copy">
                <h1>مرحبًا بك، {{ $displayName }}</h1>
                <p>جاهز لشحن رصيدك والاستمتاع بألعابك المفضلة</p>
            </div>
        </header>

        <main class="rn-mobile-dashboard-content">
            <section class="rn-mobile-hero">
                <img src="{{ asset('assets/images/account/03-dashboard-welcome-banner.png') }}" alt="">
                <div>
                    <h2>اشحن ألعابك المفضلة <strong>بسرعة وأمان</strong></h2>
                    <p>أفضل الأسعار، أسرع شحن، دعم على مدار الساعة<br>كل ما تحتاجه في مكان واحد</p>
                    <a href="{{ route('home') }}#games">اشحن الآن <span>ϟ</span></a>
                </div>
            </section>

            <section class="rn-mobile-stats" aria-label="إحصائيات الحساب">
                <article class="is-wallet">
                    <i><svg viewBox="0 0 24 24" fill="none"><path d="M4 7h16v12H4V7Zm0 4h16M16 15h2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></i>
                    <span>رصيد المحفظة</span>
                    <strong>{{ number_format($walletBalance, 2) }} <small>ج.م</small></strong>
                    <a href="{{ route('account.wallet') }}">شحن الرصيد</a>
                </article>
                <article class="is-orders">
                    <i><svg viewBox="0 0 24 24" fill="none"><path d="M7 4h10l2 4v12H5V8l2-4Zm-2 4h14M9 13h6m-6 4h4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></i>
                    <span>إجمالي الطلبات</span>
                    <strong>{{ $totalOrders }}</strong>
                    <a href="{{ route('account.orders') }}">عرض الكل</a>
                </article>
                <article class="is-completed">
                    <i><svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="1.8"/><path d="m8.5 12 2.2 2.2 4.8-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></i>
                    <span>الطلبات المكتملة</span>
                    <strong>{{ $completedOrders }}</strong>
                    <a href="{{ route('account.orders', ['status' => 'completed']) }}">عرض الكل</a>
                </article>
                <article class="is-points">
                    <i><svg viewBox="0 0 24 24" fill="none"><path d="m12 3 2.7 5.4 6 .9-4.3 4.2 1 6-5.4-2.8-5.4 2.8 1-6-4.3-4.2 6-.9L12 3Z" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg></i>
                    <span>النقاط</span>
                    <strong>{{ number_format($points) }}</strong>
                    <a href="{{ route('account.profile') }}">عرض الكل</a>
                </article>
            </section>

            <section class="rn-mobile-promos">
                <article class="rn-mobile-promo is-wallet">
                    <img src="{{ asset('assets/images/account/04-wallet-banner.png') }}" alt="">
                    <div><h2>المحفظة</h2><p>شحن سريع وآمن<br>لرصيد حسابك</p><a href="{{ route('account.wallet') }}">شحن الآن</a></div>
                </article>
                <article class="rn-mobile-promo is-invite">
                    <img src="{{ asset('assets/images/account/05-invite-friends-banner.png') }}" alt="">
                    <div><h2>دعوة الأصدقاء</h2><p>ادع أصدقاءك واحصل<br>على نقاط ومكافآت</p><a href="{{ $referralUrl }}">دعوة الآن</a></div>
                </article>
            </section>

            <section class="rn-mobile-weekly">
                <img src="{{ asset('assets/images/account/06-weekly-offer-banner.png') }}" alt="">
                <div><h2>عرض الأسبوع</h2><p>خصومات تصل حتى 30%<br>على باقات مختارة</p><a href="{{ route('home') }}#offers">عرض العروض</a></div>
                <span class="rn-weekly-discount">خصم حتى<br><strong>30%</strong></span>
            </section>
            <div class="rn-mobile-dots" aria-hidden="true"><i></i><i></i><i></i><i class="is-active"></i></div>

            <section class="rn-mobile-orders">
                <header><h2>آخر الطلبات</h2><a href="{{ route('account.orders') }}">عرض الكل</a></header>
                <div class="rn-mobile-orders-list">
                    @forelse($recentOrders->take(3) as $order)
                        @php
                            $firstItem = $order->items->first();
                            $game = $firstItem?->productVariant?->game;
                            $image = $game?->image_path ? asset($game->image_path) : asset('images/kroti/'.$fallbackImages[$loop->index % $fallbackImages->count()]);
                            $status = $order->fulfillment_status ?: $order->payment_status;
                        @endphp
                        <a href="{{ route('orders.show', $order) }}" class="rn-mobile-order-row">
                            <img src="{{ $image }}" alt="{{ $game?->name_en ?: $firstItem?->name_snapshot ?: 'منتج' }}">
                            <span><b>{{ $game?->name_en ?: $game?->name_ar ?: 'طلب #'.$order->order_number }}</b><small>{{ $firstItem?->name_en ?? $firstItem?->name_snapshot ?? 'منتجات متعددة' }}</small><time>{{ $order->created_at?->format('d M Y - h:i A') }}</time></span>
                            <strong>{{ number_format($order->total_minor / 100, 2) }} <small>{{ $order->currency_code }}</small><em class="{{ $statusTone($status) }}">{{ $statusLabels[$status] ?? $status }}</em></strong>
                        </a>
                    @empty
                        <div class="rn-mobile-orders-empty">لا توجد طلبات بعد.</div>
                    @endforelse
                </div>
            </section>
        </main>
    </div>

    <div class="gx-dashboard">
        <section class="gx-mobile-greeting" aria-label="ترحيب">
            <div>
                <h1>مرحبًا بك، {{ $displayName }}</h1>
                <p>جاهز لشحن رصيدك والاستمتاع بألعابك المفضلة</p>
            </div>
        </section>

        <header class="gx-dash-welcome">
            <img src="{{ asset('assets/images/account/03-dashboard-welcome-banner.png') }}" alt="بانر ترحيبي لحساب العميل" fetchpriority="high">
            <div class="gx-welcome-desktop-copy">
                <h1>مرحبًا بك، {{ $displayName }}</h1>
                <p>جاهز لشحن رصيدك والاستمتاع بألعابك المفضلة</p>
            </div>
            <div class="gx-mobile-hero-copy">
                <h2>اشحن ألعابك المفضلة <strong>بسرعة وأمان</strong></h2>
                <p>أفضل الأسعار، أسرع شحن، دعم على مدار الساعة كل ما تحتاجه في مكان واحد</p>
                <a href="{{ route('home') }}#games">اشحن الآن <span>ϟ</span></a>
            </div>
        </header>

        <section class="gx-dash-stats" aria-label="إحصائيات الحساب">
            <article>
                <i class="wallet"><svg viewBox="0 0 24 24" fill="none"><path d="M4 7h16v12H4V7Zm0 4h16M16 15h2" stroke="currentColor" stroke-width="1.8"/></svg></i>
                <span>رصيد المحفظة</span>
                <strong>{{ number_format($walletBalance, 2) }}</strong>
                <small>ج.م</small>
                <a href="{{ route('account.wallet') }}">شحن الرصيد +</a>
            </article>
            <article>
                <i><svg viewBox="0 0 24 24" fill="none"><path d="M7 4h10l2 4v12H5V8l2-4Zm-2 4h14M9 13h6m-6 4h4" stroke="currentColor" stroke-width="1.8"/></svg></i>
                <span>إجمالي الطلبات</span>
                <strong>{{ $totalOrders }}</strong>
                <small>طلب</small>
                <a href="{{ route('account.orders') }}">عرض الكل</a>
            </article>
            <article>
                <i class="success"><svg viewBox="0 0 24 24" fill="none"><path d="M20 7 10 17l-5-5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></i>
                <span>الطلبات المكتملة</span>
                <strong>{{ $completedOrders }}</strong>
                <small>طلب</small>
                <a href="{{ route('account.orders', ['status' => 'completed']) }}">عرض الكل</a>
            </article>
            <article>
                <i class="points"><svg viewBox="0 0 24 24" fill="none"><path d="m12 3 2.7 5.4 6 .9-4.3 4.2 1 6-5.4-2.8-5.4 2.8 1-6-4.3-4.2 6-.9L12 3Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg></i>
                <span>النقاط</span>
                <strong>{{ $points }}</strong>
                <small>نقطة</small>
                <a href="{{ route('account.profile') }}">استبدل الآن</a>
            </article>
        </section>

        <div class="gx-dash-layout">
            <aside class="gx-dash-rail">
                <section class="gx-wallet-card">
                    <img src="{{ asset('assets/images/account/04-wallet-banner.png') }}" alt="صورة المحفظة الرقمية" loading="lazy" decoding="async">
                    <div>
                        <h2>المحفظة</h2>
                        <span>الرصيد الحالي</span>
                        <strong>{{ number_format($walletBalance, 2) }} <small>ج.م</small></strong>
                        <a href="{{ route('account.wallet') }}">شحن الرصيد +</a>
                    </div>
                </section>

                <section class="gx-invite-card">
                    <img src="{{ asset('assets/images/account/05-invite-friends-banner.png') }}" alt="دعوة الأصدقاء" loading="lazy" decoding="async">
                    <div>
                        <h2>دعوة الأصدقاء</h2>
                        <p>ادعُ أصدقاءك واحصل على نقاط أو مكافآت لكل صديق.</p>
                        <a href="{{ $referralUrl }}">دعوة الآن</a>
                    </div>
                </section>
            </aside>

            <section class="gx-weekly-mobile" aria-label="عرض الأسبوع">
                <img src="{{ asset('assets/images/account/06-weekly-offer-banner.png') }}" alt="عرض الأسبوع" loading="lazy" decoding="async">
                <div>
                    <h2>عرض الأسبوع</h2>
                    <p>خصومات تصل حتى 30% على باقات مختارة</p>
                    <a href="{{ route('home') }}#offers">عرض العروض</a>
                </div>
            </section>

            <main class="gx-dash-main">
                <section class="gx-orders-card">
                    <div class="gx-card-head">
                        <h2>طلباتك الأخيرة</h2>
                        <a href="{{ route('account.orders') }}">عرض الكل</a>
                    </div>
                    <div class="gx-orders-table">
                        <div class="gx-orders-row gx-orders-head">
                            <span>اللعبة</span><span>الباقة</span><span>التاريخ</span><span>الحالة</span><span>المبلغ</span>
                        </div>
                        @forelse($recentOrders as $order)
                            @php
                                $firstItem = $order->items->first();
                                $game = $firstItem?->productVariant?->game;
                                $image = $game?->image_path ? asset($game->image_path) : asset('images/kroti/'.$fallbackImages[$loop->index % $fallbackImages->count()]);
                                $status = $order->fulfillment_status ?: $order->payment_status;
                            @endphp
                            <a href="{{ route('orders.show', $order) }}" class="gx-orders-row">
                                <span class="gx-order-game"><img src="{{ $image }}" alt="{{ $game?->name_ar ?: $firstItem?->name_snapshot ?: 'منتج' }}" loading="lazy" decoding="async"><b>{{ $game?->name_ar ?: 'طلب #'.$order->order_number }}</b></span>
                                <span>{{ $firstItem?->name_snapshot ?: 'منتجات متعددة' }}</span>
                                <span>{{ $order->created_at?->format('Y-m-d H:i') }}</span>
                                <span><em class="gx-badge {{ $statusTone($status) }}">{{ $statusLabels[$status] ?? $status }}</em></span>
                                <strong>{{ number_format($order->total_minor / 100, 2) }} {{ $order->currency_code }}</strong>
                            </a>
                        @empty
                            <div class="gx-empty-state">لا توجد طلبات بعد. ابدأ أول عملية شحن الآن.</div>
                        @endforelse
                    </div>
                </section>

                <div class="gx-dash-split">
                    <section class="gx-activity-card">
                        <div class="gx-card-head">
                            <h2>النشاط الأخير</h2>
                        </div>
                        <div class="gx-timeline">
                            @forelse($activities as $activity)
                                <div class="gx-timeline-item {{ $activity['tone'] }}">
                                    <b>{{ $activity['label'] }}</b>
                                    <span>{{ $activity['meta'] }}</span>
                                </div>
                            @empty
                                <div class="gx-empty-state">لا يوجد نشاط حديث.</div>
                            @endforelse
                        </div>
                    </section>

                    <section class="gx-favorites-card">
                        <div class="gx-card-head">
                            <h2>ألعابك المفضلة</h2>
                            <a href="{{ route('account.favorites') }}">عرض الكل</a>
                        </div>
                        <div class="gx-fav-strip">
                            @forelse($user->favoriteGames->take(5) as $game)
                                @php($image = $game->image_path ? asset($game->image_path) : asset('images/kroti/'.$fallbackImages[$loop->index % $fallbackImages->count()]))
                                <a href="{{ route('games.show', $game->slug) }}">
                                    <img src="{{ $image }}" alt="{{ $game->name_ar }}" loading="lazy" decoding="async">
                                    <span>{{ $game->name_ar }}</span>
                                </a>
                            @empty
                                <div class="gx-empty-state">أضف ألعابك المفضلة لتظهر هنا.</div>
                            @endforelse
                        </div>
                    </section>
                </div>
            </main>
        </div>

        <section class="gx-dashboard-features">
            <span>
                <i><svg viewBox="0 0 24 24" fill="none"><path d="M13 2 4 14h7l-1 8 10-13h-7l0-7Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg></i>
                <b>شحن فوري وآمن</b>
                <small>توصيل فوري وآمن 100%</small>
            </span>
            <span>
                <i><svg viewBox="0 0 24 24" fill="none"><path d="m20 7-9 9-4-4M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></i>
                <b>أفضل الأسعار</b>
                <small>نضمن لك السعر الأفضل</small>
            </span>
            <span>
                <i><svg viewBox="0 0 24 24" fill="none"><path d="M4 12a8 8 0 1 1 16 0v3a2 2 0 0 1-2 2h-2v-6h4M4 15a2 2 0 0 0 2 2h2v-6H4v4Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></i>
                <b>دعم على مدار الساعة</b>
                <small>فريق دعم متاح 24/7</small>
            </span>
            <span>
                <i><svg viewBox="0 0 24 24" fill="none"><path d="M4 7h16v10H4V7Zm0 4h16M7 15h3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></i>
                <b>طرق دفع متعددة</b>
                <small>اختر طريقة الدفع المناسبة لك</small>
            </span>
        </section>
    </div>
@endsection

{{-- Legacy mobile geometry overrides are intentionally disabled. The dashboard now uses
     the isolated rn-mobile-dashboard implementation above so CSS and runtime JS cannot conflict. 

@push('styles')
    <style>
        @media (max-width: 760px) {
            html,
            body.rn-account-body {
                width: 100% !important;
                max-width: 100% !important;
                overflow-x: hidden !important;
                background: #f7faff !important;
            }

            body.rn-account-body main.rn-main {
                padding: 0 !important;
                margin: 0 !important;
                background: #f7faff !important;
                overflow-x: hidden !important;
            }

            body.rn-account-body .kd-shell {
                width: min(100%, 430px) !important;
                max-width: 430px !important;
                margin: 0 auto !important;
                padding: 0 14px 112px !important;
                display: block !important;
                background: #f7faff !important;
                overflow: hidden !important;
            }

            body.rn-account-body .kd-content {
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                display: block !important;
                overflow: visible !important;
            }

            body.rn-account-body .kd-account-topbar {
                display: none !important;
            }

            body.rn-account-body .kd-mobile-head {
                width: 100% !important;
                height: 190px !important;
                margin: 0 !important;
                padding: 0 !important;
                display: block !important;
                position: relative !important;
                background: transparent !important;
                border: 0 !important;
                box-shadow: none !important;
            }

            body.rn-account-body .kd-mobile-head > button,
            body.rn-account-body .kd-mobile-head .kd-mobile-notify,
            body.rn-account-body .kd-mobile-head .kd-avatar {
                position: absolute !important;
                top: 42px !important;
                width: 46px !important;
                height: 46px !important;
                min-width: 46px !important;
                min-height: 46px !important;
                display: grid !important;
                place-items: center !important;
                border: 0 !important;
                border-radius: 15px !important;
                background: #fff !important;
                color: #10204b !important;
                box-shadow: 0 12px 30px rgba(31, 78, 145, .08) !important;
            }

            body.rn-account-body .kd-mobile-head > button {
                left: 0 !important;
            }

            body.rn-account-body .kd-mobile-head .kd-mobile-notify {
                right: 54px !important;
            }

            body.rn-account-body .kd-mobile-head .kd-avatar {
                right: 0 !important;
                border-radius: 50% !important;
                color: transparent !important;
                background: url('/images/kroti/product-110.webp') center / cover no-repeat !important;
            }

            body.rn-account-body .kd-mobile-head .kd-avatar::after {
                content: '' !important;
                position: absolute !important;
                right: 1px !important;
                bottom: 1px !important;
                width: 10px !important;
                height: 10px !important;
                border-radius: 50% !important;
                background: #22c55e !important;
                border: 2px solid #fff !important;
            }

            body.rn-account-body .kd-mobile-head .kd-mobile-notify em {
                right: -5px !important;
                top: -6px !important;
                width: 20px !important;
                height: 20px !important;
                display: grid !important;
                place-items: center !important;
                border-radius: 50% !important;
                background: #ef3e57 !important;
                color: #fff !important;
                font-size: 10px !important;
                font-style: normal !important;
                font-weight: 800 !important;
                border: 2px solid #fff !important;
            }

            body.rn-account-body .kd-mobile-head .kd-balance-pill {
                position: absolute !important;
                left: 0 !important;
                top: 108px !important;
                bottom: auto !important;
                width: 136px !important;
                height: 66px !important;
                min-height: 66px !important;
                padding: 0 !important;
                display: block !important;
                overflow: hidden !important;
                border: 0 !important;
                border-radius: 16px !important;
                background: #fff !important;
                box-shadow: 0 12px 30px rgba(31, 78, 145, .08) !important;
            }

            body.rn-account-body .kd-balance-pill span {
                position: absolute !important;
                top: 11px !important;
                right: 13px !important;
                color: #7b86a0 !important;
                font-size: 10px !important;
                line-height: 1 !important;
                font-weight: 700 !important;
                white-space: nowrap !important;
            }

            body.rn-account-body .kd-balance-pill strong {
                position: absolute !important;
                right: 13px !important;
                bottom: 11px !important;
                color: #07143d !important;
                font-size: 18px !important;
                line-height: 1 !important;
                font-weight: 800 !important;
                white-space: nowrap !important;
            }

            body.rn-account-body .kd-balance-pill b {
                position: absolute !important;
                left: 10px !important;
                top: 13px !important;
                width: 38px !important;
                height: 38px !important;
                display: grid !important;
                place-items: center !important;
                border-radius: 12px !important;
                background: #1268ff !important;
                color: #fff !important;
                font-size: 24px !important;
            }

            body.rn-account-body .gx-dashboard {
                display: grid !important;
                gap: 12px !important;
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            body.rn-account-body .gx-mobile-greeting {
                min-height: 64px !important;
                margin: -90px 0 10px !important;
                padding: 0 2px !important;
                display: flex !important;
                justify-content: flex-end !important;
                text-align: right !important;
            }

            body.rn-account-body .gx-mobile-greeting div {
                width: 58% !important;
            }

            body.rn-account-body .gx-mobile-greeting h1 {
                margin: 0 0 6px !important;
                color: #07143d !important;
                font-size: 20px !important;
                line-height: 1.2 !important;
                font-weight: 800 !important;
                white-space: nowrap !important;
            }

            body.rn-account-body .gx-mobile-greeting p {
                margin: 0 !important;
                color: #73809b !important;
                font-size: 10.5px !important;
                line-height: 1.45 !important;
                font-weight: 600 !important;
            }

            body.rn-account-body .gx-dash-welcome {
                width: 100% !important;
                height: 150px !important;
                min-height: 150px !important;
                margin: 0 !important;
                padding: 0 !important;
                display: block !important;
                position: relative !important;
                overflow: hidden !important;
                border: 0 !important;
                border-radius: 18px !important;
                background: #eef4ff !important;
                box-shadow: 0 12px 30px rgba(31, 78, 145, .08) !important;
            }

            body.rn-account-body .gx-dash-welcome img {
                position: absolute !important;
                inset: 0 !important;
                width: 100% !important;
                height: 100% !important;
                object-fit: cover !important;
                object-position: left center !important;
            }

            body.rn-account-body .gx-mobile-hero-copy {
                position: absolute !important;
                z-index: 3 !important;
                top: 25px !important;
                right: 13px !important;
                width: 50% !important;
                display: grid !important;
                justify-items: end !important;
                text-align: right !important;
            }

            body.rn-account-body .gx-mobile-hero-copy h2 {
                margin: 0 0 5px !important;
                color: #07143d !important;
                font-size: 15px !important;
                line-height: 1.12 !important;
                font-weight: 800 !important;
                white-space: nowrap !important;
            }

            body.rn-account-body .gx-mobile-hero-copy h2 strong {
                display: block !important;
                margin-top: 3px !important;
                color: #1268ff !important;
                font-size: 25px !important;
                line-height: 1 !important;
                font-weight: 800 !important;
            }

            body.rn-account-body .gx-mobile-hero-copy p {
                margin: 0 0 8px !important;
                color: #53617c !important;
                font-size: 8.5px !important;
                line-height: 1.55 !important;
                font-weight: 600 !important;
            }

            body.rn-account-body .gx-mobile-hero-copy a {
                width: 118px !important;
                height: 32px !important;
                min-height: 32px !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 7px !important;
                border-radius: 11px !important;
                background: #1268ff !important;
                color: #fff !important;
                -webkit-text-fill-color: #fff !important;
                font-size: 10px !important;
                font-weight: 800 !important;
                text-decoration: none !important;
            }

            body.rn-account-body .gx-dash-stats {
                width: 100% !important;
                margin: 0 !important;
                display: grid !important;
                grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
                gap: 8px !important;
                direction: ltr !important;
            }

            body.rn-account-body .gx-dash-stats > article {
                min-width: 0 !important;
                width: auto !important;
                height: 110px !important;
                min-height: 110px !important;
                padding: 10px 3px 8px !important;
                display: grid !important;
                grid-template-columns: 1fr !important;
                grid-template-rows: 35px 15px 20px 10px 16px !important;
                place-items: center !important;
                gap: 2px !important;
                border: 0 !important;
                border-radius: 18px !important;
                background: #fff !important;
                box-shadow: 0 12px 30px rgba(31, 78, 145, .08) !important;
                text-align: center !important;
                direction: rtl !important;
                overflow: hidden !important;
            }

            body.rn-account-body .gx-dash-stats > article > i {
                width: 35px !important;
                height: 35px !important;
                margin: 0 !important;
                border-radius: 13px !important;
            }

            body.rn-account-body .gx-dash-stats > article > span,
            body.rn-account-body .gx-dash-stats > article > small,
            body.rn-account-body .gx-dash-stats > article > a {
                min-height: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
                font-size: 8px !important;
                line-height: 1 !important;
                font-weight: 800 !important;
                white-space: nowrap !important;
            }

            body.rn-account-body .gx-dash-stats > article > strong {
                font-size: 17px !important;
                line-height: 1 !important;
                font-weight: 800 !important;
                white-space: nowrap !important;
            }

            body.rn-account-body .gx-dash-layout,
            body.rn-account-body .gx-dash-main {
                display: grid !important;
                grid-template-columns: 1fr !important;
                gap: 12px !important;
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            body.rn-account-body .gx-dash-rail {
                display: grid !important;
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 10px !important;
                width: 100% !important;
                margin: 0 !important;
            }

            body.rn-account-body .gx-wallet-card,
            body.rn-account-body .gx-invite-card {
                height: 96px !important;
                min-height: 96px !important;
                position: relative !important;
                overflow: hidden !important;
                border: 0 !important;
                border-radius: 16px !important;
                box-shadow: 0 12px 30px rgba(31, 78, 145, .08) !important;
            }

            body.rn-account-body .gx-wallet-card img,
            body.rn-account-body .gx-invite-card img {
                position: absolute !important;
                inset: 0 !important;
                width: 100% !important;
                height: 100% !important;
                object-fit: cover !important;
                object-position: center !important;
            }

            body.rn-account-body .gx-wallet-card > div,
            body.rn-account-body .gx-invite-card > div {
                position: relative !important;
                z-index: 2 !important;
                width: 56% !important;
                height: 100% !important;
                padding: 10px !important;
                display: grid !important;
                align-content: center !important;
                justify-items: start !important;
                gap: 3px !important;
            }

            body.rn-account-body .gx-wallet-card h2,
            body.rn-account-body .gx-invite-card h2 {
                margin: 0 !important;
                font-size: 15px !important;
                line-height: 1 !important;
                font-weight: 800 !important;
                white-space: nowrap !important;
            }

            body.rn-account-body .gx-wallet-card span,
            body.rn-account-body .gx-wallet-card strong,
            body.rn-account-body .gx-invite-card p {
                margin: 0 !important;
                font-size: 8.5px !important;
                line-height: 1.45 !important;
                font-weight: 700 !important;
            }

            body.rn-account-body .gx-wallet-card a,
            body.rn-account-body .gx-invite-card a {
                height: 25px !important;
                min-height: 25px !important;
                margin: 3px 0 0 !important;
                padding: 0 12px !important;
                display: inline-flex !important;
                align-items: center !important;
                border-radius: 9px !important;
                font-size: 8px !important;
                font-weight: 800 !important;
                white-space: nowrap !important;
                text-decoration: none !important;
            }

            body.rn-account-body .gx-dash-main::before {
                content: '' !important;
                display: block !important;
                width: 100% !important;
                height: 98px !important;
                margin: 0 !important;
                border-radius: 16px !important;
                background: url('/assets/images/account/06-weekly-offer-banner.png') center / cover no-repeat !important;
                box-shadow: 0 12px 30px rgba(31, 78, 145, .08) !important;
            }

            body.rn-account-body .gx-orders-card {
                margin: 0 !important;
                border: 0 !important;
                border-radius: 16px !important;
                overflow: hidden !important;
                background: #fff !important;
                box-shadow: 0 12px 30px rgba(31, 78, 145, .08) !important;
            }

            body.rn-account-body .gx-orders-head {
                display: none !important;
            }

            body.rn-account-body .gx-card-head {
                height: 44px !important;
                min-height: 44px !important;
                padding: 0 12px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: space-between !important;
            }

            body.rn-account-body .gx-card-head h2 {
                margin: 0 !important;
                color: #07143d !important;
                font-size: 16px !important;
                line-height: 1 !important;
                font-weight: 800 !important;
            }

            body.rn-account-body .gx-card-head a {
                color: #1268ff !important;
                font-size: 11px !important;
                font-weight: 800 !important;
            }

            body.rn-account-body .gx-orders-row {
                min-height: 76px !important;
                padding: 10px !important;
                display: grid !important;
                grid-template-columns: 58px 1fr 70px !important;
                grid-template-rows: auto auto auto !important;
                gap: 2px 10px !important;
                align-items: center !important;
                border: 0 !important;
                border-top: 1px solid #eef3fb !important;
                background: #fff !important;
                text-decoration: none !important;
            }

            body.rn-account-body .gx-order-game {
                grid-column: 1 !important;
                grid-row: 1 / 4 !important;
            }

            body.rn-account-body .gx-order-game img {
                width: 54px !important;
                height: 54px !important;
                border-radius: 13px !important;
                object-fit: cover !important;
            }

            body.rn-account-body .gx-order-game b {
                display: none !important;
            }

            body.rn-account-body .gx-orders-row > span:nth-child(2) {
                grid-column: 2 !important;
                grid-row: 1 !important;
                font-size: 13px !important;
                font-weight: 800 !important;
                color: #07143d !important;
                text-align: right !important;
            }

            body.rn-account-body .gx-orders-row > span:nth-child(3) {
                grid-column: 2 !important;
                grid-row: 2 !important;
                font-size: 11px !important;
                font-weight: 600 !important;
                color: #74809b !important;
                text-align: right !important;
            }

            body.rn-account-body .gx-orders-row > span:nth-child(4) {
                grid-column: 3 !important;
                grid-row: 2 / 4 !important;
                justify-self: start !important;
            }

            body.rn-account-body .gx-orders-row > strong {
                grid-column: 3 !important;
                grid-row: 1 !important;
                color: #07143d !important;
                font-size: 13px !important;
                font-weight: 800 !important;
                text-align: left !important;
                white-space: nowrap !important;
            }

            body.rn-account-body .gx-dash-split,
            body.rn-account-body .gx-dashboard-features,
            body.rn-account-body .kd-side-help {
                display: none !important;
            }

            body.rn-account-body nav.kd-bottom-nav {
                display: grid !important;
                grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
                align-items: center !important;
                position: fixed !important;
                z-index: 80 !important;
                left: max(16px, calc((100vw - 398px) / 2)) !important;
                right: max(16px, calc((100vw - 398px) / 2)) !important;
                bottom: 10px !important;
                height: 72px !important;
                padding: 8px 10px !important;
                border: 0 !important;
                border-radius: 24px !important;
                background: rgba(255, 255, 255, .98) !important;
                box-shadow: 0 16px 40px rgba(25, 72, 145, .16) !important;
            }

            body.rn-account-body .kd-bottom-nav a,
            body.rn-account-body .kd-bottom-nav a:nth-child(n) {
                position: relative !important;
                width: auto !important;
                height: auto !important;
                margin: 0 !important;
                padding: 0 !important;
                display: grid !important;
                place-items: center !important;
                gap: 3px !important;
                border-radius: 0 !important;
                background: transparent !important;
                color: #77839e !important;
                box-shadow: none !important;
                font-size: 9px !important;
                line-height: 1 !important;
                font-weight: 800 !important;
                text-decoration: none !important;
            }

            body.rn-account-body .kd-bottom-nav a svg {
                width: 22px !important;
                height: 22px !important;
            }

            body.rn-account-body .kd-bottom-nav a.is-active {
                color: #1268ff !important;
            }

            body.rn-account-body .kd-bottom-nav a.kd-charge-now {
                width: 56px !important;
                height: 56px !important;
                margin-top: -28px !important;
                justify-self: center !important;
                place-items: center !important;
                border-radius: 50% !important;
                background: #1268ff !important;
                color: #fff !important;
                box-shadow: 0 16px 30px rgba(18, 104, 255, .25) !important;
            }

            body.rn-account-body .kd-bottom-nav a.kd-charge-now span {
                position: absolute !important;
                top: 61px !important;
                color: #1268ff !important;
                white-space: nowrap !important;
            }
        }
    </style>
@endpush

@push('styles')
    <style>
        .gx-weekly-mobile {
            display: none;
        }

        @media (max-width: 760px) {
            body.rn-account-body .gx-weekly-mobile {
                display: block !important;
                position: relative !important;
                width: 100% !important;
                height: 98px !important;
                min-height: 98px !important;
                overflow: hidden !important;
                border-radius: 16px !important;
                background: #f4edff !important;
                box-shadow: 0 12px 30px rgba(31, 78, 145, .08) !important;
            }

            body.rn-account-body .gx-weekly-mobile img {
                position: absolute !important;
                inset: 0 !important;
                width: 100% !important;
                height: 100% !important;
                object-fit: cover !important;
                object-position: center !important;
            }

            body.rn-account-body .gx-weekly-mobile > div {
                position: relative !important;
                z-index: 2 !important;
                width: 48% !important;
                height: 100% !important;
                margin-inline-start: auto !important;
                padding: 14px 16px !important;
                display: grid !important;
                align-content: center !important;
                justify-items: start !important;
                gap: 4px !important;
                color: #5b2eea !important;
                text-align: right !important;
            }

            body.rn-account-body .gx-weekly-mobile h2 {
                margin: 0 !important;
                color: #6d35f4 !important;
                font-size: 17px !important;
                line-height: 1 !important;
                font-weight: 800 !important;
                white-space: nowrap !important;
            }

            body.rn-account-body .gx-weekly-mobile p {
                margin: 0 !important;
                color: #334166 !important;
                font-size: 9px !important;
                line-height: 1.35 !important;
                font-weight: 700 !important;
            }

            body.rn-account-body .gx-weekly-mobile a {
                min-width: 74px !important;
                height: 24px !important;
                padding: 0 11px !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                border-radius: 999px !important;
                background: #6d35f4 !important;
                color: #fff !important;
                -webkit-text-fill-color: #fff !important;
                font-size: 8px !important;
                font-weight: 800 !important;
                text-decoration: none !important;
            }

            body.rn-account-body .gx-dash-main::before {
                display: none !important;
                content: none !important;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        (() => {
            const runtimeStyle = document.createElement('style');
            runtimeStyle.textContent = `
                @media (max-width: 760px) {
                    body.rn-account-body .gx-dash-main::before {
                        display: none !important;
                        content: none !important;
                        width: 0 !important;
                        height: 0 !important;
                        min-height: 0 !important;
                        margin: 0 !important;
                        padding: 0 !important;
                        overflow: hidden !important;
                    }
                    html body.rn-account-body .gx-dashboard .gx-dash-main.no-weekly-pseudo::before {
                        display: none !important;
                        content: "" !important;
                        width: 0 !important;
                        height: 0 !important;
                        min-height: 0 !important;
                        margin: 0 !important;
                        padding: 0 !important;
                        overflow: hidden !important;
                    }
                    body.rn-account-body .gx-mobile-greeting h1,
                    body.rn-account-body .gx-mobile-greeting p,
                    body.rn-account-body .gx-dash-stats > article > span,
                    body.rn-account-body .gx-dash-stats > article > strong,
                    body.rn-account-body .gx-dash-stats > article > small,
                    body.rn-account-body .gx-dash-stats > article > a {
                        -webkit-text-fill-color: currentColor !important;
                        text-shadow: none !important;
                    }
                }
            `;
            document.head.appendChild(runtimeStyle);

            const set = (el, rules) => {
                if (!el) return;
                Object.entries(rules).forEach(([prop, value]) => {
                    const cssProp = prop.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
                    el.style.setProperty(cssProp, value, 'important');
                });
            };

            const lockAccountMobile = () => {
                if (!window.matchMedia('(max-width: 760px)').matches) return;

                set(document.querySelector('.kd-mobile-head'), { height: '190px', display: 'block', padding: '0', margin: '0' });
                set(document.querySelector('.kd-balance-pill'), { width: '136px', height: '66px', overflow: 'hidden' });
                set(document.querySelector('.kd-balance-pill span'), { fontSize: '10px', lineHeight: '1', left: '13px', right: 'auto', top: '11px', textAlign: 'left' });
                set(document.querySelector('.kd-balance-pill strong'), { fontSize: '14px', lineHeight: '1', left: '13px', right: 'auto', bottom: '12px', maxWidth: '82px', overflow: 'hidden', direction: 'ltr', textAlign: 'left' });
                set(document.querySelector('.kd-balance-pill b'), { width: '38px', height: '38px', right: '10px', left: 'auto', top: '13px', fontSize: '22px' });
                set(document.querySelector('.gx-mobile-greeting'), { margin: '-90px 0 10px', minHeight: '64px' });
                set(document.querySelector('.gx-mobile-greeting'), { position: 'relative', zIndex: '30', color: '#07143d', justifyContent: 'flex-start' });
                set(document.querySelector('.gx-mobile-greeting h1'), { fontSize: '20px', lineHeight: '1.2', whiteSpace: 'nowrap', color: '#07143d', webkitTextFillColor: '#07143d' });
                set(document.querySelector('.gx-mobile-greeting p'), { fontSize: '10.5px', lineHeight: '1.45', color: '#73809b', webkitTextFillColor: '#73809b' });
                set(document.querySelector('.gx-dash-welcome'), { height: '150px', minHeight: '150px', maxHeight: '150px', padding: '0', margin: '0', display: 'block', overflow: 'hidden' });
                set(document.querySelector('.gx-dash-welcome img'), { width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'left center', position: 'absolute', inset: '0' });
                set(document.querySelector('.gx-mobile-hero-copy'), { top: '20px', right: '12px', width: '51%' });
                set(document.querySelector('.gx-mobile-hero-copy h2'), { fontSize: '14px', lineHeight: '1.12', margin: '0 0 5px', whiteSpace: 'nowrap' });
                set(document.querySelector('.gx-mobile-hero-copy h2 strong'), { display: 'block', fontSize: '23px', lineHeight: '1', marginTop: '3px' });
                set(document.querySelector('.gx-mobile-hero-copy p'), { fontSize: '8px', lineHeight: '1.45', margin: '0 0 7px' });
                set(document.querySelector('.gx-mobile-hero-copy a'), { width: '112px', height: '29px', minHeight: '29px', fontSize: '9.5px' });
                set(document.querySelector('.gx-dash-stats'), { display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: '8px', width: '100%', margin: '0' });
                document.querySelectorAll('.gx-dash-stats > article').forEach((card) => {
                    set(card, { height: '110px', minHeight: '110px', width: 'auto', minWidth: '0', display: 'grid', gridTemplateColumns: '1fr', gridTemplateRows: '34px 15px 18px 9px 16px', padding: '9px 3px 8px', gap: '2px', overflow: 'hidden', textAlign: 'center', placeItems: 'center' });
                    set(card.querySelector('i'), { width: '34px', height: '34px', margin: '0', borderRadius: '13px' });
                    card.querySelectorAll('span, small, a').forEach((el) => set(el, { fontSize: '8px', lineHeight: '1', margin: '0', padding: '0', whiteSpace: 'nowrap', fontWeight: '800', textAlign: 'center', webkitTextFillColor: 'currentColor' }));
                    set(card.querySelector('strong'), { fontSize: '13px', lineHeight: '1', margin: '0', whiteSpace: 'nowrap', fontWeight: '800', maxWidth: '100%', overflow: 'visible', direction: 'ltr', textAlign: 'center', webkitTextFillColor: 'currentColor' });
                });
                set(document.querySelector('.gx-dash-rail'), { display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: '10px', width: '100%', margin: '0' });
                document.querySelectorAll('.gx-wallet-card, .gx-invite-card').forEach((card) => {
                    set(card, { height: '96px', minHeight: '96px', overflow: 'hidden', position: 'relative' });
                    set(card.querySelector('img'), { width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', position: 'absolute', inset: '0' });
                    set(card.querySelector('div'), { width: '55%', padding: '10px', gap: '3px', alignContent: 'center' });
                    set(card.querySelector('h2'), { fontSize: '14px', lineHeight: '1', margin: '0', whiteSpace: 'nowrap' });
                    card.querySelectorAll('span, strong, p').forEach((el) => set(el, { fontSize: '8px', lineHeight: '1.35', margin: '0', fontWeight: '700' }));
                    set(card.querySelector('a'), { height: '23px', minHeight: '23px', padding: '0 10px', fontSize: '8px', margin: '2px 0 0' });
                });
                document.querySelector('.gx-dash-main')?.classList.add('no-weekly-pseudo');
                set(document.querySelector('.gx-weekly-mobile'), { display: 'block', height: '98px', minHeight: '98px', position: 'relative', overflow: 'hidden' });
                set(document.querySelector('.gx-weekly-mobile img'), { position: 'absolute', inset: '0', width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center' });
                set(document.querySelector('.gx-weekly-mobile h2'), { fontSize: '17px', lineHeight: '1', margin: '0', color: '#6d35f4', whiteSpace: 'nowrap' });
                set(document.querySelector('.gx-weekly-mobile p'), { fontSize: '9px', lineHeight: '1.35', margin: '0', color: '#334166' });
                set(document.querySelector('.gx-weekly-mobile a'), { height: '24px', minHeight: '24px', fontSize: '8px', padding: '0 11px' });
                set(document.querySelector('.gx-dash-main'), { display: 'grid', gridTemplateColumns: '1fr', gap: '12px', width: '100%' });
                set(document.querySelector('.kd-bottom-nav'), { display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 1fr))', height: '72px', left: 'max(16px, calc((100vw - 398px) / 2))', right: 'max(16px, calc((100vw - 398px) / 2))', bottom: '10px', width: 'auto', position: 'fixed' });
                document.querySelectorAll('.kd-bottom-nav a').forEach((item) => {
                    set(item, { display: 'grid', gridTemplateRows: '28px 16px', justifyItems: 'center', alignContent: 'center', gap: '2px', minWidth: '0', width: '100%', height: '58px', position: 'relative', inset: 'auto', transform: 'none' });
                    set(item.querySelector('svg'), { width: '23px', height: '23px' });
                    set(item.querySelector('span'), { fontSize: '10px', lineHeight: '1', margin: '0', whiteSpace: 'nowrap' });
                });
                set(document.querySelector('.kd-bottom-nav .kd-charge-now'), { width: '64px', height: '64px', borderRadius: '50%', margin: '-22px auto 0', gridTemplateRows: '34px 16px' });
            };

            lockAccountMobile();
            window.addEventListener('resize', lockAccountMobile, { passive: true });
        })();
    </script>
@endpush
--}}