/* Modern Google-style CSS */

/* Reset default styles */
body, h1, p, ul, li {
    margin: 0;
    padding: 0;
  }
  
  /* Set font family */
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }
  
  /* Clean white background with subtle gradient */
  body {
    background: #f5f5f5; /* Lighter base color */
    background: -moz-linear-gradient(top, #f5f5f5 0%, #eee 100%); /* Firefox */
    background: -webkit-linear-gradient(top, #f5f5f5 0%, #eee 100%); /* Chrome, Safari */
    background: linear-gradient(90deg, rgb(27, 19, 19) 0%, rgb(32, 28, 26) 27%, rgba(40, 21, 33, 1) 42%, rgba(5, 38, 38, 1) 90%, rgba(46, 29, 39, 1) 100%, rgba(3, 22, 41, 1) 100%); /* Standard syntax */
    height: 50vh;
  }
  
  /* Centered container with more prominent shadow */
  .container {
    width: 80%;
    max-width: 300px;
    margin: 500px auto;
    margin-top: 50px;
    background-color: #ffffff5d; /* White background */
    padding: 30px;
    box-shadow: 0 8px 20px rgba(255, 2, 255, 0); /* Soft shadow */
    border-radius: 50px;
  
}

label {
    font-weight: bold;
    color: #000000; /* Dark gray text */
}

input[type="number"],
input[type="text"] {
    width: 100%;
    padding: 14px;
    margin: 8px 0 20px 0;
    border: 1px solid #ddd; /* Light gray border */
    border-radius: 50px;
    box-sizing: border-box;
    background-color: #f9f9f9; /* Light gray background */
    color: #333; /* Dark gray text */
}

input[type="number"]:focus,
input[type="text"]:focus {
    outline: none;
    border-color: #666; /* Darker gray border on focus */
}

label[for="credit"] {
    font-weight: bold;
    color: #000000;
    margin-top: 20px;
    display: block;
}

#credit {
    width: 100%;
    padding: 14px;
    margin: 8px 0 20px 0;
    border: 1px solid #ddd;
    border-radius: 50px;
    box-sizing: border-box;
    background-color: #f9f9f9;
    color: #000000;
    font-size: 16px;
    outline: none;
}

#credit:focus {
    border-color: #666;
}

button {
    width:100%;
    padding: 14px;
    margin-top:20px;
    border-radius: 50px;
    cursor:pointer;
    border: 0;
    background-color: white;
    box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 15px;
    transition: all 0.5s ease;
  }
  
  button:hover {
    letter-spacing: 3px;
    background-color: hsl(261deg 80% 48%);
    color: hsl(0, 0%, 100%);
    box-shadow: rgb(93 24 220) 0px 7px 29px 0px;
  }
  
  button:active {
    letter-spacing: 3px;
    background-color: hsl(261deg 80% 48%);
    color: hsl(0, 0%, 100%);
    box-shadow: rgb(93 24 220) 0px 0px 0px 0px;
    transform: translateY(10px);
    transition: 100ms;
  }
  

.result-item {
    margin-bottom: 10px;
    background-color: #fff; /* White background */
    color: #333; /* Dark gray text */
    padding: 14px;
    border: 1px solid #ddd; /* Light gray border */
    border-radius: 8px;
}
.loader {
    --ballcolor: #b10c51;
    --shadow: 0px 0 #73aa0e;
    --shadowcolor: #0ec48db7;
    width: 10px;
    height: 10px;
    left: -120px;
    margin-top: 20px;
    margin-left: 43%;
    border-radius: 50%;
    position: relative;
    color: var(--ballcolor);
    animation: shadowRolling 5s linear infinite;
  }
  
  @keyframes shadowRolling {
    
    0% {
      box-shadow: var(--shadow),
          var(--shadow),
          var(--shadow),
          var(--shadow);
    }
  
    12% {
      box-shadow: 100px 0 var(--ballcolor),
          var(--shadow),
          var(--shadow), 
          var(--shadow);
    }
  
    25% {
      box-shadow: 110px 0 var(--ballcolor),
          100px 0 var(--ballcolor),
          var(--shadow), 
          var(--shadow);
    }
  
    36% {
      box-shadow: 120px 0 var(--ballcolor), 
          110px 0 var(--ballcolor), 
          100px 0 var(--ballcolor), 
           var(--shadow);
    }
  
    50% {
      box-shadow: 130px 0 var(--ballcolor),
          120px 0 var(--ballcolor),
          110px 0 var(--ballcolor),
          100px 0 var(--ballcolor);
    }
  
    62% {
      box-shadow: 200px 0 var(--shadowcolor),
           130px 0 var(--ballcolor), 
           120px 0 var(--ballcolor), 
           110px 0 var(--ballcolor);
    }
  
    75% {
      box-shadow: 200px 0 var(--shadowcolor),
          200px 0 var(--shadowcolor),
          130px 0 var(--ballcolor), 
          120px 0 var(--ballcolor);
    }
  
    87% {
      box-shadow: 200px 0 var(--shadowcolor), 
          200px 0 var(--shadowcolor), 
          200px 0 var(--shadowcolor), 
          130px 0 var(--ballcolor);
    }
  
    100% {
      box-shadow: 200px 0 var(--shadowcolor), 
          200px 0 var(--shadowcolor),
          200px 0 var(--shadowcolor),
          200px 0 var(--shadowcolor);
    }
  }

  .toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 25px;
  }
  
  .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    transition: .4s;
    border-radius:50px;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: rgb(0, 0, 0);
    transition: .4s;
    border-radius: 50%;
  }
  
  input:checked + .slider {
    background-color: #ffffff;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    transform: translateX(17px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }