.signup-page-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: calc(100vh - 60px - 100px);
            padding: var(--padding-large);
            box-sizing: border-box;
            width: 100%;
            font-family: var(--secondary-font);
        }
        .signup-container {
          background-color: #fff;
          padding: var(--padding-extra-large);
          border-radius: var(--border-radius-normal);
          box-shadow: var(--btn-shadow);
          max-width: 550px;
          width: 90%;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: var(--padding-normal);
        }
        .error-message {
            color: red;
            font-size: var(--fs-small);
            display: block;
            text-align: left;
             width: 100%;
             margin-top: 2px;
        }
        .signup-container .form-group {
             width: 100%;
             margin-bottom: 0;
        }
         .signup-container label {
             display: block;
             margin-bottom: var(--margin-extra-small);
             color: #333;
             font-weight: 500;
             font-size: var(--fs-base);
             text-align: left;
        }
         .signup-container input[type="text"],
         .signup-container input[type="email"],
         .signup-container input[type="tel"],
         .signup-container input[type="password"] {
            width: 100%;
            padding: var(--padding-small) var(--padding-normal);
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: var(--border-radius-small);
            font-size: var(--fs-base);
            font-family: var(--secondary-font);
         }
         .signup-container .signup-button {
             margin-top: var(--margin-normal);
             width: auto;
         }
         .signup-container .login-link {
             text-align: center;
             margin-top: var(--margin-normal);
             font-size: var(--fs-base);
         }
          .signup-container .login-link a {
             color: var(--clr-primary);
             text-decoration: none;
             font-weight: 600;
         }
          .signup-container .login-link a:hover {
            text-decoration: underline;
         }
         .alert-danger {
             width: 100%;
             padding: var(--padding-normal);
             margin-bottom: var(--margin-normal);
             border-radius: var(--border-radius-small);
             text-align: center;
             font-size: var(--fs-base);
             background-color: #f8d7da;
             color: #721c24;
             border: 1px solid #f5c6cb;
         }