<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FiveM Shop</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Squada+One&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Teko:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>

    body {
  height: 100vh;
  background: rgba(0, 0, 0, 0.521);
  overflow: hidden;
  margin: 0;
  font-family: "Squada One", sans-serif;
  transition: opacity 0.5s ease;
}

.container {
  width: 681px;
  height: 699px;
  background-color: transparent;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.input-pesquise {
  position: absolute;
  top: 0;
  left: 27px;
  width: 339px;
  height: 37px;
  border-radius: 4px;
  border: none;
  padding: 0;
  background: #161616;
  outline: none;
  color: #767676;
  font-family: "Squada One";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding-left: 42px;
}

.button-pesquise {
  position: absolute;
  top: 0;
  left: 415.5px;
  width: 196px;
  height: 37px;
  border-radius: 4px;
  background: #161616;
  color: #686868;
  font-family: "Squada One";
  font-size: 20px;
  font-style: normal;
  border: none;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
  transition: all 200ms;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
}

.button-pesquise span:last-child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: linear-gradient(90deg, #e20000 0%, #a10101 100%);
  border-radius: 4px;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.button-pesquise span:first-child {
  position: relative;
  z-index: 1;
}

.button-pesquise:hover {
  color: #ffffff;
}

.button-pesquise:active {
  scale: 0.95;
}

.button-pesquise:hover span:last-child {
  width: 200px;
  height: 39px;
  opacity: 1;
}

.bar {
  position: absolute;
  z-index: 999;
  left: 62px;
  top: 1.5px;
}

.line {
  position: absolute;
  z-index: 999;
  left: 37px;
  top: 9px;
}

.buy {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 24px;
  top: 0;

  width: 37px;
  height: 37px;
  border-radius: 4px;
  background: #161616;
  cursor: pointer;
  border: none;
  overflow: hidden;
}

.buy span:last-child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5px;
  height: 5px;
  background: linear-gradient(90deg, #e20000 0%, #a10101 100%);
  border-radius: 4px;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.buy span:first-child {
  position: relative;
  z-index: 1;
}

.buy:hover {
  color: #ffffff;
}

.buy:active {
  scale: 0.95;
}

.buy:hover span:last-child {
  width: 40px;
  height: 40px;
  opacity: 1;
}

.buy-icon {
  margin-top: 2px;
}

.buy:hover .buy-icon path {
  fill: #ffffff;
}

.buy-icon path {
  transition: fill 0.3s ease;
}

.notify {
  position: absolute;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  background-color: red;
  top: -4px;
  right: 20px;
}

/* Items Container Styles - UPDATED FOR GRID LAYOUT */
.items-container {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  height: 610px;
}

.scroll-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 301px);
  grid-auto-rows: 299px;
  gap: 24px;
  justify-content: center;
  overflow-y: auto;
  padding: 0 10px 20px 10px;
  /* Adicione estas propriedades para mover a barra de rolagem para a esquerda */
  direction: rtl;
}

/* Adicione este novo seletor para manter o conteúdo com direção normal */
.scroll-container > * {
  direction: ltr;
}

.scroll-container::-webkit-scrollbar {
  width: 3px;
}

.scroll-container::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #00000027;
}

.scroll-container::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #f00;
}


.item {
  width: 301px;
  height: 350px;
  display: flex;
  flex-direction: column;
  transform: scale(0.5);
  
  opacity: 0;
  animation: itemAppear 0.3s forwards;
}

@keyframes itemAppear {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.item-title {
  width: 301px;
  height: 39px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: #161616;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.item-title-text {
  font-family: "Squada One";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  background: radial-gradient(154.41% 30.94% at 30.94% 50%, #f00 0%, #b70000 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.item-image-container {
  width: 301px;
  height: 255px;
  border-radius: 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: radial-gradient(50% 50% at 50% 50%, #2b2b2b 0%, #161616 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 8px;
  
}

.item-image {
  width: 107px;
  height: 106px;
  object-fit: contain;
  z-index: 2;
  margin-top: -20px;
}

.arrow-left {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 101px;
  z-index: 1;
}

.arrow-right {
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 102px;
  z-index: 1;
}

.corner-border {
  position: absolute;
  width: 29px;
  height: 29px;
  z-index: 1;
}

.top-left {
  top: -2px;
  left: -2px;
  transform: rotate(-90deg);
}

.top-right {
  top: -2px;
  right: -2px;

}

.bottom-left {
  bottom: -2px;
  left: -2px;
  transform: rotate(180deg);
}

.bottom-right {
  bottom: -2px;
  right: -2px;
  transform: rotate(90deg);
}

.item-price {
  display: flex;
  align-items: center;
  margin-left: 12px;
}

.item-currency {
  color: #fc0000;
  font-family: "Squada One";
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-right: 5px;
}

.item-amount {
  color: #fff;
  font-family: "Squada One";
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.item-select {
  width: 185px;
  height: 28px;
  gap: 5px;
  border-radius: 4px;
  border: 1px solid rgb(201, 3, 3);
  background: linear-gradient(90deg, #c90303 0%, #780101 100%);
  background-size: 200% 100%;
  background-position: 0% 0%;
  color: #fff;
  font-family: "Squada One";
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 11px;
  right: 11px;
  transition: gap 200ms, background-position 500ms ease;
}

.item-select:hover {
  background-position: 100% 0%;
  gap: 14px;
}

.item-bottom {
  position: relative;
  height: 40px;
  margin-top: -50px;
}

.item-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.item-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.item-quantity {
  display: flex;
  align-items: center;
}

.item-quantity1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 21px;
  height: 21px; 
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(123deg, #F00 13.52%, #900 100%);
}

.quantity-btn {
  width: 20px;
  height: 20px;
  background: #161616;
  color: #fff;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}

.quantity-value {
  color: #fff;
  font-family: "Squada One";
  font-size: 15px;
  margin: 0 8px;
}

/* Corner Borders */

/* Cart View Styles */
.cart-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
}

.value-display {
  position: absolute;
  top: 0;
  left: 28px;
  width: 401px;
  height: 37px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: #1d1d1d;
}

.valor-text {
  position: absolute;
  left: 60px;
  color: #fff;
  font-family: "Squada One";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  z-index: 1;
}

.total-value {
  position: absolute;
  right: 87px;
  display: flex;
  align-items: center;
}

.currency {
  color: #fc0000;
  font-family: "Squada One";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-right: 5px;
}

.amount {
  color: #fff;
  font-family: "Squada One";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.button-comprar {
  position: absolute;
  top: 0;
  left: 438px;
  width: 196px;
  height: 39px;
  border-radius: 4px;
  background: #161616;
  color: #686868;
  font-family: "Squada One";
  font-size: 20px;
  font-style: normal;
  border: none;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
  transition: all 200ms;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
}

.button-comprar span:last-child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: linear-gradient(90deg, #e20000 0%, #a10101 100%);
  border-radius: 4px;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.button-comprar span:first-child {
  position: relative;
  z-index: 1;
}

.button-comprar:hover {
  color: #ffffff;
}

.button-comprar:active {
  scale: 0.95;
}

.button-comprar:hover span:last-child {
  width: 240px;
  height: 45px;
  opacity: 1;
}

.back-button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 2px;
  top: 0;
  width: 39px;
  height: 39px;
  border-radius: 4px;
  background: #161616;
  cursor: pointer;
  border: none;
  overflow: hidden;
}



.back-button span:last-child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5px;
  height: 5px;
  background: linear-gradient(90deg, #e20000 0%, #a10101 100%);
  border-radius: 4px;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.back-button span:first-child {
  position: relative;
  z-index: 1;
}

.back-button:hover {
  color: #ffffff;
}

.back-button:active {
  scale: 0.95;
}

.back-button:hover span:last-child {
  width: 40px;
  height: 40px;
  opacity: 1;
}

.back-button:hover svg path {
  fill: #ffffff;
}


.cart-items-container {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  height: 628px;
  overflow-y: auto;
}

.cart-items-container::-webkit-scrollbar {
  width: 6px;
}

.cart-items-container::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #3f3f3f;
}

.cart-items-container::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #f00;
}

.cart-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: radial-gradient(50% 50% at 50% 50%, #2b2b2be1 0%, #161616d7 100%);
  border-radius: 10px;
  padding: 10px;
  transform: scale(0.5);
  width: 628px;
  height: 54px;
  margin-left: 27px;
  opacity: 0;
  animation: cartItemAppear 0.2s forwards;
  border-left: 4px solid red;
}

@keyframes cartItemAppear {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.cart-item-image {
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin-right: 15px;
}

.cart-item-details {
  flex: 1;
}

.cart-item-title {
  color: #fff;
  font-family: "Squada One";
  font-size: 18px;
  margin-bottom: 5px;
}

.cart-item-price {
  display: flex;
  align-items: center;
}

.cart-item-remove {
  width: 100px;
  height: 28px;
  border-radius: 4px;
  border: none;
  background: linear-gradient(123deg, #F00 13.52%, rgb(192, 0, 0) 100%);
  color: #fff;
  font-family: "Squada One";
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 15px;
  transition: all 200ms;
}

.cart-item-remove:hover {
  scale: 0.96;
}

.cart-item-remove svg {
  margin-right: 5px;
}

.exit-button {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 300ms;
}

.exit-button:hover {
   margin-right: 5px;
}

.exit-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.exit-text {
  color: #fff;
  position: absolute;
  font-family: "Squada One";
  font-size: 23px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 11.5px;
  margin-right: 106px;
}


.loja-online-text {
  position: absolute;
  top: 96px;
  right: 35px;
  color: rgba(255, 255, 255, 0.15);
  font-family: "Squada One";
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* Admin Panel Styles - Completely Redesigned */
.admin-panel {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.admin-panel.active {
  opacity: 1;
  visibility: visible;
}

.admin-container {
  width: 85%;
  height: 85%;
  background: linear-gradient(145deg, #121212 0%, #080808 100%);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  position: relative;
  transform: translateY(50px);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.admin-panel.active .admin-container {
  transform: translateY(0);
  opacity: 1;
}

.admin-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ff0000, transparent);
  animation: scanline 4s linear infinite;
}

@keyframes scanline {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.corner-decoration {
  position: absolute;
  width: 100px;
  height: 100px;
  pointer-events: none;
  z-index: 1;
}

.corner-top-left {
  top: 0;
  left: 0;
  border-top: 2px solid rgba(255, 0, 0, 0.5);
  border-left: 2px solid rgba(255, 0, 0, 0.5);
  border-top-left-radius: 16px;
}

.corner-top-right {
  top: 0;
  right: 0;
  border-top: 2px solid rgba(255, 0, 0, 0.5);
  border-right: 2px solid rgba(255, 0, 0, 0.5);
  border-top-right-radius: 16px;
}

.corner-bottom-left {
  bottom: 0;
  left: 0;
  border-bottom: 2px solid rgba(255, 0, 0, 0.5);
  border-left: 2px solid rgba(255, 0, 0, 0.5);
  border-bottom-left-radius: 16px;
}

.corner-bottom-right {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid rgba(255, 0, 0, 0.5);
  border-right: 2px solid rgba(255, 0, 0, 0.5);
  border-bottom-right-radius: 16px;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 30px;
  background: linear-gradient(90deg, #0a0a0a 0%, #1c1c1c 50%, #0a0a0a 100%);
  border-bottom: 2px solid rgba(255, 0, 0, 0.3);
  position: relative;
}

.admin-header::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.admin-title {
  color: #ff0000;
  font-family: "Bebas Neue", sans-serif;
  font-size: 32px;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
  letter-spacing: 2px;
  position: relative;
  display: flex;
  align-items: center;
}

.admin-title::before {
  content: "";
  width: 16px;
  height: 16px;
  background: #ff0000;
  margin-right: 12px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.admin-exit {
  background: rgba(20, 20, 20, 0.5);
  border: 1px solid rgba(255, 0, 0, 0.3);
  color: #ff0000;
  cursor: pointer;
  font-size: 16px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.admin-exit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, 0.1);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.admin-exit:hover::before {
  transform: translateY(0);
}

.admin-exit:hover {
  background-color: rgba(255, 0, 0, 0.062);
}

.admin-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.admin-main {
  flex: 1;
  padding: 25px;
  overflow-y: auto;
  position: relative;
}

.admin-main::-webkit-scrollbar {
  width: 3px;
}

.admin-main::-webkit-scrollbar-track {
  border-radius: 10px;
}

.admin-main::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff0000, #990000);
  border-radius: 10px;
}

.section-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 28px;
  color: #fff;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 0, 0, 0.2);
  display: flex;
  align-items: center;
}

.section-title i {
  margin-right: 10px;
  color: #ff0000;
}

.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 80px; /* Space for fixed action bar */
  overflow-x: hidden;
}

.item-card {
  background: rgba(20, 20, 20, 0.6);
  border-radius: 12px;
  border: 1px solid rgba(255, 0, 0, 0.1);
  padding: 20px;
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
}

.item-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, #ff0000, rgba(255, 0, 0, 0.3));
  opacity: 0.7;
}

.item-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 0, 0, 0.3);
}

.item-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
}

.item-image-container {
  width: 301px;
  height: 255px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: radial-gradient(50% 50% at 50% 50%, #2B2B2B 0%, #161616 100%);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.item-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.item-title {
  text-align: center;
}

.item-name {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #fff;
}

.item-id {
  font-size: 14px;
  color: #666;
}

.item-price {
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 18px;
  color: #ff0000;
  display: inline-flex;
  align-items: center;
  margin-bottom: 15px;
}

.item-price i {
  margin-right: 5px;
  font-size: 14px;
}

.item-actions {
  display: flex;
  justify-content: space-between;
}

.btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  font-family: "Teko", sans-serif;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn i {
  margin-right: 5px;
  font-size: 14px;
}

.btn-edit {
  background: rgba(30, 30, 30, 0.8);
  color: #3498db;
  border: 1px solid rgba(52, 152, 219, 0.3);
}

.btn-edit:hover {
  background: rgba(52, 152, 219, 0.1);
  box-shadow: 0 0 10px rgba(52, 152, 219, 0.2);
}

.btn-delete {
  background: rgba(30, 30, 30, 0.8);
  color: #e74c3c;
  border: 1px solid rgba(231, 76, 60, 0.3);
}

.btn-delete:hover {
  background: rgba(231, 76, 60, 0.1);
  box-shadow: 0 0 10px rgba(231, 76, 60, 0.2);
}



.btn-large {
  height: 40px;
  padding: 0px 15px;
  font-size: 18px;
  border-radius: 10px;
  letter-spacing: 1px;
  margin-left: 599px;
}

.btn-add {
  background: #1B1B1B;
  border: solid 0.5px #3498db7c;
  color: #3498DB;
}

.btn-add:hover {
  background: #141E25;
  color: #fff;
}



.background-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(255, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: -1;
}

/* Add Item Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-container {
  width: 90%;
  max-width: 550px;
  background: linear-gradient(145deg, #121212 0%, #080808 100%);
  border-radius: 16px;
  border: 1px solid rgba(255, 0, 0, 0.2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: modalAppear 0.3s ease-out;
  transform: scale(0.9);
  opacity: 0;
  transition: all 0.3s ease;
}

.modal.active .modal-container {
  transform: scale(1);
  opacity: 1;
}

@keyframes modalAppear {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-header {
  background: linear-gradient(90deg, #0a0a0a 0%, #1c1c1c 50%, #0a0a0a 100%);
  padding: 20px;
  border-bottom: 2px solid rgba(255, 0, 0, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  color: #fff;
  font-family: "Bebas Neue", sans-serif;
  font-size: 24px;
  text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

.modal-close {
  background: none;
  border: none;
  color: #ff0000;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.modal-close:hover {
  transform: rotate(90deg);
}

.modal-body {
  padding: 25px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  color: #aaa;
  margin-bottom: 8px;
  font-size: 18px;
}

.form-input {
  width: 100%;
  background: rgba(10, 10, 10, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px 15px;
  color: #fff;
  font-family: "Teko", sans-serif;
  font-size: 18px;
  transition: all 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-color: rgba(255, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
}

.form-input::placeholder {
  color: #555;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

.btn-cancel {
  background: rgba(30, 30, 30, 0.8);
  color: #aaa;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-cancel:hover {
  background: rgba(50, 50, 50, 0.8);
  color: #fff;
}

.btn-confirm {
  background: linear-gradient(135deg, #ff0000, #cc0000);
  color: white;
}

.btn-confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 0, 0, 0.3);
}

/* Success Animation */
.success-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.success-animation.active {
  opacity: 1;
  visibility: visible;
}

.checkmark {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  stroke-width: 3;
  stroke: #ff0000;
  stroke-miterlimit: 10;
  box-shadow: 0 0 30px rgba(255, 0, 0, 0.6);
  animation: fillCheck 0.4s ease-in-out 0.4s forwards, scaleCheck 0.3s ease-in-out 0.9s both;
}

.checkmark__circle {
  stroke-dasharray: 210;
  stroke-dashoffset: 210;
  stroke-width: 3;
  stroke-miterlimit: 10;
  stroke: #ff0000;
  fill: none;
  animation: strokeCheck 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: strokeCheck 0.5s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes strokeCheck {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes scaleCheck {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.2, 1.2, 1);
  }
}

@keyframes fillCheck {
  100% {
    box-shadow: inset 0 0 0 100px rgba(255, 0, 0, 0.1);
  }
}

.success-message {
  color: #fff;
  font-family: "Bebas Neue", sans-serif;
  font-size: 36px;
  margin-top: 30px;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
  animation: fadeInUp 0.5s ease 1.2s forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Notification */
.notification {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: rgba(20, 20, 20, 0.95);
  border-left: 4px solid #ff0000;
  border-radius: 8px;
  padding: 15px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  color: #fff;
  animation: notificationIn 0.5s  forwards;
  z-index: 2000;
  max-width: 350px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}


.notification.active {
  opacity: 1;
  visibility: visible;
}

@keyframes notificationIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.notification-icon {
  margin-right: 15px;
  font-size: 22px;
  color: #ff0000;
  animation: pulse 2s infinite;
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 3px;
}

.notification-message {
  font-size: 14px;
  color: #aaa;
}

.fade-out {
  opacity: 0;
}

/* Delete Confirmation Modal */
.delete-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.delete-modal.active {
  opacity: 1;
  visibility: visible;
}

.delete-modal-container {
  width: 90%;
  max-width: 450px;
  background: linear-gradient(145deg, #121212 0%, #080808 100%);
  border-radius: 16px;
  border: 1px solid rgba(255, 0, 0, 0.2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: modalAppear 0.3s ease-out;
  transform: scale(0.9);
  opacity: 0;
  transition: all 0.3s ease;
}

.delete-modal.active .delete-modal-container {
  transform: scale(1);
  opacity: 1;
}

.delete-modal-header {
  background: linear-gradient(90deg, #0a0a0a 0%, #1c1c1c 50%, #0a0a0a 100%);
  padding: 20px;
  border-bottom: 2px solid rgba(255, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.delete-modal-title {
  color: #ff0000;
  font-family: "Bebas Neue", sans-serif;
  font-size: 24px;
  text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

.delete-modal-body {
  padding: 25px;
  text-align: center;
  color: #fff;
  font-size: 18px;
}

.delete-warning {
  color: #ff0000;
  margin-top: 15px;
  font-size: 16px;
}

.delete-modal-footer {
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: center;
  gap: 15px;
}

.btn-cancel-delete {
  background: rgba(30, 30, 30, 0.8);
  color: #aaa;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-cancel-delete:hover {
  background: rgba(50, 50, 50, 0.8);
  color: #fff;
}

.btn-confirm-delete {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-confirm-delete:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
}

/* Blip Animation */
@keyframes blipBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}


<body>
    <div class="background-grid"></div>
    <div class="container">
        <div class="shop-view">
            <input class="input-pesquise" type="text" placeholder="PESQUISAR...">
            
            <svg class="bar" xmlns="http://www.w3.org/2000/svg" width="2" height="32" viewBox="0 0 2 32" fill="none">
                <path d="M1 0V32" stroke="white" stroke-opacity="0.17"/>
            </svg>

            <svg class="line" xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M13.371 11.2561C14.1192 10.1126 14.5542 8.74563 14.5542 7.27709C14.5542 3.25806 11.2961 0 7.27709 0C3.25806 0 0 3.25806 0 7.27709C0 11.2961 3.25806 14.5542 7.27709 14.5542C8.93385 14.5542 10.4613 14.0005 11.6845 13.0681L15.3324 16.3936L17 14.5643L13.371 11.2561ZM7.27709 12.2639C4.52297 12.2639 2.29031 10.0312 2.29031 7.27709C2.29031 4.52297 4.52297 2.29031 7.27709 2.29031C10.0312 2.29031 12.2639 4.52297 12.2639 7.27709C12.2639 10.0312 10.0312 12.2639 7.27709 12.2639Z" fill="#7A7A7A"/>
            </svg>

            <button class="button-pesquise">
                <span>PESQUISAR</span>
                <span></span>
            </button>

            <div class="buy">
                <span>
                    <svg class="buy-icon" xmlns="http://www.w3.org/2000/svg" width="17" height="19" viewBox="0 0 17 19" fill="none">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M6 4C6 2.89543 6.89543 2 8 2H9C10.1046 2 11 2.89543 11 4H6ZM4 4C4 1.79086 5.79086 0 8 0H9C11.2091 0 13 1.79086 13 4H14C15.6569 4 17 5.34315 17 7V15C17 17.2091 15.2091 19 13 19H4C1.79086 19 0 17.2091 0 15V7C0 5.34315 1.34315 4 3 4H4ZM11 6H6H4H3C2.44772 6 2 6.44772 2 7V15C2 16.1046 2.89543 17 4 17H13C14.1046 17 15 16.1046 15 15V7C15 6.44772 14.5523 6 14 6H13H11ZM12.6748 9.73803L8.97454 13.1211C8.21045 13.8197 7.03954 13.8197 6.27546 13.1211L4.32523 11.338L5.67477 9.86197L7.625 11.645L11.3252 8.26197L12.6748 9.73803Z" fill="#FF0000"/>
                    </svg>
                </span>
                <span></span>
            </div>

            <div class="notify" style="display: none;"></div>
            
            <div class="items-container">
                <div class="scroll-container">
                    <!-- Items will be dynamically added here -->
                </div>
            </div>
        </div>

        <div class="cart-view" style="display: none;">
            <div class="value-display">
                <svg style="transform: translatex(-1px);" xmlns="http://www.w3.org/2000/svg" width="192" height="39" viewBox="0 0 192 39" fill="none">
                    <path d="M0 4C0 1.79086 1.79086 0 4 0H170.4C171.427 0 172.415 0.395099 173.159 1.10345L189.88 17.0283C191.564 18.6325 191.53 21.3303 189.805 22.891L173.143 37.9661C172.407 38.6315 171.451 39 170.459 39H4C1.79086 39 0 37.2091 0 35V4Z" fill="url(#paint0_linear_65_11)"/>
                    <path d="M4 0.5H170.4C171.299 0.5 172.163 0.845713 172.814 1.46552L189.535 17.3903C191.009 18.7941 190.979 21.1546 189.469 22.5202L172.807 37.5954C172.164 38.1776 171.327 38.5 170.459 38.5H4C2.06701 38.5 0.5 36.933 0.5 35V4C0.5 2.067 2.067 0.5 4 0.5Z" stroke="white" stroke-opacity="0.05"/>
                    <defs>
                        <linearGradient id="paint0_linear_65_11" x1="0" y1="19.5" x2="193" y2="19.5" gradientUnits="userSpaceOnUse">
                            <stop stop-color="#EE0000"/>
                            <stop offset="1" stop-color="#880000"/>
                        </linearGradient>
                    </defs>
                </svg>
                <span class="valor-text">VALOR</span>
                <div class="total-value">
                    <span class="currency">R$</span>
                    <span class="amount">0.00</span>
                </div>
            </div>

            <button class="button-comprar">
                <span>COMPRAR</span>
                <span></span>
            </button>

            <div class="back-button">
                <span>
                    <svg style="transform: translate(-50%, -50%); left: 50%; top: 50%; position: absolute;" xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
                        <path d="M8.5 0L0 8.5L8.5 17V10H17V7H8.5V0Z" fill="#7A7A7A"/>
                    </svg>
                </span>
                <span></span>
            </div>

            <div class="cart-items-container">
                <!-- Cart items will be dynamically added here -->
            </div>

           
    </div>
    </div>

    <div class="loja-online-text">LOJA ONLINE</div>

<div class="exit-button">
    <svg xmlns="http://www.w3.org/2000/svg" width="57" height="53" viewBox="0 0 57 53" fill="none">
        <path d="M19.8498 51H37.1502C40.7404 51 44.0551 49.0754 45.8349 45.9574L54.1584 31.3757C55.9185 28.2922 55.9116 24.5067 54.1404 21.4296L45.8411 7.01131C44.0565 3.91093 40.7516 2 37.1743 2H19.8257C16.2484 2 12.9435 3.91092 11.1589 7.0113L2.85958 21.4296C1.08837 24.5067 1.08154 28.2922 2.84162 31.3757L11.1651 45.9574C12.9449 49.0754 16.2596 51 19.8498 51Z" fill="url(#paint0_radial_8_183)" stroke="url(#paint1_linear_8_183)" stroke-width="3"/>
        <defs>
          <radialGradient id="paint0_radial_8_183" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(28.5 26.5) rotate(90) scale(24.5 28.5)">
            <stop stop-color="#E80E0E" stop-opacity="0.47"/>
            <stop offset="1" stop-color="#6F0707" stop-opacity="0.47"/>
          </radialGradient>
          <linearGradient id="paint1_linear_8_183" x1="0" y1="26.5" x2="34.3676" y2="26.5" gradientUnits="userSpaceOnUse">
            <stop offset="0.9999" stop-color="#FF0000"/>
          </linearGradient>
        </defs>
      </svg>
      <svg class="exit-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="25" viewBox="0 0 20 25" fill="none">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 4.55103C3.5 3.7226 4.17157 3.05103 5 3.05103H14.8571C15.6856 3.05103 16.3571 3.7226 16.3571 4.55103V5.97049H19.3571V4.55103C19.3571 2.06575 17.3424 0.0510254 14.8571 0.0510254H5C2.51472 0.0510254 0.5 2.06575 0.5 4.55103V20.449C0.5 22.9343 2.51472 24.949 5 24.949H14.8571C17.3424 24.949 19.3571 22.9343 19.3571 20.449V18.664H16.3571V20.449C16.3571 21.2774 15.6856 21.949 14.8571 21.949H5C4.17157 21.949 3.5 21.2774 3.5 20.449V4.55103ZM19.3673 12.2643L15.7365 15.3025C14.7144 16.1578 13.2735 15.7711 12.7012 14.744H9.06878C7.66699 14.744 6.53061 13.6076 6.53061 12.2059C6.53061 10.8041 7.66699 9.66768 9.06878 9.66768H12.7718C13.3849 8.72924 14.7542 8.40401 15.7365 9.22602L19.3673 12.2643Z" fill="white"/>
      </svg>
    <span class="exit-text">Sair</span>
</div>


    <!-- Admin Panel - Redesigned -->
    <div class="admin-panel">
        <div class="admin-container">
            <div class="corner-decoration corner-top-left"></div>
            <div class="corner-decoration corner-top-right"></div>
            <div class="corner-decoration corner-bottom-left"></div>
            <div class="corner-decoration corner-bottom-right"></div>
            
            <div class="admin-header">
                <h1 class="admin-title">CONFIGURAR LOJA DE ITENS</h1>
               
                <button class="btn btn-large btn-add">
                    <i class="fas fa-plus"></i> ADICIONAR ITEM
                </button>
                <button class="admin-exit">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="admin-content">
                <div class="admin-main">

                    
                    <div class="item-grid">
                        <!-- Item cards will be dynamically added here -->
                    </div>
                    
                    <div class="action-bar">
                        
                        <button class="btn btn-large btn-save" style="display: none;">
                            <i class="fas fa-save"></i> SALVAR ALTERAÇÕES
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Add Item Modal -->
    <div class="modal">
        <div class="modal-container">
            <div class="modal-header">
                <h3 class="modal-title">ADICIONAR NOVO ITEM</h3>
                <button class="modal-close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">Nome do Item</label>
                    <input type="text" id="item-name" class="form-input" placeholder="Ex: Energético">
                </div>
                
                <div class="form-group">
                    <label class="form-label">ID do Item</label>
                    <input type="text" id="item-id" class="form-input" placeholder="Ex: energetico">
                </div>
                
                <div class="form-group">
                    <label class="form-label">Preço (Moedas)</label>
                    <input type="number" id="item-price" class="form-input" placeholder="Ex: 1500">
                </div>
                
                <div class="form-group">
                    <label class="form-label">URL da Imagem</label>
                    <input type="text" id="item-image" class="form-input" placeholder="Ex: https://i.imgur.com/JVJAXjk.png">
                </div>
            </div>
            
            <div class="modal-footer">
                <button class="btn btn-cancel">CANCELAR</button>
                <button class="btn btn-confirm">ADICIONAR ITEM</button>
            </div>
        </div>
    </div>
    
    <!-- Success Animation -->
    <div class="success-animation">
        <div style="text-align: center;">
            <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
                <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
                <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
            </svg>
            <p class="success-message">ALTERAÇÕES SALVAS COM SUCESSO!</p>
        </div>
    </div>
    
    <!-- Notification -->
    <div class="notification">
        <div class="notification-icon">
            <i class="fas fa-info-circle"></i>
        </div>
        <div class="notification-content">
            <div class="notification-title">Ação realizada</div>
            <div class="notification-message">O item foi salvo com sucesso!</div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="delete-modal">
        <div class="delete-modal-container">
            <div class="delete-modal-header">
                <h3 class="delete-modal-title">CONFIRMAR EXCLUSÃO</h3>
            </div>
            
            <div class="delete-modal-body">
                <p>Tem certeza que deseja excluir o item "<span class="delete-item-name"></span>"?</p>
                <p class="delete-warning">Esta ação não pode ser desfeita!</p>
            </div>
            
            <div class="delete-modal-footer">
                <button class="btn btn-cancel-delete">CANCELAR</button>
                <button class="btn btn-confirm-delete">EXCLUIR ITEM</button>
            </div>
        </div>
    </div>

    <script src="script.js">
        document.addEventListener("DOMContentLoaded", () => {
  // Items data - will be populated from server
  let items = [];

  // DOM Elements
  const shopView = document.querySelector(".shop-view");
  const cartView = document.querySelector(".cart-view");
  const scrollContainer = document.querySelector(".scroll-container");
  const cartItemsContainer = document.querySelector(".cart-items-container");
  const buyButton = document.querySelector(".buy");
  const backButton = document.querySelector(".back-button");
  const notifyBadge = document.querySelector(".notify");
  const searchInput = document.querySelector(".input-pesquise");
  const searchButton = document.querySelector(".button-pesquise");
  const totalAmountElement = document.querySelector(".amount");
  const comprarButton = document.querySelector(".button-comprar");
  const exitButton = document.querySelector(".exit-button");

  // Admin Panel Elements
  const adminPanel = document.querySelector(".admin-panel");
  const adminItems = document.querySelector(".item-grid");
  const adminAddButton = document.querySelector(".btn-add");
  const adminSaveButton = document.querySelector(".btn-save");
  const adminExitButton = document.querySelector(".admin-exit");

  // Modal Elements
  const addItemModal = document.querySelector(".modal");
  const addItemClose = document.querySelector(".modal-close");
  const addItemCancel = document.querySelector(".btn-cancel");
  const addItemSubmit = document.querySelector(".btn-confirm");
  const successAnimation = document.querySelector(".success-animation");
  const notification = document.querySelector(".notification");

  // Delete Confirmation Modal
  const deleteModal = document.querySelector(".delete-modal");
  const deleteItemName = document.querySelector(".delete-item-name");
  const cancelDeleteBtn = document.querySelector(".btn-cancel-delete");
  const confirmDeleteBtn = document.querySelector(".btn-confirm-delete");
  let itemToDelete = null;

  // Cart state
  let cart = [];
  let isCartVisible = false;

  // FiveM NUI message listener
  window.addEventListener("message", function (event) {
    const data = event.data;

    if (data.action === "openShop") {
      document.body.style.display = "block";
      shopView.style.display = "block";
      cartView.style.display = "none";
      isCartVisible = false;
    } else if (data.action === "openShopConfig") {
      document.body.style.display = "block";
      adminPanel.classList.add("active");
      renderAdminItems();
    } else if (data.action === "updateItems") {
      items = data.items;
      renderItems();
      renderAdminItems();
    } else if (data.action === "configSaved") {
      if (data.success) {
        successAnimation.classList.add("active");
        setTimeout(() => {
          successAnimation.classList.remove("active");
          showNotification("Alterações salvas com sucesso!");
        }, 1000);
      } else {
        showNotification(data.message || "Erro ao salvar configurações!");
      }
    } else if (data.action === "itemAdded" || data.action === "itemUpdated" || data.action === "itemDeleted") {
      if (data.success) {
        showNotification(
          data.action === "itemAdded"
            ? "Item adicionado com sucesso!"
            : data.action === "itemUpdated"
            ? "Item atualizado com sucesso!"
            : "Item excluído com sucesso!"
        );
      } else {
        showNotification(data.message || "Erro ao processar o item!");
      }
    } else if (data.action === "purchaseComplete") {
      if (data.success) {
        showNotification("Compra realizada com sucesso!");
        cart = [];
        notifyBadge.style.display = "none";
        renderCart();
        
        // Close the shop with animation
        setTimeout(() => {
          closeShop(true);
        }, 1500);
      } else {
        showNotification(data.message || "Erro ao realizar a compra!");
      }
    }
  });

  // Render items in the shop with grid layout
  function renderItems(itemsToRender = items) {
    scrollContainer.innerHTML = "";

    itemsToRender.forEach((item, index) => {
      const itemElement = document.createElement("div");
      itemElement.className = "item";
      itemElement.style.animationDelay = `${index * 0.05}s`;
      itemElement.innerHTML = `
      <div class="item-title">
          <span class="item-title-text">${item.name}</span>
      </div>
      <div class="item-image-container">
          <img src="${item.image}" alt="${item.name}" class="item-image">
          
          <!-- Arrow SVGs -->
          <svg class="arrow-left" xmlns="http://www.w3.org/2000/svg" width="32" height="101" viewBox="0 0 32 101" fill="none">
            <g filter="url(#filter0_i_8_98)">
              <path d="M30.9719 48.1819C31.5996 49.1583 31.6076 50.4092 30.9926 51.3937L0 101V0L30.9719 48.1819Z" fill="url(#paint0_linear_8_98)"/>
            </g>
            <path d="M30.5513 48.4522C31.0744 49.2659 31.0811 50.3084 30.5686 51.1287L0.5 99.2561V1.7025L30.5513 48.4522Z" stroke="url(#paint1_linear_8_98)"/>
            <defs>
              <filter id="filter0_i_8_98" x="0" y="0" width="31.4484" height="101" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                <feOffset/>
                <feGaussianBlur stdDeviation="5"/>
                <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.46 0"/>
                <feBlend mode="normal" in2="shape" result="effect1_innerShadow_8_98"/>
              </filter>
              <linearGradient id="paint0_linear_8_98" x1="32" y1="50.5" x2="0" y2="50.5" gradientUnits="userSpaceOnUse">
                <stop stop-color="#EA0000"/>
                <stop offset="1" stop-color="#330000"/>
              </linearGradient>
              <linearGradient id="paint1_linear_8_98" x1="32" y1="50.5" x2="0" y2="50.5" gradientUnits="userSpaceOnUse">
                <stop stop-color="#FF0000"/>
                <stop offset="1" stop-color="#990000" stop-opacity="0"/>
              </linearGradient>
            </defs>
          </svg>
          
          <svg class="arrow-right" xmlns="http://www.w3.org/2000/svg" width="34" height="102" viewBox="0 0 34 102" fill="none">
            <g filter="url(#filter0_i_8_99)">
              <path d="M1.12057 53.3828C0.442024 52.3795 0.433399 51.0665 1.09871 50.0544L34 0V102L1.12057 53.3828Z" fill="url(#paint0_linear_8_99)"/>
            </g>
            <path d="M1.53475 53.1027C0.969292 52.2666 0.962104 51.1725 1.51653 50.329L33.5 1.67096V100.368L1.53475 53.1027Z" stroke="url(#paint1_linear_8_99)"/>
            <defs>
              <filter id="filter0_i_8_99" x="0.605621" y="0" width="33.3944" height="102" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                <feOffset/>
                <feGaussianBlur stdDeviation="5"/>
                <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.46 0"/>
                <feBlend mode="normal" in2="shape" result="effect1_innerShadow_8_99"/>
              </filter>
              <linearGradient id="paint0_linear_8_99" x1="0" y1="51" x2="34" y2="51" gradientUnits="userSpaceOnUse">
                <stop stop-color="#EA0000"/>
                <stop offset="1" stop-color="#330000"/>
              </linearGradient>
              <linearGradient id="paint1_linear_8_99" x1="0" y1="51" x2="34" y2="51" gradientUnits="userSpaceOnUse">
                <stop stop-color="#FF0000"/>
                <stop offset="1" stop-color="#990000" stop-opacity="0"/>
              </linearGradient>
            </defs>
          </svg>
          
          <!-- Corner Borders -->
          <svg class="corner-border top-left" xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none">
              <path d="M-9.53674e-07 1H22C25.3137 1 28 3.68629 28 7V28" stroke="#FF0000" stroke-width="1.5"/>
          </svg>
          
          <svg class="corner-border top-right" xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none">
              <path d="M-9.53674e-07 1H22C25.3137 1 28 3.68629 28 7V28" stroke="#FF0000" stroke-width="1.5"/>
          </svg>
          
          <svg class="corner-border bottom-left" xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none">
              <path d="M-9.53674e-07 1H22C25.3137 1 28 3.68629 28 7V28" stroke="#FF0000" stroke-width="1.5"/>
          </svg>
          
          <svg class="corner-border bottom-right" xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none">
              <path d="M-9.53674e-07 1H22C25.3137 1 28 3.68629 28 7V28" stroke="#FF0000" stroke-width="1.5"/>
          </svg>
      </div>
      <div class="item-bottom">
          <div class="item-price">
              <span class="item-currency">R$</span>
              <span class="item-amount">${item.price.toFixed(2)}</span>
          </div>
          <button class="item-select" data-id="${item.id}">
              SELECIONAR <i class="fas fa-shopping-cart"></i>
          </button>
      </div>
    `;

      scrollContainer.appendChild(itemElement);
    });

    // Add event listeners to select buttons
    document.querySelectorAll(".item-select").forEach((button) => {
      button.addEventListener("click", function () {
        const itemId = Number.parseInt(this.getAttribute("data-id"));
        const item = items.find((i) => i.id === itemId);

        if (item) {
          addToCart(item);
          showNotification("Item adicionado ao carrinho!");
        }
      });
    });
  }

  // Render admin panel items
  function renderAdminItems() {
    adminItems.innerHTML = "";
    adminSaveButton.style.display = "block";

    items.forEach((item) => {
      const adminItemElement = document.createElement("div");
      adminItemElement.className = "item-card";
      adminItemElement.innerHTML = `
        <div class="item-header">
            <div class="item-image-container">
                <img src="${item.image}" alt="${item.name}" class="item-image">
            </div>
            <div class="item-name">${item.name}</div>
            <div class="item-id">ID: ${item.itemId}</div>
        </div>
        <div class="item-price">
            <i class="fas fa-coins"></i> ${parseFloat(item.price).toFixed(0)}
        </div>
        <div class="item-actions">
            <button class="btn btn-edit" data-id="${item.id}">
                <i class="fas fa-pen"></i> Editar
            </button>
            <button class="btn btn-delete" data-id="${item.id}">
                <i class="fas fa-trash"></i> Excluir
            </button>
        </div>
      `;

      adminItems.appendChild(adminItemElement);
    });

    // Add event listeners to edit buttons
    document.querySelectorAll(".btn-edit").forEach((button) => {
      button.addEventListener("click", function () {
        const itemId = Number.parseInt(this.getAttribute("data-id"));
        const item = items.find((i) => i.id === itemId);

        if (item) {
          // Fill modal with item data
          document.getElementById("item-name").value = item.name;
          document.getElementById("item-id").value = item.itemId;
          document.getElementById("item-price").value = item.price.toString();
          document.getElementById("item-image").value = item.image;

          // Show modal
          addItemModal.classList.add("active");

          // Change submit button text
          document.querySelector(".btn-confirm").textContent = "ATUALIZAR ITEM";
          document.querySelector(".btn-confirm").setAttribute("data-id", item.id.toString());
          document.querySelector(".modal-title").textContent = "EDITAR ITEM";
        }
      });
    });

    // Add event listeners to delete buttons
    document.querySelectorAll(".btn-delete").forEach((button) => {
      button.addEventListener("click", function () {
        const itemId = Number.parseInt(this.getAttribute("data-id"));
        const item = items.find((i) => i.id === itemId);

        if (item) {
          // Show delete confirmation modal
          itemToDelete = itemId;
          deleteItemName.textContent = item.name;
          deleteModal.classList.add("active");
        }
      });
    });
  }

  // Render items in the cart
  function renderCart() {
    cartItemsContainer.innerHTML = "";
    let total = 0;

    cart.forEach((item, index) => {
      const cartItemElement = document.createElement("div");
      cartItemElement.className = "cart-item";
      cartItemElement.style.animationDelay = `${index * 0.05}s`;
      cartItemElement.innerHTML = `
        <img src="${item.image}" alt="${item.name}" class="cart-item-image">
        <div class="cart-item-details">
            <div class="cart-item-title">${item.name}</div>
            <div class="cart-item-price">
                <span class="item-currency">R$</span>
                <span class="item-amount">${(item.price * item.quantity).toFixed(2)}</span>
                <span class="item-quantity1" style="color: white; margin-left: 10px;"> ${item.quantity}</span>
            </div>
        </div>
        <button class="cart-item-remove" data-id="${item.id}">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="3 6 5 6 21 6"></polyline>
                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                <line x1="10" y1="11" x2="10" y2="17"></line>
                <line x1="14" y1="11" x2="14" y2="17"></line>
            </svg>
            REMOVER
        </button>
      `;

      cartItemsContainer.appendChild(cartItemElement);
      total += item.price * item.quantity;
    });

    // Update total amount
    totalAmountElement.textContent = total.toFixed(2);

    // Add event listeners to remove buttons
    document.querySelectorAll(".cart-item-remove").forEach((button) => {
      button.addEventListener("click", function () {
        const itemId = Number.parseInt(this.getAttribute("data-id"));
        removeFromCart(itemId);
      });
    });
  }

  // Add item to cart
  function addToCart(item) {
    const existingItem = cart.find((i) => i.id === item.id);

    if (existingItem) {
      existingItem.quantity += 1;
    } else {
      cart.push({ ...item, quantity: 1 });
    }

    // Show notification badge
    notifyBadge.style.display = "block";

    // Update cart view if it's visible
    if (isCartVisible) {
      renderCart();
    }
  }

  // Remove item from cart
  function removeFromCart(itemId) {
    cart = cart.filter((item) => item.id !== itemId);

    // Hide notification badge if cart is empty
    if (cart.length === 0) {
      notifyBadge.style.display = "none";
    }

    // Update cart view
    renderCart();
  }

  // Show notification
  function showNotification(message) {
    // Update notification message
    document.querySelector(".notification-message").textContent = message;

    // Show notification
    notification.classList.add("active");

    // Remove notification after 3 seconds
    setTimeout(() => {
      notification.classList.remove("active");
    }, 3000);
  }

  // Toggle between shop and cart views
  function toggleView() {
    isCartVisible = !isCartVisible;

    if (isCartVisible) {
      shopView.style.display = "none";
      cartView.style.display = "block";
      renderCart();
    } else {
      shopView.style.display = "block";
      cartView.style.display = "none";
    }
  }

  // Search functionality
  function searchItems() {
    const searchTerm = searchInput.value.trim().toLowerCase();

    if (searchTerm === "") {
      renderItems();
      return;
    }

    const filteredItems = items.filter((item) => 
      item.name.toLowerCase().includes(searchTerm) || 
      item.itemId.toLowerCase().includes(searchTerm)
    );
    
    renderItems(filteredItems);
  }

  // Add new item in admin panel
  function addNewItem() {
    // Reset form
    document.getElementById("item-name").value = "";
    document.getElementById("item-id").value = "";
    document.getElementById("item-price").value = "";
    document.getElementById("item-image").value = "";

    // Reset button text
    document.querySelector(".btn-confirm").textContent = "ADICIONAR ITEM";
    document.querySelector(".btn-confirm").removeAttribute("data-id");
    document.querySelector(".modal-title").textContent = "ADICIONAR NOVO ITEM";

    // Show modal
    addItemModal.classList.add("active");
  }

  // Submit new item or update existing
  function submitItem() {
    const name = document.getElementById("item-name").value;
    const itemId = document.getElementById("item-id").value;
    const price = Number.parseFloat(document.getElementById("item-price").value);
    const image = document.getElementById("item-image").value;
    const updateId = document.querySelector(".btn-confirm").getAttribute("data-id");

    if (!name || !itemId || isNaN(price) || !image) {
      showNotification("Preencha todos os campos corretamente!");
      return;
    }

    if (updateId) {
      // Update existing item
      const id = Number.parseInt(updateId);
      const itemIndex = items.findIndex((i) => i.id === id);
      
      if (itemIndex !== -1) {
        items[itemIndex] = {
          ...items[itemIndex],
          name: name,
          itemId: itemId,
          price: price,
          image: image
        };
        
        // Send update to server
        fetch("https://gorila_shop/updateShopItem", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ 
            item: items[itemIndex]
          })
        });
        
        showNotification("Item atualizado com sucesso!");
      }
    } else {
      // Add new item
      const newId = items.length > 0 ? Math.max(...items.map((item) => item.id)) + 1 : 1;
      const newItem = {
        id: newId,
        name: name,
        itemId: itemId,
        price: price,
        image: image,
        quantity: 1
      };
      
      items.push(newItem);
      
      // Send new item to server
      fetch("https://gorila_shop/addShopItem", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ 
          item: newItem
        })
      });
      
      showNotification("Item adicionado com sucesso!");
    }

    // Close modal
    addItemModal.classList.remove("active");

    // Update admin items
    renderAdminItems();
  }

  // Delete item
  function deleteItem() {
    if (itemToDelete) {
      // Send delete request to server
      fetch("https://gorila_shop/deleteShopItem", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ 
          id: itemToDelete
        })
      });
      
      items = items.filter((i) => i.id !== itemToDelete);
      showNotification("Item excluído com sucesso!");
      renderAdminItems();
      deleteModal.classList.remove("active");
      itemToDelete = null;
    }
  }

  // Save shop configuration
  function saveShopConfig() {
    // Send save request to server
    fetch("https://gorila_shop/saveShopConfig", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ 
        items: items
      })
    });
    
    // Show success animation
    successAnimation.classList.add("active");

    // Hide success animation after 2 seconds
    setTimeout(() => {
      successAnimation.classList.remove("active");
      showNotification("Alterações salvas com sucesso!");
    }, 2000);
  }

  // Close shop function
  function closeShop(purchased = false) {
    document.body.classList.add("fade-out");
    
    setTimeout(() => {
      // Send NUI callback to close the shop
      fetch("https://gorila_shop/closeShop", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ purchased: purchased })
      });
      
      // Reset the view for next time
      isCartVisible = false;
      shopView.style.display = "block";
      cartView.style.display = "none";
      document.body.classList.remove("fade-out");
      document.body.style.display = "none";
    }, 500);
  }

  // Event Listeners
  buyButton.addEventListener("click", toggleView);
  backButton.addEventListener("click", toggleView);
  searchButton.addEventListener("click", searchItems);
  searchInput.addEventListener("keyup", (event) => {
    if (event.key === "Enter") {
      searchItems();
    }
  });

  comprarButton.addEventListener("click", () => {
    if (cart.length === 0) {
      showNotification("Nenhum item selecionado!");
      return;
    }

    // Calculate total
    const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);

    // Send purchase request to server
    fetch("https://gorila_shop/purchaseItems", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ 
        items: cart,
        totalPrice: total
      })
    });
  });

  exitButton.addEventListener("click", () => {
    closeShop(false);
  });

  // Admin panel event listeners
  adminAddButton.addEventListener("click", addNewItem);
  adminSaveButton.addEventListener("click", saveShopConfig);
  adminExitButton.addEventListener("click", () => {
    adminPanel.classList.remove("active");
  });

  // Modal event listeners
  addItemClose.addEventListener("click", () => {
    addItemModal.classList.remove("active");
  });

  addItemCancel.addEventListener("click", () => {
    addItemModal.classList.remove("active");
  });

  addItemSubmit.addEventListener("click", submitItem);

  // Delete confirmation modal event listeners
  cancelDeleteBtn.addEventListener("click", () => {
    deleteModal.classList.remove("active");
    itemToDelete = null;
  });

  confirmDeleteBtn.addEventListener("click", deleteItem);

  // Keyboard events
  document.addEventListener("keydown", (event) => {
    // ESC key to close shop
    if (event.key === "Escape") {
      if (addItemModal.classList.contains("active")) {
        addItemModal.classList.remove("active");
      } else if (deleteModal.classList.contains("active")) {
        deleteModal.classList.remove("active");
        itemToDelete = null;
      } else if (adminPanel.classList.contains("active")) {
        adminPanel.classList.remove("active");
      } else {
        closeShop(false);
      }
    }
  });

  // Initialize - hide UI until triggered by FiveM
  document.body.style.display = "none";
});

// Fix for scroll container
const scrollContainer = document.querySelector('.scroll-container');
if (scrollContainer) {
  scrollContainer.addEventListener('scroll', () => {
    const maxScroll = scrollContainer.scrollHeight - scrollContainer.clientHeight - 44;
    if (scrollContainer.scrollTop > maxScroll) {
      scrollContainer.scrollTop = maxScroll;
    }
  });
}
    </script>
</body>
</html>
