<style>
    html{font-size: 15px;}
</style>
<link href="{{ TPL_PATH|safe }}/Assets/css/pagamento.css" rel="stylesheet">
<div id="app-top" class="cf">
    <div class="ph3-ns w-80-ns">
        <div><h1 class="f2 black-70">Pedido Confirmado</h1></div>
        	<div class="cf br3 pa4 cconf-alert bg-washed-green ba b--green solid">
        		<div class="fl w-100 w-50-ns" style="overflow-wrap: break-word;">
        			<span class="db f4 fw6 mb4 dark-green">
                        <span>Pedido {{ NumPedido|safe }} realizado com sucesso.</span>
        			</span>
    				<p class="dark-green"><span>Em breve você receberá um e-mail no endereço</span>&nbsp;
    					<strong class="cconf-client-email">{{ emailCli|safe }}</strong>&nbsp;
    					<span>com todos os detalhes do pedido.</span>
    				</p>
    				<div class="dark-green">
                        <p><span>Para realizar o pagamento, clique no botão abaixo:</span>&nbsp;
                           
                        </p>
                        {{ Lightbox|safe }}
                    </div>
    			</div>
    			<div class="fl w-100 w-50-ns" >
                    <article class="undefined w-100 fl tl bg-white br1 shadow-00  min-h-14rem">
                        <div class="pa3 black-80 f6 lh-copy">
                            <h3 class="mid-gray mt1 mb3 tracked-mega lh-solid ttu f6 tl"><span>Resumo</span></h3>
                            <div class="cf w-100">
                                <div class="dib f6 fw4 gray w-60"><span>Subtotal</span></div><div class="dib f6 fw4 gray w-40 tr"><span>R$&nbsp;{{ subtotal|safe }}</span></div>
                                <hr class="bt-0 bb b--light-gray w-100 mb1 mt1">
                            </div>
                            <div class="cf w-100" style="display: {{ hideRegradesc|safe }}">
                                <div class="dib f6 fw4 gray w-60"><span>Descontos Extras</span></div><div class="dib f6 fw4 gray w-40 tr"><span>-R$&nbsp;{{ RegraD|safe }}</span></div>
                                <hr class="bt-0 bb b--light-gray w-100 mb1 mt1">
                            </div>
                            <div class="cf w-100" style="display: {{ hideCredito|safe }}">
                                <div class="dib f6 fw4 gray w-60"><span>Crédito na loja</span></div><div class="dib f6 fw4 gray w-40 tr"><span>-R$&nbsp;{{ credito|safe }}</span></div>
                                <hr class="bt-0 bb b--light-gray w-100 mb1 mt1">
                            </div>
                            <div class="cf w-100" style="display: {{ hideCupom|safe }}">
                                <div class="dib f6 fw4 gray w-60"><span>Cupom de desconto</span></div><div class="dib f6 fw4 gray w-40 tr"><span>-R$&nbsp;{{ cupom|safe }}</span></div>
                                <hr class="bt-0 bb b--light-gray w-100 mb1 mt1">
                            </div>
                            <div class="cf w-100" style="display: {{ hideVale|safe }}">
                                <div class="dib f6 fw4 gray w-60"><span>Vale Presente</span></div><div class="dib f6 fw4 gray w-40 tr"><span>-R$&nbsp;{{ valepres|safe }}</span></div>
                                <hr class="bt-0 bb b--light-gray w-100 mb1 mt1">
                            </div>
                            <div class="cf w-100" style="display: %%GLOBAL_hideEmbalagem%%">
                                <div class="dib f6 fw4 gray w-60"><span>Embalagem para presente</span></div><div class="dib f6 fw4 gray w-40 tr"><span>+R$&nbsp;%%GLOBAL_ValEmabalagem%%</span></div>
                                <hr class="bt-0 bb b--light-gray w-100 mb1 mt1">
                            </div>
                            <div class="cf w-100">
                                <div class="dib f6 fw4 gray w-60"><span>Entrega</span></div><div class="dib f6 fw4 gray w-40 tr"><span>R$&nbsp;{{ entrega|safe }}</span></div>
                                <hr class="bt-0 bb b--light-gray w-100 mb1 mt1">
                            </div>
                            <div class="cf w-100" style="display: %%GLOBAL_hideAcresc%%">
                                <div class="dib f6 fw4 gray w-60"><span>Acréscimo (%%GLOBAL_porcenAcres%%%)</span></div><div class="dib f6 fw4 gray w-40 tr"><span>+R$&nbsp;%%GLOBAL_Acrecimo%%</span></div>
                                <hr class="bt-0 bb b--light-gray w-100 mb1 mt1">
                            </div>

                            <div class="cf w-100 mb4">
                                <div class="dib fl f6 fw5 mid-gray w-50"><span>Total</span></div><div class="dib fr f6 fw5 mid-gray w-50 tr"><span>R$&nbsp;{{ total|safe }}</span></div>
                            </div>
                        </div>
                    </article>
                </div>
        	</div>
        </div>
    </div>
</div>
<div id="app-container" class="cf">
    <div class="ph3-ns w-80-ns db">
    	<div class="pt4">
    		
             <a class="cconf-myorders-button hover-no-underline fr dib ml3 mb2 dib w-20-l w-100 ba link tc pv3 pv2-l ph3 br2 f6 fw4 mid-gray bg-near-white hover-bg-moon-gray b--light-silver" href="{{ ShopPath|safe }}/account.php?action=order_status"><span>Ir para meus pedidos</span></a>
                    <a class="cconf-continue-button hover-no-underline fr dib ml3 mb2 dib w-20-l w-100 ba link tc pv3 pv2-l ph3 br2 f6 fw4 mid-gray bg-near-white hover-bg-moon-gray b--light-silver" href="{{ ShopPath|safe }}"><span>Realizar nova compra</span></a>
        </div>
    </div>   
</div>