@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bokor&family=Gowun+Dodum&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bokor&family=Gowun+Dodum&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Pirata+One&display=swap');
body{
    font-family: "Pirata One", system-ui!important;
}

body{
   /* background-color: rgba(255, 217, 0, 0.75); /*rgba(201, 190, 43, 0.938);*/
   background: radial-gradient(rgb(240, 219, 103), rgba(66, 49, 1, 0.76));
}

/*  NAVBAR  */
.navbar-brand{
    font-size: 2em;
    color: rgb(255, 255, 255);
}

.navbar-brand:hover{
    font-size: 2.3em;
    color: rgb(255, 255, 255);
    text-shadow:rgb(243, 242, 239) 0em 0em 0.5em;
}

.nav-bg{
    background-color: rgb(46, 22, 8);
    padding: 5px;
    margin: 0px;
}

.nav-link{
    color:gold;
    font-family: "Pirata One", system-ui!important;
    text-shadow: black 0em 0em 0.1em;
    font-size: 1.3em;
}
.nav-link:hover{
    color: gold;
    text-shadow:rgb(243, 242, 239) 0em 0em 0.5em;
}

li > .show{
    color:gold!important;
}

.dropdown-toggle:focus{
    color:gold;
}

.dropdown-item:hover{
    background-color: black;
    color: white;
}

.btn-search{
    background: black;
    color: gold;
    border-color: gold;
}
.btn-search:hover{
    background: black;
    color: gold;
    text-shadow: rgb(243, 242, 239) 0em 0em 0.5em;
    border-color: gold;
    box-shadow: rgb(243, 242, 239) 0em 0em 0.5em;
}


/*  ÁREA HOME - BANNER   */
.home-wrap{
    position: relative;
    overflow: hidden;
}

.home-bg{
    opacity: 0.6;
    position: absolute;
    margin-top: -80px;
    margin-left: -5%;
    width: 110%;
    background-size: cover;
    background-repeat: no-repeat;
}

h1,h2,h3,h4,h5 > strong{
    font-family: "Pirata One", system-ui;
    font-weight: 550;
    font-style: normal;
    color: black;
  /* border-bottom: 3px solid black;*/
}

.custom-hr{
   height: 5px ;
   background: black;
   margin-bottom: 30px;
}

.home-content{
    position: relative;
    height: 100%;
}

.home-text{
    color: gold;
    border-bottom: 5px solid rgb(46, 22, 8);
    text-shadow: black 0em 0em 0.1em;
}

/*  ÁREA DE PRODUTOS NA INDEX   */
.link-mais-produtos{
    text-align: center;
    font-size: 27px;
    font-weight: 700;
    color: red;
    margin-left: 50%;
    margin-top: 4%;
    border-bottom: 0; 
    text-decoration: none;
}

.link-mais-produtos:hover{
    color: gold;
    text-shadow: rgb(0, 0, 0) 0em 0em 0.5em;
}


/*  RODAPÉ  */
#rodape{
    background-color: rgb(46, 22, 8);
    color: gold;
    padding-top: 1em;
    margin-top: 2em;
}

.rodape-list{
    list-style-type: none;
}

.rodape-link{
    text-decoration: none;
    color: gold;
}
.rodape-link:hover{
    color: gold;
    text-shadow:rgb(243, 242, 239) 0em 0em 0.5em;
}

/* TAG DE PROMOÇÃO NA IMAGEM */
.container-imagem-promo{
    position: relative;
    text-align: center;
    color: white;
  }

.texto-promo{
    position: absolute;
    top: 6%;
    left: 30%;
    transform: translate(-50%, -50%);
    transform: rotate(-45deg);
    background-color: red;
    color: white;
    font-size: 25px;
}

.texto-promo-descricao{
    position: absolute;
    top: 23%;
    left: 24.5%;
    transform: translate(-50%, -50%);
    transform: rotate(-45deg);
    background-color: red;
    color: white;
    font-size: 40px;
}

.card-preco{
    font-size: 1.8em;
    color: brown;
    border-bottom: 1px solid gold;
    text-decoration: none!important;
}

.card-preco-promo{
    font-size: 1.2em;
    color: brown;
    border-bottom: 1px solid gold;
    text-decoration: line-through;
    margin-right: 1em;
}

/* PÁGINA DE PRODUTOS */
.box-filtros{
    border: 2px solid gold;
    box-shadow: rgb(250, 252, 179) 0em 0em 0.5em;
    border-radius: 10px;
    padding: 10px;
}

.box-padding-filtros{
    padding-left: 15px;
}

.form-check-input:checked{
    background-color: gold !important;
    border: 0;
 }

.form-check-input:focus, .label::after, label.form-check-label:focus, .form-check-input::after, .form-check-input:not(:disabled):not(.disabled):active:focus {
    color: black;
    outline: 0;
    border: 0;
    box-shadow: 0 0 0 0.1rem white !important;
}

.card{
    border: 2px solid gold;
    border-radius: 10px;
    box-shadow: rgb(250, 252, 179) 0em 0em 0.5em;
    background: radial-gradient(rgb(240, 219, 103), rgba(151, 132, 81, 0.76));
}

.text-hide{
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
    max-width: 100%;
}

.texto-desculpa{
    text-align: center;
    color: red;
    padding: 0 5em 0px 5em;
    border-bottom: 0;
}

.texto-acessorios{
    text-align: center;
    color: black;
    text-shadow: gold 0em 0em 0.1em;
    padding: 0 5em 0px 5em;
    border-bottom: 5em;
    /*rgb(207, 4, 4)*/
}

/*  PAGINA DE DESCRIÇÃO DO PRODUTO  */
.box-produto{
    border: 1px solid gold;
    box-shadow:  rgb(250, 252, 179) 0em 0em 0.5em;
    border-radius: 25px;
    background: radial-gradient(rgb(240, 219, 103), rgba(151, 132, 81, 0.76));
}

.preco-descricao{
    color: brown;
    font-weight: 600;
}

.btn-add{
    background: black;
    color: gold;
    border-color: gold;
    font-size: 1.5em;
}

.btn-add:hover{
    background: black;
    color: gold;
    text-shadow: rgb(243, 242, 239) 0em 0em 0.5em;
    border-color: gold;
    box-shadow: rgb(243, 242, 239) 0em 0em 0.5em;
}

.box-avaliacoes{
    height: 150px;
    max-height: 100%;
    overflow: scroll;
    overflow-x: hidden;
}

.avaliacao{
    border: 2px solid;
    margin-top: 3px;
    border-radius: 5px;
    background: rgba(128, 128, 128, 0.199);
    border-color: gold;
    box-shadow: rgb(243, 242, 239) 0em 0em 0.5em;
    padding: 10px 10px 0px 10px;
}

.usuario-texto{
    color: brown;
}

.rating{
    top: 50%;
    left: 50%;
    transform: translate(0%, -18%) rotateY(180deg);
    display: flex;
  }
  
  .rating input{
    display: none;
  }
  
  .rating label{
      display: block;
      cursor: pointer;
      width: 39px;
  }
  
  .rating label:before{
    content: '\f005';
    font-family: fontAwesome;
    position: relative;
    display: block;
    font-size: 28px;
    color: black;
  }
  
  .rating label:after{
    content: '\f005';
    font-family: fontAwesome;
    position: absolute;
    display: block;
    font-size: 28px;
    color: rgb(189, 161, 6);
    top: 0;
    opacity: 0;
    transition: .5;
    text-shadow: 0 4px 5px rgba(0, 0, 0, .5);
  }
  .rating label:hover:after,
  .rating label:hover ~ label:after,
  .rating input:checked ~ label:after{
    opacity: 1;
  }

.area-comentario{
    width: 85%;
}

.btn-comentario{
    margin-left: 30%;
    background: black;
    color: gold;
    border-color: gold;
}
.btn-comentario:hover{
    background: black;
    color: gold;
    text-shadow: rgb(243, 242, 239) 0em 0em 0.5em;
    border-color: gold;
    box-shadow: rgb(243, 242, 239) 0em 0em 0.5em;
} 
  
.estrela{
    font-size: 40px;
    color: rgb(121, 103, 0);
}


/*  CARRINHO DE COMPRAS     */

.titulo-carrinho{
    margin-top: 1em;
    background: black;
    color: gold;
    border: 1px solid rgb(243, 242, 239);
    padding-left: 1em;
}

.produto-carrinho{
    border: 1px solid rgb(243, 242, 239);
    padding: 1em;
    background-color: rgba(255, 255, 255, 0.158);
}

.botao-remover-item{
    text-align: center;
    font-weight: 900;
    margin-right: 0.7em;
    font-family: 'Courier New', Courier, monospace;
    background: red;
    border-radius: 100%;
}

input[type='number']::-webkit-inner-spin-button, 
input[type='number']::-webkit-outer-spin-button { 
    opacity: 1;
}

.produto-carrinho-total{
    text-align: center;
    color: black;
    font-size: 1.5em;
    border: 2px solid gold;
    background-color: rgba(255, 217, 0, 0.13);
}

.foto-carrinho{
    height:150px;
    width:auto;
    margin-left: 2em;
    margin-right:2em;
}

.finalizar-pedido{
    float: right;
}


/*      AREÁ PEDIDOS    */
.descricao-pedido{
    text-decoration: none;
    color: black;
    font-size: 1.3em;
}

.descricao-botao{
    float: right;
    margin-top: 7%;
}