/* app/assets/stylesheets/sign-up.css */

/* Center everything and prevent awkward scrolling */
.auth-page {
  min-height: 100svh;           /* mobile-safe viewport unit */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;           /* small breathing room, still fits */
  background: var(--bs-body-bg, #f8f9fa);
}

/* Fixed, pleasant max-width so it never hugs the left on mobile */
.auth-box {
  width: 100%;
  max-width: 420px;             /* adjust to taste (400–480px is typical) */
  margin: 0 auto;
}

/* Logo sizing */
.auth-page .centered-logo { width: clamp(96px, 18vw, 140px); height: auto; }

/* Round the outer card and ensure inner edges clip to the curve */
.auth-card {
  border-radius: 2rem;   /* bigger outer curve */
  overflow: hidden;      /* makes inner corners appear rounded */

  /* Enable container queries on the card */
  container-type: inline-size;
  container-name: auth;
}

/* Inner white area mirrors the curve */
.auth-card .card-body { border-radius: inherit; }

/* --- Container query-driven refinements --- */
@container auth (max-width: 360px) {
  .auth-card .card-body { padding: 1rem 1.25rem; }
  .auth-card .form-control-lg { font-size: 0.95rem; }
  .auth-card .btn { padding-block: .7rem; }
}

@container auth (min-width: 420px) {
  .auth-card .card-body { padding: 1.5rem 1.75rem; }
}

@container auth (min-width: 560px) {
  .auth-card .card-body { padding: 2rem 2.25rem; }
  .auth-card .h4, .auth-card h1, .auth-card .card-title { font-size: 1.35rem; }
}

/* Keep inputs comfortably large on desktops */
@media (min-width: 992px) {
  .auth-card .form-control-lg {
    font-size: 1rem;
    padding-top: .6rem;
    padding-bottom: .6rem;
  }
}

/* ---- Password toggle (eye button) ---- */
.password-field { position: relative; }

.password-field .password-reveal-btn {
  position: absolute;
  right: .625rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  padding: .25rem;
  line-height: 1;
  background: transparent;
  color: #9aa0a6;                 /* lighter by default */
  cursor: pointer;
  transition: color .15s ease;
  -webkit-tap-highlight-color: transparent; /* remove iOS blue tap highlight */
}

/* Hover/focus/active: only color change, no blue ring */
.password-field .password-reveal-btn:hover,
.password-field .password-reveal-btn:focus,
.password-field .password-reveal-btn:focus-visible,
.password-field .password-reveal-btn:active {
  color: #6c757d;
  outline: none;
  box-shadow: none;
  border-radius: .375rem;
}

/* Darker when pressed (i.e., password visible) */
.password-field .password-reveal-btn[aria-pressed="true"] {
  color: #343a40;                  /* darkest when showing */
}

/* Ensure the button stays tappable without shifting layout */
.password-field .form-control {
  padding-right: 2.25rem;          /* space for the eye */
}