/* Reset and Base Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
    font-size: 16px; /* Base font size for rem units */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    background-color: #f0f2f5; /* Light background */
    color: #333; /* Dark text for better readability */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1em; /* Relative padding */
}
.container {
    background: white; /* White card background */
    border-radius: 1.2rem; /* Relative border-radius */
    box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.1); /* Relative box-shadow */
    max-width: 400px; /* Max width */
    width: 100%;
    overflow: hidden;
  transition: all 0.3s ease;
}
.container:hover{
  box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.15);
}


/* Form and Input Elements */
#auth-section {
    padding: 1.5em; /* Relative padding */
    display: flex;
    flex-direction: column;
    align-items: center;
}

#auth-section h2 {
    margin-bottom: 2rem; /* Relative margin */
    font-size: 2em; /* Relative font-size */
    font-weight: 500;
}
.error-message {
    color: #ff4d4d; /* Error color */
    margin-top: 0.8rem;
    font-size: 0.9em;
}
input {
    width: 100%;
    padding: 0.8em;
    margin: 0.5em 0;
    border-radius: 0.6em;
    border: 1px solid #ddd;
    transition: border-color 0.3s ease;
}
input:focus {
    border-color: #6200ee; /* Focus color */
    outline: none;
}

/* Button Styles */
button {
    background: linear-gradient(to right, #6200ee, #3700b3); /* Purple gradient button */
    color: white;
    padding: 0.8em 1.5em;
    border: none;
    border-radius: 0.6em;
    cursor: pointer;
    transition: background 0.3s ease;
    font-weight: 500;
    box-shadow: 0 0.2em 0.8em rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;

}
button:hover {
    background: linear-gradient(to right, #3700b3, #6200ee); /* Hover color */
}
button:active {
    transform: scale(0.95);
}

/* Welcome Section */
.welcome {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
    border-bottom: 1px solid #eee;
}
.welcome h2 {
    font-size: 1.3em; /* Relative font-size */
    font-weight: 500;
}
/* Main Actions and Navigation */
.main-actions {
    display: flex;
    justify-content: center;
    margin: 1.5em 0;
}
.main-actions button {
    margin: 0 0.8em;
  padding: 0.8em 1em;
}
.main-actions button:first-child {
   margin-left: 0
}
.main-actions button:last-child {
   margin-right: 0
}

/* Group Section and Details */
#group-section, #group-details {
    padding: 1.5em;
}
#group-section h2, #group-details h2 {
    margin-bottom: 1em;
    font-size: 1.2em;
     font-weight: 500;
}
#group-list {
    list-style: none;
    padding: 0;
}
#group-list li{
  padding: 0.6em;
  margin-bottom: 0.4em;
  border-radius: 0.6em;
  background-color: #f9f9f9;
  cursor: pointer;
    transition: background 0.3s ease;
}
#group-list li:hover{
  background-color: #eee;
}

/* Expenses Section */
h2 {
  padding: 1em;
    font-size: 1.2em;
    font-weight: 500;
}

ul {
    list-style: none;
    padding: 0;
}
li {
    background-color: #f9f9f9; /* Light grey background */
    padding: 0.8em;
    margin: 0.6em 1.5em;
    border-radius: 0.6em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

li button{
   background-color: #ddd;
  color: #333;
  padding: 0.4em 0.6em;
    margin-left: 0.5em;
}
li button:hover{
  background-color: #ccc;
}

/* Settle Up Section */
#settle-up-section {
    padding: 1.5em;
    display: none;
}
#settle-up-section h2 {
    font-size: 1.2em;
    margin-bottom: 1em;
    font-weight: 500;
}
#settle-up-section input{
   width: 90%;
}
#settle-results ul li{
   margin-left: 0
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Utility Classes */
.fade-in {
    animation: fadeIn 0.3s ease forwards;
}
.settle-section-button{
  margin: 0.6em 1.5em;
   text-align:center;
}
.settle-section-button button {
  margin-bottom: 0.6em
}

/* Responsive Styles */

@media (max-width: 320px){
  .container{
    border-radius: 0;
  }
  h2 {
  padding: 0.8em;
  font-size: 1em;
  }
  .welcome h2 {
    font-size: 1.2em;
  }
  .main-actions button{
     font-size: 0.8em;
      margin: 0 0.5em;
    padding: 0.6em 0.8em;
  }
  li {
    margin: 0.4em 0.8em;
  }
  li button {
      font-size: 0.7em;
    padding: 0.4em 0.6em;
      margin-left: 0.4em
  }
   #settle-up-section input{
      width: 80%;
  }
}
@media (min-width: 600px) {
    .container {
        max-width: 600px; /* Increase max width for tablets */
    }
    h2 {
      padding: 1.2em;
        font-size: 1.4em;
      }
  .welcome h2 {
    font-size: 1.4em;
  }
     li {
        margin: 1em 2em;
     }
   .main-actions button{
     margin: 0 1.2em;
     padding: 1em 1.4em
  }
    #settle-up-section input{
     width: 80%;
    }
}


@media (min-width: 960px) {
    .container {
        max-width: 800px; /* Increase max width for laptops */
    }
    h2 {
       padding: 1.5em;
      font-size: 1.5em;
   }
   .welcome h2 {
       font-size: 1.6em;
   }
   li {
       margin: 1.2em 2.5em;
   }
  .main-actions button{
     margin: 0 1.5em;
      padding: 1.2em 1.8em;
   }
    #settle-up-section input{
     width: 70%;
    }
}