/* colors */
:root {
  --darkBlue: #217093;
  --medBlue: #4eb8dd;
  --lightBlue: #ddf1fa;
  --inputBG: #f3fafd;
}

html {width: 100%; height: 100%;}
body {
  background-color: #eff3f4; position: relative; width: 100%; height: 100%;
  font-size: 16px; font-family: 'Source Sans Pro', sans-serif; font-weight: 400;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}
form {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  display: block; width: 100%; max-width: 400px; background-color: #FFF;
  margin: 0; padding: 2.25em; box-sizing: border-box; border: solid 1px #DDD; border-radius: .5em;
  font-family: 'Source Sans Pro', sans-serif;
}
form .svgContainer {
  position: relative; width: 200px; height: 200px; margin: 0 auto 1em;
  border-radius: 50%;
  pointer-events: none;
}
form .svgContainer div {
  position: relative; width: 100%; height: 0; overflow: hidden; border-radius: 50%;
  padding-bottom: 100%;
}
form .svgContainer .mySVG {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none;
}
form .svgContainer:after {
  content: ""; position: absolute; top: 0; left: 0; z-index: 10; 
  width: inherit; height: inherit; box-sizing: border-box;
  border: solid 2.5px var(--darkBlue); border-radius: 50%;
}
form .inputGroup {
  margin: 0 0 2em; padding: 0; position: relative;
}
form .inputGroup:last-of-type {
  margin-bottom: 0;
}
form label {
  margin: 0 0 12px; display: block;
  font-size: 1.25em; color: #217093; font-weight: 700; font-family: inherit;
}
form input[type='email'], form input[type="text"], form input[type="number"], form input[type="url"], form input[type="search"], form input[type="password"] {
  display: block; margin: 0; padding: 0 1em 0; padding: .875em 1em 0;
  background-color: var(--inputBG); border: solid 2px var(--darkBlue); border-radius: 4px; -webkit-appearance: none;
  box-sizing: border-box;
  width: 100%; height: 65px;
  font-size: 1.55em; color: #353538; font-weight: 600; font-family: inherit;
  transition: box-shadow .2s linear, border-color .25s ease-out;
}
form input[type='email']:focus, form input[type="text"]:focus, form input[type="number"]:focus, form input[type="url"]:focus, form input[type="search"]:focus, form input[type="password"]:focus {
  outline: none;
  box-shadow: 0px 2px 10px rgba(0,0,0,.1);
  border: solid 2px var(--medBlue);
}
form button {
  display: block; margin: 0; padding: .65em 1em 1em;
  background-color: var(--medBlue); border: none; border-radius: 4px;
  box-sizing: border-box; box-shadow: none;
  width: 100%; height: 65px;
  font-size: 1.55em; color: #FFF; font-weight: 600; font-family: inherit;
  transition: background-color .2s ease-out;
  cursor: pointer;
}
form button:hover, form button:active {
  background-color: var(--darkBlue);
}

form .inputGroup1 .helper {
  position: absolute; z-index: 1;
  font-family: inherit;
}
form .inputGroup1 .helper1 {
  top: 0; left: 0;
  transform: translate(1em, 2.2em) scale(1); transform-origin: 0 0;
  color: var(--darkBlue); font-size: 1.55em; font-weight: 400; opacity: .65;
  pointer-events: none;
  transition: transform .2s ease-out, opacity .2s linear;
  margin: 0;
}

form .inputGroup1.focusWithText .helper {
  transform: translate(1em, 1.55em) scale(.6); opacity: 1;
}
form .inputGroup2 input[type="password"] {
  padding: .4em 1em .5em;
}
form .inputGroup2 input[type="text"] {
  padding: .025em 1em 0;
}
form .inputGroup2 #showPasswordToggle {
  display: block; padding: 0 0 0 1.45em;
  position: absolute; top: .25em; right: 0;
  font-size: 1em;
  color: var(--darkBlue);
  cursor: pointer;
  user-select: none;
}
form .inputGroup2 #showPasswordToggle input {
  position: absolute; z-index: -1;
  opacity: 0;
}
form .inputGroup2 #showPasswordToggle .indicator {
  position: absolute; top: 0; left: 0;
  height: .85em; width: .85em;
  background-color: var(--inputBG); border: solid 2px var(--darkBlue); border-radius: 3px;
}
form .inputGroup2 #showPasswordToggle .indicator:after {
  content: "";
  position: absolute; left: .25em; top: .025em;
  width: .2em; height: .5em;
  border: solid var(--darkBlue); border-width: 0 3px 3px 0;
  transform: rotate(45deg); visibility: hidden;
}
form .inputGroup2 #showPasswordToggle input:checked ~ .indicator:after {
  visibility: visible;
}
form .inputGroup2 #showPasswordToggle input:focus ~ .indicator, form .inputGroup2 #showPasswordToggle input:hover ~ .indicator {
  border-color: var(--medBlue);
}
form .inputGroup2 #showPasswordToggle input:disabled ~ .indicator {
  opacity: .5;
}
form .inputGroup2 #showPasswordToggle input:disabled ~ .indicator:after {
  visibility: hidden;
}

/* Responsive Design */
@media (max-width: 768px) {
  form {
    max-width: 90%;
    padding: 1.5em;
  }
  
  form .svgContainer {
    width: 150px;
    height: 150px;
  }
  
  form input[type='email'], 
  form input[type="text"], 
  form input[type="password"] {
    height: 55px;
    font-size: 1.3em;
  }
  
  form button {
    height: 55px;
    font-size: 1.3em;
  }
}

@media (max-width: 480px) {
  form {
    max-width: 95%;
    padding: 1em;
  }
  
  form .svgContainer {
    width: 120px;
    height: 120px;
  }
  
  form label {
    font-size: 1.1em;
  }
  
  form input[type='email'], 
  form input[type="text"], 
  form input[type="password"] {
    height: 50px;
    font-size: 1.2em;
  }
  
  form button {
    height: 50px;
    font-size: 1.2em;
  }
  
  form .inputGroup1 .helper1 {
    font-size: 1.2em;
  }
}

@media (max-height: 700px) {
  form {
    padding: 1em;
  }
  
  form .svgContainer {
    width: 120px;
    height: 120px;
    margin-bottom: 0.5em;
  }
  
  form .inputGroup {
    margin-bottom: 1em;
  }
}

/* ADDED: Auth links styles */
.auth-links {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.auth-links p {
  margin: 10px 0;
  color: #666;
  font-size: 0.95em;
}

.auth-links a {
  color: var(--medBlue);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.auth-links a:hover {
  color: var(--darkBlue);
  text-decoration: underline;
}

.back-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--darkBlue);
  font-size: 0.9em;
}

.back-home i {
  font-size: 0.9em;
  transition: transform 0.2s ease;
}

.back-home:hover i {
  transform: translateX(-3px);
}