/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Fonts and Colors - 2
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
:root {
    /* Color Palette */
    --black: #000000; /* rgb(0, 0, 0) */
    --transparent-black: rgba(0, 0, 0, .5);
    --transparent-black-variant: rgba(0, 0, 0, .3);
    --white: #ffffff; /* rgb(255, 255, 255) */
    --dark-red: #994043; /* rgb(153, 64, 67) */
    --red: #ed6467; /* rgb(237, 100, 103) */
    --light-red: #ed9798; /* rgb(237, 151, 152) */
    --transparent-red: rgba(237, 100, 103, .8);
    --dark-orange: #c48140; /* rgb(196, 129, 64) */
    --orange: #ffa853; /* rgb(255, 168, 83) */
    --light-orange: #ffd479; /* rgb(255, 212, 121) */
    --transparent-orange: rgba(255, 168, 83, .8);
    --dark-yellow: #c9aa40; /* rgb(201, 170, 64) */
    --yellow: #fffd6a; /* rgb(255, 253, 106) */
    --light-yellow: #fffd90; /* rgb(255, 253, 144) */
    --transparent-yellow-variant: rgb(255, 253, 144, .3);
    --transparent-yellow: rgba(255, 253, 106, .8);
    --dark-green: #61994d; /* rgb(97, 153, 77) */
    --green: #90e372; /* rgb(144, 227, 114) */
    --light-green: #bde39e; /* rgb(189, 227, 158) */
    --transparent-green: rgba(144, 227, 114, .9);
    --dark-blue: #5fadaa; /* rgb(95, 173, 170) */
    --blue: #8df0e7; /* rgb(141, 240, 231) */
    --light-blue: #b6fff5; /* rgb(182, 255, 245) */
    --transparent-blue: rgba(141, 240, 231, .8);
    --dark-purple: #a484ab; /* rgb(164, 132, 171) */
    --purple: #d9a8e7; /* rgb(217, 168, 231) */
    --light-purple: #e1c0ff; /* rgb(225, 192, 255) */
    --transparent-purple: rgba(217, 168, 231, .8);
    --dark-pink: #ff91cc; /* rgb(255, 145, 204) */
    --pink: #ffbbe1; /* rgb(255, 187, 225) */
    --light-pink: #ffd6e7; /* rgb(255, 214, 231) */
    --transparent-pink: rgba(255, 187, 225, .8);

    /* Vinyls */
    --red-vinyl: url("images/vinyls/1_red-vinyl.png");
    --orange-vinyl: url("images/vinyls/2_orange-vinyl.png");
    --yellow-vinyl: url("images/vinyls/3_yellow-vinyl.png");
    --green-vinyl: url("images/vinyls/4_green-vinyl.png");
    --blue-vinyl: url("images/vinyls/5_blue-vinyl.png");
    --purple-vinyl: url("images/vinyls/6_purple-vinyl.png");
    --pink-vinyl: url("images/vinyls/7_pink-vinyl.png");

    /* Cases */
    --red-case: url("images/cases/1_red-case.png");
    --orange-case: url("images/cases/2_orange-case.png");
    --yellow-case: url("images/cases/3_yellow-case.png");
    --green-case: url("images/cases/4_green-case.png");
    --blue-case: url("images/cases/5_blue-case.png");
    --purple-case: url("images/cases/6_purple-case.png");
    --pink-case: url("images/cases/7_pink-case.png");

    /* Tags */
    --red-tag: url("images/tags/1_red-button.png");
    --orange-tag: url("images/tags/2_orange-button.png");
    --yellow-tag: url("images/tags/3_yellow-button.png");
    --green-tag: url("images/tags/4_green-button.png");
    --blue-tag: url("images/tags/5_blue-button.png");
    --purple-tag: url("images/tags/6_purple-button.png");
    --pink-tag: url("images/tags/7_pink-button.png");
}

@font-face {
  font-family: "Pixelated";
  src: url(fonts/joystix\ monospace.otf);
}
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Base HTML
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
img {
  padding-left: 0px;
  padding-right: 0px;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Audio Player Window
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Main Player */
.full-player {
  position: fixed;
  top: 0;
  left: 886px;
  transform: translateX(-50%);
  z-index: 9999;
  border: 18px solid transparent;
  border-image: url("images/audio-player/5_border.png") 3 repeat;
  background-image: url("images/audio-player/0_background.png");
  background-size: 1222px 366px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: black;
  width: 1358px;
  height: 400px;
  display: flex;
  flex-direction: column;
  display: none;
}

.player-button {
  background-color: transparent;
  position: absolute;
  width: 12px;
  height: 12px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
  border: none;
  cursor: pointer;
  text-indent: -9999px;
}

.full-player.minimized {
  background-image: url('images/green-bg.png');
  background-color: var(--green); /* still works as fallback or blend */
  height: 50px;
  overflow: hidden;
  border: 18px solid transparent;
  border-image: url("images/audio-player/5_border.png") 3 repeat;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Optional: adjust the button sizes/positioning for minimized bar */
.full-player.minimized .closeButton {
  background-image: url("images/audio-player/1_close-black.png");
  transform: translate(-2px, -1px);
}
.full-player.minimized .minMaxButton {
  background-image: url("images/audio-player/2_maximize.png");
  transform: translate(-30px, -35px);
}
.track-details.hidden,
.rating.hidden {
  display: none;
}

/* Audio Player Tab Buttons */
.window-controls {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10000;
}
.minMaxButton, .closeButton {
  position: absolute;
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
}
.closeButton {
  right: 2px;
  top: 2px;
}
.minMaxButton {
  right: 2px;
  top: 36px;
}

.minClose {background-image: url("images/audio-player/1_close-black.png");}
.maxClose {background-image: url("images/audio-player/3_close-green.png");}
.minimize {background-image: url("images/audio-player/4_minimize.png");}
.maximize {background-image: url("images/audio-player/2_maximize.png");}

/* Track Details */
.track-details {
  width: 100px; height: 100px;
}
.track-title {
  width: 295px; height: 33px;
  font-size: 11.8px;
  transform: translate(21px, 228px);
  margin: 0px 0px 0px 0px;
  text-align: center;
  line-height: 35px; /* vertically aligns manually */
  font-family: "Pixelated";
}
.track-description {
  width: 569px; height: 194px;
  font-size: 20px;
  transform: translate(652px, -14px);
  margin: 0px 0px 0px 0px;
  padding: 6px 6px 6px 6px;
  text-align: center;
  line-height: 36px; /* vertically aligns manually */
}
.track-cover {
  width: 256px; height: 245px;
  transform: translate(41px, -620px);
  margin: 0;
  padding: 0;
  image-rendering: crisp-edges;
  clip-path: inset(1px round 0px);
}
.track-dropdown {
  width: 279px;
  height: 20px;
  font-size: 14px;
  transform: translate(29px, -550px);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  text-align: center;
  line-height: 0px;
}

/* Tags */
.track-tags {
  width: 585px; height: 80px;
  transform: translate(644px, -296px);
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  overflow: hidden; /* Prevent overflow if too many tags */
}
.tag {
  color: var(--black);
  font-family: "Pixelated";
  font-size: 16px;
  padding: 0;
  margin: 0;
  text-align: center;
  border: 10px solid transparent;
  white-space: nowrap;
  display: inline-block;
}

.tag-genre {border-image: var(--red-tag) 10 fill repeat;}
.tag-instrumentation {border-image: var(--orange-tag) 10 fill repeat;}
.tag-duration {border-image: var(--yellow-tag) 10 fill repeat;}
.tag-purpose {border-image: var(--green-tag) 10 fill repeat;}
.tag-texture {border-image: var(--blue-tag) 10 fill repeat;}
.tag-mood {border-image: var(--purple-tag) 10 fill repeat;}
.tag-quality {border-image: var(--pink-tag) 10 fill repeat;}

/* Vinyl Spinning */
.track-vinyl {
  position: relative;
  top: -362px;
  left: 338px;
  width: 273px;
  height: 269px;
  background: transparent center no-repeat;
  background-size: cover;
  margin: 0;
  clip-path: inset(2px round 0px);
  transform-origin: 50% 50%;
}

.red-vinyl {background-image: var(--red-vinyl);}
.orange-vinyl {background-image: var(--orange-vinyl);}
.yellow-vinyl {background-image: var(--yellow-vinyl);}
.green-vinyl {background-image: var(--green-vinyl);}
.blue-vinyl {background-image: var(--blue-vinyl);}
.purple-vinyl {background-image: var(--purple-vinyl);}

/* Stars Rating */
.rating {
  position: relative;
  width: 586px; height: 60px;
  transform: translate(660px, 146px);
  padding: 0;
}

.star {
  position: absolute;
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  background-size: 62px;
  cursor: pointer;
}

.star:nth-child(1) { transform: translate(-0.3px, 0px); }
.star:nth-child(2) { transform: translate(129.6px, 0px); }
.star:nth-child(3) { transform: translate(259.6px, 0px); }
.star:nth-child(4) { transform: translate(393.3px, 0px); }
.star:nth-child(5) { transform: translate(523px, 0px); }

.empty-star { background-image: url("images/stars/0_empty-star.png"); }
.half-star { background-image: url("images/stars/1_half-star.png"); }
.full-star { background-image: url("images/stars/2_full-star.png"); }

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Full List Styling
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Listed Tracks */
.listed-tracks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  justify-items: center;
}
.entry {
  /* Individual Entry */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 150px;
  height: auto; /* let height grow naturally */
}

.listed-titles {
  /* Title under frame */
  font-size: 16px;
  font-weight: bold;
  width: 150px;
  margin: 8px 0 0 0;
  padding: 0;
  text-align: center;
}
.listed-covers {
  /* Cover Wrapper */
  position: relative;
  width: 150px;
  height: 150px;
  margin-bottom: 8px; /* distance between cover and title */
}
.cover-image {
  /* Actual Cover Image */
  width: 150px;
  height: 150px;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  image-rendering: pixelated;
}
.case-overlay {
  /* Frame Overlay */
  position: absolute;
  top: -4px;
  left: -4px;
  width: 158px;
  height: 154px;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  background-color: transparent;
}
.entry-group-heading {
  grid-column: 1 / -1;
  font-size: 32px;
  margin: 1.5em 0 0.5em 0;
  font-family: "Pixelated", monospace;
  font-weight: bold;
  color: var(--black);
  letter-spacing: 2px;
  text-transform: capitalize;
  white-space: normal;

  text-align: left;
  text-shadow:
    -2px -2px var(--green),
    2px -2px var(--green),
    -2px 2px var(--green),
    2px 2px var(--green);

  /* Force full row width and remove centering */
  display: block;
  width: 100%;
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  justify-items: center;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Audio Player
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Main */
.player-wrapper {
  position: relative;
  width: 122px;
  background: url("images/buttons/7_background.png") no-repeat left center;
  background-size: cover;
  image-rendering: pixelated;
  transform: translate(339px, 271px) scale(2.51);
  transform-origin: top left;
}
.audio-button {
  background-color: transparent;
  position: relative;
  width: 7px; height: 7px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
  border: none;
  cursor: pointer;
  text-indent: -9999px;
  top: -16px;
  scale: 1.65;
}

/* Buttons */
.playPauseButton {transform: translate(-6.6px, 0.6px);padding: 0;}
.startEndButton {transform: translate(-7.2px, 0.6px);padding: 0;}
.muteButton {transform: translate(-6.9px, 0.6px);padding: 0;}

.pause {background-image: url("images/buttons/1_pause.png");}
.play {background-image: url("images/buttons/2_play.png");}
.start {background-image: url("images/buttons/3_start.png");}
.end {background-image: url("images/buttons/4_end.png");}
.unmute {background-image: url("images/buttons/6_unmute.png");}
.mute {background-image: url("images/buttons/5_mute.png");}

/* Sliders */
.slider {
  position: absolute;
  top: 2px;
  width: 73.4px;
  height: 2px;
  background: black;
  cursor: pointer;
  appearance: none;
  image-rendering: pixelated;
}

/* WebKit (Chrome, Safari) */
.slider::-webkit-slider-thumb {
  appearance: none;
  width: 4px; height: 7px;
  background: url('images/buttons/0_slider-thumb.png') no-repeat center;
  background-size: contain;
  border: none;
  image-rendering: pixelated;
}

/* Firefox */
.slider::-moz-range-thumb {
  width: 4px; height: 7px;
  background: url('images/buttons/0_slider-thumb.png') no-repeat center;
  background-size: contain;
  border: none;
  image-rendering: pixelated;
}

/* Remove default thumb appearance (for completeness) */
.slider::-ms-thumb {
  width: 4px; height: 7px;
  background: url('images/buttons/0_slider-thumb.png') no-repeat center;
  background-size: contain;
  border: none;
  image-rendering: pixelated;
}

.volumeSlider {transform: translate(-5.35px, 3.4px);}
.progressSlider {transform: translate(-5.8px, 18.65px);}

/* Other Audio Player Visuals */
.timeDisplay {
  position: absolute;
  transform: translate(-14.9px, -25.1px);
  width: 40px; height: 12px;
  font-family: 'H3', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: normal;
  font-size: 8px;
  line-height: 12px;
  color: var(--black, black);
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}

.spacer {
  height: 7em;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Tag Filtering
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.filter-section {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  z-index: 10;
  width: max-content; /* or set a pixel width if you want */
  min-width: 200px;
  padding: 8px 12px;
  font-size: 1rem;
  background-color: var(--transparent-yellow-variant);
  border: 16px solid transparent !important;
  border-image: url("images/borders/7_border-smol.png") 4 fill repeat !important;
  font-family: "Oxanium", 'Courier New', Courier, monospace;
  text-align: left;
  box-sizing: border-box;
  color: var(--black);
}
.filter-toggle-btn {
    position: relative;
    top: 34px;
    right: -8px;
    transform: translateY(-50%);
    width: 84px;
    height: 71px;
    border: none;
    padding: 0;
    background-color: transparent;
    background-image: url(/ccs/images/search-and-filter/filter-icon.png);
    background-repeat: no-repeat;
    background-position: center;
    background-position-x: center;
    background-position-y: center;
    background-size: 100px 74px;
    cursor: pointer;
}
.filter-toggle-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--light-green);
  border-radius: 5%;
}
.filter-section label {
  display: block;
  margin: 4px 0;
  cursor: pointer;
  font-size: 18px;
  color: var(--black);
}

.filter-panel {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    top: 100%;
    left: 0;
    margin-top: 8px;
    width: max-content;
    min-width: 1188px;
    padding: 4px 4px;
    font-size: 1rem;
    background-color: var(--green);
    border: 4px solid black !important;
    font-family: "Pixelated", "Oxanium", 'Courier New', Courier, monospace;
    text-align: left;
    box-sizing: border-box;
}

#filterDropdown {
  font-family: "H3", monospace;
  font-size: 24px;
  background-color: var(--dark-green);
  color: var(--black);
  border: 4px solid var(--black) !important;
  padding: 0px 50px 0px 50px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  text-rendering: optimizeSpeed;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 1rem; /* Adjust as needed */
}
#filterDropdown:hover {
  outline: 1px dashed var(--highlight);
  background-color: var(--light-glow);
}