/* ========== Advanced Filter CSS ========== */
/* == Reference CSS Variables == */
/*
:root {
  --nectar-accent-color: #fdc62f;
  --nectar-extra-color-1: #0c4da2;
  --nectar-extra-color-2: #05a797;
  --nectar-extra-color-3: #dd2759;
  --nectar-extra-color-4: #bac2db;
  --nectar-extra-color-5: #000000;
  --nectar-extra-color-6: #704b9e;
  --nectar-extra-color-7: #ffcb08;
  --nectar-extra-color-8: #ca0000;
  --nectar-extra-color-9: #dedcde;
  --nectar-extra-color-10: #ffffff;
  --nectar-extra-color-11: #388cdb;
  --nectar-extra-color-12: #f19c00;
}
*/
/* ===== Select2 Styling ===== */
.retailer-bg * {
  background-color: transparent;
  .row-bg-wrap {
    background-color: transparent !important;
  }
  > .using-image  {
    background-color: transparent !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-attachment: fixed;
  }
}
.hidden {
  display: none ;
}

.retailers-filter-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 2rem;
  /* ===== Form/Filter Container ===== */
  .retailers-form {
    .retailer-location-select {
      max-width: min(300px, 100%);
      margin: 0 auto 4rem auto;
      .select2.select2-container {
        flex: 4;
        width: 100%;
        
        background-color: var(--nectar-extra-color-3);
        border-radius: 34px;

        .flag-icon {
          width: 45px; 
          height: 45px; 
          border-radius: 34px;
          object-fit: cover;
          margin-right: 6px; 
          vertical-align: middle;
          box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.15); 
        }

        .select2-selection--single {
          display: block;
          background-color: transparent;
          border: none !important;
          padding: 0; 
          height: auto;

          .select2-selection__rendered {
            background-color: var(--nectar-extra-color-3);
            border: 1px solid var(--nectar-extra-color-3) !important;
            border-radius: 34px;
            color: var(--nectar-extra-color-10);
            display: flex;
            justify-content: start;
            align-items: center;
            font-size: min(24px, 4vw);
            line-height: 2;
            font-family: 'lexenddeca-bold', sans-serif;
            font-weight: 400;
            padding: 0.3rem 0.5rem 0.5rem; 
          }
        }

        .select2-selection__arrow {
          top: 25%;
          b {
            border-color: var(--nectar-extra-color-10) transparent transparent transparent;
            border-width: 10px 8px 0 8px;
            margin-left: -12px;
          }
        }
        
      }

    }
  }
  /* ===== Results Container ===== */
  .retailers-results {
    display: flex;
    flex-direction: column;
    gap: 6rem;
    width: 100%;
    transition: all 0.3s ease-in-out;

    .retailer-console-item {
      display: flex;
      gap: min(10rem, 8vw);
      position: relative;
      border: 1px solid var(--nectar-extra-color-5);
      border-radius: 34px;
      padding: 2rem 1rem;
      background-color: var(--nectar-accent-color);
      transition: all 0.3s ease-in-out;

      .console-logo {
        position: absolute;
        top: -34px;
        left: 1.5rem;
        width: 300px;
      }

      .console-retailers {
        flex: 6;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: min(3.5rem, 2.5vw);
        width: 100%;
        margin-top: 2rem;

        a {
          display: block;
          transition: transform 0.3s ease-in-out;
          aspect-ratio: 1 / 1;
          .retailer-logo {
            object-fit: cover;
            img {
              border-radius: 50%;
              background-color: var(--nectar-extra-color-10);
              &.no-image {
                filter: grayscale(100%) brightness(80%);
                opacity: 0.65;
              }
            }
          }
          &:hover {
            transform: scale(1.05);
          }
        }
        .no-retailers-message {
          grid-column: span 6;
          text-align: left;
          font-family: 'lexenddeca-bold', sans-serif;
          font-size: min(24px, 4vw);
          line-height: 1.5;
        }
      }

      .console-graphic {
        position: relative;
        flex: 1;
        >img {
          max-width: 200px;
          position: absolute;
          top: -50px;
          right: 0;
        }
      }
    }
  }

}

/* ===== Select2 Dropdown Options Styling ===== */
.select2-dropdown {
  background-color: transparent;
  border: none;
  color: var(--nectar-extra-color-10);
  border-radius: 34px;
  overflow: hidden;
  .select2-results {
    background-color: var(--nectar-extra-color-3);
    border: none;
    border-radius: 34px;
    overflow: hidden;

    /* == Style Scrollbar == */
    .select2-results__options {
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: var(--nectar-extra-color-1) var(--nectar-extra-color-8);
    }

    .select2-results__options::-webkit-scrollbar {
      width: 8px;
    }

    .select2-results__options::-webkit-scrollbar-track {
      background: var(--nectar-extra-color-8);
    }

    .select2-results__options::-webkit-scrollbar-thumb {
      background-color: var(--nectar-extra-color-3);
      border-radius: 20px;
    }

    .select2-results__options {
      
      .select2-results__option {
        display: flex !important;
        align-items: center !important;
        padding: 0.5rem;
        font-family: 'lexenddeca-bold', sans-serif;
        font-weight: 400;
        line-height: 2;
        

        span {
          display: flex;
          align-items: center;
          justify-content: start;
          gap: 6px;

          img {
            width: 45px; 
            height: 45px;
            border-radius: 34px;
            object-fit: cover;
            margin-right: 6px; 
            box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.15);
          }
        }

        &.select2-results__option--highlighted,
        &.select2-results__option--selected,
        &:hover {
          background-color: var(--nectar-extra-color-1);
          color: var(--nectar-extra-color-10);
        }
      }
    }
  }
}

/* ===== Specific Variations for Editions ===== */
.taito-edition {
  .retailers-form {
    .retailer-location-select {

      .select2.select2-container {
        background-color: var(--nectar-extra-color-2);

        .select2-selection--single {
          
          .select2-selection__rendered {
            background-color: var(--nectar-extra-color-2);
            border: 1px solid var(--nectar-extra-color-2) !important;
          }
        }
      }
    }
  }
  & .retailers-results {
    .retailer-console-item {
      background-color: var(--nectar-extra-color-6);
    }
  }
}
.capcom-edition {
  .retailers-form {
    .retailer-location-select {

      .select2.select2-container {
        background-color: var(--nectar-extra-color-7);

        .select2-selection--single {
          
          .select2-selection__rendered {
            background-color: var(--nectar-extra-color-7);
            border: 1px solid var(--nectar-extra-color-7) !important;
            color: var(--nectar-extra-color-5);
          }
        }
        & .select2-selection__arrow {
          b {
            border-color: var(--nectar-extra-color-5) transparent transparent transparent;
          }
        }
      }
    }
  }
  & .retailers-results {
    .retailer-console-item {
      background-color: var(--nectar-extra-color-1);
    }
  }
}
.atari-edition {
  .retailers-form {
    .retailer-location-select {

      .select2.select2-container {
        background-color: var(--nectar-extra-color-8);

        .select2-selection--single {
          
          .select2-selection__rendered {
            background-color: var(--nectar-extra-color-8);
            border: 1px solid var(--nectar-extra-color-8) !important;
          }
        }
      }
    }
  }
  & .retailers-results {
    .retailer-console-item {
      background-color: var(--nectar-extra-color-5);
    }
  }
}
.technos-edition {
  .retailers-form {
    .retailer-location-select {

      .select2.select2-container {
        background-color: var(--nectar-extra-color-4);

        .select2-selection--single {
          
          .select2-selection__rendered {
            background-color: var(--nectar-extra-color-4);
            border: 1px solid var(--nectar-extra-color-4) !important;
            color: var(--nectar-extra-color-5);
          }
        }
        & .select2-selection__arrow {
          b {
            border-color: var(--nectar-extra-color-5) transparent transparent transparent;
          }
        }
      }
    }
  }
  & .retailers-results {
    .retailer-console-item {
      background-color: var(--nectar-extra-color-11);
    }
  }
}
.neogeo-edition {
  .retailers-form {
    .retailer-location-select {

      .select2.select2-container {
        background-color: #CCA15C;

        .select2-selection--single {
          
          .select2-selection__rendered {
            background-color: #CCA15C;
            border: 1px solid #CCA15C !important;
            color: var(--nectar-extra-color-5);
          }
        }
        & .select2-selection__arrow {
          b {
            border-color: var(--nectar-extra-color-5) transparent transparent transparent;
          }
        }
      }
    }
  }
  & .retailers-results {
    .retailer-console-item {
      background-color: #151515;
      border-color: #151515;
    }
  }
}
.data-east-edition {
  .retailers-form {
    .retailer-location-select {

      .select2.select2-container {
        background-color: var(--nectar-extra-color-11);

        .select2-selection--single {
          
          .select2-selection__rendered {
            background-color: var(--nectar-extra-color-11);
            border: 1px solid var(--nectar-extra-color-11) !important;
          }
        }
      }
    }
  }
  & .retailers-results {
    .retailer-console-item {
      background-color: #EA842D;
      border-color: #EA842D;
    }
  }
}
.asteroids-edition {
  .retailers-form {
    .retailer-location-select {

      .select2.select2-container {
        background-color: #FDEE37;
        .select2-selection--single {
          
          .select2-selection__rendered {
            background-color: #FDEE37;
            border: 1px solid #FDEE37 !important;
            color: var(--nectar-extra-color-5);
          }
        }
        & .select2-selection__arrow {
          b {
            border-color: var(--nectar-extra-color-5) transparent transparent transparent;
          }
        }
      }
    }
  }
  & .retailers-results {
    .retailer-console-item {
      background-color: #EE2E3A;
    }
  }
}
.centipede-edition {
  .retailers-form {
    .retailer-location-select {

      .select2.select2-container {
        background-color: #FDD31F;

        .select2-selection--single {
          
          .select2-selection__rendered {
            background-color: #FDD31F;
            border: 1px solid #FDD31F !important;
            color: var(--nectar-extra-color-5);
          }
        }
        & .select2-selection__arrow {
          b {
            border-color: var(--nectar-extra-color-5) transparent transparent transparent;
          }
        }
      }
    }
  }
  & .retailers-results {
    .retailer-console-item {
      background-color: #84AE4B;
    }
  }
}
.space-invaders-edition {
  .retailers-form {
    .retailer-location-select {

      .select2.select2-container {
        background-color: #FFD400;

        .select2-selection--single {
          
          .select2-selection__rendered {
            background-color: #FFD400;
            border: 1px solid #FFD400 !important;
            color: var(--nectar-extra-color-5);
          }
        }
        & .select2-selection__arrow {
          b {
            border-color: var(--nectar-extra-color-5) transparent transparent transparent;
          }
        }
      }
    }
  }
  & .retailers-results {
    .retailer-console-item {
      background-color: #0F1B44;
    }
  }
}
.burgertime-edition {
  .retailers-form {
    .retailer-location-select {

      .select2.select2-container {
        background-color: #F7AC1A;

        .select2-selection--single {
          
          .select2-selection__rendered {
            background-color: #F7AC1A;
            border: 1px solid #F7AC1A !important;
            color: var(--nectar-extra-color-5);
          }
        }
        & .select2-selection__arrow {
          b {
            border-color: var(--nectar-extra-color-5) transparent transparent transparent;
          }
        }
      }
    }
  }
  & .retailers-results {
    .retailer-console-item {
      background-color: #2B3585;
    }
  }
}

/* ===== Media Queries ===== */
@media (max-width: 999px) {
  .retailers-filter-wrap {
    margin-bottom: 4rem;
    .retailers-form {
      .retailer-location-select {
        max-width: min(300px, 100%);
        margin: 0 auto 4rem auto;
      }
    }
    .retailers-results {
      gap: 4rem;
      .retailer-console-item {
        flex-direction: column;
        align-items: center;
        text-align: center;

        .console-logo {
          left: auto;
        }

        .console-retailers {
          grid-template-columns: repeat(3, 1fr);
          gap: 1rem;
          margin-right: 0;
        }

        .console-graphic {
          display: none;
        }
      }
    }
  }
}