@import url('https://fonts.googleapis.com/css?family=Manrope');

:root {
    --main-bg-color: #191919;
    --main-text-color: white;
    --font-inter: "Inter", "Inter Fallback";
}

::-webkit-scrollbar {
    height: 2px;
    width: 2px;
}

::-webkit-scrollbar-button {
    background-repeat: no-repeat;
    width: 2px;
    height: 0px;
}

::-webkit-scrollbar-track {
    background-color: #191919;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background-color: #84cc16;
}

::-webkit-scrollbar-thumb:hover {
    opacity: .9;
}

::-webkit-resizer {
    background-repeat: no-repeat;
    width: 1px;
    height: 0px;
}

/* link strart */
a[href="https://vk.com/lastohope"]::before {
    content: url('data:image/svg+xml;utf8,<svg aria-hidden="true" width="24px" height="24px" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><g><path d="M12.9824 19C5.46589 19 1.17864 13.7447 1 5H4.76515C4.88882 11.4184 7.66452 14.1371 9.86314 14.6977V5H13.4086V10.5355C15.5797 10.2973 17.8605 7.77477 18.63 5H22.1754C21.5845 8.41942 19.111 10.9419 17.3521 11.979C19.111 12.8198 21.9282 15.02 23 19H19.0973C18.2591 16.3373 16.1706 14.2773 13.4086 13.997V19H12.9824Z" fill="white"/></g></svg>');
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    width: 24px;
    height: 24px;
}

a[href="https://vk.com/lastohope"]::before {
    content: url('data:image/svg+xml;utf8,<svg aria-hidden="true" width="24px" height="24px" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><g><path d="M12.9824 19C5.46589 19 1.17864 13.7447 1 5H4.76515C4.88882 11.4184 7.66452 14.1371 9.86314 14.6977V5H13.4086V10.5355C15.5797 10.2973 17.8605 7.77477 18.63 5H22.1754C21.5845 8.41942 19.111 10.9419 17.3521 11.979C19.111 12.8198 21.9282 15.02 23 19H19.0973C18.2591 16.3373 16.1706 14.2773 13.4086 13.997V19H12.9824Z" fill="white"/></g></svg>');
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    width: 24px;
    height: 24px;
}

a[href="https://discord.com/invite/CT7Bn6ZmXu"]::before {
    content: url('data:image/svg+xml;utf8,<svg aria-hidden="true" width="24px" height="24px" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><g><path d="M19.6361 5.02282C18.1907 4.35757 16.6648 3.88563 15.0973 3.61903C14.8828 4.00449 14.6888 4.40107 14.5159 4.80712C12.8463 4.5542 11.1484 4.5542 9.47881 4.80712C9.30587 4.40111 9.1118 4.00453 8.8974 3.61903C7.32897 3.88788 5.80205 4.36095 4.35518 5.0263C1.48276 9.29853 0.70409 13.4647 1.09342 17.5716C2.77558 18.821 4.6584 19.7713 6.66003 20.3809C7.11074 19.7716 7.50956 19.1251 7.85226 18.4483C7.20135 18.204 6.57311 17.9024 5.9748 17.5473C6.13227 17.4325 6.28627 17.3142 6.43508 17.1994C8.17601 18.0224 10.0761 18.4491 12 18.4491C13.9238 18.4491 15.8239 18.0224 17.5648 17.1994C17.7154 17.3229 17.8694 17.4412 18.0251 17.5473C17.4257 17.903 16.7963 18.2051 16.1442 18.4501C16.4865 19.1265 16.8853 19.7724 17.3364 20.3809C19.3398 19.7737 21.224 18.8239 22.9065 17.5734C23.3633 12.8106 22.1261 8.68274 19.6361 5.02282ZM8.34541 15.0459C7.26047 15.0459 6.36414 14.0561 6.36414 12.8384C6.36414 11.6208 7.22932 10.6223 8.34195 10.6223C9.45458 10.6223 10.344 11.6208 10.325 12.8384C10.3059 14.0561 9.45112 15.0459 8.34541 15.0459ZM15.6545 15.0459C14.5678 15.0459 13.675 14.0561 13.675 12.8384C13.675 11.6208 14.5401 10.6223 15.6545 10.6223C16.7689 10.6223 17.6514 11.6208 17.6323 12.8384C17.6133 14.0561 16.7602 15.0459 15.6545 15.0459Z" fill="white"/></g></svg>');
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    width: 24px;
    height: 24px;
}

.nav-link[href="/stats"]::before {
    content: url('data:image/svg+xml;utf8,<svg aria-hidden="true" width="24px" height="24px" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><g><path d="M3 17h2v4H3v-4zm6-6h2v10h-2V11zm6-5h2v15h-2V6zm6-3h2v18h-2V3z"/></g></svg>');
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    width: 24px;
    height: 24px;
}
/* link end*/

.product-card-label {
  color: #9aff00;
  border-radius: 10px;
}

.product-card-labels {
    top: 10px;
    left: 10px;
}

.product-card-badge-percentage {
  background-color: rgba(132, 204, 22, 0.64);
  color: #9aff00;
  border-radius: 10px;
    top: 10px;
    right: 10px;
}

.app-wrapper {
  background-color: #191919;
  background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M82.42 180h-1.415L0 98.995v-2.827L6.167 90 0 83.833V81.004L81.005 0h2.827L90 6.167 96.167 0H98.996L180 81.005v2.827L173.833 90 180 96.167V98.996L98.995 180h-2.827L90 173.833 83.833 180H82.42zm0-1.414L1.413 97.58 8.994 90l-7.58-7.58L82.42 1.413 90 8.994l7.58-7.58 81.006 81.005-7.58 7.58 7.58 7.58-81.005 81.006-7.58-7.58-7.58 7.58zM175.196 0h-25.832c1.033 2.924 2.616 5.59 4.625 7.868C152.145 9.682 151 12.208 151 15c0 5.523 4.477 10 10 10 1.657 0 3 1.343 3 3v4h16V0h-4.803c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6s-6-2.686-6-6c0-1.093.292-2.117.803-3h10.394-13.685C161.18.938 161 1.948 161 3v4c-4.418 0-8 3.582-8 8s3.582 8 8 8c2.76 0 5 2.24 5 5v2h4v-4h2v4h4v-4h2v4h2V0h-4.803zm-15.783 0c-.27.954-.414 1.96-.414 3v2.2c-1.25.254-2.414.74-3.447 1.412-1.716-1.93-3.098-4.164-4.054-6.612h7.914zM180 17h-3l2.143-10H180v10zm-30.635 163c-.884-2.502-1.365-5.195-1.365-8 0-13.255 10.748-24 23.99-24H180v32h-30.635zm12.147 0c.5-1.416 1.345-2.67 2.434-3.66l-1.345-1.48c-1.498 1.364-2.62 3.136-3.186 5.14H151.5c-.97-2.48-1.5-5.177-1.5-8 0-12.15 9.84-22 22-22h8v30h-18.488zm13.685 0c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 148h8.01C21.26 148 32 158.742 32 172c0 2.805-.48 5.498-1.366 8H0v-32zm0 2h8c12.15 0 22 9.847 22 22 0 2.822-.53 5.52-1.5 8h-7.914c-.567-2.004-1.688-3.776-3.187-5.14l-1.346 1.48c1.09.99 1.933 2.244 2.434 3.66H0v-30zm15.197 30c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 32h16v-4c0-1.657 1.343-3 3-3 5.523 0 10-4.477 10-10 0-2.794-1.145-5.32-2.992-7.134C28.018 5.586 29.6 2.924 30.634 0H0v32zm0-2h2v-4h2v4h4v-4h2v4h4v-2c0-2.76 2.24-5 5-5 4.418 0 8-3.582 8-8s-3.582-8-8-8V3c0-1.052-.18-2.062-.512-3H0v30zM28.5 0c-.954 2.448-2.335 4.683-4.05 6.613-1.035-.672-2.2-1.16-3.45-1.413V3c0-1.04-.144-2.046-.414-3H28.5zM0 17h3L.857 7H0v10zM15.197 0c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6S4 6.314 4 3c0-1.093.292-2.117.803-3h10.394zM109 115c-1.657 0-3 1.343-3 3v4H74v-4c0-1.657-1.343-3-3-3-5.523 0-10-4.477-10-10 0-2.793 1.145-5.318 2.99-7.132C60.262 93.638 58 88.084 58 82c0-13.255 10.748-24 23.99-24h16.02C111.26 58 122 68.742 122 82c0 6.082-2.263 11.636-5.992 15.866C117.855 99.68 119 102.206 119 105c0 5.523-4.477 10-10 10zm0-2c-2.76 0-5 2.24-5 5v2h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-2c0-2.76-2.24-5-5-5-4.418 0-8-3.582-8-8s3.582-8 8-8v-4c0-2.64 1.136-5.013 2.946-6.66L72.6 84.86C70.39 86.874 69 89.775 69 93v2.2c-1.25.254-2.414.74-3.447 1.412C62.098 92.727 60 87.61 60 82c0-12.15 9.84-22 22-22h16c12.15 0 22 9.847 22 22 0 5.61-2.097 10.728-5.55 14.613-1.035-.672-2.2-1.16-3.45-1.413V93c0-3.226-1.39-6.127-3.6-8.14l-1.346 1.48C107.864 87.987 109 90.36 109 93v4c4.418 0 8 3.582 8 8s-3.582 8-8 8zM90.857 97L93 107h-6l2.143-10h1.714zM80 99c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm20 0c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6z' fill='%23fefeff' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
}

.grid-wrapper {
  background-color: #191919;
}

.recharge-panel-provider {
    background: #2b2b2b;
}

.recharge-panel-provider.selected {
    background: #2b2b2b;
    border: 1px solid #84cc16;
}

.recharge-panel-input-raw {
  color: white;
}

.recharge-panel-bonus {
    background: #84cc162b;
    color: #84cc16;
}

body {
    font-family: 'Manrope';
}

.modal {
  border-radius: 10px;
}

.products-container {
  gap: unset;
}

.select-display,.select-options {
  background-color: #2b2b2b;
}

.select-option:hover {
  background-color: var(--main-bg-color);
}

.select-text {
  color: var(--main-text-color);
}

.empty-box {
  border: unset;
  color: unset;
      border-top: 1px solid #2b2b2b;
  border-radius: unset;
}
.empty-description {
  color: #90909087;
}

.empty-icon {
  background-color: #2b2b2b;
  color: #ffffff;
}

.modal {
  background-color: var(--main-bg-color);
}

.product-modal-title {
  background-color: #2b2b2b;
  border-radius: 10px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.product-modal {
      max-width: 400px;
}

.amount-control-total {
  background-color: #2b2b2b;
  color: white;
}

.amount-control-counter {
  background-color: #2b2b2b;
}

.amount-control-counter-button {
  color: white
}

.navbar {
  /* border-bottom-width: 1px; */
  border-color: #2d2d2d;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  margin-bottom: 0px;
  /* цвет */
  background-color: unset;
}

.wrapper {
  border: 1px solid #2c2c2c;
}

.product-card-name {
  color: white;
}

.product-card-price {
  color: #909090;
}

.product-cards {
  gap: 1px;
  background-color: #2d2d2d;
  border-top-width: 1px;
  border-color: #2d2d2d;
}

.product-card {
  border-radius: 0px;
}

.product-card:hover {
    transform: none;
}

.products-types-buttons {
  justify-content: end;
  padding: 10px;
}

.grid-wrapper {
  grid-template-columns: auto;
  gap: 0px;
}
.auth {
  border-bottom-right-radius: unset;
}

.auth-btn, profile-btn {
  border-bottom-right-radius: unset;
}

.auth-btn:hover, profile-btn:hover {
    background-color: #2b2b2b;
}

.search-input,.servers-buttons {
  display: none;
}

.no-products {
  aspect-ratio: 3 / 4;
    height: 100%;
  width: 100%;
}

/* Контейнер для паттерна */
.pattern-lines {
    position: relative;          /* чтобы потом можно было позиционировать содержимое */
    width: 100%;                 /* растягиваем на всю ширину родителя */
    height: 150px;               /* высота блока, можно менять */
    overflow: hidden;            /* обрезаем всё лишнее */
    pointer-events: none;        /* чтобы не мешал клику */
    background-color: var(--main-bg-color);   /* фон под паттерн, можно любой */

    //
    aspect-ratio: 3 / 4;
    height: 100%;
}

/* Линии поверх фона */
.pattern-lines::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  background-image: repeating-linear-gradient(
        45deg,
        #2d2d2d,  /* белая полоса, можно регулировать прозрачность */
        #2d2d2d 1px, /* толщина линии */
        transparent 1px,
        transparent 10px
    );
}

.product-modal > div:first-of-type {
    border-radius: 10px;
    width: 90%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.04) 100%);
    transform: skewX(-16deg);
}

.product-modal > div:first-of-type > img {
  transform: skewX(+16deg);
}

///
th, td {
  border: 1px solid black;
  border-collapse: collapse;
  border-radius: 10px;
  border-color: #2b2b2b;
}

.product-modal-description table thead {
    display: none;
}

table {
  width: 100%;
  border: 1px solid black;
  border-collapse: collapse;
  border-radius: 10px;
  border-color: #2b2b2b;
}

header {
  position: sticky;
  top: 0;
  z-index: 999; /* чтобы был поверх контента */
  /* backdrop-filter: blur(24px); */
  background-color: var(--main-bg-color);

  /* Чтобы блюр работал в Safari */
  -webkit-backdrop-filter: blur(24px);
}

.products-types-buttons {
  position: sticky;
  top: 72px; /* высота header */
  z-index: 900;
  background: unset;
  padding: 10px 10px;
  border-top-width: 1px;
  border-color: #2d2d2d;
  backdrop-filter: blur(24px);
  
  /* Чтобы блюр работал в Safari */
  -webkit-backdrop-filter: blur(24px);
}

.product-cards {
    grid-template-columns: repeat(5, 1fr);

    @media (max-width: 1200px) {
        grid-template-columns: repeat(3, 1fr);
    }

    @media (max-width: 700px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media (max-width: 500px) {
        grid-template-columns: repeat(1, 1fr);
    }
}

.product-card-image-container img {
  transition: transform 0.3s ease;
}

.product-card-image-container:hover img {
  transform: scale(0.95); /* картинка немного уменьшается */
}

.nav-item, .language-switcher, .profile-btn, .auth-btn {
  margin-top: auto;
  margin-bottom: auto;
  height: 36px;                   /* h-9 */
  border-radius: 6px;
}

.lang-label {
    margin-top: auto;
    margin-bottom: auto;
    height: 36px;
    border-radius: 6px;
    padding: 8px 12px;
}

/* === кнопка с поп === */
.balance-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;

  padding: 8px 12px;              /* px-3 py-2 */
  background: #2b2b2b;
  color: #ffffff;
  margin-top: auto;
  margin-bottom: auto;
  height: 36px;                   /* h-9 */
  padding: 8px 12px;              /* px-3 py-2 */
  font-size: 14px;                /* text-sm */
  font-weight: 600;               /* font-semibold */
  border-radius: 6px;             /* rounded-md */
  cursor: pointer;
  user-select: none;
  transition: background-color 160ms ease, opacity 160ms ease;
}

/* Светящийся кружок справа */
.balance-btn::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background: #FE9E26;
  filter: blur(10px);             /* blur-lg */
  border-radius: 50%;
  pointer-events: none;
}

/* Hover — эффект "bg-secondary/80" */
.balance-btn:hover {
  background: var(--main-bg-color);
}

/* Active (необязательно, но как в кнопке) */
.balance-btn:active {
  transform: translateY(1px);
}

/* Disabled аналог disabled:pointer-events-none + opacity-50 */
.balance-btn.disabled,
.balance-btn[disabled] {
  pointer-events: none;
  opacity: 0.5;
}


/* === Анимированный фон с предметами === */
.shop-banner-section {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    /* margin: 20px 0; */
    padding: 40px 20px;
    font-family: 'Manrope', sans-serif;
}

.items-marquee-wrapper {
    position: absolute;
    top: -100px;
    right: 20px;
    width: 500px;
    height: 600px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
    display: none;
}

@media (min-width: 1024px) {
    .items-marquee-wrapper {
        display: block;
    }
}

.items-marquee {
    position: relative;
    width: 100%;
    height: 100%;
    transform: rotate(20deg) translateX(32px);
}

.marquee-column {
    position: absolute;
    top: 0;
    left: 40%;
    width: 120px;
    margin-left: -60px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: marquee-vertical 30s linear infinite;
    animation-direction: var(--direction, normal);
}

.marquee-column:nth-child(2) {
    left: 70%;
    animation-delay: -15s;
}

@keyframes marquee-vertical {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

.marquee-item {
    width: 90(signal)px;
    height: 90px;
    background: rgba(30, 30, 30, 0.6);
    border-radius: 12px;
    padding: 4px;
    box-shadow: 0 -20px 70px -20px rgba(255,255,255,0.06) inset;
    flex-shrink: 0;
}

.marquee-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    filter: contrast(0.9) brightness(1.2);
}

/* Контент поверх фона */
.shop-banner-content {
    position: relative;
    z-index: 1;
    max-width: 580px;
    padding: 20px;
    color: white;
}

.shop-banner-content h1 {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 12px 0;
    color: #fff;
}

.shop-subtitle {
    margin-top: 8px;
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    background: linear-gradient(120deg, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 60%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    color: #90909087;
    /* color: #aaaaaa; */
    margin: 0 0 20px 0;
    animation: shine 5s linear infinite;
}
@keyframes shine {
    to { background-position: 200% 0; }
}

.bonus-highlight {
    font-weight: 600;
}

.shop-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.shop-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.925rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.shop-btn.primary {
    background: #84cc16;
    color: white;
}

.shop-btn.primary:hover {
    background: #70a811;
}

.shop-btn.secondary {
    background: #2b2b2b;
    color: #ccc;
    border: 1px solid #444;
}

.shop-btn.secondary:hover {
    background: #3a3a3a;
    color: white;
}

.recharge-panel-input {
  background-color: #2b2b2b;
  color: white;
  border: unset;
}

.recharge-panel-input-raw::placeholder {
    color: white;
}

.recharge-panel-label, recharge-panel-input-raw {
  color:white;
}

.modal-close-button-text {
  color: unset;
}

.modal-primary-button {
    background-color: #84cc16;
}

.modal-footer-buttons {
  margin-right: 2rem;
  margin-left: 2rem;
}

.modal-primary-button {
  background-color: #84cc16;
  border-radius: 10px;
  padding-right: 2rem;
}

.navbar {
    flex-direction: row !important;
    border: unset !important;
}


.scroll-top-btn {
  color: white;
  background-color: #84cc16;
    border-radius: 10px;
}

.scroll-top-btn:hover {
  color: white;
  background-color: #84cc16;
    border-radius: 10px;
  opacity: .9;
}

.amount-control-counter-button:hover {
  background: none;
  background-color: #84cc16;
  opacity: .9;
}


/*  profile */
.table thead {
    background: #0000000d;
}

.form {
  background-color: #191919;
  border: 1px solid black;
  border-color: #2b2b2b;
  border-radius: 0px;
}

.form input, form input {
  background-color: #2b2b2b !important;
    color: white !important;
    border: unset !important;
}

text-input {
  background-color: #2b2b2b;
  color: white;
  border: unset;
}

.text-input.disabled {
  background-color: #2b2b2b;
    color: white;
    border: unset;
}

.app-button--success, .scroll-top-btn {
  color: white;
  background-color: #84cc16;
    border-radius: 10px;
}

.app-button--success:hover, .scroll-top-btn {
  color: white;
  background-color: #84cc16;
    border-radius: 10px;
  opacity: .9;
}

.profile-sidebar__header {
  display: none;
}

.profile-sidebar__list {
  display: flex;
}

/* profile end  */

.roulette-prize-card {
  background-color: #2b2b2b;
}

.roulette-item {
  background-color: #191919;
}

.roulette-window {
    border-left: 2px solid #84cc16;
    border-right: 2px solid #84cc16;
}

.roulette-track {
  background-color: #2b2b2b;
}

@media (max-width: 1290px) {
    .wrapper {
        margin: unset;
    }
}