<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

    <meta name="theme-color" content="#28699f">
    <meta name="apple-mobile-web-app-status-bar-style" content="#28699f">
    <meta name="msapplication-navbutton-color" content="#28699f">

    <title>Pagamento</title>


    <style>
    * {
      padding: 0;
      margin: 0;
      border: none;
      outline: none;
      box-sizing: border-box;
    }
    html,
    body {
      height: 100vh;
    }
    body {
      font: 16px normal Arial, Helvetica, sans-serif;
      color: #171717;

      background: {{background_color1}}; /* Old browsers */
      background: -moz-linear-gradient(top,  {{background_color}} 0, {{background_color}} 420px, #ffffff 420px, #ffffff 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top,  {{background_color}} 0,{{background_color}} 420px,#ffffff 420px,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom,  {{background_color}} 0,{{background_color}} 420px,#ffffff 420px,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      background-repeat: no-repeat;
    }
    hr {
      border-top: 1px solid #DDD;
      margin: 1.875rem 0;
    }
    img {
      max-width: 100%;
    }
    input,
    select {
      border: 1px solid #DDD;
      width: 100%;
      padding: .75rem;
    }

    .payment, .paymentPG {
      text-transform: uppercase;
      padding: .93rem 1.87rem;
      position: relative;
      bottom: -2.45rem;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0 8px 14px rgba(0, 0, 0, 0.2);
      height: 45px;
      width: calc(100% - 2rem);
      max-width: 210px;
      margin-bottom: 1rem;
      cursor: pointer;
    }
    .payment:hover {
      opacity: 0.9;
    }

    .paymentPG {
      color: #FFF;
    }

    .payment img {
      display: block;
      margin: 0 auto .5rem;
    }
    .rounded {
      border-radius: .25rem;
    }
    .card {
      max-width: 560px;
      width: 100%;
      background-color: #FFF;
      border-radius: .8rem;
      border: 1px solid #DDD;
      margin: 12vh auto 0;
    }
    .card-container {
      padding: 1.87rem 3.12rem 3.12rem;
      position: relative;
    }
    .logo {
      height: 50px;
    }
    .card-info div {
      -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
      max-width: 50%;
    }

    .text-grey {
      color: #666666;
    }
    .text-title-color {
      color: {{title_textcolor}};
    }
    .text-red {
      color: #ff0000;
    }
    .text-right {
      text-align: right;
    }
    .text-small {
      font-size: .875rem;
    }
    .text-medium {
      font-size: 1.125rem;
    }
    .text-large {
      font-size: 1.25rem;
    }
    .btn-color {
      background: {{btn_background}};
      color: {{btn_textcolor}};
    }
    .padding-x-small {
      padding: .25rem;
    }
    .top-padding-x-small {
      padding-top: .25rem;
    }
    .padding-small {
      padding: .5rem;
    }
    .padding-medium {
      padding: 1rem;
    }
    .padding-large {
      padding: 1.5rem;
    }
    .vertical-margin-x-small {
      margin-top: .25rem;
      margin-bottom: .25rem;
    }
    .vertical-margin-small {
      margin-top: .5rem;
      margin-bottom: .5rem;
    }
    .vertical-margin-medium {
      margin-top: 1rem;
      margin-bottom: 1rem;
    }
    .vertical-margin-large {
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .vertical-margin-x-large {
      margin-top: 2rem;
      margin-bottom: 2rem;
    }
    .flex {
      display: -webkit-box;
      display:    -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display:         flex;
      display: flex;
      -ms-flex: 0 1 auto;
      -webkit-box-flex: 0;
      flex: 0 1 auto;
      -ms-flex-direction: row;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
      -ms-flex-wrap: wrap;
    }
    .flex > :first-child {
      padding-left: 0;
    }
    .flex > :last-child {
      padding-right: 0;
    }
    .bottom {
      -ms-flex-align: end;
      -webkit-box-align: end;
      align-items: flex-end;
    }
    .middle {
      -ms-flex-align: center;
      -webkit-box-align: center;
      align-items: center;
    }
    .nowrap {
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
      -ms-flex-wrap: nowrap;
    }
    .between {
      -ms-flex-pack: justify;
      -webkit-box-pack: justify;
      justify-content: space-between;
    }
    .auto {
      -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
      -webkit-box-flex: 1;
      flex-grow: 1;
      -ms-flex-preferred-size: 0;
      flex-basis: 0;
      max-width: 100%;
    }
    .success {
      font-size: 20px;
      text-transform: none;
      transition: .4s cubic-bezier(0, 0.97, 0.88, 1.23);
      bottom: 1rem;
      max-width: 100%;
      height: 188px;
    }

    .btnGreensuccess {
      background: #ceeace;
      border: 1px solid #5cb85c;
      color: #5cb85c;
    }

    .btnOrangesuccess {
        background: rgba(241, 126, 19, .3);
        border: 1px solid #F17E13;
        color: #F17E13;
    }
    .logo-loja {
      height: 50px;
      width: 160px;
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-image: url({{logo}});
    }

    @media screen and (max-width: 480px) {
      .card {
        transform: none;
        border-radius: 0;
        margin: 0;
        border-bottom: none;
      }
      .card-container {
        height: auto;
        padding: 1rem;
      }
      .payment {
        height: auto;
        bottom: -5rem;
      }
      .success {
        bottom: 0;
        height: 222px;
        max-width: calc(100% - 2rem);
      }
    }

    .radioimg-label .radioimg-img {
      width: 40px;
    }
    .radioimg-input {
      display: none;
    }
    .radioimg-input:checked + .radioimg-img {
      border: 2px solid #F00;

      -webkit-filter: grayscale(0);
    }
    .radioimg-input + .radioimg-img {
      padding: 2px;
      cursor: pointer;
      transition: .2s linear;
      border: 2px solid transparent;

      -webkit-filter: grayscale(1);
    }

    /* Load block */
    .load-block {
      position: fixed;
      z-index: 1000;
      top: 0;
      left: 0;
      display: none;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,.1);
    }
    .load-block-image {
      position: absolute;
      z-index: 1001;
      top: 0;
      left: 0;
      display: none;
      width: 100%;
      height: 100%;
    }
    .load-block-image img {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%,-50%);
         -moz-transform: translate(-50%,-50%);
          -ms-transform: translate(-50%,-50%);
              transform: translate(-50%,-50%);
    }
    /* Load block */

    button img {
        max-width: 100%;
        display: block;
        margin: 0 auto;
        margin-bottom: 1rem;
    }
    </style>


  </head>
  <body>

    <div class="card">
          <div class="card-container">
            <div class="flex between">
              <div class="logo-loja">
              </div>
              <div class="text-grey text-right text-small padding-x-small">
                <p>{{text_num_pedido}} {{pedido_id}}</p>
                <p>{{text_data_pedido}} {{pedido_data}}</p>
              </div>
            </div>
            <div class="nome text-large vertical-margin-x-large">
              <span>{{text_nome}} {{pedido_cliente}}</span>
            </div>
            <hr>

            {% for keyTipo, cartTipo in productlist %}
              {% for keyLista, lista in cartTipo %}
                {% if lista.isListaEscolar %}
                  {% if productlist|length > 1 %}
                    <hr class="bottom-border-gray top-padding-medium bottom-margin-medium">
                  {% endif %}
                  <span class="text-large text-dark visible-block top-padding-medium">{{lista.descricao}}</span>
                {% endif %}
                {% for keyProduto, produto in lista.products %}
                  <div class="flex nowrap between top vertical-margin-small">
                    <div class="quantidade padding-x-small">
                      {{ produto.quantidade }}x
                    </div>
                    <div class="description auto padding-x-small">
                      <span class="text-medium">{{ produto.descricao }}</span>
                      <p class="text-small text-grey">{{text_preco_unitario}} {{ produto.preco_unitario }}</p>
                      {% if produto.itens_kit %}
                        <div class="top-padding-x-small">
                          {% for itemKitKey, itemKit in produto.itens_kit %}
                            <p class="text-small text-grey">
                              <span class="text-bold">{{ itemKit.quantidade }}</span>
                               - {{ itemKit.descricao }}
                            </p>
                          {% endfor %}
                        </div>
                      {% endif %}

                      {% if produto.brinde %}
                          <div class="top-padding-x-small right-margin-small text-small">
                            <span class="text-gray">{{ text_gift }}</span>
                            <span class="text-dark text-bold">{{produto.brinde.product_name}}</span>
                          </div>
                      {% endif %}
                    </div>
                    <div class="preco padding-x-small">
                      {{ produto.total }}
                    </div>
                  </div>
                {% endfor %}
              {% endfor %}
            {% endfor %}

            <hr>
            {% for total in totals %}
              <div class="flex nowrap between top text-title-color text-medium vertical-margin-small">
              <div class="padding-x-small">
                  {{total.title}}
                </div>
                <div class="padding-x-small">
                  {{total.text}}
                </div>
              </div>
            {% endfor %}
            <hr>
<!--
            <div class="flex nowrap between top text-title-color text-medium vertical-margin-small">
              <div class="padding-x-small">
                {{text_total_pedido}}
              </div>
              <div class="padding-x-small">
                {{pedido_total}}
              </div>
            </div>
            <hr>
-->

            {% if tolken_valido and pagamento_aberto %}

              {{msg_itau_confirm}}

            {% elseif not pagamento_aberto %}
              <button id="paymentPG" class="paymentPG rounded text-center success btnGreensuccess">
                <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDQ0Mi41MzMgNDQyLjUzMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDQyLjUzMyA0NDIuNTMzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTQzNC41MzksOTguNDk5bC0zOC44MjgtMzguODI4Yy01LjMyNC01LjMyOC0xMS43OTktNy45OTMtMTkuNDEtNy45OTNjLTcuNjE4LDAtMTQuMDkzLDIuNjY1LTE5LjQxNyw3Ljk5M0wxNjkuNTksMjQ3LjI0OCAgIGwtODMuOTM5LTg0LjIyNWMtNS4zMy01LjMzLTExLjgwMS03Ljk5Mi0xOS40MTItNy45OTJjLTcuNjE2LDAtMTQuMDg3LDIuNjYyLTE5LjQxNyw3Ljk5Mkw3Ljk5NCwyMDEuODUyICAgQzIuNjY0LDIwNy4xODEsMCwyMTMuNjU0LDAsMjIxLjI2OWMwLDcuNjA5LDIuNjY0LDE0LjA4OCw3Ljk5NCwxOS40MTZsMTAzLjM1MSwxMDMuMzQ5bDM4LjgzMSwzOC44MjggICBjNS4zMjcsNS4zMzIsMTEuOCw3Ljk5NCwxOS40MTQsNy45OTRjNy42MTEsMCwxNC4wODQtMi42NjksMTkuNDE0LTcuOTk0bDM4LjgzLTM4LjgyOEw0MzQuNTM5LDEzNy4zMyAgIGM1LjMyNS01LjMzLDcuOTk0LTExLjgwMiw3Ljk5NC0xOS40MTdDNDQyLjUzNywxMTAuMzAyLDQzOS44NjQsMTAzLjgyOSw0MzQuNTM5LDk4LjQ5OXoiIGZpbGw9IiM1Y2I4NWMiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K">
                <span>{{text_pedido_finalizado}}</span>
              </button>
            {% else %}
              <button id="paymentPG" class="paymentPG rounded text-center success btnOrangesuccess">
                <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDQwMS45OTkgNDAxLjk5OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAxLjk5OSA0MDEuOTk4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTIzNy41NDMsMzAxLjQ5OWgtNzMuMDkxYy00Ljk1LDAtOS4yMzMsMS44MTEtMTIuODUxLDUuNDI1Yy0zLjYxNSwzLjYxNy01LjQyNCw3Ljg5Ny01LjQyNCwxMi44NDd2NjMuOTUzICAgIGMwLDQuOTQ4LDEuODA5LDkuMjMyLDUuNDI0LDEyLjg1NGMzLjYyMSwzLjYxLDcuOSw1LjQyMSwxMi44NTEsNS40MjFoNzMuMDk3YzQuOTQyLDAsOS4yMjctMS44MTEsMTIuODQ4LTUuNDIxICAgIGMzLjYxLTMuNjIxLDUuNDItNy45MDUsNS40Mi0xMi44NTR2LTYzLjk1M2MwLTQuOTQ5LTEuODEzLTkuMjI5LTUuNDI3LTEyLjg0N0MyNDYuNzczLDMwMy4zMDcsMjQyLjQ4OCwzMDEuNDk5LDIzNy41NDMsMzAxLjQ5OXoiIGZpbGw9IiNmMTdlMjkiLz4KCQk8cGF0aCBkPSJNMjU5LjM4Myw1LjQyNEMyNTUuODYyLDEuODEyLDI1MS42MjgsMCwyNDYuNjc2LDBoLTkxLjM1OWMtNC45NDgsMC05LjE4LDEuODEyLTEyLjcwMyw1LjQyNCAgICBjLTMuNTIxLDMuNjE3LTUuMTg2LDcuOTAyLTQuOTk2LDEyLjg1bDcuOTkyLDIxOS4yNjVjMC4xOSw0Ljk0OCwyLjEzOSw5LjIzNiw1Ljg1MiwxMi44NDdjMy43MTEsMy42MjEsOC4wNDEsNS40MzEsMTIuOTkxLDUuNDMxICAgIGg3My4wOTdjNC45NDIsMCw5LjI3MS0xLjgxLDEyLjk5MS01LjQzMWMzLjcxLTMuNjEsNS42NTMtNy44OTgsNS44NTItMTIuODQ3bDcuOTg3LTIxOS4yNjUgICAgQzI2NC41NzgsMTMuMzI2LDI2Mi45MDUsOS4wNDUsMjU5LjM4Myw1LjQyNHoiIGZpbGw9IiNmMTdlMjkiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
                <span>{{text_link_invalido}}</span>
              </button>
            {% endif %}

          </div>
        </div>

        <div class="text-small" style="border: none; max-width: 560px; margin: 80px auto 0; text-align: center;">
            <p>{{empresa_razao}}</p>
            <p>{{empresa_endereco}}</p>
            <b>CNPJ:</b> {{empresa_cnpj}}</p>
            <br>
            <p><b>Tel:</b> {{empresa_tel}}</p>
            <p><b>E-mail:</b> {{empresa_email}}</p>
            <br>
        </div>

        <div class="load load-block" />
        <div class="load load-block-image">
          <img src="assets/img/loading-black.svg" alt="loading">
        </div>

  <script>
    window.name='loja';
    function vai() {
      window.location = '{{url_itau_confirm}}';
      return true;
    }
  </script>

</body>
</html>
