<!DOCTYPE html>
	{% for lang in site['languages'] %}
		{% if lang['active'] %}
			<html lang="{{ lang['code'] }}">
			{% endif %}
		{% endfor %}

		<head>
			<base href="{{ site['url'] }}">


			<title>
				{% if pagetitle %}
					{{ pagetitle }}
				{% else %}
					{{ title }}
				{% endif %}
			</title>
			<meta property="og:title" content="{% if pagetitle %} {{ pagetitle }} {% else %} {{ title }} {% endif %}" />
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- Eternity Theme Assets -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/cj7gone/eternity/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="{% if pagekeywords %} {{ pagekeywords }} {% else %} {{ site['keywords'] }} {% endif %}">
<meta name="description" content="{% if pagedescription %} {{ pagedescription }} {% else %} {{ site['description'] }} {% endif %}">
<meta property="og:description" content="{% if pagedescription %} {{ pagedescription }} {% else %} {{ site['description'] }} {% endif %}" />
<meta name="google-site-verification" content="{{ site['google_verification'] }}" />
			
{% if site['meta_logo'] %}
        <meta property="og:image" itemprop="image" content="{{ site['meta_logo'] }}">
    {% endif %}			
{% if site['favicon'] %}
    <link rel="shortcut icon" type="image/ico" href="{{ site['favicon'] }}"/>
    <link rel="icon" type="image/png" sizes="192x192" href="{{ site['favicon'] }}"/>
    <link rel="icon" type="image/png" sizes="512x512" href="{{ site['favicon'] }}"/>
    <link rel="icon" type="image/png" sizes="32x32" href="{{ site['favicon'] }}"/>
    <link rel="icon" type="image/png" sizes="16x16" href="{{ site['favicon'] }}"/>
    <link rel="apple-touch-icon" href="{{ site['favicon'] }}"/>
{% endif %}


	<link rel="stylesheet" type="text/css" href="{{ site["url"] }}/assets/cj7/custom.css">
		<!-- Bootstrap (Local Backup) -->
        <link rel="stylesheet" type="text/css" href="{{ site["url"] }}/assets/cj7gone/eternity/bootstrap.css">
        <!-- New Eternity Theme CSS -->
		<link rel="stylesheet" type="text/css" href="{{ site["url"] }}/assets/cj7gone/eternity/style.css">
        
        <script>
            // Set theme attribute for CSS variables
            document.documentElement.setAttribute('data-theme', '{{ settings["site_theme_alt"] }}');
        </script>
		<style>
	    
	    .particle-snow{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;pointer-events:none}.particle-snow canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none}.christmas-garland{text-align:center;white-space:nowrap;overflow:hidden;position:absolute;z-index:1;padding:0;pointer-events:none;width:100%;height:85px}.christmas-garland .christmas-garland__item{position:relative;width:28px;height:28px;border-radius:50%;display:inline-block;margin-left:20px}.christmas-garland .christmas-garland__item .shape{-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:flash-1;animation-name:flash-1;-webkit-animation-duration:2s;animation-duration:2s}.christmas-garland .christmas-garland__item .apple{width:22px;height:22px;border-radius:50%;margin-left:auto;margin-right:auto;margin-top:8px}.christmas-garland .christmas-garland__item .pear{width:12px;height:28px;border-radius:50%;margin-left:auto;margin-right:auto;margin-top:6px}.christmas-garland .christmas-garland__item:nth-child(2n+1) .shape{-webkit-animation-name:flash-2;animation-name:flash-2;-webkit-animation-duration:.4s;animation-duration:.4s}.christmas-garland .christmas-garland__item:nth-child(4n+2) .shape{-webkit-animation-name:flash-3;animation-name:flash-3;-webkit-animation-duration:1.1s;animation-duration:1.1s}.christmas-garland .christmas-garland__item:nth-child(odd) .shape{-webkit-animation-duration:1.8s;animation-duration:1.8s}.christmas-garland .christmas-garland__item:nth-child(3n+1) .shape{-webkit-animation-duration:1.4s;animation-duration:1.4s}.christmas-garland .christmas-garland__item:before{content:"";position:absolute;background:#222;width:10px;height:10px;border-radius:3px;top:-1px;left:9px}.christmas-garland .christmas-garland__item:after{content:"";top:-9px;left:14px;position:absolute;width:52px;height:18px;border-bottom:solid #222 2px;border-radius:50%}.christmas-garland .christmas-garland__item:last-child:after{content:none}.christmas-garland .christmas-garland__item:first-child{margin-left:-40px}

	    
	</style>
		<style>
	    
	    .particle-snow{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;pointer-events:none}.particle-snow canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none}.christmas-garland{text-align:center;white-space:nowrap;overflow:hidden;position:absolute;z-index:1;padding:0;pointer-events:none;width:100%;height:85px}.christmas-garland .christmas-garland__item{position:relative;width:28px;height:28px;border-radius:50%;display:inline-block;margin-left:20px}.christmas-garland .christmas-garland__item .shape{-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:flash-1;animation-name:flash-1;-webkit-animation-duration:2s;animation-duration:2s}.christmas-garland .christmas-garland__item .apple{width:22px;height:22px;border-radius:50%;margin-left:auto;margin-right:auto;margin-top:8px}.christmas-garland .christmas-garland__item .pear{width:12px;height:28px;border-radius:50%;margin-left:auto;margin-right:auto;margin-top:6px}.christmas-garland .christmas-garland__item:nth-child(2n+1) .shape{-webkit-animation-name:flash-2;animation-name:flash-2;-webkit-animation-duration:.4s;animation-duration:.4s}.christmas-garland .christmas-garland__item:nth-child(4n+2) .shape{-webkit-animation-name:flash-3;animation-name:flash-3;-webkit-animation-duration:1.1s;animation-duration:1.1s}.christmas-garland .christmas-garland__item:nth-child(odd) .shape{-webkit-animation-duration:1.8s;animation-duration:1.8s}.christmas-garland .christmas-garland__item:nth-child(3n+1) .shape{-webkit-animation-duration:1.4s;animation-duration:1.4s}.christmas-garland .christmas-garland__item:before{content:"";position:absolute;background:#222;width:10px;height:10px;border-radius:3px;top:-1px;left:9px}.christmas-garland .christmas-garland__item:after{content:"";top:-9px;left:14px;position:absolute;width:52px;height:18px;border-bottom:solid #222 2px;border-radius:50%}.christmas-garland .christmas-garland__item:last-child:after{content:none}.christmas-garland .christmas-garland__item:first-child{margin-left:-40px}

	    
	</style>
		{{ headerCode }}

	

<style>
    
    .component_balance_dropdown 
    .balance-dropdown__name{white-space:nowrap;display:flex;justify-content:space-between;align-items:center;color:rgba(233, 236, 6, 1);
    
</style>



		<style>
		
		
		
		
		
			#block_342 .navbar-collapse {
				padding-top: 0;
			}
			#block_342 .navbar-languages {
				margin-left: 24px;
				display: flex;
				align-items: center;
			}


			.body .navbar-dropdown {
				position: relative;
				display: inline-block;
				margin-top: 4px;
				padding-bottom: 4px;
				font-size: "";
			}

			.body .navbar-dropdown__name {
				white-space: nowrap;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #07264a;
				background: #ffffff;
				border-color: transparent;
				box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.2);
				border-style: solid;
				border-left-width: 1px;
				border-right-width: 1px;
				border-top-width: 1px;
				border-bottom-width: 1px;
				padding: 6px 12px;
				border-top-left-radius: 12px;
				border-top-right-radius: 12px;
				border-bottom-left-radius: 12px;
				border-bottom-right-radius: 12px;
				font-size: "";
				font-weight: 600;
				font-style: normal;
			}

			.body .navbar-dropdown__container {
				position: absolute;
				padding: 0;
				margin: 5px 0 0;
				top: 100%;
				background: #ffffff;
				min-width: 100%;
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;
				border-bottom-left-radius: 4px;
				border-bottom-right-radius: 4px;
				border-color: transparent;
				box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.2);
				border-style: solid;
				border-left-width: 0;
				border-right-width: 0;
				border-top-width: 0;
				border-bottom-width: 0;
			}

			.body .navbar-dropdown__link {
				display: block;
				width: 100%;
				text-decoration: none;
				font-size: 1em;
				color: #07264a;
				padding: 6px 12px;
			}

			.body .navbar-dropdown__item {
				list-style: none;
			}

			.body .navbar-dropdown__toggle:after {
				display: inline-block;
				content: '\f107';
				font-family: 'Font Awesome 5 Pro';
				margin-left: 12px;
			}

			.body-rtl {
				direction: rtl;
				text-align: inherit !important;
			}

			@media(max-width: 991px) {
				#block_342 .navbar-languages {
					margin-top: 20px;
					margin-left: 0;
				}
				.body .navbar-dropdown {
					width: 100%;
					margin-top: 0;
					padding-bottom: 0;
				}
				.body .navbar-dropdown__name {
					width: 100%;
				}
				.body .navbar-dropdown__container {
					position: relative;
					visibility: visible;
				}

			}


			{% if settings["site_theme_alt"] %}
                <!-- Theme styling handled by style.css -->
			{% else %}
				<style>
				#service_description,
				#service_avg_time {
					padding: 13px;
					border-radius: 10px;
					color: #fff;
					box-shadow: 1px 1px 1px #252427;
					background-color: #252427;
				}
				</style>
			{% endif %}
		</style>

	</head>
    <style>
	/* Global Red Gradient Background */
    body {
        background: linear-gradient(180deg, #1a0000 0%, #800000 100%) !important;
        min-height: 100vh;
        color: #fff;
    }

    /* Top Navbar Transparent Background */
    .navbar-expand-lg {
        background: transparent !important;
        box-shadow: none;
    }
    
    .navbar-brand img {
        max-height: 40px;
    }
    
    /* Adjust Wrapper to accommodate sidebar margin */
    .wrapper-sidebar-navbar {
        display: flex;
    }
    
    /* Top Bar Links */
    .component-navbar-nav-link {
        color: #fff !important;
    }
    
    /* Active Tab Style (Tabs on New Order Page) */
    .nav-tabs-custom {
        border-bottom: none;
        margin-bottom: 20px;
    }
    .nav-tabs-custom .nav-item {
        margin-right: 10px;
    }
    .nav-tabs-custom .nav-link {
        background: #fff;
        color: #333;
        border: none;
        border-radius: 8px;
        padding: 10px 20px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.2s;
    }
    .nav-tabs-custom .nav-link.active {
        background: #fff; /* Active is white */
        color: #000;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        transform: translateY(-2px);
    }
    
    .nav-tabs-custom .nav-link:not(.active) {
       background: rgba(255,255,255,0.1);
       color: #fff;
    }

    /* === HIDE DEFAULT SIDEBAR ON ALL SCREENS === */
    .component-sidebar_wrapper {
        display: none !important;
    }

    /* Remove sidebar spacing from wrapper */
    .wrapper-sidebar-navbar {
        padding-left: 0 !important;
        margin-left: 0 !important;
        display: block !important;
    }

    /* Ensure Header Alignment */
    .navbar-private__header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }

    .navbar-expand-lg {
        justify-content: space-between !important;
    }

    /* === HAMBURGER VISIBLE ON ALL SCREENS (mobile + desktop) === */
    .navbar-toggler {
        display: block !important;
        border: none !important;
        outline: none !important;
        padding: 8px;
        background: transparent !important;
    }

    /* Hide the default navbar-collapse on all screens */
    .navbar-collapse {
        display: none !important;
    }

    /* Nav Link Styling */
    .component-navbar-nav-link {
        color: rgba(255,255,255,0.7) !important;
        font-weight: 600;
        text-decoration: none !important;
    }

    /* === OFF-CANVAS DRAWER STYLES === */
    #mobile-menu-drawer {
        position: fixed;
        top: 0;
        right: -320px;
        width: 320px;
        height: 100vh;
        background: rgba(15, 15, 20, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 10000;
        transition: right 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
        box-shadow: -10px 0 30px rgba(0,0,0,0.5);
        display: flex;
        flex-direction: column;
        border-left: 1px solid rgba(255,255,255,0.1);
        overflow-y: auto;
    }

    #mobile-menu-drawer.open {
        right: 0;
    }

    .mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
        backdrop-filter: blur(5px);
        z-index: 9999;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .mobile-overlay.active {
        display: block;
        opacity: 1;
    }

    .drawer-content {
        padding: 20px;
        overflow-y: auto;
        height: 100%;
    }

    .drawer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .drawer-close-btn {
        background: none;
        border: none;
        color: #fff;
        font-size: 28px;
        cursor: pointer;
        padding: 5px;
        line-height: 1;
    }

    .drawer-menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .drawer-menu-item {
        margin-bottom: 8px;
    }

    .drawer-link {
        display: flex;
        align-items: center;
        padding: 10px 15px;
        color: rgba(255,255,255,0.85) !important;
        text-decoration: none !important;
        border-radius: 10px;
        transition: all 0.25s ease;
        font-weight: 500;
        background: rgba(255,255,255,0.03);
        outline: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    .drawer-link:hover {
        background: rgba(255,255,255,0.08);
        color: #fff !important;
        transform: translateX(5px);
        text-decoration: none !important;
    }

    .drawer-link.active {
        background: linear-gradient(135deg, rgba(255,0,0,0.8) 0%, rgba(204,0,0,0.8) 100%);
        color: #fff !important;
        transform: translateX(5px);
        box-shadow: 0 4px 15px rgba(255,0,0,0.2);
        text-decoration: none !important;
    }

    .drawer-icon {
        margin-right: 15px;
        font-size: 18px;
        width: 24px;
        text-align: center;
    }

    /* Colorful Drawer Icons */
    .drawer-menu-item:nth-child(1) .drawer-icon { color: #FFD700; }
    .drawer-menu-item:nth-child(2) .drawer-icon { color: #FFA500; }
    .drawer-menu-item:nth-child(3) .drawer-icon { color: #00BFFF; }
    .drawer-menu-item:nth-child(4) .drawer-icon { color: #FF69B4; }
    .drawer-menu-item:nth-child(5) .drawer-icon { color: #32CD32; }
    .drawer-menu-item:nth-child(6) .drawer-icon { color: #9370DB; }
    .drawer-menu-item:nth-child(7) .drawer-icon { color: #FF6347; }
    .drawer-menu-item:nth-child(8) .drawer-icon { color: #00CED1; }

    .drawer-account-section {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid rgba(255,255,255,0.1);
    }


          /* Glassmorphism for Dropdowns */
      .dropdown-menu, .balance-dropdown__container, .glass-dropdown, .navbar-dropdown__container {
          background: rgba(20, 20, 30, 0.65) !important;
          backdrop-filter: blur(16px) !important;
          -webkit-backdrop-filter: blur(16px) !important;
          border: 1px solid rgba(255, 255, 255, 0.08) !important;
          border-radius: 12px !important;
          box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
          padding: 8px !important;
      }

      /* Hamburger Menu Icons */
      .navbar-burger {
          width: 30px;
          height: 30px; /* Increased clickable area */
          position: relative;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .navbar-burger-line {
          width: 24px;
          height: 2px;
          background-color: #fff;
          position: relative;
          display: block;
          transition: all 0.3s;
      }

      .navbar-burger-line::before,
      .navbar-burger-line::after {
          content: '';
          width: 24px;
          height: 2px;
          background-color: #fff;
          position: absolute;
          left: 0;
          transition: all 0.3s;
      }

      .navbar-burger-line::before {
          top: -8px;
      }

      .navbar-burger-line::after {
          top: 8px;
      }

      /* Hover effect for items */
      .dropdown-item, .balance-dropdown__container li a {
          color: rgba(255, 255, 255, 0.9) !important;
          transition: all 0.3s ease;
          border-radius: 8px;
          margin-bottom: 2px;
      }

      .dropdown-item:hover, .balance-dropdown__container li a:hover {
          background: rgba(255, 255, 255, 0.1) !important;
          color: #fff !important;
          transform: translateX(5px);
      }
      
      /* Scrollbar for long dropdowns */
      .dropdown-menu::-webkit-scrollbar {
        width: 6px;
      }
      .dropdown-menu::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05); 
        border-radius: 10px;
      }
      .dropdown-menu::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2); 
        border-radius: 10px;
      }
      .dropdown-menu::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.3); 
      }
    </style>


	{% if user['auth'] %}
		<body class="body {{body_rtl}}">

			<div class="wrapper  wrapper-sidebar-navbar ">

				<div id="block_11" ="component_private_navbar">
					<span class="component_private_navbar ">
						<div class="component-navbar-private__wrapper component_private_sidebar">
							<div class="sidebar-block__top component-navbar component-navbar__navbar-private editor__component-wrapper">
								<div>
									<nav class="navbar navbar-expand-lg navbar-light">
										<div class="navbar-private__header">
											<div class="sidebar-block__top-brand">
												<div class="component-navbar-logo">
													<a href="/" target="_self" class="component-navbar-logo">
    													{% if site["logo"] %}
    														<img style="max-width:200px;" src="{{ site['logo'] }}" alt="{{ site['site_name'] }}">
    													{% else %}
    														{{ site["site_name"] }}
    													{% endif %}
													</a>
												</div>
											</div>
											<!-- Desktop Quick Links -->
											<div class="d-none d-lg-flex align-items-center mr-3" style="margin-left: auto;">
											   <a href="/services" style="color: rgba(255,255,255,0.8); text-decoration: none; margin-right: 20px; font-weight: 500; font-size: 14px; transition: color 0.3s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,0.8)'">Services</a>
											   <a href="/addfunds" class="btn btn-sm" style="background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%); color: #fff; border: none; border-radius: 20px; padding: 6px 20px; font-weight: 600; font-size: 13px; box-shadow: 0 4px 10px rgba(255,0,0,0.3);">Add Funds</a>
											</div>
											<button class="navbar-toggler" type="button" onclick="toggleDrawer()">
												<span class="navbar-burger">
													<span class="navbar-burger-line"></span>
												</span>
											</button>
										</div>
										<div class="navbar-collapse collapse" id="navbar-collapse-11" style="">
											<div class="component-navbar-collapse-divider"></div>
											<div class="d-flex component-navbar-collapse">
												<ul class="navbar-nav navbar-nav-sidebar-menu">



</ul>


{% if site_currency_converter == "1" %}
<ul class="navbar-nav navbar-nav-currencies">

												<div class="balance-dropdown-container component_balance_dropdown">
													<div class="balance-dropdown ">
														<div class="balance-dropdown__name balance-dropdown__toggle" data-toggle="dropdown" data-hover="dropdown" aria-expanded="false">{{ user["balance"] }}</div>
														<ul class="balance-dropdown__container dropdown-menu" id="currencies-list">
															{{ currencies_dropdown }}
														</ul>
													</div>
												</div>
											</ul>
										{% else %}

											<br>

										{% endif %}

										<ul class="navbar-nav">
											<li class="nav-item component-navbar-nav-item component-navbar-private-nav-item">
												<a class="component-navbar-nav-link  component-navbar-nav-link__navbar-private" href="/account">Account</a>
											</li>
											<li class="nav-item component-navbar-nav-item component-navbar-private-nav-item">
												<a class="component-navbar-nav-link  component-navbar-nav-link__navbar-private" href="/logout">Logout</a>
											</li>
										</ul>
									</div>
								</div>
							</nav>
						</div>
					</div>
				</div>
			</span>
			<span class="component_private_sidebar ">
				<div class="component-sidebar_wrapper">
					<div class="sidebar-block__left component-sidebar component-sidebar-with-navbar component_private_navbar editor__component-wrapper">
						<div class="component-sidebar__menu">
							<div class="component-sidebar__menu-logo">
								<a target="_self" style="color:#fff;">
									<span style="text-transform: uppercase">
										<span style="font-size: 24px">
											<span style="letter-spacing: 1.0px">
												<span style="line-height: 48px">
													<strong style="font-weight: bold">
														{% if site["logo"] %}
															<img style="max-width:200px;" src="{{ site['logo'] }}" alt="" title="">
														{% else %}
															<span style="text-transform: ">
																<span style="font-size: 24px">
																	<span style="letter-spacing: 1.0px">
																		<span>
																			<strong style="font-weight: bold">{{ site["site_name"] }}</strong>
																		</span>
																	</span>
																</span>
															</span>
														{% endif %}
													</strong>
												</span>
											</span>
										</span>
									</span>
								</a>
							</div>
							<ul class="sidebar-block__left-menu editor__component-wrapper">
            
     {% for menu in menus %}
            {% if menu['slug'] == "/tickets" %}
<li {% if active_menu == menu["active"] %} class="component-sidebar__menu-item component-sidebar__menu-item-active" {% endif %}>
<a class="component-sidebar__menu-item-link" href="{{menu["slug"]}} " >
<span class="sidebar-block__menu-item-icon">
            <span class="{{menu["icon"]}}"></span>
           </span>
              {{menu["name"]}} {% if ticketCount %} <span class="badge" style="background-color: #ffb500">{{ ticketCount }}</span></span>  {% endif %}
          </a>

            </li>
      {% elseif  menu['slug'] == "/refill" %}
{% if site["refillavailable"] %} 
<li {% if active_menu == menu["active"] %} class="component-sidebar__menu-item component-sidebar__menu-item-active" {% endif %}>
<a class="component-sidebar__menu-item-link" href="{{menu["slug"]}} " >
<span class="sidebar-block__menu-item-icon">
            <span class="{{menu["icon"]}}"></span>
           </span>
              {{menu["name"]}} 
          </a>
            </li>  {% endif %} 

{% else %} {% if menu["type"] == 2 %} <li {% if active_menu == menu["active"] %} class="component-sidebar__menu-item component-sidebar__menu-item-active" {% endif %}>
   <a class="component-sidebar__menu-item-link" href="{{menu["slug"]}} " >
<span class="sidebar-block__menu-item-icon">
            <span class="{{menu["icon"]}}"></span>
           </span>
              {{menu["name"]}} 
          </a>
 </li>{% endif %} {% endif %} {% endfor %} 
							</ul>
						</div>
					</div>
				</div>
			</span>
            <!-- Wrapper/Body continues -->
	</div>

    <!-- Off-Canvas Drawer (works on both mobile & desktop) -->
    <div class="mobile-overlay" onclick="toggleDrawer()"></div>
    <div id="mobile-menu-drawer">
        <div class="drawer-content">
            <div class="drawer-header" style="display:block; text-align:center; position:relative; border-bottom: none; padding-bottom: 0;">
                <button class="drawer-close-btn" onclick="toggleDrawer()" style="position:absolute; right:0; top:0;">&times;</button>
                
                <!-- Profile Section -->
                <div class="drawer-profile" style="margin-bottom: 20px; margin-top: 10px;">
                    <div style="width: 80px; height: 80px; background: linear-gradient(135deg, #ff0000 0%, #1a1a1a 100%); border-radius: 50%; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(0,0,0,0.5); border: 2px solid rgba(255,255,255,0.1);">
                        <i class="fas fa-user" style="font-size: 32px; color: #fff;"></i>
                    </div>
                    <div style="font-size: 18px; font-weight: 700; color: #fff; letter-spacing: 0.5px;">{{ user['username'] }}</div>
                </div>
            </div>

            <!-- Drawer Balance -->
            <div style="background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; margin-bottom: 25px; border: 1px solid rgba(255,255,255,0.1);">
                <div style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.6); margin-bottom: 5px;">Available Balance</div>
                <div style="font-size: 24px; font-weight: bold; color: #fff;">{{ user['balance'] }}</div>
            </div>
            
            <!-- Divider -->
            <div style="border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 20px;"></div>
            
            <ul class="drawer-menu-list">
                {% for menu in menus %}
                {% if menu["type"] == 2 %}
                <li class="drawer-menu-item">
                    <a href="{{menu['slug']}}" class="drawer-link {% if active_menu == menu['active'] %}active{% endif %}">
                        <span class="drawer-icon {{menu['icon']}}"></span>
                        {{menu['name']}}
                    </a>
                </li>
                {% endif %}
                {% endfor %}
            </ul>
            
            <div class="drawer-account-section">
                <ul class="drawer-menu-list">
                    <li class="drawer-menu-item">
                         <a href="/account" class="drawer-link">
                             <span class="drawer-icon fas fa-user-circle"></span>
                             Account
                         </a>
                    </li>
                    <li class="drawer-menu-item">
                         <a href="/logout" class="drawer-link" style="color: #ff6b6b !important;">
                             <span class="drawer-icon fas fa-power-off"></span>
                             Logout
                         </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <script>
    function toggleDrawer() {
        var drawer = document.getElementById('mobile-menu-drawer');
        var overlay = document.querySelector('.mobile-overlay');
        
        if (drawer.classList.contains('open')) {
            drawer.classList.remove('open');
            overlay.classList.remove('active');
        } else {
            drawer.classList.add('open');
            overlay.classList.add('active');
        }
    }
    </script>

{% else %}
	<body class="body {{body_rtl}}">
		<div class="wrapper  wrapper-navbar ">
			<div id="block_342">
				<div class="block-wrapper">
					<div class="component_navbar ">
						<div class="component-navbar__wrapper">
							<div class="sidebar-block__top component-navbar component-navbar__navbar-public sommerce-editor__component-wrapper">
								<div class="container">
									<nav class="navbar navbar-expand-lg navbar-light">
										<div class="sidebar-block__top-brand">
											<div class="component-navbar-brand component-navbar-public-brand">
												<a href="/" target="_self" class="component-navbar-logo">
    												{% if site["logo"] %}
    													<img style="max-width:200px;" src="{{ site['logo'] }}" alt="{{ site['site_name'] }}">
    												{% else %}
    													{{ site["site_name"] }}
    												{% endif %}
												</a>
											</div>
										</div>
										<button class="navbar-toggler" type="button" onclick="document.getElementById('navbar-collapse-342').classList.toggle('show')">
											<span class="navbar-burger">
												<span class="navbar-burger-line"></span>
											</span>
										</button>
										<div class="collapse navbar-collapse" id="navbar-collapse-342">
											<div class="navbar-languages component_navbar_dropdown">
												<div class="navbar-dropdown">
													<div class="navbar-dropdown__name navbar-dropdown__toggle" data-toggle="dropdown" data-hover="dropdown" aria-expanded="false">{{site["active_lang"]}}</div>
													<ul class="navbar-dropdown__container dropdown-menu">
													{% for language in site["languages"] %}
																				{% if language["active"] != 1 %}
														<li class="navbar-dropdown__item">
															<a href="?lang={{ language["code"] }}" class="navbar-dropdown__link">{{ language["name"] }}</a>
														</li>
														{% endif %}
																			{% endfor %}
													</ul>
												</div>
											</div>
											<div class="d-lg-flex component-navbar-collapse flex-wrap">

        <ul class="navbar-nav">
      {% for menu in menus %} <li class="nav-item component-navbar-nav-item component-navbar-private-nav-item">
<a class="component-navbar-nav-link  component-navbar-nav-link__navbar-private 
{% if active_menu == menu["active"] %} component-navbar-nav-link-active__navbar-private  {% endif %} "     href=" {{menu["slug"]}}" >
      <span class="component-navbar-nav-link-icon">
     <span class="{{menu["icon"]}}"></span>
   </span>
 {{menu["name"]}}
            </a>
           </li>{% endfor %} 
												</ul>


											</div>
										</nav>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
                <!-- Wrapper remains OPEN for content -->
		{% endif %}


