:root {
--colorcarrinho: #232323;
}
/* NOVO DESIGN - TELA DE LOGIN */
.auth-container{padding: 0}
.auth-card{background: #fff; border: 1px solid #eef2f7; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.06); padding: 24px;}
.auth-left{border-right: 1px solid #f1f5f9; padding: 16px 20px;}
.auth-right{padding: 16px 20px;}
/* Logo no topo do card (modo login) */
.login-logo{ margin-bottom: 8px; }
.login-logo-img{ height: 42px; width: auto; display: inline-block; }
/* Espaçador do login para forçar footer ao fim (apenas mobile/login) */
.login-footer-spacer{ display:none; }
@media (max-width: 992px){
body.auth-fullscreen .login-footer-spacer{ display:block; height: calc(220px + env(safe-area-inset-bottom, 0px)); width: 100%; }
}
.auth-title{margin: 6px 0 8px 0; font-weight: 800; color:#111827}
.auth-subtitle{color:#6b7280; margin-bottom: 10px}
.auth-benefits{padding-left: 0; margin: 0 0 12px 0}
.auth-benefits li{display:flex; align-items:center; gap:8px; color:#374151; margin:6px 0}
.auth-benefits i{color: var(--cor-1)}
.form-title{font-weight:700; color:#111827; margin:0 0 10px 0}
.social-login{display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 10px}
.social-item{display:inline-flex; align-items:center}
.divider{position:relative; text-align:center; margin: 6px 0 12px}
.divider span{background:#fff; padding: 0 8px; color:#6b7280; position:relative; z-index:1}
.divider:before{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:#e5e7eb}
.has-icon{position:relative}
/* Ícone padrão à direita (fallback) */
.input-icon{position:absolute; right:12px; top:50%; transform:translateY(-50%); color:#9ca3af; pointer-events:none}
/* Ícone à esquerda quando marcado com .left */
.input-icon.left{left:12px; right:auto}
/* Espaço quando há ícone à esquerda */
.has-icon .form-control{padding-left:40px}
.input-affix{position:relative; display:flex; align-items:center}
.input-affix .form-control{padding-right:44px}
.input-affix .password-toggle{right:8px}
.password-group{position: relative}
/* Botão olho alinhado verticalmente e com área clicável confortável */
.password-toggle{position:absolute; right:10px; top:50%; transform:translateY(-50%); background:transparent; border:0; color:#6b7280; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:6px}
.password-toggle:hover{background:#f3f4f6}
.password-toggle:focus{outline:none; box-shadow:0 0 0 2px rgba(13,110,253,.15)}
.forgot-link{float:right; font-size: 11px; margin-top: -2px}
.extras{display:flex; align-items:center; justify-content:space-between}
.remember-inline{font-size:12px; color:#374151}
.btn-login.btn-block{width:100%; border-radius:8px; font-weight:700; padding:10px 12px !important}
.register-cta{margin-top: 16px; padding-top: 14px; border-top:1px solid #f1f5f9}
.register-cta h4{font-weight:700; margin:0 0 4px 0}
.register-cta p{color:#6b7280; margin-bottom:10px}
.register-form .btn-create{border:1px solid #d1d5db !important; background:#fff; color:#111827; font-weight:700; border-radius:8px; padding:10px 12px !important}
/* Microinterações e estados de foco/erro/sucesso */
.auth-right .form-group{margin-bottom:12px}
.auth-right .form-control{height:42px; border-radius:8px; transition:border-color .15s ease, box-shadow .15s ease}
.auth-right .form-control:focus{border-color:var(--cor-1); box-shadow:0 0 0 3px rgba(0,123,255,.12)}
.auth-right .form-control.error{border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.12)}
.auth-right .form-control.success{border-color:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.12)}
/* Hover e feedback de botões */
.btn-login{transition: filter .15s ease, transform .06s ease}
.btn-login:hover{filter:brightness(.96)}
.btn-login:active{transform:translateY(1px)}
.btn-create{transition: background .15s ease, transform .06s ease}
.btn-create:hover{background:#f8fafc}
.btn-create:active{transform:translateY(1px)}
/* Elevação sutil do card ao focar campos */
.auth-card:focus-within{box-shadow:0 14px 40px rgba(0,0,0,.09)}
/* Título e subtítulo com animação sutil */
.auth-title{animation:fadeSlide .3s ease both}
.auth-subtitle{animation:fadeSlide .35s ease .05s both}
@keyframes fadeSlide{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}
/* Experiência de login “full-screen” mercadológica: oculta navegação e distratores */
.auth-fullscreen nav,
.auth-fullscreen .menu_flutuante,
.auth-fullscreen footer,
.auth-fullscreen .footer-1,
.auth-fullscreen .footer-1-2,
.auth-fullscreen .minibanner,
.auth-fullscreen .newsletter,
.auth-fullscreen .faixa-head{ display:none !important; }
/* Desktop (>= 993px): manter header/menu desktop visíveis no login full-screen */
@media (min-width: 993px){
.auth-fullscreen header{ display:block !important; }
.auth-fullscreen .menu-desktop{ display:block !important; }
.auth-fullscreen footer{ display:none !important; }
}
/* Mobile (<= 992px): usar menu hamburguer e esconder header desktop */
@media (max-width: 992px){
/* Layout de página: empurra footer para o final e mantém fundo branco */
body.auth-fullscreen{
background: #fff !important;
display: flex !important;
flex-direction: column !important;
min-height: 100dvh !important;
}
/* Esconde o botão flutuante do WhatsApp apenas no login mobile */
body.auth-fullscreen .whatsapp-float{ display: none !important; }
.auth-fullscreen .auth-container{ flex: 1 0 auto !important; padding-bottom: 50px !important; }
/* Reexibir footer e seções no modo login mobile */
.auth-fullscreen footer,
.auth-fullscreen .footer-1,
.auth-fullscreen .footer-1-2{ display:block !important; }
/* Fixar footer no rodapé em login mobile e evitar colar no conteúdo */
.auth-fullscreen footer,
.auth-fullscreen .footer-1,
.auth-fullscreen .footer-1-2,
.auth-fullscreen .footer-2{
position: fixed !important;
left: 0; right: 0; bottom: 0;
background: #fff !important;
z-index: 9995;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
}
.auth-fullscreen footer .container,
.auth-fullscreen .footer-1 .container,
.auth-fullscreen .footer-1-2 .container,
.auth-fullscreen .footer-2 .container{ padding: 0 !important; margin: 0 auto !important; }
.auth-fullscreen footer .row,
.auth-fullscreen .footer-1 .row,
.auth-fullscreen .footer-1-2 .row,
.auth-fullscreen .footer-2 .row{ margin: 0 !important; }
.auth-fullscreen footer .text-center,
.auth-fullscreen .footer-1 .text-center,
.auth-fullscreen .footer-1-2 .text-center,
.auth-fullscreen .footer-2 .text-center{ margin: 0 !important; padding: 0 !important; }
.auth-fullscreen .img-rodape{ margin: 0 auto !important; }
/* Reserva de espaço mais precisa para o footer fixo */
.auth-fullscreen .auth-container{ padding-bottom: 0 !important; }
/* Reserva de espaço para o footer fixo */
.auth-fullscreen .auth-container{ padding-bottom: 120px !important; }
.auth-fullscreen header{ display:none !important; }
.auth-fullscreen .menu-desktop{ display:none !important; }
/* Mostrar header mobile no login */
.auth-fullscreen .menu-mobile{ display:block !important; }
.auth-fullscreen .mobile-header{ display:flex !important; }
/* Evita exibir a barra de pesquisa de desktop no mobile do login */
.auth-fullscreen .barra-pesquisa{ display:none !important; }
/* Mostrar apenas os campos de login e o botão de cadastro no mobile */
.auth-fullscreen .auth-left{ display:none !important; }
.auth-fullscreen .auth-right{ width:100% !important; border-right:0 !important; }
.auth-fullscreen .auth-title,
.auth-fullscreen .auth-subtitle,
.auth-fullscreen .social-login,
.auth-fullscreen .divider{ display:none !important; }
/* Oculta textos da seção de cadastro, mantendo o botão visível */
.auth-fullscreen .register-cta h4,
.auth-fullscreen .register-cta p{ display:none !important; }
/* Sem card no mobile: apenas campos/botões, com pequeno espaço abaixo do header */
.auth-fullscreen .auth-container{
display: block !important;
min-height: auto !important;
height: auto !important;
padding: 32px 0 24px 0 !important; /* desce o login para longe do header */
}
.auth-fullscreen .auth-card{
margin: 0 !important;
max-width: 100% !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 12px !important;
}
.auth-fullscreen .auth-right{ padding: 0 0 8px 0 !important; }
.auth-fullscreen .auth-container{ padding-bottom: 0 !important; }
.auth-fullscreen .auth-card .text-center:last-child{ margin-bottom: 0 !important; padding-bottom: 0 !important; }
/* Zera espaçamento do último elemento dentro do container para não sobrar gap até o fim da página */
.auth-fullscreen .auth-container > *:last-child{ margin-bottom: 0 !important; padding-bottom: 0 !important; }
/* Remover espaçamento do bloco de cadastro quando textos estão ocultos */
.auth-fullscreen .register-cta{ margin: 0 0 24px 0 !important; padding: 0 !important; border: 0 !important; }
/* Reduzir padding da área do formulário para minimizar espaço extra */
.auth-fullscreen .auth-right{ padding: 12px 14px !important; }
/* Normalizar possíveis margens do último bloco centralizado */
.auth-fullscreen .auth-card .text-center{ margin-bottom: 8px !important; }
/* Garantir footer visível e com espaço adequado */
.auth-fullscreen footer{ display:none !important; }
}
.auth-fullscreen{ }
body.auth-fullscreen{ background: linear-gradient(135deg, #f6f9fc 0%, #eef2f7 100%) !important; margin: 0 !important; }
/* Forçar fundo branco no mobile APÓS a regra global de gradiente */
@media (max-width: 992px){
body.auth-fullscreen{ background: #fff !important; }
}
/* Aplicar layout flex com 100vh apenas no desktop para centralizar verticalmente */
@media (min-width: 993px){
.auth-fullscreen .auth-container{ min-height: calc(100vh - 0px); display:flex; align-items:center; padding-top: 10px; }
}
.auth-fullscreen .auth-card{ max-width: 980px; margin: 0 auto; }
.auth-fullscreen .auth-left{ padding: 24px 28px; }
.auth-fullscreen .auth-right{ padding: 24px 28px; }
/* Hero sutil na lateral esquerda (sem imagens externas) */
.auth-left{position:relative; overflow:hidden}
.auth-left:after{content:""; position:absolute; inset:-1px; background: radial-gradient(1200px 300px at -10% -20%, rgba(0,123,255,.08), transparent 60%), radial-gradient(900px 300px at 120% 120%, rgba(34,197,94,.08), transparent 60%)}
@media (max-width: 992px){
.auth-left{border-right: 0; border-bottom: 1px solid #f1f5f9; padding-bottom: 12px; margin-bottom: 12px}
}
/* Ajustes adicionais de responsividade da tela de login */
@media (max-width: 768px){
.auth-container{ padding-top: 0; }
.auth-card{ padding: 16px; }
.auth-left, .auth-right{ padding: 14px 16px; }
.auth-title{ font-size: 22px; }
.form-title{ font-size: 18px; }
.auth-right .form-control{ height: 48px; }
.password-toggle{ width: 40px; height: 40px; right: 6px; }
.social-login{ gap: 8px; }
.social-login .social-item{ width: 100%; }
.btn-login.btn-block{ padding: 12px !important; }
.register-form .btn-create{ padding: 12px !important; }
}
@media (max-width: 480px){
.auth-card{ padding: 12px; }
.auth-left, .auth-right{ padding: 12px; }
.auth-title{ font-size: 20px; }
.auth-subtitle{ font-size: 13px; }
.auth-benefits li{ font-size: 13px; }
.input-icon.left{ left: 10px; }
.has-icon .form-control{ padding-left: 38px; }
}
/* CARRINHO */
.plus-carrinho{position: absolute !important;top: 16px !important;right: -6px !important;font-size: 16px !important;color: #232323 !important;}
.minus-carrinho{position: absolute !important;top: 16px !important;left: -6px !important;font-size: 16px !important;color: #232323 !important;}
.minus-carrinho:hover,.plus-carrinho:hover{cursor: pointer !important;}
.carrinhopag{font-weight: 700; font-size: 36px; color: var(--colorcarrinho);}
.text{ font-size: 12px;}
.cart-resumo{ padding: 0; }
.cart-item { margin: 22px 0 22px 0; text-align: center; }
.cart-item img{margin: 0 auto;}
.text-itens{ font-size: 11px; }
.cart-remove{ color: var(--colorcarrinho); font-size: 10px; cursor: pointer; }
.cart-remove:hover{ color: grey;}
.remove-favorito a{ cursor: pointer; color: #FFF; background-color: #e5322d; position: absolute; padding: 6px; letter-spacing: 1px; text-transform: uppercase; }
.remove-favorito a:hover{ color: #FFF; text-decoration: none; }
.ico-fav{ color: red; font-size: 16px !important; }
.carrinhodisplay{display: block;padding: 0 0 25px 0;margin-top: 25px;border-bottom: solid .1rem #e1e1e1; margin-left: auto !important; margin-right: auto !important;}
.carrinhodisplay img{margin: 0;width: auto;max-height: 95px;}
.carrinhodisplay h6,.titlecardesk h6{ font-size: 15px; margin-bottom: 24px; font-weight: bold;}
.titlecarmobile{display: none;}
.carrinhodisplay b{font-size: 25px;position: relative; top: 6px;}
.nomeprodcarrinho{
font-size: 24px;
font-weight: 500;
color: #231f20;
}
.carvalorproduto{
border: solid .1rem #37c593;background: 0 0;color: #37c593;font-size: 1.1rem;font-weight: 500;border-radius: 5rem;width: 100px;padding: .4rem 1.6rem;
text-align: center;
}
#excluir_produto svg{width: 20px;position: relative;left: 94%;}
#botao_atualizar{position: absolute;top: 0;border: none;left: 73%;z-index: 20;outline: none !important;height: 50px;padding: 14px !important;border: 1px solid #e8e8e8;}
.form-carrinho{border: none !important; width: 94%; height: 50px; background: #efefef; text-align: center; outline: none !important;}
.carckt h4{font-size: 16px;font-weight: 700;letter-spacing: 0;text-transform: uppercase;color: var(--colorcarrinho);}
#scrollfinalizapedido{display: none;}
#scrollfinalizapedido .btn-cart{position: fixed;bottom: 15px;left: 15px;z-index: 999;width: 50%;transform: translateX(40%);}
@media (max-width: 768px) {
.titlecarmobile{display: block; margin-bottom: 11px !important;}
#scrollfinalizapedido{display: block;}
#carrega_frete_carrinho{width: 100%;}
.carrinhodisplay img {width: auto;}
.nomeprodcarrinho {font-size: 15px;}
.carvalorproduto {font-size: 0.8rem;}
.carrinhodisplay b {font-size: 18px;position: relative;top: 6px;}
.codinternocarrinho {font-size: 10px !important;}
}
.frete_carrinho input{
border: solid .1rem #e1e1e1;
font-family: "Roboto",sans-serif;
height: 4.5rem;
}
.frete_carrinho input:focus{
box-shadow: inset 0 0 0 .1rem var(--colorcarrinho);
border-color: var(--colorcarrinho);
}
.frete_carrinho button{ background: var(--colorcarrinho); height: 4.5rem; padding: 0;min-width: 10rem; line-height: normal; color: #fff !important;}
.frete_carrinho button:focus{outline: none !important; color: #fff !important;}
.cart-resumo span{font-size: 17px;}
.btn-cart{width: 100%;background: var(--colorcarrinho);padding: 1.3rem;font-size: 1.6rem !important;line-height: 1.5 !important;border-radius: .4rem !important;color: #fff;font-weight: 700 !important; margin-top: 20px;}
.btn-cart:hover, .btn-cart:focus{color: #fff !important; outline: none !important;}
.codinternocarrinho{color: var(--colorcarrinho) !important; font-size: 14px; font-weight: 500;}
#mostrar_valores{background: #eee;margin-top: 15px; border-radius: 7px; display: none;}
#gifcarrinhofrete{width: 70px; height: auto; margin: 0 auto;}
.gifcarrinhofrete{margin: auto; background: transparent; display: block; shape-rendering: auto; animation-play-state: running; animation-delay: 0s; width:67px; height:67px;}
.gifcarrinhofrete,.gifcarrinhofrete path{fill: var(--colorcarrinho);}
.box-border{ border: 1px solid #eeeeee; padding: 12px; margin-bottom: 20px; }
.box-border h4{ margin-bottom: 25px;}
.box-table hr{ margin-top: 5px; margin-bottom: 5px;}
.label-text{ font-weight: 100 !important; }
.MagicZoomBigImageCont{ color: transparent !important; margin: -5%; zoom: 1.1;}
.centro{ margin: 20px 0px 20px 0px; }
.detalhes-pedido-info span{ font-size: 18px; font-weight: bold; color: #4caf50; }
.detalhes-pedido-info .btn-big{ width: 100%; height: 90px; font-size: 16px; font-weight: bold; }
.detalhes-pedido-info .icons-ped-detalhes a{ color: #000; text-decoration: none; -webkit-transition: all 0.5s; transition: all 0.5s; }
.detalhes-pedido-info .icons-ped-detalhes a:hover{ color: #000; text-decoration: none; opacity: 0.60; }
.btn-acao-pequeno{ float: right; }
.mostrar{ position: absolute; width: 95%; z-index: 99999999; }
.mostrar>ul>li>a{ color: #000;}
.mostrar>ul>li{ -webkit-transition: all 0.5s; transition: all 0.5s; }
.mostrar>ul>li:hover{ padding-left:20px; background-color: #ddd !important;}
.mostrar>ul>li:first-child{ border-radius: 0px; }
.mostrar>ul>li:last-child{ border-radius: 0px; }
.vanilla-zoom { width: 100%; display: flex;}
.vanilla-zoom .sidebar { flex-basis: 30%; display: flex; flex-direction: column; margin-right: -83px;}
.vanilla-zoom .sidebar img.small-preview{ width: 80px; margin-bottom: 5px; cursor: pointer;}
.vanilla-zoom .sidebar img.small-preview:last-child{ margin-bottom: 0;}
.vanilla-zoom .zoomed-image { flex: 1; background-repeat: no-repeat; background-position: center; background-size: cover; margin-left: 5px; width: 550px; height: 550px;}
.zoom {display:inline-block;position: relative;}
.zoom img { display: block; max-width: 100%; }
.mini-imagens{ display: flex; flex-direction: column;}
.mini-imagens img{ width: 80px;height: 80px; padding: 10px;}
.mini-imagens img:hover{ border: 1px solid black;}
.imagensProduto{ width: 580px; display: flex; justify-content: space-between;}
@media (max-width: 768px) {
.vanilla-zoom .sidebar { flex: 1;}
.vanilla-zoom .sidebar img.small-preview { cursor: auto; margin-bottom: 12px;}
.vanilla-zoom .zoomed-image { display: none; }
.zoom img {width: 360px !important; height: auto !important;}
.mini-imagens{ display: inline-block; margin-bottom: 30px; }
}
/* ============= ENDEREÇO =============*/
.cadastroEnderecoTitulo { font-size: 20px; font-weight: 700; color: #333; }
.legendaFormulario { color: #333; font-weight: 700; text-transform: uppercase; }
.boxInputFormulario { margin: 1rem 0; }
.boxInputFormulario input[name=cep_nova_versao] { width: 100px; }
.boxInputFormulario input[name=numero_nova_versao] { width: 100px; }
.boxInputFormularioAlterar { margin: 1rem 0; }
.boxInputFormularioAlterar input[name=cep_nova_versao] { width: 100px; }
.boxInputFormularioAlterar input[name=numero_nova_versao] { width: 100px; }
.close {
position: absolute !important;
top: 10px !important;
right: 20px !important;
font-size: 40px !important;
outline: none;
}
/* BOTÃO CATEGORIA */
.vermaispublicacao{width: 100%;background: #fff;color: #000;padding: 12px 0;border: 2px solid #000;border-radius: 10px;font-weight: 700;font-size: 13px;}
.vermaispublicacao:focus{outline: none !important;}
.vermaispublicacao:hover{outline: none !important;}
/*PAGAMENOS*/
.pg-link{padding: 10px 0px 10px 5px !important;}
.pg-link::before{ content: " "; display: block; width: 40px; height: 23px; float: left; margin: -4px 15px 0 0 ; background-color:#fff; background-image: url("../img/sprite.jpg"); background-repeat: no-repeat, repeat; background-size: auto 23px; }
#m_p_link_form::before,#mp_trans::before,#mp_trans_debito::before,#mp_trans_boleto::before,#ml_trans_new::before{ background-position: calc(-40px * 0) 0; }
#bcash_trans::before,#bcash_trans_debito::before,#bcash_trans_boleto::before,#bcash_form::before{ background-position: calc(-40px * 1) 0; }
#moip__credito::before,#moip__debito::before,#moip__boleto::before,#moip_form::before{ background-position: calc(-40px * 2) 0; }
#pag_form::before{ background-position: calc(-40px * 3 - 1px) 0; }
#vindi_trans_new::before,#vindi_trans_bolet::before{background-position: calc(-269px * 1) -31px; background-size: auto 63px;}
#pagar_me::before,#pagarme_trans_new::before{ background-position: calc(-40px * 4) 0; }
#pagar_me::before,#pagarme_trans_bolet::before{ background-position: calc(-40px * 4) 0; }
#payu_trans_new::before,#payu_trans_bolet::before{ background-position: calc(-40px * 5) 0; }
#paypal_form::before{ background-position: calc(-40px * 6) 0; }
#cielo_form::before,#cielo_trans_new::before,#cielo_form_transpare::before{ background-position: calc(-40px * 7) 0; }
#paghiper_trans_bolet::before{ background-position: calc(-40px * 8 - 1px) 0; }
#transf_banco_brasil::before,#boleto_banco_brasil::before{ background-position: calc(-40px * 9 - 2px) 0; }
#transf_bradesco::before,#boleto_bradesco::before{ background-position: calc(-40px * 10) 0; }
#transf_santander::before,#boleto_santander::before{ background-position: calc(-40px * 11) 0; }
#transf_itau::before,#boleto_itau::before{ background-position: calc(-40px * 12) 0; }
#transf_caixa::before,#boleto_caixa::before{ background-position: calc(-40px * 13) 0; }
#transf_hsbc::before,#boleto_hsbc::before{ background-position: calc(-40px * 14 - 3px) 0; }
#transf_sidicredi::before,#boleto_sidicredi::before{ background-position: calc(-40px * 15 - 3px) 0; }
#transf_sicoob::before,#boleto_sicoob::before{ background-position: calc(-40px * 16 - 4px) 0; }
#transf_unibanco::before,#boleto_unibanco::before{ background-position: calc(-40px * 17 - 4px) 0; }
#transf_banespa::before,#boleto_banespa::before{ background-position: calc(-40px * 18 - 4px) 0; }
#cheque_outros::before{ background-position: calc(-40px * 19 - 4px) 0; }
#frente_de_caixa_outr::before{ background-position: calc(-40px * 20 - 4px) 0; }
#entrega_outros::before{ background-position: calc(-40px * 21 - 4px) 0; }
#pagamento_na_retirad::before{ background-position: calc(-40px * 22 - 4px) 0; }
#rede_trans_new::before{ background-position: calc(-40px * 1) 0; }
#wirecard_trans_new::before{ background-position: calc(-976px * 1) 8px; }
#yapay_trans_new::before,#yapay_trans_bolet::before,#yapay_pix_trans_new::before{ background-position: calc(-926px * 1) 0; }
#pgseguro_trans_bolet::before,#pgseguro_trans_new::before{ background-position: calc(-5.2px * 22 - 7px) 0; }
#payshopx_trans_new::before{ background-position: calc(-52.3px * 22 - 8px) 0; }
#pagarme_trans_new_v5::before,#pagarme_trans_bolet_v5::before,#pix_pagarme_p_v5::before{background-position: calc(-43px * 4) 0; }
#clear input{ height: 40px !important; border-radius: 10px !important; }
#clear select{ height: 40px !important; border-radius: 10px !important; }
#clear .cc-brand{ height: 40px !important; border-radius: 10px !important; }
#clear .form-group{ margin-bottom: 5px; }
#clear .btn-success{ height: 50px; font-size: 15px; border-radius: 9px; font-weight: 700; border-bottom: 5px solid #569256; margin-top: 20px;}
#check{ height: auto; }
#logar{ font-size: 15px; border-bottom: 5px solid #569256; width: 40%; color: #fff; background-color: #5cb85c; border-color: #4cae4c; }
#logar:hover{ background-color: #4cae4c; }
#cep{ border-radius: 5px 0px 0px 5px !important; }
#botao_cep{ border-radius: 0px 5px 5px 0px !important; }
#pay{ font-size: 15px; border-bottom: 5px solid #569256; border-radius: 5px !important; }
#model_alterar_cliente{ cursor: pointer; }
/* CHECKOUT */
.botao_finalizar_pedido{ background-color: #7db122; border-color: #7db122; color: #fff; border-radius: 0px; }
.botao_finalizar_pedido:hover{ background-color: #658E1C; border-color: #658E1C; color: #fff; }
.panel_checkout{ background-color: #00c6c4; border-color: #00c6c4; color: #fff; border-radius: 0px; }
.z-tabs > .z-container > .z-content{ height: auto !important; }
.panel-default{ border-color: #e5e5e5; min-height: 170px; }
.panel-cupom { min-height: 10px; }
.btn-go-to-payment{ margin-top: 15px; width: 100%; }
.uhu { clear: both; }
.label_check { width: 100%; border-radius: 3px; border: 1px solid #FFF; cursor: pointer; }
.label_check:hover{ border: 1px solid #D1D3D4; color: #06b506; }
.label_check img{ width: 35px; margin: 0px 10px 5px 0px; }
#ja_cadastro, #nao_tenho_cadastro{ font-size: 12px; float: right; }
.checkout label{ font-weight: 100 !important; margin-bottom: 0px; margin-top: 10px;}
.checkout input{ font-size: 11px; height: 40px; border-radius: 5px !important; }
.checkout select{ font-size: 11px; height: 40px; border-radius: 5px !important; }
.tabs-left{ border-bottom: none !important; }
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{ border-top: 1px solid #ddd !important; border-bottom: 1px solid #fff !important; border-left: 1px solid #ddd !important; border-right: 1px solid #ddd !important; }
.check-pags{ -webkit-transition: all 0.5s; transition: all 0.5s; width: 100% !important; border-bottom: 1px solid #fff !important; margin-bottom: -2px !important; border-radius: 0px !important;}
.check-pags.active>a:hover{ border-top: 1px solid #ddd !important; border-bottom: 1px solid #ddd !important; border-left: 1px solid #ddd !important;}
.check-pags>a{ color: #000 !important; border-top: 1px solid #ddd !important; border-bottom: 1px solid #ddd !important; border-left: 1px solid #ddd !important; border-radius: 0px !important; border-right: 1px solid #ddd !important;}
.ambiente-cadastro .form-control{ height: 43px; padding: 10px; }
.ambiente-cadastro label{ font-weight: 400; }
.ambiente-cadastro p{ margin-top: 5px; }
.ambiente-cadastro .cadastro-cep{ padding: 25px 0px 0px 0px !important; }
.ambiente-cadastro #completar-endereco{ display: none; }
.ambiente-cadastro #pessoa_juridica{ display: none; }
.password + .glyphicon { cursor: pointer; pointer-events: all; width: 43px; height: 43px; margin: 25px 8px 0px 0px; }
.ambiente-cadastro .btn{ border-radius: 4px !important; width: 70%; padding: 8px !important; font-weight: 700; border-bottom: 3px solid #286928 !important; font-size: 15px !important; }
#formas_envio{ padding-top: 15px; }
.active_labelcheck{ color: #06b506; }
.uhu input[type='radio'] { -webkit-appearance:none; -moz-appearance:none; appearance:none; width:20px; height:20px; border:1px solid darkgray; border-radius:50% !important; outline:none; box-shadow:0 0 5px 0px gray inset; right: 0; position: absolute; margin: 17px 25px 0px 0px; }
.uhu input[type='radio']:hover { box-shadow:0 0 5px 0px orange inset; }
.uhu input[type='radio']:before { content:''; display:block; width:10px; /* updated */ height:10px; /* updated */ margin: 22% auto; border-radius:50%; }
.uhu input[type='radio']:checked:before { background:#06b506; }
/* CONFIRMACAO */
.panel_confirmacao{ background-color: #00c6c4; border-color: #00c6c4; color: #fff; border-radius: 0px; }
.tabela_detalhes{ background-color: #fff; }
.acompanhar{ padding: 15px !important; color: #fff; background: #337ab7; border-bottom: 4px solid #205b8f !important; }
.acompanhar:hover{ color: #fff !important; background: #205b8f; border-bottom: 4px solid #205b8f; }
/* LOGIN */
.login{ border-right: 1px solid #eeeeee }
.btn-login{ width: 100%; }
.cadastro p{ margin: 0 0 2.5px !important; }
/* AREA CLIENTE */
.border-line{ border: 1px solid #eeeeee !important; border-radius: 0px !important;}
.border-line a{ color: var(--colorcarrinho); text-decoration: none;}
.border-line a:hover{ text-decoration: none;color: var(--colorcarrinho); }
.border-line:hover{ background: transparent; }
/* CATEGORIA */
.btn-group, .btn-group-vertical{ display: block !important; }
.list-departamentos { background-color: #131313 !important; border-color: #000000 !important; color: #fff !important }
/* PAGINAS */
.panel-duvidas{ -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.0) !important; box-shadow: 0 1px 1px rgba(0,0,0,.0) !important; border: 1px solid #dddddd !important; border-radius: 0px !important; }
.envio-nome{ text-align: left; }
.envio-valor{ text-align: right; }
.zoom-mobile{display: none;}
@media (max-width: 768px) {
.envio-valor{ text-align: left; }
.zoom-mobile{width: 100%; height: 100%; background-color: transparent; position: absolute; z-index: 999; display: block;}
}
@media print {
.payment, hr, nav, header, footer, button, img, a{ display: none !important; }
}
.loader{color:#fff;position:fixed;box-sizing:border-box;left:-9999px;top:-9999px;width:0;height:0;overflow:hidden;z-index:999999}.loader:after,.loader:before{box-sizing:border-box}.loader.is-active{background-color:rgba(0,0,0,0.85);width:100%;height:100%;left:0;top:0}@keyframes rotation{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes blink{from{opacity:.5}to{opacity:1}}.loader[data-text]:before{position:fixed;left:0;top:50%;color:currentColor;font-family:Helvetica,Arial,sans-serif;text-align:center;width:100%;font-size:14px}.loader[data-text='']:before{content:'Loading'}.loader[data-text]:not([data-text='']):before{content:attr(data-text)}.loader[data-text][data-blink]:before{animation:blink 1s linear infinite alternate}.loader-default[data-text]:before{top:calc(50% - 63px)}.loader-default:after{content:'';position:fixed;width:48px;height:48px;border:solid 8px #fff;border-left-color:transparent;border-radius:50%;top:calc(50% - 24px);left:calc(50% - 24px);animation:rotation 1s linear infinite}.loader-default[data-half]:after{border-right-color:transparent}.loader-default[data-inverse]:after{animation-direction:reverse}.loader-double:after,.loader-double:before{content:'';position:fixed;border-radius:50%;border:solid 8px;animation:rotation 1s linear infinite}.loader-double:after{width:48px;height:48px;border-color:#fff;border-left-color:transparent;top:calc(50% - 24px);left:calc(50% - 24px)}.loader-double:before{width:64px;height:64px;border-color:#eb974e;border-right-color:transparent;animation-duration:2s;top:calc(50% - 32px);left:calc(50% - 32px)}.loader-bar[data-text]:before{top:calc(50% - 40px);color:#fff}.loader-bar:after{content:'';position:fixed;top:50%;left:50%;width:200px;height:20px;transform:translate(-50%, -50%);background:linear-gradient(-45deg, #4183d7 25%, #52b3d9 25%, #52b3d9 50%, #4183d7 50%, #4183d7 75%, #52b3d9 75%, #52b3d9);background-size:20px 20px;box-shadow:inset 0 10px 0 rgba(255,255,255,0.2),0 0 0 5px rgba(0,0,0,0.2);animation:moveBar 1.5s linear infinite}.loader-bar[data-rounded]:after{border-radius:15px}@keyframes moveBar{from{background-position:0 0}to{background-position:20px 20px}}@keyframes corners{6%{width:60px;height:15px}25%{width:15px;height:15px;left:calc(100% - 15px);top:0}31%{height:60px}50%{height:15px;top:calc(100% - 15px);left:calc(100% - 15px)}56%{width:60px}75%{width:15px;left:0;top:calc(100% - 15px)}81%{height:60px}}.loader-border[data-text]:before{color:#fff}.loader-border:after{content:'';position:absolute;top:0;left:0;width:15px;height:15px;background-color:#fff000;animation:corners 3s ease both infinite}.loader-ball:before{content:'';position:absolute;width:50px;height:50px;top:50%;left:50%;margin:-25px 0 0 -25px;background-color:#fff;border-radius:50%;z-index:1;animation:kick 1s infinite alternate ease-in both}.loader-ball[data-shadow]:before{box-shadow:-5px -5px 10px 0 rgba(0,0,0,0.5) inset}.loader-ball:after{content:'';position:absolute;background-color:rgba(0,0,0,0.3);border-radius:50%;width:45px;height:20px;top:calc(50% + 10px);left:50%;margin:0 0 0 -22.5px;z-index:0;animation:shadow 1s infinite alternate ease-out both}@keyframes shadow{0%{background-color:transparent;transform:scale(0)}40%{background-color:transparent;transform:scale(0)}95%{background-color:rgba(0,0,0,0.75);transform:scale(1)}100%{background-color:rgba(0,0,0,0.75);transform:scale(1)}}@keyframes kick{0%{transform:translateY(-80px) scaleX(0.95)}90%{border-radius:50%}100%{transform:translateY(0) scaleX(1);border-radius:50% 50% 20% 20%}}.loader-smartphone:after{content:'';color:#fff;font-size:12px;font-family:Helvetica,Arial,sans-serif;text-align:center;line-height:120px;position:fixed;left:50%;top:50%;width:70px;height:130px;margin:-65px 0 0 -35px;border:solid 5px gold;border-radius:10px;box-shadow:0 5px 0 0 gold inset;background:radial-gradient(circle at 50% 90%, rgba(0,0,0,0.5) 6px, transparent 6px),linear-gradient(to top, gold 22px, transparent 22px),linear-gradient(to top, rgba(0,0,0,0.5) 22px, rgba(0,0,0,0.5) 100%);animation:shake 2s cubic-bezier(0.36, 0.07, 0.19, 0.97) both infinite}.loader-smartphone[data-screen='']:after{content:'Loading'}.loader-smartphone:not([data-screen='']):after{content:attr(data-screen)}@keyframes shake{5%{transform:translate3d(-1px, 0, 0)}10%{transform:translate3d(1px, 0, 0)}15%{transform:translate3d(-1px, 0, 0)}20%{transform:translate3d(1px, 0, 0)}25%{transform:translate3d(-1px, 0, 0)}30%{transform:translate3d(1px, 0, 0)}35%{transform:translate3d(-1px, 0, 0)}40%{transform:translate3d(1px, 0, 0)}45%{transform:translate3d(-1px, 0, 0)}50%{transform:translate3d(1px, 0, 0)}55%{transform:translate3d(-1px, 0, 0)}}.loader-clock:before{content:'';position:fixed;width:120px;height:120px;left:50%;top:50%;border-radius:50%;overflow:hidden;margin:-60px 0 0 -60px;background:linear-gradient(to bottom, transparent 50%, #f5f5f5 50%),linear-gradient(90deg, transparent 55px, #2ecc71 55px, #2ecc71 65px, transparent 65px),linear-gradient(to bottom, #f5f5f5 50%, #f5f5f5 50%);box-shadow:0 0 0 10px #f5f5f5 inset,0 0 0 5px #555,0 0 0 10px #7b7b7b;animation:rotation infinite 2s linear}.loader-clock:after{content:'';position:fixed;width:60px;height:40px;left:50%;top:50%;margin:-20px 0 0 -15px;border-radius:20px 0 0 20px;overflow:hidden;background:radial-gradient(circle at 14px 20px, #25a25a 10px, transparent 10px),radial-gradient(circle at 14px 20px, #1b7943 14px, transparent 14px),linear-gradient(180deg, transparent 15px, #2ecc71 15px, #2ecc71 25px, transparent 25px);animation:rotation infinite 24s linear;transform-origin:15px center}.loader-curtain:before,.loader-curtain:after{position:fixed;width:100%;top:50%;margin-top:-35px;font-size:70px;text-align:center;font-family:Helvetica,Arial,sans-serif;overflow:hidden;line-height:1.2;content:'Loading'}.loader-curtain:before{color:#666}.loader-curtain:after{color:#fff;height:0;animation:curtain 1s linear infinite alternate both}.loader-curtain[data-curtain-text]:not([data-curtain-text='']):before,.loader-curtain[data-curtain-text]:not([data-curtain-text='']):after{content:attr(data-curtain-text)}.loader-curtain[data-brazilian]:before{color:#f1c40f}.loader-curtain[data-brazilian]:after{color:#2ecc71}.loader-curtain[data-colorful]:before{animation:maskColorful 2s linear infinite alternate both}.loader-curtain[data-colorful]:after{animation:curtain 1s linear infinite alternate both, maskColorful-front 2s 1s linear infinite alternate both;color:#000}@keyframes maskColorful{0%{color:#3498db}49.5%{color:#3498db}50.5%{color:#e74c3c}100%{color:#e74c3c}}@keyframes maskColorful-front{0%{color:#2ecc71}49.5%{color:#2ecc71}50.5%{color:#f1c40f}100%{color:#f1c40f}}@keyframes curtain{0%{height:0}100%{height:84px}}.loader-music:before,.loader-music:after{content:'';position:fixed;width:240px;height:240px;top:50%;left:50%;margin:-120px 0 0 -120px;border-radius:50%;text-align:center;line-height:240px;color:#fff;font-size:40px;font-family:Helvetica,Arial,sans-serif;text-shadow:1px 1px 0 rgba(0,0,0,0.5);letter-spacing:-1px}.loader-music:after{backface-visibility:hidden}.loader-music[data-hey-oh]:before,.loader-music[data-hey-oh]:after{box-shadow:0 0 0 10px}.loader-music[data-hey-oh]:before{background-color:#fff;color:#000;animation:coinBack 2.5s linear infinite,oh 5s 1.25s linear infinite both}.loader-music[data-hey-oh]:after{background-color:#000;animation:coin 2.5s linear infinite,hey 5s linear infinite both}.loader-music[data-no-cry]:before,.loader-music[data-no-cry]:after{background:linear-gradient(45deg, #009b3a 50%, #fed100 51%);box-shadow:0 0 0 10px #000}.loader-music[data-no-cry]:before{animation:coinBack 2.5s linear infinite,cry 5s 1.25s linear infinite both}.loader-music[data-no-cry]:after{animation:coin 2.5s linear infinite,no 5s linear infinite both}.loader-music[data-we-are]:before{animation:coinBack 2.5s linear infinite,theWorld 5s 1.25s linear infinite both;background:radial-gradient(ellipse at center, #4ecdc4 0%, #556270)}.loader-music[data-we-are]:after{animation:coin 2.5s linear infinite,weAre 5s linear infinite both;background:radial-gradient(ellipse at center, #26d0ce 0%, #1a2980)}.loader-music[data-rock-you]:before{animation:coinBack 2.5s linear infinite,rockYou 5s 1.25s linear infinite both;background:#444}.loader-music[data-rock-you]:after{animation:coin 2.5s linear infinite,weWill 5s linear infinite both;background:#96281b}@keyframes coin{to{transform:rotateY(359deg)}}@keyframes coinBack{0%{transform:rotateY(180deg)}50%{transform:rotateY(360deg)}100%{transform:rotateY(180deg)}}@keyframes hey{0%{content:'Hey!'}50%{content:'Let\'s!'}100%{content:'Hey!'}}@keyframes oh{0%{content:'Oh!'}50%{content:'Go!'}100%{content:'Oh!'}}@keyframes no{0%{content:'No...'}50%{content:'no'}100%{content:'No...'}}@keyframes cry{0%{content:'woman'}50%{content:'cry!'}100%{content:'woman'}}@keyframes weAre{0%{content:'We are'}50%{content:'we are'}100%{content:'We are'}}@keyframes theWorld{0%{content:'the world,'}50%{content:'the children!'}100%{content:'the world,'}}@keyframes weWill{0%{content:'We will,'}50%{content:'rock you!'}100%{content:'We will,'}}@keyframes rockYou{0%{content:'we will'}50%{content:'🤘'}100%{content:'we will'}}
/* =================================== MENU LATERAL =================================== */
.icone_menu_lateral { width: 30px; height: auto; filter: grayscale(1); transition: 1s; margin: 0px 8px; }
.texto_item_lista { text-transform: capitalize; font-size: 13px; font-weight: 600; transition: 0.7s; }
.item_lista:hover .texto_item_lista { text-decoration: underline; color: #000; }
.item_lista:hover .icone_menu_lateral { filter: grayscale(0); }
.menu_lateral_tela { display: block; }
/* =================================== MENU LATERAL FLUTUANTE =================================== */
.icone_menu_flutuante { display: none; width: 50px; height: 50px; padding: 16px 10px 10px 10px; color: #FFF; border-radius: 50%; position: fixed; z-index: 9999; left: 2%; bottom: 3%; background-color: darkgray; }
.menu_flutuante_mobile { display: none; position: absolute; left: 1%; width: 255px; bottom: 75%; margin: 0px 5px 0px 0px; }
.menu_flutuante_mobile::before { content: ''; position: absolute; z-index: 999; border-top: 21px solid #fff; border-right: 20px solid transparent; border-left: 20px solid transparent; top: 165%; right: 5%; }
.icone_menu_lateral_flutuante { width: 30px; height: auto; filter: grayscale(1); transition: 1s; }
.overflow { display: none; width: 100vw; height: 100vh; background-color: #000; position: fixed; z-index: 9999; top: 0; left: 0; opacity: 0.6; transition: 1s; }
/* =================================== ENDEREÇO =================================== */
.cardEndereco { border: 2px solid #000; width: 60%; height: 180px; border-radius: 10px; }
.formularioCad { display: none; }
.enderecoHeader { text-align: center; height: 45px; padding: 7px 0px; display: flex; align-items: center; border-radius: 10px 10px 0px 0px; border-bottom: 2px solid #000; }
.icone_mapas { width: 100px; height: 100px; margin: -5px auto; }
.editar { text-align: end; }
.editar legend { margin-bottom: 0px !important; border-bottom: none !important; font-size: 10px; letter-spacing: 1px; }
.editar i { font-size: 15px; text-align: end; transition: .6s ease-in-out; cursor: pointer; text-align: end; }
.editar i:hover { font-size: 20px; }
.titulo { text-align: start; }
.enderecoBody { padding: 10% 0px; font-size: 13px; }
.enderecoBody ul li { margin: 10px 0px; border-bottom: 1px solid #eee; }
/* =================================== MEDIA QUERY ENDEREÇO =================================== */
@media (max-width: 991px){
.cardEndereco { width: 100%; }
.enderecoBody { padding: 8% 0px; }
}
@media (max-width: 768px){
.menu_lateral_tela { display: none }
.icone_menu_flutuante { display: block; }
}
/* ====================== DETALHES DO PEDIDO ====================== */
.detalhes_pedido_container {
width: 100%;
height: 100%;
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 999999; /* acima do mega menu */
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(3px);
animation: fadeIn 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from { transform: translateY(-20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.detalhes_pedido_content {
border-radius: 12px;
width: 90%;
max-width: 800px;
height: auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
margin: 0 auto;
background-color: #fff;
overflow: hidden;
animation: slideIn 0.4s ease;
transform: translateY(0);
transition: transform 0.3s ease;
position: relative;
z-index: 1000000;
}
.detalhes_pedido_header {
padding: 1.5rem;
background-color: #f8f9fa;
border-bottom: 1px solid #e9ecef;
display: flex;
justify-content: space-between;
align-items: center;
}
.detalhes_pedido_header h4 {
margin: 0;
font-size: 1.25rem;
font-weight: 700;
color: #343a40;
display: flex;
align-items: center;
}
.detalhes_pedido_header h4:before {
content: '\f07a';
font-family: FontAwesome;
margin-right: 10px;
color: var(--colorcarrinho, #3b82f6);
}
.detalhes_pedido_body {
padding: 1.5rem;
font-size: 15px;
font-weight: 500;
}
.detalhes_pedido_body .row {
margin-bottom: 1rem;
}
.detalhes_pedido_body h4 {
font-size: 1rem;
font-weight: 700;
color: #343a40;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--colorcarrinho, #3b82f6);
display: inline-block;
}
.detalhes_pedido_body h4 i {
margin-right: 8px;
color: var(--colorcarrinho, #3b82f6);
}
.info-payment {
margin-top: 10px;
}
.info-payment p {
margin-bottom: 8px;
font-size: 14px;
color: #495057;
}
.info-payment p i {
margin-right: 5px;
color: #6c757d;
}
.detalhes_pedido_lista {
font-size: 14px;
font-weight: 500;
border: none !important;
display: flex;
justify-content: space-between;
line-height: 24px;
margin: 8px 0;
padding: 4px 0;
color: #495057;
}
.detalhes_pedido_lista span i {
margin-right: 5px;
color: var(--colorcarrinho, #3b82f6);
width: 16px;
text-align: center;
}
.detalhes_pedido_endereco {
font-size: 13px;
font-weight: 500;
border: none !important;
line-height: 22px;
margin: 4px 0;
text-align: start;
color: #495057;
}
.detalhes_pedido_lista:last-child {
font-weight: 700;
border-top: 1px solid #e9ecef !important;
margin-top: 8px;
padding-top: 8px;
color: var(--colorcarrinho, #3b82f6);
}
.detalhes_pedido_footer {
padding: 1.25rem;
text-align: end;
border-top: 1px solid #e9ecef;
background-color: #f8f9fa;
}
.detalhes_pedido_footer .btn {
padding: 0.5rem 1.5rem;
font-weight: 600;
border-radius: 6px;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 14px;
}
.detalhes_pedido_footer .btn-danger {
background-color: #dc3545;
border-color: #dc3545;
}
.detalhes_pedido_footer .btn-danger:hover {
background-color: #c82333;
border-color: #bd2130;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(220, 53, 69, 0.2);
}
body.modal-open {
overflow: hidden;
}
@media (max-width: 768px) {
.detalhes_pedido_content {
width: 95%;
margin: 10px;
max-height: 90vh;
overflow-y: auto;
}
.detalhes_pedido_header {
padding: 1rem;
}
.detalhes_pedido_header h4 {
font-size: 1.1rem;
}
.detalhes_pedido_body {
padding: 1rem;
}
.detalhes_pedido_body .col-md-3,
.detalhes_pedido_body .col-md-5,
.detalhes_pedido_body .col-md-4 {
margin-bottom: 1.5rem;
}
.detalhes_pedido_footer {
padding: 1rem;
}
}
/* ====================== DETALHES DO PEDIDO MEDIA QUERY====================== */
@media(max-width: 992px){
.modal-content { width: 100% !important }
.detalhe_pedidos div:nth-child(2) { border-right: none; border-left: none; }
}
/* ====================== PRODUTOS ACCORDION ====================== */
/* Accordion toggle */
ul { list-style: none; }
.accordion { background-color: #fff; color: #444; border-left: 4px solid #40cd28 !important; border-top: 2px solid #ddd; border-right: 1px solid #ddd; border-bottom: none; cursor: pointer; padding: 11px 18px; text-align: left; outline: none; transition: 0.4s; display: flex; justify-content: space-between; }
.accordion::after { content: ''; width: 90%; height: 1px; background-color: #ddd; position: absolute; top: 45px; right: 5%; }
.accordion a { text-decoration: none !important; }
.pagamentos h3 { padding: 20px 0px; }
.pagamentos div { display: flex; justify-content: center; }
.texto_accordion { color: #444; padding: 0 10px; }
.active, .accordion:hover { background-color: #fff; }
.icone_produto { transition: 0.6s ease; color: gray; font-size: 20px !important; transform: rotate(180deg); }
.active .icone_produto{ transform: rotate(0deg); transition: 0.6s ease; }
/* ======================= PANEL ======================= */
.pedido_panel { margin: 50px 0px 0px 43px; font-weight: 600; color: gray; }
.img_box { height: 85px; width: 85px; margin-right: 5px; }
.panel_cliente { border-left: 4px solid #40cd28 !important; display: none; transition: 0.6s ease; border-radius: 0px !important; margin-top: 10px; border-bottom: 1px solid #ddd !important ; border-right: 1px solid #ddd !important; }
.panel_cliente img { display: flex; align-self: center; margin: 0 auto; transition: 0.6s ease; max-height: 100%; width: auto; }
.img_box_mini { height: 50px; width: 50px; margin-right: 5px; }
.panel_cliente-mini { padding: 0px 0px 18px 18px; background-color: white; display: block; overflow: hidden; transition: 0.6s ease; border-left: 4px solid #40cd28; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; }
/* Classes dinâmicas para as cores das bordas baseadas no status do pedido */
button.accordion.borda-aguardando, .panel_cliente-mini.borda-aguardando, .panel_cliente.borda-aguardando {
border-left: 4px solid #ff8200 !important;
}
button.accordion.borda-aprovado, .panel_cliente-mini.borda-aprovado, .panel_cliente.borda-aprovado {
border-left: 4px solid #40cd28 !important;
}
button.accordion.borda-cancelado, .panel_cliente-mini.borda-cancelado, .panel_cliente.borda-cancelado {
border-left: 4px solid #d50032 !important;
}
.panel_cliente-mini img { display: flex; align-self: center; transition: 0.6s ease; max-height: 100%; width: auto; margin: 0 auto; }
/* ======================= PRODUTOS ======================= */
.produto_lista { display: flex; align-items: center; margin-top: 10px !important; margin-bottom: 25px; margin-left: 5%; }
.produto_lista li { margin: 10px 0px -30px 0px; line-height: 14.4px; }
.titulo_produto_open {display: none;}
.preco_produto_open {display: none;}
/* ================== SCROLL BAR ================== */
.scroll { overflow-y: scroll; max-height: 155px; }
.scroll_big { overflow-y: scroll; max-height: 290px; }
.scroll::-webkit-scrollbar, .scroll_big::-webkit-scrollbar, .box-border::-webkit-scrollbar { width: 2px; height: 10px; border-radius: 10px; }
/* Track */
.scroll::-webkit-scrollbar-track, .scroll_big::-webkit-scrollbar-track, .box-border::-webkit-scrollbar-track { background: #f1f1f1; }
/* Handle */
.scroll::-webkit-scrollbar-thumb, .scroll_big::-webkit-scrollbar-thumb, .box-border::-webkit-scrollbar-thumb { background: #888; }
/* Handle on hover */
.scroll::-webkit-scrollbar-thumb:hover, .scroll_big::-webkit-scrollbar-thumb:hover, .box-border::-webkit-scrollbar-thumb:hover { background: #555; }
/* ================== Step progress bar ================== */
.barra_progresso { counter-reset: step; margin-bottom: 55px; margin-left: 5%}
.barra_progresso li { list-style-type: none; float: left; width: 20%; position: relative; text-align: center; font-size: 12px; }
.barra_progresso li:before { content: ''; counter-increment: step; width: 15px; height: 15px; line-height: 30px; border: 2px solid #ddd; display: block; text-align: center; margin: 0 auto 10px auto; border-radius: 50%; background-color: white; position: relative; top: 8px; }
.barra_progresso li:after { content: ''; position: absolute; width: 100%; height: 2px; background-color: #ddd; top: 15px; left: -50%; z-index: -1; }
.barra_progresso li:first-child::after { content: none; }
.barra_progresso li.ativo::before { border-color: #40cd28; background-color: #40cd28; }
.barra_progresso li.ativo2 + li::after { background-color: #40cd28; }
.barra_progresso li:nth-child(4).ativo2 + li::after{ width: 93%; }
.barra_progresso li:last-child.ativo::before { border: 2px solid #40cd28; width: 40px; height: 40px; position: relative; top: -5px; background-color: #fff; background-image: url(../img/like.png); background-position: 5px 3px; background-size: 25px; background-repeat: no-repeat; }
.barra_progresso li.inativo::before { border-color: #da5252; background-color: #da5252; }
.barra_progresso li.inativo2 + li::after { background-color: #da5252; }
.barra_progresso li:nth-child(4).inativo2 + li::after{ width: 93%; }
.barra_progresso li:last-child.inativo::before { border: 2px solid #da5252; width: 40px; height: 40px; position: relative; top: -5px; background-color: #fff; background-image: url(../img/like_red.png); background-position: 6px 8px; background-size: 25px; background-repeat: no-repeat; }
.borda_erro { border-left: 4px solid #da5252 !important; }
/* GRUPO DE BOTOES */
.grupo_botoes { text-align: center; margin-bottom: 10px; }
.btn-produtos { background-color: #40cd28; }
.btn-produtos:hover { filter: opacity(0.7); }
.btn-produtos_ajuda { background-color: white; border: 2px solid blue !important; padding: 5px 0px; outline: none !important; }
.btn-produtos_ajuda a { color: blue !important; text-decoration: none; }
.grupo_botoes button { margin: 5px 5px; width: 200px; height: 50px; display: inline; padding: 13px 0px;}
.grupo_botoes img { display: inline; margin: 0 5px; }
.grupo_botoes button a { color: white; font-size: 15px; text-decoration: none; font-weight: 500; letter-spacing: 1px; }
/* */
/* ================== MEDIA QUERY ================== */
@media(max-width: 574px){
.grupo_botoes button { display: block; margin: 5px auto; }
.data_entrega { display: none; }
.titulo_produto_open {display: block; margin-left: 3%; margin-top: 40px;}
.preco_produto_open {display: block; margin-left: 3%;}
.titulo_produto {display: none;}
.preco_produto {display: none;}
}
/* =================================== ENDEREÇO =================================== */
.boxEnderecoNovo { border: 1px solid; max-width: 310px !important; height: 200px !important; margin: 5px 20px; }
.enderecoHeader { text-align: center; height: 45px; padding: 7px 0px; display: flex; align-items: center; border-radius: 10px 10px 0px 0px; border-bottom: 2px solid #000; }
.editar { text-align: end; }
.editar legend { margin-bottom: 0px !important; border-bottom: none !important; font-size: 10px; letter-spacing: 1px; }
.removerEndereco { text-align: end; }
.removerEndereco legend { margin-bottom: 0px !important; border-bottom: none !important; font-size: 10px; letter-spacing: 1px; }
.editar i { font-size: 15px; text-align: end; transition: .6s ease-in-out; cursor: pointer; text-align: end; }
.editar i:hover { font-size: 20px; }
.titulo { text-align: start; }
.formularioCad { display: none; }
.enderecoBody { padding: 13% 0px; font-size: 13px; }
.enderecoBody ul li { margin: 10px 0px; border-bottom: 1px solid #eee; }
.addEndereco { font-size: 80px !important; position: absolute; left: 40%; top: 25%; cursor: pointer; transition: 0.3s; }
.addEndereco:hover { font-size: 85px !important; }
.enderecoListaAreaCliente { padding-top: 20px; }
/* =================================== MEDIA QUERY ENDEREÇO =================================== */
@media (max-width: 991px){
.cardEndereco { width: 100%; }
.enderecoBody { padding: 8% 0px; }
}
@media (max-width: 768px){
.menu_lateral_tela,
.editar legend,
.removerEndereco legend { display: none }
.icone_menu_flutuante { display: block; }
}
/*PAGAMENOS*/
.pg-link{padding: 10px 0px 10px 5px !important;}
.pg-link::before{ content: " "; display: block; width: 40px; height: 23px; float: left; margin: -4px 15px 0 0 ; background-color:#fff; background-image: url("../img/sprite.jpg"); background-repeat: no-repeat, repeat; background-size: auto 23px; }
#m_p_link_form::before,#mp_trans::before,#mp_trans_debito::before,#mp_trans_boleto::before,#ml_trans_new::before{ background-position: calc(-40px * 0) 0; }
#bcash_trans::before,#bcash_trans_debito::before,#bcash_trans_boleto::before,#bcash_form::before{ background-position: calc(-40px * 1) 0; }
#moip__credito::before,#moip__debito::before,#moip__boleto::before,#moip_form::before{ background-position: calc(-40px * 2) 0; }
#pag_form::before{ background-position: calc(-40px * 3 - 1px) 0; }
#pagar_me::before,#pagarme_trans_new::before{ background-position: calc(-40px * 4) 0; }
#pagar_me::before,#pagarme_trans_bolet::before{ background-position: calc(-40px * 4) 0; }
#payu_trans_new::before,#payu_trans_bolet::before{ background-position: calc(-40px * 5) 0; }
#paypal_form::before{ background-position: calc(-40px * 6) 0; }
#cielo_form::before,#cielo_trans_new::before,#cielo_form_transpare::before{ background-position: calc(-40px * 7) 0; }
#paghiper_trans_bolet::before{ background-position: calc(-40px * 8 - 1px) 0; }
#transf_banco_brasil::before,#boleto_banco_brasil::before{ background-position: calc(-40px * 9 - 2px) 0; }
#transf_bradesco::before,#boleto_bradesco::before{ background-position: calc(-40px * 10) 0; }
#transf_santander::before,#boleto_santander::before{ background-position: calc(-40px * 11) 0; }
#transf_itau::before,#boleto_itau::before{ background-position: calc(-40px * 12) 0; }
#transf_caixa::before,#boleto_caixa::before{ background-position: calc(-40px * 13) 0; }
#transf_hsbc::before,#boleto_hsbc::before{ background-position: calc(-40px * 14 - 3px) 0; }
#transf_sidicredi::before,#boleto_sidicredi::before{ background-position: calc(-40px * 15 - 3px) 0; }
#transf_sicoob::before,#boleto_sicoob::before{ background-position: calc(-40px * 16 - 4px) 0; }
#transf_unibanco::before,#boleto_unibanco::before{ background-position: calc(-40px * 17 - 4px) 0; }
#transf_banespa::before,#boleto_banespa::before{ background-position: calc(-40px * 18 - 4px) 0; }
#cheque_outros::before{ background-position: calc(-40px * 19 - 4px) 0; }
#frente_de_caixa_outr::before{ background-position: calc(-40px * 20 - 4px) 0; }
#entrega_outros::before{ background-position: calc(-40px * 21 - 4px) 0; }
#pagamento_na_retirad::before{ background-position: calc(-40px * 22 - 4px) 0; }
#rede_trans_new::before{ background-position: calc(-40px * 1) 0; }
#wirecard_trans_new::before{ background-position: calc(-976px * 1) 8px; }
#yapay_trans_new::before,#yapay_trans_bolet::before{ background-position: calc(-926px * 1) 0; }
#pgseguro_trans_bolet::before,#pgseguro_trans_new::before{ background-position: calc(-5.2px * 22 - 7px) 0; }
#payshopx_trans_new::before{ background-position: calc(-52.3px * 22 - 8px) 0; }
#clear input{ height: 40px !important; border-radius: 10px !important; }
#clear select{ height: 40px !important; border-radius: 10px !important; }
#clear .cc-brand{ height: 40px !important; border-radius: 10px !important; }
#clear .form-group{ margin-bottom: 5px; }
#clear .btn-success{ height: 50px; font-size: 15px; border-radius: 9px; font-weight: 700; border-bottom: 5px solid #569256; margin-top: 20px;}
#check{ height: auto; }
#logar{ font-size: 15px; border-bottom: 5px solid #569256; width: 40%; color: #fff; background-color: #5cb85c; border-color: #4cae4c; }
#logar:hover{ background-color: #4cae4c; }
#cep{ border-radius: 5px 0px 0px 5px !important; }
#botao_cep{ border-radius: 0px 5px 5px 0px !important; }
#pay{ font-size: 15px; border-bottom: 5px solid #569256; border-radius: 5px !important; }
#model_alterar_cliente{ cursor: pointer; }
/* CHECKOUT */
.botao_finalizar_pedido{ background-color: #7db122; border-color: #7db122; color: #fff; border-radius: 0px; }
.botao_finalizar_pedido:hover{ background-color: #658E1C; border-color: #658E1C; color: #fff; }
.panel_checkout{ background-color: #00c6c4; border-color: #00c6c4; color: #fff; border-radius: 0px; }
.z-tabs > .z-container > .z-content{ height: auto !important; }
.panel-default{ border-color: #e5e5e5; min-height: 170px; }
.panel-cupom { min-height: 10px; }
.btn-go-to-payment{ margin-top: 15px; width: 100%; }
.uhu { clear: both; }
.label_check { width: 100%; border-radius: 3px; border: 1px solid #FFF; cursor: pointer; }
.label_check:hover{ border: 1px solid #D1D3D4; color: #06b506; }
.label_check img{ width: 35px; margin: 0px 10px 5px 0px; }
#ja_cadastro, #nao_tenho_cadastro{ font-size: 12px; float: right; }
.checkout label{ font-weight: 100 !important; margin-bottom: 0px; margin-top: 10px;}
.checkout input{ font-size: 11px; height: 40px; border-radius: 5px !important; }
.checkout select{ font-size: 11px; height: 40px; border-radius: 5px !important; }
.tabs-left{ border-bottom: none !important; }
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{ border-top: 1px solid #ddd !important; border-bottom: 1px solid #fff !important; border-left: 1px solid #ddd !important; border-right: 1px solid #ddd !important; }
.check-pags{ -webkit-transition: all 0.5s; transition: all 0.5s; width: 100% !important; border-bottom: 1px solid #fff !important; margin-bottom: -2px !important; border-radius: 0px !important;}
.check-pags.active>a:hover{ border-top: 1px solid #ddd !important; border-bottom: 1px solid #ddd !important; border-left: 1px solid #ddd !important;}
.check-pags>a{ color: #000 !important; border-top: 1px solid #ddd !important; border-bottom: 1px solid #ddd !important; border-left: 1px solid #ddd !important; border-radius: 0px !important; border-right: 1px solid #ddd !important;}
.ambiente-cadastro .form-control{ height: 43px; padding: 10px; }
.ambiente-cadastro label{ font-weight: 400; }
.ambiente-cadastro p{ margin-top: 5px; }
.ambiente-cadastro .cadastro-cep{ padding: 25px 0px 0px 0px !important; }
.ambiente-cadastro #completar-endereco{ display: none; }
.ambiente-cadastro #pessoa_juridica{ display: none; }
.password + .glyphicon { cursor: pointer; pointer-events: all; width: 43px; height: 43px; margin: 25px 8px 0px 0px; }
.ambiente-cadastro .btn{ border-radius: 4px !important; width: 70%; padding: 8px !important; font-weight: 700; border-bottom: 3px solid #286928 !important; font-size: 15px !important; }
#formas_envio{ padding-top: 15px; }
.active_labelcheck{ color: #06b506; }
.uhu input[type='radio'] { -webkit-appearance:none; -moz-appearance:none; appearance:none; width:20px; height:20px; border:1px solid darkgray; border-radius:50% !important; outline:none; box-shadow:0 0 5px 0px gray inset; right: 0; position: absolute; margin: 17px 25px 0px 0px; }
.uhu input[type='radio']:hover { box-shadow:0 0 5px 0px orange inset; }
.uhu input[type='radio']:before { content:''; display:block; width:10px; /* updated */ height:10px; /* updated */ margin: 22% auto; border-radius:50%; }
.uhu input[type='radio']:checked:before { background:#06b506; }
/* CONFIRMACAO */
.panel_confirmacao{ background-color: #00c6c4; border-color: #00c6c4; color: #fff; border-radius: 0px; }
.tabela_detalhes{ background-color: #fff; }
.acompanhar{ padding: 15px !important; color: #fff; background: #337ab7; border-bottom: 4px solid #205b8f !important; }
.acompanhar:hover{ color: #fff !important; background: #205b8f; border-bottom: 4px solid #205b8f; }
/* LOGIN */
.login{ border-right: 1px solid #eeeeee }
.btn-login{ width: 100%; }
.cadastro p{ margin: 0 0 2.5px !important; }
/* AREA CLIENTE */
.border-line{ border: 1px solid #eeeeee !important; border-radius: 0px !important;}
.border-line a{ color: #333; text-decoration: none;}
.border-line a:hover{ text-decoration: none; }
.border-line:hover { opacity: 0.8; }
/* CATEGORIA */
.btn-group, .btn-group-vertical{ display: block !important; }
.list-departamentos { background-color: #131313 !important; border-color: #000000 !important; color: #fff !important }
/* PAGINAS */
.panel-duvidas{ -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.0) !important; box-shadow: 0 1px 1px rgba(0,0,0,.0) !important; border: 1px solid #dddddd !important; border-radius: 0px !important; }
.envio-nome{ text-align: left; }
.envio-valor{ text-align: right; }
.zoom-mobile{display: none;}
@media (max-width: 768px) {
.envio-valor{ text-align: left; }
.zoom-mobile{width: 100%; height: 100%; background-color: transparent; position: absolute; z-index: 1; display: block;}
}
@media print {
.payment, hr, nav, header, footer, button, img, a{ display: none !important; }
}
/* AVALIACÃO INDEX */
#avaliacoes{margin-top:20px; text-align: left !important;}
#avaliacoes > .container > .row{margin-top: 20px;}
.dep-title{text-transform: none;text-align: center;color: #000;letter-spacing: .8px;font-weight: 700;font-size: calc(16px + 6 * ((100vw - 320px)/680));padding-bottom: 10px}
#review{color: #6c6a77;text-align: center;}
#review .lista-aval{font-size: 14px;line-height: 1.5;text-align: left;display: flex;width: 100%;flex-wrap: wrap;justify-content: center;}
#review .item-al{border: 1px solid #cecece;border-radius: 10px;padding: 10px 15px;}
#review .item-al>p{margin-bottom: 8px;}
.item-al{width: 359px; background: #fff; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);}
.review-title {color: #676767;margin: 0 -10px 15px;}
.review-title b {display: inline-block;padding: 0 10px;}
.review-star {color: #e79501;}
.aval-link span {color: #adadad;display: inline-block;}
#review .item-al>p:last-child {margin: 0;color: #212529;}
#review .lista-aval .space {padding: 10px;}
.teste li{padding-right: 28px !important;}
/* CARRUOSEL MAIS VENDIDOS */
#bestsellers .produto{padding-left: 15px;padding-right: 15px;}
#bestsellers .owl-next{right: 0px;top: 0; }
#bestsellers .owl-prev{left: 0;top: 0;}
.banner-icons,.banner-icons path{width: 57px; height: 57px; fill: var(--colorcarrinho);}
.banner-icons[left]{-moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1);}
#bestsellers svg,#bestsellers path{width: 50px; fill: var(--colorcarrinho);}
.loader{color:#fff;position:fixed;box-sizing:border-box;left:-9999px;top:-9999px;width:0;height:0;overflow:hidden;z-index:999999}.loader:after,.loader:before{box-sizing:border-box}.loader.is-active{background-color:rgba(0,0,0,0.85);width:100%;height:100%;left:0;top:0}@keyframes rotation{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes blink{from{opacity:.5}to{opacity:1}}.loader[data-text]:before{position:fixed;left:0;top:50%;color:currentColor;font-family:Helvetica,Arial,sans-serif;text-align:center;width:100%;font-size:14px}.loader[data-text='']:before{content:'Loading'}.loader[data-text]:not([data-text='']):before{content:attr(data-text)}.loader[data-text][data-blink]:before{animation:blink 1s linear infinite alternate}.loader-default[data-text]:before{top:calc(50% - 63px)}.loader-default:after{content:'';position:fixed;width:48px;height:48px;border:solid 8px #fff;border-left-color:transparent;border-radius:50%;top:calc(50% - 24px);left:calc(50% - 24px);animation:rotation 1s linear infinite}.loader-default[data-half]:after{border-right-color:transparent}.loader-default[data-inverse]:after{animation-direction:reverse}.loader-double:after,.loader-double:before{content:'';position:fixed;border-radius:50%;border:solid 8px;animation:rotation 1s linear infinite}.loader-double:after{width:48px;height:48px;border-color:#fff;border-left-color:transparent;top:calc(50% - 24px);left:calc(50% - 24px)}.loader-double:before{width:64px;height:64px;border-color:#eb974e;border-right-color:transparent;animation-duration:2s;top:calc(50% - 32px);left:calc(50% - 32px)}.loader-bar[data-text]:before{top:calc(50% - 40px);color:#fff}.loader-bar:after{content:'';position:fixed;top:50%;left:50%;width:200px;height:20px;transform:translate(-50%, -50%);background:linear-gradient(-45deg, #4183d7 25%, #52b3d9 25%, #52b3d9 50%, #4183d7 50%, #4183d7 75%, #52b3d9 75%, #52b3d9);background-size:20px 20px;box-shadow:inset 0 10px 0 rgba(255,255,255,0.2),0 0 0 5px rgba(0,0,0,0.2);animation:moveBar 1.5s linear infinite}.loader-bar[data-rounded]:after{border-radius:15px}@keyframes moveBar{from{background-position:0 0}to{background-position:20px 20px}}@keyframes corners{6%{width:60px;height:15px}25%{width:15px;height:15px;left:calc(100% - 15px);top:0}31%{height:60px}50%{height:15px;top:calc(100% - 15px);left:calc(100% - 15px)}56%{width:60px}75%{width:15px;left:0;top:calc(100% - 15px)}81%{height:60px}}.loader-border[data-text]:before{color:#fff}.loader-border:after{content:'';position:absolute;top:0;left:0;width:15px;height:15px;background-color:#fff000;animation:corners 3s ease both infinite}.loader-ball:before{content:'';position:absolute;width:50px;height:50px;top:50%;left:50%;margin:-25px 0 0 -25px;background-color:#fff;border-radius:50%;z-index:1;animation:kick 1s infinite alternate ease-in both}.loader-ball[data-shadow]:before{box-shadow:-5px -5px 10px 0 rgba(0,0,0,0.5) inset}.loader-ball:after{content:'';position:absolute;background-color:rgba(0,0,0,0.3);border-radius:50%;width:45px;height:20px;top:calc(50% + 10px);left:50%;margin:0 0 0 -22.5px;z-index:0;animation:shadow 1s infinite alternate ease-out both}@keyframes shadow{0%{background-color:transparent;transform:scale(0)}40%{background-color:transparent;transform:scale(0)}95%{background-color:rgba(0,0,0,0.75);transform:scale(1)}100%{background-color:rgba(0,0,0,0.75);transform:scale(1)}}@keyframes kick{0%{transform:translateY(-80px) scaleX(0.95)}90%{border-radius:50%}100%{transform:translateY(0) scaleX(1);border-radius:50% 50% 20% 20%}}.loader-smartphone:after{content:'';color:#fff;font-size:12px;font-family:Helvetica,Arial,sans-serif;text-align:center;line-height:120px;position:fixed;left:50%;top:50%;width:70px;height:130px;margin:-65px 0 0 -35px;border:solid 5px gold;border-radius:10px;box-shadow:0 5px 0 0 gold inset;background:radial-gradient(circle at 50% 90%, rgba(0,0,0,0.5) 6px, transparent 6px),linear-gradient(to top, gold 22px, transparent 22px),linear-gradient(to top, rgba(0,0,0,0.5) 22px, rgba(0,0,0,0.5) 100%);animation:shake 2s cubic-bezier(0.36, 0.07, 0.19, 0.97) both infinite}.loader-smartphone[data-screen='']:after{content:'Loading'}.loader-smartphone:not([data-screen='']):after{content:attr(data-screen)}@keyframes shake{5%{transform:translate3d(-1px, 0, 0)}10%{transform:translate3d(1px, 0, 0)}15%{transform:translate3d(-1px, 0, 0)}20%{transform:translate3d(1px, 0, 0)}25%{transform:translate3d(-1px, 0, 0)}30%{transform:translate3d(1px, 0, 0)}35%{transform:translate3d(-1px, 0, 0)}40%{transform:translate3d(1px, 0, 0)}45%{transform:translate3d(-1px, 0, 0)}50%{transform:translate3d(1px, 0, 0)}55%{transform:translate3d(-1px, 0, 0)}}.loader-clock:before{content:'';position:fixed;width:120px;height:120px;left:50%;top:50%;border-radius:50%;overflow:hidden;margin:-60px 0 0 -60px;background:linear-gradient(to bottom, transparent 50%, #f5f5f5 50%),linear-gradient(90deg, transparent 55px, #2ecc71 55px, #2ecc71 65px, transparent 65px),linear-gradient(to bottom, #f5f5f5 50%, #f5f5f5 50%);box-shadow:0 0 0 10px #f5f5f5 inset,0 0 0 5px #555,0 0 0 10px #7b7b7b;animation:rotation infinite 2s linear}.loader-clock:after{content:'';position:fixed;width:60px;height:40px;left:50%;top:50%;margin:-20px 0 0 -15px;border-radius:20px 0 0 20px;overflow:hidden;background:radial-gradient(circle at 14px 20px, #25a25a 10px, transparent 10px),radial-gradient(circle at 14px 20px, #1b7943 14px, transparent 14px),linear-gradient(180deg, transparent 15px, #2ecc71 15px, #2ecc71 25px, transparent 25px);animation:rotation infinite 24s linear;transform-origin:15px center}.loader-curtain:before,.loader-curtain:after{position:fixed;width:100%;top:50%;margin-top:-35px;font-size:70px;text-align:center;font-family:Helvetica,Arial,sans-serif;overflow:hidden;line-height:1.2;content:'Loading'}.loader-curtain:before{color:#666}.loader-curtain:after{color:#fff;height:0;animation:curtain 1s linear infinite alternate both}.loader-curtain[data-curtain-text]:not([data-curtain-text='']):before,.loader-curtain[data-curtain-text]:not([data-curtain-text='']):after{content:attr(data-curtain-text)}.loader-curtain[data-brazilian]:before{color:#f1c40f}.loader-curtain[data-brazilian]:after{color:#2ecc71}.loader-curtain[data-colorful]:before{animation:maskColorful 2s linear infinite alternate both}.loader-curtain[data-colorful]:after{animation:curtain 1s linear infinite alternate both, maskColorful-front 2s 1s linear infinite alternate both;color:#000}@keyframes maskColorful{0%{color:#3498db}49.5%{color:#3498db}50.5%{color:#e74c3c}100%{color:#e74c3c}}@keyframes maskColorful-front{0%{color:#2ecc71}49.5%{color:#2ecc71}50.5%{color:#f1c40f}100%{color:#f1c40f}}@keyframes curtain{0%{height:0}100%{height:84px}}.loader-music:before,.loader-music:after{content:'';position:fixed;width:240px;height:240px;top:50%;left:50%;margin:-120px 0 0 -120px;border-radius:50%;text-align:center;line-height:240px;color:#fff;font-size:40px;font-family:Helvetica,Arial,sans-serif;text-shadow:1px 1px 0 rgba(0,0,0,0.5);letter-spacing:-1px}.loader-music:after{backface-visibility:hidden}.loader-music[data-hey-oh]:before,.loader-music[data-hey-oh]:after{box-shadow:0 0 0 10px}.loader-music[data-hey-oh]:before{background-color:#fff;color:#000;animation:coinBack 2.5s linear infinite,oh 5s 1.25s linear infinite both}.loader-music[data-hey-oh]:after{background-color:#000;animation:coin 2.5s linear infinite,hey 5s linear infinite both}.loader-music[data-no-cry]:before,.loader-music[data-no-cry]:after{background:linear-gradient(45deg, #009b3a 50%, #fed100 51%);box-shadow:0 0 0 10px #000}.loader-music[data-no-cry]:before{animation:coinBack 2.5s linear infinite,cry 5s 1.25s linear infinite both}.loader-music[data-no-cry]:after{animation:coin 2.5s linear infinite,no 5s linear infinite both}.loader-music[data-we-are]:before{animation:coinBack 2.5s linear infinite,theWorld 5s 1.25s linear infinite both;background:radial-gradient(ellipse at center, #4ecdc4 0%, #556270)}.loader-music[data-we-are]:after{animation:coin 2.5s linear infinite,weAre 5s linear infinite both;background:radial-gradient(ellipse at center, #26d0ce 0%, #1a2980)}.loader-music[data-rock-you]:before{animation:coinBack 2.5s linear infinite,rockYou 5s 1.25s linear infinite both;background:#444}.loader-music[data-rock-you]:after{animation:coin 2.5s linear infinite,weWill 5s linear infinite both;background:#96281b}@keyframes coin{to{transform:rotateY(359deg)}}@keyframes coinBack{0%{transform:rotateY(180deg)}50%{transform:rotateY(360deg)}100%{transform:rotateY(180deg)}}@keyframes hey{0%{content:'Hey!'}50%{content:'Let\'s!'}100%{content:'Hey!'}}@keyframes oh{0%{content:'Oh!'}50%{content:'Go!'}100%{content:'Oh!'}}@keyframes no{0%{content:'No...'}50%{content:'no'}100%{content:'No...'}}@keyframes cry{0%{content:'woman'}50%{content:'cry!'}100%{content:'woman'}}@keyframes weAre{0%{content:'We are'}50%{content:'we are'}100%{content:'We are'}}@keyframes theWorld{0%{content:'the world,'}50%{content:'the children!'}100%{content:'the world,'}}@keyframes weWill{0%{content:'We will,'}50%{content:'rock you!'}100%{content:'We will,'}}@keyframes rockYou{0%{content:'we will'}50%{content:'🤘'}100%{content:'we will'}}
.input_observ{font-size: 11px !important;height: 40px !important;border-radius: 5px !important;width: 100%;padding: 6px 12px;background-color: #fff;border: 1px solid #ccc;}
/* NOVA BARRA DE PROGRESSO STATUS DE PEDIDO */
:root{--success: #4caf50;--info: #00c7b1;--secondary: #009cde;--danger: #d50032;--gray: #dde6e9;--warning: #ff8200;--dark-gray: #808080;--success-grad: repeating-linear-gradient(-45deg, var(--success), var(--success) 10px, var(--gray) 10px, var(--gray) 20px);--secondary-grad: repeating-linear-gradient(-45deg, var(--secondary), var(--secondary) 10px, var(--gray) 10px, var(--gray) 20px);}
.order-progress-stepper {width: 100%;counter-reset: step;display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;background: transparent;}
.step {padding: 0;margin: 0;flex-grow: 0;width: 100%;text-align: center;position: relative;font-weight: bold;}
.step::before {background-color: white;content: counter(step);counter-increment: step;display: block;border-radius: 50%;border: 1px solid #ddd;width: 30px;height: 30px;line-height: 30px;margin: 0 auto 10px auto;text-align: center;position: inherit;z-index: 1;}
.step::after {content: '';display: block;width: 100%;background-color: #ddd;height: 5px;position: absolute;top: 13px;z-index: 0;}
.step.completed::before, .step.error::before, .step.caution::before {color: white;font: normal normal normal 35px/2 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;}
.step.completed::before {content: "\f00c";background-color: var(--success);}
.step.completed::after {background-color: var(--success);}
.step.active {color: var(--secondary);}
.step.active::before {color: white;background-color: var(--secondary);}
.step.active::after {background-color: var(--secondary);}
.step.error {color: var(--danger);}
.step.error::before {content: '\f00d';}
.step.error::before, .step.error::after {background-color: var(--danger);}
.step.caution {color: var(--warning);}
.step.caution::before {content: '\f12a';}
.step.caution::before, .step.caution::after {background-color: var(--warning);}
.step:first-child::after {width: 50%;left: 50%;}
.step:last-child::after {width: 50%;}
.order-progress-stepper.cancelled .step,
.order-progress-stepper.cancelled .step::before {color: var(--dark-gray);}
.order-progress-stepper.cancelled .step.error {color: var(--danger);}
.order-progress-stepper.cancelled .step.error::before {color: white;}
.order-progress-stepper.cancelled2 .step,
.order-progress-stepper.cancelled2 .step::before {color: var(--dark-gray);}
.order-progress-stepper.cancelled2 .step::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: '\f00d';
}
.order-progress-stepper.cancelled2 .step.error {
color: var(--danger);
}
.order-progress-stepper.cancelled2 .step.error::before {
color: white;
}
.rep-ped{color: #40cd28 !important;font-size: 14px !important;border: 1px solid !important;padding: 6px !important; transition: all .4s ease-in-out;}
.rep-ped:hover{color: #fff !important;background: #40cd28 !important;}
/* notificacao de venda */
.notificacao-vendas { position: fixed; bottom: 0; z-index: 5; } .notificacao-venda { opacity: 0; visibility: hidden; position: absolute; bottom: 15px; background: #fff; width: 270px; font-size: 13px; line-height: 13px; border: 1px solid #e6e6e6; box-shadow: 0px 2px 5.81px 1.19px rgba(153, 153, 153, 0.23); border-radius: 4px; transition: all 0.8s ease-in-out; left: -270px; } .notificacao-venda.active_v { opacity: 1; visibility: visible; transition: all 0.8s ease-in-out; left: 15px; } .notificacao-venda .noty-compras { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid #ececec; } .notificacao-venda .noty-compras strong{ color: var(--colorcarrinho); } .notificacao-venda a{ padding: 6px; display: flex; flex-direction: column; font-size: 12px; line-height: 1; color: var(--colorcarrinho); } .notificacao-venda a:hover{ text-decoration: none; color: var(--colorcarrinho); } .notificacao-venda img { width: 48px; height: 48px; display: flex; object-fit: cover; } .notificacao-venda .noty-content { display: flex; align-items: center; } .notificacao-venda .noty-nome { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: 13px; line-height: 14px; } .notificacao-venda .noty-info { display: flex; flex-direction: column; margin-left: 10px; flex: 1; justify-content: center; margin-top: 6px; margin-bottom: 6px; color: var(--colorcarrinho); } .notificacao-venda .noty-preco { margin-top: 7px; font-size: 13px; line-height: 13px; }
/* Módulo filtro preços por categorias */
#range_precos_cat{margin-top: 10px;}
#range_precos_cat span{border-radius: 50%;}
/* MODULO FILTRO COR CATEGORIAS */
label.cor_filtro{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 4px;
}
input.cor_filtro{ width: 0;visibility: hidden;}
label.cor_filtro .hue{border-radius: 4px; border: 2px solid transparent; }
label.cor_filtro .hue span{
display: block;
border-radius: 4px;
width: 17px;
height: 17px;
border: 2px solid #fff;
background-size: cover;
-webkit-transition: border .3s ease-in-out;
-o-transition: border .3s ease-in-out;
transition: border .3s ease-in-out;
}
label.cor_filtro input.cor_filtro:checked ~ .hue {border: 2px solid #000;}
label.tamanho_filtro{margin-top: 6px;padding: 4px 4px;border: 2px solid #ccc;display: inline-block;border-radius: 5px;}
input.tamanho_filtro{ width: 0;visibility: hidden;}
label.tamanho_filtro:has(input.tamanho_filtro:checked){
border: 2px solid #000;
-webkit-transition: border .4s ease;
-o-transition: border .4s ease;
transition: border .4s ease;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
}
/* LOGIN COM REDES SOCIAIS */
.loginSocial{display: flex;row-gap: 3px;flex-direction: column;}
/* MENU LATERAL DE CATEGORIAS */
.float-right{
float: right;
}
dropdown{
display: inline-block;
margin: 10px 0px;
width: 100%;
}
dropdown label:not(.not_label_drop){
display: block;
width: auto;
background: #ECF0F1;
padding: 15px 20px;
}
dropdown ul li{
display: block;
width: auto;
background: #ECF0F1;
}
dropdown ul{
height: 0px !important;
}
dropdown ul > li{
height: 0px !important;
padding: 0px !important;
}
dropdown ul{
height: 0px !important;
padding: 0px !important;
}
dropdown a{
height: 0px !important;
padding: 0px !important;
display: block !important;
}
dropdown b{
height: 0px !important;
padding: 0px !important;
display: block !important;
}
dropdown label:not(.not_label_drop):hover, dropdown ul li:hover{
background: var(--colorcarrinho);
color: white;
cursor: pointer;
}
dropdown label:not(.not_label_drop){
color: var(--colorcarrinho);
border-left: 4px solid var(--colorcarrinho);
border-radius: 0 5px 0 0;
position: relative;
z-index: 2;
}
dropdown input:not(.marca_filtro,.caracteristica_not){
display: none;
}
dropdown input ~ ul{
position: relative;
visibility: hidden;
opacity: 0;
top: -20px;
z-index: 1;
margin-bottom: 0px !important;
max-height: 300px;
overflow: auto;
}
dropdown ::-webkit-scrollbar {
width: 8px; /* Largura da barra de rolagem */
height: 10px;
}
dropdown input ~ ul::-webkit-scrollbar-track {
background: #f1f1f1; /* Cor de fundo da área da barra de rolagem */
}
dropdown input ~ ul::-webkit-scrollbar-thumb {
background: var(--colorcarrinho); /* Cor do indicador da barra de rolagem */
border-radius: 4px;
}
dropdown input ~ ul::-webkit-scrollbar-thumb:hover {
background: var(--colorcarrinho); /* Cor do indicador da barra de rolagem quando hover */
}
dropdown input:checked:not(.filtro_caracteristicas) + label:not(.not_label_drop){
background: var(--colorcarrinho);
color: white;
}
dropdown input:checked:not(.filtro_caracteristicas) ~ ul{
visibility: visible;
opacity: 1;
top: 0;
height: auto !important;
}
dropdown input:checked:not(.filtro_caracteristicas) ~ ul > li{
height: auto !important;
padding: 5px 10px !important;
}
dropdown input:checked:not(.filtro_caracteristicas) ~ ul> li >a,dropdown input:checked:not(.filtro_caracteristicas) ~ ul> li >b,dropdown input:checked:not(.filtro_caracteristicas) ~ ul> li >b>a{
height: auto !important;
}
/* @for $i from 1 through length($colors) {
dropdown ul li:nth-child(#{$i}) {
border-left: 4px solid nth($colors, $i);
.fa{
color: nth($colors, $i);
}
&:hover {
background: nth($colors, $i);
color: white;
.fa{
color: white;
}
}
}
} */
.animate{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
}
.item-drop{color: var(--colorcarrinho) !important}
#filtro_lateral_v2 ul {margin-bottom: 0px !important;}
.titlePersonalizacao {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
margin: 0px 0px 50px 0px;
}
.borda_erro { border-left: 4px solid #000 !important; }
#voltar_um_passo, .btnFinPerso {
background: black !important;
width: 15%;
color: white !important;
text-align: center;
cursor: pointer !important;
padding: 5px;
border-radius: 5px;
display: flex;
font-size: 12px;
margin-top: 30px;
align-items: center;
justify-content: space-evenly;
}
#voltar_um_passo:hover, .btnFinPerso:hover{
color: white !important;
}
.btnFinPerso:hover{
opacity: 0.8;
color: #fff !important;
}
.barra_progresso { counter-reset: step;margin-top: 4%;display: flex; }
.barra_progresso li { list-style-type: none; float: left; width: 20%; position: relative; text-align: center; font-size: 12px; }
.barra_progresso li:before { content: ''; counter-increment: step; width: 15px; height: 15px; line-height: 30px; border: 2px solid #000; display: block; text-align: center; margin: 0 auto 10px auto; border-radius: 50%; background-color: white; position: relative; top: 8px; }
.barra_progresso li:after { content: ''; position: absolute; width: 100%; height: 2px; background-color: #000; top: 15px; left: -50%; z-index: -1; }
.barra_progresso li:first-child::after { content: none; }
.barra_progresso li.ativo::before { border-color: #000; background-color: #000; }
.barra_progresso li.ativo2 + li::after { background-color: #000; }
.barra_progresso li:nth-child(4).ativo2 + li::after{ width: 93%; }
.barra_progresso li:last-child.ativo::before { border: 2px solid #000; width: 40px; height: 40px; position: relative; top: -5px; background-color: #fff; background-image: url(../img/like.png); background-position: 5px 3px; background-size: 25px; background-repeat: no-repeat; }
.barra_progresso li.inativo::before { border-color: #000; background-color: #fff; }
.barra_progresso li.inativo2 + li::after { background-color: #fff; }
.barra_progresso li:nth-child(4).inativo2 + li::after{ width: 93%; }
.barra_progresso li:last-child.inativo::before { border: 2px solid #000; width: 40px; height: 40px; position: relative; top: -5px; background-color: #fff; background-image: url(../img/like_red.png); background-position: 6px 8px; background-size: 25px; background-repeat: no-repeat; }
.borda_erro { border-left: 4px solid #000 !important; }
/* ======================== NOVA ÁREA DO CLIENTE ======================== */
/* Container da Área do Cliente */
.area-cliente-content {
padding: 0 20px;
}
/* Sidebar Modernizada */
.sidebar-menu {
background: white;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
padding: 20px 0;
margin-bottom: 30px;
border: 1px solid #e5e7eb;
}
.sidebar-title {
color: #374151;
font-size: 18px;
font-weight: 600;
margin: 0 0 20px 0;
padding: 0 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid #f3f4f6;
padding-bottom: 15px;
}
.nav-menu {
list-style: none;
padding: 0;
margin: 0;
}
.nav-item {
margin: 0;
}
.nav-link {
display: flex;
align-items: center;
padding: 15px 20px;
color: #6b7280;
text-decoration: none;
transition: all 0.3s ease;
border-left: 4px solid transparent;
position: relative;
}
.nav-link:hover {
background: #f8fafc;
color: #4f46e5;
border-left-color: #4f46e5;
text-decoration: none;
}
.nav-link.active {
background: #eef2ff;
color: #4f46e5;
border-left-color: #4f46e5;
}
.nav-icon {
width: 20px;
height: 20px;
margin-right: 12px;
font-size: 18px;
text-align: center;
}
.nav-text {
flex: 1;
font-weight: 500;
}
.nav-arrow {
font-size: 12px;
opacity: 0.5;
transition: transform 0.3s ease;
}
.nav-link:hover .nav-arrow {
transform: translateX(4px);
}
.nav-divider {
margin: 20px 0 10px 0;
padding: 0 20px;
}
.nav-divider span {
font-size: 12px;
color: #9ca3af;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
}
/* Container de Pedidos */
.pedidos-container {
background: white;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
border: 1px solid #e5e7eb;
overflow: hidden;
}
.pedidos-header {
background: #f8fafc;
padding: 30px;
border-bottom: 1px solid #e5e7eb;
}
.pedidos-title {
margin: 0 0 8px 0;
color: #1f2937;
font-size: 24px;
font-weight: 600;
display: flex;
align-items: center;
gap: 12px;
}
.pedidos-icon {
color: #4f46e5;
}
.pedidos-subtitle {
margin: 0;
color: #6b7280;
font-size: 16px;
}
.pedidos-lista {
padding: 20px;
}
/* Cards de Pedidos */
.pedido-card {
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
margin-bottom: 20px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.pedido-card:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.pedido-header {
padding: 20px;
background: #fafbfc;
border-bottom: 1px solid #e5e7eb;
cursor: pointer;
transition: background-color 0.3s ease;
}
.pedido-header:hover {
background: #f1f5f9;
}
.pedido-info {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 15px;
}
.pedido-numero .label {
display: block;
font-size: 12px;
color: #6b7280;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.5px;
}
.pedido-numero .valor {
font-size: 18px;
font-weight: 700;
color: #1f2937;
}
.status-badge {
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.status-badge.status-1 { background: #dcfce7; color: #166534; }
.status-badge.status-2 { background: #fef3c7; color: #92400e; }
.status-badge.status-3 { background: #dbeafe; color: #1e40af; }
.status-badge.status-4 { background: #e0e7ff; color: #5b21b6; }
.status-badge.status-5 { background: #dcfce7; color: #166534; }
.status-badge.status-6,
.status-badge.status-7,
.status-badge.status-8 { background: #fee2e2; color: #dc2626; }
.pedido-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
flex-wrap: wrap;
}
.pedido-data {
display: flex;
align-items: center;
gap: 8px;
color: #6b7280;
font-size: 14px;
}
.pedido-valor {
display: flex;
align-items: center;
gap: 8px;
}
.valor-label {
color: #6b7280;
font-size: 14px;
}
.valor-amount {
font-size: 18px;
font-weight: 700;
color: #059669;
}
.pedido-toggle {
color: #6b7280;
font-size: 16px;
transition: transform 0.3s ease;
}
.pedido-header[aria-expanded="true"] .pedido-toggle {
transform: rotate(180deg);
}
/* Conteúdo do Pedido */
.pedido-content {
padding: 30px;
background: white;
}
.section-title {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 20px 0;
font-size: 16px;
font-weight: 600;
color: #374151;
padding-bottom: 10px;
border-bottom: 1px solid #e5e7eb;
}
.section-title i {
color: #4f46e5;
}
/* Seção de Produtos */
.produtos-section {
margin-bottom: 30px;
}
.produtos-grid {
display: grid;
gap: 15px;
}
.produto-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
background: #f9fafb;
border-radius: 8px;
border: 1px solid #e5e7eb;
}
.produto-image {
flex-shrink: 0;
}
.produto-image img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 6px;
border: 1px solid #e5e7eb;
}
.produto-details {
flex: 1;
min-width: 0;
}
.produto-nome {
margin: 0 0 8px 0;
font-size: 14px;
font-weight: 600;
color: #374151;
line-height: 1.3;
}
.produto-info {
display: flex;
align-items: center;
gap: 15px;
font-size: 13px;
}
.quantidade {
color: #6b7280;
}
.preco {
font-weight: 600;
color: #059669;
}
/* Barra de Progresso */
.progresso-section {
margin-bottom: 30px;
}
.progress-tracker {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
margin: 20px 0;
}
.progress-tracker::before {
content: '';
position: absolute;
top: 20px;
left: 0;
right: 0;
height: 2px;
background: #e5e7eb;
z-index: 1;
}
.progress-step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 2;
background: white;
padding: 0 10px;
min-width: 80px;
}
.step-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #f3f4f6;
color: #9ca3af;
font-size: 16px;
border: 3px solid #e5e7eb;
transition: all 0.3s ease;
margin-bottom: 8px;
}
.step-label {
font-size: 11px;
text-align: center;
color: #6b7280;
font-weight: 500;
line-height: 1.2;
}
.progress-step.active .step-icon {
background: #4f46e5;
color: white;
border-color: #4f46e5;
}
.progress-step.completed .step-icon {
background: #059669;
color: white;
border-color: #059669;
}
.progress-step.error .step-icon {
background: #dc2626;
color: white;
border-color: #dc2626;
}
.progress-step.active .step-label,
.progress-step.completed .step-label {
color: #374151;
font-weight: 600;
}
.progress-step.error .step-label {
color: #dc2626;
font-weight: 600;
}
/* Estilo especial para progresso cancelado */
.progress-tracker.cancelled::before {
background: #fee2e2;
}
/* Ações do Pedido */
.acoes-section {
margin-bottom: 30px;
}
.acoes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.acao-btn {
display: flex;
align-items: center;
gap: 12px;
padding: 15px 20px;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 8px;
text-decoration: none;
color: #374151;
transition: all 0.3s ease;
font-weight: 500;
}
.acao-btn:hover {
background: #e0e7ff;
border-color: #4f46e5;
color: #4f46e5;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
}
.acao-btn i {
font-size: 18px;
width: 20px;
text-align: center;
}
.acao-repetir:hover { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.acao-rastrear:hover { background: #dbeafe; border-color: #3b82f6; color: #1e40af; }
.acao-suporte:hover { background: #fce7f3; border-color: #ec4899; color: #be185d; }
.acao-detalhes:hover { background: #e0f2fe; border-color: #06b6d4; color: #0e7490; }
.acao-disabled {
opacity: 0.5;
cursor: not-allowed;
background: #f3f4f6;
color: #9ca3af;
}
.acao-disabled:hover {
transform: none;
box-shadow: none;
}
.boleto-section {
margin-top: 20px;
padding: 20px;
background: #fef3c7;
border-radius: 8px;
border: 1px solid #fbbf24;
}
/* Responsividade */
@media (max-width: 768px) {
.area-cliente-content {
padding: 0 10px;
}
.pedidos-header {
padding: 20px;
}
.pedidos-title {
font-size: 20px;
}
.pedido-header {
padding: 15px;
}
.pedido-meta {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.pedido-content {
padding: 20px;
}
.progress-tracker {
flex-direction: column;
gap: 15px;
}
.progress-tracker::before {
display: none;
}
.progress-step {
flex-direction: row;
min-width: auto;
width: 100%;
justify-content: flex-start;
gap: 15px;
padding: 10px;
background: #f9fafb;
border-radius: 6px;
}
.step-icon {
margin-bottom: 0;
}
.step-label {
text-align: left;
font-size: 14px;
}
.acoes-grid {
grid-template-columns: 1fr;
}
.favorito-card .produto-item {
flex-direction: column;
text-align: center;
}
.favorito-card .produto-image img {
width: 80px;
height: 80px;
}
}
/* ======================== ESTILOS LISTA DE FAVORITOS ======================== */
.favoritos-container {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.favoritos-header {
background: linear-gradient(135deg, #0b77cf 0%, #1e6eaf 100%);
padding: 30px;
text-align: center;
color: white;
}
.favoritos-title {
margin: 0 0 10px 0;
font-size: 28px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.favoritos-icon {
font-size: 32px;
color: #ff3535;
}
.favoritos-subtitle {
margin: 0;
opacity: 0.9;
font-size: 16px;
font-weight: 300;
}
.favoritos-grid {
padding: 15px 10px;
/* Garante que os cards quebrem corretamente em múltiplas linhas */
display: flex;
flex-wrap: wrap;
}
/* Cards dos produtos favoritos */
.favorito-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
margin-bottom: 30px;
position: relative;
overflow: hidden;
border: 1px solid #f0f0f0;
/* Espaçamento lateral quando usado em grid flex */
margin-left: 10px;
margin-right: 10px;
/* Largura padrão em telas médias: 3 por linha */
width: calc(33.333% - 20px);
}
.favorito-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.favorito-card.indisponivel {
opacity: 0.7;
background: #f8f9fa;
}
/* Botão remover favorito */
.remove-favorito-btn {
position: absolute;
top: 15px;
right: 15px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
color: #ff3535;
font-size: 18px;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.remove-favorito-btn:hover {
background: #ff3535;
color: white;
transform: scale(1.1);
}
/* Badges */
.badge-lancamento,
.badge-desconto,
.badge-indisponivel {
position: absolute;
top: 15px;
left: 15px;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
z-index: 5;
}
.badge-lancamento {
background: linear-gradient(135deg, #0b77cf 0%, #1e6eaf 100%);
color: white;
}
.badge-desconto {
background: linear-gradient(135deg, #ff3535 0%, #c31b1b 100%);
color: white;
}
.badge-indisponivel {
background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
color: white;
left: 15px;
top: 60px;
}
/* Container da imagem - FAVORITOS */
.favorito-card .produto-image-container {
position: relative;
overflow: hidden;
height: 250px;
background: #f8f9fa;
}
.favorito-card .produto-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s ease;
}
.favorito-card .produto-image-container:hover .produto-image {
transform: scale(1.05);
}
.favorito-card .produto-image-container .pic-2 {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.favorito-card .produto-image-container:hover .pic-1 {
opacity: 0;
}
.favorito-card .produto-image-container:hover .pic-2 {
opacity: 1;
}
/* Conteúdo do produto - FAVORITOS */
.favorito-card .produto-content {
padding: 20px;
}
.favorito-card .produto-rating {
margin-bottom: 10px;
}
.favorito-card .produto-rating .stars {
color: #ffc107;
font-size: 14px;
}
.favorito-card .produto-brand {
color: #666;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 8px;
letter-spacing: 0.5px;
}
.favorito-card .produto-info {
margin-bottom: 15px;
}
.favorito-card .produto-link {
text-decoration: none;
color: inherit;
}
.favorito-card .produto-link:hover {
text-decoration: none;
}
.favorito-card .produto-nome {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0;
line-height: 1.4;
transition: color 0.3s ease;
}
.favorito-card .produto-link:hover .produto-nome {
color: #0b77cf;
}
/* Preços - FAVORITOS */
.favorito-card .produto-precos {
margin-bottom: 10px;
}
.favorito-card .preco-anterior {
color: #999;
text-decoration: line-through;
font-size: 14px;
display: block;
margin-bottom: 4px;
}
.favorito-card .preco-atual {
color: #27ae60;
font-size: 20px;
font-weight: 700;
}
/* Parcelamento - FAVORITOS */
.favorito-card .produto-parcelas {
color: #666;
font-size: 13px;
margin-bottom: 20px;
line-height: 1.4;
}
.favorito-card .produto-parcelas strong {
color: #333;
}
/* Variações - FAVORITOS */
.favorito-card .produto-variacoes {
margin-bottom: 20px;
}
.favorito-card .produto-variacoes .form-control {
border-radius: 8px;
border: 1px solid #e0e0e0;
font-size: 14px;
height: 40px;
}
/* Botões de ação - FAVORITOS */
.favorito-card .produto-acoes {
display: flex;
gap: 10px;
flex-direction: column;
}
.favorito-card .btn-comprar,
.favorito-card .btn-indisponivel,
.favorito-card .btn-detalhes {
padding: 12px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
text-decoration: none;
text-align: center;
transition: all 0.3s ease;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.favorito-card .btn-comprar {
background: linear-gradient(135deg, #0b77cf 0%, #1e6eaf 100%);
color: white;
}
.favorito-card .btn-comprar:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(11, 119, 207, 0.4);
}
.favorito-card .btn-comprar:disabled {
background: #ccc;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.favorito-card .btn-indisponivel {
background: #e74c3c;
color: white;
cursor: not-allowed;
}
.favorito-card .btn-detalhes {
background: transparent;
color: #0b77cf;
border: 2px solid #0b77cf;
}
.favorito-card .btn-detalhes:hover {
background: #0b77cf;
color: white;
text-decoration: none;
transform: translateY(-2px);
}
/* Estado vazio */
.favoritos-empty {
text-align: center;
padding: 60px 20px;
}
.empty-state {
max-width: 400px;
margin: 0 auto;
}
.empty-icon {
font-size: 80px;
color: #0b77cf;
margin-bottom: 20px;
opacity: 0.3;
}
.empty-title {
font-size: 24px;
font-weight: 600;
color: #333;
margin-bottom: 15px;
}
.empty-subtitle {
color: #666;
font-size: 16px;
margin-bottom: 30px;
line-height: 1.5;
}
.btn-continuar-comprando {
background: linear-gradient(135deg, #0b77cf 0%, #1e6eaf 100%);
color: white;
padding: 15px 30px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
}
.btn-continuar-comprando:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(11, 119, 207, 0.4);
text-decoration: none;
color: white;
}
/* Estados especiais e animações */
.favorito-card.removendo {
pointer-events: none;
opacity: 0.6;
}
.favorito-card.animate__pulse {
animation: pulse 0.5s ease-in-out;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.02); }
100% { transform: scale(1); }
}
.favorito-card .btn-comprar:disabled,
.favorito-card .btn-comprar.loading {
opacity: 0.7;
cursor: not-allowed;
}
.favorito-card .produto-image.lazy {
opacity: 0;
transition: opacity 0.3s ease;
}
.favorito-card .produto-image.lazy.loaded {
opacity: 1;
}
/* Melhorias no menu flutuante mobile */
@media (max-width: 768px) {
.menu_flutuante_mobile {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border-radius: 12px;
overflow: hidden;
}
.overflow {
backdrop-filter: blur(4px);
background: rgba(0, 0, 0, 0.3);
}
}
/* Responsividade */
@media (max-width: 768px) {
.favoritos-header {
padding: 20px;
}
.favoritos-title {
font-size: 22px;
}
.favoritos-grid {
padding: 20px 15px;
}
.favorito-card {
margin-bottom: 20px;
/* 2 por linha no mobile */
width: calc(50% - 20px);
}
.favorito-card .produto-content {
padding: 15px;
}
.favorito-card .produto-acoes {
gap: 8px;
}
.favorito-card .btn-comprar,
.favorito-card .btn-indisponivel,
.favorito-card .btn-detalhes {
padding: 10px 15px;
font-size: 13px;
}
}
/* ======================== ESTILOS ABRIR CHAMADO ======================== */
.chamado-container {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
/* ======================== ESTILOS CONSULTAR CHAMADOS ======================== */
/* Cabeçalho da tabela de chamados */
.chamados-header-table {
background: #f8fafc;
padding: 15px 20px;
border-bottom: 1px solid #e5e7eb;
border-radius: 8px 8px 0 0;
}
.header-label {
font-weight: 600;
color: #374151;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Container de scroll dos chamados */
.chamados-scroll-container {
max-height: 452px;
overflow-y: auto;
border: 1px solid #e5e7eb;
border-radius: 0 0 8px 8px;
}
/* Lista de chamados */
.chamados-list {
list-style: none;
padding: 0;
margin: 0;
}
.chamado-item {
padding: 15px 20px;
border-bottom: 1px solid #f3f4f6;
transition: all 0.3s ease;
background: #fff;
}
.chamado-item:hover {
background: #f8fafc;
transform: translateX(5px);
}
.chamado-item:last-child {
border-bottom: none;
}
/* Links dos chamados */
.chamado-link {
text-decoration: none;
color: #4f46e5;
transition: all 0.3s ease;
display: inline-block;
}
.chamado-link:hover {
color: #3730a3;
text-decoration: none;
transform: translateX(3px);
}
/* Elementos dos chamados */
.chamado-numero {
font-weight: 600;
color: #4f46e5;
font-size: 14px;
}
.chamado-assunto {
color: #374151;
font-weight: 500;
font-size: 14px;
line-height: 1.4;
}
.chamado-data {
color: #6b7280;
font-size: 13px;
font-weight: 400;
}
.chamado-status {
color: #059669;
font-weight: 600;
font-size: 13px;
}
/* Estado vazio dos chamados */
.chamados-empty {
text-align: center;
padding: 60px 20px;
}
.chamados-empty .empty-state {
max-width: 400px;
margin: 0 auto;
}
.chamados-empty .empty-icon {
font-size: 80px;
color: #0b77cf;
margin-bottom: 20px;
opacity: 0.3;
}
.chamados-empty .empty-title {
font-size: 24px;
font-weight: 600;
color: #333;
margin-bottom: 15px;
}
.chamados-empty .empty-subtitle {
color: #666;
font-size: 16px;
margin-bottom: 30px;
line-height: 1.5;
}
/* Responsividade para consulta de chamados */
@media (max-width: 768px) {
.chamados-header-table {
padding: 12px 15px;
}
.chamado-item {
padding: 12px 15px;
}
.chamado-item:hover {
transform: none;
}
.chamado-link:hover {
transform: none;
}
.chamados-scroll-container {
max-height: 400px;
}
.chamados-empty {
padding: 40px 15px;
}
.chamados-empty .empty-title {
font-size: 20px;
}
.chamados-empty .empty-subtitle {
font-size: 14px;
}
}
/* ======================== ESTILOS RESPONDER CHAMADO ======================== */
/* Container de mensagens */
.mensagens-container {
max-height: 400px;
overflow-y: auto;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #fff;
}
/* Item de mensagem */
.mensagem-item {
padding: 20px;
border-bottom: 1px solid #f3f4f6;
transition: all 0.3s ease;
background: #fff;
}
.mensagem-item:hover {
background: #f8fafc;
}
.mensagem-item:last-child {
border-bottom: none;
}
/* Conteúdo da mensagem */
.mensagem-content {
background: #f8fafc;
padding: 15px;
border-radius: 8px;
border-left: 4px solid #0b77cf;
margin-bottom: 10px;
}
.mensagem-texto {
color: #374151;
font-size: 14px;
line-height: 1.5;
margin: 0;
}
/* Informações da mensagem */
.mensagem-info {
text-align: center;
padding: 10px;
}
.mensagem-autor {
display: inline-block;
padding: 6px 12px;
background: #0b77cf;
color: white;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Diferenciação por autor (Cliente x Loja) */
/* Opção 1: aplicar direto na tag, ex.: Cliente */
.mensagem-autor.autor-cliente { background: #0b77cf; color: #fff; }
.mensagem-autor.autor-loja { background: #16a34a; color: #fff; }
/* Opção 2: usar atributo, ex.: Cliente */
.mensagem-autor[data-autor="Cliente"] { background: #0b77cf; color: #fff; }
.mensagem-autor[data-autor="Loja"] { background: #16a34a; color: #fff; }
/* Ajusta também a borda do balão conforme o autor, se a classe estiver no item */
.mensagem-item.autor-cliente .mensagem-content { border-left-color: #0b77cf; }
.mensagem-item.autor-loja .mensagem-content { border-left-color: #16a34a; }
/* Formulário de resposta */
.resposta-form {
margin-top: 20px;
}
.resposta-form .form-group-modern {
margin-bottom: 20px;
}
.resposta-form .form-textarea {
min-height: 120px;
font-family: inherit;
line-height: 1.4;
}
/* Responsividade para responder chamado */
@media (max-width: 768px) {
.mensagem-item {
padding: 15px;
}
.mensagem-content {
padding: 12px;
}
.mensagem-texto {
font-size: 13px;
}
.mensagem-autor {
font-size: 11px;
padding: 4px 8px;
}
.mensagens-container {
max-height: 300px;
}
.resposta-form .form-textarea {
min-height: 100px;
}
}
.chamado-header {
background: linear-gradient(135deg, #0b77cf 0%, #1e6eaf 100%);
padding: 25px 30px;
text-align: center;
color: white;
}
.chamado-title {
margin: 0 0 8px 0;
font-size: 22px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.chamado-icon {
font-size: 24px;
color: #ffffff;
}
.chamado-subtitle {
margin: 0;
opacity: 0.9;
font-size: 14px;
font-weight: 400;
}
.chamado-form-wrapper {
padding: 24px;
}
/* Seções do formulário */
.form-section {
margin-bottom: 24px;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e9ecef;
}
.form-section .section-title {
margin: 0 0 18px 0;
font-size: 16px;
font-weight: 600;
color: #374151;
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 8px;
border-bottom: 1px solid #0b77cf;
}
.form-section .section-title i {
color: #0b77cf;
font-size: 16px;
}
/* Grupos de formulário modernos */
.form-group-modern {
margin-bottom: 25px;
position: relative;
}
.form-label {
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
color: #374151;
margin-bottom: 6px;
font-size: 13px;
}
.form-label i {
color: #0b77cf;
font-size: 14px;
}
.form-control-modern {
width: 100%;
padding: 12px 45px 12px 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: all 0.3s ease;
background: #fff;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-control-modern:focus {
outline: none;
border-color: #0b77cf;
box-shadow: 0 0 0 2px rgba(11, 119, 207, 0.1);
}
.form-control-modern:invalid {
border-color: #ef4444;
}
.form-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
pointer-events: none;
margin-top: 12px;
}
/* Textarea específico */
.form-textarea {
padding: 12px !important;
resize: vertical;
min-height: 100px;
font-family: inherit;
line-height: 1.4;
}
.char-counter {
text-align: right;
margin-top: 5px;
font-size: 12px;
color: #6b7280;
}
/* Seção de informações */
.info-section {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border: 1px solid #bae6fd;
}
.info-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: #fff;
border-radius: 6px;
margin-bottom: 12px;
border-left: 3px solid #0b77cf;
}
.info-card:last-child {
margin-bottom: 0;
}
.info-icon {
font-size: 18px;
color: #0b77cf;
flex-shrink: 0;
}
.info-content h6 {
margin: 0 0 4px 0;
font-weight: 600;
color: #374151;
font-size: 13px;
}
.info-content p {
margin: 0;
color: #6b7280;
font-size: 12px;
line-height: 1.3;
}
.info-content strong {
color: #0b77cf;
}
/* Ações do formulário */
.form-actions {
text-align: center;
padding: 24px 0 0 0;
border-top: 1px solid #e5e7eb;
}
.btn-enviar-chamado {
background: linear-gradient(135deg, #0b77cf 0%, #1e6eaf 100%);
color: white;
border: none;
padding: 14px 32px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 180px;
justify-content: center;
}
.btn-enviar-chamado:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(11, 119, 207, 0.4);
}
.btn-enviar-chamado:active {
transform: translateY(0);
}
.form-help {
margin-top: 16px;
padding: 12px;
background: #f8f9fa;
border-radius: 4px;
font-size: 12px;
color: #6b7280;
line-height: 1.4;
display: flex;
align-items: flex-start;
gap: 6px;
}
.form-help i {
color: #0b77cf;
margin-top: 2px;
flex-shrink: 0;
}
.form-help a {
color: #0b77cf;
text-decoration: none;
font-weight: 600;
}
.form-help a:hover {
text-decoration: underline;
}
/* Responsividade para chamados */
@media (max-width: 768px) {
.chamado-header {
padding: 20px;
}
.chamado-title {
font-size: 22px;
flex-direction: column;
gap: 8px;
}
.chamado-form-wrapper {
padding: 20px 15px;
}
.form-section {
padding: 20px 15px;
margin-bottom: 20px;
}
.form-control-modern {
padding: 12px 40px 12px 12px;
font-size: 16px; /* Evita zoom no iOS */
}
.btn-enviar-chamado {
width: 100%;
padding: 16px;
font-size: 16px;
}
.info-card {
flex-direction: column;
text-align: center;
gap: 10px;
}
.form-help {
text-align: left;
flex-direction: column;
gap: 5px;
}
}
.adicionarPersonalizacao {
display: flex;
justify-content: center;
margin: 11px 0px;
border-radius: 10px;
padding: 4px;
color: black;
background: white;
border: 1px solid;
font-size: 15px;
font-weight: bold;
cursor: pointer;
width: 50%;
text-align: center;
}
/* ======================== ESTILOS CAMPOS DE SENHA ======================== */
/* Wrapper do campo de senha */
.password-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.password-input-wrapper .form-control-modern {
padding-right: 50px;
}
/* Toggle de visibilidade da senha */
.password-toggle {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #9ca3af;
transition: color 0.3s ease;
z-index: 10;
}
.password-toggle:hover {
color: #0b77cf;
}
.password-toggle i {
font-size: 16px;
}
/* Texto de ajuda */
.form-help-text {
margin-top: 5px;
font-size: 12px;
color: #6b7280;
font-style: italic;
}
/* Responsividade para campos de senha */
@media (max-width: 768px) {
.password-toggle {
right: 12px;
}
.password-toggle i {
font-size: 14px;
}
.form-help-text {
font-size: 11px;
}
}
/* ======================== ESTILOS ENDEREÇOS ======================== */
/* Container principal */
.enderecos-grid {
margin-bottom: 30px;
}
/* Ajuste do grid Bootstrap */
.enderecos-grid .row {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
align-items: stretch;
}
.enderecos-grid .col-md-6 {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 25px;
display: flex;
flex: 0 0 50%;
max-width: 50%;
}
/* Cards de endereço - NOVO DESIGN */
.endereco-card {
background: #ffffff;
border: 1px solid #e1e5e9;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
transition: all 0.3s ease;
width: 100%;
display: flex;
flex-direction: column;
min-height: 320px;
position: relative;
}
.endereco-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
/* Header do card */
.endereco-header {
background: #f8fafc;
padding: 18px 22px;
border-bottom: 1px solid #e2e8f0;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.endereco-title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: #374151;
}
.endereco-title i {
color: #0b77cf;
font-size: 16px;
}
.endereco-actions {
display: flex;
gap: 8px;
}
.btn-action {
background: none;
border: 1px solid #d1d5db;
border-radius: 6px;
padding: 6px 12px;
font-size: 12px;
color: #6b7280;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 4px;
}
.btn-action:hover {
transform: translateY(-1px);
}
.btn-edit:hover {
background: #dbeafe;
border-color: #3b82f6;
color: #1e40af;
}
.btn-remove:hover {
background: #fee2e2;
border-color: #ef4444;
color: #dc2626;
}
.btn-action i {
font-size: 12px;
}
/* Conteúdo do card */
.endereco-content {
padding: 22px;
flex: 1;
display: flex;
flex-direction: column;
}
.endereco-info {
display: flex;
flex-direction: column;
gap: 16px;
flex: 1;
}
.info-item {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14px;
line-height: 1.5;
padding: 8px 0;
}
.info-item i {
color: #0b77cf;
margin-top: 2px;
flex-shrink: 0;
width: 16px;
}
.info-label {
font-weight: 600;
color: #374151;
min-width: 80px;
}
.info-value {
color: #6b7280;
flex: 1;
}
/* Card de adicionar endereço */
.add-endereco-card {
border: 2px dashed #cbd5e1;
background: #f8fafc;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
min-height: 320px;
border-radius: 10px;
transition: all 0.3s ease;
width: 100%;
}
.add-endereco-card:hover {
border-color: #0b77cf;
background: #f0f9ff;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.add-endereco-content {
text-align: center;
padding: 20px;
}
.add-icon {
font-size: 48px;
color: #0b77cf;
margin-bottom: 16px;
display: block;
}
.add-endereco-content h4 {
color: #374151;
font-weight: 600;
margin-bottom: 8px;
}
.add-endereco-content p {
color: #6b7280;
font-size: 14px;
margin: 0;
}
/* Modal de confirmação */
.confirmation-content {
text-align: center;
padding: 20px 0;
}
.confirmation-icon {
font-size: 48px;
color: #f59e0b;
margin-bottom: 16px;
display: block;
}
.confirmation-content h6 {
color: #374151;
font-weight: 600;
margin-bottom: 8px;
}
.confirmation-content p {
color: #6b7280;
font-size: 14px;
margin-bottom: 20px;
}
.endereco-preview {
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 16px;
text-align: left;
font-size: 14px;
line-height: 1.5;
color: #374151;
}
.endereco-preview strong {
color: #0b77cf;
display: block;
margin-bottom: 4px;
}
/* Forçar mesma altura para todos os cards */
.endereco-card,
.add-endereco-card {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
}
/* Responsividade para endereços */
@media (max-width: 768px) {
.endereco-header {
flex-direction: column;
gap: 12px;
align-items: flex-start;
padding: 16px 18px;
}
.endereco-actions {
width: 100%;
justify-content: space-between;
}
.btn-action {
flex: 1;
justify-content: center;
}
.endereco-content {
padding: 18px;
}
.info-item {
flex-direction: column;
gap: 4px;
padding: 6px 0;
}
.info-label {
min-width: auto;
}
.endereco-card {
min-height: 280px;
}
.add-endereco-card {
min-height: 280px;
}
/* Garante que os cards ocupem toda a largura em telas pequenas */
.enderecos-grid .col-md-6 {
flex: 0 0 100%;
max-width: 100%;
display: flex;
}
.add-icon {
font-size: 40px;
}
.confirmation-content {
padding: 16px 0;
}
.confirmation-icon {
font-size: 36px;
}
}
/* ======================== ESTILOS DO CABEÇALHO DO USUÁRIO DISCRETO ======================== */
.user-profile-discrete {
display: flex;
flex-direction: column;
padding: 18px 20px;
margin: 0 0 25px 0;
border-bottom: 1px solid #e5e7eb;
background: #fafbfc;
border-radius: 8px;
position: relative;
transition: all 0.3s ease;
}
.user-profile-discrete::after {
content: '';
position: absolute;
bottom: 0;
left: 20px;
right: 20px;
height: 1px;
background: linear-gradient(90deg, #6b7280, transparent);
border-radius: 1px;
}
.user-info-discrete {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.user-icon-discrete {
font-size: 28px;
color: #6b7280;
margin-right: 14px;
transition: all 0.3s ease;
opacity: 0.8;
}
.user-profile-discrete:hover .user-icon-discrete {
color: #374151;
opacity: 1;
}
.user-details {
flex: 1;
min-width: 0;
}
.user-name-discrete {
color: #374151;
font-size: 13px;
font-weight: 500;
margin: 0 0 3px 0;
line-height: 1.3;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-role-discrete {
color: #9ca3af;
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.8px;
display: block;
}
.logout-btn-discrete {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 12px;
background: #f9fafb;
color: #6b7280;
text-decoration: none;
border-radius: 6px;
border: 1px solid #d1d5db;
transition: all 0.3s ease;
position: relative;
font-size: 11px;
font-weight: 500;
align-self: flex-start;
}
.logout-btn-discrete:hover {
background: #dc2626;
border-color: #b91c1c;
color: #ffffff;
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(220, 38, 38, 0.3);
}
.logout-btn-discrete:active {
transform: translateY(0);
box-shadow: 0 1px 3px rgba(239, 68, 68, 0.15);
}
.logout-btn-discrete i {
font-size: 11px;
transition: transform 0.3s ease;
}
.logout-btn-discrete span {
font-size: 11px;
font-weight: 500;
transition: all 0.3s ease;
}
.logout-btn-discrete:hover i {
transform: scale(1.1);
}
/* Responsividade para o cabeçalho discreto */
@media (max-width: 768px) {
.user-profile-discrete {
padding: 15px 15px;
margin-bottom: 20px;
}
.user-info-discrete {
margin-bottom: 10px;
}
.user-icon-discrete {
font-size: 24px;
margin-right: 12px;
}
.user-name-discrete {
font-size: 12px;
}
.user-role-discrete {
font-size: 9px;
}
.logout-btn-discrete {
padding: 6px 10px;
font-size: 10px;
}
.logout-btn-discrete i {
font-size: 10px;
}
.logout-btn-discrete span {
font-size: 10px;
}
}
/* ======================== FIM DOS ESTILOS DO CABEÇALHO DO USUÁRIO ======================== */
/* ======================== MELHORIAS NO GRID DE FAVORITOS ======================== */
.favoritos-grid {
padding: 20px 0;
}
.favoritos-grid .row {
margin: 0 -10px;
}
.favoritos-grid .col-lg-4,
.favoritos-grid .col-md-6,
.favoritos-grid .col-sm-6,
.favoritos-grid .col-xs-12 {
padding: 0 10px;
margin-bottom: 20px;
}
/* Cards dos produtos favoritos */
.favoritos-grid .produto {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border: 1px solid #f0f0f0;
height: 100%;
display: flex;
flex-direction: column;
margin: 0;
}
.favoritos-grid .produto:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.favoritos-grid .produto.indisponivel {
opacity: 0.7;
background: #f8f9fa;
}
/* Botão remover favorito */
.favoritos-grid .remove-favorito-btn {
position: absolute;
top: 15px;
right: 15px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
color: #ff3535;
font-size: 18px;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.favoritos-grid .remove-favorito-btn:hover {
background: #ff3535;
color: white;
transform: scale(1.1);
}
/* Imagem do produto */
.favoritos-grid .img-produto {
height: 170px;
position: relative;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
border-radius: 8px 8px 0 0;
}
.favoritos-grid .img-produto img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: all 0.3s ease;
}
.favoritos-grid .img-produto .pic-1 {
opacity: 1;
transition: all 0.7s ease;
}
.favoritos-grid .img-produto .pic-2 {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
transition: all 0.7s ease;
}
.favoritos-grid .produto:hover .img-produto .pic-1 {
opacity: 0;
}
.favoritos-grid .produto:hover .img-produto .pic-2 {
opacity: 1;
}
/* Conteúdo do produto */
.favoritos-grid .conteudo-produto {
padding: 12px;
flex: 1;
display: flex;
flex-direction: column;
}
/* Nome do produto */
.favoritos-grid .nome-prod-desktop {
font-size: 14px;
color: #404040;
margin: 6px 0;
height: auto;
min-height: 32px;
text-align: center;
line-height: 1.4;
font-weight: 500;
}
/* Preços */
.favoritos-grid .preco-prod {
display: flex;
flex-direction: column;
align-items: center;
margin: 6px 0;
}
.favoritos-grid .preco-de {
color: #8c8c8c;
text-decoration: line-through;
text-align: center;
font-size: 12px;
}
.favoritos-grid .preco-por {
color: #0a0909d1;
font-size: 18px;
font-weight: bold;
text-align: center;
line-height: 1.2;
}
.favoritos-grid .preco-por b {
font-size: 14px;
color: #404040;
}
/* Parcelas */
.favoritos-grid .parcelas {
margin: 6px 0;
}
.favoritos-grid .sem-juros {
margin: 0;
color: #27ae60;
margin-bottom: 5px;
line-height: 1.3;
text-align: center;
font-size: 12px;
}
.favoritos-grid .parcelas {
font-size: 12px;
text-align: center;
}
/* Área dos botões */
.favoritos-grid .botoes-area {
margin-top: auto;
padding-top: 10px;
}
.favoritos-grid .btn-carrinho,
.favoritos-grid .btn-buy {
width: 100%;
margin-bottom: 8px;
font-weight: 500;
padding: 8px 12px;
border-radius: 6px;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.favoritos-grid .btn-carrinho {
background-color: #f8f9fa;
border-color: #ddd;
color: #333;
}
.favoritos-grid .btn-carrinho:hover {
background-color: #e9ecef;
border-color: #adb5bd;
}
.favoritos-grid .btn-buy {
/* sem cor fixa para permitir cor dinâmica via config */
font-weight: bold;
}
.favoritos-grid .btn-buy:hover {
/* não definir cor fixa no hover para manter a dinâmica */
filter: brightness(0.92);
}
.favoritos-grid .btn-buy:disabled {
background-color: #ccc;
border-color: #ccc;
cursor: not-allowed;
}
.favoritos-grid .btn-indisponivel {
background-color: #fff;
padding: 10px 25px;
border-radius: 25px;
text-transform: uppercase;
color: #333;
margin: 15px 0;
font-weight: 600;
border: 1px solid #ddd;
width: 100%;
cursor: not-allowed;
}
/* Link ver detalhes */
.favoritos-grid .shipping-free {
display: block;
text-align: center;
color: #2196f3;
text-decoration: none;
font-size: 13px;
margin-top: 8px;
transition: color 0.3s ease;
}
.favoritos-grid .shipping-free:hover {
color: #1976d2;
text-decoration: none;
}
/* Responsividade */
@media (max-width: 1200px) {
.favoritos-grid .col-lg-4 {
width: 50%;
}
}
@media (max-width: 768px) {
.favoritos-grid {
padding: 15px 0;
}
.favoritos-grid .row {
margin: 0 -5px;
}
.favoritos-grid .col-lg-4,
.favoritos-grid .col-md-6,
.favoritos-grid .col-sm-6,
.favoritos-grid .col-xs-12 {
padding: 0 5px;
margin-bottom: 15px;
}
.favoritos-grid .produto {
margin-bottom: 0;
}
.favoritos-grid .img-produto {
height: 130px;
margin-bottom: 10px;
}
.favoritos-grid .conteudo-produto {
padding: 8px;
}
.favoritos-grid .nome-prod-desktop {
font-size: 12px;
min-height: 28px;
margin: 6px 0;
}
/* Centralizar estrelas de avaliação dentro do card de favoritos */
.favoritos-grid .rating {
display: flex;
justify-content: center;
align-items: center;
gap: 2px;
margin: 0 auto 6px auto;
text-align: center;
}
.favoritos-grid .preco-por {
font-size: 16px;
}
.favoritos-grid .btn-carrinho,
.favoritos-grid .btn-buy {
padding: 8px 12px;
font-size: 12px;
}
}
/* Centralização do estado vazio da lista de favoritos */
.favoritos-grid.empty > .row{ display: none !important; }
.favoritos-grid.empty{
display: flex !important;
flex-wrap: wrap;
align-items: center !important;
justify-content: center !important;
width: 100%;
min-height: 60vh;
padding: 30px !important;
}
.favoritos-grid.empty .favoritos-empty{
display: block;
width: 100%;
max-width: none;
margin: 0 auto;
}
.favoritos-grid.empty .favoritos-empty .empty-state{
max-width: 420px;
margin: 0 auto;
}
@media (max-width: 768px){
.favoritos-grid.empty{ min-height: 260px; padding: 20px 0; }
}
/* Fallback geral: centralizar bloco vazio mesmo sem classe .empty no contêiner */
.favoritos-empty{
width: 100%;
display: flex !important;
align-items: center;
justify-content: center;
flex: 0 0 100% !important;
}
.favoritos-empty .empty-state{
max-width: 420px;
margin: 0 auto;
text-align: center;
}
/* Alinhamento com o cabeçalho do card e maior especificidade */
.favoritos-container .favoritos-grid.empty > .row{ display: none !important; }
.favoritos-container .favoritos-grid.empty{
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px !important; /* igual ao padding horizontal do header */
}
.favoritos-container .favoritos-grid.empty .favoritos-empty{
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
}
.favoritos-container .favoritos-grid.empty .favoritos-empty .empty-state{
margin-left: auto;
margin-right: auto;
}
@media (max-width: 480px) {
.favoritos-grid .col-xs-12 {
width: 100%;
}
.favoritos-grid .img-produto {
height: 140px;
}
}
/* Correções: impedir sobreposição de ícone com placeholder nos formulários de autenticação/cadastro */
.auth-right .has-icon .form-control,
.ambiente-cadastro .has-icon .form-control{
padding-left: 44px !important;
}
.auth-right .input-affix .form-control,
.ambiente-cadastro .input-affix .form-control{
padding-right: 48px !important;
}
/* Ajuste para selects com ícone à esquerda */
.auth-right .has-icon select.form-control,
.ambiente-cadastro .has-icon select.form-control{
padding-left: 44px !important;
}
/* Correção: reduzir padding-right para inputs comuns com ícone,
evitando ocultar cursor/texto (ex.: Número, Estado) */
.auth-right .input-affix .form-control,
.ambiente-cadastro .input-affix .form-control{
padding-right: 12px !important;
}
/* Manter espaço à direita apenas nos campos de senha que têm botão de olho */
.auth-right .password-group .form-control,
.ambiente-cadastro .password-group .form-control{
padding-right: 48px !important;
}
/* Ajuste adicional para selects com ícone à esquerda (evitar corte do texto) */
.auth-right .has-icon select.form-control,
.ambiente-cadastro .has-icon select.form-control{
padding-right: 12px !important;
}
/* Hotfix: inputs e select específicos do cadastro -- remover padding à direita */
.ambiente-cadastro #numero.form-control,
.ambiente-cadastro #estado.form-control{
padding-right: 8px !important;
}
/* Garantir que o conteúdo sempre apareça totalmente dentro do input/select */
.ambiente-cadastro #numero.form-control,
.ambiente-cadastro #estado.form-control{
box-sizing: border-box !important;
overflow: visible !important;
text-indent: 0 !important;
}
/* Ajustar espaço à esquerda (ícone) para não comer área de texto */
.ambiente-cadastro #numero.form-control,
.ambiente-cadastro #estado.form-control{
padding-left: 44px !important;
}
/* Melhor visibilidade do conteúdo */
.ambiente-cadastro #numero.form-control,
.ambiente-cadastro #estado.form-control{
color: #111827 !important;
font-size: 14px !important;
}
/* Reserva extra para a seta do select (Estado) */
.ambiente-cadastro #estado.form-control{
padding-right: 28px !important;
}
/* Aumentar largura visível dos campos Número e Estado (desktop) */
@media (min-width: 993px){
.ambiente-cadastro #numero.form-control,
.ambiente-cadastro #estado.form-control{
min-width: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
}