:root {
  --bg-color: #1e1e1e;
  --primary-color: #387070;
  --hover-color: #185050;
  --text-color: #777;
  --border-color: #333;
  --font-family: Arial, sans-serif;
  --font-size-small: 12px;
  --font-size-medium: 14px;
}



body {
  font-family: Arial, sans-serif;
  background-color: #121212;
  color: var(--primary-color);
  line-height: 1.0;
}

h1 {
  font-family: 'Impact', 'Anton', Arial, sans-serif;
}

/* Style the link to look like a regular h1 */
.h1-link {
  text-decoration: none; /* Remove underline */
  color: inherit;        /* Inherit text color from the parent */
}

.h1-link h1 {
  margin: 0;             /* Remove default margin */
  font-family: 'Impact', 'Anton', Arial, sans-serif; /* Match the h1 font */
  font-size: 2em;        /* Adjust font size if needed */
  font-weight: bold;     /* Ensure bold styling */
}


header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  background-color: var(--bg-color);
}

#listings {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.listing {
  border: 1px solid var(--border-color);
  padding: 5px;
  width: 120px;
  border-radius: 5px;
  text-align: center;
  font-size: 14px;
  background-color: var(--bg-color);
}

.listing img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.listing h2 {
  font-size: 14px;
  margin: 5px 0;
}

.listing p {
  font-size: 12px;
  color: var(--text-color);
  margin: 3px 0;
}

.listing a {
  font-size: 12px;
  color: #387070;
  text-decoration: none;
}

.listing a:hover {
  color: #185050;
  text-decoration: underline;
}

.listing.greyed-out {
  opacity: 0.2;
  filter: grayscale(100%);
}

/* Add a "Top Deal" badge to below-average listings */
.listing.below-average {
  position: relative; /* Ensure the badge is positioned relative to the listing */
  background-color: gold;
}

.listing.below-average::before {
  content: "Rock meiniäx deal"; /* Text for the badge */
  position: absolute;
  top: -10px; /* Position above the listing */
  left: 10px; /* Adjust horizontal position */
  background-color: red;
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 3px;
  z-index: 1; /* Ensure it appears above other elements */
}


/* Add a "Top Deal" badge to below-average listings */
.listing.overpriced {
  position: relative; /* Ensure the badge is positioned relative to the listing */
  background-color: var(--bg-color);
}

.listing.overpriced::before {
  content: "Ylihintaa?"; /* Text for the badge */
  position: absolute;
  top: -10px; /* Position above the listing */
  left: 10px; /* Adjust horizontal position */
  background-color: teal;
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 3px;
  z-index: 1; /* Ensure it appears above other elements */
}

#filters {
  position: fixed;
  background-color: #1e1e1e;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  box-sizing: border-box;
  z-index: 1000;
  overflow-x: hidden;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);
}

#filters button,
#filters select,
#filters input {
  min-width: 100px;
  flex: 1 1 calc(50% - 20px);
}

#filters button {
  background-color: #387070;
  color: #fff;
  max-height: 30px;
}

#filters button:hover {
  background-color: #185050;
}

#filters select,
#filters input {
  background-color: #185050;
  color: #fff;
  border: 1px solid #387070;
}

#filters input {
  max-height: 30px;
  
}

@media (max-width: 1000px) {
  #filters input,
  #filters button,
  #filters select {
    flex: 1 1 calc(50% - 20px);
  }
}

@media (max-width: 1000px) {
  #listings {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    box-sizing: border-box;
  }

  .listing {
    width: auto;
    box-sizing: border-box;
    overflow: hidden;
    word-break: break-word;
    justify-self: center; /* center the card in its grid cell */
  }

  .thumbnail-container {
    width: 100% !important;     /* override the 120px rule */
    aspect-ratio: 1 / 1;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--bg-color); /* remove light background */
  }

  .thumbnail-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: transparent;
    margin: 0 auto;
    display: block;
  }
}

.thumbnail-container {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-color);
}

.thumbnail-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: transparent;
}

.thumbnail-container .no-thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #aaa;
  text-align: center;
  width: 100%;
  height: 100%;
  background-color: #387070;
}

.category-info {
  font-size: 0.8em;
  color: #666;
  display: block;
  margin-top: 5px;
}

@media (min-width: 1001px) {
  #filters {
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    width: 300px;
    height: 100%;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  }

  #filters input,
  #filters select,
  #filters button {
    flex: 1 1 auto;
    width: calc(100% - 20px);
    margin: 5px 10px;
  }
}
@media (min-width: 1001px) {
  body {
    position: relative; /* Needed to position the hover zone */
  }

  .right-hover-zone {
    position: fixed;
    top: 0;
    right: 0;
    width: 40px; /* thin hover zone */
    height: 100%;
    z-index: 999;
  }

  #filters {
    position: fixed;
    top: 0;
    bottom: 0;
    right: -240px; /* Hidden off screen initially */
    width: 300px;
    height: 100%;
    background-color: #1e1e1e;
    padding: 2px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 6px;
    overflow-y: auto;
    box-sizing: border-box;
    z-index: 1000;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
    transition: right 0.3s ease;
  }

  .right-hover-zone:hover + #filters,
  #filters:hover {
    right: 0;
  }

  #filters input,
  #filters select,
  #filters button {
    flex: 1 1 auto;
    width: calc(100% - 20px);
    margin: 2px 2px;
  }
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Adjust spacing between elements */
  gap: 10px; /* Optional: Add spacing between the h1 and the button */
}

.header-container h1 {
  margin: 0; /* Remove default margin for better alignment */
}

.header-container a img {
  height: 32px; /* Ensure consistent height for the button */
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: var(--primary-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  position: fixed;
  top: 50%;
  left: 50%;
  
  z-index: 1000;
}

.spinner.hidden {
  display: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.tooltip {
  display: none;
  position: absolute;
  background-color: var(--bg-color); /* Match the site's background color */
  color: var(--primary-color); /* Use the primary color for text */
  padding: 8px; /* Slightly larger padding for better readability */
  border-radius: 5px;
  font-size: var(--font-size-small); /* Use the small font size */
  border: 1px solid var(--border-color); /* Add a border to match the site's theme */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Subtle shadow for better visibility */
  z-index: 1000;
  white-space: pre-line; /* Allow multiline text */
  pointer-events: 'none'; /* Prevent tooltip from interfering with hover events */
}