/* Backstage PRO — estilos compartilhados da Loja Online (mesma identidade do site principal) */
* { box-sizing: border-box; }
html, body { background: #0a0a0a; }

.gradient-text {
  background: linear-gradient(135deg, #9333ea 0%, #ec4899 50%, #d946ef 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 300% 300%;
  animation: gradient-shift 8s ease infinite;
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.neon-border {
  border: 1px solid transparent;
  background: linear-gradient(#1a1a1a, #1a1a1a) padding-box,
              linear-gradient(135deg, #9333ea, #ec4899, #d946ef) border-box;
  transition: all 0.3s ease;
}
.neon-border:hover {
  box-shadow: 0 0 30px rgba(147, 51, 234, 0.5), inset 0 0 20px rgba(236, 72, 153, 0.1);
}

.btn-primary {
  background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%);
  transition: all 0.3s ease;
}
.btn-primary:hover { transform: scale(1.03); box-shadow: 0 10px 30px rgba(147, 51, 234, 0.5); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.input-loja {
  background: #141414;
  border: 1px solid #2a2a2a;
  color: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  width: 100%;
  font-family: 'Inter', sans-serif;
}
.input-loja:focus { outline: none; border-color: #ec4899; box-shadow: 0 0 0 3px rgba(236,72,153,0.15); }

.badge-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge-pago { background: rgba(34,197,94,0.15); color: #4ade80; }
.badge-pendente { background: rgba(234,179,8,0.15); color: #facc15; }
.badge-parcial { background: rgba(59,130,246,0.15); color: #60a5fa; }

.cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ec4899;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-pill {
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 6px 0;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
}
.size-pill.selected { border-color: #ec4899; background: rgba(236,72,153,0.12); color: #ec4899; }