*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  user-select: none;
  -webkit-user-drag: none;
}

body {
  display: none;
  width: 100vw;
  height: 100vh;
  background: url(img/bg.png);
  font-family: "Gilroy";
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

::-webkit-scrollbar {
  width: 12px; /* width of the entire scrollbar */
}

::-webkit-scrollbar-track {
  background: rgba(255, 166, 0, 0); /* color of the tracking area */
}

::-webkit-scrollbar-thumb {
  background-color: rgb(66, 66, 66); /* color of the scroll thumb */
  border-radius: 20px; /* roundness of the scroll thumb */
  border: 3px solid rgba(255, 166, 0, 0); /* creates padding around scroll thumb */
}

.header_page {
  margin-top: 2.552vw;
  margin-left: 2.552vw;
  overflow: visible;

  display: flex;
  align-items: center;
  gap: 1vw;
  flex-wrap: nowrap;

  height: 4.74vw;
  width: 60.875vw;
}

h1::after {
  overflow: visible;
  position: absolute;
  top: 2.5vw;
  right: 0vw;
  content: "";
  text-shadow: 0px 4px 2.005vw rgba(255, 255, 255, 0.25);
  -webkit-text-stroke-width: 2;
  -webkit-text-stroke-color: #fff;
  transform: rotate(-10deg);
  font-size: 1.771vw;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  background: linear-gradient(180deg, #fff 0%, #737373 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h1 {
  position: relative;
  overflow: visible;
  text-shadow: 0px 0px 1.521vw rgba(255, 133, 20, 0.36);
  font-weight: 900;
  font-size: 3.698vw;
  background: linear-gradient(267deg, #ff7a00 -15.46%, #ffa34e 86.6%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.info {
  width: 36.875vw;
  height: 3.073vw;
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.833vw;
  font-weight: 400;
}

.tabs {
  margin-top: 1vw;
  margin-left: 2.552vw;
  width: 60vw;
  display: flex;
  align-items: start;
  justify-content: start;
  gap: 1.667vw;
}

.tabs div {
  width: fit-content;
  height: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  border-radius: 0.729vw;
  height: 3.552vw;
}

.tabs div span {
  color: rgba(207, 207, 207, 0.6);
  font-size: 1.615vw;
  font-style: normal;
  background: url(img/menu_border.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  font-weight: 800;
  padding: 0.7vw 2vw;
}

.tabs div:hover span {
  cursor: pointer;
  background: url(img/menu_border_hover.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffe0c3;
}

.tabs div span.active_menu {
  background: url(img/menu_border_hover.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffe0c3;
}

.coin_status {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.2vw;
  margin-left: 9vw;
}

.coin_status img {
  width: 3.646vw;
  height: 3.646vw;
}

.coin_status span {
  overflow: visible;
  color: #ffa34e;
  leading-trim: both;
  text-edge: cap;
  text-shadow: 0px 0px 1.245vw rgba(255, 163, 78, 0.55);
  font-size: 1.146vw;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.plus_coin img {
  width: 1.51vw;
  height: 1.51vw;
}
.plus_coin:hover {
  cursor: pointer;
}

.menu {
  margin-left: 2.552vw;
  margin-top: 1vw;
  display: flex;
  width: 62.521vw;
  height: 38.646vw;
  align-items: flex-start;
  align-content: flex-start;
  gap: 2.083vw;
  overflow-y: scroll;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.box_menu {
  padding: 0.3vw 0.6vw;
  background: url(img/box_Menu.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 10.417vw;
  height: 10.417vw;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: end;
  gap: 0vw;
}

.box_menu img {
  width: 7.396vw;
  height: 4.167vw;
  object-fit: contain;
  align-self: center;
  margin-top: 0.3vw;
  margin-bottom: 0.6vw;
}

.box_menu .count,
.box_menu .nameItem {
  font-size: 1.3vw;
  font-style: normal;
  font-weight: 1000;
  line-height: normal;
  background: linear-gradient(180deg, #fff 0%, rgba(153, 153, 153, 0.52) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.box_menu .price {
  overflow: visible;
  color: #ffa34e;
  text-shadow: 0px 0px 0.854vw rgba(255, 164, 78, 0.651);
  font-size: 0.9vw;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}

.box_menu:hover {
  cursor: pointer;
  background: url(img/box_Menu_hover.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.ask_sure {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(
    180deg,
    rgba(26, 19, 14, 0.72) 0%,
    rgba(0, 0, 0, 0.72) 100%
  );
  backdrop-filter: blur(4.800000190734863px);
  gap: 1vw;
}

.ask_sure .sureTEXT {
  leading-trim: both;
  text-edge: cap;
  font-size: 3.646vw;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  background: linear-gradient(180deg, #fff 0%, #999 149.11%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn_sure {
  display: flex;
  flex-direction: row;
  gap: 1vw;
}

.btn_sure button {
  display: inline-flex;
  padding: 1.302vw 2.865vw;
  justify-content: center;
  align-items: center;
  gap: 10px;
  leading-trim: both;
  text-edge: cap;
  font-size: 2.083vw;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  border-radius: 0.729vw;
  opacity: 0.8;
}

.btn_sure button:hover {
  cursor: pointer;
  opacity: 1;
}

.confirmBTN {
  border: var(--borderRadius, 4px) solid #374904;
  background: linear-gradient(
    180deg,
    rgba(219, 255, 0, 0.58) 0%,
    rgba(132, 153, 0, 0.58) 159.49%
  );
  color: #303606;
}
.cancelBTN {
  border: var(--borderRadius, 4px) solid #490404;
  background: linear-gradient(
    180deg,
    rgba(255, 0, 0, 0.58) 0%,
    rgba(153, 0, 0, 0.58) 159.49%
  );
  color: #360606;
}

.yesBTN {
  border: var(--borderRadius, 4px) solid #374904;
  background: linear-gradient(
    180deg,
    rgba(219, 255, 0, 0.58) 0%,
    rgba(132, 153, 0, 0.58) 159.49%
  );
  color: #303606;
}

.noBTN {
  border: var(--borderRadius, 4px) solid #490404;
  background: linear-gradient(
    180deg,
    rgba(255, 0, 0, 0.58) 0%,
    rgba(153, 0, 0, 0.58) 159.49%
  );
  color: #360606;
}

.ask_sure .box_menu .price {
  color: #ffa34e !important;
}

.coin_menu {
  /* background-color: #360606; */
  width: 62vw;
  height: 39.792vw;
  margin-left: 2.552vw;
  margin-top: 1vw;
  display: none;
  flex-wrap: wrap;
  gap: 2vw;
  overflow-y: scroll;
}

.coin_box_menu:hover {
  cursor: pointer;
  background: url(img/coin_box_hover.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.coin_box_menu {
  width: 18.698vw;
  height: 18.698vw;
  background: url(img/coin_box.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
}

.count_coin {
  overflow: visible;
  margin-right: 1vw;
  margin-top: 0.3vw;
  align-self: flex-end;
  color: #ffa34e;
  leading-trim: both;
  text-edge: cap;
  text-shadow: 0px 0px 23.9px rgba(255, 163, 78, 0.55);
  font-size: 2.083vw;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.coin_box_menu img {
  width: 11.771vw;
  height: 11.771vw;
}

.price_coin {
  color: #daff70;
  leading-trim: both;
  text-edge: cap;
  font-size: 2.396vw;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}

.order_page {
  display: none;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(26, 19, 14, 0.72) 0%,
    rgba(0, 0, 0, 0.72) 100%
  );
  backdrop-filter: blur(0.25vw);

  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1vw;
}

.text_write_order {
  background: linear-gradient(180deg, #fff 0%, #999 149.11%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  leading-trim: both;
  text-edge: cap;
  font-size: 70px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.order_code_input {
  font-size: 2vw;
  padding: 1vw;
  color: white;
  font-weight: 600;
}

.order_code_input:focus {
  outline: none;
}

.order_code_input {
  width: 27.448vw;
  height: 3.802vw;
  border-radius: 14px;
  border: 3px solid rgba(255, 255, 255, 0.12);
  background: radial-gradient(
    76.22% 67.45% at 50% 49.79%,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(71, 45, 30, 0) 100%
  );
}

.exit {
  position: absolute;
  right: 2vw;
  top: 2vw;
  opacity: 0.7;
}

.exit:hover {
  cursor: pointer;
  opacity: 1;
}

.information {
  font-size: 0.9vw;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  padding: 1.2vw;
  background: rgba(0, 0, 0, 0.85);
  border-left: 4px solid #ff6b00;
  border-radius: 0.8vw;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  width: 70%;
  max-width: 15vw;
  text-align: left;
  opacity: 0;
  position: fixed; /* Changed from absolute to fixed for better cursor following */
  transform: translate(10px, 10px); /* Offset from cursor */
  transition: opacity 0.3s ease;
  z-index: 999;
  backdrop-filter: blur(5px);
  pointer-events: none;
  visibility: hidden;
}

.box_menu:hover .information {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

/* Cursor following setup */
.menu {
  position: relative;
}

.box_menu {
  position: relative;
}

/* Add this to your script.js file:
$(document).on('mousemove', function(e) {
  if($('.information:visible').length) {
    $('.information:visible').css({
      'left': e.pageX,
      'top': e.pageY
    });
  }
});
*/