/*
Theme Name: Adopt Me Trading Values
Theme URI: https://adoptmetradingsvalues.com/
Description: Trade calculator, value list, and item pages for Adopt Me Trading Values, ported from the original static site. Item data comes from the Adopt Me Values plugin.
Author: Adopt Me Trading Values
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: adoptme
*/

/* ==========================================================================
   Original site stylesheet (indexstyles.css), carried over unchanged.
   Everything below this banner and above the "Blog" banner is the original
   file. Append new rules to the blog section rather than editing these.
   ========================================================================== */

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}
body
{
  min-height: 100vh;
  background: #f0f4f8;
}

  .outergrid {
    display: grid;
    grid-template-columns: 40% 20% 40%;
    background-color: #ffffff;
    border-radius: 15px;
    max-height: 60%;
    padding: 20px;
    margin: 0 auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .grid-container {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    background-color: #e0e7ff;
    padding: 10px;
    border-radius: 15px;
  }

  .grid-item {
    background-color: #ffffff;
    border: 2px solid #e0e7ff;
    padding: 10px;
    font-size: 16px;
    text-align: center;
    border-radius: 12px;
    margin: 5px;
    position: relative;
    max-width: 100%;
    height: auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  @media screen and (max-width: 1100px) {
    .grid-item {
      border-radius: 20px;
      border: 2px solid #28abe4;
    }
    .grid-container {
      border-radius: 15px;
    }
  }

  @media screen and (max-width: 960px) {
    .grid-item {
      border-radius: 18px;
      border: 2px solid #28abe4;
    }
    .grid-container {
      border-radius: 15px;
    }
  }

  @media screen and (max-width: 600px) {
    .grid-item {
      border-radius: 15px;
      border: 1px solid #28abe4;
    }
    .grid-container {
      border-radius: 10px;
    }
  }

  @media screen and (max-width: 440px) {
    .grid-item {
      border-radius: 7px;
      border: 0px solid #28abe4;
    }
    .grid-container {
      border-radius: 8px;
    }
  }

  @media screen and (max-width: 360px) {
    .grid-item {
      border-radius: 5px;
      border: 0px solid #28abe4;
    }
    .grid-container {
      border-radius: 5px;
      padding: 1px;
    }
  }

  .grid-item img {
    max-width: 100%;
    max-height: 100%;
  }

  #tradeimg {
    width: 250px;
    height: auto;
  }

  @media screen and (max-width: 950px) {
    #tradeimg {
      width: 190px;
      height: auto;
    }
  }
  @media screen and (max-width: 750px) {
    #tradeimg {
      width: 140px;
      height: auto;
    }
  }
  @media screen and (max-width: 550px) {
    #tradeimg {
      width: 100px;
      height: auto;
    }
  }

  @media screen and (max-width: 440px) {
    #tradeimg {
      width: 70px;
      height: auto;
    }
  }

  @media screen and (min-width: 1300px) {
    .outergrid {
      max-width: 1300px;
    }
  }

  .inner-grid {
    width: 68%;
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(4, 150px);
    grid-template-rows: repeat(6, 150px);
    grid-gap: 10px;
    grid-column: 1 / 2; /* Place the element in the first column */
  }

  #menu {
    display: none;
    background-color: #ffffff;
    width: 80%;
    height: 80%;
    position: fixed;
    top: 10%;
    left: 10%;
    overflow-x: hidden;
    overflow-y: scroll;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  @media screen and (min-width: 1300px) {
    #menu {
      max-width: 1000px;
    }
  }

  .menugrid {
    display: grid;
    grid-template-columns: 72% 28%; /* Set the width of the columns */
  }

  .inner-box {
    background-color: #ffffff;
    border-radius: 15px;
    border: 1px solid #e0e7ff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .inner-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  #closemenu {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: red;
    text-align: center;
    line-height: 40px;
    /* to center the X vertically */
    cursor: pointer;
    /* to show the cursor as a pointer when hovered */
  }

  #button-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    height: 500px;
    width: 90%;
    padding: 15px;
    grid-column: 2 / 3; /* Place the element in the second column */
    }

  #button-container button {
    width: 90%;
    min-width: 94px;
    height: 40px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 18px;
    }
  
  #button-container button:hover {
    background-color: #3e8e41;
    }  

  @media (max-width: 1200px) {
    .inner-grid {
      grid-template-columns: repeat(4, 120px);
      grid-template-rows: auto;
      align-content: start;
    }
    .inner-box img {
      max-width: 120px;
      max-height: 120px;
      object-fit: contain;
    }
    #button-container button {
      height: 40px;
    }
  }

  @media (max-width: 1000px) {
    .inner-grid {
      grid-template-columns: repeat(4, 100px);
      grid-template-rows: auto;
      align-content: start;
    }
    .inner-box img {
      max-width: 100px;
      max-height: 100px;
      object-fit: contain;
    }
  }

  @media (max-width: 920px) {
    .inner-grid {
      grid-template-columns: repeat(4, 80px);
      grid-template-rows: auto;
      align-content: start;
    }
    .inner-box img {
      max-width: 80px;
      max-height: 80px;
      object-fit: contain;
    }
    #button-container button {
      height: 40px;
    }
    .inner-box {
      border-radius: 16px;
    }
    .menugrid {
      grid-template-columns: 68% 32%; /* Set the width of the columns */
    }
  }

  @media (max-width: 720px) {
    .inner-grid {
      grid-template-columns: repeat(4, 65px);
      grid-template-rows: auto;
      align-content: start;
    }
    .inner-box img {
      max-width: 65px;
      max-height: 65px;
      object-fit: contain;
    }
    #button-container button {
      height: 40px;
    }
    #button-container {
      height: 480px;
    }
    .menugrid {
      grid-template-columns: 66% 34%; /* Set the width of the columns */
    }
    .inner-box {
      border-radius: 14px;
    }
  }

  @media (max-width: 660px) {
    .inner-grid {
      grid-template-columns: repeat(4, 60px);
      grid-template-rows: auto;
      align-content: start;
    }
    .inner-box img {
      max-width: 60px;
      max-height: 60px;
      object-fit: contain;
    }
    #button-container button {
      height: 35px;
    }
    #button-container {
      height: 440px;
    }
    .inner-box {
      border-radius: 12px;
    }
  }

  @media (max-width: 520px) {
    .inner-grid {
      grid-template-columns: repeat(4, 50px);
      grid-template-rows: auto;
      grid-gap: 5px;
      align-content: start;
    }
    .inner-box img {
      max-width: 50px;
      max-height: 50px;
      object-fit: contain;
    }
    #button-container button {
      height: 30px;
    }
    #button-container {
      height: 360px;
    }
    .menugrid {
      grid-template-columns: 60% 40%; /* Set the width of the columns */
    }
    .inner-box {
      border-radius: 10px;
    }
  }

  @media (max-width: 470px) {
    .menugrid {
      grid-template-columns: 65% 35%; /* Set the width of the columns */
    }
  }

  @media (max-width: 420px) {
    .inner-grid {
      grid-template-columns: repeat(4, 40px);
      grid-template-rows: auto;
      grid-gap: 4px;
      align-content: start;
    }
    .inner-box img {
      max-width: 40px;
      max-height: 40px;
      object-fit: contain;
    }
    #button-container button {
      height: 30px;
      font-size: 16px;
    }
    .inner-box {
      max-width: 40px;
      max-height: 40px;
    }
    #button-container {
      height: 340px;
    }
    .menugrid {
      grid-template-columns: 60% 40%; /* Set the width of the columns */
    }
    .inner-box {
      border-radius: 8px;
    }
  }

  @media (max-width: 350px) {
    .inner-grid {
      grid-template-columns: repeat(4, 30px);
      grid-template-rows: auto;
      grid-gap: 2px;
      align-content: start;
    }
    .inner-box img {
      max-width: 30px;
      max-height: 30px;
      object-fit: contain;
    }
    #button-container button {
      height: 25px;
      min-width: 80px;
    }
    #button-container {
      height: 320px;
    }
    .menugrid {
      grid-template-columns: 55% 45%; /* Set the width of the columns */
    }
    .inner-box {
      border-radius: 4px;
    }
  }

  @media (max-width: 310px) {
    #button-container button {
      height: 25px;
      min-width: 65px;
      font-size: 14px;
      margin-left: 10px;
    }
    .inner-box {
      border-radius: 8px;
    }
  }

  #neonMenu {
    display: none;
    width: 400px;
    height: 300px;
    position: fixed;
    top: 20%;
    left: 20%;
    border: 1px solid black;
    background-color: aqua;
  }

  .banner {
    border-radius: 10px;
    border: solid;
    border-color: #e0e7ff;
    margin: 10px;
    height: 60px;
    width: 97%;
    background-color: #ffffff;
    position: relative;
    left: 0.3%;
    font-size: 22px;
    margin-bottom: 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  #Lpoints {
    position: absolute;
    top: 20%;
    left: 0;
  }
  
  #fair {
    height: 40px;
    width: 70px;
    text-align: center;
    border-radius: 5px;
    border: solid;
    border-color: #7cfcbc;
    border-width: 0px;
    background-color: #7cfcbc;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 15%;
    display: flex; /* new */
    justify-content: center; /* new */
  }
  
  #Rpoints {
    position: absolute;
    top: 20%;
    right: 0;
  }

  @media (max-width: 1100px) {
    .banner {
      height: 50px;
      font-size: 18px;
    }
    #fair {
      height: 35px;
      font-size: 28px;
    }
  }

  @media (max-width: 700px) {
    .banner {
      height: 50px;
      font-size: 14px;
    }
    #fair {
      height: 30px;
      font-size: 24px;
    }
  }

  @media (max-width: 550px) {
    .banner {
      height: 40px;
      font-size: 10px;
    }
    #fair {
      height: 25px;
      font-size: 18px;
      width: 50px;
    }
  }

  @media (max-width: 350px) {
    .banner {
      height: 30px;
      font-size: 8px;
    }
    #fair {
      height: 20px;
      font-size: 14px;
    }
  }
  

  .checkbox-container {
    display: flex;
    align-items: center;
    margin: 10px;
  }

  .checkbox-container label {
    cursor: pointer;
    display: flex;
    font-size: 20px;
  }

  .checkbox-container label img {
    height: 25px;
    width: 25px;
    margin-left: 5px;
  }

  .checkbox-container input[type="checkbox"] {
    cursor: pointer;
    opacity: 0;
    position: absolute;
  }

  .checkbox-container label::before{
    content: "";
    width: 1em;
    height: 1em;
    border-radius: 0.15em;
    margin-right: 0.5em;
    border: 0.05em solid #3b82f6;
  }

  .checkbox-container label:hover::before,
  .checkbox-container input[type="checkbox"]:hover + label::before{
    background-color: #35E07D;
  }

  .checkbox-container input[type="checkbox"]:focus + label::before{
    box-shadow: 0 0 20px black;
  }

  .checkbox-container input[type="checkbox"]:checked + label::before{
    content: "\002714";
    background-color: #3b82f6;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
  }

  #neonSelector {
  width: 150px;
  height: 30px;
  padding: 5px;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  border: 1px solid #ddd;
  border-radius: 3px;
  appearance: none;
  background-color: #fff;
  margin: 10px 0 10px 10px;
  }

  #neonSelector:hover {
  border-color: #999;
  cursor: pointer;
  }

  #neonSelector:focus {
  border-color: #000;
  outline: none;
  }

  #neonSelector option {
  font-size: 16px;
  font-family: Arial, sans-serif;
  padding: 5px;
  }

  #neonclick {
  width: 60px;
  height: 30px;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  border: 2px solid #ddd;
  border-radius: 5px;
  background-color: #3b82f6;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  margin-top: 20px;
  margin-left: 10px;
  }

  #neonclick:hover {
  background-color: #2563eb;
  }

  #neonclick:active {
  background-color: #ccc;
  transform: translateY(2px);
  box-shadow: 0px 1px #bbb;
  }

  .meter {
    box-sizing: content-box;
    height: calc(15px + 0.1vh + 0.430625vw);
    font-size: calc(14px + 0.1vh + 0.430625vw);
    position: relative;
    margin: 10px 0 5px;
    border-radius: 25px;
    padding: 10px;
    box-shadow: inset 0 -1px 1px rgb(255 255 255 / 30%);
    text-align: center;
    grid-column: span 3;
    background-color: #e0e7ff;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
  }

  @media (max-width: 720px) {
    .meter {
      margin-top: 0px;
    }
  }

  .meter>span {
    display: block;
    height: 100%;
    float: left;
    background-color: #3b82f6;
    background-image: linear-gradient(center bottom, #3b82f6 37%, #2563eb 69%);
    box-shadow: inset 0 2px 9px rgb(255 255 255 / 30%), inset 0 -2px 6px rgb(0 0 0 / 40%);
    position: relative;
    overflow: hidden;
  }

  .line {
    position: absolute;
    top: 15%;
    left: 50%;
    height: 30px;
    width: 3px;
    background-color: black;
    transform: translateX(-50%);
    opacity: 0.8;
  }

  .small-image {
    height: 41px;
    width: 104px;
    position: absolute;
    bottom: 0;
    right: 0;
  }

  @media (max-width: 1100px) {
    .small-image {
      height: 35px;
      width: 89px;
    }
  }

  @media (max-width: 950px) {
    .small-image {
      height: 30px;
      width: 76px;
    }
  }

  @media (max-width: 830px) {
    .small-image {
      height: 25px;
      width: 64px;
    }
  }

  @media (max-width: 600px) {
    .small-image {
      height: 18px;
      width: 46px;
    }
  }

  @media (max-width: 400px) {
    .small-image {
      height: 13px;
      width: 33px;
    }
  }

  @media (max-width: 320px) {
    .small-image {
      height: 11px;
      width: 28px;
    }
  }

  @media (max-width: 290px) {
    .small-image {
      height: 10px;
      width: 26px;
    }
  }

  #search-container {
  position: absolute;
  top: 60px; /* adjust the top value as needed */
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px;
  }

  #searchPets {
    width: 200px;
    padding: 8px 12px;
    border: none;
    border-radius: 20px;
    background-color: #f5f5f5;
    font-size: 16px;
    margin-left: 10px;
    margin-top: 10px;
  }

  header {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #98F8F9;
  }

  #bannerimg {
    margin: 55px 0 0 0;
    width: 90%;
    height: auto;
    max-width: 800px;
  }

  .navigation {
display: flex;
justify-content: center;
align-items: center;
background-color: #3b82f6;
height: 60px;
width: 99%;
border: none;
margin: 0 auto;
border-radius: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navigation__list {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}

.navigation__item {
list-style: none;
margin: 0 10px;
}

.navigation__link {
color: #ffffff;
text-decoration: none;
font-size: 18px;
font-weight: bold;
letter-spacing: 1px;
padding: 10px 20px;
transition: background-color 0.3s ease;
}

.navigation__link:hover {
background-color: #2563eb;
color: #ffffff;
}

@media (max-width: 1000px) {
.navigation {
  height: 55px;
}
.navigation__link {
  padding: 5px;
  font-size: 18px;
}
}

@media (max-width: 800px) {
.navigation {
  height: 50px;
}
.navigation__link {
  padding: 5px;
  font-size: 16px;
}
}

@media (max-width: 490px) {
.navigation {
  height: 40px;
}
.navigation__link {
  padding: 5px;
  font-size: 14;
}
}

@media (max-width: 400px) {
.navigation {
  height: 35px;
}
.navigation__link {
  padding: 1px;
  font-size: 12px;
}
}

@media (max-width: 340px) {
.navigation {
  height: 35px;
}
.navigation__link {
  padding: 1px;
  font-size: 10px;
}
}


/*  @media only screen and (max-width: 1200px) {
    #menu {
      width: 85%;
    }
    #button-container {
      height: 50px;
      top: 150px;
      right: 2%;
    }
    #button-container button {
      padding: 12px 50px;
    }
  } */ 

.footer {
  font-size: 16px;
  color: #333;
  margin: 0;
  text-align: center;
  padding: 20px;
  background-color: #f0f4f8;
}