<!doctype html>
<html lang="en">
<head>
    <meta charset="{$charset}" />
    {if !empty($cloudx_theme_settings.fav_icon)}
        <link rel="shortcut icon" href="{$cloudx_theme_settings.fav_icon}" type="image/x-icon">
        <link rel="icon" href="{$cloudx_theme_settings.fav_icon}" type="image/x-icon">
    {/if}
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>
		{if $kbarticle.title}{$kbarticle.title} - {/if}{$pagetitle} - {$companyname}
	</title>	
    {include file="$template/includes/head.tpl"}
    {$headoutput}
</head>
<body class="primary-bg-color body-cloudx {if $templatefile == 'clientregister'}cloudx-register-page{/if} {if $LANG.locale == 'ar_AR' || $LANG.locale == 'fa_IR' || $LANG.locale == 'he_IL'} body-rtl {/if} {if $cloudx_theme_settings.enable_sticky_header eq 'on'} sticky-header-body{/if}" data-phone-cc-input="{$phoneNumberInputStyle}" style="background:var(gh-blue-dark);">
    {if $captcha}{$captcha->getMarkup()}{/if}
    {$headeroutput}
    {if $loggedin}
        <div class="header-topbar">
            <div class="container-fluid">
                <div class="right-topbar-content">
                    <div class="input-group active-client" role="group">
                        <div class="input-group-prepend d-none d-md-inline">
                            <span class="input-group-text">{lang key='loggedInAs'}:</span>
                        </div>
                        <div class="btn-group">
                            <a href="{$WEB_ROOT}/clientarea.php?action=details" class="btn btn-active-client">
                                <span>
                                    {if $client.companyname}
                                        {$client.companyname}
                                    {else}
                                        {$client.fullName}
                                    {/if}
                                </span>
                            </a>
                            <a href="{routePath('user-accounts')}" class="btn" data-toggle="tooltip" data-placement="bottom" title="Switch Account">
                                <i class="fad fa-random"></i>
                            </a>
                            {if $adminMasqueradingAsClient || $adminLoggedIn}
                                <a href="{$WEB_ROOT}/logout.php?returntoadmin=1" class="btn btn-return-to-admin" data-toggle="tooltip" data-placement="bottom" title="{if $adminMasqueradingAsClient}{lang key='adminmasqueradingasclient'} {lang key='logoutandreturntoadminarea'}{else}{lang key='adminloggedin'} {lang key='returntoadminarea'}{/if}">
                                    <i class="fas fa-redo-alt"></i>
                                    <span class="d-none d-md-inline-block">{lang key="admin.returnToAdmin"}</span>
                                </a>
                            {/if}
                        </div>
                    </div>
                    <div class="notification-client-right">
                        <button type="button" class="btn" data-toggle="popover" id="accountNotifications" data-placement="bottom">
                            <img src="{$WEB_ROOT}/templates/{$template}/images/notification-bell.svg" class="notification-drop-area{if count($clientAlerts) > 0} have-notification{/if}">
                            {if count($clientAlerts) > 0}
                                <span class="notification-count">{count($clientAlerts)}</span>
                            {else}
                                <span class="notification-count">0</span>
                            {/if}
                        </button>
                        <div id="accountNotificationsContent" class="w-hidden">
                            <ul class="client-alerts">
                            {foreach $clientAlerts as $alert}
                                <li>
                                    <a href="{$alert->getLink()}">
                                        <i class="fas fa-fw fa-{if $alert->getSeverity() == 'danger'}exclamation-circle{elseif $alert->getSeverity() == 'warning'}exclamation-triangle{elseif $alert->getSeverity() == 'info'}info-circle{else}check-circle{/if}"></i>
                                        <div class="message">{$alert->getMessage()}</div>
                                    </a>
                                </li>
                            {foreachelse}
                                <li class="none">
                                    {lang key='notificationsnone'}
                                </li>
                            {/foreach}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {/if}
<header class="{if $cloudx_theme_settings.navigation_layout_theme eq 'top'} top-header-active-theme{else} side-header-menu-active-theme{/if} {if $cloudx_theme_settings.enable_sticky_header eq 'on'}sticky-header-enabled{/if}" {if $cloudx_theme_settings.enable_sticky_header eq 'on'} id="header-top-sticky"{/if} style="background-color: var(--gh-blue-dark);">

        <div class="container">
            {if $cloudx_theme_settings.navigation_layout_theme eq 'top'}               
                <div class="top-nav-main-sec-header">
                    <div class="top-nav-mobile-toggle">
                        <div class="bar1"></div>
                        <div class="bar2"></div>
                        <div class="bar3"></div>
                    </div> 
                    <div class="nav-top-left-section">
                        <div class="nav-logo-section">
                            <a class="navbar-brand" href="{if $cloudx_theme_settings.header_logo_link neq ''}{$cloudx_theme_settings.header_logo_link}{else}{$systemurl}{/if}" {if $cloudx_theme_settings.header_logo_link_target eq 'on'}target="_blank"{/if}>
                                {if !empty($cloudx_theme_settings.header_logo)}
                                    <img src="{$cloudx_theme_settings.header_logo}" alt="{$companyname}" {if $cloudx_theme_settings.header_logo_height neq ''}height="{$cloudx_theme_settings.header_logo_height}"{/if} {if $cloudx_theme_settings.header_logo_width neq ''}width="{$cloudx_theme_settings.header_logo_width}" {/if}>
                                {else}
                                    <img src="{$WEB_ROOT}/templates/{$template}/images/Cloudxlogo.svg" alt="{$companyname}" {if $cloudx_theme_settings.header_logo_height neq ''}height="{$cloudx_theme_settings.header_logo_height}"{/if} {if $cloudx_theme_settings.header_logo_width neq ''}width="{$cloudx_theme_settings.header_logo_width}" {/if}>
                                {/if}
                            </a>
                        </div>
                        <div class="nav-primary-top-nav-section">
                            {include file="$template/includes/navbar.tpl" navbar=$primaryNavbar}
                            {if $languagechangeenabled && count($locales) > 1 || $currencies}
                                <ul class="view-currency-top-mobile-menu">
                                    <li class="lang-li-top-mobile">
                                        <button type="button" class="btn" data-toggle="modal" data-target="#modalChooseLanguage">
                                            <div class="d-inline-block align-middle">
                                                <div class="iti-flag {if $activeLocale.countryCode === '001'}us{else}{$activeLocale.countryCode|lower}{/if}"></div>
                                            </div>
                                            {$activeLocale.localisedName}
                                        </button>  
                                    </li>
                                </ul> 
                            {/if}
                        </div>
                    </div>
                    <div class="nav-top-right-section">
                        <ul class="right-sec-top-br">
                            <li class="single-side-rght">                                   
                                {if $languagechangeenabled && count($locales) > 1 || $currencies}
                                    
                                {/if}
                                {include file="$template/includes/navbar.tpl" navbar=$secondaryNavbar rightDrop=true}
                                <ul class="view-cart-top">
                                    <li class="nav-item ml-3">
                                        <a class="btn nav-link cart-btn" href="{$WEB_ROOT}/cart.php?a=view">
                                            <i class="fas fa-shopping-cart fa-fw" style="color: var(--gh-blue-dark);"></i>

                                            <span class="badge badge-info">{$cartitemcount}</span>
                                            <span class="sr-only">{lang key="carttitle"}</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>                
            {else}
                <nav class="navbar navbar-expand-md navbar-light">
                    <a class="bar-brand" href="javascript:void(0);"><i class="fal fa-bars"></i></a>
                    <a class="navbar-brand" href="{if $cloudx_theme_settings.header_logo_link neq ''}{$cloudx_theme_settings.header_logo_link}{else}{$systemurl}{/if}" {if $cloudx_theme_settings.header_logo_link_target eq 'on'}target="_blank"{/if}>
                        {if !empty($cloudx_theme_settings.header_logo)}
                            <img src="{$cloudx_theme_settings.header_logo}" alt="{$companyname}" {if $cloudx_theme_settings.header_logo_height neq ''}height="{$cloudx_theme_settings.header_logo_height}"{/if} {if $cloudx_theme_settings.header_logo_width neq ''}width="{$cloudx_theme_settings.header_logo_width}" {/if}>
                        {else}
                            <img src="{$WEB_ROOT}/templates/{$template}/images/Cloudxlogo.svg" alt="{$companyname}" {if $cloudx_theme_settings.header_logo_height neq ''}height="{$cloudx_theme_settings.header_logo_height}"{/if} {if $cloudx_theme_settings.header_logo_width neq ''}width="{$cloudx_theme_settings.header_logo_width}" {/if}>
                        {/if}
                    </a>
                    <ul class="nav-cnts">
                        {if $cloudx_theme_settings.disable_header_phone_number neq 'on'}
                            <li class="navcntsbx">
                                <a href="{if $cloudx_theme_settings.phone neq ''}tel:+{$cloudx_theme_settings.country_code}{$cloudx_theme_settings.phone}{else}#{/if}">
                                    <h4><span>{$LANG.cloudxcallus}</span> {if $cloudx_theme_settings.phone neq ''}(+{$cloudx_theme_settings.country_code}) {$cloudx_theme_settings.phone}{else}{$LANG.cloudxHeaderphonenumber}{/if} </h4>
                                </a>
                            </li>
                        {/if}
                        {if $cloudx_theme_settings.disable_header_email neq 'on'}
                            <li class="navcntsbx">
                                <a href="mailto:{if $cloudx_theme_settings.email_address neq ''}{$cloudx_theme_settings.email_address}{else}{$cloudx_email_company}{/if}">
                                    <h4><span>{$LANG.cloudxmailus}</span> {if $cloudx_theme_settings.email_address neq ''}{$cloudx_theme_settings.email_address}{else}{$cloudx_email_company}{/if}</h4>
                                </a>
                            </li>
                        {/if}
                        <li><a href="{$WEB_ROOT}/cart.php?a=view" class="nav-btns"><img src="{$WEB_ROOT}/templates/{$template}/images/ic2.svg" alt=""><span class="badge badge-info">{$cartitemcount}</span></a></a></li>
                        {if $loggedin}
                            {include file="$template/includes/navbar.tpl" navbar=$secondaryNavbar rightDrop=true}
                        {else}
                            <li class="navact"><a href="{$WEB_ROOT}/clientarea.php" class="nav-btns"><img src="{$WEB_ROOT}/templates/{$template}/images/ic1.svg" alt=""></a></li>
                        {/if}
                    </ul>
                </nav>
            {/if}
        </div>
    </header>
    {if $cloudx_theme_settings.navigation_layout_theme neq 'top'}
        <aside class="sidebar side-menu-bar-cloudx">
            <a href="javascript:void(0);" class="close-btn"><i class="fal fa-times-circle"></i></a>
            {include file="$template/includes/navbar.tpl" navbar=$primaryNavbar}
            {if $languagechangeenabled && count($locales) > 1 || $currencies}
                <div class = "language-container">
                    <ul class="navbar-nav">
                        <li class="currency-lang-list">
                            <button type="button" class="btn" data-toggle="modal" data-target="#modalChooseLanguage">
                                {$activeCurrency.prefix} {$activeCurrency.code}
                            </button>          
                            <button type="button" class="btn" data-toggle="modal" data-target="#modalChooseLanguage">
                                <div class="d-inline-block align-middle">
                                    <div class="iti-flag {if $activeLocale.countryCode === '001'}us{else}{$activeLocale.countryCode|lower}{/if}"></div>
                                </div>
                                {$activeLocale.localisedName}
                            </button>
                        </li>                       
                    </ul>
                </div>
            {/if}
        </aside>
    {/if}
	{if $templatefile != 'homepage'  && $templatefile != 'login'  && $templatefile != 'clientregister' && $templatefile != 'password-reset-container' && !$skipbreadcrumbBody}
		<nav class="master-breadcrumb {if $cloudx_theme_page}cloudx-page-breadcrumb{/if}" aria-label="breadcrumb">
			<div class="container">
				{include file="$template/includes/breadcrumb.tpl"}
			</div>
		</nav>
	{/if}
    {include file="$template/includes/network-issues-notifications.tpl"}
    {if !$cloudx_theme_page &&  $templatefile != 'homepage'}
        {include file="$template/includes/verifyemail.tpl"}
    {/if}
	{if $templatefile != 'homepage'}
    <section id="main-body" {if $templatefile != 'homepage' && $templatefile != 'login'  && $templatefile != 'clientregister' && $templatefile != 'contact' && $templatefile != 'password-reset-container'}class="body-background-cloudx {if $cloudx_theme_page}cloudx-custom-page-called{/if}{if $inShoppingCart} in_shopping_cart{/if} {$cloudx_market_connect} padd-40"{/if}>
        <div class="{if !$skipMainBodyContainer && !$cloudx_theme_page}container{else}body-container-skippped{/if}">
            <div class="{if !$skipMainBodyContainer && !$cloudx_theme_page}row{else}body-row-skippped{/if}">
            {if !$inShoppingCart && ($primarySidebar->hasChildren() || $secondarySidebar->hasChildren()) && $templatefile != 'clientregister'}
                <div class="col-lg-4 col-xl-3">
                    <div class="sidebar">
                        {include file="$template/includes/sidebar.tpl" sidebar=$primarySidebar}
                    </div>
                    {if !$inShoppingCart && $secondarySidebar->hasChildren()}
                        <div class="d-none d-lg-block sidebar">
                            {include file="$template/includes/sidebar.tpl" sidebar=$secondarySidebar}
                        </div>
                    {/if}
                </div>
            {/if}
            {if !$cloudx_theme_page}
            <div class="{if !$inShoppingCart && ($primarySidebar->hasChildren() || $secondarySidebar->hasChildren()) && $templatefile != 'clientregister' && $templatefile != 'password-reset-container'}col-lg-8 col-xl-9{else}{if !$skipMainBodyContainer}col-12{/if}{/if} primary-content">
            {/if}
	{/if}
	
<style>
:root {
  --gh-light: #A7EBF2;
  --gh-cyan: #54ACBF;
  --gh-blue-mid: #26658C;
  --gh-blue: #023859;
  --gh-blue-dark: #011C40;

  --gh-bg: #FFFFFF;
  --gh-text: #011C40;

  --gh-font-title: "Roboto Condensed", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gh-font-body: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------------------------------------------------- */
/*   UUSI YHDISTETTY GAMEHOSTER x CLOUDX - HEADER       */
/* ---------------------------------------------------- */

/* HEADER = GH-navbar + CloudX combined */
header.top-header-active-theme.sticky-header-enabled {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 14px 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(81,100,168,0.55), transparent 60%),
    radial-gradient(circle at 100% 0%, rgba(0,217,255,0.35), transparent 55%),
    rgba(3,12,40,0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(167, 235, 242, 0.25);
  box-shadow: 0 16px 34px rgba(0,0,0,0.65);
  transition: padding .25s ease, background .25s ease, box-shadow .25s ease;
}

/* SCROLL EFFECT */
header.top-header-active-theme.sticky-header-enabled.scrolled {
  padding: 8px 0;
  background:
    linear-gradient(to right, rgba(3,12,40,0.96), rgba(3,12,40,0.9));
  box-shadow: 0 10px 26px rgba(0,0,0,0.85);
}

/* Header container */
header.top-header-active-theme .top-nav-main-sec-header {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  min-height: 70px;
}

/* Logo */
header.top-header-active-theme .nav-logo-section .navbar-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--gh-light);
}

header.top-header-active-theme .nav-logo-section .navbar-brand img {
  width: 66px;
  height: 66px;
  border-radius: 14px;
  object-fit: cover;
  display: block;
}

/* Navigation Links - DESKTOP */
header.top-header-active-theme .nav-primary-top-nav-section .navbar-nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

header.top-header-active-theme .nav-primary-top-nav-section .navbar-nav > li > a,
header.top-header-active-theme .nav-primary-top-nav-section .navbar-nav > li > .nav-link {
  position: relative;
  font-size: 14px;
  text-decoration: none;
  color: var(--gh-light);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 4px 0;
  opacity: 0.9;
  transition: opacity .18s ease, transform .18s ease;
}

header.top-header-active-theme .nav-primary-top-nav-section .navbar-nav > li > a::after,
header.top-header-active-theme .nav-primary-top-nav-section .navbar-nav > li > .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gh-cyan), #ffffff);
  box-shadow: 0 0 10px rgba(0,217,255,0.8);
  transition: width .2s ease;
}

header.top-header-active-theme .nav-primary-top-nav-section .navbar-nav > li > a:hover,
header.top-header-active-theme .nav-primary-top-nav-section .navbar-nav > li > .nav-link:hover {
  opacity: 1;
  transform: translateY(-1px);
}

header.top-header-active-theme .nav-primary-top-nav-section .navbar-nav > li > a:hover::after,
header.top-header-active-theme .nav-primary-top-nav-section .navbar-nav > li > .nav-link:hover::after {
  width: 100%;
}

/* Right section */
header.top-header-active-theme .nav-top-right-section {
  display: flex;
  align-items: center;
}

/* Cart Button */
header.top-header-active-theme .view-cart-top .cart-btn {
  background: linear-gradient(135deg, var(--gh-cyan), #ffffff);
  color: var(--gh-blue-dark);
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow:
    0 14px 30px rgba(0,0,0,0.7),
    0 0 18px rgba(0,217,255,0.8);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  border: none;
}

header.top-header-active-theme .view-cart-top .cart-btn:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.85),
    0 0 22px rgba(0,217,255,0.95);
  filter: brightness(1.03);
}

/* Account/Login Button (without icon) */
header.top-header-active-theme .nav-top-right-section .navbar-nav > li > a.nav-link,
header.top-header-active-theme .nav-top-right-section .navbar-nav > li > a.dropdown-toggle {
  background: linear-gradient(135deg, var(--gh-cyan), #ffffff);
  color: var(--gh-blue-dark) !important;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow:
    0 14px 30px rgba(0,0,0,0.7),
    0 0 18px rgba(0,217,255,0.8);
  border: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
  margin-left: 15px;
}

/* Remove account icon */
header.top-header-active-theme .nav-top-right-section .navbar-nav > li > a.nav-link i.fa-user,
header.top-header-active-theme .nav-top-right-section .navbar-nav > li > a.nav-link i.fa-user-circle,
header.top-header-active-theme .nav-top-right-section .navbar-nav > li > a.nav-link i[class*="user"],
header.top-header-active-theme .nav-top-right-section .navbar-nav > li > a.dropdown-toggle i {
  display: none !important;
}

/* Dropdowns - Desktop */
header.top-header-active-theme .navbar-nav .dropdown-menu {
  position: absolute;
  z-index: 10000;
  margin-top: 10px;
  min-width: 220px;
  background: rgba(3,12,40,0.96);
  border-radius: 16px;
  border: 1px solid rgba(167, 235, 242, 0.35);
  box-shadow: 0 18px 40px rgba(0,0,0,0.85);
  padding: 8px 0;
}

/* ============================================= */
/* MOBILE STYLES - FIXED AND WORKING */
/* ============================================= */

/* Mobile Toggle Button */
.top-nav-mobile-toggle {
  display: none;
  cursor: pointer;
  width: 30px;
  height: 24px;
  position: relative;
  background: transparent;
  border: none;
  padding: 0;
  z-index: 10001;
}

.top-nav-mobile-toggle .bar1,
.top-nav-mobile-toggle .bar2,
.top-nav-mobile-toggle .bar3 {
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--gh-cyan), #ffffff);
  border-radius: 2px;
  transition: 0.4s;
  position: absolute;
  left: 0;
}

.top-nav-mobile-toggle .bar1 {
  top: 0;
}
.top-nav-mobile-toggle .bar2 {
  top: 10px;
}
.top-nav-mobile-toggle .bar3 {
  top: 20px;
}

.top-nav-mobile-toggle.active .bar1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}
.top-nav-mobile-toggle.active .bar2 {
  opacity: 0;
}
.top-nav-mobile-toggle.active .bar3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(3,12,40,0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 9998;
  overflow-y: auto;
  padding: 100px 20px 40px;
}

.mobile-menu-overlay.active {
  display: block;
}

/* Mobile Menu Container */
.mobile-menu-container {
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
}

/* Mobile Navigation Styles */
.mobile-menu-overlay .navbar-nav {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  margin-bottom: 30px;
}

.mobile-menu-overlay .navbar-nav > li {
  width: 100%;
  margin-bottom: 5px;
}

.mobile-menu-overlay .navbar-nav > li > a,
.mobile-menu-overlay .navbar-nav > li > .nav-link {
  display: block;
  padding: 16px 0;
  font-size: 16px;
  color: var(--gh-light) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(167, 235, 242, 0.1);
  width: 100%;
  text-align: left;
  opacity: 0.9;
  transition: opacity 0.2s ease, padding-left 0.2s ease;
}

.mobile-menu-overlay .navbar-nav > li > a:hover,
.mobile-menu-overlay .navbar-nav > li > .nav-link:hover {
  opacity: 1;
  padding-left: 10px;
}

/* Mobile Dropdowns */
.mobile-menu-overlay .dropdown-menu {
  position: static !important;
  width: 100%;
  background: rgba(2, 8, 30, 0.95) !important;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin-top: 0;
  padding: 0;
  display: none;
}

.mobile-menu-overlay .dropdown-menu.show {
  display: block !important;
}

.mobile-menu-overlay .dropdown-menu .dropdown-item {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(167, 235, 242, 0.05);
  color: var(--gh-light) !important;
  font-size: 15px;
  display: block;
  text-decoration: none;
  transition: background 0.2s ease, padding-left 0.2s ease;
}

.mobile-menu-overlay .dropdown-menu .dropdown-item:hover {
  background: rgba(167, 235, 242, 0.1);
  padding-left: 30px;
}

/* Mobile Action Buttons */
.mobile-menu-actions {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.mobile-menu-actions .cart-btn,
.mobile-menu-actions .account-btn {
  width: 100%;
  justify-content: center;
  padding: 16px 20px;
  font-size: 16px;
  border-radius: 999px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mobile-menu-actions .cart-btn {
  background: linear-gradient(135deg, var(--gh-cyan), #ffffff);
  color: var(--gh-blue-dark) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,0.7),
    0 0 18px rgba(0,217,255,0.8);
}

.mobile-menu-actions .account-btn {
  background: linear-gradient(135deg, var(--gh-cyan), #ffffff);
  color: var(--gh-blue-dark) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,0.7),
    0 0 18px rgba(0,217,255,0.8);
}

.mobile-menu-actions .cart-btn:hover,
.mobile-menu-actions .account-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.85),
    0 0 22px rgba(0,217,255,0.95);
}

.mobile-menu-actions .cart-btn .badge {
  background: var(--gh-blue-dark) !important;
  color: white !important;
  font-size: 12px;
  padding: 4px 8px;
}

/* Mobile Language Switcher */
.mobile-language-switcher {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(167, 235, 242, 0.1);
  width: 100%;
}

.mobile-language-switcher button {
  width: 100%;
  justify-content: center;
  padding: 14px 20px;
  background: rgba(167, 235, 242, 0.1);
  border: 1px solid rgba(167, 235, 242, 0.2);
  color: var(--gh-light);
  border-radius: 8px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Mobile Media Queries */
@media (max-width: 1024px) {
  header.top-header-active-theme .top-nav-main-sec-header {
    padding: 0 20px;
  }
  
  header.top-header-active-theme .nav-primary-top-nav-section .navbar-nav {
    gap: 18px;
  }
}

@media (max-width: 992px) {
  header.top-header-active-theme .nav-primary-top-nav-section .navbar-nav {
    gap: 15px;
  }
  
  header.top-header-active-theme .nav-top-right-section .navbar-nav > li > a.nav-link,
  header.top-header-active-theme .nav-top-right-section .navbar-nav > li > a.dropdown-toggle {
    padding: 8px 16px;
    font-size: 12px;
  }
  
  header.top-header-active-theme .view-cart-top .cart-btn {
    padding: 8px 16px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  /* Show mobile toggle, hide desktop navigation */
  .top-nav-mobile-toggle {
    display: block;
    order: 1;
  }
  
  header.top-header-active-theme .nav-primary-top-nav-section,
  header.top-header-active-theme .nav-top-right-section {
    display: none !important;
  }
  
  header.top-header-active-theme .top-nav-main-sec-header {
    padding: 0 15px;
    justify-content: space-between;
  }
  
  .nav-top-left-section {
    order: 2;
    flex: 1;
    display: flex;
    justify-content: center;
    margin-left: 0;
  }
  
  .nav-logo-section {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  
  header.top-header-active-theme .nav-logo-section .navbar-brand img {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 576px) {
  header.top-header-active-theme .container {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  header.top-header-active-theme .top-nav-main-sec-header {
    padding: 0 10px;
    min-height: 60px;
  }
  
  .mobile-menu-overlay {
    padding: 80px 15px 30px;
  }
  
  .mobile-menu-overlay .navbar-nav > li > a,
  .mobile-menu-overlay .navbar-nav > li > .nav-link {
    padding: 14px 0;
    font-size: 15px;
  }
  
  .mobile-menu-actions .cart-btn,
  .mobile-menu-actions .account-btn {
    padding: 14px 15px;
    font-size: 15px;
  }
}

/* Prevent body scroll when mobile menu is open */
body.mobile-menu-open {
  overflow: hidden;
}

/* Sidebar Layout (for non-top theme) */
@media (max-width: 768px) {
  .side-menu-bar-cloudx {
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    height: 100vh;
    background: rgba(3,12,40,0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(167, 235, 242, 0.2);
    z-index: 9999;
    transition: left 0.3s ease;
    padding: 80px 20px 20px;
    overflow-y: auto;
  }
  
  .side-menu-bar-cloudx.active {
    left: 0;
    box-shadow: 0 0 50px rgba(0, 217, 255, 0.3);
  }
  
  .side-menu-bar-cloudx .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    color: var(--gh-light);
    font-size: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
  }
}
</style>

<!-- Mobile Menu Overlay (hidden by default) -->
<div class="mobile-menu-overlay" id="mobileMenuOverlay">
  <div class="mobile-menu-container">
    <!-- Primary Navigation -->
    <div class="mobile-nav-primary">
      {include file="$template/includes/navbar.tpl" navbar=$primaryNavbar}
    </div>
    
    <!-- Language Switcher -->
    {if $languagechangeenabled && count($locales) > 1 || $currencies}
    <div class="mobile-language-switcher">
      <button type="button" class="btn" data-toggle="modal" data-target="#modalChooseLanguage">
        <div class="d-inline-block align-middle">
          <div class="iti-flag {if $activeLocale.countryCode === '001'}us{else}{$activeLocale.countryCode|lower}{/if}"></div>
        </div>
        {$activeLocale.localisedName}
      </button>  
    </div>
    {/if}
    
    <!-- Action Buttons -->
    <div class="mobile-menu-actions">
      <!-- Cart Button -->
      <a class="btn cart-btn" href="{$WEB_ROOT}/cart.php?a=view">
        <i class="fas fa-shopping-cart fa-fw"></i>
        <span>{lang key="carttitle"}</span>
        <span class="badge badge-info">{$cartitemcount}</span>
      </a>
      
      <!-- Account Button -->
      {if $loggedin}
        {include file="$template/includes/navbar.tpl" navbar=$secondaryNavbar rightDrop=true}
      {else}
        <a class="btn account-btn" href="{$WEB_ROOT}/clientarea.php">
          <span>{lang key="login"}</span>
        </a>
      {/if}
    </div>
  </div>
</div>

<script>
// Scroll effect for sticky header
document.addEventListener('scroll', function () {
  var header = document.getElementById('header-top-sticky');
  if (!header) return;
  if (window.scrollY > 40) {
    header.classList.add('scrolled');
  } else {
    header.classList.remove('scrolled');
  }
});

// Mobile navbar functionality
document.addEventListener('DOMContentLoaded', function() {
    // Mobile toggle button
    const topNavToggle = document.querySelector('.top-nav-mobile-toggle');
    const mobileMenuOverlay = document.getElementById('mobileMenuOverlay');
    const body = document.body;
    
    // Toggle mobile menu
    if (topNavToggle && mobileMenuOverlay) {
        topNavToggle.addEventListener('click', function(e) {
            e.stopPropagation();
            this.classList.toggle('active');
            mobileMenuOverlay.classList.toggle('active');
            body.classList.toggle('mobile-menu-open');
        });
        
        // Close mobile menu when clicking on a link
        const mobileLinks = mobileMenuOverlay.querySelectorAll('a');
        mobileLinks.forEach(link => {
            link.addEventListener('click', function() {
                topNavToggle.classList.remove('active');
                mobileMenuOverlay.classList.remove('active');
                body.classList.remove('mobile-menu-open');
            });
        });
        
        // Close mobile menu when clicking outside (on overlay)
        mobileMenuOverlay.addEventListener('click', function(e) {
            if (e.target === mobileMenuOverlay) {
                topNavToggle.classList.remove('active');
                mobileMenuOverlay.classList.remove('active');
                body.classList.remove('mobile-menu-open');
            }
        });
    }
    
    // Handle dropdowns in mobile menu
    const dropdownToggles = document.querySelectorAll('.dropdown-toggle');
    dropdownToggles.forEach(function(toggle) {
        toggle.addEventListener('click', function(e) {
            if (window.innerWidth <= 768) {
                e.preventDefault();
                e.stopPropagation();
                
                const dropdown = this.nextElementSibling;
                if (dropdown && dropdown.classList.contains('dropdown-menu')) {
                    // Toggle current dropdown
                    dropdown.classList.toggle('show');
                    
                    // Close all other dropdowns
                    document.querySelectorAll('.dropdown-menu').forEach(d => {
                        if (d !== dropdown) {
                            d.classList.remove('show');
                        }
                    });
                }
            }
        });
    });
    
    // Close dropdowns when clicking outside on mobile
    document.addEventListener('click', function(e) {
        if (window.innerWidth <= 768) {
            if (!e.target.matches('.dropdown-toggle') && !e.target.closest('.dropdown-menu')) {
                document.querySelectorAll('.dropdown-menu').forEach(function(dropdown) {
                    dropdown.classList.remove('show');
                });
            }
        }
    });
    
    // For side layout (hamburger menu)
    const sideBarToggle = document.querySelector('.bar-brand');
    const sideCloseBtn = document.querySelector('.close-btn');
    const sidebar = document.querySelector('.side-menu-bar-cloudx');
    
    if (sideBarToggle && sidebar) {
        sideBarToggle.addEventListener('click', function(e) {
            e.stopPropagation();
            sidebar.classList.add('active');
            body.style.overflow = 'hidden';
        });
    }
    
    if (sideCloseBtn && sidebar) {
        sideCloseBtn.addEventListener('click', function() {
            sidebar.classList.remove('active');
            body.style.overflow = '';
        });
    }
    
    // Close sidebar when clicking outside
    document.addEventListener('click', function(event) {
        if (sidebar && sidebar.classList.contains('active')) {
            if (!sidebar.contains(event.target) && !sideBarToggle.contains(event.target)) {
                sidebar.classList.remove('active');
                body.style.overflow = '';
            }
        }
    });
    
    // Handle window resize
    window.addEventListener('resize', function() {
        // Close mobile menu on desktop
        if (window.innerWidth > 768) {
            if (topNavToggle && mobileMenuOverlay) {
                topNavToggle.classList.remove('active');
                mobileMenuOverlay.classList.remove('active');
                body.classList.remove('mobile-menu-open');
            }
            
            // Close all dropdowns
            document.querySelectorAll('.dropdown-menu').forEach(d => {
                d.classList.remove('show');
            });
            
            // Reset sidebar
            if (sidebar) {
                sidebar.classList.remove('active');
                body.style.overflow = '';
            }
        }
    });
    
    // Handle keyboard navigation (ESC key closes menus)
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            // Close mobile menu
            if (topNavToggle && mobileMenuOverlay && mobileMenuOverlay.classList.contains('active')) {
                topNavToggle.classList.remove('active');
                mobileMenuOverlay.classList.remove('active');
                body.classList.remove('mobile-menu-open');
            }
            
            // Close sidebar
            if (sidebar && sidebar.classList.contains('active')) {
                sidebar.classList.remove('active');
                body.style.overflow = '';
            }
            
            // Close dropdowns
            document.querySelectorAll('.dropdown-menu').forEach(d => {
                d.classList.remove('show');
            });
        }
    });
});

// Initialize on page load
if (window.innerWidth <= 768) {
    // Hide desktop navigation on mobile
    const primaryNav = document.querySelector('.nav-primary-top-nav-section');
    const rightNav = document.querySelector('.nav-top-right-section');
    
    if (primaryNav) {
        primaryNav.style.display = 'none';
    }
    if (rightNav) {
        rightNav.style.display = 'none';
    }
}
</script>