@import url('https://fonts.googleapis.com/css2?family=Anek+Latin:wght@100..800&family=Outfit:wght@100..900&display=swap');

:root {
  --package-card: 3;
  --red-primary: #DC2626;
  --red-dark: #991B1B;
  --red-light: #EF4444;
  --red-glow: rgba(220, 38, 38, 0.35);
  --red-subtle: rgba(220, 38, 38, 0.08);
  --bg-dark: #0A0A0A;
  --bg-card: #111111;
  --bg-elevated: #181818;
  --bg-surface: #1E1E1E;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  border-radius: 3px;
  background: rgba(20, 20, 20, 1);
}

::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: linear-gradient(180deg, var(--red-light) 0%, var(--red-dark) 100%);
}

@media (min-width: 1536px) {
  .packages-list {
    gap: 1.5rem !important;
    padding: 2rem !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@keyframes showcard {
  0% {
    transform: scale(0.85) translateY(20px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes subtleGlow {
  0%, 100% {
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.05), 0 1px 3px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.12), 0 1px 3px rgba(0, 0, 0, 0.4);
  }
}

.package {
  width: 100% !important;
  border-radius: 0.75rem !important;
  padding: 1rem 1rem 1.2rem !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: linear-gradient(168deg, #151515 0%, #0D0D0D 100%);
  border: 1px solid rgba(220, 38, 38, 0.08) !important;
  backdrop-filter: blur(8px) !important;
  margin: 0 !important;
  animation: showcard 0.4s cubic-bezier(0.175, 0.885, 0.62, 1.275) forwards !important;
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.04), 0 2px 8px rgba(0, 0, 0, 0.5);
}

.package:hover {
  border-color: rgba(220, 38, 38, 0.25) !important;
  box-shadow: 0 0 25px rgba(220, 38, 38, 0.12), 0 8px 32px rgba(0, 0, 0, 0.5) !important;
  transform: translateY(-4px) !important;
}

/* ===== BOTÕES ===== */
.btn-info, .btn-success {
  font-family: 'Outfit', sans-serif !important;
  border-radius: 6px !important;
  padding: .6rem 1rem !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  font-size: 0.9rem !important;
  letter-spacing: 0.02em;
}

.btn-info:hover, .btn-success:hover {
  transform: translateY(-2px);
}

.btn-success {
  position: relative;
  min-width: 11rem !important;
  color: white;
  font-weight: 700 !important;
  margin-left: .6rem;
  background: linear-gradient(135deg, var(--red-light) 0%, var(--red-dark) 100%) !important;
  box-shadow: 0 2px 12px rgba(220, 38, 38, 0.3);
  border: none !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-success:hover {
  box-shadow: 0 4px 20px rgba(220, 38, 38, 0.45) !important;
  filter: brightness(1.1);
}

.btn-info {
  border: 1.5px solid rgba(220, 38, 38, 0.5) !important;
  background: rgba(220, 38, 38, 0.06) !important;
  color: var(--red-light) !important;
}

.btn-info:hover {
  background: rgba(220, 38, 38, 0.12) !important;
  border-color: var(--red-light) !important;
  box-shadow: 0 0 15px rgba(220, 38, 38, 0.15);
}

#coupon-button, .checkout-wrapper .btn-primary {
  background: linear-gradient(135deg, var(--red-light) 0%, var(--red-dark) 100%) !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(220, 38, 38, 0.25);
  transition: all 0.2s ease;
}

#coupon-button:hover, .checkout-wrapper .btn-primary:hover {
  box-shadow: 0 4px 20px rgba(220, 38, 38, 0.4) !important;
}

/* ===== IMAGEM DO PRODUTO ===== */
.aspect-square {
  aspect-ratio: none !important;
  height: 15.5rem !important;
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: 0.5rem;
  overflow: hidden;
}

.aspect-square img {
  user-select: none;
  pointer-events: none;
}

.aspect-square:hover {
  transform: scale(1.06);
}

/* ===== TIPOGRAFIA ===== */
.package h1 {
  margin-top: .25rem !important;
  font-family: 'Anek Latin', sans-serif !important;
  font-weight: 600 !important;
  text-align: center !important;
  letter-spacing: 0.01em;
}

/* ===== BACKGROUND ===== */
#background {
  --tw-gradient-from: #0F0F0F !important;
  --tw-gradient-to: #050000 !important;
  background-image: 
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(220, 38, 38, 0.06) 0%, transparent 60%) !important;
}

/* ===== MENU LATERAL ===== */
.bm-menu {
  background-color: rgb(10, 10, 12) !important;
  border-right: 1px solid rgba(220, 38, 38, 0.08) !important;
}

/* ===== NAVBAR ===== */
.nav-block:first-child {
  height: 4rem !important;
  background: rgba(12, 12, 12, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(220, 38, 38, 0.08) !important;
}

.nav-block .nav-search input {
  font-family: 'Outfit', sans-serif !important;
  padding: .4rem .9rem !important;
  border-radius: .4rem;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: all 0.2s ease;
}

.nav-block .nav-search input:focus {
  border-color: rgba(220, 38, 38, 0.3) !important;
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.1);
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ===== BOTÃO CARRINHO ===== */
button#basket {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .3rem 1.5rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 600 !important;
  border-radius: 6px;
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, var(--red-light) 0%, var(--red-dark) 100%) !important;
  box-shadow: 0 2px 12px rgba(220, 38, 38, 0.25);
  border: none !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
}

button#basket:hover {
  box-shadow: 0 4px 20px rgba(220, 38, 38, 0.4);
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* ===== CATEGORIAS ===== */
.categories {
  background: rgba(14, 14, 14, 0.98) !important;
  border-bottom: 1px solid rgba(220, 38, 38, 0.06) !important;
}

.category-link {
  font-family: 'Anek Latin', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  transition: all .2s ease !important;
  border-color: transparent !important;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

.category-link:hover {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 0 20px rgba(220, 38, 38, 0.2);
}

.category-link.selected {
  border-color: var(--red-primary) !important;
  font-weight: 600 !important;
  color: #FFF !important;
  text-shadow: 0 0 15px rgba(220, 38, 38, 0.25);
}

.category-menu {
  font-family: 'Anek Latin', sans-serif !important;
}

/* ===== CHECKOUT ===== */
.checkout-wrapper {
  --tw-gradient-from: #0F0F0F !important;
  --tw-gradient-to: #050000 !important;
}

/* ===== SELEÇÕES E DESTAQUES ===== */
::selection {
  background: rgba(220, 38, 38, 0.3);
  color: #fff;
}