/* =========================
   Theme-driven signup.css
   (uses CONFIG.THEME.CSS_VARS)
   ========================= */

/* Fallbacks if JS doesn’t set CSS vars for any reason */
:root {
  --brand-primary: #0b5fff;
  --brand-accent: #1ec8a5;
  --brand-text: #0f172a;
  --brand-bg: #f2f2f2;

  --card-bg: #9e9e9e;
  --button-bg: #f8e437;
  --button-text: #1d2008;
  --button-radius: 4px;
}

/* REMOVE the old global button rule that breaks theming */
/* button { color: blue; } */

html, body {
  height: 100%;
  margin: 0;
  background: var(--brand-bg);
  color: var(--brand-text);
  font-family: Roboto, Helvetica Neue, sans-serif;
}

.form-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Logo / heading */
.logo-container {
  text-align: center;
  margin-bottom: 5px;
}

.logo-container img {
  width: 30%;
  max-width: 100%;
}

.welcome-text {
  text-align: center;
  margin-bottom: 30px;
  font-size: 1em;
  color: rgba(255, 255, 255, 0.849);
}

/* Form */
#signup-form {
  width: 585px;
  padding: 20px;

  border: 2px solid var(--card-bg);
  background-color: var(--card-bg);

  border-radius: 5px; /* keep as-is, or switch to var(--button-radius) if you want */
  display: flex;
  flex-direction: column;
  gap: 10px;

  margin-top: 20px;
  margin-bottom: 20px;
}

#signup-form input[type="text"],
#signup-form input[type="email"] {
  width: 100%;
  padding: 10px 10px;
  box-sizing: border-box;

  border: none;
  background: transparent;
  border-bottom: 1px solid #ccc;

  color: rgba(255, 255, 255, 0.849);
  font-size: 16px;
  outline: none;
}

#signup-form input[type="text"]:focus,
#signup-form input[type="email"]:focus {
  outline: none;
}

/* You use placeholder=" " (space) for floating labels, so placeholder text isn’t visible anyway */
#signup-form input[type="text"]::placeholder,
#signup-form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.849);
  opacity: 1;
}

/* Button */
#signup-form #signup-button {
  width: 100%;
  padding: 12px;
  box-sizing: border-box;

  border: 1px solid #ccc;
  border-radius: var(--button-radius);

  font-size: 16px;
  font-weight: 700;
  margin-top: auto;

  background-color: var(--button-bg);
  color: var(--button-text);

  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

#signup-form #signup-button:hover {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
}

/* Layout rows/cols */
.row {
  display: flex;
  justify-content: start;
  align-items: flex-end; /* you had this in a second .row block; merged here */
}

.column {
  flex: 50%;
  padding: 10px;
}

/* Floating labels */
.field-wrapper {
  position: relative;
  margin-bottom: 20px;
}

.floating-label {
  color: rgba(220, 220, 220, 0.849);

  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 16px;
  transition: 0.2s ease all;
}

.floating-label[for]::after {
  content: " *";
  display: inline;
  color: rgba(220, 220, 220, 0.849);
}

.field-wrapper input:not([required]) ~ .floating-label::after {
  content: "";
}

.field-wrapper input:focus ~ .floating-label,
.field-wrapper input:not(:placeholder-shown) ~ .floating-label {
  top: -6px;
  left: 14px;
  font-size: 12px;
  opacity: 1;
}

/* Region label + select */
.static-label {
  font-size: 16px;
  margin-bottom: 8px;
  display: block;
  color: rgba(220, 220, 220, 0.849);
}

/* keep dropdown aligned with label */
.custom-select,
.static-label {
  margin-bottom: 0;
}

.custom-select {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;

  border: 1px solid #ccc;
  border-radius: 4px;

  color: rgba(255, 255, 255, 0.849);
  background-color: var(--card-bg);

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background-image: url("data:image/svg+xml;utf8,<svg fill='rgba(255,255,255,0.849)' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.5em top 50%;
  background-size: 1.5em auto;

  outline: none;
}

.custom-select option {
  color: rgba(255, 255, 255, 0.849);
  background-color: var(--card-bg);
}

/* Login link */
.login-link-container {
  text-align: center;
  margin-top: 20px;
  font-size: 13px;
  color: rgba(230, 230, 230, 0.849);
  font-weight: normal;
}

.login-link-container a {
  color: white;
  font-weight: 700;
  text-decoration: none;
}

.login-link-container a:hover {
  text-decoration: underline;
}

.captcha {
  align-self: center;
}

/* Message box */
.form-message {
  display: none;
  padding: 12px;
  margin-bottom: 16px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
}

.form-message.success {
  display: block;
  background-color: #e6ffed;
  color: #2f855a;
  border: 1px solid #9ae6b4;
}

.form-message.error {
  display: block;
  background-color: #ffe6e6;
  color: #c53030;
  border: 1px solid #feb2b2;
}

/* Success panel */
#success-text {
  display: none;
  height: inherit;
  color: white;
}

#success-text #signup-form {
  width: 500px;
  height: 276px;
  padding: 43px;
}

/* Mobile */
@media (max-width: 768px) {
  .form-section {
    flex: 1;
    padding: 0px;
  }

  #signup-form {
    width: 100%;
    margin: 0;
    border-radius: 0px;
    min-height: 100%;
    padding: 5px;
  }

  #success-text #signup-form {
    width: 65%;
    margin: 94px;
    border-radius: 0px;
    min-height: 200px;
    padding: 48px;
    text-align: center;
  }

  .welcome-mobile {
    display: block;
  }
}