input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

@keyframes fade-in {
  from { background-color: rgba(80, 0, 0, 0); }
  to   { background-color: rgba(80, 0, 0, 0); }
}

@keyframes fade-out {
  from { background-color: rgba(0, 0, 0, 0.8); }
  to   { background-color: rgba(0, 0, 0, 0); }
}

@keyframes slide-in {
  from { transform: translateX(500px); }
  to   { transform: translateX(0px); }
}

@keyframes slide-out {
  from { transform: translateX(0px); }
  to   { transform: translateX(500px); }
}

body.cart-open {
  overflow: hidden;
  padding-right: var(--scrollbar-width, 0px);
}

#cart-drawer[data-state="open"]      { animation: fade-in 0.4s forwards; }
#cart-drawer[data-state="closed"]    { animation: fade-out 0.4s forwards; }
#cart-drawer[data-state="open"] > div   { animation: slide-in 0.4s forwards; }
#cart-drawer[data-state="closed"] > div { animation: slide-out 0.4s forwards; }

.dialog[data-state="open"]      { animation: fade-in 0.4s forwards; }
.dialog[data-state="closed"]    { animation: fade-out 0.4s forwards; }
.dialog[data-state="open"] > div   { animation: dialog-in 0.2s forwards; }
.dialog[data-state="closed"] > div { animation: dialog-out 0.2s forwards; }

@keyframes dialog-in {
  from { opacity: 0; scale: 50%; }
  to   { opacity: 1; scale: 100%; }
}
@keyframes dialog-out {
  from { opacity: 1; scale: 100%; }
  to   { opacity: 0; scale: 50%; }
}

.reveal-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  transition-delay: var(--delay, 0s);
}
.reveal-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.centralcart-content iframe {
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
  width: 100%;
  height: auto;
}

/* =============================================
   RED GRADIENT GRID BACKGROUND
   ============================================= */
.grid-background {
  background-image:
    linear-gradient(to right, rgba(200,30,30,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(200,30,30,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, rgba(180,20,20,0.9) 0%, transparent 100%);
}

.custom-bg-mask {
  mask-image: linear-gradient(rgb(12, 3, 3), rgba(60, 5, 5, 0.3), transparent);
}

/* =============================================
   SCROLLBAR
   ============================================= */
.custom-scrollbar::-webkit-scrollbar       { width: 3px; height: 3px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #dc2626, #7f1d1d);
  border-radius: 0.25rem;
}

/* =============================================
   TOP DONATORS SHINE
   ============================================= */
.top-donators-pill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 70%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(220, 30, 30, 0.6), transparent);
  pointer-events: none;
  transition: left 0.5s ease-in;
}
.top-donators-pill:hover::after {
  left: 120%;
  transition: left 0.6s ease-out;
}

/* =============================================
   DETAIL DASH
   ============================================= */
.detail-dash {
  background-image: linear-gradient(to right, rgba(180,20,20,0.25) 50%, transparent 0%);
  background-position: center bottom;
  background-size: 16px;
  background-repeat: repeat-x;
  width: 100%;
  height: 1px;
}

/* =============================================
   CATEGORY DROPDOWNS
   ============================================= */
.cat-dropdown {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top;
}
.cat-dropdown:not(.hidden) { animation: slideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1); }

@keyframes slideDown {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: scaleY(1); }
}

#mobile-categories-dropdown:not(.hidden) { animation: slideInMobile 0.2s cubic-bezier(0.4, 0, 0.2, 1); }

@keyframes slideInMobile {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mobile-subcategories:not(.hidden) { animation: slideInSub 0.2s cubic-bezier(0.4, 0, 0.2, 1); }

@keyframes slideInSub {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes loading {
  0%  { left: -50%; }
  to  { left: 100%; }
}

/* =============================================
   RED GRADIENT THEME — GLOBAL OVERRIDES
   ============================================= */

/* Force dark red background everywhere */
html, body {
  background: #0a0202 !important;
}

body {
  background: linear-gradient(160deg, #180303 0%, #0c0101 40%, #050000 100%) !important;
  min-height: 100vh;
}

/* Navbar */
header {
  background: rgba(14, 3, 3, 0.85) !important;
  border-bottom: 1px solid rgba(180, 20, 20, 0.2) !important;
  box-shadow: 0 1px 40px rgba(140, 5, 5, 0.15);
}

/* Footer */
footer {
  background: linear-gradient(to top, rgba(8, 1, 1, 0.98), rgba(14, 3, 3, 0.9)) !important;
  border-top: 1px solid rgba(160, 15, 15, 0.2) !important;
}

/* Cards de produto */
.package {
  background: linear-gradient(145deg, rgba(35, 6, 6, 0.7), rgba(18, 2, 2, 0.5)) !important;
  border: 1px solid rgba(160, 20, 20, 0.2) !important;
  box-shadow: 0 4px 20px rgba(100, 0, 0, 0.15);
  transition: all 0.2s ease;
}
.package:hover {
  border-color: #dc2626 !important;
  box-shadow: 0 8px 32px rgba(200, 20, 20, 0.3) !important;
}

/* Botão primário */
.btn-primary {
  background: linear-gradient(135deg, #dc2626, #991b1b) !important;
  box-shadow: 0 0 18px rgba(200, 20, 20, 0.3);
  border: none !important;
  color: #fff !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #b91c1c, #7f1d1d) !important;
  box-shadow: 0 0 28px rgba(220, 30, 30, 0.5) !important;
}

/* Inputs */
input, select {
  background: rgba(25, 4, 4, 0.8) !important;
  border-color: rgba(160, 20, 20, 0.25) !important;
  color: #fde8e8 !important;
}
input:focus-visible, select:focus-visible {
  outline: none;
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.3) !important;
}

/* Barra de anúncio */
#top-announce {
  background: linear-gradient(90deg, #7f1d1d, #dc2626, #7f1d1d) !important;
}

/* Top donators pill */
.top-donators-pill {
  background: linear-gradient(90deg, rgba(60, 5, 5, 0.5), rgba(40, 3, 3, 0.5)) !important;
  border: 1px solid rgba(180, 20, 20, 0.25) !important;
}

/* Search dropdowns */
#search-result, #search-result-mobile {
  background: linear-gradient(135deg, #150202, #0d0101) !important;
  border: 1px solid rgba(160, 20, 20, 0.2) !important;
}

/* Cart drawer */
#cart-drawer > div {
  background: linear-gradient(180deg, #160303, #0a0101) !important;
  border-left: 1px solid rgba(160, 20, 20, 0.2) !important;
}

/* Dialog */
.dialog > div {
  background: linear-gradient(145deg, #1a0303, #0d0101) !important;
  border: 1px solid rgba(160, 20, 20, 0.2) !important;
}

/* Dropdowns genéricos */
[class*="dropdown"], [id*="dropdown"] {
  background: linear-gradient(135deg, #160303, #0d0101) !important;
  border-color: rgba(160, 20, 20, 0.2) !important;
}

/* Bordas genéricas */
.border, [class*="border-"]:not([class*="border-0"]) {
  --tw-border-opacity: 1;
}

/* bg-background override */
.bg-background {
  background-color: #0a0202 !important;
}

/* bg-muted override */
.bg-muted {
  background-color: rgba(30, 4, 4, 0.4) !important;
}

/* bg-secondary override */
.bg-secondary {
  background: rgba(127, 29, 29, 0.3) !important;
}

/* Hover bg-secondary */
.hover\:bg-secondary\/80:hover {
  background: rgba(127, 29, 29, 0.5) !important;
}

/* Ring secondary */
.ring-secondary {
  --tw-ring-color: rgba(180, 20, 20, 0.5) !important;
}