*{box-sizing:border-box}
body{
  font-family:'Russo One',sans-serif;
  margin:0;padding:0;color:#ddd;
  background:#2c2f33;
  margin-top:var(--navbar-height,0px)
}
input[type=checkbox]{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  width:20px;height:20px;border:2px solid #7289da;border-radius:3px;
  cursor:pointer;position:relative;margin:0;margin-right:.5rem;vertical-align:middle
}
input[type=checkbox]:checked{background:#7289da}
input[type=checkbox]:checked::after{
  content:"✓";position:absolute;top:-1px;left:4px;color:#fff;font-size:16px
}
#mobile-stats{display:none}
.spinner-container{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001}
.spinner{border:.5rem solid #f3f3f3;border-top:.5rem solid #3498db;border-radius:50%;width:3rem;height:3rem;animation:spin 2s linear infinite}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.notification{position:fixed;top:1rem;right:1rem;background:#4caf50;color:#fff;padding:.5rem;border-radius:5px;opacity:0;transition:opacity .5s}

#landing-page-content{
  padding:1rem 2rem 2rem;             
  max-width:800px;
  margin:calc(var(--navbar-height,0px) + 2rem) auto 2rem;
  background:#40444b;border-radius:10px
}
#landing-page-content>*:first-child{margin-top:0} 
#landing-page-content h2{color:#7289da;margin-bottom:1rem}
#landing-page-content p,#landing-page-content ul,#landing-page-content ol{line-height:1.6;margin-bottom:1rem}

#inventory{
  padding:1rem;display:flex;flex-wrap:wrap;justify-content:center;
  margin-top:calc(var(--navbar-height,0px) + 2rem);gap:1rem
}
.item{
  background:#40444b;color:#fff;border-radius:10px;padding:.5rem;cursor:pointer;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:background-color .3s,transform .3s
}
.item:hover{background:#50555d;transform:scale(1.03)}
.item.selected{background:#2ecc71!important}
.item-name{
  font-weight:bold;font-size:.9rem;margin-bottom:.3rem;height:3em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis
}
.item-image-container{
  flex-grow:1;display:flex;align-items:center;justify-content:center;height:70px;margin-bottom:.3rem
}
.item-image-container img{max-width:100%;max-height:100%;object-fit:contain}
.item-price-amount{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.9rem;height:1.2em;margin-bottom:.3rem;white-space:nowrap
}
.button-container{display:flex;justify-content:space-around;gap:.2rem;height:2.5rem}
.button-container button{
  flex:1;padding:.5rem;font-size:1rem;border:none;border-radius:5px;
  background:#555;color:#fff;cursor:pointer;transition:background-color .3s,transform .3s
}
.button-container button:hover{background:#777;transform:scale(1.03)}
.price-icon,.best-price-btn img{width:1.5rem;height:1.5rem;object-fit:contain}
.item-name.gold-text{color:#ffcc00}
.item-name.orange-text{color:#ffa500}
.item-name.souvenir-text{color:#ffdd44}

.dropdown-select{min-width:180px;width:180px}

@media (min-width:769px){
  #navbar{
    position:fixed;top:0;left:0;width:100%;background:#23272a;z-index:1000;
    display:flex;justify-content:space-between;align-items:center;
    padding:.8rem 1rem;box-shadow:0 2px 4px rgba(0,0,0,.1)
  }
  #navbar-left{display:flex;align-items:center}
  #logo{height:70px;margin-right:.5rem}
  #search-container{display:flex;flex-direction:column;text-align:left}
  #search-container label{font-size:.9rem;margin-bottom:.2rem}
  .search-input-group{display:flex;align-items:center}
  #search-container input{
    width:14rem;padding:.5rem;border:none;border-radius:5px
  }
  #search-container button{
    margin-left:.5rem;padding:.5rem 1rem;border:none;border-radius:5px;
    background:#7289da;color:#fff;transition:background-color .3s
  }
  #search-container button:hover{background:#5c6bc0}
  #error-message{color:red;margin-top:.3rem}
  #navbar-center{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center}
  .desktop-title{font-size:2rem;color:#7289da;margin:0}
  #stats{margin-top:.3rem;display:flex;flex-direction:column;gap:.2rem}
  #navbar-right{display:flex;align-items:center}
  #toggle-checkbox,#toggle-label{display:none}

  #menu{display:flex!important;flex-direction:column;gap:.8rem}
  #menu-content{display:flex;gap:1rem;width:100%}

  #menu-left{flex:1}
  #menu-left h3{font-size:1rem;margin-bottom:.3rem;text-align:left}
  .checkbox-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.3rem}
  .checkbox-grid label{font-size:.9rem;white-space:nowrap;display:flex;align-items:center}

  #menu-right{flex:1;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}
  #selects-container{display:flex;flex-direction:column;gap:.5rem;width:100%}
  #sort-container,#currency-container{
    display:flex;align-items:center;gap:.3rem;width:100%
  }
  #sort-container label,#currency-container label{font-size:1rem;margin:0;white-space:nowrap}
  #sortSelect,#currencySelect{
    padding:.4rem;border:none;border-radius:5px;background:#7289da;color:#fff;
    cursor:pointer;width:100%
  }
  #toggle-switches{display:flex;gap:.5rem}
  .toggle-container{display:flex;flex-direction:column;align-items:center}
  .toggle-label{font-size:.9rem;line-height:1.2;white-space:nowrap}
  .switch{position:relative;width:2rem;height:1rem}
  .switch input{opacity:0;width:0;height:0}
  .slider{
    position:absolute;top:0;left:0;right:0;bottom:0;background:#ccc;
    transition:.4s;border-radius:20px
  }
  .slider:before{
    content:"";position:absolute;height:.7rem;width:.7rem;left:.15rem;bottom:.15rem;
    background:#fff;transition:.4s;border-radius:50%
  }
  input:checked+.slider{background:#2196f3}
  input:checked+.slider:before{transform:translateX(1rem)}

  #inventory .item{width:190px;height:270px}
  .item-name{height:4em}
}

@media (max-width:768px){
  #logo{display:none}

  #navbar{
    position:fixed;top:0;left:0;right:0;background:#23272a;z-index:1000;
    display:flex;flex-direction:column;align-items:center;padding:.3rem .5rem;
    min-height:28vh
  }
  #navbar-center{order:-1;position:relative;margin:.2rem 0}
  #navbar-center::before{
    content:"SkinSpy";font-size:2rem;color:#7289da;display:block;text-align:center;margin-bottom:.2rem
  }
  #navbar-left{width:100%;text-align:center;margin:.3rem 0}
  #search-container{width:100%;padding:0 10px}
  .desktop-label{display:none}
  #mobile-stats{
    display:flex;justify-content:space-between;width:100%;margin-bottom:.5rem;color:#fff
  }
  .search-input-group{display:flex;align-items:center}
  #search-container input{
    width:14rem;padding:.5rem;border:none;border-radius:5px
  }
  #search-container button{
    margin-left:.5rem;padding:.5rem 1rem;border:none;border-radius:5px;
    background:#7289da;color:#fff;transition:background-color .3s
  }
  #navbar-right{width:100%;text-align:center;margin:.3rem 0}
  #toggle-checkbox{display:none}
  #toggle-label{
    display:block;width:90%;padding:.7rem;margin:.3rem auto;text-align:center;
    background:#7289da;color:#fff;border-radius:5px;cursor:pointer;
    transition:background-color .3s,transform .3s
  }
  #toggle-label:hover{background:#5c6bc0;transform:scale(1.03)}

  #menu{display:none;flex-direction:column;align-items:center;width:90%;margin:1rem auto 0;gap:1rem}
  #menu-content{display:flex;flex-direction:column;width:100%;align-items:center;gap:1rem}

  #menu-left{width:100%;display:flex;flex-direction:column;align-items:center;gap:.5rem}
  #menu-left h3{align-self:flex-start;font-size:1rem;margin-bottom:.3rem}
  .checkbox-grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;width:100%
  }
  .checkbox-grid label{display:flex;align-items:center;font-size:.9rem;gap:.5rem}

  #menu-right{
    width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start
  }
  #toggle-switches{display:flex;flex-direction:column;gap:.3rem;width:48%}
  .toggle-container{display:flex;align-items:center;width:100%}
  .toggle-label{font-size:.9rem;white-space:nowrap;width:60%}
  .switch{position:relative;width:2rem;height:1rem;margin-left:.3rem}
  .switch input{opacity:0;width:0;height:0}
  .slider{
    position:absolute;top:0;left:0;right:0;bottom:0;background:#ccc;
    transition:.4s;border-radius:20px
  }
  .slider:before{
    content:"";position:absolute;height:.7rem;width:.7rem;left:.15rem;bottom:.15rem;
    background:#fff;transition:.4s;border-radius:50%
  }
  input:checked+.slider{background:#2196f3}
  input:checked+.slider:before{transform:translateX(1rem)}

  #selects-container{display:flex;flex-direction:column;gap:.5rem;width:48%}
  #sort-container,#currency-container{display:flex;flex-direction:column;align-items:center}
  #sortSelect,#currencySelect{
    width:100%;padding:.4rem;border:none;border-radius:5px;
    background:#7289da;color:#fff;cursor:pointer;min-width:0
  }

  #inventory{
    display:flex;flex-wrap:wrap;justify-content:space-around;gap:1rem;
    margin-top:calc(var(--navbar-height,0px) + 2rem)
  }
  #inventory .item{width:45%;height:auto}
  .item-price-amount{flex-direction:column;align-items:flex-start;height:auto}
  .item-price-amount span{margin-bottom:.2rem}
  .item-name{height:auto;margin-bottom:.5rem}
  .item-image-container{margin-top:.3rem}
  
  .desktop-title{display:none!important;}
}