body{margin:0; padding:0; font-family: Arial, Helvetica, sans-serif; color: #252525;}

/* HIGHLIGHT */

::-moz-selection { /* Code for Firefox */
  color: #fff;
  background: #25d366;
}

::selection {
  color: #fff;
  background: #25d366;
}

.brandname{font-size: 14px; color:lightgray; text-align: none;}

a{text-decoration: none;}

/***** DESKTOP *****/

@media (min-width:801px) {

#perfil{width: 800px; height: auto; margin-left:-400px; left:50%; position: relative; text-align:center; margin-top: 40px; margin-bottom: 40px; font-size:20px;}

#link{width:100%; text-align: center; margin-bottom:12px; padding: 30px 0; border-radius: 12px; text-decoration: none;}

#txt{width:80%; position:relative; left:50%; margin-left: -40%; line-height: 26px;}

.btn{background-color:#25d366; color:#ffffff; border:1px solid #25d366; padding:14px 30px; font-size:28px; border-radius: 8px;}

.inputqtd{background-color:#ffffff; border:1px solid #cccccc; width:140px; padding:14px 30px; text-align:center; font-size:28px; margin-top:14px; border-radius: 8px;}

  #picperfil {
    width: 140px;
    height: 140px;
    background-color: #e2e6e9;
    border-radius: 50%;
    border: none;
    display:inline-block;
    margin-bottom: 6px;
  }

  /* PAGINA DE PEDIDOS */
  #boxproduto{margin-bottom:40px; padding-bottom:40px; border-bottom:1px dotted #cccccc;}
  #picproduto{width:80px; height:80px; margin-right:18px; border-radius:8px; background-color:#cccccc; display:inline-block; vertical-align:top; position: relative;  background-size: cover; background-position: center;}
  #more{border:none; background-color:#000; color:#fff; bottom:3px; right:3px; position:absolute; width:16px; height:16px; border-radius:100px; font-size:14px;}
  #descproduto{width:calc(100% - 208px); display:inline-block; text-align:left;}
  #boxquant{width:80px; display:inline-block; margin-left:18px; vertical-align:top;}
  .nomeprod{margin:0 0 8px 0; font-weight:bold;}
  .precoprod{background-color:#ddd; color:#000; padding:6px 10px; border-radius:8px; font-size:14px; font-weight:bold;}
  .descprod{color:#999999; font-size:18px; margin-bottom:0px;}
  .contador{background-color:#ffffff; border:1px solid #ccc; width:76px; height:34px; text-align:center; font-size:24px; border-radius: 8px; margin-bottom:6px;}
  .menos{border:none; border-radius:8px; background-color:#000; color:#fff; height:36px; width:36px; font-size:24px; margin-right:7px;}
  .mais{border:none; border-radius:8px; background-color:#000; color:#fff; height:36px; width:36px; font-size:24px;}
  .obs{background-color:#ffffff; border:1px solid #ccc; width:calc(100% - 14px); height:80px; text-align:left; font-size:16px; border-radius: 8px; padding-left:6px; padding-top:6px;}
  .cliente{background-color:#ffffff; border:1px solid #ccc; width:calc(100% - 14px); height:34px; text-align:left; font-size:16px; border-radius: 8px; margin-bottom:6px; padding-left:6px;}

  .modal {
    display: none; /* Agora o modal começa oculto */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-content {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
  }

  .modal img {
    max-width: 600px; /* A imagem nunca ultrapassa 400px */
    width: 90%; /* Para garantir que se ajuste ao modal */
    height: auto; /* Mantém a proporção */
    border-radius: 8px; /* Apenas para um visual mais bonito */
}

  .close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 40px;
    color: #fff;
    background-color: #000;
    padding: 0 14px;
    border:none;
    border-radius:8px;
    cursor: pointer;
  }

}

/***** MOBILE *****/

@media (max-width:800px) {

#perfil{width: 90%; height: auto; margin-left:-45%; left:50%; position: relative; text-align:center; margin-top: 40px; margin-bottom: 40px; font-size:16px;}

#link{width:100%; text-align: center; margin-bottom:8px; padding: 22px 0; border-radius: 8px; text-decoration: none;}

#txt{width:80%; position:relative; left:50%; margin-left: -40%; line-height: 20px;}

.btn{background-color:#25d366; color:#ffffff; border:1px solid #25d366; padding:12px 20px; font-size:20px; border-radius: 8px;}

.inputqtd{background-color:#ffffff; border:1px solid #cccccc; width:100px; padding:12px 20px; text-align:center; font-size:20px; margin-top:14px; border-radius: 8px;}

  #picperfil {
    width: 140px;
    height: 140px;
    background-color: #e2e6e9;
    border-radius: 50%;
    border: none;
    display:inline-block;
    margin-bottom: 6px;
  }

  /* PAGINA DE PEDIDOS */
  #boxproduto{margin-bottom:40px; padding-bottom:40px; border-bottom:1px dotted #cccccc;}
  #picproduto{width:80px; height:80px; margin-right:18px; border-radius:8px; background-color:#cccccc; display:inline-block; vertical-align:top; position: relative;  background-size: cover; background-position: center;}
  #more{border:none; background-color:#000; color:#fff; bottom:3px; right:3px; position:absolute; width:16px; height:16px; border-radius:100px; font-size:14px;}
  #descproduto{width:calc(100% - 208px); display:inline-block; text-align:left;}
  #boxquant{width:80px; display:inline-block; margin-left:18px; vertical-align:top;}
  .nomeprod{margin:0 0 8px 0; font-weight:bold;}
  .precoprod{background-color:#ddd; color:#000; padding:6px 10px; border-radius:8px; font-size:12px; font-weight:bold;}
  .descprod{color:#999999; font-size:14px; margin-bottom:0px;}
  .contador{background-color:#ffffff; border:1px solid #ccc; width:76px; height:34px; text-align:center; font-size:24px; border-radius: 8px; margin-bottom:6px;}
  .menos{border:none; border-radius:8px; background-color:#000; color:#fff; height:36px; width:36px; font-size:24px; margin-right:7px;}
  .mais{border:none; border-radius:8px; background-color:#000; color:#fff; height:36px; width:36px; font-size:24px;}
  .obs{background-color:#ffffff; border:1px solid #ccc; width:calc(100% - 14px); height:80px; text-align:left; font-size:16px; border-radius: 8px; padding-left:6px; padding-top:6px;}
  .cliente{background-color:#ffffff; border:1px solid #ccc; width:calc(100% - 14px); height:34px; text-align:left; font-size:16px; border-radius: 8px; margin-bottom:6px; padding-left:6px;}

  .modal {
    display: none; /* Agora o modal começa oculto */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-content {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
  }

  .modal img {
    max-width: 600px; /* A imagem nunca ultrapassa 400px */
    width: 90%; /* Para garantir que se ajuste ao modal */
    height: auto; /* Mantém a proporção */
    border-radius: 8px; /* Apenas para um visual mais bonito */
}

  .close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 40px;
    color: #fff;
    background-color: #000;
    padding: 0 14px;
    border:none;
    border-radius:8px;
    cursor: pointer;
  }

}