/* =========================
   GothDB – Register Page CSS
   ========================= */

:root{
  --goth-panel-bg: rgba(10,10,10,0.82);
  --goth-panel-border:#3e2d54;
  --goth-accent:#b48aff;        /* primary purple */
  --goth-accent-dark:#885dd2;   /* hover purple */
  --goth-text:#e7e5f2;
  --goth-text-muted:#bdb8cb;
  --goth-radius:.9rem;
  --goth-gap:1rem;
}

/* ---------- Card ---------- */
.container{
  max-width: 520px;
  margin: clamp(4rem,12vh,7rem) auto 2.5rem;
  padding: 2.6rem 2.2rem 2rem;
  background: var(--goth-panel-bg);
  border: 1px solid var(--goth-panel-border);
  border-radius: var(--goth-radius);
  backdrop-filter: blur(3px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 8px 28px rgba(0,0,0,.55);
  font-family: "EB Garamond", serif;
  color: var(--goth-text);
}

.container h1{
  text-align:center;
  margin-bottom: calc(var(--goth-gap) * 1.6);
  font-weight:700;
  letter-spacing:.3px;
  color: var(--goth-accent);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
}

.form_with_extra { margin-bottom: calc(var(--goth-gap) * 1.2); }

/* ---------- Fields ---------- */
.form-group{ margin-bottom: var(--goth-gap); }

.form-group label{
  display:block;
  margin-bottom:.35rem;
  color: var(--goth-text);
  font-size:1rem;
}

form input[type="text"],
form input[type="email"],
form input[type="password"]{
  width:100%;
  padding:.62rem .8rem;
  font-size:1rem;
  color: var(--goth-text);
  background:#151515;
  border:1px solid #2b2b2b;
  border-radius: .7rem;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

form input[type="text"]::placeholder,
form input[type="email"]::placeholder,
form input[type="password"]::placeholder{
  color:#6c6a75;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus{
  outline:none;
  background:#121212;
  border-color: var(--goth-accent);
  box-shadow:0 0 0 2px rgba(180,138,255,.25);
}

/* Autofill */
form input:-webkit-autofill{
  -webkit-text-fill-color: var(--goth-text);
  -webkit-box-shadow: 0 0 0 1000px #151515 inset;
  caret-color: var(--goth-text);
}

/* ---------- Turnstile ---------- */
.cf-turnstile{
  display:flex;
  justify-content:center;
  margin: calc(var(--goth-gap) * 1.1) 0 calc(var(--goth-gap) * 1.2);
}

/* ---------- Submit Button + Inline Spinner ---------- */
.submit_button{
  display:block;
  width:100%;
  padding:.8rem 1rem;
  border:none;
  border-radius: .9rem;
  background: var(--goth-accent);
  color:#0c0b10;                 /* text & spinner color */
  font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;
  transition: background .22s ease, transform .12s ease, filter .22s ease;
}

.submit_button:hover,
.submit_button:focus{ background: var(--goth-accent-dark); }
.submit_button:active{ transform: translateY(1px); }

/* make button center label & spinner perfectly */
#register_button{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  position:relative;
}

/* Stand-alone Bootstrap-like spinner (no Bootstrap needed) */
.spinner-border{
  display:none;                   /* shown only while requesting */
  width:1rem; height:1rem;
  border:.15em solid currentColor;  /* inherits button text color */
  border-right-color:transparent;
  border-radius:50%;
  animation: spinner-rotate .75s linear infinite;
}
@keyframes spinner-rotate{ to { transform: rotate(360deg); } }

/* HTMX toggling – works whether .htmx-request is on the form, button, or spinner */
.htmx-request .spinner-border,
.spinner-border.htmx-request{ display:inline-block; }

.htmx-request #register_button .btn-label,
#register_button.htmx-request .btn-label{
  opacity:0; transform: translateY(2px);
}

.htmx-request #register_button,
#register_button.htmx-request{
  pointer-events:none; filter:saturate(.9);
}

/* A11y helper for hidden status text */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Status area ---------- */
#register_status{ margin-top: 1rem; min-height: 0; }

.success_message{
  margin-top: var(--goth-gap);
  padding: 0.95rem 1rem;
  background: rgba(40,167,69,0.15);
  border: 1px solid rgba(40,167,69,0.33);
  border-radius: .75rem;
  color: var(--goth-text);
}
.success_message p{ margin:.45rem 0; text-align:left; }

.error_message{
  margin-top: var(--goth-gap);
  padding: 0.95rem 1rem;
  background: rgba(220,53,69,0.15);
  border: 1px solid rgba(220,53,69,0.35);
  border-radius: .75rem;
  color: var(--goth-text);
}
.error_message p{ margin:.45rem 0; text-align:left; }

/* ---------- Footer link ---------- */
.container > p{
  text-align:center;
  margin-top: calc(var(--goth-gap) * 1.2);
  color: var(--goth-text-muted);
}

.container a{
  color: var(--goth-accent);
  text-decoration:none;
}
.container a:hover{ text-decoration:underline; }

/* ---------- Mobile ---------- */
@media (max-width: 480px){
  .container{ padding: 2rem 1.25rem 1.5rem; }
}