/* css/signup.css
   WIP Signup mock. Dark shell + plexus-friendly, with white card + black text,
   and all controls disabled. */

.signup-shell{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 991.98px){
  .signup-shell{ grid-template-columns: 1fr; }
}

/* WIP banner */
.wip-banner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0,123,255,0.10);
  border: 1px solid rgba(0,123,255,0.25);
  margin-bottom: 16px;
}

.wip-left{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.wip-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #00a3ff;
  box-shadow: 0 0 16px rgba(0,163,255,0.35);
}

.wip-title{
  color: rgba(255,255,255,0.92);
  font-weight: 900;
}

.wip-sub{
  color: rgba(255,255,255,0.70);
  font-size: 0.95rem;
}

/* Main card */
.signup-card{
  background: rgba(255,255,255,0.98);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 24px 70px rgba(0,0,0,0.35);
  overflow: hidden;
}

.signup-head{
  padding: 18px 18px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.signup-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.brand-mark{
  font-size: 1.3rem;
}

.brand-stack .brand-name{
  font-weight: 900;
  color: #0b0f14;
  line-height: 1.05;
}

.brand-stack .brand-tag{
  color: rgba(0,0,0,0.60);
  font-size: 0.92rem;
}

.signup-title{
  font-size: 1.55rem;
  font-weight: 950;
  color: #0b0f14;
  margin-top: 6px;
}

.signup-desc{
  color: rgba(0,0,0,0.65);
  margin-top: 6px;
}

.signup-form{
  padding: 16px 18px 18px;
}

/* Ensure black text inside the card even if global theme sets white */
.signup-card,
.signup-card *{
  color: #111;
}

.signup-form label{
  font-weight: 800;
  color: rgba(0,0,0,0.70);
}

.signup-form .form-control{
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(245,245,245,1);
  color: #111;
}

.signup-check{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 14px;
  color: rgba(0,0,0,0.65);
}

.signup-divider{
  position: relative;
  text-align: center;
  margin: 14px 0;
}

.signup-divider::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0,0,0,0.12);
}

.signup-divider span{
  position: relative;
  background: rgba(255,255,255,0.98);
  padding: 0 10px;
  color: rgba(0,0,0,0.55);
  font-weight: 800;
  font-size: 0.92rem;
}

.signup-foot{
  margin-top: 14px;
  text-align: center;
  color: rgba(0,0,0,0.65);
}

.disabled-link{
  color: rgba(0,123,255,0.75);
  font-weight: 900;
  cursor: not-allowed;
  margin-left: 6px;
  text-decoration: underline;
}

/* Disable look: make it obvious WIP */
.signup-form :disabled{
  opacity: 0.65;
  cursor: not-allowed !important;
}

/* Side panel */
.signup-side{
  display: grid;
  gap: 14px;
}

.side-card{
  background: rgba(30,30,30,0.92);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 16px;
}

.side-card.subtle{
  background: rgba(18,18,18,0.90);
}

.side-title{
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  margin-bottom: 10px;
}

.side-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-list li{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.78);
}

.side-list li:first-child{ border-top: 0; padding-top: 0; }

.side-bullet{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,123,255,0.95);
  box-shadow: 0 0 14px rgba(0,123,255,0.25);
}

.side-note{
  margin-top: 12px;
  color: rgba(255,255,255,0.70);
  font-size: 0.95rem;
}

.status-row{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.status-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ffb020;
  box-shadow: 0 0 14px rgba(255,176,32,0.25);
  margin-top: 6px;
}

.status-main{
  color: rgba(255,255,255,0.92);
  font-weight: 900;
}

.status-sub{
  color: rgba(255,255,255,0.70);
  font-size: 0.95rem;
  margin-top: 2px;
}