/* Mirrors the PracticePro login page (Content/pp-login.css "clean float" design). */
body {
  margin: 0;
  background-color: #eee;
  color: #000;
  font-size: 13px;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

/* Responsive background: same four resolution variants as the login page,
   each cover-scaled so any aspect ratio is filled without distortion. */
@media (min-width: 100px) and (max-width: 1024px) {
  body { background: url("images/LoginBackground/PP_phone.png") no-repeat center center fixed; background-size: cover; }
}
@media (min-width: 1024px) and (max-width: 1920px) {
  body { background: url("images/LoginBackground/PP_1920_1080.png") no-repeat center center fixed; background-size: cover; }
}
@media (min-width: 1921px) and (max-width: 2560px) {
  body { background: url("images/LoginBackground/PP_2560_1440.png") no-repeat center center fixed; background-size: cover; }
}
@media (min-width: 2561px) {
  body { background: url("images/LoginBackground/PP_3840_2160.png") no-repeat center center fixed; background-size: cover; }
}

/* Centered shell + floating card, same metrics as the login fieldset */
.login-shell {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 24px 0;
  box-sizing: border-box;
}

.card {
  width: min(92vw, 420px);
  padding: 28px;
  background-color: #fff;
  border: 1px solid rgb(0 0 0 / 8%);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgb(0 0 0 / 14%), 0 4px 10px rgb(0 0 0 / 8%);
  box-sizing: border-box;
}

.logoContainer { display: flex; justify-content: center; }

/* Logo: stacked mark on small screens, wide color logo on desktop (as on the login page) */
#pp-logo {
  width: 100%;
  height: 100px;
  background: url("images/Logo_A_color.jpg") no-repeat;
  background-size: contain;
}
@media (min-width: 992px) {
  #pp-logo {
    margin-top: 25px;
    width: 350px;
    height: 60px;
    background-image: url("images/pp-logo-color.jpg");
    background-size: cover;
  }
}

.brandMessageDetails {
  text-align: center;
  font-size: 15px;
  font-weight: normal;
  margin: 6px 0 18px;
  color: #5f6368;
}

/* The message that replaces the login form */
.signin-message { text-align: center; padding: 6px 4px 2px; }

.signin-message h1 {
  font-size: 1.35rem;
  font-weight: 600;
  color: #1f2933;
  margin: 0 0 10px;
}

.signin-message p {
  font-size: 14px;
  line-height: 1.6;
  color: #5f6368;
  margin: 0;
}

/* Social row (circular brand icons, hover fill) */
#social { display: flex; justify-content: center; gap: 12px; margin: 18px 0 2px; }

#social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  transition: background-color .3s ease;
}

#social a svg { width: 16px; height: 16px; transition: fill .3s ease; }

#social a.facebook  svg { fill: #385899; }
#social a.linkedin  svg { fill: #0a66c2; }
#social a.instagram svg { fill: #e4405f; }

#social a.facebook:hover  { background-color: #385899; }
#social a.linkedin:hover  { background-color: #0a66c2; }
#social a.instagram:hover { background-color: #e4405f; }
#social a:hover svg { fill: #fff; }

footer.fixed {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 30px;
  text-align: center;
  vertical-align: middle;
}