@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Play:wght@400;700&display=swap');

:root {
   --red-color: #D94848;
   --main-gradient: linear-gradient(135deg, #191D21 0%, #1D1D2E 100%);
   --main-color: #171717;
   --gray-gradient: linear-gradient(0deg, #171717fa 0%, #181818 100%);
   --dark-gray: #242424;
   --light-gray: #cacaca;
   --med-gray: #666;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Play', sans-serif;
}

body {
   background: var(--main-gradient);
   min-height: 100vh;
   padding: 5px;
   color: #333;
   overflow-x: hidden;
   max-width: 100vw;
   position: relative;
}


.container {
   max-width: 1200px;
   margin: 0 auto;
   background: none;
   border-radius: 15px;
   position: relative;
}

header {
   background: linear-gradient(0deg, #171717fa 0%, #181818 100%);
   color: white;
   padding: 30px;
   text-align: center;
   border-radius: 15px 15px 0 0;
}

header a {
   text-decoration: none;
}

header a:hover {
   color: var(--red-color);
}

a:visited,
a:active {
   color: white;
}

h1 {
   font-size: 2.5em;
   margin-bottom: 10px;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.subtitle {
   font-size: 1.1em;
   opacity: 0.9;
}

.search-section {
   padding: 15px;
   position: sticky;
   top: 0;
   z-index: 100;
   background: var(--main-color);
   margin: 0;
   border-radius: 0 0 20px 20px;
}

.search-container {
   display: flex;
   gap: 15px;
   max-width: 800px;
   margin: 0 auto;
   flex-wrap: wrap;
}

.search-bar {
   position: relative;
   display: flex;
   align-items: center;
   min-width: 500px;
}

.search-bar i {
   position: absolute;
   right: 10px;
   margin-right: 10px;
   color: var(--med-gray);
   font-size: 16px;
}

.search-bar:hover i {
   color: var(--red-color);
}

.search-bar ::placeholder {
   color: var(--light-gray);
}

.search-bar input {
   flex: 2;
   background: var(--dark-gray);
   color: white;
   padding: 15px 20px;
   border: 2px solid var(--med-gray);
   border-radius: 10px;
   font-size: 15px;
   outline: none;
   transition: border-color 0.3s ease;
}

.search-bar:hover input {
   border-color: var(--red-color);
}

.search-bar input:focus {
   border-color: var(--red-color);
}

.search-bar:focus-within i {
   color: var(--red-color);
}

::-webkit-input-placeholder {
   color: white;
}

/* === ?? Кастомный выпадающий список === */
.custom-select {
   position: relative;
   width: 220px;
   user-select: none;
   min-width: 200px;
   z-index: 200;
}

/* Выбранный элемент */
.select-selected {
   background: var(--dark-gray);
   color: white;
   padding: 14px 45px 14px 20px;
   border-radius: 10px;
   border: 2px solid var(--med-gray);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: space-between;
   transition: border-color 0.3s ease, color 0.3s ease;
   position: relative;
}

.select-selected:hover {
   border-color: var(--red-color);
}

/* Иконка стрелки */
.select-selected i {
   position: absolute;
   right: 15px;
   font-size: 14px;
   color: var(--light-gray);
   transition: transform 0.3s ease, color 0.3s ease;
}

.select-selected:hover i {
   color: var(--red-color);
}

/* Анимация поворота стрелки при открытии */
.custom-select.open .select-selected i {
   transform: rotate(180deg);
   color: var(--red-color);
}

/* Выпадающий список */
.select-items {
   position: absolute;
   background: var(--dark-gray);
   border-radius: 10px;
   width: 100%;
   top: 110%;
   left: 0;
   display: none;
   z-index: 300;
   max-height: 220px;
   overflow-y: auto;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
   border: 2px solid var(--med-gray);
   scrollbar-width: none;
   -ms-overflow-style: none;
}

.select-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.7);
   z-index: 5;
   backdrop-filter: blur(5px);
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s ease;
}

.custom-select.open+.select-overlay {
   opacity: 1;
   pointer-events: all;
}

.custom-select.open .select-items {
   display: block;
   animation: fadeIn 0.15s ease;
}

/* Элементы списка */
.select-items div {
   padding: 12px 20px;
   cursor: pointer;
   transition: background 0.2s ease, color 0.2s ease;
   color: white;
   font-size: 15px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Последнему элементу убираем границу */
.select-items div:last-child {
   border-bottom: none;
}

/* Ховер по пункту */
.select-items div:hover {
   background: var(--red-color);
   color: #fff;
}

/* Скругления на краях при наведении */
.select-items div:first-child:hover {
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
}

.select-items div:last-child:hover {
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
}

/* Скрываем скроллбар */
.select-items::-webkit-scrollbar {
   width: 0;
   height: 0;
}

/* Анимация появления */
@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(-5px);
   }

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

.results-section,
.marketplaces-section {
   padding: 20px;
   background: linear-gradient(135deg, #1d1d1d 0%, #131313 100%);
   border-radius: 20px;
}

/* Стили для табличного вида результатов */
.search-info {
   margin-bottom: 20px;
   padding: 15px;
   background: var(--dark-gray);
   border-radius: 10px;
}

.search-info h3 {
   color: var(--light-gray);
   margin-bottom: 5px;
}

.search-info p {
   color: var(--light-gray);
   margin: 0;
}

.search-info strong {
   color: var(--red-color);
   margin: 0;
}

.table-container {
   width: 100%;
   overflow-x: auto;
   margin-top: 10px;
   border-radius: 10px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.results-table {
   width: 100%;
   border-collapse: collapse;
   min-width: 600px;
   background-color: var(--dark-gray);
}

.results-table th {
   padding: 12px;
   text-align: left;
   border-bottom: 2px solid #e9ecef;
   position: sticky;
   top: 0;
   color: var(--main-color);
   background-color: var(--red-color);
}

.results-table td {
   background-color: var(--main-color);
   color: var(--light-gray);
   padding: 10px 12px;
   border-bottom: 1px solid var(--dark-gray);
}

.results-table tr:hover {
   background: var(--dark-gray);
}

.results-table tr:last-child td {
   border-bottom: none;
}

.results-table th:first-child,
.results-table td:first-child {
   text-align: center;
}

.price {
   font-weight: bold;
   color: #28a745 !important;
}

.quantity {
   color: #6c757d;
}

.seller {
   color: #495057;
}


.marketplace {
   color: #6c757d;
   font-weight: 500;
}

.sort-controls {
   display: flex;
   padding: 10px;
   border-radius: 10px;
   background: var(--main-color);
   align-items: center;
   gap: 8px;
   margin-bottom: 20px;
}

.sort-controls label {
   font-weight: 500;
   color: #cecece;
}

.sort-controls select {
   padding: 8px;
   border-radius: 10px;
   border: 2px solid var(--red-color);
   background-color: var(--dark-gray);
   color: var(--light-gray);
}

.loading {
   text-align: center;
   padding: 40px;
   font-size: 1.2em;
   color: #6c757d;
   display: none;
}

.error {
   background: #f8d7da;
   color: #721c24;
   padding: 20px;
   border-radius: 10px;
   margin: 20px 0;
   text-align: center;
   display: none;
}

/* Вкладки */
.results-tabs-container {
   width: 100%;
   background: #aaaaaa;
   border-bottom: 1px solid #e9ecef;
   margin-bottom: 20px;
}

.results-tabs {
   display: flex;
   width: 100%;
}

.results-tab-button {
   flex: 1;
   padding: 15px 20px;
   background: none;
   border: none;
   cursor: pointer;
   font-size: 16px;
   font-weight: 500;
   color: #6c757d;
   transition: all 0.3s ease;
   border-bottom: 3px solid transparent;
   text-align: center;
   min-width: 0;
}

.results-tab-button:hover {
   background: #e9ecef;
   color: #495057;
}

.results-tab-button.active,
.tab-button.active {
   color: var(--red-color);
   border-bottom: 3px solid var(--red-color);
   background: var(--dark-gray);
   font-weight: bold;
}

.results-tab-content {
   display: none;
}

.results-tab-content.active {
   display: block;
}

.no-data {
   text-align: center;
   padding: 40px;
   color: #6c757d;
   font-style: italic;
}

/* Секция лавок */
.marketplaces-section {
   padding: 20px;
   display: none;
}

.marketplaces-list {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 15px;
}

.marketplace-card {
   background: var(--dark-gray);
   border-radius: 10px;
   padding: 20px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s ease;
}

.marketplace-card:hover {
   transform: translateY(-5px);
}

.marketplace-header {
   display: flex;
   align-items: center;
   gap: 15px;
   padding: 8px;
}

.marketplace-icon i {
   font-size: 64px;
   color: var(--med-gray);
}

.marketplace-info h3 {
   color: #cfcfcf;
   margin-bottom: 5px;
   font-size: 1.2em;
}

.marketplace-details {
   display: flex;
   justify-content: space-between;
   margin: 15px 0;
   align-items: center;
}

.marketplace-detail {
   display: flex;
   flex-direction: column;
}

.marketplaces-count {
   display: block;
   color: var(--light-gray);
   align-items: left;
   margin-bottom: 1rem;
   padding: 0.75rem 1rem;
   background-color: var(--dark-gray);
   border-radius: 10px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.marketplaces-count strong {
   color: var(--red-color);
}

.detail-label {
   color: var(--red-color);
   font-weight: 700;
}

.detail-value {
   display: block;
   color: var(--light-gray);
   font-weight: 500;
}

.view-marketplace-btn {
   width: 100%;
   padding: 12px;
   background: #181818;
   color: white;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   font-weight: bold;
   transition: transform 0.2s ease;
}

.view-marketplace-btn:hover {
   background: var(--red-color);
   color: var(--main-color);
   transition: 0.3s ease, color 0.3s ease;
}

/* Модальное окно */
.modal {
   display: none;
   position: fixed;
   z-index: 1000;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(5px);
}

.modal-content {
   background-color: white;
   margin: 5% auto;
   padding: 0;
   border-radius: 10px;
   width: 90%;
   max-width: 800px;
   max-height: 80vh;
   overflow: hidden;
}

.modal-header {
   background: linear-gradient(0deg, #1a1a1afa 0%, #171717 100%);
   color: white;
   padding: 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.close {
   color: white;
   font-size: 28px;
   font-weight: bold;
   cursor: pointer;
}

.close:hover {
   color: var(--red-color);
}

.modal-body {
   background: #242424;
   max-height: 60vh;
   overflow-y: auto;
   padding: 20px;
}

.modal-body p,
.modal-body strong {
   color: #dfdfdf;
}

.modal-tabs {
   display: flex;
   background: #aaaaaa;
}

.tab-button {
   flex: 1;
   padding: 15px 20px;
   background: none;
   border: none;
   cursor: pointer;
   font-size: 16px;
   font-weight: 500;
   color: #6c757d;
   transition: all 0.3s ease;
   border-bottom: 3px solid transparent;
}

.tab-button:hover {
   background: #e9ecef;
   color: #495057;
}

.tab-button.active {
   color: var(--red-color);
   border-bottom: 3px solid var(--red-color);
   background: var(--dark-gray);
}

.tab-content {
   display: none;
   padding: 0;
}

.tab-content.active {
   display: block;
}

.modal-items-table {
   width: 100%;
   border-collapse: collapse;
   margin-top: 0;
   background: var(--main-color);
   color: var(--light-gray);
   border-radius: 10px;
}

.modal-items-table tr {
   height: 48px;
}

.modal-items-table th {
   padding: 12px;
   text-align: left;
   border-bottom: 2px solid #e9ecef;
   position: sticky;
   top: 0;
   color: var(--main-color);
   background-color: var(--red-color);
}

.modal-items-table td {
   padding: 10px 12px;
   vertical-align: middle;
   height: 64px;
   border-bottom: 1px solid var(--dark-gray);
}

.modal-items-table td:first-child,
.modal-items-table th:first-child {
   text-align: center;
}

.no-items {
   text-align: center;
   padding: 40px;
   color: #6c757d;
   font-style: italic;
}

.premium-lavka {
   background: linear-gradient(45deg, #c300ff, #E6BE8A, #D4AF37, #FFD700, #E6BE8A);
   background-size: 400% 400%;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   animation: premium-glow 3s ease infinite;
   font-weight: 700;
}

.premium-icon {
   display: inline-block;
   background: linear-gradient(45deg, #c300ff, #E6BE8A, #D4AF37, #FFD700, #E6BE8A);
   background-size: 400% 400%;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: premium-glow 3s ease infinite;
}

/* Размер SVG и включение перелива */
.fa-store-svg {
   width: 64px;
   height: 64px;
   fill: currentColor;
}

/* Та же анимация, что и у текста */
@keyframes premium-glow {
   0% {
      background-position: 0% 50%;
   }

   50% {
      background-position: 100% 50%;
   }

   100% {
      background-position: 0% 50%;
   }
}

.modal-premium-lavka {
   background: linear-gradient(45deg, #c300ff, #E6BE8A, #D4AF37, #FFD700);
   background-size: 400% 400%;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   animation: premium-glow 3s ease infinite;
   font-weight: 700;
   font-size: 1.3em;
}

.count-sell {
   background-color: #28a745;
   color: #0b5a1d;
   border-radius: 3px;
}

.count-buy {
   background-color: #a73128;
   color: #69100a;
   border-radius: 3px;
}

.marketplace-count-info {
   display: block;
   gap: 5px;
}

.marketplace-count-info span {
   display: block;
   width: 54px;
   text-align: left;
   position: relative;
   cursor: help;
   margin-bottom: 5px;
}

.marketplace-count-info i {
   font-size: 10px;
   vertical-align: middle;
   padding-left: 5px;
   padding-right: 5px;
}

/* Сам tooltip */
.marketplace-count-info span::after {
   content: attr(data-tooltip);
   position: absolute;
   bottom: 120%;
   left: 50%;
   transform: translateX(-50%);
   background-color: rgba(0, 0, 0, 0.8);
   color: #fff;
   padding: 5px 8px;
   border-radius: 4px;
   white-space: nowrap;
   font-size: 12px;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s;
   z-index: 10;
}

/* Стрелка для tooltip */
.marketplace-count-info span::before {
   content: "";
   position: absolute;
   bottom: 110%;
   /* чуть ниже текста подсказки */
   left: 50%;
   transform: translateX(-50%);
   border-width: 5px;
   border-style: solid;
   border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
   opacity: 0;
   transition: opacity 0.2s;
   pointer-events: none;
}

/* Показ при наведении */
.marketplace-count-info span:hover::after,
.marketplace-count-info span:hover::before {
   opacity: 1;
}

.update-notification,
.status-indicator,
#temp-loading {
   max-width: calc(100vw - 40px) !important;
   box-sizing: border-box !important;
   left: 20px !important;
   right: 20px !important;
   word-wrap: break-word !important;
}

.item-icon {
   width: 32px;
   height: 32px;
   object-fit: contain;
   border-radius: 4px;
   background: #00000022;
}

.item-with-icon {
   display: flex;
   align-items: center;
   gap: 6px;
   height: 100%;
   box-sizing: border-box;
}

.item-with-icon img.item-icon {
   flex-shrink: 0;
   width: 48px;
   height: 48px;
   object-fit: contain;
   border-radius: 4px;
}

/* ?? Адаптивность для мобильных устройств */
@media (max-width: 768px) {

   .container {
      margin: 10px;
      border-radius: 15px;
   }

   header {
      padding: 20px;
   }

   h1 {
      font-size: 2em;
   }

   .search-section {
      padding: 15px;
      position: sticky;
      top: 0px;
      margin: 0;
   }

   .search-container {
      flex-direction: column;
      gap: 10px;
   }

   .search-bar {
      min-width: auto;
   }

   .custom-select {
      width: 100%;
      min-width: auto;
   }

   .results-section,
   .marketplaces-section {
      padding: 15px;
   }

   .marketplaces-list {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   }

   .marketplace-card {
      font-size: 14px;
   }

   .modal-content {
      width: 95%;
      margin: 10% auto;
   }

   .modal-body {
      padding: 15px;
   }

   .results-tab-button,
   .tab-button {
      padding: 12px 15px;
      font-size: 14px;
   }

   .results-table th,
   .results-table td {
      padding: 10px 8px;
      font-size: 14px;
   }

   .results-table th {
      padding: 12px 8px;
   }

   .modal-items-table th,
   .modal-items-table td {
      padding: 8px 10px;
      font-size: 12px;
   }

   .view-lavka-btn {
      padding: 6px 10px;
      font-size: 11px;
   }

   .marketplace-icon i {
      font-size: 36px;
   }

   .marketplace-count-info span {
      width: 40px;
      font-size: 11px;
   }

   .tlg-icon {
      width: 36px;
      height: 36px;
   }
}

/* Для очень маленьких экранов */
@media (max-width: 480px) {

   .container {
      margin: 5px;
      border-radius: 12px;
   }

   .results-table th,
   .results-table td {
      padding: 8px 6px;
      font-size: 12px;
   }

   .search-info h3 {
      font-size: 1em;
   }

   .search-info p {
      font-size: 0.9em;
   }

   .price,
   .quantity,
   .seller,
   .marketplace {
      font-size: 11px;
   }

   .modal-items-table th,
   .modal-items-table td {
      padding: 6px 8px;
      font-size: 11px;
   }

   .marketplaces-list {
      grid-template-columns: 1fr;
   }

   .search-section {
      padding: 12px;
      top: 5px;
      /* Меньший отступ на маленьких экранах */
      border-radius: 0 0 12px 12px;
   }
}