/* ============================================================
   register.css — Styles unique to the register page (register.blade.php)
   Requires: auth.css
   ============================================================ */

/* ── Two-column form grid ── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin-bottom: 14px;
}

.full-width {
  grid-column: span 2;
}

/* ── Password match feedback ── */
#match-text {
  display: none;
}

/* ── Strength meter ── */
.strength-container {
  margin-bottom: 20px;
}

.strength-meter {
  height: 3px;
  background: #e0dfd8;
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}

#meter-bar {
  height: 100%;
  width: 0%;
  transition: width 0.3s, background 0.3s;
}

#meter-bar.weak {
  background: #e74c3c;
  width: 25%;
}

#meter-bar.medium {
  background: #f1c40f;
  width: 50%;
}

#meter-bar.strong {
  background: #2ecc71;
  width: 100%;
}

/* ── Requirement badges ── */
.badge-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.badge {
  font-size: 9px;
  padding: 2px 8px;
  background: #e0dfd8;
  color: #888;
  border-radius: 10px;
  font-weight: 600;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.badge.valid {
  background: rgba(39, 174, 96, 0.1);
  color: #27ae60;
  border-color: rgba(39, 174, 96, 0.3);
}

/* ── Register button ── */
.btn-reg {
  width: 100%;
  background: #F5C518;
  border: none;
  border-radius: 4px;
  padding: 14px;
  font-size: 13px;
  font-weight: 700;
  color: #0d0d0d;
  cursor: pointer;
  text-transform: uppercase;
  position: relative;
  margin-top: 10px;
}

.btn-reg::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #C0392B;
  border-radius: 4px 0 0 4px;
}

.btn-reg:hover {
  background: #ffd22e;
}