<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}" translate="no">

@php
    $rtlLanguages = !empty($generalSettings['rtl_languages']) ? $generalSettings['rtl_languages'] : [];

    $isRtl = (in_array(mb_strtoupper(app()->getLocale()), $rtlLanguages) or !empty($generalSettings['rtl_layout']) and $generalSettings['rtl_layout'] == 1);
@endphp

<head>
    @include('web.default.includes.metas')

    <!-- General CSS File -->
    <link rel="stylesheet" href="/assets/default/vendors/sweetalert2/dist/sweetalert2.min.css">
    <link rel="stylesheet" href="/assets/default/css/advertising-modal.css?v=20260522">
    <link rel="stylesheet" href="/assets/default/vendors/toast/jquery.toast.min.css">
    <link rel="stylesheet" href="/assets/default/vendors/simplebar/simplebar.css">
    <link rel="stylesheet" href="/assets/default/css/app.css">
    @if (session('dark'))
        <link rel="stylesheet" href="/assets/default/css/dark.css">
    @endif

{{-- خطوط محدودة الوزن (بدل المحور الكامل Cairo 200–1000): تنزيل أوفر أخف؛ 800–900 لمكوّنات تستخدم وزن أسود في التصميم --}}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&family=Playfair+Display:wght@400;700&display=swap">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
<noscript><link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet"></noscript>

    @if ($isRtl)
        <link rel="stylesheet" href="/assets/default/css/rtl-app.css">
    @endif

    @stack('styles_top')
    @stack('scripts_top')

    <style>
        {!! !empty(getCustomCssAndJs('css')) ? getCustomCssAndJs('css') : '' !!} {!! getThemeFontsSettings() !!} {!! getThemeColorsSettings() !!}
    </style>


    @if (!empty($generalSettings['preloading']) and $generalSettings['preloading'] == '1')
        @include('admin.includes.preloading')
    @endif

    <style>


        a.whatsapp-que:hover {
            opacity: 1;
        }

        a.whatsapp-que {
            position: fixed;
            bottom: 40px;
            right: 40px;
            width: 60px;
            height: 60px;
            background-color: #25d366;
            color: white;
            border-radius: 50px;
            text-align: center;
            font-size: 35px;
            cursor: pointer;
            z-index: 11;
            opacity: 1;
        }

        a.whatsapp-que:after {
            animation-delay: .5s !important;
        }

        a.whatsapp-que svg {
            fill: #fff;
            font-size: 45px;
            width: 40px;
            margin-top: 7px;
            right: 0px;
            transition: transform 0.2s ease 0s;
        }

        a.whatsapp-que:before,
        a.whatsapp-que:after {
            content: '';
            display: block;
            position: absolute;
            border: 50%;
            border: 1px solid #58ea00;
            left: -20px;
            right: -20px;
            top: -20px;
            bottom: -20px;
            border-radius: 50%;
            animation: animate 1.5s linear infinite;
            opacity: 0;
        }

        .course-description p img {
            width: 100% !important;
        }

        @keyframes animate {
            0% {
                transform: scale(0.5);
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                transform: scale(1.2);
                opacity: 0;
            }
        }

        .rtl .navbar-search .search-icon {
    right: auto;
    left: 10px;
}

.navbar-search .search-icon {
    right: 10px;
    left: auto;
}

.navbar-search .search-icon {
    position: absolute;
    right: 10px;
    color: #818894;
}

.navbar-search input {
     border: 1px solid rgba(168, 168, 168, 0.42);
    border-radius: 40px !important;
}

@media (min-width: 991px) {
    .menu-category>ul>li {
    background-color: transparent;

}
}

.navbar.sticky {

    left: 0;
    right: 0;

}




.footer {

    padding-bottom: 1.35em;
}

.footer .footer-logo {

    width: auto;
    height: auto;
}



/*@font-face {
    font-family: ArabicFont;
    src: url('{{asset('assets/A GOOGLE Regular.ttf')}}');
}

body.rtl {
    font-family:ArabicFont !important;
}*/

#navbar .dropdown-menu {
        right:auto;
    }

    @media (min-width: 1400px) {
        .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1320px;
}
    }

    /* خلفية الصفحة: لا تُلغِ ثيم premium (كان transparent يُزيل الكريم) */
    body {
        background-color: var(--cream, #FAF7F2);
    }

.swiper-pagination {
    bottom: -20px;
}

body.dark navbar-nav li  a,
body.dark navbar-nav li,
body.dark .menu-category ul li {
    color:#fff;
}

@media (min-width: 991px) {
    .menu-category>ul>li {

    padding: 12px 10px 12px 10px;
}
}

.webinar-card .image-box {
    height: auto;
}

.webinar-card .image-box .badge {

    font-size: 10px;
    line-height: 1;
}

@media only screen and (min-width: 768px) {
    .dropdown-menu {
    min-width:450px;
}

}

   .font-12 {
    font-size: inherit;
    line-height:2.2;
}
    </style>
       @if ($isRtl)
       <style>
           body.rtl,h1,h2,h3,h4,h5,h6,.course-description,.course-description p span {
         font-family: "Cairo", sans-serif !important;
    }
       </style>

    @endif

    {{-- بعد إعدادات الثيم والـ inline: إعادة تطبيق طبقة التصميم الرئيسية --}}
    @if (request()->is('/'))
        <style>
            body.is-home-page{margin:0;background:#faf8f5;color:#0f2044;font-family:"Cairo",sans-serif}
            #navbar.navbar--premium-home{position:relative;z-index:1001;background:rgba(255,255,255,.97)}
            .premium-hero-cinematic,.premium-hero-banner-mock{min-height:min(72vh,780px)}
            #page-premium-loader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#faf8f5}
            #page-premium-loader.is-done{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease}
            .premium-hero-mock-photo,.premium-hero-main-photo{max-width:100%;height:auto;display:block}
        </style>
        <link rel="preload" as="style" href="{{ asset('assets/default/css/premium-redesign.css') }}?v=20260612f">
        <link rel="stylesheet" href="{{ asset('assets/default/css/premium-redesign.css') }}?v=20260612f" media="print" onload="this.media='all'">
        <noscript><link rel="stylesheet" href="{{ asset('assets/default/css/premium-redesign.css') }}?v=20260612f"></noscript>
    @else
        <link rel="stylesheet" href="{{ asset('assets/default/css/premium-redesign.css') }}?v=20260612f">
    @endif

    {{-- صفحات داخلية قد تضيف @section('styles') — يجب أن يأتي shell بعدها حتى لا يُلغى التصميم --}}
    @yield('styles')

    @if (!request()->is('/'))
        <link rel="stylesheet" href="{{ asset('assets/default/css/premium-inner-shell.css') }}?v=20260211b">
    @endif
    @php
        // Robust path matching: Laravel request()->is('products/*') misses locale prefixes (e.g. ar/products).
        // Exclude panel/admin so /panel/store/products does not pull storefront catalog CSS.
        $pathFirst = request()->segment(1);
        $pathSecond = request()->segment(2);
        $outsidePanelAdmin = ! in_array($pathFirst, ['panel', 'admin', 'api'], true);
        $isProductsCanonical = $outsidePanelAdmin && $pathFirst === 'products';
        $isLocaleProducts = $outsidePanelAdmin
            && $pathSecond === 'products'
            && strlen((string) $pathFirst) === 2
            && ctype_alpha((string) $pathFirst);
        $loadImtProductsCatalog = request()->is('reward-products')
            || $isProductsCanonical
            || $isLocaleProducts;
    @endphp
    @if ($loadImtProductsCatalog)
        <link rel="stylesheet" href="{{ asset('assets/default/css/premium-products-catalog.css') }}?v=20260610a">
    @endif

    @include('web.default.includes.meta_pixel')
</head>

<body class="@if ($isRtl) rtl @endif @if (session('dark')) dark @endif @if (request()->is('/')) is-home-page @else premium-inner-site @endif">

    {{-- Fixed layers (z-index 0): negative z-index on body::before/after is unreliable behind #app / root paint --}}
    <div class="premium-pupil-bg premium-pupil-bg--aurora" aria-hidden="true"></div>
    <div class="premium-pupil-bg premium-pupil-bg--mesh" aria-hidden="true"></div>
    <div class="premium-pupil-bg premium-pupil-bg--speckles" aria-hidden="true"></div>

    {{-- Enhanced Background Layers v2 --}}
    <div class="premium-pupil-bg premium-pupil-bg--grid" aria-hidden="true"></div>

    <div class="premium-pupil-bg premium-pupil-bg--orbs" aria-hidden="true">
        <div class="orb orb-1"></div>
        <div class="orb orb-2"></div>
        <div class="orb orb-3"></div>
        <div class="orb orb-4"></div>
        <div class="orb orb-5"></div>
    </div>

    <div class="premium-pupil-bg premium-pupil-bg--glitter" aria-hidden="true">
        <div class="glitter-particle"></div>
        <div class="glitter-particle"></div>
        <div class="glitter-particle"></div>
        <div class="glitter-particle"></div>
        <div class="glitter-particle"></div>
        <div class="glitter-particle"></div>
        <div class="glitter-particle"></div>
        <div class="glitter-particle"></div>
        <div class="glitter-particle"></div>
        <div class="glitter-particle"></div>
        <div class="glitter-particle"></div>
        <div class="glitter-particle"></div>
    </div>

    <div id="page-premium-loader" role="status" aria-live="polite" aria-busy="true">
        <span class="sr-only">Loading</span>
        <div class="loader-orbit-wrap">
            <div class="loader-orbit" aria-hidden="true"></div>
            <div class="loader-orbit-inner" aria-hidden="true"></div>
            <div class="loader-orbit-dot" aria-hidden="true"></div>
        </div>
    </div>

    <div class="bubbles-container" aria-hidden="true">
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
    </div>

    {{-- طبقات الخلفية نفس الرئيسية لكل صفحات الواجهة العامة --}}
    <div class="premium-home-bg-accent" aria-hidden="true">
        <span class="premium-home-bg-accent__layer premium-home-bg-accent__layer--a"></span>
        <span class="premium-home-bg-accent__layer premium-home-bg-accent__layer--b"></span>
        <span class="premium-home-bg-accent__layer premium-home-bg-accent__layer--c"></span>
    </div>
    <div class="premium-montessori-float-layer" aria-hidden="true">
        <svg class="premium-montessori-float-layer__svg premium-montessori-float-layer__svg--rings" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <linearGradient id="pmf-gold" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" stop-color="rgba(87,134,199,0.14)"/>
                    <stop offset="100%" stop-color="rgba(87,134,199,0.04)"/>
                </linearGradient>
            </defs>
            <circle cx="300" cy="300" r="220" fill="none" stroke="url(#pmf-gold)" stroke-width="0.8"/>
            <circle cx="300" cy="300" r="180" fill="none" stroke="rgba(15,32,68,0.06)" stroke-width="0.6"/>
            <circle cx="300" cy="300" r="140" fill="none" stroke="rgba(87,134,199,0.1)" stroke-width="0.5"/>
        </svg>
        <svg class="premium-montessori-float-layer__svg premium-montessori-float-layer__svg--leaf" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg">
            <path fill="rgba(122,158,126,0.12)" d="M238 42c-62 8-112 48-130 108-6 20-8 40-6 60 2 18 18 32 36 32h4c40-2 78-22 104-52 28-34 40-78 32-124-2-12-12-22-24-24h-16z"/>
            <path fill="none" stroke="rgba(87,134,199,0.2)" stroke-width="1.2" d="M80 260c40-60 100-100 170-118"/>
        </svg>
    </div>

    <div id="app">

                @if (!isset($appHeader))
                    @include('web.default.includes.top_nav')
                    @include('web.default.includes.navbar')
                @endif

                {{--@if (!empty($justMobileApp))
                    @include('web.default.includes.mobile_app_top_nav')
                @endif--}}

                @if (!request()->is('/'))
                    <main id="premium-inner-main" class="premium-inner-main">
                        @yield('content')
                    </main>
                @else
                    @yield('content')
                @endif

                @if (!isset($appFooter))
                    @include('web.default.includes.footer-premium-home')
                @endif

                @include('web.default.includes.advertise_modal.index')


    </div>
    <!-- Template JS File -->
    <script src="/assets/default/js/app.js"></script>
    <script src="/assets/default/vendors/feather-icons/dist/feather.min.js" defer></script>
    <script src="/assets/default/vendors/moment.min.js" defer></script>
    <script src="/assets/default/vendors/sweetalert2/dist/sweetalert2.min.js"></script>
    <script src="/assets/default/vendors/toast/jquery.toast.min.js"></script>
    <script type="text/javascript" src="/assets/default/vendors/simplebar/simplebar.min.js" defer></script>
    @php
        $needsWebinarShowJs = request()->is('course/*', 'bundles/*', 'bundle/*')
            || (strlen((string) request()->segment(1)) === 2 && in_array(request()->segment(2), ['course', 'bundles', 'bundle'], true));
    @endphp
    @if ($needsWebinarShowJs)
        <script src="/assets/default/js/parts/webinar_show.min.js" defer></script>
    @endif
    @if (empty($justMobileApp) and checkShowCookieSecurityDialog())
        @include('web.default.includes.cookie-security')
    @endif


    <script>
        var deleteAlertTitle = '{{ trans('public.are_you_sure') }}';
        var deleteAlertHint = '{{ trans('public.deleteAlertHint') }}';
        var deleteAlertConfirm = '{{ trans('public.deleteAlertConfirm') }}';
        var deleteAlertCancel = '{{ trans('public.cancel') }}';
        var deleteAlertSuccess = '{{ trans('public.success') }}';
        var deleteAlertFail = '{{ trans('public.fail') }}';
        var deleteAlertFailHint = '{{ trans('public.deleteAlertFailHint') }}';
        var deleteAlertSuccessHint = '{{ trans('public.deleteAlertSuccessHint') }}';
        var forbiddenRequestToastTitleLang = '{{ trans('public.forbidden_request_toast_lang') }}';
        var forbiddenRequestToastMsgLang = '{{ trans('public.forbidden_request_toast_msg_lang') }}';
    </script>

    @if (session()->has('toast'))
        <script>
            (function() {
                "use strict";

                var toastData = @json(session()->get('toast'));

                $.toast({
                    heading: toastData.title || '',
                    text: toastData.msg || '',
                    bgColor: toastData.status === 'success' ? '#43d477' : '#f63c3c',
                    textColor: 'white',
                    hideAfter: 12000,
                    position: 'bottom-right',
                    icon: toastData.status || 'error'
                });
            })(jQuery)
        </script>
    @endif

    @stack('styles_bottom')


    <script src="/assets/default/js/parts/cart-navbar.js" defer></script>
    <script src="/assets/default/js/parts/main.min.js" defer></script>
    <script src="/assets/default/js/premium-layout.js" defer></script>
    <script src="/assets/default/js/montessori-reveal.js" defer></script>
    @if (request()->is('/'))
        <script src="/assets/default/js/premium-home-experience.js" defer></script>
    @endif

    <script>
        window.addEventListener('load', function () {
            var loader = document.getElementById('page-premium-loader');
            if (loader) {
                loader.classList.add('is-done');
                loader.setAttribute('aria-busy', 'false');
            }
        });
    </script>

    <script>
        @if (session()->has('registration_package_limited'))
            (function() {
                "use strict";

                handleLimitedAccountModal('{!! session()->get('registration_package_limited') !!}')
            })(jQuery)

            {{ session()->forget('registration_package_limited') }}
        @endif

        {!! !empty(getCustomCssAndJs('js')) ? getCustomCssAndJs('js') : '' !!}
    </script>
    <!-- Twitter conversion tracking base code -->
    <script>
        ! function(e, t, n, s, u, a) {
            e.twq || (s = e.twq = function() {
                    s.exe ? s.exe.apply(s, arguments) : s.queue.push(arguments);
                }, s.version = '1.1', s.queue = [], u = t.createElement(n), u.async = !0, u.src = 'https://static.ads-twitter.com/uwt.js',
                a = t.getElementsByTagName(n)[0], a.parentNode.insertBefore(u, a))
        }(window, document, 'script');
        twq('config', 'o4mye');
    </script>
    <!-- End Twitter conversion tracking base code -->
    <!-- Snap Pixel Code -->
    <script type='text/javascript'>
        (function(e, t, n) {
            if (e.snaptr) return;
            var a = e.snaptr = function() {
                a.handleRequest ? a.handleRequest.apply(a, arguments) : a.queue.push(arguments)
            };
            a.queue = [];
            var s = 'script';
            r = t.createElement(s);
            r.async = !0;
            r.src = n;
            var u = t.getElementsByTagName(s)[0];
            u.parentNode.insertBefore(r, u);
        })(window, document,
            'https://sc-static.net/scevent.min.js');

        @if (isset(auth()->user()->email))
            snaptr('init', '87454b3f-838b-42cd-b519-87a1f80c2261', {
                'user_email': '{{ auth()->user()->email }}'
            });
        @endif

        snaptr('track', 'PAGE_VIEW');
    </script>
    <script defer src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5171026641258326" crossorigin="anonymous"></script>
     @stack('scripts_bottom')

    <!-- End Snap Pixel Code -->
</body>

</html>
