body, html {
    height: 100%;
    margin: 0;
    font-family: "Montserrat", sans-serif;
    /* Uses cover to ensure background always fills the viewport */
    background: url("/compass/img/mountains.avif") no-repeat center center fixed;
    background-size: cover;
    color: #fff;
    overflow-x: hidden; /* Prevents horizontal scroll from responsive layout issues */
    /*overflow-y: auto;*/
}

body {
    display: flex;             /* 1. Enable Flexbox */
    flex-direction: column;    /* 2. Stack elements (content then footer) vertically */
    min-height: 100vh;         /* 3. Ensure the body is at least the full viewport height */
    overflow-y: auto;          /* 4. Put scroll back on the body for long pages */
}

.content-wrap {
    flex-grow: 1; /* THE KEY RULE: Takes up all remaining space */
    position: relative; /* May be useful for positioning children relative to content */
    z-index: 2; /* Keep content above the fixed overlay */
    display: flex;             /* 1. Enable Flexbox on the wrapper */
    justify-content: center;   /* 2. Center children horizontally */
    align-items: center;       /* 3. Center children vertically */
    padding: 20px 0;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* Semi-transparent black layer */
    z-index: 1;
}

.register-container {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 450px;
  padding: 2rem;
  background: rgba(0,0,0,0.45);
  border-radius: 1rem;
}

.register-container h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #f6f8f8 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.register-container .form-control {
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  padding: 0.75rem;
}

.register-container .btn {
  min-width: 140px;
  font-weight: 600;
  margin: 0.5rem;
}

.form-footer {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #ddd;
}

@media (max-width: 576px) {
  .register-container h1 {
    font-size: 2rem;
  }
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  cursor: pointer;

  color: rgba(117, 115, 115, 0.9); /* brighter base */
  opacity: 0.75;

  transition: opacity 0.2s ease, color 0.2s ease;
}

.password-toggle:hover {
  opacity: 1;
  color: #c58181;
}

.password-toggle i {
  font-size: 1.1rem;
}