/* ==========================================================================
   AutoCheckView — Register UI (Production)
   File: /public/assets/css/register.css
   Depends on: /public/assets/css/login.css
   Purpose:
   - Keep SAME layout as login.php (auth-shell / auth-side / auth-main / auth-card)
   - Add small register-specific polishing: phone prefix, password meter, CTA style
   ========================================================================== */


/* ==========================================================================
   1) Small form tweaks for register page
   ========================================================================== */

/* Phone prefix style (Bootstrap input-group-text) */
.phone-prefix{
  background:#f6f8fb;
  border:1px solid rgba(31,41,55,.12);
  border-right:none;
  font-weight:800;
  color:rgba(17,24,39,.78);
}

/* Make register submit CTA look more “create account” */
.btn-create-account{
  font-weight:900;
  letter-spacing:.2px;
  border-radius:12px;
  padding:14px 16px;

  /* Green accent to separate from Sign In blue */
  background: linear-gradient(135deg, var(--acv-accent) 0%, #12a38a 100%);
  border:none;
  color:#06221d;
  box-shadow: 0 10px 24px rgba(25,193,165,.28);
}

.btn-create-account:hover{
  filter: brightness(.98);
}

/* Add a tiny spacing for long forms */
.auth-card{
  padding-bottom: 10px;
}


/* ==========================================================================
   2) Password strength meter (UI only)
   ========================================================================== */
.pw-meter{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.pw-meter-bar{
  width:100%;
  height:10px;
  border-radius:999px;
  background:rgba(17,24,39,.08);
  overflow:hidden;
  border:1px solid rgba(17,24,39,.08);
}

.pw-meter-bar > span{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(23,119,255,1), rgba(25,193,165,1));
  transition: width .2s ease;
}


/* ==========================================================================
   3) Minor readability tweaks on smaller screens
   ========================================================================== */
@media (max-width: 992px){
  .side-title{
    font-size: 1.85rem;
  }
}