/* ============================================================
   ACCOUNTS: SIGNUP (MATCH LOGIN LOOK + UI LOCK TO CONTAINED IMAGE)
   File: accounts/static/accounts/css/signup.css
   ============================================================ */

html, body{
  height: 100%;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #000;
}

*, *::before, *::after{ box-sizing: border-box; }

.signup-wrap{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000;
}

.signup-stage{
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}

.signup-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.signup-form{
  position: absolute;
  inset: 0;
}

/* ---- Design knobs ---- */
:root{
  --ui-scale: 1;

  --ui-width: clamp(260px, 30vw, 480px);
  --ui-gap: clamp(8px, 1.3vh, 14px);
  --ui-input-h: 32px;
  --ui-btn-h: 32px;
  --ui-font: 14px;

  --sp-gold:  #f6c25b;
  --sp-ember: #ff7a2f;
  --sp-wood:  #2a140b;
  --sp-wood2: #3a1c0f;
  --sp-teal:  #18b8b0;
}

/* ============================================================
   FORM CONTAINER
   ============================================================ */

.login-ui{
  position: fixed;
  transform: translate(-50%, -50%);
  width: calc(var(--ui-width) * var(--ui-scale));

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--ui-gap) * var(--ui-scale));

  z-index: 10;
}

.login-ui .field{
  position: relative;
}

/* ============================================================
   INPUTS
   ============================================================ */

.signup-form input[type="text"],
.signup-form input[type="password"]{
  width: 100%;
  height: calc(var(--ui-input-h) * var(--ui-scale));

  border-radius: 999px;
  border: 1px solid rgba(246, 194, 91, 0.45);
  background: linear-gradient(180deg, rgba(42,20,11,.82), rgba(18,9,6,.78));
  color: rgba(255,247,235,.92);

  padding: 0 calc(18px * var(--ui-scale));
  font-size: calc(var(--ui-font) * var(--ui-scale));

  outline: none;

  box-shadow:
    0 12px 28px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.signup-form input::placeholder{
  color: rgba(246, 194, 91, 0.70);
}

.signup-form input:focus{
  border-color: rgba(24, 184, 176, 0.75);
  box-shadow:
    0 14px 32px rgba(0,0,0,0.5),
    0 0 0 4px rgba(24,184,176,.12),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

/* Password toggle */
.toggle-password{
  position: absolute;
  right: calc(14px * var(--ui-scale));
  top: 50%;
  transform: translateY(-50%);

  background: transparent;
  border: none;
  padding: 0;

  color: rgba(255,255,255,.75);
  font-size: calc(18px * var(--ui-scale));
  cursor: pointer;
  line-height: 1;
}

.toggle-password:hover{
  color: rgba(255,255,255,.95);
}

.signup-form input[type="password"]{
  padding-right: calc(44px * var(--ui-scale));
}

/* ============================================================
   BUTTONS — CENTERED + 1/3 WIDTH
   ============================================================ */

.login-btn{
  /* center under inputs */
  width: calc(100% / 3);
  min-width: 180px;
  max-width: 260px;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  transform: translateX(0px);  
  position: static;
  float: none;

  height: calc(var(--ui-btn-h) * var(--ui-scale));

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  border-radius: 999px;
  border: 1px solid rgba(246, 194, 91, 0.55);

  background: linear-gradient(
    180deg,
    rgba(255,122,47,.96),
    rgba(246,194,91,.96)
  );

  color: rgba(26,12,6,.95);
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  text-decoration: none;

  font-size: calc(13px * var(--ui-scale));
  line-height: 1;

  cursor: pointer;

  box-shadow:
    0 16px 34px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.25);

  transition:
    transform .12s ease,
    filter .12s ease,
    box-shadow .12s ease;
}

.auth-actions{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10px * var(--ui-scale));
}

.login-btn:hover{
  filter: brightness(1.06) saturate(1.05);
  box-shadow:
    0 18px 40px rgba(0,0,0,.52),
    0 0 0 4px rgba(24,184,176,.10),
    inset 0 1px 0 rgba(255,255,255,.28);
}

.login-btn:active{
  transform: scale(.97);
}

/* ============================================================
   HEADINGS
   ============================================================ */

.auth-heading{
  text-align: center;
  margin-bottom: calc(6px * var(--ui-scale));
}

.auth-title{
  font-weight: 950;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: calc(16px * var(--ui-scale));
  color: rgba(0, 0, 0, 0.98);
  text-shadow: 0 2px 0 rgba(234, 219, 219, 0.55);
}

.auth-sub{
  margin-top: calc(4px * var(--ui-scale));
  font-size: calc(14px * var(--ui-scale));
  color: rgba(0, 0, 0, 0.78);
}

/* ============================================================
   ERRORS
   ============================================================ */

.errorlist{
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  color: rgba(255, 220, 220, 0.95);
  font-size: calc(12px * var(--ui-scale));
  text-align: center;
}

.errorlist li{
  margin: 0;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 720px){
  html, body{
    overflow: auto !important;
  }
}