/* From login.php style block 1 */
html, body {
  height: 100%;
  margin: 0;
}
body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(180deg, rgba(224,242,254,0.35), rgba(240,249,255,0.35)),
              url("../../beach-view.jpg") no-repeat center center fixed;
  background-size: cover;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Reserve space so fixed footer doesn't cover content */
  --footer-height: 64px;
  padding-bottom: calc(var(--footer-height) + 12px);
}

main.site-content {
  flex: 1 0 auto;
  display: block;
}
.header {
  background: linear-gradient(90deg, #082f49, #075985);
  color: #e0f2fe;
  padding: 14px 20px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.hero {
  max-width: 760px;
  margin: 18px auto 0px;
  text-align: center;
  padding: 6px 12px;
  
  
}
.hero h2 {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size: 34px;
  margin: 6px 0 6px;
  color: #0f172a;
  font-weight: 800;
}
.container-center {
  display:flex;
  justify-content:center;
  padding: 0 12px;
  margin-top: 0;
}
.login-wrap {
  width: 100%;
  max-width: 520px;
  padding-bottom: 40px;
}
.card {
  position: relative;
  background: linear-gradient(180deg, #f8fcff, #e0f2fe);
  padding: 44px 28px 28px;
  border-radius: 14px;
  border: none;
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
  margin-top: 0;
}

.form-label {
  color: #0c4a6e;
  font-weight: 600;
}
.form-control {
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  padding: 12px 14px;
  background: rgba(255,255,255,0.95);
}
.btn-primary {
  background: linear-gradient(180deg, #0ea5e9, #0284c7);
  border: none;
  border-radius: 10px;
  padding: 12px 20px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(14,165,233,0.22);
  width: 50%;
  display: block;      
  margin: 0 auto; 
}

.alert-danger {
  background: #ffecec;
  border: none;
  color: #7a2a1f;
  font-weight: 600;
  border-radius: 8px;
}
.alert-success {
  background: #eef6ea;
  border: none;
  color: #1e6b2e;
  font-weight: 600;
  border-radius: 8px;
}
.login-foot {
  text-align: center;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 700;
  color: #0284c7;
}

.login-foot .forgot-link {
  text-align: center;
  margin-top: 14px;
  color: #0284c7;
  font-weight: 700;
}
.login-foot .forgot-link:hover {
  color: #0d6efd !important;
  font-weight: 700;
}
.login-foot .signup-link {
  text-align: center;
  margin-top: 14px;
  color: #0d6efd;
  font-weight: 700;
}
.login-foot .signup-link:hover {
  color: #0d6efd !important;
  text-decoration: underline !important;
  font-weight: 700;
}

.input-group-text {
  background: transparent;
  border-left: none;
  cursor: pointer;
}
.input-group .form-control {
  border-right: none;
}

footer {
  background: #082f49;
  color: #e6d5c6;
  text-align: center;
  padding: 12px 16px;
  font-size: 13px;
  width: 100%;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.18);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  height: var(--footer-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 600px) {
  .hero h2 { font-size: 26px; }
  .avatar { width: 100px; height: 100px; top:-50px; }
  .login-wrap { padding: 0 8px; }
  .card { padding: 36px 18px 18px; }
}