/* ================================================================================
   login.css

   Used for the assistant SPA.
   ================================================================================ */

html, body {
   font-family: 'Montserrat', sans-serif;
   font-size: 1rem;
   overscroll-behavior: none;
}

body {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   margin: 0;
   font-family: Arial, sans-serif;
   background-color: #f4f4f4;
   background-image: linear-gradient(to bottom, #f4f4f4 25%, 70%, transparent), url("../images/shared/bg_foodpattern256.png");
   background-repeat: repeat;
}

.login-container {
   display: flex;
   flex-direction: column;
   gap:0rem;
}

.login-card {
   display: flex;
   flex-direction: column;
   gap:0rem;
   
   background-color: #ffffff;
   padding: 0 1.25rem;
   border-radius: 0.5rem;
   box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
   width: 18.75rem; /*300px*/
   text-align: center;
}

#logo {
   width: 70%;
   margin: 1rem 0rem;
   align-self: center;
   object-fit: contain;
}

#version-info {
   margin-top: -1.5rem;
   margin-bottom: 2rem;
   font-size: 0.75rem;
   color: #444;
}

.login-card p {
   margin: 0.5rem 0;f
   font-size: 0.875rem;
   color: #444;
}

/* TODO: lazy, use a flex instead of this for the login form */
.spacer {
   margin:0.5rem;
}

input {
   width: 100%;
   padding: 0.625rem;
   /* margin-bottom: 0.625rem; */
   border: 1px solid #ddd;
   border-radius: 0.25rem;
   box-sizing: border-box;
}

button {
   width: 100%;
   padding: 0.625rem;
   background-color: var(--app-green-dark);
   color: white;
   border: none;
   border-radius: 0.25rem;
   cursor: pointer;
   transition: background-color 0.3s ease, color 0.3s ease;
}

/* form + button {
   margin-top: 0.5rem;
   background-color: darkgoldenrod;
} */

button:hover {
   background-color: var(--app-green-extradark);
}

/* Reset Password button */

.reset-container {
   /* width: 100%; */
   /* background-color: red; */
   display: flex;
   justify-content: flex-end;
   margin-top: 0.5rem; /* Add spacing between elements */
}

#reset-password {
   width: auto;
   padding: 0.25rem 0.625rem;
   background-color:   #eb984e ;
   font-size: 0.75rem; 
   /* color: var(--app-green-dark); */
   /* border: 2px solid coral; */
   /* border-radius: 4px; */
   /* transition: background-color 0.3s ease, color 0.3s ease; */
}

#reset-password:hover {
   background-color: #af601a  ;
   color: white;
}


/* temporary, remove after we enable sign in links */
button:disabled {
   background-color: #bbb;
   cursor: not-allowed;
}
button:disabled:hover {
   background-color: #bbb;
}

/* password field */
.password-container {
   display: flex;
   align-items:stretch;
   gap: 0.25rem;
   margin: 0.5rem 0;
}

#toggle-password {
   width: 4rem;
   padding: 0rem;
   margin: 0px;
   
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Style for the SVG icon inside the toggle button */
#toggle-password img {
   height: 1.5rem;
   /* Use filter to render the SVG as white */
   filter: brightness(0) invert(1);
}

#login-error {
   display: none;
   /* margin-top: 0.5rem; */
   font-size: 0.75rem;
   /* color: #D00000; */
   color: #FFFFFF;
   padding: 0.5rem;
   background-color: #646464;
   border-radius: 0.25rem;
}

/********************/
/* Billing */

#billing {
   padding: 0rem 1rem;
   margin-top: 0.5rem;
   margin-bottom: 0rem;
   font-size: 0.75rem;
   color: #444;
   /* background-color: red; */
   text-align: right;
}

#billing a:link {
   color: darkgoldenrod;
}
#billing a:visited {
   color: darkgoldenrod;
}

/********************/
/* TERMS OF SERVICE */

#tos {
   margin-top: 2rem;
   margin-bottom: 1rem;
   font-size: 0.75rem;
   color: #444;
}

#tos a:link {
   color: darkgoldenrod;
   /* text-decoration: none; */
}
#tos a:visited {
   color: darkgoldenrod;
}