{strip}
<link href="{$wa_url}wa-apps/shop/plugins/callback/css/style.css?v{$version}" rel="stylesheet" type="text/css">
<style type="text/css">
    #callback-form .callback-modal__close,
    #callback-form .jq-checkbox.checked {
        background-color: {$color[0]};
    }
    #callback-form .jq-selectbox__trigger {
        border-top-color: {$color[0]};
    }
    #callback-form .jq-selectbox__dropdown li:hover {
        background: {$color[0]};
    }
    #callback-form .callback-form__button,
    #callback-form .callback-form__button:hover {
        background: {$color[0]};
        box-shadow: 0 3px {$color[1]};
    }
    .callback-form-sent {
        background: {$color[0]} url({$wa_url}wa-apps/shop/plugins/callback/img/icon2.png) no-repeat 50% 33px;
    }
    #callback-show {
        background: {$color[0]};
        box-shadow: 3px 3px 0 3px {$color[1]};
    }
	#callback-show.callback-show-right_s {
        box-shadow: -2px 2px 0 2px {$color[1]};
	}
	#callback-show.callback-show-left_s {
        box-shadow: 2px 2px 0 2px {$color[1]};
	}
    .callback-show-alert-border {
        border-color: {$color[0]};
    }
    .callback-show-alert {
        color: {$color[0]};
    }
    .callback-form-row .callback-form-label__privacy a,
    .callback-form-row .callback-form-label__privacy a:visited,
    .callback-form-row .callback-form-label__privacy a:hover,
    .callback-form-row .callback-form-label__privacy a:active {
        color: {$color[1]};
    }
</style>
<script type="text/javascript">
    $.wa_shop_callback = $.wa_shop_callback || { };
    $.wa_shop_callback.plugin_url = '{$plugin_url}';
</script>
<script>if(typeof(window.jQuery.styler) == 'undefined') document.write(unescape('%3Cscript src="{$wa_url}wa-apps/shop/plugins/callback/js/jquery.formstyler.min.js"%3E%3C/script%3E'))</script>
<script type="text/javascript" src="{$wa_url}wa-apps/shop/plugins/callback/js/scripts.js"></script>
{if $popup}

  {if in_array($popup, ['left', 'right'])}
    <script type="text/javascript">
      $(function(){
        var b=$('body');
        if(b.prop('id')=='multishop'){
            {if $popup == 'right'}{$action = 'append'}{else}{$action = 'prepend'}{/if}
          $('.bottom-fixed ul.menu-h').{$action}('<li><a href="#" class="callback_plugin_handler"><div class="relative">{$headline|escape}</div></a></li>');
        } else {
          b.append('<div class="callback-show-{$popup|escape}" id="callback-show">{$headline|escape}</div>');
        }
      });
    </script>
  {elseif in_array($popup, ['left_s', 'right_s'])}
    {$headline = $headline|regex_replace:'/./u':'<span>$0</span>'}
    {$headline = $headline|replace:' ':'&nbsp;'}
    <script type="text/javascript">
      $(function(){
        $('body').append('<div class="callback-show-side callback-show-{$popup|escape}" id="callback-show">{$headline}</div>');
      });
    </script>
  {elseif in_array($popup, ['left_a', 'right_a'])}
    <script type="text/javascript">
      $(function(){
        $('body').append('<div class="callback_plugin_handler callback-show-alert callback-show-alert-{$popup|escape}"> '+
            '<div class="callback-show-alert-icon"> '+
              '{include file="`$template_path`/phone_svg.html" color=$color} '+
              '<div class="callback-show-alert-border callback-show-alert-border1"></div> '+
              '<div class="callback-show-alert-border callback-show-alert-border2"></div> '+
              '<div class="callback-show-alert-border callback-show-alert-border3"></div> '+
            '</div> {$headline|escape} </div>');
        var timer, anim = false;
        $(window).scroll(function(){
          clearTimeout(timer); timer = setTimeout(function () {
            if(anim) return; anim = true; $('.callback-show-alert').animate({
              top: $(document).scrollTop() + $(window).height() - 200
            }, 500, function(){ anim = false; });
          },500);
        }).trigger('scroll');
      });
    </script>
  {/if}
{/if}
{/strip}