.skeleton-loader {
	background: #fff;
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 0 5px #ddd;
	animation: pulse 1.5s infinite ease-in-out;
}

.skeleton {
	background: #eee;
	border-radius: 6px;
	margin-bottom: 10px;
}

.skeleton-etiqueta {
	width: 80%;
	height: 20px;
	background-color: #eee;
}

.skeleton-imagem {
	width: 100%;
	height: 150px;
	background-color: #e0e0e0;
}

.skeleton-nome {
	height: 20px;
	width: 80%;
}

.skeleton-preco {
	height: 18px;
	width: 60%;
}

.skeleton-botao {
	height: 25px;
	width: 50%;
	margin: auto;
}

@keyframes pulse {
0% {
	background-color: #f0f0f0;
}
50% {
	background-color: #e0e0e0;
}
100% {
	background-color: #f0f0f0;
}
}
.skeleton {
	background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 37%, #f0f0f0 63%);
	background-size: 400% 100%;
	animation: pulse 1.2s ease-in-out infinite;
	border-radius: 4px;
}

.skeleton-img-circle {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	margin: 0 auto;
}

.skeleton-text {
	height: 14px;
	background-color: #ddd;
	border-radius: 4px;
}

.skeleton-titulo {
	border-radius: 6px !important;
	background-color: #978888 !important;
}

.modal.box::-webkit-scrollbar {
  display: none;               
}

@keyframes shimmer {
0% {
	background-position: -400px 0;
}
100% {
	background-position: 400px 0;
}
}
.skeleton-produto {
	background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
	background-size: 400% 100%;
	animation: skeleton-produto-loading 1.2s ease-in-out infinite;
	border-radius: 8px;
}

@keyframes skeleton-produto-loading {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

.skeleton-produto-loader {
	padding: 1rem;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.skeleton-produto.skeleton-economia { width: 80%; height: 24px; margin: 0 auto; }
.skeleton-produto.skeleton-imagem   { width: 100%; height: 150px; }
.skeleton-produto.skeleton-aviso    { display: block; height: 10px; width: 60%; margin: 6px auto; }
.skeleton-produto.skeleton-nome     { height: 18px; width: 80%; margin: 0 auto; }
.skeleton-produto.skeleton-preco    { height: 20px; width: 60%; margin: 0 auto; }
.skeleton-produto.skeleton-link     { height: 14px; width: 40%; margin: 8px auto 0; }
.skeleton {
	background-color: #e2e2e2;
	border-radius: 4px;
	animation: pulse 1.5s infinite;
}

.skeleton-titulo-modal {
	height: 28px;
	width: 180px;
}

.skeleton-economia { height: 20px; width: 100px; }
.skeleton-imagem { height: 120px; width: 100%; }
.skeleton-nome { height: 18px; width: 90%; }
.skeleton-preco { height: 16px; width: 70%; }
.skeleton-aviso { height: 12px; width: 100px; display: block; }
.skeleton-link { height: 20px; width: 60%; }

/* Skeleton base */
.skel {
  position: relative;
  overflow: hidden;
  background: #e6e6e6;
  border-radius: 10px;
}
.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: pulse 1.2s infinite;
}

.skel-jornal{ border:1px solid #e3e3e3; border-radius:12px; padding:10px; margin:10px 0; background:#fff; }
.skel-img{ height:180px; border-radius:10px; }
.skel-title{ height:18px; width:60%; margin:10px 0 6px; }
.skel-line{ height:12px; width:40%; margin:6px 0; }
.skel-line.w80{ width:80%; }
.dark .skel{ background:#3a3a3a; } .dark .skel-jornal{ background:#2a2a2a; border-color:#3a3a3a; }

.bloco-loja-skeleton {
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 8px;
  background: #f1f1f1;
  margin-bottom: 25px;
  position: relative;
  overflow: hidden;
}

.shimmer {
  background: linear-gradient(100deg, #eeeeee 30%, #dddddd 50%, #eeeeee 70%);
  background-size: 200% 100%;
  animation: pulse 1.2s infinite linear;
}

.skeleton-filter {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.skeleton-filter-box {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(90deg, #eee, #f5f5f5, #eee);
  background-size: 200% 100%;
  animation: pulse 1.5s infinite;
  margin-right: 10px;
}

.skeleton-filter-line {
  flex: 1;
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, #eee, #f5f5f5, #eee);
  background-size: 200% 100%;
  animation: pulse 1.5s infinite;
}