/* Sign up page styles */



    #sign-up-tab-content input,
    #sign-up-tab-content textarea,
    #sign-up-tab-content select {
        background-color: white !important;
        color: black !important;
    }

    #sign-up-tab-content input::placeholder,
    #sign-up-tab-content textarea::placeholder {
        color: white !important;
        opacity: 0.7 !important;
    }

    #sign-up-tab-content label {
        color: white !important;
    }

    #sign-up-tab-content p.text-muted {
        color: white !important;
    }

    #sign-up-tab-content h5 {
        color: #ffffff !important;
    }

  

    /* Tabs styling - segmented control with a sliding pill indicator */
    #signup-tabs-wrapper {
        position: relative;
        display: flex;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 999px;
        padding: 4px;
        margin: 10px 0;
    }

    #sign-up-tabs {
        position: relative;
        display: flex;
        width: 100%;
        background: transparent;
        border: none;
        padding: 0;
    }

    #sign-up-tabs .nav-item {
        flex: 1 1 0;
    }

    #sign-up-tabs .nav-link {
        position: relative;
        z-index: 1;
        width: 100%;
        color: white !important;
        border: none !important;
        background: transparent !important;
        border-radius: 999px !important;
        font-weight: 600;
        padding: 0.65rem 1rem;
        transition: color 0.25s ease;
    }

    #sign-up-tabs .nav-link:hover {
        color: white !important;
    }

    #sign-up-tabs .nav-link.active {
        color: #212529 !important;
    }

  
    #signup-role-select.role-not-selected #sign-up-tabs .nav-link.active {
        color: white !important;
    }

    /* The sliding pill indicator that animates behind the selected tab */
    .signup-tab-indicator {
        position: absolute;
        top: 4px;
        bottom: 4px;
        left: 4px;
        width: calc((100% - 8px) / 3);
        background: white;
        border-radius: 999px;
        box-shadow: 0 0 0 2px var(--brand-teal);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
        opacity: 0;
        pointer-events: none;
        z-index: 0;
    }

    #signup-role-select:not(.role-not-selected) .signup-tab-indicator {
        opacity: 1;
    }

    /* Role status helper text shown above the tabs */
    .signup-role-status {
        color: white;
        opacity: 0.85;
        font-size: 0.95rem;
        margin-top: 0.35rem;
    }

    .signup-role-status .fa-circle-check {
        color: white;
    }

    /* Draw attention to the tabs until a role has been picked */
    #signup-role-select.role-not-selected #signup-tabs-wrapper {
        animation: signup-tabs-pulse 1.8s ease-in-out infinite;
    }

    @keyframes signup-tabs-pulse {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45);
        }
        50% {
            box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
        }
    }



    /* Hide the form completely until the user has explicitly chosen a role */
    #signup-role-select.role-not-selected #sign-up-tab-content {
        display: none;
    }

    .signup-lock-placeholder {
        display: none;
    }

    #signup-role-select.role-not-selected .signup-lock-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: 220px;
        color: white;
        font-weight: 600;
        font-size: 1.15rem;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    }

    .signup-lock-placeholder i {
        font-size: 2rem;
        margin-bottom: 0.5rem;
        opacity: 0.9;
    }