#byb-register-page {
  font-family: Montserrat, sans-serif;

  & cloudy-content-wrapper {
    flex-direction: column;
  }

  & register-hero {
    display: block;
    background: linear-gradient(#071127d9, #071127d9), url("https://asset7.net/GeniusNetwork/WinJoesVan/branded-background.png?10") center / cover no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    padding: 4rem 2rem 6rem;
  }

  & register-content {
    display: block;
    max-width: 32rem;
    margin: 0 auto;
  }

  & form {
    background: #fff;
    border-radius: 1.5rem;
    padding: 2.5rem;
    box-shadow: 0 4px 24px #0003;

    @media (width >= 768px) {
      padding: 3rem;
    }
  }

  & register-header {
    display: block;
    text-align: center;
    margin-bottom: 2rem;

    & h2 {
      font-size: 1.75rem;
      font-weight: 800;
      color: #1d1d1f;
      margin: 0 0 .5rem;

      @media (width >= 768px) {
        font-size: 2rem;
      }
    }

    & p {
      color: #64748b;
      margin: 0;
      font-size: .9375rem;
    }
  }

  & form-field {
    display: block;
    margin-bottom: 1.5rem;
  }

  & bux-input-text-string {
    & label {
      font-size: .75rem;
      font-weight: 700;
      color: #333;
      text-transform: uppercase;
      letter-spacing: .1em;
    }

    & input {
      background: #fffdf5;
      padding: .75rem 1rem;
      border-radius: .75rem;
      border: 1px solid #d1d5db;
      font-size: 1rem;
      color: #0f172a;
      transition: border-color .15s, box-shadow .15s;
      box-shadow: none;

      &::placeholder {
        color: #9ca3af;
      }

      &:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px #3b82f626;
      }

      &:invalid {
        border-color: #f87171;
        background: #fef2f2;
        box-shadow: 0 0 0 2px #f8717126;
      }
    }
  }

  & consent-section {
    display: block;
    margin-bottom: 2rem;

    & label.consent-label {
      display: flex;
      align-items: flex-start;
      gap: .75rem;
      cursor: pointer;

      & input[type="checkbox"] {
        margin-top: .25rem;
        width: 1.25rem;
        height: 1.25rem;
        flex-shrink: 0;
      }

      & span {
        font-size: .875rem;
        color: #475569;
        line-height: 1.5;

        & a {
          color: #2563eb;
          font-weight: 600;

          &:hover {
            color: #1d4ed8;
          }
        }
      }
    }
  }

  & api-cf-turnstile-widget {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
  }

  & form-actions {
    display: flex;
    justify-content: center;

    & button[type="submit"] {
      padding: .875rem 2.5rem;
      border-radius: .75rem;
      border: none;
      background: #f97316;
      color: #fff;
      font-weight: 700;
      font-size: 1.125rem;
      cursor: pointer;
      box-shadow: 0 4px 6px -1px #0000001a;
      transition: transform .15s, background-color .15s;

      &:hover {
        background: #ea580c;
        transform: scale(1.02);
      }

      &:active {
        transform: scale(.97);
      }

      & i {
        margin-right: .5rem;
      }
    }
  }

  & error {
    display: block;
    text-align: center;
    color: #ef4444;
    font-weight: 600;

    &:empty {
      display: none;
    }
  }

  & login-link {
    display: block;
    text-align: center;
    margin-top: 1.5rem;

    & p {
      color: #ffffffb3;
      margin: 0;

      & a {
        color: #fdb338;
        font-weight: 600;

        &:hover {
          color: #ffc94d;
        }
      }
    }
  }
}

api-cf-turnstile-widget {
  display: flex;
  align-items: flex-start;
  gap: .75rem;

  & > .x-error {
    display: none;
    padding: .375rem .625rem;
    color: var(--color-danger, #c00);
    background: var(--color-danger-bg, #fef2f2);
    border: 1px solid var(--color-danger-border, #fca5a5);
    border-radius: 4px;
    font-size: .75rem;
    line-height: 1.2;
    align-self: center;

    & > a {
      margin-left: .375rem;
      font-size: .75rem;
      cursor: pointer;
    }

    &:has( > span:not(:empty)) {
      display: block;
    }
  }
}

bux-input-text-string {
  margin: 0 0 1rem;
  display: block;

  & label {
    margin-bottom: .5rem;
    font-weight: bold;
    display: inline-block;
  }

  & input {
    padding: .375rem .75rem;
    width: 100%;
    text-align: left;
    display: block;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #f0f8ff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    box-shadow: 0 0 10px #0000001a;
  }

  & input:invalid {
    background-color: #ffb6c1;
    border-color: red;
  }

  & div.help-text {
    margin-top: .5rem;
    font-size: .875em;
  }
}